/* ═══════════════════════════════════════════════════════════════
   GRAPHIC CANNON — SHOWCASE: Aim·Fire blast · Reel ring · Poster tunnel
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────── BE CREATIVE (pinned) ─────────────── */
.blast{position:relative;height:260vh;background:var(--bg);z-index:5}
.blast-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;isolation:isolate}
.blast-grid{
  position:absolute;inset:-10%;z-index:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(200,255,0,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(200,255,0,.07) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 0,transparent 62%);mask-image:radial-gradient(circle at 50% 50%,#000 0,transparent 62%);
}
.blast-title{
  position:relative;z-index:3;display:flex;align-items:baseline;justify-content:center;gap:.18em;
  font-family:var(--f-d);font-weight:700;font-size:clamp(38px,11.4vw,236px);line-height:.9;letter-spacing:-.05em;
  white-space:nowrap;margin:0;
}
.bw{display:inline-flex;will-change:transform}
.bw-a{color:var(--ink)}
.bw-b{color:var(--lime);font-style:italic;font-weight:500}
.bc{display:inline-block;white-space:pre;will-change:transform,opacity,filter}
/* "Creative." — every letter in a different brand colour */
.bw-b .bc:nth-child(5n+1){color:#c8ff00}
.bw-b .bc:nth-child(5n+2){color:#22d3ee}
.bw-b .bc:nth-child(5n+3){color:#ff5fa2}
.bw-b .bc:nth-child(5n+4){color:#ffd93d}
.bw-b .bc:nth-child(5n+5){color:#a97bff}
.blast-sub{
  position:absolute;z-index:3;left:0;right:0;top:calc(50% + clamp(48px,9vw,150px));text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(10px,1vw,13px);
  letter-spacing:.32em;text-transform:uppercase;color:var(--ink-2);opacity:0;
}
.blast-hint{
  position:absolute;z-index:3;left:0;right:0;bottom:clamp(22px,5vh,46px);text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);
}
.blast-rings{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none}
.blast-rings i{
  position:absolute;width:30vmin;height:30vmin;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);
  opacity:0;transform:scale(0);
}
.blast-rings i:nth-child(2){border-color:rgba(34,211,238,.45)}
.blast-rings i:nth-child(3){border-color:rgba(255,95,162,.4)}

/* ─────────────── REEL RING (normal flow, auto-sliding) ─────────────── */
.reel{position:relative;background:radial-gradient(ellipse 80% 60% at 50% 70%,rgba(200,255,0,.06),transparent 70%),var(--bg);z-index:5}
.reel-pin{position:relative;overflow:hidden;display:flex;flex-direction:column;padding-block:clamp(64px,8vw,120px) clamp(40px,5vw,72px)}
.reel-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px;position:relative;z-index:3}
.reel-head > div{display:flex;flex-direction:column;align-items:center}
.reel-head .eyebrow{margin-bottom:12px}
.reel-sub{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 14px;margin-top:16px;font-size:clamp(13px,1.05vw,16px);font-weight:500;letter-spacing:.04em;color:var(--ink-2)}
.reel-sub i{width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none}
.reel-actions{display:flex;gap:10px;flex-wrap:wrap}
.reel-actions .btn .ar{width:16px;height:16px}
.ring-stage{
  --cw:clamp(250px,30vw,440px);
  position:relative;flex:none;height:calc(var(--cw) * .5625 + 230px);perspective:1800px;perspective-origin:50% 40%;
  cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
}
.ring-stage.dragging{cursor:grabbing}
.ring{position:absolute;left:50%;top:46%;width:var(--cw);aspect-ratio:16/9;margin-left:calc(var(--cw) / -2);transform-style:preserve-3d;will-change:transform;translate:0 -50%}
.rc{
  --f:1;position:absolute;inset:0;border-radius:14px;overflow:hidden;
  transform:rotateY(calc(var(--i) * var(--step))) translateZ(var(--r));
  background:#111;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8);
  opacity:calc(.25 + var(--f) * .75);
  filter:brightness(calc(.35 + var(--f) * .65)) saturate(calc(.5 + var(--f) * .5));
  -webkit-box-reflect:below 10px linear-gradient(transparent 62%,rgba(0,0,0,.28));
  backface-visibility:hidden;
}
.rc img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.rc::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,6,7,.88));pointer-events:none}
.rc-meta{position:absolute;left:14px;right:14px;bottom:12px;z-index:2;display:flex;flex-direction:column;gap:2px;text-align:left}
.rc-meta b{font-family:var(--f-d);font-weight:600;font-size:clamp(13px,1.15vw,17px);color:#fff;line-height:1.2}
.rc-meta em{font-style:normal;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.rc-play{
  position:absolute;z-index:2;left:50%;top:42%;translate:-50% -50%;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;background:rgba(200,255,0,.92);color:#080808;
  opacity:calc(var(--f) * var(--f));scale:calc(.7 + var(--f) * .3);transition:background .3s
}
.rc-play svg{width:22px;height:22px;margin-left:3px}
.rc:hover img{transform:scale(1.06)}
.rc:hover .rc-play{background:#fff}
.rc.front{border-color:rgba(200,255,0,.6)}
.rc:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.ring-foot{position:relative;z-index:3;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding-bottom:clamp(18px,4vh,40px);text-align:center}
.ring-now{display:flex;align-items:center;gap:10px;font-family:var(--f-d);font-weight:600;font-size:clamp(16px,1.6vw,22px)}
.ring-now i{width:9px;height:9px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 12px rgba(255,59,59,.7);animation:blinkDot 1.4s infinite}
.ring-tip{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
@media(max-width:700px){
  /* keep heading, buttons and ring together instead of spreading over the full screen */
  .reel-pin{gap:6px}
  .reel-head{gap:16px}
  .reel-sub{gap:6px 10px;font-size:12.5px}
  .ring-stage{--cw:64vw;perspective:1000px;flex:none;height:calc(var(--cw) * .5625 + 130px)}
  .ring{top:42%}
  .ring-foot{padding-bottom:0;margin-top:4px}
  .ring-tip{font-size:10.5px}
  .reel-actions .btn{padding:11px 18px;font-size:13px}
  .rc-play{width:42px;height:42px}
}

/* ─────────────── POSTER TUNNEL ─────────────── */
.tunnel{position:relative;height:400vh;background:var(--bg);z-index:5}
.tunnel-pin{position:sticky;top:0;height:100svh;overflow:hidden}
.tunnel-word{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:0;
  font-family:var(--f-d);font-weight:700;font-size:clamp(80px,22vw,380px);letter-spacing:-.05em;line-height:1;
  color:transparent;-webkit-text-stroke:1px rgba(200,255,0,.13);
}
.tunnel-head{position:absolute;left:0;right:0;top:calc(var(--nav-h) + 4vh);z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:center;text-align:center}
.tunnel-head::before{content:'';position:absolute;z-index:-1;left:50%;top:-60px;translate:-50% 0;width:min(900px,96vw);height:calc(100% + 140px);background:radial-gradient(ellipse at 50% 45%,rgba(6,6,7,.92) 30%,transparent 72%);pointer-events:none}
.tunnel-head .h-xl{margin:12px auto 14px;max-width:14ch}
.tunnel-head .lead{max-width:50ch;margin-inline:auto}
.tunnel-stage{position:absolute;inset:0;perspective:1100px;perspective-origin:50% 50%;z-index:2}
.tunnel-world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform}
.tp{
  --w:clamp(200px,21vw,330px);
  position:absolute;left:calc(var(--w) / -2);top:calc(var(--w) * -.75);width:var(--w);aspect-ratio:2/3;
  border-radius:14px;overflow:hidden;background:#111;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 80px -24px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4);
  will-change:transform,opacity;backface-visibility:hidden;
}
.tp img{width:100%;height:100%;object-fit:cover}
/* hidden until the tunnel script reveals them (the static fallback below forces them visible) */
html.sc-on .tp{opacity:0}
.tp::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(125deg,rgba(255,255,255,.18),transparent 32%)}
.tp-cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:30px 14px 12px;text-align:left;
  display:flex;flex-direction:column;gap:2px;background:linear-gradient(transparent,rgba(6,6,7,.9));
  opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s var(--ease);
}
.tp-cap b{font-family:var(--f-d);font-weight:600;font-size:15px;color:#fff}
.tp-cap em{font-style:normal;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.tp:hover .tp-cap,.tp.near .tp-cap,.tp:focus-visible .tp-cap{opacity:1;transform:none}
.tp:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
.tunnel-hud{position:absolute;left:0;right:0;bottom:clamp(18px,4vh,40px);z-index:3;display:flex;align-items:center;gap:22px}
.th-count{font-family:var(--f-d);font-weight:600;font-size:14px;color:var(--mute);white-space:nowrap}
.th-count b{color:var(--lime);font-size:26px;font-weight:600}
.th-title{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th-bar{flex:1;height:2px;background:var(--brd);border-radius:2px;overflow:hidden;min-width:60px}
.th-bar i{display:block;height:100%;width:0;background:var(--lime);box-shadow:0 0 12px var(--lime-glow)}
@media(max-width:700px){
  .tunnel{height:360vh}
  .tp{--w:56vw}
  .tunnel-stage{perspective:800px}
  .th-title{display:none}
}

/* ─────────────── MEDIA LIGHTBOX ─────────────── */
.mlb{position:fixed;inset:0;z-index:9600;display:grid;place-items:center;padding:clamp(12px,3vw,40px);opacity:0;transition:opacity .35s var(--ease)}
.mlb.on{opacity:1}
.mlb[hidden]{display:none}
.mlb-bg{position:absolute;inset:0;background:rgba(3,3,4,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.mlb-box{position:relative;width:min(1100px,100%);transform:scale(.94);transition:transform .45s var(--ease)}
.mlb.on .mlb-box{transform:none}
.mlb-media{border-radius:16px;overflow:hidden;background:#000;box-shadow:0 40px 120px -30px #000;border:1px solid var(--brd-2)}
.mlb-media iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.mlb-media img{display:block;max-height:82vh;width:auto;max-width:100%;margin:0 auto}
.mlb.img .mlb-box{width:auto}
.mlb-cap{margin-top:12px;font-size:14px;color:var(--ink-2);text-align:center}
.mlb-x{position:absolute;top:-52px;right:0;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--glass-2);border:1px solid var(--brd-2);color:#fff;font-size:22px;line-height:1}
.mlb-x:hover{background:var(--lime);color:#080808}

/* ─────────────── STATIC FALLBACK (reduced motion / no JS: showcase.js adds .sc-on) ─────────────── */
html:not(.sc-on) .blast{height:auto}
html:not(.sc-on) .blast-pin{position:relative;height:auto;padding:clamp(80px,12vw,160px) 0}
html:not(.sc-on) .blast-sub{position:static;opacity:1;margin-top:24px}
html:not(.sc-on) .blast-hint,html:not(.sc-on) .blast-rings{display:none}
html:not(.sc-on) .blast-pin{display:flex;flex-direction:column;align-items:center}
html:not(.sc-on) .reel,html:not(.sc-on) .tunnel{height:auto}
html:not(.sc-on) .reel-pin,html:not(.sc-on) .tunnel-pin{position:relative;height:auto;padding-bottom:60px}
html:not(.sc-on) .ring-stage,html:not(.sc-on) .tunnel-stage{position:relative;perspective:none;cursor:auto;inset:auto;height:auto}
html:not(.sc-on) .ring,html:not(.sc-on) .tunnel-world{position:relative;left:auto;top:auto;width:auto;height:auto;margin:0;translate:none;transform:none!important;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;padding:24px var(--pad);max-width:var(--max);margin-inline:auto}
html:not(.sc-on) .rc,html:not(.sc-on) .tp{position:relative;inset:auto;left:auto;top:auto;width:auto;transform:none!important;opacity:1!important;filter:none;-webkit-box-reflect:unset}
html:not(.sc-on) .rc{aspect-ratio:16/9}
html:not(.sc-on) .rc-play{opacity:1;scale:1}
html:not(.sc-on) .tunnel-head{position:relative;top:auto;padding-top:calc(var(--nav-h) + 20px)}
html:not(.sc-on) .tp-cap{opacity:1;transform:none}
html:not(.sc-on) .tunnel-hud,html:not(.sc-on) .tunnel-word,html:not(.sc-on) .ring-tip{display:none}

/* ─────────────── WORK PAGE: FILMS ─────────────── */
[data-tilt3d]{--rx:0deg;--ry:0deg;--gx:50%;--gy:50%;transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transition:transform .5s var(--ease),border-color .4s;transform-style:preserve-3d;will-change:transform}
[data-tilt3d].tilting{transition:transform .12s linear,border-color .4s}
[data-tilt3d]::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .4s;
  background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.22),transparent 45%)}
[data-tilt3d].tilting::after{opacity:1}
.film-hero{position:relative;display:block;width:100%;aspect-ratio:21/9;border-radius:24px;overflow:hidden;border:1px solid var(--brd-2);background:#000;text-align:left;margin-bottom:clamp(26px,3vw,40px)}
.film-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.film-hero:hover img{transform:scale(1.05)}
.fh-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,6,7,.92) 0%,rgba(6,6,7,.55) 45%,transparent 75%),linear-gradient(0deg,rgba(6,6,7,.6),transparent 40%)}
.fh-copy{position:absolute;left:clamp(20px,4vw,56px);bottom:clamp(20px,4vw,52px);z-index:2;display:flex;flex-direction:column;gap:10px;max-width:52ch}
.fh-copy em{display:inline-flex;align-items:center;gap:8px;font-style:normal;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--lime)}
.fh-copy em i{width:8px;height:8px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 12px rgba(255,59,59,.7);animation:blinkDot 1.4s infinite}
.fh-copy b{font-family:var(--f-d);font-weight:600;font-size:clamp(28px,4.4vw,64px);line-height:.98;letter-spacing:-.03em;color:#fff}
.fh-copy small{font-size:clamp(13px,1.1vw,16px);color:var(--ink-2)}
.fh-play{position:absolute;z-index:2;right:clamp(20px,4vw,56px);bottom:clamp(20px,4vw,52px);display:flex;align-items:center;gap:12px;padding:10px 22px 10px 10px;border-radius:99px;background:var(--lime);color:#080808;font-weight:700;font-size:14px;box-shadow:0 14px 40px -12px rgba(200,255,0,.6);transition:transform .4s var(--ease)}
.fh-play svg{width:38px;height:38px;padding:10px;border-radius:50%;background:#080808;color:var(--lime)}
.film-hero:hover .fh-play{transform:scale(1.05)}
.film-chips{margin-bottom:24px}
.film-chips sup{font-size:10px;opacity:.85;margin-left:2px}
.film-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.film{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;text-align:left;background:#0f1012;border:1px solid var(--brd)}
.film:hover{border-color:rgba(200,255,0,.45)}
.film-media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden}
.film-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease),filter .5s;filter:saturate(.9) brightness(.86)}
.film:hover .film-media img{transform:scale(1.07);filter:none}
.film-play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(200,255,0,.92);color:#080808;scale:.85;opacity:.9;transition:scale .4s var(--ease),opacity .3s}
.film-play svg{width:20px;height:20px;margin-left:3px}
.film:hover .film-play{scale:1;opacity:1}
.film-badge{position:absolute;top:10px;left:10px;padding:4px 10px;border-radius:99px;background:rgba(6,6,7,.75);border:1px solid var(--brd-2);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.film-meta{display:flex;flex-direction:column;gap:3px;padding:14px 16px 16px}
.film-meta b{font-family:var(--f-d);font-weight:600;font-size:clamp(15px,1.2vw,18px);color:var(--ink)}
.film-meta em{font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.film.hide-f{display:none}
.film:focus-visible,.film-hero:focus-visible,.pw:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
@media(max-width:1000px){.film-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){
  .film-hero{aspect-ratio:4/5}
  .fh-shade{background:linear-gradient(0deg,rgba(6,6,7,.95) 10%,rgba(6,6,7,.35) 60%,transparent)}
  .fh-copy{right:20px;bottom:86px}
  .fh-play{left:20px;right:auto;bottom:20px}
  .film-grid{gap:10px}
  .film{border-radius:13px}
  .film-meta{padding:10px 11px 12px}
  .film-meta b{font-size:13.5px}
  .film-meta em{font-size:9.5px;letter-spacing:.08em}
  .film-play{width:38px;height:38px}
  .film-play svg{width:15px;height:15px}
}

/* ─────────────── WORK PAGE: POSTER WALL ─────────────── */
.pwall-sec{overflow:hidden}
.pwall{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,20px);padding:20px clamp(16px,3vw,48px) 60px;align-items:start}
.pw-col{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,20px);will-change:transform}
.pw-col:nth-child(even){margin-top:clamp(60px,9vw,140px)}
.pw{position:relative;display:block;width:100%;aspect-ratio:2/3;border-radius:16px;overflow:hidden;background:#111;border:1px solid var(--brd);box-shadow:0 30px 60px -28px rgba(0,0,0,.9)}
.pw img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pw:hover{border-color:rgba(200,255,0,.5)}
.pw:hover img{transform:scale(1.05)}
.pw-cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:34px 14px 13px;display:flex;flex-direction:column;gap:2px;text-align:left;background:linear-gradient(transparent,rgba(6,6,7,.92));opacity:0;transform:translateY(10px);transition:opacity .35s,transform .45s var(--ease)}
.pw-cap b{font-family:var(--f-d);font-weight:600;font-size:16px;color:#fff}
.pw-cap em{font-style:normal;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime)}
.pw:hover .pw-cap,.pw:focus-visible .pw-cap{opacity:1;transform:none}
@media(hover:none){.pw-cap{opacity:1;transform:none}}
@media(max-width:700px){
  .pwall{grid-template-columns:repeat(2,1fr);gap:10px;padding:10px 12px 40px}
  .pw-col{gap:10px}
  .pw-col:nth-child(even){margin-top:70px}
  .pw{border-radius:12px}
  .pw-cap{padding:26px 10px 10px}
  .pw-cap b{font-size:13px}
  .pw-cap em{font-size:9px}
}
.chip-jump{border-style:dashed}