/*
 * Motion system (earthy-theme-motion round): scroll reveal, hover feedback,
 * the hero leaf drift and a visible focus ring. Everything here is inert —
 * zero opacity/transform change — the instant prefers-reduced-motion: reduce
 * applies, so the reduced-motion block at the bottom is load-bearing, not
 * decorative.
 */

/* ------------------------------------------------------------- scroll reveal */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease-out, transform 500ms ease-out;
  will-change: opacity, transform;
}

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

/* ------------------------------------------------------------------- hover */

@media (hover: hover) {
  .hover-lift {
    transition: transform 220ms ease-out, box-shadow 220ms ease-out;
  }
  .hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -12px rgba(42, 36, 29, 0.18);
  }

  .hover-glow {
    transition: box-shadow 220ms ease-out;
  }
  .hover-glow:hover {
    box-shadow: 0 0 0 4px var(--color-primary-fixed), 0 8px 24px -8px var(--color-primary);
  }

  .img-zoom {
    overflow: hidden;
  }
  .img-zoom img {
    transition: transform 400ms ease-out;
  }
  .img-zoom:hover img {
    transform: scale(1.04);
  }
}

/* --------------------------------------------------------- visible focus */

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-default);
}

/* ------------------------------------------------------------- hero leaf */

@keyframes leaf-drift {
  0% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-6px, 10px) rotate(-6deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.leaf-drift {
  animation: leaf-drift 24s ease-in-out infinite;
  transform-origin: center;
}

/* --------------------------------------------------------- logo reveal */

@keyframes logo-reveal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes logo-reveal-scale {
  from { transform: scale(0.85); }
  to { transform: scale(1); }
}
@keyframes logo-reveal-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

#logo-reveal {
  animation: logo-reveal-fade 1.5s ease-out forwards;
}
#logo-reveal.is-dismissing {
  animation: logo-reveal-out 300ms ease-in forwards;
}
#logo-reveal-img {
  animation: logo-reveal-scale 1.5s ease-out forwards;
}

/* --------------------------------------------------------- footer wind */

@keyframes footer-sway {
  0% { transform: rotate(calc(var(--sway-deg, 3) * -1deg)); }
  100% { transform: rotate(calc(var(--sway-deg, 3) * 1deg)); }
}

.footer-wind-el {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation-name: footer-sway;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: var(--sway-dur, 8s);
  animation-delay: var(--sway-delay, 0s);
}

.footer-wind.is-paused .footer-wind-el {
  animation-play-state: paused;
}

/* Budget: 12 animated elements desktop, 6 under 768px — the last 6 (the
   front grass-blade layer) are dropped rather than animated-but-hidden. */
@media (max-width: 767px) {
  .footer-wind-el:nth-of-type(n + 7) {
    display: none;
  }
}

/* ------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .leaf-drift {
    animation: none !important;
  }
  .hover-lift:hover,
  .img-zoom:hover img {
    transform: none !important;
  }
  .hover-lift,
  .hover-glow,
  .img-zoom img {
    transition: none !important;
  }
  #logo-reveal,
  #logo-reveal-img {
    animation: none !important;
  }
  .footer-wind-el {
    animation: none !important;
  }
}