/* ============================================================
   escapethematrix.live
   palette: void black, matrix green, alert red, aged paper
   ============================================================ */

:root {
  --green: #00ff41;
  --green-dim: #00b32d;
  --green-deep: #003b12;
  --red: #ff1f1f;
  --red-deep: #8a0d0d;
  --paper: #e8e0c8;
  --ink: #2a2419;
  --void: #050605;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--void);
  color: #d6ffe0;
  font-family: 'Share Tech Mono', monospace;
  overflow-x: hidden;
  line-height: 1.5;
}

/* ---------- matrix rain (fixed backdrop) ---------- */
#rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.55;
  pointer-events: none;
}

/* ---------- section scaffolding ---------- */
.section {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8vh 6vw;
}

h1, h2 { font-weight: normal; letter-spacing: 0.02em; }

.kicker {
  color: var(--green-dim);
  letter-spacing: 0.4em;
  font-size: clamp(0.7rem, 2vw, 0.9rem);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
}

.lead, .sub {
  max-width: 60ch;
  margin: 1.5rem auto 0;
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  color: #a9c9b3;
}
.lead em, .sub em { color: var(--green); font-style: normal; }

.mega {
  font-family: 'VT323', monospace;
  font-size: clamp(2.4rem, 9vw, 6rem);
  line-height: 1;
  color: var(--green);
  margin: 1.5rem 0;
  text-shadow: 0 0 18px rgba(0, 255, 65, 0.5);
}

/* ---------- HERO ---------- */
.hero h1 {
  font-family: 'VT323', monospace;
  font-size: clamp(4rem, 18vw, 12rem);
  line-height: 0.9;
  color: #fff;
  text-shadow: 0 0 24px rgba(0, 255, 65, 0.7);
}

.pills {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 3rem;
}

.pill {
  cursor: pointer;
  border: none;
  border-radius: 999px;
  padding: 1rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-family: 'Share Tech Mono', monospace;
  color: #fff;
  transition: transform 0.15s ease, box-shadow 0.25s ease;
  min-width: 200px;
}
.pill:hover { transform: translateY(-4px) scale(1.03); }
.pill:active { transform: translateY(0) scale(0.99); }
.pill-label { font-size: 1.1rem; letter-spacing: 0.15em; }
.pill-sub { font-size: 0.7rem; opacity: 0.8; letter-spacing: 0.05em; }

.pill-red {
  background: radial-gradient(circle at 30% 30%, #ff5a5a, var(--red-deep));
  box-shadow: 0 0 28px rgba(255, 31, 31, 0.55), inset 0 0 10px rgba(255,255,255,0.3);
}
.pill-red:hover { box-shadow: 0 0 44px rgba(255, 31, 31, 0.85); }

.pill-blue {
  background: radial-gradient(circle at 30% 30%, #6aa8ff, #0a2e6e);
  box-shadow: 0 0 28px rgba(40, 110, 255, 0.5), inset 0 0 10px rgba(255,255,255,0.3);
}
.pill-blue:hover { box-shadow: 0 0 44px rgba(40, 110, 255, 0.8); }

.scroll-hint {
  margin-top: 4rem;
  color: var(--green-dim);
  font-size: 1.5rem;
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(10px); opacity: 1; } }

/* ---------- glitch text effect ---------- */
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.glitch::before { left: 2px; text-shadow: -2px 0 var(--red); animation: glitchA 2.6s infinite linear alternate-reverse; }
.glitch::after  { left: -2px; text-shadow: -2px 0 var(--green); animation: glitchB 2s infinite linear alternate-reverse; }
.glitch-red::before { text-shadow: -2px 0 var(--red); }
@keyframes glitchA {
  0% { clip-path: inset(20% 0 60% 0); } 20% { clip-path: inset(80% 0 5% 0); }
  40% { clip-path: inset(40% 0 40% 0); } 60% { clip-path: inset(10% 0 75% 0); }
  80% { clip-path: inset(60% 0 20% 0); } 100% { clip-path: inset(30% 0 50% 0); }
}
@keyframes glitchB {
  0% { clip-path: inset(70% 0 10% 0); } 25% { clip-path: inset(15% 0 70% 0); }
  50% { clip-path: inset(45% 0 35% 0); } 75% { clip-path: inset(5% 0 85% 0); }
  100% { clip-path: inset(55% 0 25% 0); }
}

/* ---------- CORKBOARD ---------- */
.corkboard {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,31,31,0.10), transparent 60%),
    repeating-linear-gradient(45deg, #221a10 0 6px, #2a2013 6px 12px),
    #1c150c;
}
.board-veil {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}
.heading-warn {
  font-family: 'VT323', monospace;
  font-size: clamp(2rem, 7vw, 4.5rem);
  color: #fff;
  text-shadow: 0 0 18px rgba(255,31,31,0.5);
}

.board {
  position: relative;
  margin-top: 3.5rem;
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}
.note {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Special Elite', monospace;
  padding: 1.2rem 1.1rem;
  width: clamp(130px, 24vw, 180px);
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(0.85rem, 2.4vw, 1.05rem);
  line-height: 1.25;
  box-shadow: 4px 8px 18px rgba(0,0,0,0.6);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.note::before { /* pushpin */
  content: "";
  position: absolute;
  top: -8px; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff7a7a, var(--red-deep));
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.note:hover { transform: scale(1.06) rotate(0deg) !important; box-shadow: 6px 12px 26px rgba(0,0,0,0.75); z-index: 5; }
.n1 { transform: rotate(-4deg); } .n2 { transform: rotate(3deg); }
.n3 { transform: rotate(-2deg); background: #fff7d6; } .n4 { transform: rotate(5deg); }
.n5 { transform: rotate(-3deg); } .n6 { transform: rotate(2deg); }
.n7 { transform: rotate(-5deg); } .n8 { transform: rotate(4deg); background: #fff7d6; }
.n9 { transform: rotate(-1deg); }
.n10 { transform: rotate(3deg); background: #1c150c; color: var(--red); font-weight: bold; letter-spacing: 0.15em; border: 1px solid var(--red-deep); }

/* ---------- TWIST ---------- */
.twist { background: linear-gradient(180deg, #1c150c, var(--void)); }

/* ---------- TERMINAL ---------- */
.terminal-sec { background: var(--void); }
.terminal {
  width: min(760px, 92vw);
  background: rgba(2, 12, 4, 0.92);
  border: 1px solid var(--green-deep);
  border-radius: 8px;
  box-shadow: 0 0 60px rgba(0, 255, 65, 0.18), inset 0 0 80px rgba(0, 255, 65, 0.04);
  text-align: left;
  overflow: hidden;
  position: relative;
}
.terminal::after { /* scanlines */
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.18) 2px 4px);
  pointer-events: none;
}
.term-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 0.7rem 1rem;
  background: #021006;
  border-bottom: 1px solid var(--green-deep);
  color: var(--green-dim);
  font-size: 0.8rem;
}
.term-bar .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--green-deep); }
.term-bar em { margin-left: auto; font-style: normal; opacity: 0.7; }
.term-text {
  padding: 1.5rem;
  font-family: 'Share Tech Mono', monospace;
  font-size: clamp(0.92rem, 2.4vw, 1.15rem);
  color: var(--green);
  white-space: pre-wrap;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.4);
  min-height: 16rem;
}
.cursor {
  display: inline-block;
  color: var(--green);
  margin-left: -1.2rem;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- DOOR ---------- */
.door h2 {
  font-family: 'VT323', monospace;
  font-size: clamp(2rem, 7vw, 4rem);
  color: #fff;
}
.cta {
  display: inline-block;
  margin-top: 2.5rem;
  padding: 1rem 3rem;
  border: 1px solid var(--green);
  border-radius: 4px;
  color: var(--green);
  text-decoration: none;
  letter-spacing: 0.25em;
  font-size: clamp(1rem, 3vw, 1.3rem);
  transition: all 0.25s ease;
  text-shadow: 0 0 8px rgba(0,255,65,0.5);
}
.cta:hover {
  background: var(--green);
  color: #000;
  box-shadow: 0 0 40px rgba(0, 255, 65, 0.7);
  text-shadow: none;
}
.whiterabbit { margin-top: 3rem; color: var(--green-dim); opacity: 0.6; font-size: 0.9rem; }

/* ---------- FOOTER ---------- */
footer {
  position: relative; z-index: 1;
  padding: 2.5rem 6vw;
  display: flex; flex-direction: column; gap: 0.6rem;
  align-items: center; text-align: center;
  border-top: 1px solid var(--green-deep);
  color: var(--green-dim);
  font-size: 0.85rem;
  background: var(--void);
}
.footer-verse { opacity: 0.7; max-width: 50ch; }

/* ---------- BLUE PILL EASTER EGG ---------- */
.bluescreen {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(4, 10, 30, 0.97);
  display: none; align-items: center; justify-content: center;
  padding: 8vw;
}
.bluescreen:not([hidden]) { display: flex; }
.bluescreen-inner { max-width: 50ch; text-align: center; }
.bluescreen-inner p {
  color: #bcd0ff; font-size: clamp(1.1rem, 3.5vw, 1.6rem);
  margin-bottom: 2.5rem; line-height: 1.6;
}

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glitch::before, .glitch::after, .scroll-hint { animation: none; }
  .reveal { transition: opacity 0.4s ease; transform: none; }
  .cursor { animation: none; }
}

/* ---------- small screens ---------- */
@media (max-width: 520px) {
  .pills { flex-direction: column; align-items: stretch; }
  .pill { min-width: 0; }
  .note { width: clamp(120px, 40vw, 150px); }
}