/* ===========================
   Lumi — animations.css
   Keyframes + reduced-motion
   =========================== */

/* ----- Hero floating (breathing) ----- */
.floaty {
  animation: floaty 6s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(-6px) rotate(-0.4deg); }
  50%      { transform: translateY(10px) rotate(0.4deg); }
}

/* ----- Ticker scroll ----- */
.ticker__track {
  animation: ticker 38s linear infinite;
}
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ----- Bamboo stalk grow (initial) ----- */
.stalk {
  animation: stalk-grow 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes stalk-grow {
  0%   { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

/* ----- Bamboo subtle sway ----- */
.hero__bamboo .stalk,
.cta__bamboo .stalk {
  animation:
    stalk-grow 1.6s cubic-bezier(0.22, 1, 0.36, 1) both,
    sway 7s ease-in-out 1.6s infinite;
}
@keyframes sway {
  0%, 100% { transform: rotate(-0.8deg); }
  50%      { transform: rotate(0.8deg); }
}

/* ----- Scroll cue pulse ----- */
.scrollcue__line {
  transform-origin: top;
  animation: scrollcue 2s ease-in-out infinite;
}
@keyframes scrollcue {
  0%   { transform: scaleY(0); opacity: 0.2; }
  50%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0); opacity: 0.2; transform-origin: bottom; }
}

/* ----- Reveal states (set by GSAP) ----- */
.reveal,
.reveal-words > .w,
.reveal-letter {
  will-change: transform, opacity;
}

/* Initial hidden state — JS fires the reveal */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal-words > .w { display: inline-block; opacity: 0; transform: translateY(0.9em); }
.reveal-letter { display: inline-block; opacity: 0; transform: translateY(60%); }

/* ----- Falling leaf (spawned via JS) ----- */
.leaf {
  position: absolute;
  top: -40px;
  width: 22px; height: 22px;
  color: var(--bamboo);
  opacity: 0.55;
  will-change: transform, opacity;
  animation: leaf-fall var(--dur, 18s) linear var(--delay, 0s) infinite;
}
.leaf svg { width: 100%; height: 100%; }
@keyframes leaf-fall {
  0% {
    transform: translate3d(0, -40px, 0) rotate(0deg);
    opacity: 0;
  }
  10% { opacity: 0.65; }
  50% {
    transform: translate3d(var(--drift, 80px), 55vh, 0) rotate(220deg);
  }
  100% {
    transform: translate3d(calc(var(--drift, 80px) * -0.6), 115vh, 0) rotate(540deg);
    opacity: 0;
  }
}

/* ----- Coin floaty tilt ----- */
@keyframes coin-float {
  0%, 100% { transform: rotateX(-6deg) rotateY(-10deg) translateY(-4px); }
  50%      { transform: rotateX( 6deg) rotateY( 10deg) translateY(6px);  }
}

/* ----- Coin sheen shimmer ----- */
@keyframes coin-sheen {
  0%   { transform: translateX(-35%) rotate(0deg); opacity: 0; }
  30%  { opacity: 0.6; }
  60%  { opacity: 0.3; }
  100% { transform: translateX(35%)  rotate(0deg); opacity: 0; }
}

/* ----- Coin orbit rotation ----- */
@keyframes coin-orbit {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ----- Coming-soon pulsing dot ----- */
@keyframes pulse-dot {
  0%   { box-shadow: 0 0 0 0   rgba(217,164,65,0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(217,164,65,0);  }
  100% { box-shadow: 0 0 0 0   rgba(217,164,65,0);  }
}

/* ----- Hero halo pulse ----- */
.hero__halo {
  animation: halo 9s ease-in-out infinite;
}
@keyframes halo {
  0%, 100% { transform: scale(1);   opacity: 0.9; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* ----- Magnetic CTA subtle glow on hover (backup for no-cursor) ----- */
.magnetic { position: relative; }

/* ==================== Reduced motion ==================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .leaves { display: none; }
  .cursor { display: none; }

  /* Make sure reveal content is visible even though JS reveals are disabled */
  .reveal,
  .reveal-words > .w,
  .reveal-letter {
    opacity: 1 !important;
    transform: none !important;
  }
  .loader { display: none; }
}