/* ===========================================================================
   $BAGHOUL — desktop-only interactive meme site
   Stage contract: everything lives on a fixed 1536 x 1024 canvas.
   Anchors: SHOULDER 1000,375 · DOME 620,470 (r92) · CLAW_TIP_IDLE 617,294 · EYE 1050,252
   =========================================================================== */

:root{
  --tox:#CCFF00;
  --tox-d:#8DB300;
  --tox-dim:#3d4a14;
  --red:#C4101A;
  --ink:#050805;
  --dim:#9aa384;
  --disp:"Anton","Impact","Haettenschweiler","Arial Narrow Bold",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,"Courier New",monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:#000;color:#e4ead2;
  font-family:var(--mono);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;user-select:none;-webkit-user-drag:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}

/* ---------------------------------------------------------------- viewport */
#viewport{position:fixed;inset:0;overflow:hidden;background:#000}

#starfield{
  position:absolute;inset:-10%;opacity:.55;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff, transparent 60%),
    radial-gradient(1px 1px at 31% 63%, #dfe9ff, transparent 60%),
    radial-gradient(1.4px 1.4px at 58% 12%, #fff, transparent 60%),
    radial-gradient(1px 1px at 74% 41%, #cfe0ff, transparent 60%),
    radial-gradient(1.1px 1.1px at 88% 77%, #fff, transparent 60%),
    radial-gradient(1px 1px at 22% 88%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 45% 34%, #eef4ff, transparent 60%),
    radial-gradient(1px 1px at 66% 92%, #fff, transparent 60%),
    radial-gradient(1px 1px at 5% 51%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 94% 23%, #fff, transparent 60%);
  background-repeat:repeat;background-size:520px 420px;
  animation:drift 180s linear infinite;
}
@keyframes drift{to{transform:translate3d(-520px,-420px,0)}}

#vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%, transparent 48%, rgba(0,0,0,.72) 100%);
}

/* ------------------------------------------------------------------ stage */
#stage{
  position:absolute;left:50%;top:50%;
  width:1536px;height:1024px;
  transform-origin:50% 50%;
  transform:translate(-50%,-50%) scale(1);
  will-change:transform;
}
#stage-shake{position:absolute;inset:0;will-change:transform}

.px{position:absolute;left:0;top:0;width:1536px;height:1024px}
.layer{pointer-events:none}

#bg-wrap{z-index:0}
/* wide bleed plate: 2560x1184, the stage safe area sits at (512,160); edges melt into the starfield */
#bg{position:absolute;left:-512px;top:-160px;width:2560px;height:1184px;max-width:none;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 260px,#000 2300px,transparent 2560px);
          mask-image:linear-gradient(to right,transparent 0,#000 260px,#000 2300px,transparent 2560px)}

/* side-gutter asteroids (placed by app.js in stage px, mostly at x<0 and x>1536) */
#roids-back{z-index:2}
#roids-front{z-index:52}
.roid{position:absolute;left:0;top:0;will-change:transform;transform:translate3d(var(--x),var(--y),0)}
.roid img{display:block;width:100%;height:auto;animation:roidspin var(--spin,80s) linear infinite;
  animation-direction:var(--dir,normal)}
.roid.far img{filter:brightness(.55) saturate(.7) blur(.6px)}
.roid.near img{filter:brightness(.8) blur(3px)}
.roid{animation:roidfloat var(--float,14s) ease-in-out infinite alternate;animation-delay:var(--delay,0s)}
@keyframes roidspin{to{transform:rotate(360deg)}}
@keyframes roidfloat{
  from{transform:translate3d(var(--x),var(--y),0)}
  to  {transform:translate3d(calc(var(--x) + var(--dx,12px)),calc(var(--y) + var(--dy,-18px)),0)}
}
#bg-breathe{animation:breathe 26s ease-in-out infinite alternate;transform-origin:50% 55%}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.018)}}

#btn-wrap{z-index:10}
#btn-intact{z-index:10}
#btn-cracked{z-index:11;opacity:0;transition:opacity .18s linear}

#rig-wrap{z-index:20}
#rig-drift{animation:rigdrift 6.5s ease-in-out infinite alternate;transform-origin:1082px 470px}
@keyframes rigdrift{
  from{transform:translate3d(0,0,0) rotate(-.45deg)}
  to  {transform:translate3d(4px,-7px,0) rotate(.45deg)}
}
#rig-recoil{transition:transform .42s cubic-bezier(.22,1.4,.4,1);transform-origin:1082px 470px}
#rig-recoil.recoil{transition-duration:.09s;transition-timing-function:cubic-bezier(.4,0,1,1);
  transform:translate3d(13px,9px,0) rotate(2.1deg)}

/* eye glow (no asset) */
#eye{position:absolute;left:1050px;top:252px;width:0;height:0;z-index:21;
  pointer-events:none;mix-blend-mode:screen;
  animation:eyepulse 2.8s ease-in-out infinite alternate;
  filter:brightness(1)}
#eye i{position:absolute;display:block;border-radius:50%}
#eye i:nth-child(1){left:-34px;top:-26px;width:68px;height:52px;
  background:radial-gradient(closest-side,rgba(244,255,200,.95),rgba(204,255,0,.55) 42%,rgba(150,200,0,0) 78%)}
#eye i:nth-child(2){left:-92px;top:-70px;width:184px;height:140px;
  background:radial-gradient(closest-side,rgba(204,255,0,.42),rgba(150,200,0,0) 72%)}
@keyframes eyepulse{from{opacity:.72;transform:scale(1)}to{opacity:1;transform:scale(1.07)}}
#eye.flare{animation:none;opacity:1;transform:scale(1.5);filter:brightness(2.6) saturate(.55);
  transition:transform .09s ease-out,filter .09s ease-out}
#eye.decay{transform:scale(1);filter:brightness(1);
  transition:transform .28s ease-in,filter .28s ease-in}

/* baghouling eye beams */
#beams{position:absolute;left:1050px;top:252px;width:0;height:0;z-index:22;
  pointer-events:none;mix-blend-mode:screen;opacity:0;transition:opacity .35s ease-out}
#beams.on{opacity:1}
#beams b{position:absolute;display:block;right:0;width:1200px;height:26px;
  background:linear-gradient(to left,rgba(244,255,200,.85),rgba(204,255,0,.35) 35%,rgba(204,255,0,0) 92%);
  filter:blur(9px);transform-origin:100% 50%}
#beams b:nth-child(1){top:-30px;transform:rotate(-7deg)}
#beams b:nth-child(2){top:6px;transform:rotate(5deg)}

/* the arm: pivot exactly at the shoulder */
#arm-pivot{z-index:30;transform-origin:1000px 375px;will-change:transform;
  transition:transform .36s cubic-bezier(0,0,.2,1)}
#arm-pivot.slam{transition-duration:.09s;transition-timing-function:cubic-bezier(.4,0,1,1);
  transform:translate3d(-8px,8px,0) rotate(-26deg)}
#arm-tremble{transform-origin:1000px 375px;
  animation:tremble 1.7s ease-in-out infinite alternate}
@keyframes tremble{from{transform:rotate(-.9deg)}to{transform:rotate(.9deg)}}
#arm-pivot.slam #arm-tremble{animation-play-state:paused}

#fx{position:absolute;left:0;top:0;width:1536px;height:1024px;z-index:40;pointer-events:none}

#shock{position:absolute;left:620px;top:470px;width:0;height:0;z-index:41;pointer-events:none}
#shock::after{
  content:"";position:absolute;left:-190px;top:-120px;width:380px;height:240px;
  border:9px solid rgba(214,255,60,.92);border-radius:50%;
  opacity:0;transform:scale(.15);filter:blur(1px)
}
#shock.go::after{animation:shockwave .42s cubic-bezier(.16,.7,.3,1) forwards}
@keyframes shockwave{
  0%{opacity:1;transform:scale(.15)}
  100%{opacity:0;transform:scale(2.6)}
}

#debris-wrap{z-index:50;opacity:.45;filter:blur(2px);
  /* the junk plate was cut at the canvas edge: fade it so the cut never shows in the gutters */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 70px,#000 1466px,transparent 1536px);
          mask-image:linear-gradient(to right,transparent 0,#000 70px,#000 1466px,transparent 1536px)}
#debris-drift{animation:debdrift 38s ease-in-out infinite alternate}
@keyframes debdrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-14px,8px,0)}}

/* the physical target */
#dome-hit{position:absolute;left:528px;top:378px;width:184px;height:184px;border-radius:50%;
  z-index:55;cursor:pointer;background:transparent}
#dome-hit:focus-visible{outline:3px solid var(--tox);outline-offset:6px;border-radius:50%}
#dome-ring{position:absolute;left:528px;top:400px;width:184px;height:140px;z-index:54;
  pointer-events:none;border:2px solid rgba(204,255,0,.8);border-radius:50%;box-shadow:0 0 22px rgba(204,255,0,.35),inset 0 0 22px rgba(204,255,0,.2);
  animation:domering 2.4s ease-in-out infinite}
@keyframes domering{
  0%{transform:scale(1);opacity:.85}
  70%{transform:scale(1.42);opacity:0}
  100%{transform:scale(1.42);opacity:0}
}
#dome-hit:hover ~ #dome-ring,#dome-hit:hover + #dome-ring{border-color:rgba(204,255,0,.95)}

/* stamp */
#stamp{position:absolute;left:120px;top:500px;width:640px;height:168px;z-index:56;
  border:6px solid rgba(228,28,28,.9);border-radius:12px;
  transform:rotate(7deg) scale(1.7);opacity:0;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:rgba(22,2,2,.58);text-shadow:0 0 22px rgba(196,16,26,.8);
  box-shadow:0 0 40px rgba(0,0,0,.45),inset 0 0 30px rgba(228,28,28,.18)}
#stamp.on{animation:stampin .9s ease-out forwards}
@keyframes stampin{
  0%{opacity:0;transform:rotate(7deg) scale(1.7)}
  16%{opacity:1;transform:rotate(7deg) scale(1)}
  66%{opacity:1;transform:rotate(7deg) scale(1)}
  100%{opacity:0;transform:rotate(7deg) scale(1.02)}
}
#stamp-1{font-family:var(--disp);font-size:70px;line-height:1;letter-spacing:.02em;color:#E41C1C}
#stamp-2{font-size:19px;font-weight:700;letter-spacing:.06em;color:#ff6b5a;text-shadow:0 1px 3px #000}

/* ------------------------------------------------------------------- UI */
#ui{position:absolute;inset:0;z-index:60;pointer-events:none}
#ui button,#ui a{pointer-events:auto}
/* scrims: full viewport width (the stage is centred, gutters can be ~1100 stage px wide),
   and BEHIND the UI (z-index:-1 inside the #ui stacking context) so they never dim the CTA */
#ui::before{content:"";position:absolute;left:-1400px;top:-200px;right:-1400px;height:410px;z-index:-1;
  background:linear-gradient(to bottom,rgba(0,0,0,.82) 48%,rgba(0,0,0,0));pointer-events:none}
#ui::after{content:"";position:absolute;left:-1400px;bottom:-200px;right:-1400px;height:500px;z-index:-1;
  background:linear-gradient(to top,rgba(3,5,2,.94) 48%,rgba(3,5,2,0));pointer-events:none}
#ui > *{position:absolute}

#wordmark{margin:0;left:48px;top:30px;font-family:var(--disp);font-size:60px;line-height:1;
  letter-spacing:.01em;color:var(--tox);text-shadow:0 0 26px rgba(204,255,0,.55),0 0 6px rgba(204,255,0,.9)}
#tagline{margin:0;left:50px;top:102px;font-size:15px;font-weight:700;letter-spacing:.22em;color:var(--dim)}
#chain{left:50px;top:134px;display:flex;align-items:center;gap:9px;height:30px;padding:0 13px 0 6px;
  border:1px solid var(--tox-dim);border-radius:15px;background:rgba(8,10,4,.72);
  font-size:11px;font-weight:700;letter-spacing:.16em;color:#c3cba6}
#chain img{width:18px;height:18px;border-radius:5px}
#chain s{text-decoration:none;color:var(--tox-dim)}
#chain b{color:var(--tox);font-weight:700}

#ca-pill{left:1040px;top:48px;width:448px;height:44px;border-radius:22px;
  border:1px solid var(--tox-d);background:rgba(6,12,6,.78);
  display:flex;align-items:center;gap:10px;padding:0 16px;font-size:13px;
  transition:border-color .15s,background .15s}
#ca-pill:hover{border-color:var(--tox);background:rgba(10,20,8,.9)}
#ca-label{color:var(--dim);font-weight:700}
#ca-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e4ead2;text-align:left}
#ca-copy{color:var(--tox);font-weight:700;letter-spacing:.08em}

#socials{left:1040px;top:104px;width:448px;display:flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;letter-spacing:.16em}
#socials a,#socials button{height:28px;display:inline-flex;align-items:center;padding:0 12px;
  border:1px solid var(--tox-dim);border-radius:14px;background:rgba(8,10,4,.7);
  color:var(--dim);text-decoration:none;letter-spacing:.16em;transition:color .15s,border-color .15s}
#socials a:hover,#socials button:hover{color:var(--tox);border-color:var(--tox-d)}
#socials #mute{margin-left:auto;font-size:11px}

.cap{font-size:13px;font-weight:700;letter-spacing:.18em;color:#b3bb98;text-shadow:0 1px 6px rgba(0,0,0,.9)}

#meter{left:48px;top:788px;width:430px}
#meter::before{content:"";position:absolute;left:-58px;top:-38px;width:560px;height:230px;
  background:radial-gradient(64% 70% at 30% 50%,rgba(2,5,3,.94),rgba(2,5,3,0) 78%);
  z-index:-1;pointer-events:none}
#segments{display:flex;gap:6px;margin:12px 0 10px}
#segments i{display:block;width:8px;height:28px;background:#262d12;
  box-shadow:inset 0 0 0 1px rgba(204,255,0,.08);transition:background .2s,box-shadow .2s}
#segments i.on{background:var(--tox);box-shadow:0 0 10px rgba(204,255,0,.75)}
#meter-count{font-family:var(--disp);font-size:31px;line-height:1;color:var(--tox);letter-spacing:.02em}
#meter .sub{margin-top:8px;font-size:14px;color:#b3bb98;text-shadow:0 1px 6px rgba(0,0,0,.9)}

#chips{left:762px;top:798px;display:flex;gap:10px}
.chip{border:1px solid var(--tox-dim);background:rgba(6,12,6,.72);border-radius:16px;
  padding:7px 13px;font-size:12px;font-weight:700;letter-spacing:.09em;color:#c3cba6;white-space:nowrap}
.chip.glitch{animation:chipglitch .42s steps(2) 2;color:#ff6a6a;border-color:#803}
@keyframes chipglitch{0%{transform:translateX(0)}50%{transform:translateX(-3px)}100%{transform:translateX(0)}}

#cta{left:762px;top:856px;width:460px;height:88px;border-radius:12px;
  background:var(--red);border:3px solid var(--tox);
  font-family:var(--disp);font-size:46px;letter-spacing:.04em;color:#fff;
  box-shadow:0 0 0 6px rgba(204,255,0,.12),0 0 46px rgba(204,255,0,.28),inset 0 -6px 18px rgba(0,0,0,.45);
  transition:transform .09s ease-out,box-shadow .18s ease-out,background .2s}
#cta:hover{transform:translateY(-2px);box-shadow:0 0 0 8px rgba(204,255,0,.18),0 0 66px rgba(204,255,0,.45),inset 0 -6px 18px rgba(0,0,0,.45)}
#cta:active{transform:translateY(3px);box-shadow:0 0 0 3px rgba(204,255,0,.1),0 0 18px rgba(204,255,0,.2),inset 0 6px 18px rgba(0,0,0,.55)}
#cta:focus-visible{outline:3px solid #fff;outline-offset:4px}
body.eternity #cta{background:var(--ink);color:var(--tox)}
#cta-sub{left:762px;top:952px;width:460px;text-align:center;font-size:18px;color:var(--dim)}

#counter{left:1272px;top:846px;width:230px}
#counter-n{font-family:var(--disp);font-size:52px;line-height:1.05;color:var(--tox);
  letter-spacing:.01em;text-shadow:0 0 22px rgba(204,255,0,.45);transform-origin:0 50%}
#counter-n.pop{animation:pop .12s ease-out}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
body.eternity #counter-n{font-size:34px;padding-top:8px}

/* ticker spans the whole viewport, not just the stage (JS sets --gut = visible gutter in stage px) */
#ticker{left:calc(-1 * var(--gut,0px));right:calc(-1 * var(--gut,0px));bottom:0;height:38px;
  background:rgba(5,7,3,.95);border-top:1px solid #262d12;overflow:hidden;display:flex;align-items:center}
#ticker-inner{display:flex;white-space:nowrap;animation:marquee 90s linear infinite;will-change:transform}
#ticker .track{font-size:14px;font-weight:700;letter-spacing:.11em;color:#a4ad86;padding-right:40px}
#ticker .track em{font-style:normal;color:var(--tox)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* the SELL DESK toast: a rejected-order push notification */
#toast{left:48px;top:186px;width:410px;display:grid;grid-template-columns:40px 1fr;gap:12px;
  padding:12px 16px 13px 12px;border-radius:14px;border:1px solid rgba(204,255,0,.28);
  background:rgba(14,16,10,.9);box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 30px rgba(204,255,0,.08);
  opacity:0;transform:translate3d(-30px,0,0);transition:opacity .25s ease-out,transform .35s cubic-bezier(.2,1.3,.4,1);
  pointer-events:none}
#toast.on{opacity:1;transform:translate3d(0,0,0)}
#toast img{width:40px;height:40px;border-radius:10px;background:#1b200d;object-fit:cover}
#toast-head{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;color:#8e9676}
#toast-head b{color:var(--tox);font-weight:700}
#toast-title{margin-top:3px;font-family:var(--disp);font-size:20px;letter-spacing:.03em;color:#ff5a3c}
#toast-body{margin-top:2px;font-size:12px;line-height:1.45;color:#dfe5cc}

/* ------------------------------------------------------- THE BAGHOULING */
#baghouling{position:absolute;inset:0;z-index:90;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:0;opacity:0;transition:opacity .4s ease-out}
#baghouling[hidden]{display:none}
#baghouling.on{opacity:1}
#bg-veil{position:absolute;left:-1400px;right:-1400px;top:-700px;bottom:-700px;background:rgba(2,3,1,.93);
  backdrop-filter:blur(3px)}
#chart{position:relative;width:1100px;height:380px;margin-top:-30px}
#bh-title{position:relative;margin:6px 0 0;font-family:var(--disp);font-size:78px;line-height:1;
  color:var(--tox);letter-spacing:.02em;text-shadow:0 0 40px rgba(204,255,0,.55);
  opacity:0;transform:translateY(16px);transition:opacity .4s,transform .4s}
#bh-sub{position:relative;margin:14px 0 0;font-size:17px;color:var(--dim);
  opacity:0;transition:opacity .4s .1s}
#baghouling.step2 #bh-title{opacity:1;transform:translateY(0)}
#baghouling.step2 #bh-sub{opacity:1}

#licence{position:relative;margin-top:26px;width:680px;
  border:1px solid var(--tox-d);background:rgba(5,10,5,.96);border-radius:6px;
  display:grid;grid-template-columns:96px 1fr;gap:24px;padding:22px 26px 34px;align-items:center;
  opacity:0;transform:translateY(34px);transition:opacity .45s,transform .45s;
  box-shadow:0 0 60px rgba(204,255,0,.14)}
#baghouling.step3 #licence{opacity:1;transform:translateY(0)}
#licence img{width:96px;height:96px;object-fit:contain}
#licence dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:16px 40px}
#licence dt{font-size:10px;letter-spacing:.18em;color:#6f7757}
#licence dd{margin:2px 0 0;font-family:var(--disp);font-size:22px;color:var(--tox);letter-spacing:.03em}
#lic-stamp{position:absolute;right:20px;bottom:10px;font-size:10px;letter-spacing:.3em;color:#5d6547}

#bh-confetti{position:relative;margin:16px 0 0;font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tox);opacity:0;transition:opacity .5s .4s}
#baghouling.step3 #bh-confetti{opacity:.85}
#confetti{position:absolute;left:0;top:0;width:1536px;height:1024px;pointer-events:none;z-index:5}

#bh-close{position:relative;margin-top:18px;font-size:14px;font-weight:700;letter-spacing:.2em;
  color:var(--dim);opacity:0;transition:opacity .4s,color .15s}
#bh-close:hover{color:var(--tox)}
#baghouling.step3 #bh-close{opacity:1}

/* freeze-frame on the whole stage during the takeover intro */
#stage.drain #stage-shake{filter:saturate(.12) contrast(1.15)}

/* ------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  #starfield,#bg-breathe,#rig-drift,#arm-tremble,#debris-drift,#eye,#dome-ring,#ticker-inner,.roid,.roid img{
    animation:none !important}
  #shock.go::after{animation:none;opacity:0}
  #stamp.on{animation:none;opacity:1;transform:rotate(7deg) scale(1)}
  #arm-pivot,#rig-recoil{transition:none !important}
  #stage-shake.shake{animation:none !important}
}

/* --------------------------------------------------------- shake tiers */
#stage-shake.shake-1{animation:shake1 .16s steps(2) 3}
#stage-shake.shake-2{animation:shake2 .16s steps(2) 3}
#stage-shake.shake-3{animation:shake3 .16s steps(2) 3}
@keyframes shake1{0%{transform:translate(0,0)}50%{transform:translate(-4px,3px)}100%{transform:translate(0,0)}}
@keyframes shake2{0%{transform:translate(0,0)}50%{transform:translate(-7px,5px)}100%{transform:translate(0,0)}}
@keyframes shake3{0%{transform:translate(0,0)}50%{transform:translate(-10px,7px)}100%{transform:translate(0,0)}}

/* green screen flash for tier 3 */
#viewport.flash::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;
  background:rgba(204,255,0,.16);animation:flashout .09s linear forwards}
@keyframes flashout{to{opacity:0}}