@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@400;600&display=swap');

:root {
  --phosphor: #7fff6e;   /* CRT green */
  --pale: #daffb3;       /* text highlight */
  --amber: #ffd89c;
  --dark: #0a0f0a;
}

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

html, body {
  height: 100%;
  font-family: 'Oxanium', monospace;
  background: transparent;   /* was var(--dark) */
  color: var(--pale);
  overflow: hidden;
}

/* static background tone */
#crt-bg {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    #183918 0%,        /* brighter center */
    #102310 45%,
    #060a06 100%
  );
  background-color: #0a0f0a;
  z-index: 0;            /* sit at bottom but above transparent body */
}

/* scanlines overlay */
.scanlines {
  pointer-events: none;
  position: fixed;
  top:0;left:0;width:100%;height:100%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.04) 0,
    rgba(255,255,255,0.04) 1px,
    transparent 2px,
    transparent 3px
  );
  opacity: 0.1;
  z-index: 10;
}

/* analog distortion video overlay */
#analog {
  position: fixed;
  inset: 0;                     /* shorthand for top/right/bottom/left: 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2147483647;          /* max possible without plugins */
  pointer-events: none;         /* still lets users click */
  mix-blend-mode: soft-light;   /* switch to screen if you prefer */
  opacity: 0.5;
  filter: contrast(140%) brightness(120%);
}

/* boot-up overlay */
#boot {
  position: fixed;
  top:0;left:0;
  width:100%;height:100%;
  background:#0a0f0a;
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:left;
  z-index:50;
}

.boottext {
  color: var(--phosphor);
  font-family: 'Oxanium', monospace;
  font-size: 0.9rem;
  line-height: 1.4;
  white-space: pre;
  text-align: left;
  padding: 2rem;
  width: 80%;           /* ⬅ add this */
  max-width: 420px;     /* ⬅ add this */
  animation: typein 3s steps(30) 0.3s forwards;
  overflow: hidden;
}

@keyframes typein {
  from { width: 0; }
  to { width: 100%; }
}

.hidden { opacity: 0; }
.fadein { animation: fadeIn 1.5s forwards; }
.fadeout { animation: fadeOut 1s forwards; }

@keyframes fadeIn {
  from { opacity:0; transform:scale(0.97); }
  to { opacity:1; transform:scale(1); }
}
@keyframes fadeOut {
  from { opacity:1; }
  to { opacity:0; }
}

/* main UI */
main {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  height:100vh;
  text-align:center;
  padding:1rem;
  position:relative;
  z-index:20;
}

.logo {
  width:110px;
  opacity:0.9;
  filter:drop-shadow(0 0 6px var(--phosphor));
}

h1 {
  color:var(--phosphor);
  margin-top:0.5rem;
  text-shadow:0 0 8px var(--phosphor);
  letter-spacing:2px;
  animation: glowpulse 3s ease-in-out infinite;
}
@keyframes glowpulse {
  0%,100% { text-shadow:0 0 4px var(--phosphor); }
  50% { text-shadow:0 0 12px var(--phosphor); }
}

.tag {
  font-size:0.85rem;
  letter-spacing:1px;
  color:var(--amber);
  margin-bottom:1.5rem;
}

nav {
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  width:90%;
  max-width:320px;
}

a {
  border:1px solid var(--phosphor);
  padding:0.6rem 1rem;
  text-decoration:none;
  color:var(--pale);
  background:rgba(10,15,10,0.6);
  transition:0.25s;
  letter-spacing:1px;
  text-transform:uppercase;
}
a:hover {
  background:var(--phosphor);
  color:var(--dark);
  box-shadow:0 0 10px var(--phosphor);
}

#contact {
  margin-top: 2rem;
  width: 90%;
  max-width: 400px;
  text-align: left;
  font-size: 0.8rem;
  color: var(--amber);
}

#contact h2 {
  text-align: center;
  color: var(--phosphor);
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

#contact label {
  display: block;
  margin-bottom: 1rem;
}

#contact input,
#contact textarea {
  width: 100%;
  background: rgba(10,15,10,0.7);
  border: 1px solid var(--phosphor);
  color: var(--pale);
  padding: 0.5rem;
  font-family: 'Oxanium', monospace;
  font-size: 0.9rem;
  resize: vertical;
}

#contact button {
  display: block;
  width: 100%;
  background: var(--phosphor);
  color: var(--dark);
  border: none;
  padding: 0.6rem;
  font-family: 'Oxanium', monospace;
  font-size: 0.9rem;
  cursor: pointer;
  transition: 0.2s;
}

#contact button:hover {
  background: var(--amber);
  color: var(--dark);
  box-shadow: 0 0 10px var(--phosphor);
}

/* subtle vignette glow */
#vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483646; /* just under the overlay */
  background: radial-gradient(circle at center,
    rgba(0, 255, 0, 0) 0%,
    rgba(0, 64, 0, 0.1) 60%,
    rgba(0, 0, 0, 0.6) 100%);
  mix-blend-mode: multiply;
}

/* Curved CRT glass warp — heavy variant */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483647;
  
  /* pronounced edge darkening + center bloom */
  background:
    radial-gradient(circle at center,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.03) 35%,
      rgba(0,0,0,0.25) 85%,
      rgba(0,0,0,0.6) 100%);
  
  /* optical distortions */
  backdrop-filter: 
    contrast(110%) brightness(108%) saturate(120%)
    blur(0.4px);
  transform: perspective(1000px) scale(1.002) 
             translateZ(0) rotateX(0.8deg) rotateY(-0.4deg);
  
  /* simulate curvature corners */
  mask-image: radial-gradient(circle at center, 
    rgba(0,0,0,1) 70%, rgba(0,0,0,0.9) 90%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at center, 
    rgba(0,0,0,1) 70%, rgba(0,0,0,0.9) 90%, transparent 100%);
  
  border-radius: 6px;
  box-shadow: 
    inset 0 0 20px rgba(0, 255, 100, 0.05),
    inset 0 0 60px rgba(0, 255, 100, 0.05);
}

/* Subtle animated noise shimmer */
@keyframes noiseJitter {
  0%,100% { background-position: 0 0; }
  25%     { background-position: 20px 10px; }
  50%     { background-position: -15px 25px; }
  75%     { background-position: 10px -20px; }
}

.noise {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.025;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiBmaWxsPSJibGFjayIvPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHg9IjAiIHk9IjAiIGZpbGw9IndoaXRlIiBvcGFjaXR5PSIwLjMiLz48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4PSI1IiB5PSIxIiBmaWxsPSJ3aGl0ZSIgb3BhY2l0eT0iMC4zIi8+PHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgeD0iOSIgeT0iNiIgZmlsbD0id2hpdGUiIG9wYWNpdHk9IjAuMyIvPjwvc3ZnPg==");
  background-size: 200px 200px;
  animation: noiseJitter 0.6s steps(1, end) infinite;
}



@keyframes phosphorPulse {
  0%,100% { filter: brightness(102%) contrast(102%); }
  50% { filter: brightness(98%) contrast(98%); }
}

.crt-phosphor {
  animation: phosphorPulse 5s ease-in-out infinite;
}