/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(0, 0%, 0%);
  --muted-foreground: hsl(0, 0%, 40%);
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: 'Space Mono', monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

/* Main Layout */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
}

/* CRT Text */
.crt-text {
  font-size: 1.125rem;
  letter-spacing: 0.3em;
  color: var(--foreground);
  position: relative;
  display: inline-block;
}

.crt-text::before,
.crt-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.crt-text::before {
  color: hsl(0, 100%, 50%);
  animation: glitch-r 3s infinite;
  mix-blend-mode: multiply;
}

.crt-text::after {
  color: hsl(200, 100%, 50%);
  animation: glitch-b 2.5s infinite;
  mix-blend-mode: multiply;
}

/* Email Link */
.email-link {
  margin-top: 2rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 0.2s ease;
}

.email-link:hover {
  color: var(--foreground);
}

/* CRT Overlay Effect */
.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    hsla(0, 0%, 0%, 0.015) 2px,
    hsla(0, 0%, 0%, 0.015) 4px
  );
  z-index: 50;
}

/* CRT Flicker Animation */
.crt-flicker {
  animation: flicker 8s infinite;
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  93% { opacity: 0.85; }
  94% { opacity: 0.9; }
  95% { opacity: 0.85; }
  96% { opacity: 1; }
}

/* VHS Line Effect */
.vhs-line {
  position: fixed;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(
    to bottom,
    transparent,
    hsla(0, 0%, 100%, 0.15) 50%,
    hsla(0, 0%, 0%, 0.1) 50%,
    transparent
  );
  pointer-events: none;
  z-index: 51;
  animation: vhs-scroll 12s infinite;
  opacity: 0;
}

@keyframes vhs-scroll {
  0%, 85% { top: -10px; opacity: 0; }
  86% { top: -10px; opacity: 1; }
  100% { top: 110%; opacity: 1; }
}

/* Glitch Animations */
@keyframes glitch-r {
  0%, 100% { transform: translate(0.5px, 0); opacity: 0.4; }
  5% { transform: translate(2px, 0); opacity: 0.6; }
  10% { transform: translate(-1px, 1px); opacity: 0.5; }
  15% { transform: translate(1px, -1px); opacity: 0.4; }
  20%, 80% { transform: translate(0.5px, 0); opacity: 0.3; }
  85% { transform: translate(-2px, 0); opacity: 0.5; }
  90% { transform: translate(1px, 1px); opacity: 0.6; }
  95% { transform: translate(0.5px, 0); opacity: 0.4; }
}

@keyframes glitch-b {
  0%, 100% { transform: translate(-0.5px, 0); opacity: 0.4; }
  8% { transform: translate(-2px, 0); opacity: 0.6; }
  12% { transform: translate(1px, -1px); opacity: 0.5; }
  18% { transform: translate(-1px, 1px); opacity: 0.4; }
  22%, 78% { transform: translate(-0.5px, 0); opacity: 0.3; }
  82% { transform: translate(2px, 0); opacity: 0.5; }
  88% { transform: translate(-1px, -1px); opacity: 0.6; }
  94% { transform: translate(-0.5px, 0); opacity: 0.4; }
}

/* Responsive Design */
@media (min-width: 640px) {
  .crt-text {
    font-size: 1.25rem;
  }
}

@media (min-width: 768px) {
  .crt-text {
    font-size: 1.5rem;
  }
}