/* =========================================================
   ONLYEMBER — COMIC / INK-PANEL THEME
   ========================================================= */

:root{
  --ink:#0b0705;
  --paper:#f6ecd9;
  --ember:#ff6a00;
  --flame:#ff2d0f;
  --gold:#ffc400;
  --smoke:#1a1411;
  --edge:4px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

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

.display{ font-family:'Bangers',cursive; letter-spacing:.035em; }
.marker{ font-family:'Permanent Marker',cursive; }

/* ============ BACKGROUND STACK ============ */
#bg{
  position:fixed; inset:0; z-index:-5; overflow:hidden;
  background:#080504;
}
#bg .layer{ position:absolute; inset:-6%; }

/* banner artwork as the living background */
#bg .art{
  background-image:url('../assets/banner.jpg');
  background-size:cover;
  background-position:center 65%;
  filter:saturate(1.15) contrast(1.05) blur(2px) brightness(.55);
  transform:scale(1.08);
  animation:bgdrift 32s ease-in-out infinite alternate;
}
#bg .art2{
  background-image:url('../assets/logo.jpg');
  background-repeat:no-repeat;
  background-position:center;
  background-size:min(70vw,720px);
  mix-blend-mode:screen;
  opacity:.10;
  filter:blur(1px) contrast(1.2);
  animation:bgpulse 9s ease-in-out infinite;
}
@keyframes bgdrift{
  from{ transform:scale(1.08) translate3d(0,0,0); }
  to  { transform:scale(1.16) translate3d(-2.5%,-2%,0); }
}
@keyframes bgpulse{
  0%,100%{ opacity:.07; transform:scale(1); }
  50%{ opacity:.16; transform:scale(1.04); }
}

/* halftone comic dots */
#bg .dots{
  background-image:radial-gradient(rgba(255,120,20,.28) 1.1px, transparent 1.2px);
  background-size:7px 7px;
  opacity:.5;
  mix-blend-mode:overlay;
}

/* ink vignette so text stays readable */
#bg .vignette{
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255,90,0,.16), transparent 60%),
    radial-gradient(100% 70% at 50% 110%, rgba(255,40,0,.18), transparent 60%),
    linear-gradient(180deg, rgba(6,4,3,.78), rgba(6,4,3,.88) 45%, rgba(6,4,3,.94));
}

/* ============ SHINE SWEEP ============ */
#bg .shine{
  inset:-40%;
  background:linear-gradient(100deg,
     transparent 38%,
     rgba(255,196,0,.05) 45%,
     rgba(255,255,255,.22) 50%,
     rgba(255,120,0,.09) 55%,
     transparent 62%);
  filter:blur(6px);
  transform:translateX(-60%);
  animation:sweep 7.5s linear infinite;
  mix-blend-mode:screen;
  pointer-events:none;
}
@keyframes sweep{
  0%{ transform:translateX(-70%); }
  100%{ transform:translateX(70%); }
}

/* floating embers */
.ember-dot{
  position:fixed; bottom:-20px; z-index:-4;
  width:6px; height:6px; border-radius:50%;
  background:radial-gradient(circle,#fff2c2 0%,var(--gold) 35%,var(--flame) 70%,transparent 72%);
  box-shadow:0 0 12px rgba(255,110,0,.9);
  animation:rise linear infinite;
  pointer-events:none;
}
@keyframes rise{
  0%{ transform:translate3d(0,0,0) scale(.6); opacity:0; }
  12%{ opacity:1; }
  100%{ transform:translate3d(var(--dx,20px),-110vh,0) scale(1.15); opacity:0; }
}

/* ============ COMIC PRIMITIVES ============ */
.panel{
  position:relative;
  background:linear-gradient(160deg, rgba(24,16,12,.92), rgba(10,7,5,.95));
  border:var(--edge) solid #000;
  box-shadow:
    10px 10px 0 rgba(0,0,0,.85),
    inset 0 0 0 2px rgba(255,146,40,.35),
    0 0 40px rgba(255,90,0,.12);
}
.panel::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.09) 1px, transparent 1.1px);
  background-size:5px 5px;
  opacity:.35;
}
.panel-paper{
  background:linear-gradient(160deg,#f9f1e0,#e6d6bb);
  color:var(--ink);
}
.panel-paper .display{ color:#160c06; }

.tilt-l{ transform:perspective(1400px) rotateY(7deg) rotateX(2.5deg) translateZ(0); }
.tilt-r{ transform:perspective(1400px) rotateY(-7deg) rotateX(2.5deg) translateZ(0); }
.tilt-up{ transform:perspective(1400px) rotateX(8deg); }
.skewbar{ transform:skewY(-2.4deg); }
.unskew{ transform:skewY(2.4deg); }

/* comic outlined text */
.stroke-ink{
  color:var(--gold);
  text-shadow:
    -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000,
    0 6px 0 #7a1c00, 0 10px 22px rgba(255,80,0,.55);
}
.stroke-sm{
  text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000;
}
.fire-text{
  background:linear-gradient(180deg,#fff3c4 0%,var(--gold) 30%,var(--ember) 62%,var(--flame) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* comic buttons */
.cbtn{
  position:relative; display:inline-flex; align-items:center; gap:.55rem;
  padding:.85rem 1.6rem;
  font-family:'Bangers',cursive; font-size:1.35rem; letter-spacing:.06em;
  color:#140a04; text-decoration:none; white-space:nowrap;
  background:linear-gradient(180deg,var(--gold),var(--ember) 60%,var(--flame));
  border:3px solid #000;
  box-shadow:6px 6px 0 #000;
  transition:transform .12s ease, box-shadow .12s ease, filter .2s ease;
  overflow:hidden;
}
.cbtn:hover{ transform:translate(-3px,-3px); box-shadow:10px 10px 0 #000; filter:brightness(1.08); }
.cbtn:active{ transform:translate(3px,3px); box-shadow:2px 2px 0 #000; }
.cbtn::before{
  content:""; position:absolute; top:0; left:-120%;
  width:60%; height:100%; transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:btnshine 3.4s ease-in-out infinite;
}
@keyframes btnshine{ 0%{left:-120%} 55%{left:150%} 100%{left:150%} }

.cbtn.ghost{
  background:rgba(12,8,6,.75);
  color:var(--gold);
  border-color:#000;
  box-shadow:6px 6px 0 #000, inset 0 0 0 2px rgba(255,146,40,.6);
}
.cbtn.ghost:hover{ color:#fff; }

/* section heading badge */
.badge{
  display:inline-block;
  font-family:'Bangers',cursive; letter-spacing:.14em; font-size:.95rem;
  padding:.3rem 1rem; color:#140a04;
  background:var(--gold); border:3px solid #000; box-shadow:5px 5px 0 #000;
  transform:rotate(-2deg);
}

/* speech bubble */
.bubble{
  position:relative;
  background:var(--paper); color:var(--ink);
  border:4px solid #000; border-radius:26px;
  padding:1.1rem 1.4rem; box-shadow:8px 8px 0 #000;
}
.bubble::after{
  content:""; position:absolute; left:36px; bottom:-26px;
  border:14px solid transparent; border-top-color:#000;
}
.bubble::before{
  content:""; position:absolute; left:40px; bottom:-16px; z-index:1;
  border:10px solid transparent; border-top-color:var(--paper);
}

/* burst / star */
.burst{
  background:var(--flame); color:#fff;
  font-family:'Bangers',cursive;
  padding:1.2rem;
  border:3px solid #000;
  clip-path:polygon(50% 0%,61% 18%,82% 11%,79% 33%,100% 44%,82% 58%,92% 79%,69% 78%,59% 100%,46% 81%,24% 88%,25% 66%,4% 57%,21% 42%,9% 22%,32% 24%,38% 3%);
}

/* number chip */
.chip{
  width:62px; height:62px; flex:none;
  display:grid; place-items:center;
  font-family:'Bangers',cursive; font-size:2rem; color:#140a04;
  background:radial-gradient(circle at 35% 30%,#ffe98a,var(--ember) 65%,var(--flame));
  border:3px solid #000; border-radius:50%;
  box-shadow:5px 5px 0 #000;
}

/* divider rip */
.rip{
  height:26px; background:#000;
  clip-path:polygon(0 0,100% 0,100% 45%,96% 100%,92% 40%,88% 95%,84% 38%,80% 100%,76% 45%,72% 92%,68% 40%,64% 100%,60% 44%,56% 95%,52% 38%,48% 100%,44% 45%,40% 92%,36% 40%,32% 100%,28% 44%,24% 95%,20% 38%,16% 100%,12% 45%,8% 92%,4% 40%,0 100%);
}

/* nav */
#nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  backdrop-filter:blur(8px);
  background:linear-gradient(180deg,rgba(8,5,4,.92),rgba(8,5,4,.55));
  border-bottom:4px solid #000;
  box-shadow:0 6px 0 rgba(0,0,0,.6);
}
#nav a.navlink{
  font-family:'Bangers',cursive; letter-spacing:.08em; font-size:1.12rem;
  color:var(--paper); text-decoration:none; padding:.2rem .1rem;
  border-bottom:3px solid transparent; transition:.18s;
}
#nav a.navlink:hover{ color:var(--gold); border-bottom-color:var(--flame); }

.logo-ring{
  border:3px solid #000; border-radius:50%;
  box-shadow:0 0 0 3px var(--ember), 0 0 26px rgba(255,110,0,.7);
  background:#fff;
}

/* chart frame */
#chartbox{
  position:relative; width:100%; height:620px;
  border:var(--edge) solid #000; background:#0b0705;
  box-shadow:12px 12px 0 rgba(0,0,0,.85), inset 0 0 0 2px rgba(255,146,40,.4);
  overflow:hidden;
}
#chartbox iframe{ width:100%; height:100%; border:0; display:block; }

/* banner panel (JOIN US only) */
.banner-frame{
  position:relative;
  border:var(--edge) solid #000;
  box-shadow:14px 14px 0 rgba(0,0,0,.85), 0 0 60px rgba(255,90,0,.25), inset 0 0 0 3px rgba(255,196,0,.5);
  overflow:hidden;
  transform:perspective(1500px) rotateX(6deg);
}
.banner-frame img{ display:block; width:100%; height:auto; }
.banner-frame .gloss{
  position:absolute; inset:-30%;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.3) 48%,transparent 56%);
  transform:translateX(-70%);
  animation:sweep 6s linear infinite;
  pointer-events:none;
}

/* CA box */
.ca-box{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  word-break:break-all;
  background:#0d0806; color:var(--gold);
  border:3px solid #000; box-shadow:inset 0 0 0 2px rgba(255,146,40,.45);
}

/* reveal animation */
.reveal{ opacity:0; transform:translateY(38px) scale(.985); transition:opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.in.tilt-l{ transform:perspective(1400px) rotateY(7deg) rotateX(2.5deg); }
.reveal.in.tilt-r{ transform:perspective(1400px) rotateY(-7deg) rotateX(2.5deg); }
.reveal.in.tilt-up{ transform:perspective(1400px) rotateX(8deg); }

/* marquee */
.marquee{
  border-top:4px solid #000; border-bottom:4px solid #000;
  background:linear-gradient(90deg,var(--flame),var(--ember),var(--gold),var(--ember),var(--flame));
  color:#140a04; overflow:hidden; white-space:nowrap;
}
.marquee .track{ display:inline-block; padding:.55rem 0; animation:slide 22s linear infinite; }
.marquee span{ font-family:'Bangers',cursive; font-size:1.3rem; letter-spacing:.12em; padding:0 1.4rem; }
@keyframes slide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* icon buttons */
.iconbtn{
  width:58px; height:58px; display:grid; place-items:center;
  background:#0d0806; color:var(--gold);
  border:3px solid #000; box-shadow:5px 5px 0 #000;
  transition:.15s;
}
.iconbtn:hover{ background:var(--ember); color:#140a04; transform:translate(-2px,-2px); box-shadow:8px 8px 0 #000; }

@media (max-width:900px){
  .tilt-l,.tilt-r,.tilt-up,.reveal.in.tilt-l,.reveal.in.tilt-r,.reveal.in.tilt-up,.banner-frame{ transform:none !important; }
  #chartbox{ height:460px; }
  .panel{ box-shadow:6px 6px 0 rgba(0,0,0,.85), inset 0 0 0 2px rgba(255,146,40,.35); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
}