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

:root {
  --green: #00ff88;
  --green-dim: #00cc66;
  --green-glow: rgba(0, 255, 136, 0.18);
  --bg: #050a07;
  --grid: rgba(0, 255, 136, 0.04);
  --scanline: rgba(0, 0, 0, 0.25);
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--green);
  font-family: 'Courier New', Courier, monospace;
}

/* Grid background */
.grid-bg {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
}

/* Scanlines overlay */
.scanlines {
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 2px,
    var(--scanline) 2px,
    var(--scanline) 4px
  );
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/* Vignette */
.vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.75) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Center layout */
main {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.greeting-wrapper {
  display: flex;
  align-items: baseline;
  gap: 0.05em;
  user-select: none;
}

/* The greeting text */
.greeting {
  font-size: clamp(3.5rem, 12vw, 9rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--green);
  text-shadow:
    0 0 20px var(--green-glow),
    0 0 60px rgba(0, 255, 136, 0.08),
    0 0 120px rgba(0, 255, 136, 0.04);
  opacity: 1;
  transition: opacity 0.35s ease, filter 0.35s ease;
  will-change: opacity, filter;
  filter: brightness(1);
}

.greeting.fade-out {
  opacity: 0;
  filter: brightness(2) blur(2px);
}

.greeting.fade-in {
  opacity: 1;
  filter: brightness(1) blur(0);
}

/* Blinking cursor */
.cursor {
  font-size: clamp(2.5rem, 8vw, 6.5rem);
  font-weight: 300;
  color: var(--green-dim);
  line-height: 1;
  opacity: 1;
  animation: blink 1.1s step-start infinite;
  margin-left: 0.05em;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Subtle ambient pulse on the glow */
@keyframes glow-pulse {
  0%, 100% {
    text-shadow:
      0 0 20px var(--green-glow),
      0 0 60px rgba(0, 255, 136, 0.08),
      0 0 120px rgba(0, 255, 136, 0.04);
  }
  50% {
    text-shadow:
      0 0 28px rgba(0, 255, 136, 0.28),
      0 0 80px rgba(0, 255, 136, 0.12),
      0 0 160px rgba(0, 255, 136, 0.06);
  }
}

.greeting:not(.fade-out):not(.glitch) {
  animation: glow-pulse 4s ease-in-out infinite;
}

/* Glitch effect */
.greeting.glitch {
  animation: glitch 0.3s linear;
}

@keyframes glitch {
  0%   { transform: translate(0, 0) skewX(0deg); filter: brightness(1); }
  15%  { transform: translate(-3px, 1px) skewX(-2deg); filter: brightness(1.8) hue-rotate(30deg); }
  30%  { transform: translate(3px, -1px) skewX(1deg); filter: brightness(0.8); }
  45%  { transform: translate(-2px, 2px) skewX(0.5deg); filter: brightness(2) hue-rotate(-20deg); }
  60%  { transform: translate(2px, -2px) skewX(-1deg); filter: brightness(1); }
  75%  { transform: translate(-1px, 1px) skewX(0deg); filter: brightness(1.3); }
  100% { transform: translate(0, 0) skewX(0deg); filter: brightness(1); }
}

/* RTL support for Arabic, Hebrew, Urdu, Persian */
.greeting[dir="rtl"] {
  direction: rtl;
}