/* kenker.gay — neon prank, hacky terminal vibes, druk en flashy */
:root{
  --bg:#07070c;
  --green:#4ade80;
  --neon:#39ff88;
  --ink:#eafff2;
  --mono:ui-monospace,"JetBrains Mono",SFMono-Regular,Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--mono);
  overflow:hidden;height:100dvh;
  touch-action:manipulation;
}

/* fullscreen video-achtergrond */
#bg{
  position:fixed;inset:0;width:100vw;height:100dvh;object-fit:cover;z-index:0;
  filter:saturate(1.35) contrast(1.08);
}
.haze{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(7,7,12,.82) 0%, rgba(7,7,12,.45) 42%, rgba(7,7,12,.18) 70%),
    linear-gradient(rgba(7,7,12,.25), rgba(7,7,12,.25));
}
/* scanlines voor de terminal-vibe */
.haze::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 4px);
  mix-blend-mode:multiply;
}
/* pride-glow: zacht draaiende regenboogwaas over de video */
.haze::before{
  content:"";position:absolute;inset:-40%;
  background:conic-gradient(from 0deg,
    rgba(255,95,86,.16), rgba(255,189,46,.16), rgba(255,225,77,.16),
    rgba(74,222,128,.16), rgba(86,182,194,.16), rgba(138,125,255,.16),
    rgba(232,106,178,.16), rgba(255,95,86,.16));
  animation:spinhue 14s linear infinite;
  mix-blend-mode:screen;
}
@keyframes spinhue{to{transform:rotate(360deg)}}
/* regenboog-rand om het hele scherm */
body::after{
  content:"";position:fixed;inset:0;z-index:4;pointer-events:none;
  border:4px solid transparent;
  background:linear-gradient(90deg,#ff5f56,#ffbd2e,#ffe14d,#4ade80,#56b6c2,#8a7dff,#e86ab2,#ff5f56) border-box;
  background-size:400% 100%;
  -webkit-mask:linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:flow 6s linear infinite;
  opacity:.8;filter:drop-shadow(0 0 10px rgba(232,106,178,.5));
}
#confetti{position:fixed;inset:0;z-index:2;pointer-events:none}

main{
  position:fixed;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:20px;
}
.pre{
  color:var(--green);font-size:clamp(.8rem,3.4vw,1rem);opacity:.92;
  text-shadow:0 0 8px rgba(74,222,128,.6);
  margin-bottom:10px;word-break:break-all;
}
.pre .host{color:#56b6c2}
h1{
  font-size:clamp(3rem,14vw,7rem);line-height:1;font-weight:800;
  text-transform:lowercase;letter-spacing:-.02em;
  background:linear-gradient(90deg,#ff5f56,#ffbd2e,#ffe14d,#4ade80,#56b6c2,#8a7dff,#e86ab2,#ff5f56);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:flow 3s linear infinite;
  filter:drop-shadow(0 0 18px rgba(255,255,255,.28));
  word-break:break-all;max-width:94vw;
}
@keyframes flow{to{background-position:300% 0}}
.msg{
  margin-top:14px;font-size:clamp(1.1rem,5vw,1.8rem);font-weight:700;
  text-shadow:0 2px 14px rgba(0,0,0,.9);
}
.msg em{color:#ffe14d;font-style:italic}
.kk{
  display:inline-block;margin-top:4px;
  font-size:clamp(1.6rem,8vw,3rem);font-weight:800;letter-spacing:.04em;
  background:linear-gradient(90deg,#e86ab2,#ff5f56,#ffbd2e,#ffe14d,#4ade80,#56b6c2,#8a7dff,#e86ab2);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:flow 2s linear infinite reverse, pulse 1.2s ease-in-out infinite;
  filter:drop-shadow(0 0 14px rgba(232,106,178,.55));
}
@keyframes pulse{50%{transform:scale(1.06) rotate(-1.2deg)}}
.ok{
  margin-top:16px;font-size:clamp(1rem,4.2vw,1.3rem);font-weight:800;
  background:linear-gradient(90deg,#4ade80,#56b6c2,#8a7dff,#e86ab2,#ffe14d,#4ade80);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:flow 2.6s linear infinite, blinkok 2.2s steps(1) infinite;
  filter:drop-shadow(0 0 10px rgba(57,255,136,.65));
}
@keyframes blinkok{50%{opacity:.6}}
.hint{
  margin-top:26px;color:rgba(234,255,242,.55);font-size:.78rem;letter-spacing:.1em;
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateY(4px)}}

footer{
  position:fixed;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;justify-content:center;gap:2px;
  padding:10px 0 calc(env(safe-area-inset-bottom) + 10px);
  font-size:.85rem;font-weight:700;
}
.brand{
  background:linear-gradient(90deg,#ff5f56,#ffbd2e,#ffe14d,#4ade80,#56b6c2,#8a7dff,#e86ab2,#ff5f56);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:flow 4s linear infinite;
  filter:drop-shadow(0 0 8px rgba(255,255,255,.3));
}
.cursor{animation:blink 1.1s steps(1) infinite;color:var(--neon)}
@keyframes blink{50%{opacity:0}}

@media (prefers-reduced-motion: reduce){
  h1,.kk,.ok,.hint,.cursor{animation:none}
}