/* ============================================================
   316 Web Works — fx316.css  (new interactive effects + page heroes)
   Concrete & Ink palette: bg #e9e5df · ink #12100e · orange #d2711f
   ============================================================ */

/* ---------- shader backgrounds ---------- */
.shader-sec{position:relative;overflow:hidden;isolation:isolate}
.shader-sec>canvas.shader-bg{position:absolute;inset:0;width:100%;height:100%;z-index:-1;display:block}
canvas.shader-bg.no-gl{background:radial-gradient(ellipse at 70% 30%,rgba(224,122,46,.22),transparent 60%),linear-gradient(160deg,#ece8e2,#d9d3cb)}
.shader-sec.on-dark{color:#f4f1ec}
.shader-sec.on-dark .sub,.shader-sec.on-dark p{color:rgba(244,241,236,.78)}
.shader-sec.on-dark .label{color:#e08a3c}
.shader-sec.on-dark .btn-ghost{color:#f4f1ec;border-color:rgba(244,241,236,.4)}
.shader-sec .glass{background:rgba(244,241,236,.55);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border:1px solid rgba(255,255,255,.6);border-radius:22px;box-shadow:0 30px 80px rgba(18,16,14,.12)}
.shader-sec.on-dark .glass{background:rgba(18,16,14,.42);border-color:rgba(244,241,236,.14)}
.shader-swatches{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.shader-swatches button{font:600 13px Inter,sans-serif;padding:9px 16px;border-radius:100px;border:1px solid rgba(18,16,14,.2);background:rgba(244,241,236,.7);color:#12100e;cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.shader-swatches button.on{background:#12100e;color:#f4f1ec;border-color:#12100e}
.shader-sec.on-dark .shader-swatches button{background:rgba(18,16,14,.5);color:#f4f1ec;border-color:rgba(244,241,236,.25)}
.shader-sec.on-dark .shader-swatches button.on{background:#e07a2e;border-color:#e07a2e;color:#12100e}

/* ---------- page heroes (new video heroes) ---------- */
.vhero{position:relative;min-height:88svh;display:flex;align-items:flex-end;padding:0 0 80px;overflow:hidden;background:#e9e5df}
.vhero .vh-media{position:absolute;inset:0;z-index:0}
.vhero .vh-media video,.vhero .vh-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vhero .vh-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(233,229,223,.92) 0%,rgba(233,229,223,.62) 34%,rgba(233,229,223,0) 64%),linear-gradient(0deg,rgba(233,229,223,1) 0%,rgba(233,229,223,0) 26%)}
.vhero .wrap{position:relative;z-index:2;width:100%}
.vhero h1{max-width:12ch}
.vhero .sub{max-width:520px}
.vhero .vh-chip{display:inline-flex;align-items:center;gap:10px;margin-top:26px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#6b645c}
.vhero .vh-chip i{width:8px;height:8px;border-radius:50%;background:#e07a2e;box-shadow:0 0 0 0 rgba(224,122,46,.6);animation:vhping 2s infinite}
@keyframes vhping{0%{box-shadow:0 0 0 0 rgba(224,122,46,.55)}70%{box-shadow:0 0 0 12px rgba(224,122,46,0)}100%{box-shadow:0 0 0 0 rgba(224,122,46,0)}}
@media(max-width:760px){
  .vhero{min-height:82svh;padding-bottom:56px}
  .vhero .vh-shade{background:linear-gradient(0deg,rgba(233,229,223,1) 0%,rgba(233,229,223,.86) 40%,rgba(233,229,223,.2) 75%,rgba(233,229,223,0) 100%)}
}

/* ---------- bottom video heroes (closing CTA band on inner pages) ---------- */
.endhero{position:relative;min-height:86svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:#12100e;color:#f4f1ec}
.endhero video,.endhero img.eh-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.endhero .eh-shade{position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 52%,rgba(18,16,14,.5),rgba(18,16,14,.78) 75%),linear-gradient(180deg,rgba(233,229,223,1) 0%,rgba(233,229,223,0) 14%)}
.endhero .inner{position:relative;z-index:2;padding:0 24px;max-width:780px}
.endhero h2{font-size:clamp(34px,5.4vw,68px);letter-spacing:-.03em;color:#f4f1ec;text-shadow:0 2px 24px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4)}
.endhero h2 .o{color:#e08a3c}
.endhero p{color:rgba(244,241,236,.9);text-shadow:0 1px 12px rgba(0,0,0,.6);font-size:17px;margin:18px auto 0;max-width:560px}
.endhero .btn-primary{background:#f4f1ec;color:#12100e}
.endhero .btn-primary:hover{background:#fff}
.endhero .btn-ghost{color:#f4f1ec;border-color:rgba(244,241,236,.45)}
.endhero .btn-ghost:hover{background:rgba(244,241,236,.1);color:#fff;border-color:#f4f1ec}

/* ---------- fan deck ---------- */
.fandeck{position:relative;height:230vh}
.fandeck .fan-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.fandeck .fan-stage{position:relative;height:min(60vh,500px);margin-top:54px}
.fan-card{position:absolute;left:50%;top:0;width:min(30vw,300px);aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:#12100e;color:#f4f1ec;box-shadow:0 30px 70px rgba(18,16,14,.28),0 0 0 1px rgba(18,16,14,.08);transform-origin:50% 120%;transition:box-shadow .35s;will-change:transform;cursor:pointer;display:block}
.fan-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.fan-card.hot img{transform:scale(1.06)}
.fan-card .fc-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,16,14,0) 40%,rgba(18,16,14,.86))}
.fan-card .fc-num{position:absolute;top:16px;left:18px;font:700 13px Sora,sans-serif;letter-spacing:.2em;color:#f4f1ec;background:rgba(18,16,14,.45);backdrop-filter:blur(6px);padding:6px 10px;border-radius:100px}
.fan-card .fc-cap{position:absolute;left:18px;right:18px;bottom:18px}
.fan-card .fc-cap b{display:block;font:700 19px/1.15 Sora,sans-serif;letter-spacing:-.01em}
.fan-card .fc-cap span{display:block;font-size:12.5px;color:rgba(244,241,236,.72);margin-top:5px}
.fan-card .fc-cap em{display:inline-block;margin-top:10px;font-style:normal;font-size:12px;font-weight:600;color:#e08a3c}
.fan-card.hot{box-shadow:0 40px 90px rgba(18,16,14,.36),0 0 0 2px #e07a2e}
@media(max-width:760px){.fan-card{width:min(46vw,210px);border-radius:16px}.fan-card .fc-cap b{font-size:15px}.fan-card .fc-cap span{display:none}.fandeck{height:200vh}}

/* ---------- card folder ---------- */
.folders{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px;margin-top:40px}
.folder{position:relative;height:300px;cursor:pointer;outline:none;perspective:1200px}
.folder .f-back{position:absolute;inset:40px 0 0;background:#2a241f;border-radius:18px}
.folder .f-back::before{content:"";position:absolute;top:-22px;left:0;width:44%;height:30px;background:#2a241f;border-radius:14px 14px 0 0}
.folder .f-card{position:absolute;left:8%;right:8%;top:56px;height:200px;border-radius:14px;overflow:hidden;background:#f4f1ec;box-shadow:0 10px 26px rgba(18,16,14,.25);transition:transform .55s cubic-bezier(.2,.8,.2,1.15);transform-origin:50% 100%}
.folder .f-card img{width:100%;height:100%;object-fit:cover}
.folder .f-card:nth-of-type(2){transform:translateY(6px) rotate(-1.5deg)}
.folder .f-card:nth-of-type(3){transform:translateY(12px) rotate(1.5deg)}
.folder .f-front{position:absolute;left:0;right:0;bottom:0;height:62%;border-radius:18px;background:linear-gradient(160deg,#3a322b,#1d1915);box-shadow:0 -1px 0 rgba(255,255,255,.08) inset,0 20px 40px rgba(18,16,14,.25);transform-origin:50% 100%;transition:transform .55s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;justify-content:flex-end;padding:20px 22px;color:#f4f1ec;z-index:5}
.folder .f-front b{font:700 20px Sora,sans-serif;letter-spacing:-.01em}
.folder .f-front span{font-size:13px;color:rgba(244,241,236,.68);margin-top:4px}
.folder .f-front i{position:absolute;top:18px;right:20px;width:10px;height:10px;border-radius:50%;background:#e07a2e}
.folder.open .f-front{transform:rotateX(-28deg)}
.folder.open .f-card:nth-of-type(1){transform:translate(-34%,-92px) rotate(-12deg)}
.folder.open .f-card:nth-of-type(2){transform:translate(0,-118px) rotate(0)}
.folder.open .f-card:nth-of-type(3){transform:translate(34%,-92px) rotate(12deg)}
.folder:focus-visible .f-front{box-shadow:0 0 0 3px #e07a2e}

/* ---------- orbit carousel ---------- */
.orbit-wrap{position:relative;overflow:clip}
.orbit{position:relative;height:min(62vh,480px);perspective:1400px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.orbit.grab{cursor:grabbing}
.orbit-ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.orbit-item{position:absolute;left:0;top:0;width:min(28vw,290px);aspect-ratio:16/11;margin-left:calc(min(28vw,290px) / -2);margin-top:calc(min(28vw,290px) * -11 / 32);border-radius:18px;overflow:hidden;background:#12100e;box-shadow:0 26px 60px rgba(18,16,14,.25);backface-visibility:hidden;-webkit-backface-visibility:hidden;display:block;transition:box-shadow .3s}
.orbit-item img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.orbit-item .oi-cap{position:absolute;left:0;right:0;bottom:0;padding:30px 16px 14px;background:linear-gradient(180deg,transparent,rgba(18,16,14,.85));color:#f4f1ec;font:700 15px Sora,sans-serif;opacity:0;transition:opacity .3s}
.orbit-item.front .oi-cap{opacity:1}
.orbit-item.front{box-shadow:0 30px 70px rgba(18,16,14,.32),0 0 0 2px #e07a2e}
.orbit-ctrl{display:flex;gap:12px;justify-content:center;margin-top:8px}
.orbit-ctrl button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(18,16,14,.22);background:rgba(244,241,236,.7);color:#12100e;font-size:18px;cursor:pointer;transition:background .25s,color .25s}
.orbit-ctrl button:hover{background:#12100e;color:#f4f1ec}
@media(max-width:760px){.orbit{height:56vh}.orbit-item{width:58vw;margin-left:-29vw;margin-top:calc(58vw * -11 / 32)}}

/* ---------- image tunnel ---------- */
.tunnel{position:relative;height:420vh;background:#e9e5df}
.tunnel .tunnel-sticky{position:sticky;top:0;height:100vh;overflow:hidden;perspective:900px;perspective-origin:50% 50%}
.tunnel .tunnel-sticky::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(233,229,223,0) 30%,rgba(233,229,223,.9) 90%)}
.tunnel-world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.tunnel-tile{position:absolute;left:0;top:0;width:min(42vw,540px);aspect-ratio:16/10;border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(18,16,14,.25);background:#12100e;will-change:transform,opacity}
.tunnel-tile img{width:100%;height:100%;object-fit:cover}
.tunnel-tile span{position:absolute;left:14px;bottom:12px;font:600 12px Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#f4f1ec;background:rgba(18,16,14,.55);backdrop-filter:blur(6px);padding:6px 10px;border-radius:100px}
.tunnel-intro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:3;pointer-events:none;padding:0 24px}
.tunnel-final{position:absolute;left:50%;top:50%;z-index:4;text-align:center;opacity:0;width:min(90vw,760px)}
.tunnel.static{height:auto}
.tunnel.static .tunnel-sticky{position:relative;height:auto;perspective:none;padding:40px 0}
.tunnel.static .tunnel-world{position:static;transform:none!important;width:auto;height:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:0 28px}
.tunnel.static .tunnel-tile{position:relative;transform:none!important;opacity:1!important;width:auto}
.tunnel.static .tunnel-final{position:relative;left:auto;top:auto;transform:none!important;opacity:1;margin:30px auto 0}
@media(max-width:760px){.tunnel-tile{width:62vw}}

/* ---------- zoom reveal ---------- */
.zoomrev{position:relative;height:260vh}
.zoomrev .zr-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center}
.zoomrev-frame{position:absolute;inset:0;clip-path:inset(26% 34% round 28px);will-change:clip-path;background:#12100e}
.zoomrev-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.zoomrev .zr-words{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:min(30vw,420px);pointer-events:none;z-index:2}
.zoomrev .zr-words span{font:800 clamp(40px,7.5vw,112px)/1 Sora,sans-serif;letter-spacing:-.04em;color:#12100e;will-change:transform,opacity}
.zoomrev .zr-words .o{color:#d2711f}
.zoomrev-after{position:absolute;left:0;right:0;bottom:12vh;z-index:3;text-align:center;opacity:0;color:#f4f1ec;padding:0 24px}
.zoomrev-after h3{font:800 clamp(28px,4.4vw,56px)/1.05 Sora,sans-serif;letter-spacing:-.03em;text-shadow:0 4px 30px rgba(0,0,0,.4)}
.zoomrev-after p{margin:12px auto 0;max-width:540px;color:rgba(244,241,236,.86)}
@media(max-width:760px){.zoomrev .zr-words{flex-direction:column;gap:46vh}}

/* ---------- small helpers ---------- */
.fx-tag{display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#7a5c2e;font-weight:600}
.fx-tag::before{content:"";width:18px;height:2px;background:#d2711f}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.new-badge{display:inline-block;font:700 10px Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#f4f1ec;background:#d2711f;padding:4px 8px;border-radius:100px;margin-left:10px;vertical-align:middle}

@media (prefers-reduced-motion: reduce){
  .fandeck{height:auto}.fandeck .fan-sticky{position:relative;height:auto;padding:60px 0}
  .zoomrev{height:auto}.zoomrev .zr-sticky{position:relative;height:80vh}
  .vhero .vh-chip i{animation:none}
}

/* ===== Oct 20 fixes ===== */
/* card folders: cards are children 2-4 (f-back is child 1) — fan them up into open space */
.folders{margin-top:150px;row-gap:170px}
.folder .f-card:nth-child(2){transform:none}
.folder .f-card:nth-child(3){transform:translateY(6px) rotate(-1.5deg)}
.folder .f-card:nth-child(4){transform:translateY(12px) rotate(1.5deg)}
.folder.open .f-card:nth-child(2){transform:translate(-30%,-120px) rotate(-11deg)}
.folder.open .f-card:nth-child(3){transform:translate(0,-150px) rotate(0)}
.folder.open .f-card:nth-child(4){transform:translate(30%,-120px) rotate(11deg)}
.folder.open .f-front{transform:rotateX(-24deg)}
.folder .f-card:nth-child(3){transition-delay:.04s}.folder .f-card:nth-child(4){transition-delay:.08s}
@media(max-width:760px){.folders{margin-top:130px;row-gap:150px}}

/* cursor spotlight: light text on the dark stage so it reads before the light finds it */
.spotlight .h-md,.spotlight .h-lg{color:#f4f1ec}
.spotlight .sand{color:#e8873a}
.spotlight .sub{color:rgba(244,241,236,.78)}
.spotlight .want{color:#f4f1ec;border-color:rgba(244,241,236,.4)}
.spotlight .want.saved{background:#f4f1ec;color:#12100e}
.spotlight .veil{background:radial-gradient(circle 260px at var(--mx,50%) var(--my,50%),rgba(232,150,70,.5),rgba(224,122,46,.16) 45%,rgba(0,0,0,.86) 72%)}

/* video inside type — light theme version: light paper, video only shows through the letters */
.masktext{background:#e9e5df}
.masktext .mask{background:#e9e5df;mix-blend-mode:screen}
.masktext .mask span,.masktext .mask small{color:#000}

/* pinned story: longer ride */
.pin{height:520vh}
@media(max-width:760px){.pin{height:420vh}}

/* the open-sign footage: keep the sign in frame when cropped */
.os-pos{object-position:66% 42%!important}

/* zoom reveal second layer (sketch -> site) */
.zoomrev-media2{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;will-change:opacity,transform}

/* flip cards: demo pulse */
.flip.demo .flip-inner{transform:rotateY(180deg)}

/* zoom reveal: readable end card + phone layout (words above / below the frame) */
.zoomrev-after{bottom:0;padding:120px 24px 12vh;background:linear-gradient(0deg,rgba(18,16,14,.78),rgba(18,16,14,.35) 60%,rgba(18,16,14,0))}
.zoomrev-after h3{color:#f4f1ec}
.zoomrev-after .label{display:block;margin-bottom:10px;letter-spacing:.3em;font-size:11px;text-transform:uppercase}
@media(max-width:760px){
  .zoomrev .zr-words{flex-direction:column;justify-content:space-between;gap:0;padding:15vh 0 15vh}
  .zoomrev .zr-words span{font-size:clamp(40px,12vw,64px)}
  .zoomrev-frame{clip-path:inset(30% 14% round 22px)}
}
/* orbit on phones: bigger cards, wider ring */
@media(max-width:760px){
  .orbit{height:440px}
  .orbit-item{width:62vw;margin-left:-31vw;margin-top:calc(62vw * -11 / 32)}
  .orbit-item .oi-cap{font-size:13px;padding:24px 12px 10px}
}
.home-orbit .orbit-item .oi-cap{opacity:1;background:linear-gradient(180deg,transparent,rgba(18,16,14,.8))}

/* home: free-mockup band on cinematic light ribbons (replaces the aurora shader) */
.mock-hero{min-height:82svh}
.mock-hero .inner{max-width:900px}
.mock-hero .eh-shade{background:radial-gradient(ellipse at 50% 50%,rgba(18,16,14,.55),rgba(18,16,14,.82) 78%),linear-gradient(180deg,rgba(233,229,223,1) 0%,rgba(233,229,223,0) 12%,rgba(233,229,223,0) 88%,rgba(233,229,223,1) 100%)}
.mock-hero .label{display:block;margin-bottom:14px;letter-spacing:.32em;font-size:12px;text-transform:uppercase}
.mh-trust{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:26px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,241,236,.7)}
.mh-trust i{width:4px;height:4px;border-radius:50%;background:#e07a2e;display:inline-block}

/* cursor spotlight v2: the light actually reveals a picture hiding in the dark */
.spotlight .sp-under{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;z-index:0}
.spotlight .veil{z-index:1;background:radial-gradient(circle 300px at var(--mx,62%) var(--my,50%),rgba(12,10,8,0) 0%,rgba(12,10,8,.12) 38%,rgba(12,10,8,.72) 62%,rgba(8,7,6,.96) 80%)}
.spotlight .veil::after{content:"";position:absolute;inset:0;background:radial-gradient(circle 320px at var(--mx,62%) var(--my,50%),rgba(224,122,46,.22),rgba(224,122,46,0) 60%);mix-blend-mode:screen}
.spotlight .h-lg,.spotlight .h-md,.spotlight .sub{text-shadow:0 2px 18px rgba(0,0,0,.75)}

/* fan deck: size the cards to the screen height so short laptop screens see the whole fan */
.fan-card{width:min(30vw,300px,calc((100svh - 360px) * .75))}
.fandeck .fan-stage{height:min(60vh,500px,calc(100svh - 250px))}
@media(max-height:860px) and (min-width:761px){.fandeck .fan-stage{margin-top:30px}}
@media(max-width:760px){.fan-card{width:min(46vw,210px)}}

/* home opener (Oct 21): sketch→site is the first screen */
.zoomrev h1.zr-words{margin:0;font-size:inherit;line-height:1}
.home-open .zr-intro{position:absolute;left:0;right:0;top:15vh;z-index:3;text-align:center;pointer-events:none;padding:0 24px}
.home-open .zr-intro .label{display:inline-block;margin:0;letter-spacing:.28em}
.home-open .zr-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;font-family:Sora,sans-serif;letter-spacing:.3em;text-transform:uppercase;font-size:.64rem;color:rgba(18,16,14,.6);animation:bob316 1.9s ease-in-out infinite;white-space:nowrap;pointer-events:none}
@media(max-width:760px){.home-open .zr-intro{top:auto;bottom:62px}.home-open .zr-intro .label{font-size:10px;letter-spacing:.2em}}
@media(prefers-reduced-motion:reduce){.home-open .zr-hint{display:none}}
@media(min-width:761px){
  .home-open .zr-words{gap:min(34vw,520px)}
  .home-open .zr-words>span.zr-l,.home-open .zr-words>span.zr-r{flex:1 1 0;min-width:0;white-space:nowrap}
  .home-open .zr-words>span.zr-l{text-align:right}
  .home-open .zr-words>span.zr-r{text-align:left}
  .home-open .zr-words span{font-size:clamp(36px,5.4vw,88px)}
}

/* orbit on phones: flat swipe row (set by fx316.js) */
.orbit.flat{height:auto;perspective:none;cursor:auto;touch-action:auto}
.orbit.flat .orbit-ring{position:static;left:auto;top:auto;width:auto;height:auto;transform:none;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:14px 15vw 30px;scrollbar-width:none}
.orbit.flat .orbit-ring::-webkit-scrollbar{display:none}
.orbit.flat .orbit-item{position:relative;left:auto;top:auto;flex:0 0 70vw;width:70vw;margin:0;transform:none;opacity:1;scroll-snap-align:center;box-shadow:0 18px 40px rgba(18,16,14,.22)}
.orbit.flat .orbit-item .oi-cap{opacity:1;font-size:14px}