.wf-cinematic-hero {
    --wf-hero-light-intensity: .72;
    --wf-hero-grain-opacity: .026;
    --wf-hero-pollen-opacity: 1;
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: end;
    min-height: 76svh;
    min-height: 76dvh;
    overflow: clip;
    border-bottom: 1px solid var(--border-subtle);
    background: #0b0e0f;
    color: var(--text-primary);
}

.wf-cinematic-hero__media,
.wf-cinematic-hero__media-track,
.wf-cinematic-hero__image,
.wf-cinematic-hero__grade,
.wf-cinematic-hero__exposure,
.wf-cinematic-hero__projection-texture,
.wf-cinematic-hero__atmosphere,
.wf-cinematic-hero__grain,
.wf-cinematic-hero__vignette {
    position: absolute;
    inset: 0;
}

.wf-cinematic-hero__media { z-index: -1; pointer-events: none; }
.wf-cinematic-hero__media-track { overflow: hidden; }
.wf-cinematic-hero__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 66% center; }

.wf-cinematic-hero__grade { z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(7 11 12 / .76) 0%, rgb(8 17 18 / .40) 39%, rgb(11 18 19 / .12) 72%, rgb(8 11 12 / .30) 100%), radial-gradient(ellipse at 58% 34%, transparent 0 25%, rgb(5 8 9 / .17) 68%, rgb(3 5 6 / .35) 100%); }
.wf-cinematic-hero__grade::after { position: absolute; inset: 0; background: linear-gradient(118deg, rgb(72 153 150 / .10), transparent 37%, rgb(226 231 224 / .06) 75%); content: ""; mix-blend-mode: soft-light; }

.wf-cinematic-hero__exposure { z-index: 2; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 66% center; pointer-events: none; will-change: opacity; }
.wf-cinematic-hero__exposure--cyan { filter: brightness(1.27) saturate(1.28); opacity: .38; mix-blend-mode: screen; clip-path: ellipse(47% 57% at 24% 44%); -webkit-mask-image: radial-gradient(ellipse 49% 60% at 24% 44%, #000 0 38%, rgb(0 0 0 / .76) 57%, transparent 79%); mask-image: radial-gradient(ellipse 49% 60% at 24% 44%, #000 0 38%, rgb(0 0 0 / .76) 57%, transparent 79%); animation: wf-cinematic-cyan-exposure 11s ease-in-out -5.5s infinite; }
.wf-cinematic-hero__exposure--silver { z-index: 3; filter: brightness(1.34) saturate(.72); opacity: .25; mix-blend-mode: screen; clip-path: ellipse(44% 66% at 90% 54%); -webkit-mask-image: linear-gradient(90deg, transparent 0 59%, rgb(0 0 0 / .18) 65%, #000 77% 100%); mask-image: linear-gradient(90deg, transparent 0 59%, rgb(0 0 0 / .18) 65%, #000 77% 100%); animation: wf-cinematic-silver-exposure 16s ease-in-out -11s infinite; }

.wf-cinematic-hero__projection-texture { z-index: 4; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.wf-cinematic-hero__projection { position: absolute; display: block; background: linear-gradient(90deg, transparent 0%, rgb(246 249 241 / .10) 13%, rgb(250 251 244 / .52) 48%, rgb(134 218 213 / .18) 77%, transparent 100%), repeating-linear-gradient(0deg, transparent 0 9px, rgb(255 255 250 / .08) 10px 11px, transparent 12px 19px); filter: blur(13px); opacity: .20; will-change: transform, opacity; }
.wf-cinematic-hero__projection--hand { left: 70%; top: 42%; width: 12%; height: 30%; animation: wf-cinematic-hand-projection 17s ease-in-out -6s infinite; }
.wf-cinematic-hero__projection--wall { left: 83%; top: 18%; width: 11%; height: 58%; animation: wf-cinematic-wall-projection 23s ease-in-out -13s infinite; }
.wf-cinematic-hero__projection--far { left: 95%; top: 8%; width: 8%; height: 62%; animation: wf-cinematic-far-projection 29s ease-in-out -19s infinite; }
.wf-cinematic-hero__projection-glint { position: absolute; right: 12%; top: 57%; width: 18%; height: 19%; background: radial-gradient(ellipse, rgb(255 253 239 / .45), rgb(181 230 224 / .12) 42%, transparent 72%); filter: blur(12px); opacity: 0; will-change: transform, opacity; animation: wf-cinematic-projection-glint 14s ease-in-out -8.8s infinite; }

.wf-cinematic-hero__atmosphere { z-index: 5; display: block; width: 100%; height: 100%; pointer-events: none; opacity: var(--wf-hero-pollen-opacity); mix-blend-mode: screen; }
.wf-cinematic-hero__grain { z-index: 6; pointer-events: none; opacity: var(--wf-hero-grain-opacity); background-image: var(--wf-hero-grain-image); background-size: 80px 80px; mix-blend-mode: soft-light; animation: wf-cinematic-grain 1.2s steps(2, end) infinite; }
.wf-cinematic-hero__vignette { z-index: 7; pointer-events: none; background: radial-gradient(ellipse at 57% 43%, transparent 30%, rgb(1 3 3 / .08) 61%, rgb(2 4 5 / .40) 100%), linear-gradient(180deg, rgb(3 5 6 / .18), transparent 28%, rgb(3 5 6 / .32)); }

.wf-cinematic-hero__content { position: relative; z-index: 7; width: min(calc(100% - 2rem), var(--content-width)); margin-inline: auto; padding: clamp(5.5rem, 15vh, 10rem) 0 clamp(4rem, 12vw, 9rem); }
.wf-cinematic-hero__content .eyebrow { margin-bottom: var(--space-2); }
.wf-cinematic-hero__content h1 { max-width: 13ch; margin: 0; font-family: var(--font-display); font-size: clamp(2.65rem, 7.2vw, 5.7rem); font-weight: 450; letter-spacing: -.024em; line-height: 1.08; }
.wf-cinematic-hero__content h1 span { display: block; }
.wf-cinematic-hero .hero-copy { max-width: 58ch; margin: var(--space-3) 0; color: var(--text-muted); font-size: clamp(1.05rem, 1.8vw, 1.25rem); line-height: 1.65; }
.wf-cinematic-hero .premium-cta { position: relative; display: inline-flex; align-items: center; gap: .45rem; }
.wf-cinematic-hero .premium-cta::after { position: absolute; right: 0; bottom: -.32rem; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(.32); transform-origin: left; transition: transform 240ms ease; }
.wf-cinematic-hero .premium-cta:hover::after,.wf-cinematic-hero .premium-cta:focus-visible::after { transform: scaleX(1); }
.wf-cinematic-hero .premium-cta__arrow { transition: transform 240ms ease; }
.wf-cinematic-hero .premium-cta:hover .premium-cta__arrow,.wf-cinematic-hero .premium-cta:focus-visible .premium-cta__arrow { transform: translateX(.24rem); }
.wf-cinematic-hero .premium-cta:focus-visible { outline: 2px solid var(--silver-bright); outline-offset: .45rem; }

.wf-cinematic-hero__scroll-cue { position: absolute; z-index: 7; right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 2vw, 1.75rem); width: 1px; height: 3.3rem; pointer-events: none; background: rgb(228 234 231 / .35); overflow: hidden; }
.wf-cinematic-hero__scroll-cue span { display: block; width: 100%; height: 45%; background: var(--silver-bright); animation: wf-cinematic-scroll-cue 2.5s ease-in-out infinite; }

.wf-cinematic-hero[data-cinematic-ready="true"] .wf-cinematic-hero__content>.eyebrow { animation: wf-cinematic-content-in 620ms both cubic-bezier(.18,.82,.24,1); }
.wf-cinematic-hero[data-cinematic-ready="true"] .wf-cinematic-hero__content h1 { overflow: hidden; }
.wf-cinematic-hero[data-cinematic-ready="true"] .wf-cinematic-hero__content h1 span { animation: wf-cinematic-title-in 800ms 100ms both cubic-bezier(.18,.82,.24,1); }
.wf-cinematic-hero[data-cinematic-ready="true"] .wf-cinematic-hero__content .hero-copy { animation: wf-cinematic-content-in 620ms 310ms both cubic-bezier(.18,.82,.24,1); }
.wf-cinematic-hero[data-cinematic-ready="true"] .wf-cinematic-hero__content .premium-cta { animation: wf-cinematic-content-in 560ms 520ms both cubic-bezier(.18,.82,.24,1); }

.wf-cinematic-hero--without-image { min-height: min(64svh, 42rem); min-height: min(64dvh, 42rem); background: linear-gradient(135deg, #101819, #0a0d0e); }
.wf-cinematic-hero--without-image .wf-cinematic-hero__content { padding-block: clamp(5rem, 14vh, 8rem); }

@keyframes wf-cinematic-cyan-exposure { 0%, 100% { opacity: .34; } 42% { opacity: .54; } 70% { opacity: .43; } }
@keyframes wf-cinematic-silver-exposure { 0%, 100% { opacity: .21; } 43% { opacity: .40; } 70% { opacity: .30; } }
@keyframes wf-cinematic-hand-projection { 0%, 100% { transform: translate3d(-11px, 6px, 0) scaleX(.92); opacity: .20; } 47% { transform: translate3d(13px, -5px, 0) scaleX(1.12); opacity: .43; } 72% { opacity: .29; } }
@keyframes wf-cinematic-wall-projection { 0%, 100% { transform: translate3d(14px, -7px, 0) scaleX(.90); opacity: .18; } 51% { transform: translate3d(-12px, 8px, 0) scaleX(1.14); opacity: .40; } 76% { opacity: .26; } }
@keyframes wf-cinematic-far-projection { 0%, 100% { transform: translate3d(8px, 4px, 0) scaleX(.94); opacity: .14; } 49% { transform: translate3d(-9px, -6px, 0) scaleX(1.10); opacity: .31; } 71% { opacity: .21; } }
@keyframes wf-cinematic-projection-glint { 0%, 7%, 100% { transform: translate3d(0, 6px, 0) scale(.90); opacity: 0; } 11% { opacity: .34; } 17% { transform: translate3d(-5px, -3px, 0) scale(1.03); opacity: .16; } 21% { opacity: 0; } }
@keyframes wf-cinematic-grain { 0% { background-position: 0 0; } 50% { background-position: 27px -19px; } 100% { background-position: -18px 23px; } }
@keyframes wf-cinematic-scroll-cue { 0%, 18% { transform: translateY(-110%); } 54%, 100% { transform: translateY(230%); } }
@keyframes wf-cinematic-content-in { from { opacity: 0; transform: translateY(.7rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes wf-cinematic-title-in { from { opacity: 0; transform: translateY(108%); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 700px) { .wf-cinematic-hero { min-height: max(68svh, 33rem); min-height: max(68dvh, 33rem); --wf-hero-light-intensity: .72; --wf-hero-grain-opacity: .019; --wf-hero-pollen-opacity: 1; } .wf-cinematic-hero__image,.wf-cinematic-hero__exposure { object-position: 62% center; } .wf-cinematic-hero__exposure--cyan { clip-path: ellipse(58% 48% at 18% 39%); -webkit-mask-image: radial-gradient(ellipse 60% 51% at 18% 39%, #000 0 38%, rgb(0 0 0 / .74) 58%, transparent 80%); mask-image: radial-gradient(ellipse 60% 51% at 18% 39%, #000 0 38%, rgb(0 0 0 / .74) 58%, transparent 80%); } .wf-cinematic-hero__exposure--silver { clip-path: ellipse(52% 62% at 91% 56%); -webkit-mask-image: linear-gradient(90deg, transparent 0 57%, rgb(0 0 0 / .16) 65%, #000 79% 100%); mask-image: linear-gradient(90deg, transparent 0 57%, rgb(0 0 0 / .16) 65%, #000 79% 100%); } .wf-cinematic-hero__projection { filter: blur(11px); } .wf-cinematic-hero__projection--hand { left: 68%; width: 17%; top: 44%; height: 28%; } .wf-cinematic-hero__projection--wall { left: 84%; width: 14%; top: 17%; height: 59%; } .wf-cinematic-hero__projection--far { display: none; } .wf-cinematic-hero__projection-glint { right: 8%; top: 59%; width: 25%; height: 17%; } .wf-cinematic-hero__content { width: min(calc(100% - 2rem), var(--content-width)); padding: 7.5rem 0 max(4.5rem, env(safe-area-inset-bottom)); } .wf-cinematic-hero__content h1 { max-width: 10ch; font-size: clamp(2.8rem, 14vw, 4.5rem); } .wf-cinematic-hero__scroll-cue { right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); height: 2.45rem; } }
@media (prefers-reduced-motion: reduce) { .wf-cinematic-hero__exposure,.wf-cinematic-hero__projection,.wf-cinematic-hero__projection-glint,.wf-cinematic-hero__grain,.wf-cinematic-hero__scroll-cue span,.wf-cinematic-hero__content>.eyebrow,.wf-cinematic-hero__content h1 span,.wf-cinematic-hero__content .hero-copy,.wf-cinematic-hero__content .premium-cta { animation: none !important; transition: none !important; } }
.wf-cinematic-hero[data-wf-hero-fx-debug="light"] .wf-cinematic-hero__atmosphere { display: none; }
.wf-cinematic-hero[data-wf-hero-fx-debug="light"] .wf-cinematic-hero__exposure { opacity: .62; }
.wf-cinematic-hero[data-wf-hero-fx-debug="light"] .wf-cinematic-hero__projection { opacity: .50; }
.wf-cinematic-hero[data-wf-hero-fx-debug="motes"] .wf-cinematic-hero__exposure,.wf-cinematic-hero[data-wf-hero-fx-debug="motes"] .wf-cinematic-hero__projection-texture { display: none; }