html, body { margin: 0; padding: 0; }
body { overscroll-behavior: none; }

/* Lenis recommends disabling native smooth-scroll so it doesn't fight
   its own inertial scrolling. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* FAQ accordion answer collapse/expand (JS toggles max-height + the
   `is-open` class; see assets/site.js). */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.is-open .faq-answer {
  max-height: 20rem;
}
.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
  background: var(--faq-accent, #9FDB2A) !important;
}
.faq-icon svg { color: #14140F99; }
.faq-item.is-open .faq-icon svg { color: #14140F; }
.faq-item.is-open { border-color: color-mix(in srgb, var(--faq-accent, #9FDB2A) 33%, transparent); }

/* Mobile menu open/close */
#mobile-menu.is-open { display: block; }

/* Fade+slide-in reveal — plain CSS transition driven by an
   IntersectionObserver toggling this class (see assets/site.js). */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1), transform 0.6s cubic-bezier(0.22,1,0.36,1); }
.reveal.reveal-x { transform: translateX(-10px); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   Ambient decorative loops (glow drift, floating particles, product
   float) as pure CSS @keyframes instead of GSAP tweens — these run on
   every section whether it's near the viewport or not, and doing that
   many concurrent JS-driven tweens alongside the scroll-linked
   ScrollTrigger work was the main cause of scroll jank. CSS animations
   are compositor-driven and effectively free by comparison; GSAP stays
   reserved for the scroll-critical pin work. See assets/site.js.
   --------------------------------------------------------------------- */
@keyframes woli-glow-drift {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(20px, -16px) scale(1.06); }
  66%  { transform: translate(-14px, 12px) scale(0.96); }
  100% { transform: translate(0, 0) scale(1); }
}
.anim-glow { animation: woli-glow-drift var(--glow-duration, 18s) ease-in-out infinite; }

@keyframes woli-float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.anim-float { animation: woli-float-y 2.25s ease-in-out infinite; }

@keyframes woli-rise {
  0%   { transform: translateY(0); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.7; }
  100% { transform: translateY(-115vh); opacity: 0; }
}
.anim-rise {
  animation: woli-rise var(--rise-duration, 9s) linear infinite;
  animation-delay: var(--rise-delay, 0s);
}

@keyframes woli-icon-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes woli-icon-wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes woli-icon-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes woli-icon-wobble-wide { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(10deg); } }
.anim-icon-bob { animation: woli-icon-bob 2.4s ease-in-out infinite; }
.anim-icon-wobble { animation: woli-icon-wobble 2.2s ease-in-out infinite; }
.anim-icon-pulse { animation: woli-icon-pulse 2.6s ease-in-out infinite; }
.anim-icon-wobble-wide { animation: woli-icon-wobble-wide 3s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .anim-glow, .anim-float, .anim-rise,
  .anim-icon-bob, .anim-icon-wobble, .anim-icon-pulse, .anim-icon-wobble-wide { animation: none; }
}