/* ========================================
   MUTANT ZERO - Landing Page Styles
   ======================================== */

/* CSS Custom Properties */
:root {
  --color-bg: #0a0a0a;
  --color-bg-dark: #050505;
  --color-primary: #c8ff00;
  --color-primary-dim: #9acc00;
  --color-white: #ffffff;
  --color-gray: #888888;
  --color-gray-dark: #333333;
  --color-error: #ff4444;
  
  --font-mono: 'JetBrains Mono', 'Space Mono', 'Courier New', monospace;
  
  --glow-primary: 0 0 20px rgba(200, 255, 0, 0.5),
                  0 0 40px rgba(200, 255, 0, 0.3),
                  0 0 60px rgba(200, 255, 0, 0.2);
  --glow-intense: 0 0 30px rgba(200, 255, 0, 0.7),
                  0 0 60px rgba(200, 255, 0, 0.5),
                  0 0 100px rgba(200, 255, 0, 0.3);
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-mono);
  background-color: var(--color-bg);
  color: var(--color-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow-x: hidden;
  line-height: 1.6;
}

/* Background Effects */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(ellipse at center, transparent 0%, var(--color-bg) 70%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(200, 255, 0, 0.01) 2px,
      rgba(200, 255, 0, 0.01) 4px
    );
  pointer-events: none;
  z-index: -2;
}

/* Grid Pattern Background */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(rgba(200, 255, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200, 255, 0, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  pointer-events: none;
  z-index: -1;
}

/* Noise Overlay */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 1000;
}

/* Scanlines */
.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.1) 2px,
    rgba(0, 0, 0, 0.1) 4px
  );
  pointer-events: none;
  z-index: 999;
  animation: scanline-move 8s linear infinite;
}

@keyframes scanline-move {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

/* Main Container */
.container {
  width: 100%;
  max-width: 800px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  position: relative;
  z-index: 1;
}

/* ========================================
   HEADER / LOGO
   ======================================== */

.header {
  text-align: center;
  margin-bottom: 1rem;
}

.logo {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.logo-text {
  display: inline-block;
  position: relative;
}

.logo-mut,
.logo-zero {
  color: var(--color-white);
}

.logo-ant {
  color: var(--color-primary);
  text-shadow: var(--glow-primary);
}

/* Glitch Effect */
.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.glitch::before {
  animation: glitch-1 2s infinite linear alternate-reverse;
  color: var(--color-primary);
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  transform: translate(-2px, -2px);
}

.glitch::after {
  animation: glitch-2 3s infinite linear alternate-reverse;
  color: #ff00ff;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  transform: translate(2px, 2px);
}

@keyframes glitch-1 {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-3px, 3px); }
  40% { transform: translate(-3px, -3px); }
  60% { transform: translate(3px, 3px); }
  80% { transform: translate(3px, -3px); }
}

@keyframes glitch-2 {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(3px, -3px); }
  40% { transform: translate(3px, 3px); }
  60% { transform: translate(-3px, -3px); }
  80% { transform: translate(-3px, 3px); }
}

.subtitle {
  font-size: clamp(0.8rem, 2.5vw, 1.1rem);
  letter-spacing: 0.4em;
  color: var(--color-gray);
  font-weight: 500;
}

/* ========================================
   HERO / ZERO LOGO
   ======================================== */

.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}

.zero-container {
  position: relative;
  width: clamp(200px, 40vw, 320px);
  height: clamp(280px, 55vw, 450px);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Glow behind zero */
.zero-glow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    ellipse at center,
    rgba(200, 255, 0, 0.4) 0%,
    rgba(200, 255, 0, 0.1) 40%,
    transparent 70%
  );
  filter: blur(30px);
  animation: glow-pulse 3s ease-in-out infinite;
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* Light rays */
.zero-rays {
  position: absolute;
  width: 150%;
  height: 150%;
  background: 
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(200, 255, 0, 0.1) 10deg,
      transparent 20deg,
      transparent 30deg,
      rgba(200, 255, 0, 0.08) 40deg,
      transparent 50deg,
      transparent 60deg,
      rgba(200, 255, 0, 0.1) 70deg,
      transparent 80deg,
      transparent 90deg,
      rgba(200, 255, 0, 0.06) 100deg,
      transparent 110deg,
      transparent 120deg,
      rgba(200, 255, 0, 0.1) 130deg,
      transparent 140deg,
      transparent 150deg,
      rgba(200, 255, 0, 0.08) 160deg,
      transparent 170deg,
      transparent 180deg,
      rgba(200, 255, 0, 0.1) 190deg,
      transparent 200deg,
      transparent 210deg,
      rgba(200, 255, 0, 0.06) 220deg,
      transparent 230deg,
      transparent 240deg,
      rgba(200, 255, 0, 0.1) 250deg,
      transparent 260deg,
      transparent 270deg,
      rgba(200, 255, 0, 0.08) 280deg,
      transparent 290deg,
      transparent 300deg,
      rgba(200, 255, 0, 0.1) 310deg,
      transparent 320deg,
      transparent 330deg,
      rgba(200, 255, 0, 0.06) 340deg,
      transparent 350deg,
      transparent 360deg
    );
  animation: rays-rotate 20s linear infinite;
}

@keyframes rays-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.zero-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 30px rgba(200, 255, 0, 0.5));
}

/* ========================================
   TAGLINE & ANNOUNCEMENT
   ======================================== */

.tagline {
  text-align: center;
  padding: 1rem 0;
}

.tagline-text {
  font-size: clamp(0.7rem, 2vw, 0.9rem);
  color: var(--color-gray);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.announcement {
  text-align: center;
  padding: 0.5rem 0;
}

.announcement-text {
  font-size: clamp(0.8rem, 2.2vw, 1rem);
  color: var(--color-white);
  letter-spacing: 0.05em;
}

/* ========================================
   SIGNUP FORM
   ======================================== */

.signup {
  width: 100%;
  max-width: 600px;
  padding: 1.5rem 0;
}

.signup-label {
  display: block;
  font-size: 0.75rem;
  color: var(--color-gray);
  letter-spacing: 0.2em;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.signup-form {
  display: flex;
  gap: 0;
  width: 100%;
}

.input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background-color: var(--color-bg-dark);
  border: 1px solid var(--color-primary);
  padding: 0 1rem;
  transition: box-shadow 0.3s ease;
}

.input-wrapper:focus-within {
  box-shadow: 0 0 15px rgba(200, 255, 0, 0.3);
}

.input-prefix {
  color: var(--color-primary);
  font-size: 1rem;
  margin-right: 0.5rem;
}

.input-wrapper input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 2vw, 0.9rem);
  padding: 1rem 0;
  letter-spacing: 0.05em;
}

.input-wrapper input::placeholder {
  color: var(--color-gray-dark);
  opacity: 1;
}

.submit-btn {
  background-color: var(--color-primary);
  color: var(--color-bg);
  border: 1px solid var(--color-primary);
  padding: 1rem 1.5rem;
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.submit-btn:hover {
  background-color: var(--color-white);
  box-shadow: var(--glow-primary);
}

.submit-btn:active {
  transform: scale(0.98);
}

.submit-btn .btn-loading {
  display: none;
}

.submit-btn.loading .btn-text {
  display: none;
}

.submit-btn.loading .btn-loading {
  display: inline;
}

.submit-btn.loading {
  opacity: 0.7;
  cursor: wait;
}

/* Success & Error Messages */
.success-message,
.error-message {
  margin-top: 1rem;
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  letter-spacing: 0.05em;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  pointer-events: none;
}

.success-message {
  color: var(--color-primary);
}

.error-message {
  color: var(--color-error);
}

.success-message.visible,
.error-message.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Hide form when success */
.signup-form.hidden {
  display: none;
}

/* ========================================
   FOOTER
   ======================================== */

.footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 0;
  margin-top: auto;
}

.status-text {
  font-size: clamp(0.6rem, 1.8vw, 0.75rem);
  color: var(--color-gray);
  letter-spacing: 0.1em;
}

.diamond-icon {
  color: var(--color-gray);
  opacity: 0.5;
  transition: all 0.3s ease;
}

.diamond-icon:hover {
  color: var(--color-primary);
  opacity: 1;
}

.diamond-icon svg {
  width: 20px;
  height: 20px;
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 768px) {
  .container {
    padding: 1.5rem;
    gap: 1rem;
  }
  
  .signup-form {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .input-wrapper {
    border: 1px solid var(--color-primary);
  }
  
  .submit-btn {
    width: 100%;
    padding: 1rem;
  }
  
  .footer {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .diamond-icon {
    position: static;
  }
}

@media (max-width: 480px) {
  .logo {
    font-size: 2rem;
  }
  
  .subtitle {
    font-size: 0.7rem;
    letter-spacing: 0.3em;
  }
  
  .zero-container {
    width: 180px;
    height: 250px;
  }
}

/* ========================================
   ANIMATIONS ON LOAD
   ======================================== */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.header {
  animation: fadeInUp 0.8s ease-out;
}

.hero {
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.tagline {
  animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

.announcement {
  animation: fadeInUp 0.8s ease-out 0.5s backwards;
}

.signup {
  animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.footer {
  animation: fadeInUp 0.8s ease-out 0.8s backwards;
}