/* base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(1200px 800px at 70% 20%, #101010 0%, #0b0b0b 40%, #070707 100%);
  color: #e8e8e8;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .02em;
}



/* layout */
.frame {
  height: 100%;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
}

.monolith {
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  align-items: center;
  justify-items: center;
}

/* traffic light post */
.post {
  width: min(35vmin, 220px);
  max-width: 240px;
  aspect-ratio: 3/7.5;
  background: linear-gradient(#0d0d0d, #0a0a0a);
  border-radius: 22px;
  position: relative;
  box-shadow:
    inset 0 0 0 2px #0f0f0f,
    inset 0 12px 60px rgba(255,255,255,0.04),
    0 30px 80px rgba(0,0,0,.66);
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  gap: clamp(6px, 1.5vmin, 10px);
  padding: clamp(6px, 1.5vmin, 12px);
}


/* little visor on top for drama */
.hood {
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  width: 45%; height: 14px; border-radius: 12px 12px 2px 2px;
  background: linear-gradient(#0f0f0f, #090909);
  box-shadow: 0 6px 12px rgba(0,0,0,.5);
}

/* lights */
.lens {
  border-radius: 50%;
  position: relative;
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.7),
    0 0 0 2px #0f0f0f,
    0 15px 50px rgba(0,0,0,.7);
  transition: filter .6s ease, box-shadow .6s ease, background .6s ease, transform .6s ease;
}

/* sizes */
.lens { width: 72%; aspect-ratio: 1/1; justify-self: center; }


/* default (dim) colors */
.red   { background: radial-gradient(circle at 48% 38%, rgba(255,255,255,.08), transparent 40%), #3a0b0b; }
.amber { background: radial-gradient(circle at 48% 38%, rgba(255,255,255,.08), transparent 40%), #3a2a05; }
.green { background: radial-gradient(circle at 48% 38%, rgba(255,255,255,.08), transparent 40%), #0a2e17; }

/* ON states (glow added via .on classes from JS) */
.red.on {
  background-color: #a81515;
  box-shadow:
    inset 0 0 22px rgba(0,0,0,.6),
    0 0 0 2px #181818,
    0 0 70px 16px rgba(255, 62, 62, .22),
    0 25px 80px rgba(0,0,0,.75);
  filter: drop-shadow(0 0 12px rgba(255,62,62,.4)) saturate(1.05);
}
.amber.on {
  background-color: #8f6a00;
  box-shadow:
    inset 0 0 22px rgba(0,0,0,.6),
    0 0 0 2px #181818,
    0 0 55px 14px rgba(255, 191, 0, .18),
    0 25px 80px rgba(0,0,0,.75);
  filter: drop-shadow(0 0 10px rgba(255,191,0,.35)) saturate(1.05);
  animation: idle 7s ease-in-out infinite;
}
.green.on {
  background-color: #0ba84d;
  box-shadow:
    inset 0 0 22px rgba(0,0,0,.6),
    0 0 0 2px #181818,
    0 0 85px 20px rgba(28,255,115,.28),
    0 25px 90px rgba(0,0,0,.75);
  filter: drop-shadow(0 0 16px rgba(28,255,115,.5)) saturate(1.1) brightness(1.05);
  animation: pulse 2.8s ease-in-out infinite;
}

/* meta */
.meta {
  text-align: center;
  max-width: 640px;
}
#brand {
  margin: 0;
  font-size: clamp(20px, 5.2vw, 42px);
  letter-spacing: .22em;
}
#desc {
  margin: .6rem 0 0;
  opacity: .8;
}
.cta a {
  display: inline-block;
  margin-top: .8rem;
  padding: .54rem .9rem;
  border-radius: 14px;
  background: #161616;
  color: #eaeaea;
  text-decoration: none;
  border: 1px solid #262626;
}
.cta a:hover { transform: translateY(-1px); }

/* stamp */
.stamp { margin-top: .35rem; opacity: .38; font-size: .95rem; }

/* screen reader text */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* anims */
@keyframes pulse { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-2px) } }
@keyframes idle  { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(1px) } }


/* ================= GLITCH INTRO (cryptic) ================= */

#intro {
  position: fixed;
  inset: 0;
  display: flex;              /* ✅ use flexbox */
  flex-direction: column;     /* stack glitch + start-hint + bootlog */
  align-items: center;        /* center horizontally */
  justify-content: center;    /* center vertically */
  background: #050505;
  z-index: 9999;
  overflow: hidden;
}
#intro .scan {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
  mix-blend-mode: overlay;
  animation: scan 2.2s linear infinite;
}
@keyframes scan { to { transform: translateY(100%); } }

#intro .glitch {
  font: 700 clamp(30px, 10vw, 80px)/1 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  letter-spacing: .2em;
  color: #eaeaea;
  margin-bottom: 2rem; 
  position: relative;
  animation: glitchSkew 1.2s infinite alternate;
}
#intro .glitch::before,
#intro .glitch::after {
  content: attr(data-txt);
  position: absolute; left: 0; top: 0;
}
#intro .glitch::before { color: #0cff9b; clip-path: inset(0 0 50% 0); transform: translate(2px, -1px); mix-blend-mode: screen; }
#intro .glitch::after  { color: #ffd24a; clip-path: inset(50% 0 0 0); transform: translate(-2px, 1px); mix-blend-mode: screen; }

@keyframes glitchSkew {
  0%  { transform: skew(0deg); }
  40% { transform: skew(1.2deg); }
  60% { transform: skew(-1.2deg); }
  80% { transform: skew(.6deg); }
  100%{ transform: skew(0deg); }
}
/* occasional hard cuts */
#intro .glitch { animation: glitchSkew 1.2s ease-in-out infinite, glitchSlice 1.8s steps(2, end) infinite; }
@keyframes glitchSlice {
  0% { clip-path: inset(0 0 0 0); }
  49% { clip-path: inset(0 0 0 0); }
  50% { clip-path: polygon(0 15%,100% 12%,100% 42%,0 45%); transform: translateX(-2px); }
  51% { clip-path: inset(0 0 0 0); transform: translateX(0); }
}

/* ================= BOOT LOG ================= */


.bootlog {
  display: none; /* 🚫 hidden by default */
  margin-top: 2rem;
  width: fit-content;
  max-width: 80%;
  padding: 0.8rem 1rem;
  background: rgba(0,0,0,0.65);   /* darker box behind text */
  border-radius: 6px;
  box-shadow: 0 0 18px rgba(0,0,0,0.6); /* soft shadow to cut through static */
}

#bootText {
  font-family: "Courier New", monospace;
  font-size: clamp(12px, 2vw, 16px);
  white-space: pre-wrap;   /* ✅ ensures \n breaks into lines */
  line-height: 1.4;
  text-align: center;      /* ✅ centers the text itself */
}

.taxi-animation img,
.taxi-drive {
  width: clamp(60px, 15vw, 400px); /* ✅ smaller range */
  margin: 0.5rem auto;
  display: block;
  filter: drop-shadow(0 0 6px rgba(255, 191, 0, 0.5));
}

#bootText {
  color: #00ff9d; /* brighter green */
  text-shadow: 0 0 6px rgba(0,255,157,0.9),
               0 0 12px rgba(0,255,157,0.7),
               0 0 20px rgba(0,255,157,0.5);
}
#tvStatic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* put it behind the text */
}
.bootlog::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,157,0.08) 0px,
    rgba(0,255,157,0.08) 1px,
    transparent 2px,
    transparent 4px
  );
  pointer-events: none;
  mix-blend-mode: overlay;
}

/* ================= NIGHT CITY BACKGROUND ================= */
.frame .monolith {
  position: relative;
  overflow: hidden; /* hides streaks moving out of bounds */
  background: linear-gradient(rgba(13,13,13,0.95), rgba(10,10,10,0.95));
}


.frame .monolith::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to right,
    rgba(255, 255, 0, 0.6) 0 4px,  /* bright yellow test streaks */
    transparent 4px 60px
  );
  animation: cityLights 4s linear infinite; /* faster movement so it’s obvious */
  opacity: 0.6;   /* brighter */
  z-index: -1;
  filter: blur(1px);
}

@keyframes cityLights {
  from { transform: translateX(0); }
  to   { transform: translateX(-400px); }
}


.frame .monolith::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to right,
    rgba(0, 200, 255, 0.25) 0 2px,  /* bluish taillights */
    transparent 2px 60px
  );
  animation: cityLights 12s linear infinite reverse; /* opposite flow */
  z-index: -1;
  filter: blur(3px);
}

/* "CLICK ANYWHERE TO START" hint */
.start-hint {
  margin-top: 5rem; /* ⬆️ was 1.2rem, now more spacing */
  padding: 0.4rem 0.8rem;
  background: rgba(0,0,0,0.8);
  border: 1px solid rgba(12,255,155,0.4);
  border-radius: 6px;

  font-family: "Courier New", monospace;
  font-size: clamp(14px, 2vw, 18px);
  color: #0cff9b;
  text-shadow: 0 0 6px rgba(12, 255, 155, 0.8);
  letter-spacing: 0.1em;

  opacity: 0.85;
  animation: blink 1.2s steps(2, start) infinite;
  text-align: center;
}


@keyframes blink {
  0%   { opacity: 0.85; }
  50%  { opacity: 0; }
  100% { opacity: 0.85; }
}


#desc {
  margin: 0.8rem 0 0;
  font-size: clamp(14px, 2.8vw, 18px);
  font-weight: 300;
  opacity: 0.95;
}

.hint {
  margin-top: 0.6rem;
  font-size: clamp(14px, 2.2vw, 17px);
  font-family: "Courier New", monospace;
  opacity: 0.85;
}

.status-green {
  color: #0cff9b;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(12, 255, 155, 0.6);
}

.call-number {
  display: inline-block;         /* ✅ keeps it on one line */
  margin-left: 0.4rem;
  padding: 0.15rem 0.4rem;
  background: #ffd24a;           /* gold highlight */
  color: #000;                   /* contrast text */
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease;
}

.call-number:hover {
  background: #fff;
  color: #000;
}
.easter-egg {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.95);
  color: #0cff9b;
  font-family: "Courier New", monospace;
  display: none; /* hidden by default */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  text-align: center;
  padding: 2rem;
  text-shadow: 0 0 6px rgba(12,255,155,0.8);
}

.easter-egg h2 {
  margin-bottom: 1rem;
  letter-spacing: 0.15em;
}

.easter-egg .highlight {
  color: #ffd24a;
  font-weight: bold;
}

.easter-egg .secret {
  margin-top: 1rem;
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 10px #0cff9b, 0 0 20px #0cff9b;
}

.easter-egg button {
  margin-top: 2rem;
  background: #0cff9b;
  border: none;
  color: black;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border-radius: 6px;
  font-weight: bold;
}