/* ============================================================
   Delight CSS — Attempting Art
   Moments of joy that make the site feel alive and playful.
   ============================================================ */


/* ----------------------------------------------------------
   Scroll-reveal entrance animations
   JS adds .reveal-item, then .is-visible when in viewport.
   ---------------------------------------------------------- */

.reveal-item {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: opacity, transform;
}

.reveal-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Honor reduced motion — show everything immediately */
@media (prefers-reduced-motion: reduce) {
  .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}


/* ----------------------------------------------------------
   Site title hover wiggle
   ---------------------------------------------------------- */

@keyframes titleWiggle {
  0%,  100% { transform: rotate(0deg)   scale(1);    }
  20%        { transform: rotate(-2deg)  scale(1.03); }
  40%        { transform: rotate(2deg)   scale(1.03); }
  60%        { transform: rotate(-1deg)  scale(1.01); }
  80%        { transform: rotate(1deg)   scale(1.01); }
}

.site-title:hover {
  animation: titleWiggle 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline-block; /* needed for transform-origin */
}

@media (prefers-reduced-motion: reduce) {
  .site-title:hover { animation: none; }
}


/* ----------------------------------------------------------
   Nav link underline — spring snap on hover
   ---------------------------------------------------------- */

@keyframes underlineSnap {
  0%   { transform: scaleX(0);    transform-origin: left center; }
  60%  { transform: scaleX(1.12); transform-origin: left center; }
  100% { transform: scaleX(1);    transform-origin: left center; }
}

.greedy-nav .visible-links a:hover::before {
  animation: underlineSnap 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .greedy-nav .visible-links a:hover::before { animation: none; }
}


/* ----------------------------------------------------------
   Card 3D tilt — driven by CSS custom properties set in JS.
   Uses !important + loads after spacing-reduction.css to win cascade.
   ---------------------------------------------------------- */

.grid__item {
  transform-style: preserve-3d;
}

.grid__item:hover {
  transform:
    perspective(900px)
    translateY(-6px)
    rotateX(var(--tilt-x, 0deg))
    rotateY(var(--tilt-y, 0deg)) !important;
  transition: box-shadow 0.35s ease !important;
}


/* ----------------------------------------------------------
   Category / taxonomy tag bounce on hover
   ---------------------------------------------------------- */

@keyframes tagPop {
  0%,  100% { transform: scale(1);    }
  40%        { transform: scale(0.91); }
  70%        { transform: scale(1.09); }
}

.page__taxonomy-item a:hover,
.taxonomy__index a:hover {
  animation: tagPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  .page__taxonomy-item a:hover,
  .taxonomy__index a:hover { animation: none; }
}


/* ----------------------------------------------------------
   Button satisfying active press
   ---------------------------------------------------------- */

.btn:active {
  transform: translateY(2px) scale(0.96) !important;
  transition: transform 0.08s ease !important;
}


/* ----------------------------------------------------------
   Color swatch — satisfying bounce on hover
   ---------------------------------------------------------- */

@keyframes swatchBounce {
  0%,  100% { transform: scale(1);    }
  40%        { transform: scale(0.87); }
  70%        { transform: scale(1.14); }
}

.color-swatch:hover {
  animation: swatchBounce 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  .color-swatch:hover { animation: none; }
}


/* ----------------------------------------------------------
   Daily doodle images — warm lift on hover
   ---------------------------------------------------------- */

.daily-doodle-image:hover {
  transform: scale(1.02) rotate(0.6deg) !important;
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.15), 0 6px 16px rgba(13, 144, 226, 0.12) !important;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.35s ease !important;
}

@media (prefers-reduced-motion: reduce) {
  .daily-doodle-image:hover {
    transform: none !important;
  }
}


/* ----------------------------------------------------------
   Archive item title — color hint on row hover
   ---------------------------------------------------------- */

.archive__item:hover .archive__item-title a {
  color: var(--primary);
  transition: color 0.2s ease;
}