/* ═══════════════════════════════════════════════════════════
   SCROLL FX — Split text · Parallax · Stagger · Clip reveal
   All hidden states gated behind .js-fx so no-JS stays visible
   ═══════════════════════════════════════════════════════════ */

/* ── Split text ── */
.sx-word {
    display: inline-block;
    overflow: hidden;
    /* vertical-align keeps baseline clean for multi-line headings */
    vertical-align: bottom;
    line-height: 1.15;
    padding-bottom: 0.05em;
}
.sx-space {
    display: inline-block;
    width: 0.28em;
}

.js-fx .sx-char {
    display: inline-block;
    transform: translateY(108%) rotate(3deg);
    opacity: 0;
    will-change: transform, opacity;
    transition:
        transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
        opacity   0.45s ease;
}
.js-fx .sx-char.sx-in {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
}

/* ── Section label — letter-spacing bloom ── */
.js-fx .section-label {
    opacity: 0;
    letter-spacing: 0.1em;
    transition: opacity 0.7s ease, letter-spacing 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-fx .section-label.sx-label-in {
    opacity: 1;
    letter-spacing: 0.28em;
}

/* ── data-scroll generic effects ── */
.js-fx [data-scroll="fade-up"] {
    opacity: 0;
    transform: translateY(44px);
    transition: opacity 0.85s ease, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-fx [data-scroll="fade-right"] {
    opacity: 0;
    transform: translateX(-52px);
    transition: opacity 0.85s ease, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-fx [data-scroll="fade-left"] {
    opacity: 0;
    transform: translateX(52px);
    transition: opacity 0.85s ease, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-fx [data-scroll="scale-in"] {
    opacity: 0;
    transform: scale(0.88) translateY(24px);
    transition: opacity 0.75s ease, transform 0.88s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-fx [data-scroll="blur-in"] {
    opacity: 0;
    filter: blur(16px) saturate(0.5);
    transform: scale(0.96);
    transition: opacity 0.9s ease, filter 1s ease, transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-fx [data-scroll="zoom-in"] {
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

/* All activated */
.js-fx [data-scroll].sx-active {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Transition delay helpers */
.js-fx [data-scroll-delay="0.1"] { transition-delay: 0.1s !important; }
.js-fx [data-scroll-delay="0.2"] { transition-delay: 0.2s !important; }
.js-fx [data-scroll-delay="0.3"] { transition-delay: 0.3s !important; }
.js-fx [data-scroll-delay="0.4"] { transition-delay: 0.4s !important; }
.js-fx [data-scroll-delay="0.5"] { transition-delay: 0.5s !important; }

/* ── Stagger children ── */
.js-fx [data-stagger] > * {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.72s ease, transform 0.82s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-fx [data-stagger] > *.sx-in {
    opacity: 1;
    transform: none;
}

/* ── Clip-path reveal ── */
.js-fx [data-clip="up"] {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-fx [data-clip="right"] {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-fx [data-clip="left"] {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-fx [data-clip].sx-clip-in {
    clip-path: inset(0 0% 0 0%);
}

/* ── Tilt-enter effects ── */
.js-fx [data-scroll="tilt-left"] {
    opacity: 0;
    transform: perspective(900px) rotateY(-22deg) translateX(-56px);
    transition: opacity 0.85s ease, transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}
.js-fx [data-scroll="tilt-right"] {
    opacity: 0;
    transform: perspective(900px) rotateY(22deg) translateX(56px);
    transition: opacity 0.85s ease, transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Parallax images ── */
[data-parallax] {
    will-change: transform;
    transform-origin: center center;
}

/* ── Gold line sweep on accent rules ── */
.js-fx .hero-film-rule,
.js-fx .page-hero__accent-line {
    width: 0 !important;
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s !important;
}
.js-fx .hero-film-rule.sx-line-in,
.js-fx .page-hero__accent-line.sx-line-in {
    width: 72px !important;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .sx-char                         { transform: none !important; opacity: 1 !important; transition: none !important; }
    .section-label                   { opacity: 1 !important; letter-spacing: inherit !important; transition: none !important; }
    [data-scroll], [data-clip], [data-scroll="tilt-left"], [data-scroll="tilt-right"] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; }
    [data-stagger] > *               { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hero-film-rule,
    .page-hero__accent-line          { width: 72px !important; transition: none !important; }
}