/* ==========================================================================
   animations.css — motion that guides attention, never decoration for its own sake.
   1. Homepage hero entrance (one orchestrated sequence)
   2. Scroll reveals, opt-in with [data-reveal]:
        data-reveal          → fade up (section heads, panels)
        data-reveal="photo"  → photo settles from a gentle zoom
        data-reveal="stagger"→ children rise one after another (card rows)
   3. Parallax hooks ([data-parallax]) — the offset is set by animations.js
   Content is only hidden when JavaScript is running (html.js), and everything
   is switched off for people who prefer reduced motion.
   ========================================================================== */

/* ---------- 1. Hero entrance ---------- */
.js .sk-anim .sk-hero__title span,
.js .sk-anim .sk-hero__intro,
.js .sk-anim .sk-hero__visual,
.js .sk-anim .sk-rail__item { opacity: 0; }

.sk-anim.is-in .sk-hero__title span { animation: sk-rise 900ms var(--sk-ease) both; }
.sk-anim.is-in .sk-hero__title span:nth-child(2) { animation-delay: 90ms; }
.sk-anim.is-in .sk-hero__title span:nth-child(3) { animation-delay: 180ms; }
.sk-anim.is-in .sk-hero__intro { animation: sk-rise 900ms 260ms var(--sk-ease) both; }
.sk-anim.is-in .sk-hero__visual { animation: sk-settle 1300ms 80ms var(--sk-ease) both; }
.sk-anim.is-in .sk-hero__arc path { stroke-dasharray: 1700; animation: sk-draw 1800ms 400ms var(--sk-ease) both; }
.sk-anim.is-in .sk-hero__bowl { animation: sk-pop 900ms 650ms var(--sk-ease) both; }
.sk-anim.is-in .sk-hero__tag { animation: sk-rise 700ms 900ms var(--sk-ease) both; }
/* tickets drop onto the rail, then settle with a small swing */
.sk-anim.is-in .sk-rail__item { animation: sk-hang 900ms var(--sk-ease) both; }
.sk-anim.is-in .sk-rail__item:nth-child(1) { animation-delay: 620ms; --tilt: -1.4deg; }
.sk-anim.is-in .sk-rail__item:nth-child(2) { animation-delay: 720ms; --tilt: .8deg; }
.sk-anim.is-in .sk-rail__item:nth-child(3) { animation-delay: 820ms; --tilt: -.6deg; }

@keyframes sk-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes sk-settle { from { opacity: 0; transform: scale(.96) translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sk-pop { from { opacity: 0; transform: scale(.7) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes sk-draw { from { stroke-dashoffset: 1700; } to { stroke-dashoffset: 0; } }
@keyframes sk-hang {
  0% { opacity: 0; transform: translateY(-26px) rotate(0); }
  60% { opacity: 1; transform: translateY(0) rotate(calc(var(--tilt) * -1.6)); }
  100% { opacity: 1; transform: rotate(var(--tilt)); }
}

/* ---------- 2. Scroll reveals ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 800ms var(--sk-ease), transform 800ms var(--sk-ease); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

.js [data-reveal="photo"] { opacity: 1; transform: none; }
.js [data-reveal="photo"] img { transform: scale(1.12); transition: transform 1600ms var(--sk-ease); }
.js [data-reveal="photo"].is-visible img { transform: scale(1); }
.js [data-reveal="photo"] .sk-svc__panel,
.js [data-reveal="photo"] .sk-cta__panel { opacity: 0; transform: translateY(20px); transition: opacity 800ms 250ms var(--sk-ease), transform 800ms 250ms var(--sk-ease); }
.js [data-reveal="photo"].is-visible .sk-svc__panel,
.js [data-reveal="photo"].is-visible .sk-cta__panel { opacity: 1; transform: none; }

.js [data-reveal="stagger"] { opacity: 1; transform: none; }
.js [data-reveal="stagger"] > * { opacity: 0; transform: translateY(26px); transition: opacity 700ms var(--sk-ease), transform 700ms var(--sk-ease); }
.js [data-reveal="stagger"].is-visible > * { opacity: 1; transform: none; }
.js [data-reveal="stagger"].is-visible > :nth-child(2) { transition-delay: 90ms; }
.js [data-reveal="stagger"].is-visible > :nth-child(3) { transition-delay: 180ms; }
.js [data-reveal="stagger"].is-visible > :nth-child(4) { transition-delay: 270ms; }
.js [data-reveal="stagger"].is-visible > :nth-child(5) { transition-delay: 330ms; }
.js [data-reveal="stagger"].is-visible > :nth-child(n+6) { transition-delay: 390ms; }

/* ---------- 3. Parallax ---------- */
[data-parallax] { will-change: transform; transform: translate3d(0, var(--sk-parallax, 0px), 0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js .sk-anim .sk-hero__title span, .js .sk-anim .sk-hero__intro, .js .sk-anim .sk-hero__visual, .js .sk-anim .sk-rail__item,
  .js [data-reveal], .js [data-reveal] img, .js [data-reveal] > *, .js [data-reveal] .sk-svc__panel, .js [data-reveal] .sk-cta__panel {
    opacity: 1 !important; transform: none !important;
  }
  [data-parallax] { transform: none !important; }
}

/* keep hover lift on revealed service cards (the reveal resets transform) */
.js .sk-svc[data-reveal].is-visible:hover { transform: translateY(-4px); }