/* ============================================================
   PIPEANSEM — comic-noir detective dossier
   ============================================================ */

:root{
  --ink:      #07070a;
  --ink-2:    #101018;
  --paper:    #e8ddc4;
  --paper-2:  #cdbf9d;
  --gold:     #f2b632;
  --gold-hi:  #ffe08a;
  --gold-dk:  #8a5f13;
  --green:    #35e06a;
  --green-dk: #0d3f1e;
  --red:      #d8302a;
  --smoke:    rgba(232,221,196,.62);
  --edge:     4px solid var(--ink);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Special Elite', ui-monospace, monospace;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- FIXED IMAGE BACKGROUND ---------- */
.bg-plate{
  position:fixed; inset:0; z-index:-3;
  background:url('3.png') center 20% / cover no-repeat;
  filter:grayscale(.35) contrast(1.05) brightness(.4);
  transform:scale(1.08);
}
.bg-wash{
  position:fixed; inset:0; z-index:-2;
  background:
    radial-gradient(120% 80% at 50% 0%,   rgba(242,182,50,.20), transparent 60%),
    radial-gradient(90% 70% at 85% 100%,  rgba(53,224,106,.14), transparent 60%),
    linear-gradient(180deg, rgba(7,7,10,.88) 0%, rgba(7,7,10,.72) 40%, rgba(7,7,10,.94) 100%);
}
.bg-halftone{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(242,182,50,.16) 1px, transparent 1.4px);
  background-size:6px 6px;
  mix-blend-mode:overlay; opacity:.55;
}
.bg-grain{
  position:fixed; inset:-50%; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)}
}

/* ---------- TYPE ---------- */
.f-comic{ font-family:'Bangers', cursive; letter-spacing:.045em; }
.f-slab { font-family:'Archivo Black', system-ui, sans-serif; }
.f-type { font-family:'Special Elite', monospace; }

.title-3d{
  color:var(--gold-hi);
  text-shadow:
    0 1px 0 var(--gold), 0 2px 0 var(--gold-dk), 0 3px 0 var(--gold-dk),
    0 4px 0 #5c3d08, 0 5px 0 #3d280400, 0 6px 12px rgba(0,0,0,.9),
    -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink);
}
.title-outline{
  color:transparent;
  -webkit-text-stroke:2px var(--gold);
  text-shadow:0 6px 24px rgba(242,182,50,.25);
}

/* ---------- COMIC PANEL PRIMITIVE ---------- */
.panel{
  position:relative;
  background:linear-gradient(160deg, rgba(16,16,24,.94), rgba(7,7,10,.97));
  border:var(--edge);
  box-shadow: 8px 8px 0 var(--gold-dk), 0 24px 60px rgba(0,0,0,.7);
}
.panel--paper{
  background:
    linear-gradient(180deg, rgba(232,221,196,.96), rgba(205,191,157,.93));
  color:var(--ink);
  box-shadow: 8px 8px 0 var(--ink), 0 24px 60px rgba(0,0,0,.75);
}
.panel::after{
  content:""; position:absolute; inset:6px; pointer-events:none;
  border:1px dashed rgba(242,182,50,.28);
}
.panel--paper::after{ border-color:rgba(7,7,10,.25); }

/* torn / angled section edges */
.edge-top{ clip-path:polygon(0 3%,18% 0,52% 3.5%,80% 0,100% 3%,100% 100%,0 100%); }
.edge-bot{ clip-path:polygon(0 0,100% 0,100% 97%,74% 100%,40% 96.5%,15% 100%,0 97%); }

/* ---------- 3D PERSPECTIVE HELPERS ---------- */
.stage{ perspective:1400px; perspective-origin:50% 45%; }
.stage-deep{ perspective:900px; }
.tilt{ transform-style:preserve-3d; transition:transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.tilt-l{ transform:rotateY(14deg) rotateX(3deg) translateZ(-20px); }
.tilt-r{ transform:rotateY(-14deg) rotateX(3deg) translateZ(-20px); }
.tilt:hover{ transform:rotateY(0) rotateX(0) translateZ(30px); }

/* ---------- NAV ---------- */
.nav-shell{
  position:fixed; top:0; left:0; right:0; z-index:60;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg, rgba(7,7,10,.92), rgba(7,7,10,.55));
  border-bottom:3px solid var(--ink);
  box-shadow:0 4px 0 var(--gold-dk), 0 18px 40px rgba(0,0,0,.6);
}
.nav-tab{
  position:relative; display:inline-block; padding:.42rem 1.05rem;
  transform:skewX(-11deg);
  border:2px solid transparent;
  color:var(--paper); text-decoration:none;
  transition:.22s ease;
}
.nav-tab span{ display:block; transform:skewX(11deg); }
.nav-tab:hover, .nav-tab.is-active{
  background:var(--gold); color:var(--ink);
  border-color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
}

/* ---------- BUTTONS ---------- */
.btn-comic{
  position:relative; display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.6rem;
  font-family:'Bangers',cursive; font-size:1.15rem; letter-spacing:.07em;
  color:var(--ink); background:var(--gold);
  border:3px solid var(--ink); border-radius:2px;
  box-shadow:5px 5px 0 var(--ink); text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .2s;
}
.btn-comic:hover{ transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); background:var(--gold-hi); }
.btn-comic:active{ transform:translate(5px,5px); box-shadow:0 0 0 var(--ink); }
.btn-ghost{
  background:transparent; color:var(--gold);
  border:3px solid var(--gold); box-shadow:5px 5px 0 var(--gold-dk);
}
.btn-ghost:hover{ background:var(--gold); color:var(--ink); }
.btn-green{ background:var(--green); }
.btn-green:hover{ background:#6bff9a; }

/* ---------- MARQUEE TAPE ---------- */
.tape{
  background:var(--gold); color:var(--ink);
  border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);
  font-family:'Bangers',cursive; letter-spacing:.14em;
  overflow:hidden; white-space:nowrap;
}
.tape--dark{ background:var(--ink); color:var(--gold); }
.tape-track{ display:inline-flex; gap:2.5rem; padding:.55rem 0; animation:slide 26s linear infinite; }
.tape--rev .tape-track{ animation-direction:reverse; }
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- SPEECH BUBBLE ---------- */
.bubble{
  position:relative; background:var(--paper); color:var(--ink);
  border:3px solid var(--ink); border-radius:16px;
  padding:1rem 1.2rem; box-shadow:6px 6px 0 var(--gold-dk);
}
.bubble::before{
  content:""; position:absolute; bottom:-19px; left:34px;
  border:10px solid transparent; border-top-color:var(--ink);
}
.bubble::after{
  content:""; position:absolute; bottom:-13px; left:37px;
  border:8px solid transparent; border-top-color:var(--paper);
}

/* ---------- HERO ---------- */
.hero-floor{
  position:absolute; left:-20%; right:-20%; bottom:-4%; height:46vh; z-index:0;
  background:
    linear-gradient(transparent 0%, rgba(242,182,50,.10) 65%),
    repeating-linear-gradient(90deg, rgba(242,182,50,.22) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg,  rgba(242,182,50,.16) 0 1px, transparent 1px 62px);
  transform:perspective(520px) rotateX(72deg);
  transform-origin:50% 100%;
  mask-image:linear-gradient(transparent, #000 45%, transparent);
  animation:floor 9s linear infinite;
}
@keyframes floor{ to{ background-position:0 0, 0 0, 0 62px; } }

.hero-figure{
  filter:drop-shadow(0 0 40px rgba(242,182,50,.45)) drop-shadow(0 30px 40px rgba(0,0,0,.9));
  animation:bob 5.5s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-1deg) } 50%{ transform:translateY(-16px) rotate(1deg) } }

.spot{
  position:absolute; inset:auto; width:120%; aspect-ratio:1; left:-10%; top:-18%;
  background:radial-gradient(circle, rgba(242,182,50,.28) 0%, rgba(242,182,50,.06) 42%, transparent 66%);
  filter:blur(6px); pointer-events:none;
}

.badge-stamp{
  font-family:'Bangers',cursive; letter-spacing:.16em;
  color:var(--red); border:3px solid var(--red);
  padding:.3rem .8rem; transform:rotate(-9deg);
  box-shadow:inset 0 0 0 2px rgba(216,48,42,.25);
  opacity:.92;
}

/* ---------- CA BAR ---------- */
.ca-bar{
  display:flex; align-items:stretch; gap:0; flex-wrap:wrap;
  border:3px solid var(--ink); background:rgba(7,7,10,.85);
  box-shadow:6px 6px 0 var(--gold-dk);
}
.ca-bar .lbl{
  background:var(--gold); color:var(--ink); font-family:'Bangers',cursive;
  padding:.7rem 1rem; letter-spacing:.1em; white-space:nowrap;
}
.ca-bar .val{
  flex:1 1 260px; min-width:0; padding:.7rem 1rem; color:var(--gold-hi);
  font-size:.86rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ca-bar .cpy{
  background:var(--green); color:var(--ink); border:0; border-left:3px solid var(--ink);
  font-family:'Bangers',cursive; letter-spacing:.08em; padding:.7rem 1.1rem; cursor:pointer;
  transition:.2s;
}
.ca-bar .cpy:hover{ background:#7dffa6; }

/* ---------- EVIDENCE BOARD (ABOUT) ---------- */
.board{
  background:
    linear-gradient(rgba(48,32,16,.55), rgba(24,16,8,.7)),
    repeating-linear-gradient(45deg, rgba(120,84,42,.18) 0 3px, transparent 3px 6px),
    #2b1d10;
  border:6px solid #150e07;
  box-shadow:inset 0 0 90px rgba(0,0,0,.85), 0 30px 70px rgba(0,0,0,.75);
}
.photo{
  background:var(--paper); padding:10px 10px 44px;
  border:2px solid rgba(0,0,0,.5);
  box-shadow:0 18px 34px rgba(0,0,0,.75);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .4s, filter .4s;
  will-change:transform;
}
.photo img{ display:block; width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(.95); }
.photo figcaption{
  font-family:'Special Elite',monospace; color:#3a2c14; font-size:.72rem;
  text-align:center; padding-top:.55rem; letter-spacing:.04em;
}
.photo::before{ /* pushpin */
  content:""; position:absolute; top:-11px; left:50%; width:18px; height:18px;
  transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(circle at 32% 30%, #ff8a80, var(--red) 55%, #6d100c);
  box-shadow:0 3px 6px rgba(0,0,0,.7); z-index:3;
}
.photo:hover{ transform:rotate(0) scale(1.06) translateZ(50px) !important; box-shadow:0 30px 60px rgba(0,0,0,.9); filter:brightness(1.08); }
.pin-string{ position:absolute; inset:0; pointer-events:none; z-index:1; }

/* ---------- CASE CARDS (HOW TO BUY) ---------- */
.deck{ perspective:1500px; perspective-origin:50% 50%; }
.case-card{
  position:relative; transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .5s;
  background:linear-gradient(165deg, rgba(232,221,196,.97), rgba(190,175,140,.94));
  color:var(--ink); border:4px solid var(--ink);
  box-shadow:10px 12px 0 rgba(0,0,0,.6);
}
.case-card:hover{ transform:rotateY(0) rotateX(0) translateZ(60px) !important; box-shadow:14px 18px 0 var(--gold-dk); }
.case-num{
  position:absolute; top:-26px; left:-22px;
  width:62px; height:62px; display:grid; place-items:center;
  font-family:'Bangers',cursive; font-size:2rem; color:var(--ink);
  background:var(--gold); border:4px solid var(--ink); border-radius:50%;
  box-shadow:4px 4px 0 var(--ink); transform:translateZ(45px) rotate(-8deg);
}
.case-card h3{ font-family:'Bangers',cursive; letter-spacing:.05em; }
.stamp-ok{
  position:absolute; right:10px; bottom:10px; font-family:'Bangers',cursive;
  color:rgba(216,48,42,.55); border:3px solid rgba(216,48,42,.5);
  padding:.1rem .5rem; transform:rotate(-14deg); font-size:.8rem; letter-spacing:.12em;
}

/* ---------- CRT CHART CONSOLE ---------- */
.crt-room{ perspective:1200px; }
.crt{
  position:relative;
  border:6px solid var(--ink);
  background:#040a06;
  box-shadow:
    0 0 0 3px var(--gold-dk),
    12px 14px 0 rgba(0,0,0,.65),
    0 0 90px rgba(53,224,106,.16),
    inset 0 0 60px rgba(53,224,106,.08);
  transform:rotateX(6deg);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.crt:hover{ transform:rotateX(0deg) translateZ(20px); }
.crt-scan{
  position:absolute; inset:0; pointer-events:none; z-index:4;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply; opacity:.55;
}
.crt-glow{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(80% 60% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%);
}
.crt iframe{ display:block; width:100%; height:100%; border:0; }
.crt-bezel{
  background:linear-gradient(180deg,#191b1a,#0b0d0c);
  border-bottom:4px solid var(--ink);
  font-family:'Bangers',cursive; letter-spacing:.12em; color:var(--green);
}
.led{ width:10px; height:10px; border-radius:50%; box-shadow:0 0 10px currentColor; }

/* ---------- JOIN US ---------- */
.banner-frame{
  position:relative; border:5px solid var(--ink);
  box-shadow:12px 12px 0 var(--gold-dk), 0 40px 90px rgba(0,0,0,.8);
  transform:rotateX(4deg) rotateZ(-.6deg);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;
}
.banner-frame:hover{ transform:rotateX(0) rotateZ(0) scale(1.015); }
.banner-frame img{ display:block; width:100%; height:auto; }
.banner-frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(0,0,0,.25) 1px, transparent 1.3px);
  background-size:4px 4px; mix-blend-mode:overlay;
}

.social-tile{
  position:relative; display:flex; align-items:center; gap:.9rem;
  padding:1rem 1.15rem; text-decoration:none; color:var(--paper);
  background:rgba(7,7,10,.82); border:3px solid var(--ink);
  box-shadow:6px 6px 0 var(--gold-dk);
  transition:transform .2s, box-shadow .2s, background .25s, color .25s;
}
.social-tile:hover{ transform:translate(3px,3px); box-shadow:3px 3px 0 var(--gold-dk); background:var(--gold); color:var(--ink); }
.social-tile .ico{
  width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center;
  background:var(--gold); color:var(--ink); border:3px solid var(--ink);
}
.social-tile:hover .ico{ background:var(--ink); color:var(--gold); }

/* ---------- SECTION HEADER ---------- */
.sec-kicker{
  display:inline-block; font-family:'Bangers',cursive; letter-spacing:.22em;
  color:var(--ink); background:var(--green); border:3px solid var(--ink);
  padding:.2rem .85rem; transform:rotate(-1.6deg); box-shadow:4px 4px 0 var(--ink);
}

/* ---------- REVEAL ---------- */
.rv{ opacity:0; transform:translateY(38px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.rv.in{ opacity:1; transform:none; }

/* ---------- MISC ---------- */
.toast{
  position:fixed; left:50%; bottom:28px; transform:translate(-50%,140%);
  background:var(--green); color:var(--ink); border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink); font-family:'Bangers',cursive;
  padding:.6rem 1.3rem; letter-spacing:.08em; z-index:90; transition:transform .35s cubic-bezier(.2,.9,.2,1);
}
.toast.show{ transform:translate(-50%,0); }

::-webkit-scrollbar{ width:11px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--gold-dk); border:2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:var(--gold); }
::selection{ background:var(--gold); color:var(--ink); }

/* ---------- RESPONSIVE: flatten the 3D ---------- */
@media (max-width:1023px){
  .tilt-l,.tilt-r,.case-card,.crt,.banner-frame{ transform:none !important; }
  .case-card:hover,.crt:hover,.banner-frame:hover{ transform:translateY(-6px) !important; }
  .photo{ transform:none !important; }
  .hero-floor{ height:32vh; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}