/* $SEED — RED ALERT (fx/alert.css)
   A page-wide state that arms when the market cap is within 5% of the next locked vault and
   disarms (700 ms outro) when the cap is hit or the market slips back under 7%.
   Pieces: a 10px marching hazard frame on the viewport edges · two rotating beacon lamps in the
   top corners · a strip that slides out from under the header · a riveted plate with a mechanical
   counter (rolling digits) under the header · the DEFCON lamp ladder on the right edge (desktop).
   Motion is driven by four custom properties the JS writes on .al-root (and on the strip):
     --al-ph   stripe phase in px     --al-rot  beacon angle in deg
     --al-beat 0..1 pulse             --al-k    0..1 intensity (0 = 5% away, 1 = 1% away)
   so the speed can change continuously without the jump a changed animation-duration causes.
   State classes on .al-root: al-armed · al-out (outro) · al-hit (cap reached) · al-hot (<1.5%)
   · al-off (layer switched off with the A key) · al-paused (tab hidden). */

.al-root{
  position:fixed;inset:0;z-index:44;pointer-events:none;overflow:hidden;
  font-family:var(--body,'Archivo',system-ui,sans-serif);color:var(--ink,#121212);
  --al-ph:0px;--al-rot:0deg;--al-beat:1;--al-k:0;--al-top:0px;
}
.al-root.al-off,.al-strip.al-off{display:none!important}
.al-paused *{animation-play-state:paused!important}
.al-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the frame: four edges of marching tape ---------- */
.al-edge{
  position:absolute;
  background:repeating-linear-gradient(-45deg,var(--ink) 0 10px,var(--orange) 10px 20px);
  background-position:var(--al-ph) 0;
  /* a thin dark seam on the inside so the tape reads as stuck on, not painted on */
  box-shadow:inset 0 0 0 1px rgba(18,18,18,.55);
  transition:transform .38s cubic-bezier(.2,1.2,.3,1);
}
.al-edge-t{left:0;right:0;top:0;height:10px;transform:scaleY(0);transform-origin:50% 0}
.al-edge-b{left:0;right:0;bottom:0;height:10px;transform:scaleY(0);transform-origin:50% 100%;transition-delay:.06s}
.al-edge-l{left:0;top:10px;bottom:10px;width:10px;transform:scaleX(0);transform-origin:0 50%;transition-delay:.12s}
.al-edge-r{right:0;top:10px;bottom:10px;width:10px;transform:scaleX(0);transform-origin:100% 50%;transition-delay:.18s}
.al-armed .al-edge{transform:none}
.al-out .al-edge{transition:transform .45s cubic-bezier(.6,0,.85,.3);transition-delay:0s}
.al-out .al-edge-t,.al-out .al-edge-b{transform:scaleY(0)}
.al-out .al-edge-l,.al-out .al-edge-r{transform:scaleX(0)}
/* under 1.5% the tape goes yellow: the last stretch */
.al-hot .al-edge{background-image:repeating-linear-gradient(-45deg,var(--ink) 0 10px,var(--yellow) 10px 20px)}

/* ---------- the beacons: a lamp dome in each top corner and a rotating two-blade beam ---------- */
.al-klaxon{
  position:absolute;top:-180px;width:360px;height:360px;border-radius:50%;
  opacity:0;transition:opacity .4s ease-out;
  /* soft falloff so the beam is a wash of light, not a hard wedge */
  -webkit-mask:radial-gradient(circle,#000 0,rgba(0,0,0,.65) 38%,transparent 70%);
          mask:radial-gradient(circle,#000 0,rgba(0,0,0,.65) 38%,transparent 70%);
}
.al-klaxon-l{left:-180px}
.al-klaxon-r{right:-180px}
.al-armed .al-klaxon{opacity:calc(.16 + .22 * var(--al-k))}
.al-out .al-klaxon{opacity:0;transition:opacity .35s ease-in}
.al-beam{
  position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,var(--orange) 0 16deg,transparent 16deg 180deg,var(--orange) 180deg 196deg,transparent 196deg 360deg);
  transform:rotate(var(--al-rot));
  will-change:transform;
}
.al-klaxon-r .al-beam{transform:rotate(calc(var(--al-rot) * -1))}
.al-dome{
  position:absolute;top:10px;width:30px;height:30px;background:#8e938f;border:3px solid var(--ink);
  opacity:0;transform:scale(0);transition:transform .35s cubic-bezier(.3,1.5,.5,1) .2s,opacity .2s .2s;
}
.al-dome-l{left:10px;border-left:0;border-top:0;border-radius:0 0 100% 0;transform-origin:0 0}
.al-dome-r{right:10px;border-right:0;border-top:0;border-radius:0 0 0 100%;transform-origin:100% 0}
.al-dome::after{
  content:"";position:absolute;inset:4px;background:var(--orange);
  border-radius:inherit;opacity:calc(.35 + .65 * var(--al-beat));
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.25);
}
.al-dome-l::after{inset:0 4px 4px 0}
.al-dome-r::after{inset:0 0 4px 4px}
.al-armed .al-dome{opacity:1;transform:scale(1)}
.al-out .al-dome{opacity:0;transform:scale(0);transition:transform .3s ease-in,opacity .2s .1s}
.al-hot .al-dome::after{background:var(--yellow)}

/* ---------- the plate: under the header, centred ---------- */
.al-plate{
  position:absolute;left:50%;top:calc(var(--al-top) + 42px);
  width:min(440px,calc(100vw - 32px));
  background:var(--ink);color:#fff;border:3px solid var(--orange);
  box-shadow:6px 6px 0 var(--orange-d),0 22px 30px -16px rgba(0,0,0,.65);
  padding:16px 16px 14px;
  transform:translate(-50%,-160%) rotate(-1.6deg);opacity:0;
  transition:transform .55s cubic-bezier(.2,1.25,.3,1) .16s,opacity .18s linear .16s,border-color .3s;
  will-change:transform;
}
.al-plate::before{ /* hazard band along the top edge */
  content:"";position:absolute;left:0;right:0;top:0;height:8px;
  background:repeating-linear-gradient(-45deg,var(--ink) 0 8px,var(--yellow) 8px 16px);
}
.al-armed .al-plate{transform:translate(-50%,0) rotate(0deg);opacity:1}
.al-out .al-plate{
  transform:translate(-50%,-150%) rotate(1.2deg);opacity:0;
  transition:transform .6s cubic-bezier(.6,0,.85,.3),opacity .45s ease-in .2s;
}
.al-hot .al-plate{border-color:var(--yellow);box-shadow:6px 6px 0 var(--orange),0 22px 30px -16px rgba(0,0,0,.65)}
.al-rivet{
  position:absolute;width:10px;height:10px;border-radius:50%;background:#9ea39f;border:2px solid #000;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.55);
}
.al-rivet:nth-child(1){left:6px;top:12px}
.al-rivet:nth-child(2){right:6px;top:12px}
.al-rivet:nth-child(3){left:6px;bottom:6px}
.al-rivet:nth-child(4){right:6px;bottom:6px}

.al-plate-top{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px}
.al-kick{
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.al-kick b{color:#fff}
.al-hot .al-kick{color:var(--orange)}
/* the warning triangle, drawn (no emoji colour surprises) */
.al-tri{
  position:relative;flex:none;width:18px;height:16px;background:var(--yellow);
  clip-path:polygon(50% 0,100% 100%,0 100%);
  opacity:calc(.3 + .7 * var(--al-beat));
}
.al-tri::after{
  content:"!";position:absolute;left:0;right:0;bottom:0;text-align:center;
  font-family:var(--stencil);font-weight:900;font-size:13px;line-height:13px;color:var(--ink);
}

/* the counter: a window of rolling digit columns */
.al-num{
  display:flex;align-items:flex-start;justify-content:center;margin:8px 0 2px;
  font-family:var(--stencil);font-weight:900;font-size:clamp(46px,12vw,76px);line-height:1;color:var(--yellow);
}
.al-cur{font-size:.55em;color:var(--orange);margin:.12em .08em 0 0}
.al-digits{
  display:flex;position:relative;padding:0 .08em;
  background:#1c1d1c;border:2px solid #3a3d3b;
  /* the roller sits in a slot: shadow on the top and bottom lips */
  box-shadow:inset 0 12px 10px -8px #000,inset 0 -12px 10px -8px #000;
}
.al-dg{position:relative;width:.6em;height:1em;overflow:hidden;transition:opacity .3s}
.al-dg.ghost{opacity:.2}
.al-col{
  position:absolute;left:0;top:0;width:100%;
  transition:transform .55s cubic-bezier(.25,.9,.2,1);will-change:transform;
}
.al-snap .al-col{transition:none}
.al-col i{display:block;height:1em;line-height:1;text-align:center;font-style:normal}
.al-sep{position:relative;width:.22em;height:1em;transition:opacity .3s}
.al-sep.ghost{opacity:.2}
.al-sep::after{
  content:"";position:absolute;left:50%;bottom:.08em;width:.11em;height:.22em;
  background:currentColor;transform:translateX(-50%) skewX(-14deg);
}
.al-hot .al-num{color:#fff}

.al-sub{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;color:var(--steel-2);text-transform:uppercase;letter-spacing:.04em;
}
.al-sub b{color:var(--yellow);font-weight:600}
.al-sub .al-dot{color:var(--orange)}

/* the band: 7% on the left, the cap on the right, the fill is how deep into the band we are */
.al-band{position:relative;height:14px;margin:22px 0 0;border:2px solid var(--steel-2);background:#2a2c2b}
.al-band-fill{
  position:absolute;left:0;top:0;bottom:0;width:0;
  background:repeating-linear-gradient(-45deg,var(--orange) 0 6px,var(--orange-d) 6px 12px);
  transition:width .6s cubic-bezier(.2,.8,.2,1);
}
.al-hot .al-band-fill{background:repeating-linear-gradient(-45deg,var(--yellow) 0 6px,#e6b60f 6px 12px)}
.al-band-ticks{position:absolute;left:-2px;right:-2px;top:-16px;height:14px;font-family:var(--mono);font-size:9px;color:var(--mute)}
.al-band-ticks span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.al-band-ticks span::after{content:"";position:absolute;left:50%;top:12px;width:1px;height:5px;background:var(--mute)}
.al-band-ticks span:first-child{transform:none}
.al-band-ticks span:first-child::after{left:0}
.al-band-ticks span:last-child{transform:translateX(-100%);color:var(--yellow);font-weight:600}
.al-band-ticks span:last-child::after{left:auto;right:0}

/* HIT: the stamp that lands as the plate leaves */
.al-stamp{
  position:absolute;left:50%;top:50%;z-index:2;
  font-family:var(--stencil);font-weight:900;font-size:clamp(64px,18vw,112px);line-height:1;letter-spacing:.04em;
  color:var(--yellow);border:6px solid var(--yellow);padding:0 .12em;background:rgba(18,18,18,.82);
  transform:translate(-50%,-50%) rotate(-8deg) scale(2.6);opacity:0;pointer-events:none;
}
.al-hit .al-stamp{animation:al-stamp .26s cubic-bezier(.2,1,.3,1) forwards}
@keyframes al-stamp{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(2.6)}
  70%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(.94)}
  100%{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}
}
.al-hit .al-num,.al-hit .al-sub,.al-hit .al-band{opacity:.35;transition:opacity .25s}

/* ---------- the header strip: slides out from UNDER the sticky header ---------- */
.top .al-strip{
  position:absolute;left:0;right:0;top:calc(100% + 3px);height:28px;z-index:-1;
  background:var(--ink);color:var(--yellow);overflow:hidden;
  transform:translateY(-100%);opacity:0;
  transition:transform .32s cubic-bezier(.2,1.2,.3,1) .1s,opacity .15s .1s;
  --al-beat:1;
}
.top .al-strip::before,.top .al-strip::after{
  content:"";position:absolute;top:0;bottom:0;width:30px;
  background:repeating-linear-gradient(-45deg,var(--ink) 0 8px,var(--yellow) 8px 16px);
}
.top .al-strip::before{left:0}
.top .al-strip::after{right:0}
.top .al-strip.on{transform:none;opacity:1}
.top .al-strip.out{transform:translateY(-100%);opacity:0;transition:transform .45s cubic-bezier(.6,0,.85,.3),opacity .3s ease-in .1s}
.al-strip-in{
  display:flex;align-items:center;justify-content:center;gap:8px;height:100%;padding:0 36px;
  font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.al-strip-in b{color:#fff;font-weight:600}
.al-strip-in em{
  font-style:normal;font-family:var(--body);font-weight:800;font-size:10px;letter-spacing:.1em;
  background:var(--orange);color:#fff;padding:2px 6px;margin-left:4px;
}
.al-strip.hot{color:#fff}
.al-strip.hot .al-strip-in em{background:var(--yellow);color:var(--ink)}
.al-strip .al-tri{width:14px;height:12px}
.al-strip .al-tri::after{font-size:10px;line-height:10px}

/* ---------- DEFCON: the lamp ladder on the right edge (desktop only) ---------- */
.al-defcon{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);width:56px;
  display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 8px;
  background:var(--plate);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  transition:border-color .3s,box-shadow .3s;
}
.al-armed .al-defcon{border-color:var(--orange-d);box-shadow:4px 4px 0 var(--orange)}
.al-dc-title{font-size:8px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.al-dc-level{
  width:36px;height:34px;display:grid;place-items:center;
  font-family:var(--stencil);font-weight:900;font-size:28px;line-height:1;background:var(--ink);color:#fff;
  transition:background .25s,color .25s;
}
.al-dc-level.l4,.al-dc-level.l3{background:var(--orange-d)}
.al-dc-level.l2{background:var(--orange)}
.al-dc-level.l1{background:var(--yellow);color:var(--ink)}
.al-dc-level.flip{animation:al-flip .3s cubic-bezier(.3,1.5,.5,1)}
@keyframes al-flip{0%{transform:scale(1.6) rotate(-6deg)}60%{transform:scale(.92)}100%{transform:scale(1)}}
.al-dc-lamps{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.al-lamp{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px}
.al-lamp span{font-family:var(--mono);font-size:9px;font-weight:600;color:var(--ink-2);line-height:1}
.al-lens{
  position:relative;width:28px;height:28px;border-radius:50%;background:#8e938f;border:3px solid var(--ink);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.4);
}
.al-lens::before{ /* the glass */
  content:"";position:absolute;inset:3px;border-radius:50%;background:#3a3d3b;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.45),inset -2px -2px 0 rgba(0,0,0,.25);
  transition:background .3s;
}
.al-lamp.dropping .al-lens::before{background:var(--orange);animation:al-blink .9s steps(2,start) infinite}
.al-lamp.open .al-lens::before{background:var(--yellow)}
.al-lamp.cracked .al-lens::before{background:var(--won)}
@keyframes al-blink{50%{background:#5a2d1c}}
/* the next vault: a ring that breathes; slow on its own, driven by the beat once armed */
.al-lamp.next .al-lens::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;border:3px solid var(--orange);
  animation:al-halo 2.4s ease-in-out infinite;
}
.al-armed .al-lamp.next .al-lens::after{animation:none;opacity:var(--al-beat)}
.al-hot .al-lamp.next .al-lens::after{border-color:var(--yellow)}
@keyframes al-halo{0%,100%{opacity:.15}50%{opacity:1}}
.al-lamp.next span{color:var(--orange-d)}
.al-dc-foot{font-size:8px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-top:2px}
@media (max-width:899px){.al-defcon{display:none}}

/* ---------- reduced motion: a static frame, no beams, no pulse ---------- */
@media (prefers-reduced-motion:reduce){
  .al-root{--al-beat:1}
  .al-klaxon{display:none}
  .al-lamp.next .al-lens::after{opacity:1}
  .al-lamp.dropping .al-lens::before{animation:none}
  .al-armed .al-edge{transform:none}
  .al-armed .al-plate{transform:translate(-50%,0);opacity:1}
  .al-out .al-plate{opacity:0}
}

/* phones: the plate shrinks to a slim counter strip so it never covers the page (GK saw it eat half the screen) */
@media (max-width:600px){
  .al-plate{width:auto;max-width:calc(100vw - 32px);padding:10px 12px 8px;box-shadow:4px 4px 0 var(--orange-d)}
  .al-plate::before{height:5px}
  .al-rivet{display:none}
  .al-plate-top{gap:6px;margin-top:2px}
  .al-kick{font-size:10px;letter-spacing:.08em}
  .al-num{font-size:34px;margin:4px 0 0}
  .al-sub,.al-band{display:none}
  .al-klaxon{display:none}
}