/* ==========================================================================
   Animations: keyframes + scroll-reveal classes
   Reveal classes only hide content when <html class="js"> is present, so
   nothing stays invisible if JavaScript fails.
   ========================================================================== */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes shimmer { to { transform: translateX(100%); } }
@keyframes marquee { to { transform: translateX(calc(-50% - 1.5rem)); } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}
@keyframes modal-in { from { opacity: 0; transform: translateY(24px) scale(0.97); } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
@keyframes toast-timer { to { transform: scaleX(0); } }
@keyframes float { 50% { transform: translateY(-8px); } }
@keyframes rotate-slow { to { transform: rotate(360deg); } }
@keyframes ken-burns { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes glow-pulse {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(214, 154, 92, 0); }
  80% { box-shadow: 0 0 0 10px rgba(214, 154, 92, 0.35); }
  90% { box-shadow: 0 0 0 18px rgba(214, 154, 92, 0); }
}
@keyframes scroll-cue { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }

/* ---------- Scroll reveals ---------- */
.js .reveal,
.js .reveal-up,
.js .reveal-left,
.js .reveal-right,
.js .reveal-scale {
  opacity: 0;
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform 900ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.js .reveal, .js .reveal-up { transform: translateY(32px); }
.js .reveal-left { transform: translateX(-40px); }
.js .reveal-right { transform: translateX(40px); }
.js .reveal-scale { transform: scale(0.94); }

.js .is-revealed.reveal,
.js .is-revealed.reveal-up,
.js .is-revealed.reveal-left,
.js .is-revealed.reveal-right,
.js .is-revealed.reveal-scale { opacity: 1; transform: none; }

/* Image uncovered by a wipe while it settles from a slight zoom */
.js .reveal-mask {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease-in-out);
  transition-delay: var(--delay, 0ms);
}
.js .reveal-mask img { transform: scale(1.15); transition: transform 1.6s var(--ease-out); transition-delay: var(--delay, 0ms); }
.js .reveal-mask.is-revealed { clip-path: inset(0); }
.js .reveal-mask.is-revealed img { transform: scale(1); }

/* Children appear in sequence (JS sets --i on each child) */
.js .reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: calc(var(--delay, 0ms) + var(--i, 0) * var(--stagger));
}
.js .reveal-stagger.is-revealed > * { opacity: 1; transform: none; }

/* Headline lines slide up from behind a mask (JS wraps each line) */
.line-mask { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.line-mask > span { display: block; }
.js .reveal-lines .line-mask > span {
  transform: translateY(105%);
  transition: transform 1s var(--ease-out);
  transition-delay: calc(var(--delay, 0ms) + var(--i, 0) * 110ms);
}
.js .reveal-lines.is-revealed .line-mask > span { transform: none; }

/* Gold rules grow from the left */
.js .draw-line { transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out); transition-delay: var(--delay, 0ms); }
.js .draw-line.is-revealed { transform: scaleX(1); }

/* Ambient helpers */
.float { animation: float 5s var(--ease-in-out) infinite; }
.spin-slow { animation: rotate-slow 20s linear infinite; }
.glow-pulse { animation: glow-pulse 4s ease-out infinite; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal, .js .reveal-up, .js .reveal-left, .js .reveal-right, .js .reveal-scale,
  .js .reveal-stagger > *, .js .reveal-lines .line-mask > span, .js .draw-line {
    opacity: 1 !important;
    transform: none !important;
  }
  .js .reveal-mask { clip-path: none !important; }
  .js .reveal-mask img { transform: none !important; }
  .marquee { mask-image: none; }
  .marquee__track { animation: none !important; width: auto; justify-content: center; }
  .marquee__group { flex-wrap: wrap; justify-content: center; }
  .marquee__group[aria-hidden="true"] { display: none; }
}