/* ==========================================================================
   ANIMATION LAYER — reveal states + keyframes
   GSAP toggles these via classes; CSS defines the "at rest" states so there
   is no flash-of-unstyled-content before JS attaches.
   ========================================================================== */

[data-reveal]{ opacity:0; }
[data-reveal="up"]{ transform: translateY(48px); }
[data-reveal="fade"]{ transform:none; }
[data-reveal="scale"]{ transform: scale(.92); }
[data-reveal="clip"]{ clip-path: inset(0 0 100% 0); opacity:1; }
[data-reveal="left"]{ transform: translateX(-60px); }
[data-reveal="right"]{ transform: translateX(60px); }
.js-ready [data-reveal]{ transition: none; }

.split-line{ display:block; overflow:hidden; }
.split-line > span{ display:inline-block; will-change:transform; }

@keyframes floaty{
  0%,100%{ transform: translate3d(0,0,0) rotate(0deg); }
  50%{ transform: translate3d(0,-18px,0) rotate(2deg); }
}
@keyframes floatySlow{
  0%,100%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(0,-28px,0); }
}
.float{ animation: floaty 6s ease-in-out infinite; }
.float-slow{ animation: floatySlow 9s ease-in-out infinite; }
.float-delay1{ animation-delay:.8s; }
.float-delay2{ animation-delay:1.6s; }
.float-delay3{ animation-delay:2.4s; }

@keyframes spinSlow{ to{ transform: rotate(360deg); } }
.spin-slow{ animation: spinSlow 40s linear infinite; }
.spin-slow-rev{ animation: spinSlow 55s linear infinite reverse; }

@keyframes pulseDot{
  0%,100%{ opacity:.3; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.6); }
}
.pulse-dot{ animation: pulseDot 2.4s ease-in-out infinite; }

@keyframes dashMove{
  to{ stroke-dashoffset: -1000; }
}
.route-line{ stroke-dasharray: 6 8; animation: dashMove 26s linear infinite; }

@keyframes drift{
  0%{ transform: translate(0,0); }
  25%{ transform: translate(14px,-10px); }
  50%{ transform: translate(-6px,10px); }
  75%{ transform: translate(-14px,-6px); }
  100%{ transform: translate(0,0); }
}
.drift{ animation: drift 12s ease-in-out infinite; }

@keyframes shimmer{
  0%{ background-position: -200% 0; }
  100%{ background-position: 200% 0; }
}
.shimmer-text{
  background: linear-gradient(100deg, var(--gold-soft) 20%, var(--paper) 40%, var(--gold-soft) 60%);
  background-size: 250% auto;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: shimmer 5s linear infinite;
}

@keyframes smoke{
  0%{ transform: translateY(0) scale(1); opacity:.0; }
  15%{ opacity:.35; }
  100%{ transform: translateY(-160px) scale(2.4); opacity:0; }
}
.smoke-particle{ animation: smoke 7s ease-out infinite; }

@keyframes leafFall{
  0%{ transform: translateY(-10vh) translateX(0) rotate(0deg); opacity:0; }
  10%{ opacity:.5; }
  100%{ transform: translateY(110vh) translateX(40px) rotate(240deg); opacity:0; }
}
.leaf-particle{ animation: leafFall linear infinite; }

@keyframes ticker{ to{ transform: translateX(-50%); } }
.ticker-track{ animation: ticker 30s linear infinite; }

@keyframes waveShift{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-50%); }
}
.wave-anim{ animation: waveShift 18s linear infinite; }

@keyframes barFill{ from{ width:0; } }

@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.fade-in{ animation: fadeIn .6s var(--ease) both; }

@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:0;} }
.blink{ animation: blink 1.4s step-end infinite; }

/* page transition veil */
#pt-veil{
  position:fixed; inset:0; z-index:9997; background:var(--gold);
  transform: translateY(101%);
  pointer-events:none;
}

/* magnetic button helper (JS sets transform via inline style, this just eases it) */
.magnetic{ transition: transform .25s var(--ease-soft); will-change:transform; }