/* ============================================================
   YEET MODE — Konami-code easter egg
   Isolated on purpose: everything here is scoped under body.yeet-mode
   or its own fixed-position elements, so it can't leak into or break
   the normal site, and can be deleted wholesale without side effects.
   ============================================================ */

/* ---------- glitch / blackout transition ---------- */
#ym-glitch{
  position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(0deg,rgba(255,0,80,.12) 0 2px,transparent 2px 4px),
             repeating-linear-gradient(90deg,rgba(0,255,220,.10) 0 2px,transparent 2px 4px);
  mix-blend-mode:screen;
}
#ym-glitch.show{animation:ymGlitch .55s steps(6) forwards}
@keyframes ymGlitch{
  0%{opacity:0;transform:translate(0,0)}
  15%{opacity:1;transform:translate(-6px,2px)}
  30%{opacity:1;transform:translate(5px,-3px)}
  45%{opacity:1;transform:translate(-3px,4px)}
  60%{opacity:1;transform:translate(6px,0)}
  80%{opacity:.6;transform:translate(-2px,-2px)}
  100%{opacity:0;transform:translate(0,0)}
}

#ym-blackout{
  position:fixed;inset:0;z-index:199;background:#000;opacity:0;
  pointer-events:none;transition:opacity .25s ease;
  display:flex;align-items:center;justify-content:center;
}
#ym-blackout.show{opacity:1;pointer-events:auto}

#ym-term{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(13px,2.2vw,20px);letter-spacing:.08em;
  color:#F5FF00;text-align:left;white-space:pre-wrap;
  text-shadow:0 0 14px rgba(245,255,0,.6);
  min-height:3.2em;
}
#ym-term .cursor{display:inline-block;width:.55em;height:1em;background:#F5FF00;
  vertical-align:-2px;animation:ymBlink 1s steps(2) infinite}
@keyframes ymBlink{50%{opacity:0}}

/* ---------- the transformed site ---------- */
#ym-grid{
  /* A perspective-warped "floor" version of this collapsed to a ~30px sliver
     at the very bottom of the viewport — the rotateX+scale math pushed most
     of the element's box off-screen, so on a normal-height window it was
     essentially invisible. Flat and full-viewport reads reliably instead. */
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;
  transition:opacity .8s ease;
  background-image:
    linear-gradient(rgba(245,255,0,.20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,255,0,.20) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse 75% 75% at 50% 100%, rgba(0,0,0,.9), transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 100%, rgba(0,0,0,.9), transparent 100%);
}
body.yeet-mode #ym-grid{opacity:1;animation:ymGridDrift 3.5s linear infinite}
@keyframes ymGridDrift{from{background-position:0 0}to{background-position:0 46px}}

body.yeet-mode .mark{
  filter:invert(1) grayscale(1) contrast(2) drop-shadow(0 0 6px rgba(245,255,0,.9));
  transition:filter .6s ease;
}

/* margin notes */
.ym-note{
  position:fixed;z-index:2;pointer-events:none;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;
  letter-spacing:.08em;color:rgba(245,255,0,.38);
  opacity:0;transition:opacity 1.2s ease;
  max-width:220px;line-height:1.5;
}
body.yeet-mode .ym-note.show{opacity:1}
.ym-note.a{top:22%;left:10px}
.ym-note.b{top:52%;right:10px;text-align:right}
.ym-note.c{bottom:14%;left:10px}
@media(max-width:900px){.ym-note{display:none}}

/* ---------- achievement toast ---------- */
#ym-toast{
  position:fixed;left:22px;bottom:22px;z-index:60;
  display:flex;align-items:center;gap:12px;
  background:rgba(6,6,6,.94);border:1px solid #F5FF00;padding:14px 18px;
  transform:translateY(140%);transition:transform .5s cubic-bezier(.2,.9,.2,1);
  box-shadow:0 0 30px rgba(245,255,0,.15);
}
#ym-toast.show{transform:translateY(0)}
#ym-toast img{width:26px;height:auto;flex:none}
#ym-toast .tt{font-family:"IBM Plex Mono",monospace}
#ym-toast .tt b{display:block;color:#F5FF00;font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;margin-bottom:3px}
#ym-toast .tt span{display:block;color:#EDEDED;font-size:12px}

/* ---------- exit pill ---------- */
#ym-exit{
  /* sits below the header row, not in it — the header already has nav and
     the "tested before launch" badge fighting for the same right-hand
     corner, and top:16px landed exactly on top of that badge. */
  position:fixed;top:68px;right:16px;z-index:60;
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:#F5FF00;border:1px solid #F5FF00;
  background:rgba(6,6,6,.85);padding:9px 14px;cursor:pointer;
  opacity:0;pointer-events:none;transition:opacity .4s ease, background .2s;
}
body.yeet-mode #ym-exit{opacity:1;pointer-events:auto}
#ym-exit:hover{background:#F5FF00;color:#000}
@media(max-width:640px){#ym-exit{top:auto;bottom:16px;right:16px}}