/* ============================================================
   BULLUNC - COMIC / INK PRESS THEME
   ============================================================ */

:root{
  --ink:        #06070b;
  --ink-2:      #0d1018;
  --paper:      #f4efe2;
  --paper-2:    #e3d9c2;
  --red:        #e01f26;
  --red-dk:     #97080d;
  --gold:       #ffc42e;
  --gold-dk:    #b57c00;
  --cyan:       #23d7e0;
  --violet:     #8b5cf6;
  --line:       4px;
  --pop:        14px;      /* hard shadow offset */
  --nav-h:      74px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 14px); }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:'Nunito', system-ui, sans-serif;
  font-weight:700;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Fixed background stack ------------------------- */
.bg-stack{ position:fixed; inset:0; z-index:-3; pointer-events:none; }

/* artwork collage layer built from the character renders */
.bg-art{
  position:absolute; inset:-4%;
  background-repeat:no-repeat;
  background-image:
    url('../1.png'),
    url('../2.png'),
    url('../3.png'),
    url('../4.png');
  background-size: 42vw auto, 40vw auto, 38vw auto, 44vw auto;
  background-position:
    -8vw 4vh,
    72vw 12vh,
    -6vw 68vh,
    68vw 62vh;
  filter: grayscale(.35) contrast(1.15) blur(2px);
  opacity:.20;
  mix-blend-mode:luminosity;
  animation: bgdrift 46s ease-in-out infinite alternate;
}
@keyframes bgdrift{
  from{ transform:scale(1.02) translate3d(0,0,0); }
  to  { transform:scale(1.09) translate3d(0,-2.2vh,0); }
}

/* deep vignette + duotone wash */
.bg-wash{
  position:absolute; inset:0;
  background:
    radial-gradient(115% 78% at 50% 0%,   rgba(224,31,38,.20), transparent 58%),
    radial-gradient(90%  70% at 88% 88%,  rgba(255,196,46,.16), transparent 60%),
    radial-gradient(85%  65% at 8%  92%,  rgba(35,215,224,.12), transparent 62%),
    linear-gradient(180deg, #05060a 0%, #0a0d15 42%, #05060a 100%);
}
.bg-wash::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(120% 100% at 50% 50%, transparent 42%, rgba(0,0,0,.82) 100%);
}

/* ben-day halftone */
.bg-dots{
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(244,239,226,.30) 1.1px, transparent 1.2px);
  background-size:7px 7px;
  opacity:.16;
}

/* newsprint grain */
.bg-grain{
  position:absolute; inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  opacity:.09; 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)}
}

/* radiating speed lines used behind hero + join */
.rays{
  position:absolute; left:50%; top:50%; width:200vmax; height:200vmax;
  transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg,
    rgba(244,239,226,.085) 0deg 2.2deg, transparent 2.2deg 8deg);
  animation:spin 120s linear infinite; pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side, #000 8%, transparent 72%);
          mask-image:radial-gradient(closest-side, #000 8%, transparent 72%);
}
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* ---------- Typography ------------------------------------- */
.display{ font-family:'Bangers', cursive; font-weight:400; letter-spacing:.035em; line-height:.94; }
.mono{ font-family:'Space Mono', ui-monospace, monospace; }

.ink-title{
  color:var(--paper);
  text-shadow:
     3px 3px 0 var(--ink), -3px 3px 0 var(--ink),
     3px -3px 0 var(--ink), -3px -3px 0 var(--ink),
     9px 10px 0 var(--red);
}
.ink-title.gold{
  color:var(--gold);
  text-shadow:
     3px 3px 0 var(--ink), -3px 3px 0 var(--ink),
     3px -3px 0 var(--ink), -3px -3px 0 var(--ink),
     9px 10px 0 var(--gold-dk);
}

.outline-word{
  color:transparent;
  -webkit-text-stroke:2.5px var(--paper);
  opacity:.85;
}

/* ---------- Comic panel ------------------------------------ */
.panel{
  position:relative;
  background:var(--paper);
  color:var(--ink);
  border:var(--line) solid var(--ink);
  box-shadow:var(--pop) var(--pop) 0 var(--ink);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.panel-dark{
  background:var(--ink-2); color:var(--paper); border-color:var(--ink);
  box-shadow:var(--pop) var(--pop) 0 rgba(0,0,0,.85), 0 0 0 2px rgba(244,239,226,.14) inset;
}

.panel-halftone::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(6,7,11,.30) 1.1px, transparent 1.2px);
  background-size:6px 6px; opacity:.35;
}
.panel-dark.panel-halftone::before{
  background-image:radial-gradient(rgba(244,239,226,.30) 1.1px, transparent 1.2px);
  opacity:.22;
}

/* tape label on panels */
.tape{
  position:absolute; top:-16px; left:50%; transform:translateX(-50%) rotate(-2.4deg);
  background:var(--gold); color:var(--ink); border:3px solid var(--ink);
  font-family:'Bangers',cursive; letter-spacing:.12em; font-size:.85rem;
  padding:3px 18px; white-space:nowrap; box-shadow:4px 4px 0 var(--ink);
  z-index:3;
}

/* ---------- 3D perspective machinery ----------------------- */
.stage{ perspective:1500px; perspective-origin:50% 45%; }
.stage-lo{ perspective:2200px; }

.tilt-l{ transform:rotateY(11deg)  rotateX(4deg)  rotateZ(-1.4deg); transform-origin:right center; }
.tilt-r{ transform:rotateY(-11deg) rotateX(4deg)  rotateZ(1.4deg);  transform-origin:left center; }
.tilt-up{ transform:rotateX(13deg) rotateZ(-.8deg); transform-origin:center bottom; }
.tilt-dn{ transform:rotateX(-9deg) rotateZ(.8deg);  transform-origin:center top; }

.deck{ transform-style:preserve-3d; }

/* scroll reveal - panels swing in from depth */
.rise{
  opacity:0; transform:translate3d(0,64px,-260px) rotateX(22deg);
  transition:opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1);
}
.rise.in{ opacity:1; transform:translate3d(0,0,0) rotateX(0deg); }
.rise.d1{ transition-delay:.10s } .rise.d2{ transition-delay:.20s }
.rise.d3{ transition-delay:.30s } .rise.d4{ transition-delay:.40s }
.rise.d5{ transition-delay:.50s }

/* keep authored tilt after reveal (.rise overrides .tilt-*, so panels
   that must stay angled use these instead) */
.rise.keep-l.in{  transform:rotateY(9deg)  rotateZ(-1.2deg); }
.rise.keep-r.in{  transform:rotateY(-9deg) rotateZ(1.2deg); }
.rise.keep-up.in{ transform:rotateX(9deg)  rotateZ(-.6deg); transform-origin:center bottom; }
.rise.keep-dn.in{ transform:rotateX(-6deg) rotateZ(.5deg);  transform-origin:center top; }
.rise.keep-flat.in{ transform:rotateX(-3.5deg); transform-origin:center top; }

@media (prefers-reduced-motion:reduce){
  .rise{opacity:1 !important; transform:none !important}
  .bg-art,.bg-grain,.rays,.float-slow{animation:none}
}

/* ---------- Buttons ---------------------------------------- */
.btn-comic{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:'Bangers',cursive; letter-spacing:.07em; font-size:1.12rem;
  padding:.7rem 1.5rem;
  background:var(--gold); color:var(--ink);
  border:var(--line) solid var(--ink);
  box-shadow:7px 7px 0 var(--ink);
  text-decoration:none; cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, background .2s;
}
.btn-comic:hover{ transform:translate(4px,4px); box-shadow:3px 3px 0 var(--ink); background:#ffd45c; }
.btn-comic:active{ transform:translate(7px,7px); box-shadow:0 0 0 var(--ink); }
.btn-red{ background:var(--red); color:var(--paper); }
.btn-red:hover{ background:#f8353c; }
.btn-ink{ background:var(--ink-2); color:var(--paper); border-color:var(--paper); box-shadow:7px 7px 0 rgba(244,239,226,.9); }
.btn-ink:hover{ background:#161b28; box-shadow:3px 3px 0 rgba(244,239,226,.9); }
.btn-cyan{ background:var(--cyan); color:var(--ink); }
.btn-cyan:hover{ background:#5ce8ef; }

.icon-chip{
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--paper); color:var(--ink);
  border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink);
  transition:transform .12s, box-shadow .12s, background .2s;
}
.icon-chip:hover{ transform:translate(3px,3px); box-shadow:2px 2px 0 var(--ink); background:var(--gold); }

/* ---------- Nav -------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h); z-index:60;
  background:rgba(6,7,11,.82); backdrop-filter:blur(10px);
  border-bottom:var(--line) solid var(--ink);
  box-shadow:0 6px 0 rgba(224,31,38,.85);
}
.nav-link{
  font-family:'Bangers',cursive; letter-spacing:.09em; font-size:1.05rem;
  color:var(--paper); text-decoration:none; padding:.25rem .7rem;
  border:3px solid transparent; transition:.18s; display:inline-block;
}
.nav-link:hover{ color:var(--ink); background:var(--gold); border-color:var(--ink); transform:rotate(-2deg); }
.nav-logo{ border:3px solid var(--paper); box-shadow:4px 4px 0 var(--red); background:var(--paper); }

/* ---------- Speech bubble ---------------------------------- */
.bubble{
  position:relative; background:var(--paper); color:var(--ink);
  border:var(--line) solid var(--ink); border-radius:26px;
  padding:1.15rem 1.4rem; box-shadow:9px 9px 0 var(--ink);
}
.bubble::after{
  content:''; position:absolute; left:44px; bottom:-26px;
  border:14px solid transparent; border-top-color:var(--ink);
}
.bubble::before{
  content:''; position:absolute; left:48px; bottom:-16px; z-index:1;
  border:10px solid transparent; border-top-color:var(--paper);
}

/* burst / starburst sticker */
.burst{
  display:grid; place-items:center; text-align:center;
  background:var(--red); color:var(--paper);
  font-family:'Bangers',cursive; letter-spacing:.06em;
  filter:drop-shadow(6px 6px 0 rgba(0,0,0,.9));
  clip-path:polygon(50% 0%,61% 17%,80% 9%,79% 30%,98% 33%,85% 50%,98% 67%,79% 70%,80% 91%,61% 83%,50% 100%,39% 83%,20% 91%,21% 70%,2% 67%,15% 50%,2% 33%,21% 30%,20% 9%,39% 17%);
}

/* ---------- Section headers -------------------------------- */
.sec-kicker{
  display:inline-block; font-family:'Space Mono',monospace; font-size:.72rem;
  letter-spacing:.32em; text-transform:uppercase;
  background:var(--red); color:var(--paper);
  border:3px solid var(--ink); padding:.25rem .8rem; box-shadow:4px 4px 0 var(--ink);
  transform:rotate(-1.6deg);
}

/* ---------- Marquee ---------------------------------------- */
.strip{
  background:var(--gold); color:var(--ink);
  border-top:var(--line) solid var(--ink); border-bottom:var(--line) solid var(--ink);
  overflow:hidden; white-space:nowrap;
}
.strip-red{ background:var(--red); color:var(--paper); }
.strip-track{ display:inline-block; animation:slide 26s linear infinite; }
.strip-track span{ font-family:'Bangers',cursive; letter-spacing:.14em; font-size:1.35rem; padding:.45rem 1.1rem; display:inline-block; }
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ---------- Steps ------------------------------------------ */
.step-num{
  font-family:'Bangers',cursive; font-size:3.4rem; line-height:1;
  color:var(--gold); -webkit-text-stroke:3px var(--ink);
  text-shadow:6px 6px 0 rgba(0,0,0,.55);
}

/* CA copy field */
.ca-field{
  display:flex; align-items:stretch; gap:0;
  border:var(--line) solid var(--ink); background:var(--paper);
  box-shadow:9px 9px 0 var(--ink);
}
.ca-field code{
  flex:1; min-width:0; padding:.85rem 1rem; color:var(--ink);
  font-family:'Space Mono',monospace; font-size:.82rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ca-field button{
  border:0; border-left:var(--line) solid var(--ink);
  background:var(--red); color:var(--paper);
  font-family:'Bangers',cursive; letter-spacing:.08em; font-size:1rem;
  padding:0 1.3rem; cursor:pointer; transition:.18s;
}
.ca-field button:hover{ background:var(--gold); color:var(--ink); }

/* ---------- Chart frame ------------------------------------ */
.tv{
  position:relative;
  border:var(--line) solid var(--ink);
  background:#05070c;
  box-shadow:var(--pop) var(--pop) 0 var(--ink), 0 0 0 3px var(--gold) inset;
  overflow:hidden;
}
.tv iframe{ display:block; width:100%; height:100%; border:0; }
.scanlines{
  position:absolute; inset:0; pointer-events:none; z-index:2; opacity:.14;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.14) 0 1px, transparent 1px 4px);
}

/* ---------- Banner splash (Join Us) ------------------------ */
.splash{
  position:relative;
  border:6px solid var(--ink);
  box-shadow:20px 20px 0 var(--ink), 0 0 0 4px var(--gold);
  overflow:hidden; background:var(--ink);
}
.splash img{ display:block; width:100%; height:auto; }

/* misc */
.grid-lines{
  background-image:linear-gradient(rgba(244,239,226,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(244,239,226,.05) 1px, transparent 1px);
  background-size:48px 48px;
}
/* animates the independent `translate` property so it COMPOSES with
   the 3D tilt in `transform` instead of overwriting it */
.float-slow{ animation:floaty 7s ease-in-out infinite; }
.float-slow.alt{ animation-duration:9s; animation-delay:-3s; }
@keyframes floaty{ 0%,100%{ translate:0 0 } 50%{ translate:0 -14px } }

::selection{ background:var(--gold); color:var(--ink); }

::-webkit-scrollbar{ width:12px }
::-webkit-scrollbar-track{ background:var(--ink) }
::-webkit-scrollbar-thumb{ background:var(--red); border:3px solid var(--ink) }

@media (max-width:900px){
  :root{ --pop:9px; --line:3px; }
  .tilt-l,.tilt-r,.tilt-up,.tilt-dn{ transform:none !important; }
  .rise.keep-l.in,.rise.keep-r.in,.rise.keep-up.in,
  .rise.keep-dn.in,.rise.keep-flat.in{ transform:none; }
  .splash{ box-shadow:10px 10px 0 var(--ink), 0 0 0 4px var(--gold); }
}