/* =========================================================
   100 BAND PLANS — "THE BLUEPRINT TABLE"
   His work spread across a blueprint drafting table. The
   plan draws itself, the plates POP IN one by one, and
   THE MARKET lands last in a platinum frame.
   ========================================================= */

:root{
  --bg:#05090c;
  --ink:#eaf4f8;
  --muted:rgba(234,244,248,.56);
  --subtle:rgba(234,244,248,.30);
  --cyan:#3fd8ff;
  --plat:#dbe6ee;
  --plat-hi:#ffffff;
  --line:rgba(63,216,255,.24);
  --f-disp:'Archivo', system-ui, sans-serif;
  --f-mono:'Space Mono', ui-monospace, monospace;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:var(--bg); }
body{ background:var(--bg); color:var(--ink); font-family:var(--f-disp); overflow-x:hidden; -webkit-font-smoothing:antialiased; min-height:100vh; }
.mono{ font-family:var(--f-mono); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- stage ---------- */
.stage{ position:relative; min-height:100vh; width:100%; padding:clamp(4rem,7vh,6rem) 4vw clamp(2.5rem,5vh,4rem); perspective:1700px; overflow:hidden; display:flex; flex-direction:column; }

/* ---------- scrolling master-plan texture (parallax, behind everything) ---------- */
.plan-scroll{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.plan-scroll svg{ display:block; width:100%; height:100%; }

/* ---------- blueprint backdrop (presented) ---------- */
.plan{ position:fixed; inset:-6% -4%; z-index:1; pointer-events:none; transform-style:preserve-3d;
  transform:translate3d(calc(var(--px,0)*-12px), calc(var(--py,0)*-12px), 0) rotateX(7deg) scale(1.03);
  animation:unfold 2s cubic-bezier(.16,1,.3,1) both; }
@keyframes unfold{
  0%{ opacity:0; transform:perspective(1300px) rotateX(74deg) scale(.66) translateY(20%); }
  50%{ opacity:1; transform:perspective(1300px) rotateX(30deg) scale(.92) translateY(6%); }
  100%{ opacity:1; transform:perspective(1300px) rotateX(7deg) scale(1.03) translateY(0); } }
.plan-svg{ position:absolute; inset:0; width:100%; height:100%; }
.pl-draw{ stroke-dasharray:1; stroke-dashoffset:1; animation:draw 1.9s ease .3s forwards; }
.pl-draw:nth-child(4){ animation-delay:.45s; } .pl-draw:nth-child(n+5){ animation-delay:.6s; }
.pl-draw:nth-child(n+11){ animation-delay:.85s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
.pl-txt{ opacity:0; animation:txtIn .7s ease 1.35s forwards; }
@keyframes txtIn{ to{ opacity:1; } }
.plan-glow{ position:absolute; inset:0; background:radial-gradient(58% 40% at 50% 2%, rgba(63,216,255,.12), transparent 60%), radial-gradient(95% 75% at 50% 44%, transparent 38%, rgba(5,9,12,.74) 100%); }

/* ---------- HUD ---------- */
.hud{ position:fixed; top:0; left:0; right:0; z-index:30; display:flex; justify-content:space-between; padding:1.15rem 1.5rem; font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; pointer-events:none; }
.hud-l{ color:var(--cyan); font-weight:700; } .hud-l em{ color:var(--subtle); font-style:normal; } .hud-r{ color:var(--muted); }

/* ---------- reveal (fades) ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- title block ---------- */
.titleblock{ position:relative; z-index:12; text-align:center; display:flex; flex-direction:column; align-items:center; gap:.55rem; }
.kicker{ font-size:clamp(.56rem,1.3vw,.7rem); letter-spacing:.34em; color:var(--cyan); font-weight:700; }
.wordmark{ font-family:var(--f-disp); font-weight:900; text-transform:uppercase; font-size:clamp(1.7rem,4.6vw,3.4rem); line-height:.9; letter-spacing:-.01em; color:var(--plat-hi); text-shadow:0 0 32px rgba(63,216,255,.22); }
.tb-meta{ display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap; justify-content:center; font-size:clamp(.56rem,1.3vw,.72rem); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.tb-meta b{ color:var(--cyan); font-family:var(--f-disp); font-weight:900; font-size:1.5em; } .tb-meta .sep{ color:var(--subtle); }

/* ---------- the table ---------- */
.table{ position:relative; z-index:10; flex:1 1 auto; width:100%; min-height:60vh; margin:1rem 0;
  transform:translate3d(calc(var(--px,0)*10px), calc(var(--py,0)*10px), 0); transition:transform .35s ease-out; }

.item{ position:absolute; left:var(--x); top:var(--y); width:var(--w,15vw); aspect-ratio:9/13;
  display:block; text-decoration:none; color:var(--ink); border-radius:7px; overflow:hidden;
  background:#0a1218; border:1px solid var(--line);
  opacity:0; transform:translate(-50%,-104%) rotate(calc(var(--r,0deg) * 1.6)) scale(.6);
  box-shadow:0 22px 46px rgba(0,0,0,.55), inset 0 0 0 3px rgba(5,9,12,.5);
  transition:transform .8s cubic-bezier(.34,1.5,.36,1), opacity .5s ease, box-shadow .4s, border-color .3s; }
.item.in{ opacity:1; transform:translate(-50%,-50%) rotate(var(--r,0)) scale(1); }
.item:hover{ transform:translate(-50%,-50%) rotate(0deg) scale(1.07); z-index:20; border-color:var(--cyan);
  box-shadow:0 36px 74px rgba(0,0,0,.72), 0 0 0 1px var(--cyan); }
.item .m-vid, .item .m-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.item::after{ content:""; position:absolute; inset:0; border:1px dashed rgba(63,216,255,.16); pointer-events:none; }
.m-cap{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:.7rem .6rem .55rem; text-align:left;
  font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  background:linear-gradient(transparent, rgba(5,9,12,.94)); }
.m-play{ position:absolute; top:50%; left:50%; z-index:4; transform:translate(-50%,-50%) scale(.7); width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:rgba(5,9,12,.5); border:1px solid rgba(255,255,255,.7); color:#fff; font-size:.85rem; opacity:0; backdrop-filter:blur(3px); transition:opacity .3s, transform .3s; }
.item:hover .m-play{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* masking tape — pins each frame to the blueprint */
.item::before, .remix-big::before, .rcard::before{
  content:""; position:absolute; z-index:6; top:-9px; left:50%;
  width:44%; height:21px; transform:translateX(-50%) rotate(-2.5deg);
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, transparent 3px 6px),
    linear-gradient(180deg, rgba(233,227,199,.35), rgba(205,198,167,.25));
  border-left:1px solid rgba(255,255,255,.16); border-right:1px solid rgba(0,0,0,.14);
  box-shadow:0 3px 6px rgba(0,0,0,.28); pointer-events:none; }
.item:nth-child(even)::before{ transform:translateX(-50%) rotate(3deg); }
.rcard::before{ top:-7px; height:16px; width:52%; }

/* ---------- CENTREPIECE: THE MARKET + plaque receipts ---------- */
.market-hero{ position:absolute; left:50%; top:40%; z-index:15;
  width:clamp(280px,32vw,470px); display:flex; flex-direction:column; align-items:center; gap:.8rem;
  opacity:0; transform:translate(-50%,-50%) scale(.92);
  transition:opacity .6s ease, transform .75s cubic-bezier(.34,1.56,.4,1); }
.market-hero.in{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.mh-video{ position:relative; display:block; width:100%; aspect-ratio:16/9; text-decoration:none; color:var(--ink); }
.plat-edge{ position:absolute; inset:0; padding:11px; border-radius:9px;
  background:linear-gradient(135deg,#fff,#cbd8e1 18%,#8b9fac 40%,#f2f7fa 54%,#9fb2be 74%,#fff);
  box-shadow:0 34px 82px rgba(0,0,0,.72), 0 0 58px rgba(219,230,238,.4), inset 0 0 0 1px rgba(255,255,255,.7); }
.plat-edge video{ position:absolute; inset:11px; width:calc(100% - 22px); height:calc(100% - 22px); object-fit:cover; border-radius:3px; filter:brightness(1.07) saturate(1.05); }
.plat-tag{ position:absolute; top:-14px; left:50%; transform:translateX(-50%); z-index:6;
  font-size:.66rem; font-weight:700; letter-spacing:.2em; padding:.4rem 1.15rem; color:#0b1519;
  background:linear-gradient(180deg,#fff,#c4d2dc); border-radius:2px; box-shadow:0 8px 22px rgba(0,0,0,.6), 0 0 22px rgba(219,230,238,.55); }
.mh-cap{ position:absolute; left:11px; right:11px; bottom:11px; z-index:6; display:flex; flex-direction:column; gap:.15rem;
  padding:1.1rem .8rem .55rem; text-align:left; background:linear-gradient(transparent, rgba(5,9,12,.92)); border-radius:0 0 3px 3px; }
.mh-cap b{ font-size:.9rem; letter-spacing:.03em; text-transform:uppercase; }
.mh-cap em{ font-style:normal; font-size:.52rem; letter-spacing:.08em; color:var(--muted); }
.m-play--lg{ width:58px; height:58px; font-size:1.05rem; }
.mh-video:hover .m-play--lg{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* receipts — the plaques + remix, fanned like cards */
.receipts{ display:flex; flex-direction:column; align-items:center; gap:.55rem; }
.rec-label{ font-size:.54rem; letter-spacing:.26em; color:var(--muted); text-transform:uppercase; }
.rcards{ display:flex; justify-content:center; align-items:flex-start; padding-top:.4rem; }
.rcard{ position:relative; display:block; width:clamp(92px,8.8vw,128px); aspect-ratio:3/4; margin:0 -14px;
  border-radius:5px; overflow:hidden; border:1px solid var(--line); background:#0a1218;
  opacity:0; transform:rotate(var(--rr,0)) scale(.4) translateY(16px);
  box-shadow:0 12px 26px rgba(0,0,0,.55); transition:transform .6s cubic-bezier(.34,1.56,.4,1), opacity .5s, box-shadow .3s, border-color .3s; }
.rcard.in{ opacity:1; transform:rotate(var(--rr,0)) scale(1) translateY(0); }
.rcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.rcard--hero{ width:clamp(112px,10.5vw,156px); z-index:3; border-color:rgba(219,230,238,.6);
  box-shadow:0 20px 42px rgba(0,0,0,.66), 0 0 30px rgba(219,230,238,.32); }
.rcard:hover{ transform:rotate(0) translateY(-10px) scale(1.14); z-index:9; border-color:var(--plat); }
.rc-badge{ position:absolute; left:0; right:0; bottom:0; z-index:2; text-align:center; font-weight:700;
  font-size:.44rem; letter-spacing:.1em; padding:.3rem .15rem; color:#0b1519; }
.rc-badge--gold{ background:linear-gradient(180deg,#f6dc92,#c99a3a); }
.rc-badge--plat{ background:linear-gradient(180deg,#fff,#c4d2dc); }
.rc-badge--rmx{ background:linear-gradient(180deg,#eaf4f8,#9fb2be); }

/* ---------- the remix — bigger video frame in the spread ---------- */
.remix-big{ position:absolute; left:var(--x); top:var(--y); z-index:14;
  width:clamp(320px,29vw,470px); aspect-ratio:16/9; display:block; text-decoration:none; color:var(--ink);
  border-radius:7px; overflow:hidden; border:1px solid rgba(219,230,238,.4); background:#0a1218;
  opacity:0; transform:translate(-50%,-50%) rotate(var(--r,0)) scale(.5);
  box-shadow:0 22px 46px rgba(0,0,0,.62); transition:transform .65s cubic-bezier(.34,1.56,.4,1), opacity .5s, box-shadow .35s, border-color .3s; }
.remix-big.in{ opacity:1; transform:translate(-50%,-50%) rotate(var(--r,0)) scale(1); }
.remix-big:hover{ transform:translate(-50%,-50%) rotate(0) scale(1.05); z-index:20; border-color:var(--cyan); box-shadow:0 30px 60px rgba(0,0,0,.72), 0 0 0 1px var(--cyan); }
.remix-big video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.remix-big::after{ content:""; position:absolute; inset:0; border:1px dashed rgba(63,216,255,.16); pointer-events:none; }
.rmx-tag{ position:absolute; top:9px; left:9px; z-index:3; font-size:.5rem; font-weight:700; letter-spacing:.16em; padding:.26rem .55rem; color:#04121a; background:linear-gradient(180deg,#eaf4f8,#9fb2be); border-radius:2px; }
.rmx-cap{ position:absolute; left:0; right:0; bottom:0; z-index:3; padding:.7rem .6rem .5rem; text-align:left; font-size:.5rem; letter-spacing:.08em; color:var(--ink); background:linear-gradient(transparent, rgba(5,9,12,.94)); }
.remix-big .m-play{ font-size:.9rem; }

/* ---------- footer ---------- */
.footer{ position:relative; z-index:12; display:flex; flex-direction:column; align-items:center; gap:1.1rem; margin-top:auto; }
.editorial{ display:flex; gap:.55rem; align-items:center; flex-wrap:wrap; justify-content:center; font-size:.56rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.editorial .ed-key{ color:var(--subtle); } .editorial em{ font-style:normal; color:var(--cyan); border:1px solid var(--line); padding:.28rem .5rem; border-radius:3px; }
.cta-row{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; }
.cta{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; padding:.9rem 2rem; border:1px solid var(--plat); color:var(--plat-hi); border-radius:3px; text-decoration:none; transition:background .25s, transform .25s, box-shadow .25s; }
.cta:hover{ transform:translateY(-2px); background:rgba(219,230,238,.1); }
.cta--fill{ background:var(--cyan); border-color:var(--cyan); color:#04121a; font-weight:700; }
.cta--fill:hover{ background:#6fe3ff; box-shadow:0 10px 30px rgba(63,216,255,.35); }
.socials{ display:flex; gap:1.3rem; flex-wrap:wrap; justify-content:center; }
.socials a{ color:var(--muted); text-decoration:none; font-size:.62rem; letter-spacing:.22em; transition:color .2s; }
.socials a:hover{ color:var(--cyan); }
.colophon{ font-size:.54rem; letter-spacing:.24em; color:var(--subtle); }

/* ---------- in-site video lightbox ---------- */
.bp-lightbox{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:6vh 5vw;
  background:rgba(3,7,10,.93); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.bp-lightbox.open{ display:flex; }
.bp-lb-inner{ position:relative; width:min(1120px,92vw); }
.bp-lb-close{ position:absolute; top:-2.8rem; right:0; background:rgba(5,12,16,.6); border:1px solid var(--line); color:var(--ink);
  padding:.55rem 1.1rem; border-radius:3px; font-size:.62rem; letter-spacing:.2em; cursor:pointer; transition:border-color .2s, color .2s; }
.bp-lb-close:hover{ border-color:var(--cyan); color:var(--cyan); }
.bp-lb-frame{ position:relative; width:100%; aspect-ratio:16/9; border-radius:6px; overflow:hidden;
  border:2px solid rgba(63,216,255,.5); box-shadow:0 40px 96px rgba(0,0,0,.75), 0 0 60px rgba(63,216,255,.2); background:#000; }
.bp-lb-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---------- responsive: table becomes a stack ---------- */
@media (max-width:820px){
  /* flatten the 3D on mobile — position:fixed inside a perspective parent breaks hard on phones */
  .stage{ perspective:none; padding-top:4.5rem; }
  .plan{ transform:none; animation:none; inset:0; }
  .table{ position:static; display:flex; flex-direction:column; align-items:center; gap:1rem; min-height:0; transform:none; }
  .market-hero{ position:relative; left:auto; top:auto; order:1; width:min(94vw,540px); transform:translateY(24px) scale(.96); margin:0 auto; }
  .market-hero.in{ transform:none; }
  .remix-big{ position:relative; order:2; left:auto; top:auto; width:min(94vw,540px); margin:.4rem auto 0;
    transform:translateY(24px) rotate(0) scale(.96); }
  .remix-big.in{ transform:none; }
  .item{ position:relative; order:3; left:auto; top:auto; width:min(64vw,300px); transform:translateY(26px) rotate(0) scale(.9); }
  .item.in{ transform:rotate(calc(var(--r,0deg) * .55)); }   /* keep each frame's tilt — pinned, not a dead column */
  .item:nth-child(odd){ align-self:flex-start; margin-left:6vw; }   /* zigzag down the blueprint */
  .item:nth-child(even){ align-self:flex-end; margin-right:6vw; }
  .item:hover, .remix-big:hover{ transform:scale(1.03); }
  .rcard{ margin:0 -8px; }
  .hud-r{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .plan{ animation:none; transform:rotateX(5deg) scale(1.03); }
  .pl-draw{ animation:none; stroke-dashoffset:0; }
  .pl-txt{ animation:none; opacity:1; }
  .reveal, .item{ transition:none; opacity:1; transform:translate(-50%,-50%) rotate(var(--r,0)); }
  .market-hero{ transition:none; opacity:1; transform:translate(-50%,-50%); }
  .rcard{ transition:none; opacity:1; transform:rotate(var(--rr,0)); }
  .titleblock.reveal, .footer.reveal{ transform:none; }
}