/* ==========================================================================
   THE QUARANTINE POST — master.css
   Plain CSS, no build step. Edit this file directly.

   CONTENTS
     1. Base
     2. Layout — terminal output, command entry, logo
     3. CRT screen effects — scanlines, flicker, text shadow, boot fade
     4. Logo states
     5. Easter eggs
     6. Mobile
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");

/* ==========================================================================
   1. Base
   ========================================================================== */

* {
  font-family: "VT323", monospace;
  color: #00ff00;
}

body {
  background-color: black;
  margin: 0;
  padding: 0;
}

input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
}

/* ==========================================================================
   2. Layout — terminal output, command entry, logo
   ========================================================================== */

.crt,
.screen {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  position: absolute;
}

#output {
  padding: 0 20px 50px 20px;
}

#output p {
  font-size: 1.5em;
}

/* The ">>" prompt and command input, pinned to the bottom */
.entry {
  width: 100%;
  margin: 0;
  padding: 0;
  position: fixed;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: row;
  background-color: black;
  border-top: 2px #00ff00 solid;
  z-index: 0;
}

.entry p {
  width: 5%;
  margin: 0;
  padding: 0;
  padding-right: 10px;
  padding-top: 10px;
  text-align: right;
  font-size: 1.5em;
}

.entry input {
  margin: 0;
  padding: 0;
  width: 90%;
  height: 40px;
  background-color: black;
  border-style: none;
  font-size: 1.5em;
  text-transform: uppercase;
}

.entry input::selection {
  background: blue; /* WebKit/Blink Browsers */
}

.entry input::-moz-selection {
  background: blue; /* Gecko Browsers */
}

.logo {
  width: 100vw;
  height: 80vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* boot sequence: logo shows, then fades out (see fade-out-logo) */
  opacity: 0;
  animation: fade-out-logo 2s linear;
}

.logo img {
  width: auto;
  height: 60vh;
}

/* ==========================================================================
   3. CRT screen effects — scanlines, flicker, text shadow, boot fade
   ========================================================================== */

.crt {
  animation: textShadow 3s infinite;
}

/* Scanline crosshatching overlay */
.crt::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  z-index: 2;
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
}

/* Full-screen flicker overlay */
.crt::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

/* Terminal UI fades in on boot */
#output,
.entry {
  animation: fade-in-ui 2s linear;
}

@keyframes flicker {
  0% { opacity: 0.84103; }
  5% { opacity: 0.66517; }
  10% { opacity: 0.39364; }
  15% { opacity: 0.33132; }
  20% { opacity: 0.62935; }
  25% { opacity: 0.21251; }
  30% { opacity: 0.46146; }
  35% { opacity: 0.03635; }
  40% { opacity: 0.64056; }
  45% { opacity: 0.54583; }
  50% { opacity: 0.69578; }
  55% { opacity: 0.97555; }
  60% { opacity: 0.4168; }
  65% { opacity: 0.93382; }
  70% { opacity: 0.31396; }
  75% { opacity: 0.44127; }
  80% { opacity: 0.51917; }
  85% { opacity: 0.75901; }
  90% { opacity: 0.55425; }
  95% { opacity: 0.7459; }
  100% { opacity: 0.21367; }
}

@keyframes textShadow {
  0% { text-shadow: 0.43899px 0 1px rgba(0, 30, 255, 0.5), -0.43899px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  5% { text-shadow: 2.7929px 0 1px rgba(0, 30, 255, 0.5), -2.7929px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  10% { text-shadow: 0.02956px 0 1px rgba(0, 30, 255, 0.5), -0.02956px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  15% { text-shadow: 0.40219px 0 1px rgba(0, 30, 255, 0.5), -0.40219px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  20% { text-shadow: 3.4794px 0 1px rgba(0, 30, 255, 0.5), -3.4794px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  25% { text-shadow: 1.61256px 0 1px rgba(0, 30, 255, 0.5), -1.61256px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  30% { text-shadow: 0.70156px 0 1px rgba(0, 30, 255, 0.5), -0.70156px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  35% { text-shadow: 3.89691px 0 1px rgba(0, 30, 255, 0.5), -3.89691px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  40% { text-shadow: 3.87091px 0 1px rgba(0, 30, 255, 0.5), -3.87091px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  45% { text-shadow: 2.23106px 0 1px rgba(0, 30, 255, 0.5), -2.23106px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  50% { text-shadow: 0.08084px 0 1px rgba(0, 30, 255, 0.5), -0.08084px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  55% { text-shadow: 2.37585px 0 1px rgba(0, 30, 255, 0.5), -2.37585px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  60% { text-shadow: 2.20219px 0 1px rgba(0, 30, 255, 0.5), -2.20219px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  65% { text-shadow: 2.86388px 0 1px rgba(0, 30, 255, 0.5), -2.86388px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  70% { text-shadow: 0.48874px 0 1px rgba(0, 30, 255, 0.5), -0.48874px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  75% { text-shadow: 1.89485px 0 1px rgba(0, 30, 255, 0.5), -1.89485px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  80% { text-shadow: 0.0833px 0 1px rgba(0, 30, 255, 0.5), -0.0833px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  85% { text-shadow: 0.0977px 0 1px rgba(0, 30, 255, 0.5), -0.0977px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  90% { text-shadow: 3.44334px 0 1px rgba(0, 30, 255, 0.5), -3.44334px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  95% { text-shadow: 2.18418px 0 1px rgba(0, 30, 255, 0.5), -2.18418px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
  100% { text-shadow: 2.62088px 0 1px rgba(0, 30, 255, 0.5), -2.62088px 0 1px rgba(255, 0, 80, 0.3), 0 0 3px; }
}

@keyframes fade-out-logo {
  0% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes fade-in-ui {
  0% { opacity: 0; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* ==========================================================================
   4. Logo states
   ========================================================================== */

/* Occasional ghost-flicker of the logo (applied by JS after boot) */
.flicker {
  animation: random-logo-flicker 36s infinite;
}

/* Always-on logo (>>LOGO, >>CIGARETTES) */
.superlogo {
  opacity: 0.5 !important;
}

@keyframes random-logo-flicker {
  0% { opacity: 0; }
  80% { opacity: 0; }
  85% { opacity: 0.2; }
  90% { opacity: 0; }
  92% { opacity: 0; }
  93% { opacity: 0.15; }
  97% { opacity: 0.2; }
  100% { opacity: 0; }
}

/* ==========================================================================
   5. Easter eggs
   ========================================================================== */

.blue {
  color: #0040ff;
}

/* >>CORRUPT */
.corrupt * {
  color: #ff0000;
  border-color: #ff0000;
}

.corrupt * img {
  filter: hue-rotate(236deg) saturate(9);
}

/* Information Overload endgame */
.boring * {
  color: black !important;
  background-color: white !important;
  font-family: serif !important;
}

.flashing {
  animation: flash 0.1s infinite;
}

@keyframes flash {
  0% { opacity: 0.3; }
  50% { opacity: 1; }
  100% { opacity: 0.3; }
}

/* ==========================================================================
   6. Mobile
   ========================================================================== */

@media screen and (max-width: 500px) {
  .logo {
    width: 100vw;
    height: 60vh;
  }

  .logo img {
    height: 40vh;
  }
}