/* ============================================================ SUPER 313 — CINEMATIC 3D-SCROLL LAYER (home only) "Surface, Studied" · cx- namespace Relies on brand vars from style.css (--gold, --ink, --dark…) Base state = fully visible/static (graceful fallback). .js-cine on unlocks the pinned/hidden cinematic states. ============================================================ */ :root{ --cx-black:#0b0b0c; --cx-ink-2:#c9c4ba; --ease-lux:cubic-bezier(.16,1,.3,1); } /* smooth-scroll (Lenis) */ html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto!important} .lenis.lenis-stopped{overflow:hidden} /* film grain + vignette that sit over the whole cinematic run */ .cx-grain{ position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* floating dust motes canvas */ .cx-dust{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5} /* progress rail */ .cx-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0); background:linear-gradient(90deg,var(--gold),#e8d9b8);z-index:120;opacity:.9} /* ============================================================ ACT 1 — THE OBJECT (hero) ============================================================ */ .cx-hero{position:relative;background:radial-gradient(120% 90% at 50% 18%,#1a1917 0%,#0d0c0b 55%,#070707 100%);color:#fff} .js-cine .cx-hero{height:180vh} /* pinned dwell while the turntable plays */ .cx-hero-pin{position:relative;height:100vh;display:grid;place-items:center;overflow:hidden} .js-cine .cx-hero-pin{position:sticky;top:0} /* full-bleed scroll-scrubbed hero video */ .cx-hero-video{position:absolute;inset:0;z-index:1;overflow:hidden;background:#000} .cx-hero-video video{width:100%;height:100%;object-fit:cover;transform:scale(1.04)} /* studio floor + light pool */ .cx-hero-pin::before{content:"";position:absolute;left:50%;top:50%;width:150vw;height:150vw;transform:translate(-50%,-6%);z-index:1; background:radial-gradient(closest-side,rgba(184,155,94,.1),transparent 70%);pointer-events:none;mix-blend-mode:screen} .cx-hero-pin::after{content:"";position:absolute;inset:0;pointer-events:none; box-shadow:inset 0 -160px 180px -80px rgba(0,0,0,.75),inset 0 120px 160px -90px rgba(0,0,0,.6)} /* the slab, in 3D */ .cx-stage{position:relative;width:min(46vw,440px);aspect-ratio:3/4;perspective:1600px;z-index:2;will-change:transform} @media(max-width:820px){.cx-stage{width:min(74vw,360px)}} .cx-slab{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(4deg); will-change:transform;transition:none} .cx-slab-face{position:absolute;inset:0;overflow:hidden;border-radius:2px; background:#111;box-shadow:0 60px 90px -30px rgba(0,0,0,.8),0 2px 0 rgba(255,255,255,.06); transform:translateZ(14px)} .cx-slab-face img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)} /* slab thickness / edge */ .cx-slab-edge{position:absolute;top:0;bottom:0;right:-28px;width:28px;transform:rotateY(90deg) translateZ(14px);transform-origin:right; background:linear-gradient(180deg,#e9e2d2,#b7ad97 40%,#8f846c);opacity:.9} /* raking light sheen */ .cx-slab-sheen{position:absolute;inset:0;transform:translateZ(15px);pointer-events:none;border-radius:2px;overflow:hidden} .cx-slab-sheen::before{content:"";position:absolute;top:-40%;left:-60%;width:60%;height:180%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); transform:rotate(14deg);filter:blur(6px)} .js-cine .cx-slab-sheen::before{left:var(--sheen,-60%)} /* hero copy */ .cx-hero-copy{position:absolute;left:0;right:0;bottom:clamp(2.4rem,7vh,5rem);text-align:center;z-index:3;padding:0 var(--pad)} .cx-eyebrow{display:inline-flex;align-items:center;gap:.8rem;margin-bottom:1.3rem; font-size:.58rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:#E8D9B8} .cx-eyebrow::before,.cx-eyebrow::after{content:"";width:2rem;height:1px;background:rgba(232,217,168,.6)} .cx-title{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,6vw,5.4rem);line-height:1.02;letter-spacing:-.02em} .cx-title em{font-style:italic;color:#E8D9B8} .cx-title .l{display:block;overflow:hidden} .cx-title .l > span{display:block} .js-cine .cx-title .l > span{transform:translateY(110%);opacity:0} .cx-scrollhint{position:absolute;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:3; font-size:.54rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:rgba(255,255,255,.5)} .cx-scrollhint::after{content:"";display:block;width:1px;height:40px;margin:.7rem auto 0; background:linear-gradient(180deg,rgba(255,255,255,.6),transparent);animation:cxCue 2.2s var(--ease-lux) infinite} @keyframes cxCue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top} 55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}} /* ============================================================ ACT 2 — THE STATEMENT ============================================================ */ .cx-statement{background:var(--cx-black);color:#fff;padding:clamp(7rem,20vh,16rem) var(--pad);text-align:center} .cx-big{font-family:var(--serif);font-weight:300;font-size:clamp(2rem,5.4vw,4.6rem);line-height:1.16;letter-spacing:-.01em; max-width:20em;margin:0 auto} .cx-big em{font-style:italic;color:var(--gold)} .cx-big .w{display:inline-block} .js-cine .cx-big .w{opacity:.12} /* ============================================================ ACT 3 — ANATOMY (exploded layers) ============================================================ */ .cx-anatomy{position:relative;background:linear-gradient(180deg,#0b0b0c,#141311);color:#fff} .js-cine .cx-anatomy{height:300vh} .cx-anatomy-pin{position:relative;height:100vh;display:grid;grid-template-columns:1.1fr .9fr;align-items:center; gap:2rem;padding:0 var(--pad);overflow:hidden} .js-cine .cx-anatomy-pin{position:sticky;top:0} @media(max-width:860px){.cx-anatomy-pin{grid-template-columns:1fr;text-align:center}} .cx-layers{position:relative;height:64vh;perspective:1400px;transform-style:preserve-3d;place-self:center} .cx-layer{position:absolute;left:50%;top:50%;width:min(30vw,300px);aspect-ratio:16/10;translate:-50% -50%; border-radius:2px;overflow:hidden;box-shadow:0 40px 60px -24px rgba(0,0,0,.7); background-size:cover;background-position:center;transform-style:preserve-3d} .cx-layer-body{background:linear-gradient(160deg,#4a4640,#2c2925);} .cx-layer-glaze{background:linear-gradient(120deg,rgba(232,217,168,.5),rgba(184,155,94,.28));backdrop-filter:blur(1px)} .cx-layer-face{background-image:var(--auric)} .cx-layer-label{position:absolute;left:calc(100% + 14px);top:50%;translate:0 -50%;white-space:nowrap; font-size:.56rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);opacity:0} .js-cine .cx-layer{transform:translateZ(0)} .cx-anatomy-copy .cx-kicker{font-size:.6rem;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);display:block;margin-bottom:1.2rem} .cx-anatomy-copy h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,3.4vw,3.2rem);line-height:1.08;margin-bottom:1.4rem} .cx-anatomy-copy h2 em{font-style:italic;color:var(--gold)} .cx-anatomy-copy p{font-size:.92rem;line-height:1.8;color:var(--cx-ink-2);max-width:32em;margin:0 auto 2rem} @media(min-width:861px){.cx-anatomy-copy p{margin-left:0}} .cx-specrow{display:flex;gap:2.4rem;flex-wrap:wrap;justify-content:center} @media(min-width:861px){.cx-specrow{justify-content:flex-start}} .cx-specrow div{border-top:1px solid rgba(255,255,255,.16);padding-top:.7rem} .cx-specrow b{font-family:var(--serif);font-weight:300;font-size:1.5rem;color:#fff;display:block} .cx-specrow span{font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.5)} /* ============================================================ ACT 4 — THE FINISHES (horizontal scrub) ============================================================ */ .cx-finishes{position:relative;background:#000} .js-cine .cx-finishes{height:400vh} .cx-finishes-pin{position:relative;height:auto;overflow:visible} .js-cine .cx-finishes-pin{height:100vh;overflow:hidden;position:sticky;top:0} .cx-track{display:flex;height:100%;flex-wrap:wrap} /* fallback: stack */ .js-cine .cx-track{flex-wrap:nowrap;width:max-content} /* cinematic: rail */ .cx-finish{position:relative;width:100%;height:100vh;flex:none;overflow:hidden;display:grid;place-items:center} .js-cine .cx-finish{width:100vw} .cx-finish-bg{position:absolute;inset:0} .cx-finish-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform} .cx-finish::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.15) 40%,rgba(0,0,0,.6))} .cx-finish-copy{position:relative;z-index:2;text-align:center;color:#fff;padding:0 var(--pad)} .cx-finish-copy .code{font-size:.6rem;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:#E8D9B8;display:block;margin-bottom:1rem} .cx-finish-copy h3{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,7vw,6rem);line-height:1;letter-spacing:-.01em} .cx-finish-copy p{margin-top:1.2rem;font-size:.9rem;color:rgba(255,255,255,.82);max-width:26em;margin-inline:auto} .cx-finish-index{position:absolute;left:var(--pad);bottom:2rem;z-index:3;font-family:var(--serif);font-style:italic;color:rgba(255,255,255,.55);font-size:1.1rem} .cx-finishes-title{position:absolute;top:2rem;left:50%;transform:translateX(-50%);z-index:3; font-size:.58rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:rgba(255,255,255,.6)} /* ============================================================ ACT 5 — THE ROOM ============================================================ */ .cx-room{position:relative;height:100vh;overflow:hidden;display:grid;place-items:center;color:#fff;background:#000} .cx-room-bg{position:absolute;inset:-8% 0;z-index:0} .cx-room-bg img,.cx-room-bg video{width:100%;height:116%;object-fit:cover;will-change:transform} .cx-room::after{content:"";position:absolute;inset:0;background:rgba(8,7,6,.42)} .cx-room-copy{position:relative;z-index:2;text-align:center;padding:0 var(--pad)} .cx-room-copy .k{font-size:.6rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:#E8D9B8;display:block;margin-bottom:1.3rem} .cx-room-copy h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,5vw,4.4rem);line-height:1.06} .cx-room-copy h2 em{font-style:italic;color:#E8D9B8} .cx-room-copy .cx-cta{margin-top:2.2rem;display:inline-flex;gap:1rem;flex-wrap:wrap;justify-content:center} /* reduced motion → everything calm & visible */ @media (prefers-reduced-motion:reduce){ .js-cine .cx-hero,.js-cine .cx-anatomy,.js-cine .cx-finishes{height:auto} .js-cine .cx-hero-pin,.js-cine .cx-anatomy-pin,.js-cine .cx-finishes-pin{position:relative} .js-cine .cx-title .l > span,.js-cine .cx-big .w{transform:none;opacity:1} .cx-dust,.cx-grain,.cx-scrollhint::after{display:none} .js-cine .cx-track{flex-wrap:wrap} .cx-finish{width:100vw} } /* ============================================================ v5 — cinematic full-bleed video scenes (object / macro / room) ============================================================ */ .cx-scene{position:relative;height:100vh;overflow:hidden;display:grid;place-items:center;background:#000;color:#fff} .cx-scene-media{position:absolute;inset:0;z-index:0} .cx-scene-media video,.cx-scene-media img{width:100%;height:100%;object-fit:cover;will-change:transform} .cx-scene.contain .cx-scene-media video{object-fit:contain;background:#000} .cx-scene::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(6,5,4,.55),rgba(6,5,4,.2) 42%,rgba(6,5,4,.72)); box-shadow:inset 0 -160px 160px -80px rgba(0,0,0,.7),inset 0 120px 140px -90px rgba(0,0,0,.55)} .cx-scene-copy{position:relative;z-index:2;text-align:center;padding:0 var(--pad);max-width:42rem} .cx-scene-copy .cx-kicker{display:block;margin-bottom:1.2rem;font-size:.58rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:#E8D9B8} .cx-scene-copy h2{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,5.2vw,4.4rem);line-height:1.04;letter-spacing:-.015em} .cx-scene-copy h2 em{font-style:italic;color:#E8D9B8} .cx-scene-copy p{margin-top:1.3rem;font-size:.92rem;line-height:1.8;color:rgba(255,255,255,.82);max-width:32em;margin-inline:auto} .cx-scene-tag{position:absolute;top:2rem;left:50%;transform:translateX(-50%);z-index:2; font-size:.56rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:rgba(255,255,255,.55)} @media (prefers-reduced-motion:reduce){.cx-scene-media video{display:none}} /* ============================================================ v7 — CINEMATIC STOREFRONT LOADER (real photo pre-loader) Reuses .intro / intro-play / intro-done mechanism. ============================================================ */ #intro{background:#0b0a08!important} .load-photo{position:absolute;inset:0;overflow:hidden;z-index:0} .load-photo img,.load-photo video{ width:100%;height:100%;object-fit:cover;object-position:50% 50%; } /* CSS push only on the still fallback; the video carries its own camera move */ .load-photo img{transform:scale(1.02);transform-origin:52% 56%} .intro-play .load-photo img{animation:loadPush 7.6s cubic-bezier(.33,0,.12,1) forwards} @keyframes loadPush{from{transform:scale(1.02)}to{transform:scale(1.34)}} /* warm entrance glow that swells as we push in */ .load-glow{position:absolute;left:52%;top:56%;width:60vw;height:60vw;transform:translate(-50%,-50%) scale(.4); z-index:1;pointer-events:none;opacity:0; background:radial-gradient(closest-side,rgba(255,214,150,.5),rgba(255,190,110,.12) 45%,transparent 70%); mix-blend-mode:screen} .intro-play .load-glow{animation:loadGlow 7.4s ease-in forwards} @keyframes loadGlow{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}70%{opacity:.5}100%{opacity:.95;transform:translate(-50%,-50%) scale(1.1)}} /* cinematic scrim for legibility */ .load-scrim{position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(180deg,rgba(8,7,5,.45) 0%,rgba(8,7,5,0) 26%,rgba(8,7,5,.12) 58%,rgba(8,7,5,.82) 100%)} /* the panel */ .load-panel{position:absolute;left:0;right:0;bottom:clamp(3rem,9vh,6.5rem);z-index:3; display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 var(--pad);color:#fff} .load-eyebrow{font-size:.56rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:#E8D9B8; opacity:0;transform:translateY(14px);animation:loadUp .9s var(--ease-lux) .3s forwards} .load-title{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,5vw,3.4rem);letter-spacing:.06em;margin:1rem 0 .5rem; text-shadow:0 2px 30px rgba(0,0,0,.5);opacity:0;transform:translateY(16px);animation:loadUp 1s var(--ease-lux) .45s forwards} .load-title i{color:var(--gold);font-style:italic} .load-sub{font-size:.62rem;font-weight:600;letter-spacing:.36em;text-transform:uppercase;color:rgba(255,255,255,.72); opacity:0;transform:translateY(14px);animation:loadUp 1s var(--ease-lux) .6s forwards} .load-track{position:relative;width:clamp(220px,32vw,380px);height:2px;margin:1.9rem 0 .9rem; background:rgba(255,255,255,.18);overflow:hidden; opacity:0;animation:loadUp 1s var(--ease-lux) .75s forwards} .load-fill{position:absolute;left:0;top:0;bottom:0;width:0%; background:linear-gradient(90deg,#8a713d,#E6D6A9 50%,#B89B5E);box-shadow:0 0 14px rgba(232,217,168,.6)} .load-pct{font-family:var(--serif);font-style:italic;font-weight:300;font-size:.95rem;color:#E8D9B8; opacity:0;animation:loadUp 1s var(--ease-lux) .85s forwards} @keyframes loadUp{to{opacity:1;transform:none}} /* smooth dissolve to the site */ .intro-play #intro{animation:loadReveal .8s var(--ease-lux) 7.4s forwards} @keyframes loadReveal{to{opacity:0;visibility:hidden}} @media (prefers-reduced-motion:reduce){ .intro-play .load-photo img,.intro-play .load-glow{animation:none} }