@import url("root/variables.css");
@import url("root/global.css");

@import url("effects/crt.css");
@import url("effects/glitchin.css");
@import url("effects/links.css");

@import url("layout/headerfooter.css");

/* ======================================================
   BASE
====================================================== */

body {
  min-height: 100vh;
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  color: #cfd9df;
  filter: contrast(1.05) saturate(0.92);
}


/* ======================================================
   NUMBERS STATION
====================================================== */

.numbers {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;

  padding: 3rem;
  font-size: 0.75rem;
  font-family: monospace;
  letter-spacing: 0.2em;
  white-space: pre-wrap;
  color: rgba(160,210,220,0.25);
}

.numbers::before {
  content:
    "17 03 91 44 08\n"
    "61 22 09 73 55\n"
    "04 19 88 02 67\n"
    "71 60 13 45 99";
}

/* ======================================================
   INTERROGATION CHAIR
====================================================== */

.chair {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 1;
  pointer-events: none;

  width: 300px;
  height: 400px;
  transform: translateX(-50%);
  opacity: 0.35;

  background: radial-gradient(
    ellipse at center,
    rgba(0,0,0,0.55),
    transparent 70%
  );
}

/* ======================================================
   TITLE
====================================================== */

.title {
  position: relative;
  margin-bottom: 2.8rem;

  font-size: 4.6rem;
  letter-spacing: var(--letter-spacing-wide);
  color: #b8e6ff;

  text-shadow:
    0 0 4px rgba(140,200,255,0.18),
    0 0 8px rgba(140,200,255,0.12),
    2px 2px 0 #000;
}

.title.active {
  animation: title-glow 3s ease-in-out infinite alternate;
}

@keyframes title-glow {
  from {
    text-shadow: 0 0 4px rgba(140,200,255,0.18);
  }
  to {
    text-shadow:
      0 0 10px rgba(39,225,250,0.8),
      0 0 20px rgba(39,225,250,0.5);
  }
}

/* ======================================================
   MENU
====================================================== */

.menu {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 6rem;
}

/* ======================================================
  START UP SCREEN
====================================================== */

.start-up-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;

  background: #000;
  opacity: 1;
}

.start-up-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.25;

  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.05) 1px,
    transparent 1px,
    transparent 4px
  );
}

.start-up-screen.sweep::after {
  opacity: 1;
  animation: scan-sweep 0.6s linear forwards;
}

@keyframes scan-sweep {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100%); }
}