/* ============================================================
   SPLASH — the "super-unique" entry page.
   Hand-made, dense, slightly chaotic homage to webcurios.co.uk,
   filtered through a pen-plotter / CRT-terminal aesthetic.
   ============================================================ */
html,body{height:100%;overflow:hidden;background:#05050a;cursor:crosshair}
#bg{position:fixed;inset:0;z-index:0}
#bg canvas{display:block}

/* scanline + vignette overlay */
.crt{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0px,rgba(0,0,0,.16) 1px,transparent 2px,transparent 3px),
    radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.75) 100%);
  mix-blend-mode:multiply;
}

.stage{position:fixed;inset:0;z-index:3}

/* ---- giant glitch title ---- */
.title-block{
  position:absolute;top:6%;left:50%;transform:translateX(-50%);
  text-align:center;width:96%;
}
.glitch{
  font-family:"Courier New",monospace;font-weight:bold;
  font-size:clamp(2.6rem,11vw,8rem);line-height:.9;letter-spacing:.02em;
  color:#F7EB23;text-transform:uppercase;position:relative;
  text-shadow:3px 0 #013ABB,-3px 0 #8F080E;
  animation:flick 4s infinite steps(1);
}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;left:0;top:0;width:100%;
}
.glitch::before{color:#013ABB;transform:translate(-3px,2px);opacity:.7;clip-path:inset(0 0 55% 0);animation:gl 2.3s infinite linear alternate}
.glitch::after{color:#8F080E;transform:translate(3px,-2px);opacity:.7;clip-path:inset(60% 0 0 0);animation:gl 1.7s infinite linear alternate-reverse}
@keyframes gl{0%{clip-path:inset(0 0 80% 0)}50%{clip-path:inset(50% 0 20% 0)}100%{clip-path:inset(70% 0 5% 0)}}
@keyframes flick{0%,97%,100%{opacity:1}98%{opacity:.5}}
.subtitle{
  font-family:"Courier New",monospace;color:#e8e4d8;margin-top:.6rem;
  font-size:clamp(.7rem,2vw,1rem);letter-spacing:.35em;text-transform:uppercase;
}

/* ---- scattered, draggable-looking note cards ---- */
.note{
  position:absolute;max-width:230px;
  font-family:"Courier New",monospace;font-size:.74rem;color:#0a0a0a;
  background:#F7EB23;padding:.6rem .7rem;
  box-shadow:5px 5px 0 rgba(0,0,0,.55);
  border:1px solid #000;
}
.note.blue{background:#013ABB;color:#F7EB23;border-color:#F7EB23}
.note.paper{background:#e8e4d8;color:#111}
.note .nh{font-weight:bold;text-transform:uppercase;display:block;margin-bottom:.25rem;letter-spacing:.05em}
.note a{color:inherit;text-decoration:underline}

.n1{top:30%;left:4%;transform:rotate(-5deg)}
.n2{top:62%;left:7%;transform:rotate(3deg)}
.n3{top:26%;right:4%;transform:rotate(4deg)}
.n4{top:58%;right:5%;transform:rotate(-4deg)}
.n5{bottom:13%;left:50%;transform:translateX(-50%) rotate(-1deg)}
.note:hover{transform:scale(1.05) rotate(0deg);z-index:9;transition:transform .12s}

/* ---- marquee ---- */
.marquee{
  position:absolute;bottom:0;left:0;width:100%;overflow:hidden;
  background:#000;border-top:2px solid #F7EB23;border-bottom:2px solid #F7EB23;
  white-space:nowrap;z-index:4;
}
.marquee span{
  display:inline-block;padding:.4rem 0;font-family:"Courier New",monospace;
  color:#F7EB23;font-size:.8rem;letter-spacing:.15em;
  animation:scroll 28s linear infinite;
}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---- ENTER portal ---- */
.enter{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:"Courier New",monospace;font-weight:bold;
  font-size:clamp(1.1rem,4vw,2rem);color:#05050a;background:#F7EB23;
  padding:.7rem 2.2rem;border:3px solid #000;cursor:pointer;
  box-shadow:0 0 0 4px #013ABB, 8px 8px 0 rgba(0,0,0,.6);
  text-transform:uppercase;letter-spacing:.1em;text-decoration:none;
  animation:pulse 1.6s infinite ease-in-out;
}
.enter:hover{background:#013ABB;color:#F7EB23;border-color:#F7EB23}
@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}

.cred{position:absolute;bottom:2.4rem;left:50%;transform:translateX(-50%);
  font-family:"Courier New",monospace;color:#666;font-size:.7rem;text-align:center;z-index:4}

@media(max-width:720px){
  .note{font-size:.66rem;max-width:42vw}
  .n1,.n2,.n3,.n4{display:none}
}