:root {
  --bg: #050508;
  --grid-color: #ff0055;
  --neon-cyan: #00f3ff;
  --neon-gold: #ffb700;
  --neon-pink: #ff00aa;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg);
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: #fff;
}

/* --- CRT & VIGNETTE EFFECTS --- */
.crt-overlay {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: repeating-linear-gradient(
    transparent 0px, transparent 2px, rgba(0, 0, 0, 0.4) 2px, rgba(0, 0, 0, 0.4) 4px
  );
  z-index: 100;
  pointer-events: none;
}

.vignette {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  background: radial-gradient(circle, transparent 50%, #000 120%);
  z-index: 99;
  pointer-events: none;
}

/* --- 80s MOVING PERSPECTIVE GRID --- */
.synth-grid {
  position: absolute;
  bottom: -10vh;
  width: 200vw;
  height: 40vh;
  background-image:
    linear-gradient(transparent 60%, var(--grid-color) 100%),
    linear-gradient(90deg, transparent 96%, var(--grid-color) 100%),
    linear-gradient(0deg, transparent 96%, var(--grid-color) 100%);
  background-size: 100% 100%, 40px 100%, 100% 40px;
  transform: perspective(300px) rotateX(60deg) translateX(-25vw);
  animation: gridMove 2s linear infinite, fadeIn 2s forwards;
  opacity: 0;
  z-index: 1;
  box-shadow: inset 0 20px 50px var(--bg);
}

@keyframes gridMove {
  0% { background-position: 0 0, 0 0, 0 0; }
  100% { background-position: 0 0, 0 0, 0 40px; }
}

/* --- BOOT TEXT --- */
.boot-text {
  font-family: 'VT323', monospace;
  font-size: 24px;
  color: var(--neon-cyan);
  position: absolute;
  top: 20%;
  left: 10%;
  text-shadow: 0 0 10px var(--neon-cyan);
  opacity: 0;
  animation: bootSequence 2.5s steps(30, end) forwards 0.5s;
  white-space: nowrap;
  overflow: hidden;
}

@keyframes bootSequence {
  0% { width: 0; opacity: 1; }
  80% { width: 320px; opacity: 1; }
  90% { opacity: 0; }
  100% { opacity: 0; display: none; }
}

/* --- MAIN LOGO CONTAINER --- */
.logo-wrapper {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -50px;
}

/* --- SVG DRAWING ANIMATIONS --- */
.potato-svg {
  width: 220px;
  height: 280px;
  overflow: visible;
  margin-bottom: 20px;
}

.neon-path {
  fill: none;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Phase 1: Draw the Potato */
.outline {
  stroke: var(--neon-gold);
  filter: drop-shadow(0 0 8px var(--neon-gold)) drop-shadow(0 0 20px #ff5500);
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 2s ease-in-out forwards 2s;
}

/* Phase 2: Microchip Pins */
.pin {
  stroke: var(--neon-cyan);
  filter: drop-shadow(0 0 5px var(--neon-cyan)) drop-shadow(0 0 15px #0055ff);
  opacity: 0;
}
.pin-1 { animation: snapOn 0.1s forwards 3.5s; }
.pin-2 { animation: snapOn 0.1s forwards 3.6s; }
.pin-3 { animation: snapOn 0.1s forwards 3.7s; }
.pin-4 { animation: snapOn 0.1s forwards 3.8s; }
.pin-5 { animation: snapOn 0.1s forwards 3.9s; }
.pin-6 { animation: snapOn 0.1s forwards 4.0s; }

/* Phase 3: The Face */
.face-element {
  fill: var(--neon-pink);
  filter: drop-shadow(0 0 10px var(--neon-pink));
  opacity: 0;
  animation: flickerOn 0.5s forwards 4.2s;
}
.mouth {
  stroke: var(--neon-pink);
  stroke-width: 5;
  fill: none;
  filter: drop-shadow(0 0 10px var(--neon-pink));
  opacity: 0;
  animation: flickerOn 0.5s forwards 4.2s;
}

/* --- TYPOGRAPHY --- */
.brand-text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Righteous', cursive;
  line-height: 0.9;
}

.text-micro {
  font-size: 45px;
  color: #fff;
  letter-spacing: 20px;
  margin-left: 20px;
  text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan), 0 0 40px #0055ff;
  opacity: 0;
  transform: translateY(-20px);
  animation: dropGlitch 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards 4.8s;
}

.text-potato {
  font-size: 90px;
  color: transparent;
  -webkit-text-stroke: 2px var(--neon-gold);
  letter-spacing: 5px;
  opacity: 0;
  animation: heavyNeonTurnOn 1s forwards 5.2s;
}

/* --- KEYFRAMES --- */
@keyframes fadeIn {
  to { opacity: 0.4; }
}

@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}

@keyframes snapOn {
  to { opacity: 1; }
}

@keyframes flickerOn {
  0% { opacity: 0; }
  10% { opacity: 1; }
  20% { opacity: 0; }
  30% { opacity: 0.5; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes dropGlitch {
  0% { opacity: 0; transform: translateY(-20px) skewX(20deg); }
  50% { opacity: 1; transform: translateY(5px) skewX(-10deg); }
  80% { transform: translateY(-2px) skewX(5deg); }
  100% { opacity: 1; transform: translateY(0) skewX(0); }
}

@keyframes heavyNeonTurnOn {
  0% { opacity: 0; }
  10% { opacity: 1; color: var(--neon-gold); text-shadow: 0 0 20px var(--neon-gold); }
  20% { opacity: 0; color: transparent; text-shadow: none; }
  30% { opacity: 0.2; }
  40% { opacity: 1; color: var(--neon-gold); text-shadow: 0 0 30px var(--neon-gold), 0 0 60px #ff5500; }
  50% { opacity: 0; }
  100% {
    opacity: 1;
    color: #fff;
    text-shadow: 0 0 10px #fff, 0 0 30px var(--neon-gold), 0 0 80px #ff5500;
    -webkit-text-stroke: 0px;
  }
}