/* ========== $SHOPLIFT — the vault after hours ========== */

:root{
  --void:#0b0805;
  --panel:#150e07;
  --panel-hi:#1e150a;
  --line:#3a2a13;
  --line-hi:#5a4420;
  --gold:#f0b429;
  --gold-hi:#ffdc86;
  --gold-dim:#8a6316;
  --bag:#6b7d3a;
  --ink:#f5ead6;
  --muted:#a3906d;
  --rec:#e2503c;

  --display:"Anton", Impact, "Arial Narrow Bold", sans-serif;
  --mono:"JetBrains Mono", "Lucida Console", Consolas, monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{
  background:var(--void);
  color:var(--ink);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.6;
  overflow-x:hidden;
}
body.locked{overflow:hidden}
.display{font-family:var(--display);font-weight:400;text-transform:uppercase;letter-spacing:.01em}
a{color:var(--gold);text-decoration:none}
button{font:inherit;cursor:pointer;border:none}
img,video{display:block;max-width:100%}

/* ---------- global shader canvas ---------- */
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}

/* ---------- CCTV chrome (our signature) ---------- */
.cctv{position:fixed;inset:0;z-index:65;pointer-events:none}
.cctv::before{ /* scanlines */
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,.16) 3px, rgba(0,0,0,.16) 4px);
  opacity:.5;
}
.cctv::after{ /* vignette */
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center, rgba(0,0,0,0) 58%, rgba(0,0,0,.42) 100%);
}
.hud{position:fixed;z-index:41;pointer-events:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:.72;text-shadow:0 0 8px rgba(0,0,0,.9)}
.hud-tl{top:16px;left:18px;display:flex;align-items:center;gap:8px}
.hud-tr{top:16px;right:18px}
.hud-bl{bottom:16px;left:18px}
.hud-br{bottom:16px;right:18px}
.rec-dot{width:8px;height:8px;border-radius:50%;background:var(--rec);animation:rec 1.6s steps(1) infinite;box-shadow:0 0 10px var(--rec)}
@keyframes rec{0%,49%{opacity:1}50%,100%{opacity:.15}}
.bracket{position:fixed;z-index:41;width:26px;height:26px;pointer-events:none;border-color:var(--gold);opacity:.4}
.bk-tl{top:12px;left:12px;border-top:2px solid;border-left:2px solid}
.bk-tr{top:12px;right:12px;border-top:2px solid;border-right:2px solid}
.bk-bl{bottom:12px;left:12px;border-bottom:2px solid;border-left:2px solid}
.bk-br{bottom:12px;right:12px;border-bottom:2px solid;border-right:2px solid}

/* ---------- intro ---------- */
#intro{position:fixed;inset:0;z-index:60;background:radial-gradient(ellipse at center,rgba(11,8,5,.10) 0%,rgba(11,8,5,.55) 75%,rgba(11,8,5,.80) 100%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:10vh;transition:opacity .7s ease,visibility .7s}
#intro.is-leaving{opacity:0;visibility:hidden}
.intro-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0 20px;text-align:center;width:100%}
.intro-slot{position:relative;display:block;white-space:nowrap;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;font-family:var(--mono);letter-spacing:.02em;color:#fff8ec;text-shadow:0 2px 24px rgba(0,0,0,.95),0 0 60px rgba(0,0,0,.8)}
.intro-slot.in{opacity:1;transform:translateY(0)}
.intro-slot.out{opacity:0;transform:translateY(-12px)}
.intro-ghost{visibility:hidden}
.intro-live{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;white-space:nowrap}
.intro-caret{display:inline-block;width:.55em;height:1.05em;background:var(--gold);margin-left:.12em;vertical-align:-.16em}
.intro-caret.blink{animation:blink .75s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}}

.intro-finale{position:relative;display:none;text-align:center}
.intro-finale.on{display:block}
.intro-big{position:relative;display:inline-block;font-family:var(--display);color:var(--ink);line-height:.92;white-space:nowrap;transition:color .8s ease,text-shadow .8s ease}
.intro-big.lit{color:var(--gold);text-shadow:0 0 44px rgba(240,180,41,.55),0 0 110px rgba(240,180,41,.25)}
.intro-rim{position:absolute;inset:0;color:transparent;-webkit-text-stroke:1.6px var(--gold-hi);pointer-events:none;opacity:0}
.intro-rim.sweep{animation:rim 1.5s ease-out forwards}
@keyframes rim{0%{opacity:0;clip-path:inset(0 100% 0 0)}20%{opacity:.95}100%{opacity:0;clip-path:inset(0 0 0 0)}}
.intro-tag{margin-top:16px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.intro-actions{margin-top:40px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.skip-corner{
  position:absolute;bottom:58px;right:28px;
  background:transparent;color:var(--muted);
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  padding:10px 18px;box-shadow:inset 0 0 0 1px var(--line-hi);
  transition:color .14s linear,box-shadow .14s linear;
}
.skip-corner:hover{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-dim)}
.skip-corner:focus-visible{outline:1px dotted var(--gold);outline-offset:-5px}

/* vault-plate button — beveled metal, our answer to their w98 chrome */
.plate{
  background:linear-gradient(180deg,#f6c34a,#d99a1c);
  color:#1a1206;min-width:132px;padding:13px 30px;
  font-family:var(--mono);font-weight:600;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;text-align:center;
  box-shadow:inset 1px 1px 0 0 #ffe9a8, inset -1px -1px 0 0 #8a5f10,
             inset 2px 2px 0 0 #ffd571, inset -2px -2px 0 0 #6d4a0c,
             0 3px 0 0 #5c3f0a;
  transition:filter .14s linear;
}
.plate:hover{filter:brightness(1.08)}
.plate:active{transform:translateY(2px);box-shadow:inset -1px -1px 0 0 #ffe9a8, inset 1px 1px 0 0 #8a5f10, 0 1px 0 0 #5c3f0a}
.plate:focus-visible{outline:1px dotted #1a1206;outline-offset:-6px}
.plate.ghost{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line-hi);font-weight:400}
.plate.ghost:hover{color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold-dim)}

/* ---------- page ---------- */
/* No opacity transition here: animating opacity on a layer that sits above the
   fixed WebGL canvas makes Safari (and sometimes Chromium) skip painting the
   whole layer after a refresh. The intro overlay's own fade-out provides the
   reveal; the page itself just snaps visible on its own compositing layer. */
#page{position:relative;z-index:10;visibility:hidden;transform:translateZ(0)}
#page.on{visibility:visible}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}
section{padding:60px 0}
#tape{padding-top:26px}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-hi),transparent)}

/* hero */
.hero{padding:58px 0 34px;text-align:center}
h1{font-family:var(--display);font-size:clamp(30px,8.4vw,116px);line-height:.92;color:var(--ink);text-transform:uppercase;white-space:nowrap}
h1 .g{color:var(--gold);text-shadow:0 0 50px rgba(240,180,41,.4)}
.hero-sub{margin-top:20px;font-size:11.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}

.ca{margin:14px 0 0;background:rgba(21,14,7,.82);backdrop-filter:blur(6px);box-shadow:inset 0 0 0 1px var(--line);display:flex;align-items:stretch;gap:0}
.ca .lab{display:flex;align-items:center;padding:0 14px;font-size:10px;letter-spacing:.2em;color:var(--muted);border-right:1px solid var(--line);white-space:nowrap}
.ca code{flex:1;min-width:0;display:flex;align-items:center;padding:14px;font-size:11.5px;word-break:break-all;color:var(--ink);text-align:left}
.ca button{padding:0 20px;background:var(--gold);color:#1a1206;font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.ca button:hover{filter:brightness(1.08)}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:rgba(21,14,7,.88);backdrop-filter:blur(4px);padding:26px 18px;text-align:center;position:relative;overflow:hidden}
.stat .v{font-family:var(--display);font-size:clamp(24px,4.4vw,40px);color:var(--gold-hi);font-variant-numeric:tabular-nums;line-height:1}
.stat .k{margin-top:10px;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.stat.pulse::after{content:"";position:absolute;inset:0;background:var(--gold);opacity:0;animation:flash .6s ease-out}
@keyframes flash{0%{opacity:.14}100%{opacity:0}}
.chart{margin-top:1px;background:rgba(21,14,7,.88);box-shadow:inset 0 0 0 1px var(--line);height:420px}
.chart iframe{width:100%;height:100%;border:0;display:block}

/* reel */
.reel{position:relative;box-shadow:inset 0 0 0 1px var(--line);background:var(--panel);aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;overflow:hidden}
.reel video{width:100%;height:100%;object-fit:cover}
.reel .slot{color:var(--muted);font-size:11px;letter-spacing:.22em;text-transform:uppercase;text-align:center;padding:20px}
.reel-sound{position:absolute;bottom:14px;right:14px;z-index:2;background:rgba(11,8,5,.8);color:var(--gold);box-shadow:inset 0 0 0 1px var(--line-hi);padding:8px 16px;font-size:10px;letter-spacing:.18em;text-transform:uppercase}

/* heist grid — 3 + 2 CCTV wall */
.heist{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.heist .frame{grid-column:span 2}
.heist .frame:nth-child(4){grid-column:2 / span 2}
.heist .frame:nth-child(5){grid-column:4 / span 2}
@media(max-width:820px){
  .heist{grid-template-columns:1fr}
  .heist .frame,.heist .frame:nth-child(4),.heist .frame:nth-child(5){grid-column:auto}
}
.frame{position:relative;aspect-ratio:16/9;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;display:flex;align-items:center;justify-content:center}
.frame img{width:100%;height:100%;object-fit:cover}
.frame .cam{position:absolute;top:8px;left:9px;z-index:2;font-size:9px;letter-spacing:.14em;color:var(--gold);text-shadow:0 1px 6px rgba(0,0,0,.9);opacity:.85}

/* link row under the CA */
.linkrow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}

/* getaway crew */
#crew{padding-bottom:76px}
.crew-line{max-width:56ch;margin:0 auto 22px;color:var(--ink);font-size:15px}
.crew-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:36px}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:rgba(21,14,7,.85);box-shadow:inset 0 0 0 1px var(--line);padding:28px 22px}
.step .n{font-family:var(--display);font-size:34px;color:var(--gold);line-height:1}
.step p{margin-top:12px;font-size:13.5px;color:var(--ink);line-height:1.65}
.cta-row{text-align:center}

/* footer */
footer{position:relative;z-index:10;padding:56px 0 72px;text-align:center;box-shadow:inset 0 1px 0 0 var(--line)}
.socials{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:30px}
.disclaimer{max-width:680px;margin:0 auto;font-size:10.5px;line-height:1.85;color:var(--muted);opacity:.75}

/* toast */
.toast{position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(90px);z-index:70;background:var(--gold);color:#1a1206;font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:12px 24px;transition:transform .32s cubic-bezier(.2,.9,.3,1)}
.toast.show{transform:translateX(-50%) translateY(0)}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important;transition-duration:.001s !important}
  .cctv::before{display:none}
}