/* /gotcha/: where browsers land after grabbing bait (.env, backup.zip, wp-login...). Party, clowns, kazoos. */
body.gotcha{min-height:100vh;min-height:100dvh;overflow-x:hidden;
  background:radial-gradient(80% 60% at 50% 30%,rgb(var(--acc) / .14),transparent 70%),
             radial-gradient(60% 50% at 15% 85%,rgb(255 60 170 / .12),transparent 70%),
             radial-gradient(60% 50% at 85% 80%,rgb(80 170 255 / .12),transparent 70%),rgb(var(--bg))}

/* ---- the sky full of hacker clowns ---------------------------------------------------------- */
/* the sky floats ABOVE the page so balloons can be popped anywhere; only the balloons catch pointers,
   every other tap falls through to the terminal, video and buttons underneath */
.sky{position:fixed;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.cl{position:absolute;left:var(--x);bottom:-260px;width:calc(110px * var(--s));animation:rise var(--dur) linear var(--delay) infinite}
.cl > svg{display:block;width:100%;height:auto;overflow:visible;animation:sway calc(var(--dur) / 5) ease-in-out infinite alternate}
.cl.fall{animation:fall 1.4s cubic-bezier(.5,0,1,1) forwards}
@keyframes rise{to{transform:translateY(calc(-100vh - 520px))}}
@keyframes sway{from{transform:rotate(-6deg) translateX(-12px)}to{transform:rotate(6deg) translateX(12px)}}
@keyframes fall{to{transform:translateY(120vh) rotate(160deg);opacity:.2}}
.bl{cursor:pointer;transform-box:fill-box;transform-origin:center;pointer-events:auto;touch-action:none}
.bl-hit{pointer-events:all}
.bl:hover .bl-b{filter:brightness(1.25)}
.bl.pop{animation:pop .22s ease-out forwards;pointer-events:none}
@keyframes pop{40%{transform:scale(1.35)}to{transform:scale(1.8);opacity:0}}
.burst{position:fixed;z-index:5;pointer-events:none;font:700 22px var(--mono);color:#fff;text-shadow:0 0 12px rgb(255 60 170)}
.burst{animation:burst .7s ease-out forwards}
@keyframes burst{from{transform:translate(-50%,-50%) scale(.6)}to{transform:translate(-50%,-140%) scale(1.3);opacity:0}}

/* ---- center stage ------------------------------------------------------------------------------ */
.gc{position:relative;z-index:2;display:grid;justify-items:center;gap:22px;width:min(920px,100%);margin:0 auto;
  padding:clamp(24px,7vh,72px) 16px 60px;pointer-events:none}
.gc > *{pointer-events:auto}
.gc-win{width:min(640px,100%);background:rgb(var(--bg) / .92)}
.gc-term{margin:0;min-height:9.5em;padding:16px 18px;font:500 13.5px/1.6 var(--mono);color:rgb(var(--fg));white-space:pre-wrap;word-break:break-word}
.gc-term .ok{color:rgb(var(--acc))}
.gc-term .big{display:inline-block;margin-top:6px;font-weight:700;font-size:18px;color:rgb(var(--acc));text-shadow:0 0 18px rgb(var(--acc) / .8)}
.gc-h{position:relative;margin:0;text-align:center;font:800 clamp(30px,7vw,72px)/1.02 var(--mono);letter-spacing:-.02em;color:#fff;
  text-shadow:0 0 30px rgb(var(--acc) / .7);animation:slam .5s cubic-bezier(.2,1.6,.4,1)}
.gc-h::before,.gc-h::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none}
.gc-h::before{color:rgb(255 60 170);transform:translate(3px,0);mix-blend-mode:screen;animation:gl1 1.6s steps(2,end) infinite}
.gc-h::after{color:rgb(80 200 255);transform:translate(-3px,0);mix-blend-mode:screen;animation:gl2 1.3s steps(2,end) infinite reverse}
@keyframes slam{from{transform:scale(2.4);opacity:0}}
@keyframes gl1{0%,100%{clip-path:inset(0 0 70% 0)}50%{clip-path:inset(55% 0 10% 0)}}
@keyframes gl2{0%,100%{clip-path:inset(60% 0 5% 0)}50%{clip-path:inset(10% 0 60% 0)}}
.gc-vid{display:grid;justify-items:center;gap:10px;width:min(760px,100%)}
.gc-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:2px solid rgb(var(--acc) / .6);
  box-shadow:0 0 0 6px rgb(var(--bg) / .7),0 30px 80px -20px #000,0 0 60px -10px rgb(var(--acc) / .6);background:#000}
.gc-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.gc-sound{appearance:none;padding:10px 18px;border-radius:11px;cursor:pointer;font:600 14px var(--mono);color:rgb(var(--bg));
  background:rgb(var(--acc));border:0;box-shadow:0 0 24px -4px rgb(var(--acc) / .8)}
.gc-sound:hover{filter:brightness(1.1)}
.gc-note{margin:0;text-align:center;font:500 13px/1.7 var(--mono);color:rgb(var(--fg) / .85);
  padding:10px 16px;border-radius:10px;background:rgb(var(--bg) / .8)}
.gc-note a{color:rgb(var(--acc))}
.gc-hint{font-size:12px;color:rgb(var(--dim))}
@media (prefers-reduced-motion:reduce){.gc-h::before,.gc-h::after{animation:none}.cl > svg{animation:none}}
.gc-term .gc-press{display:inline-block;margin-top:8px;color:rgb(var(--warn));animation:gcblink 1s steps(1) infinite}
@keyframes gcblink{50%{opacity:0}}
/* popped balloons spill eggplants: up, out, then down past the bottom of the screen */
.egg{position:fixed;z-index:5;pointer-events:none;font-size:var(--sz);line-height:1;transform:translate(-50%,-50%);
  animation:eggx var(--t) linear forwards,eggy var(--t) cubic-bezier(.45,-0.6,.9,.5) forwards}
@keyframes eggx{to{margin-left:var(--dx);rotate:var(--rot)}}
@keyframes eggy{to{margin-top:calc(100vh + 120px)}}
/* phones: tighter stage so more sky (and more balloons) show */
@media (max-width:600px){
  .gc{gap:14px;padding-top:14px}
  .gc-term{min-height:0;padding:12px 14px;font-size:12px}
  .gc-term .big{font-size:16px}
  .gc-sound{padding:12px 20px}
  .burst{font-size:26px}
}