/* Neon Nightmare homepage: minimal. Black, the eye logo, one glitching slogan, three boxes. */
:root { --cyan: #22E6F2; --pink: #FF2BD6; --mono: "Space Mono", ui-monospace, monospace; }
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: #000; color: #EDEBFF; overflow-x: clip; }
body { min-height: 100vh; display: flex; flex-direction: column; font-family: var(--mono); }
main { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: clamp(2.5rem, 7vh, 5rem) clamp(1.25rem, 4vw, 2.5rem) 3rem; }
img { display: block; max-width: 100%; height: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- hero ---------- */
.hero { text-align: center; }
.hero__logo { position: relative; margin: 0 auto; width: min(440px, 84vw); }
.hero__logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 14px rgba(255,43,214,.35)); }
/* Blink: lids sit over the almond eye opening, positioned in % so they scale with the logo.
   Frame 0..4 = lids 22% .. 100% closed; the NEON/NIGHTMARE lettering is cut out of every frame. */
.eyelids {
  position: absolute; left: 28.1333%; top: 33.7559%; width: 56.1333%; height: 30.0317%;
  background: url("assets/eye-blink.png") 0 0 / 100% 500% no-repeat;
  background-image: image-set("assets/eye-blink.webp" type("image/webp"), "assets/eye-blink.png" type("image/png"));
  opacity: 0; pointer-events: none;
}
.eyelids[data-f] { opacity: 1; }
.eyelids[data-f="1"] { background-position-y: 25%; }
.eyelids[data-f="2"] { background-position-y: 50%; }
.eyelids[data-f="3"] { background-position-y: 75%; }
.eyelids[data-f="4"] { background-position-y: 100%; }

/* ---------- slogan + glitch ---------- */
.slogan { margin: 1.5rem 0 0; height: 2.2em; font-size: clamp(1.1rem, 3.2vw, 1.75rem); font-weight: 700; }
.slogan__text {
  position: relative; display: inline-block; text-transform: uppercase; letter-spacing: .28em; padding-left: .28em;
  color: #7ff6ff; text-shadow: 0 0 6px rgba(34,230,242,.9), 0 0 18px rgba(34,230,242,.6), 0 0 36px rgba(34,230,242,.3);
}
.slogan__text::before, .slogan__text::after {
  content: attr(data-text); position: absolute; inset: 0; padding-left: .28em; opacity: 0; pointer-events: none;
}
.slogan__text.is-glitching { animation: jitter .12s steps(2) infinite; text-shadow: -3px 0 var(--pink), 3px 0 var(--cyan); }
.slogan__text.is-glitching::before { opacity: .9; color: var(--pink); background: #000; animation: slice-a .18s steps(1) infinite; }
.slogan__text.is-glitching::after  { opacity: .9; color: var(--cyan); background: #000; animation: slice-b .22s steps(1) infinite; }
.slogan__text.is-nightmare { color: #ff6fe6; text-shadow: 0 0 6px rgba(255,43,214,.95), 0 0 18px rgba(255,43,214,.7), 0 0 40px rgba(255,43,214,.35); }
@keyframes jitter { 0% { transform: translate(0); } 50% { transform: translate(-2px, 1px) skewX(-6deg); } }
@keyframes slice-a { 0% { clip-path: inset(10% 0 60% 0); transform: translateX(-6px); } 50% { clip-path: inset(55% 0 20% 0); transform: translateX(5px); } }
@keyframes slice-b { 0% { clip-path: inset(65% 0 5% 0); transform: translateX(7px); } 50% { clip-path: inset(5% 0 75% 0); transform: translateX(-4px); } }

/* ---------- boxes ---------- */
.boxes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); margin-top: clamp(2.5rem, 6vh, 4rem); }
.box {
  --neon: var(--cyan);
  position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden;
  background: #070709; border: 1px solid var(--neon);
  box-shadow: 0 0 10px color-mix(in srgb, var(--neon) 45%, transparent), inset 0 0 22px color-mix(in srgb, var(--neon) 10%, transparent);
}

/* spray-painted COMING SOON: hot pink, overspray + runs */
.spray {
  position: relative; display: block; text-align: center; transform: rotate(-9deg);
  font-family: "Rubik Wet Paint", system-ui, sans-serif; text-transform: uppercase;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: .92;
  color: var(--pink);
  text-shadow: 0 0 1px #fff, 0 0 6px rgba(255,43,214,.9), 0 0 18px rgba(255,43,214,.6), 0 0 38px rgba(255,43,214,.35);
}
.spray::before { /* overspray haze + speckle */
  content: ""; position: absolute; inset: -18% -14%; z-index: -1;
  background:
    radial-gradient(circle at 8% 30%, rgba(255,43,214,.9) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 92% 66%, rgba(255,43,214,.9) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 18% 86%, rgba(255,43,214,.75) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 14%, rgba(255,43,214,.8) 0 2px, transparent 3px),
    radial-gradient(ellipse 48% 42% at 50% 50%, rgba(255,43,214,.18), transparent 75%);
}
.spray::after { /* drips running off the paint */
  content: ""; position: absolute; left: 16%; top: 94%; width: 68%; height: 44px;
  background:
    linear-gradient(var(--pink), var(--pink)) 6% 0 / 4px 70% no-repeat,
    linear-gradient(var(--pink), var(--pink)) 38% 0 / 3px 40% no-repeat,
    linear-gradient(var(--pink), var(--pink)) 70% 0 / 5px 95% no-repeat,
    linear-gradient(var(--pink), var(--pink)) 93% 0 / 3px 55% no-repeat;
  -webkit-mask: linear-gradient(#000 70%, transparent); mask: linear-gradient(#000 70%, transparent);
  filter: drop-shadow(0 0 4px var(--pink));
}
.box:nth-child(2) .spray { transform: rotate(-6deg); }
.box:nth-child(3) .spray { transform: rotate(-12deg); }

/* ---------- footer ---------- */
.footer { text-align: center; padding: 1.5rem 1rem 2rem; font-size: .8rem; letter-spacing: .08em; }
.footer a { color: #6f6c86; text-decoration: none; }
.footer a:hover, .footer a:focus-visible { color: var(--cyan); }

@media (max-width: 720px) {
  .boxes { grid-template-columns: 1fr; max-width: 340px; margin-inline: auto; }
  .box { aspect-ratio: 5 / 4; }
  .spray { font-size: clamp(2.4rem, 12vw, 3.2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .slogan__text, .slogan__text::before, .slogan__text::after { animation: none !important; }
  .eyelids { display: none; }
}

/* footer tease */
.footer-tease{display:block;margin-bottom:.4em;color:#FF1F8E;opacity:.85;letter-spacing:.12em;text-transform:uppercase;font-size:.8em}
.footer a{color:#22E6F2;opacity:.9}