/*
 * CTRL-ALT-ADAPT Retro CRT Component Styles
 * Mobile-first, accessible, with vintage terminal aesthetics
 */

/* ===== RESET & BASE ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 14px;  /* Smaller base on mobile for more compact layout */
  scroll-behavior: smooth;
  background-color: var(--bg);
}

@media (min-width: 768px) {
  html {
    font-size: 16px;  /* Standard size on desktop */
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-mono-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text-green);
  /* Background image from Figma - WebP with PNG fallback */
  background: var(--bg) url('../img/background-retro.webp?v=2') center bottom / cover no-repeat;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0;
  /* Subtle green phosphor glow on all text */
  text-shadow: var(--text-shadow-glow-green);
}

/* Amber background for thanks page (inverted phosphor dominance) */
body.thanks-page-bg {
  background-image: url('../img/background-retro-amber.webp?v=1');
}

/* Fallback for browsers without WebP support */
@supports not (background: url('test.webp')) {
  body {
    background-image: url('../img/background-retro.png');
  }

  body.thanks-page-bg {
    background-image: url('../img/background-retro-amber.png');
  }
}

/* Mobile: shift background right and up to show monitor/keyboard behind content */
@media (max-width: 767px) {
  body {
    background-position: 65% center;  /* Shift right to show monitor area */
    background-size: cover;
  }
}

/* Tablet/Desktop: keep monitor visible at bottom */
@media (min-width: 768px) {
  body {
    background-position: center bottom;
  }
}

/* Gradient vignette overlay - darkens top for prominent brand label */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh;
  z-index: 1;
  pointer-events: none;
  background:
    /* Grainy texture via multiple radial gradients */
    repeating-radial-gradient(circle at 17% 83%, transparent 0, rgba(0,0,0,.03) 1px, transparent 2px),
    repeating-radial-gradient(circle at 83% 17%, transparent 0, rgba(0,0,0,.025) 1px, transparent 2px),
    /* Main gradient overlay */
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.85) 0%,
      rgba(0, 0, 0, 0.5) 35%,
      transparent 100%
    );
  filter: contrast(108%);
}

/* Subtle scan-line overlay for CRT effect */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-scanlines);
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    var(--scanline-color) 2px,
    var(--scanline-color) 4px
  );
  opacity: 0;
  transition: opacity var(--transition-base);
}

/* Show scan lines on hover/focus for subtle effect */
body:hover::after,
body:focus-within::after {
  opacity: 1;
}

main {
  flex: 1;
  position: relative;
  z-index: var(--z-content);
}

/* ===== TYPOGRAPHY ===== */
h1,
h2,
h3 {
  font-family: var(--font-mono-display);
  font-weight: var(--fw-normal);
  line-height: var(--lh-tight);
  color: var(--text-hero);
  margin-bottom: var(--space-md);
  letter-spacing: var(--ls-tight);
  text-shadow: var(--text-shadow-hero);
}

h1 {
  font-size: var(--text-h1);
}

h2 {
  font-size: var(--text-lg);
  color: var(--text-green);
}

p {
  margin-bottom: var(--space-sm);
}

a {
  color: var(--text-green);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

a:hover,
a:focus {
  color: var(--text-green-alt);
  text-shadow: var(--text-shadow-glow);
}

a:focus-visible {
  outline: 2px solid var(--text-green);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ===== LAYOUT ===== */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);  /* 32px horizontal padding for more breathing room on mobile */
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--space-xl);
  }
}

/* ===== HEADER ===== */
header {
  padding: var(--space-md) 0 var(--space-sm);
  background: transparent;
  position: relative;
  z-index: var(--z-content);
}

/* Mobile: less top padding */
@media (max-width: 767px) {
  header {
    padding: var(--space-sm) 0 var(--space-xs);
  }
}

.kicker {
  font-family: var(--font-pixel);  /* Press Start 2P pixel font */
  font-size: var(--text-kicker);  /* 27-42px (reduced 25%) */
  font-weight: normal;  /* Pixel fonts don't need bold */
  color: var(--text-green);
  letter-spacing: 0.05em;  /* Tighter spacing for pixel font readability */
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;  /* Extra line-height for pixel font breathing room */
  text-shadow:
    0 0 20px var(--phosphor-glow),
    0 0 40px var(--phosphor-glow),
    0 4px 8px rgba(0, 0, 0, 0.6);
  position: relative;
  z-index: var(--z-content);
  white-space: nowrap;  /* Prevent wrapping - keep brand name on one line */
  max-width: 100%;  /* Prevent overflow */
  overflow: hidden;  /* Hide overflow if text is too wide */

  /* Scanline effect overlay on text - mimics CRT horizontal lines */
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.3) 2px,
    rgba(0, 0, 0, 0.3) 3px
  );
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 100% 100%;
}

/* Small screens: reduce kicker size very aggressively to fit on one line */
@media (max-width: 390px) {
  .kicker {
    font-size: clamp(1rem, 3vw, 1.5rem);  /* 16-24px for narrow screens */
    letter-spacing: 0.01em;  /* Very tight to prevent cutoff */
  }
}

.kicker a {
  text-decoration: none;
  color: inherit;
}

/* ===== HERO SECTION ===== */
.hero {
  padding-top: var(--space-md);
  padding-bottom: var(--space-3xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: left;
  max-width: 1100px;
  margin: 0 auto;
}

/* Mobile: tighter spacing for above-the-fold */
@media (max-width: 767px) {
  .hero {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-2xl);
    gap: var(--space-md);
  }
}

/* Desktop: more breathing room */
@media (min-width: 768px) {
  .hero {
    gap: var(--space-2xl);
    padding-top: var(--space-xl);
    padding-bottom: var(--space-3xl);
  }
}

.hero-content {
  order: 1;
  width: 100%;
  max-width: 100%;
}

@media (min-width: 768px) {
  .hero-content {
    max-width: 1000px;
  }
}

.hero h1 {
  margin-bottom: var(--space-lg);
  max-width: 1160px; /* Match Figma width */
}

.subtext {
  font-family: var(--font-mono-body);
  font-size: var(--text-subhead);
  font-weight: var(--fw-medium);
  color: var(--text-green);
  margin-bottom: var(--space-xl);  /* Reduced from 2xl to make room for social proof */
  line-height: var(--lh-normal);
  max-width: 974px; /* Match Figma width */
}

@media (min-width: 768px) {
  .subtext {
    font-size: var(--text-lg);
  }
}

/* Social proof placeholder - reserved space for future subscriber count/testimonial */
.social-proof {
  min-height: var(--space-lg);  /* Reserved space: 32px */
  margin-bottom: var(--space-md);
  text-align: center;
  font-family: var(--font-mono-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  /* Uncomment when ready to add social proof:
  content: "Join 1,200+ Gen-X professionals" or similar
  */
}

/* ===== ENHANCEMENT #5: FORM CONTAINER TERMINAL WINDOW FRAME ===== */
#subscribe {
  margin-bottom: var(--space-md);
  width: 100%;
  max-width: 600px;
}

.form-container {
  background: var(--bg-overlay);
  border: 1px solid var(--crt-border);
  border-radius: var(--radius-lg);
  padding: var(--space-md);  /* Reduced from lg (32px) to md (24px) for mobile */
  box-shadow: var(--shadow-terminal);
  position: relative;
}

@media (min-width: 768px) {
  .form-container {
    padding: var(--space-lg);  /* Restore larger padding on desktop */
  }
}

.form-group {
  margin-bottom: var(--space-lg);
}

label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-green);
  margin-bottom: var(--space-xs);
}

/* Visually hidden but accessible to screen readers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== ENHANCEMENT #1: CRT GLOW EFFECT ON EMAIL INPUT ===== */
/* ===== ENHANCEMENT #3: SCAN-LINE TEXTURE ON HOVER ===== */
input[type="email"] {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-form);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  color: var(--input-text);
  background-color: var(--input-bg);
  background-image: none;
  border: 3px solid var(--input-border);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  min-height: var(--touch-target);
  box-shadow: var(--shadow-input-base);
  position: relative;
}

/* Enhancement #3: Scan-line texture on hover */
input[type="email"]:hover {
  border-color: var(--input-border);
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.05) 2px,
    rgba(0, 0, 0, 0.05) 4px
  );
  transform: translateY(-1px);
  box-shadow:
    var(--shadow-input-base),
    0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Enhancement #1: Amber phosphor glow on focus */
input[type="email"]:focus {
  outline: none;
  border-color: var(--text-amber);
  box-shadow: var(--shadow-input-focus);
  transform: translateY(-2px);
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255, 191, 0, 0.03) 2px,
    rgba(255, 191, 0, 0.03) 4px
  );
}

input[type="email"][aria-invalid="true"] {
  border-color: var(--error);
  box-shadow:
    var(--shadow-input-base),
    0 0 12px rgba(255, 68, 68, 0.4);
}

input[type="email"]::placeholder {
  color: var(--input-placeholder);
  opacity: 0.8;
}

.hint {
  font-size: var(--text-sm);
  color: var(--text-amber);
  text-shadow: var(--text-shadow-glow-amber);
  margin-top: var(--space-xs);
  margin-bottom: 0;
}

/* ===== ENHANCEMENT #4: BLINKING CURSOR AT END OF HINT TEXT ===== */
.hint .cursor {
  display: inline-block;
  color: var(--text-amber);
  text-shadow: 0 0 10px var(--glow-amber-bright);
  animation: cursor-blink var(--cursor-blink-speed) step-end infinite;
  margin-left: 2px;
}

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

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hint .cursor {
    animation: none;
    opacity: 1;
  }
}

/* Honeypot field (hidden from humans) */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ===== ENHANCEMENT #2: DUAL-PHOSPHOR BUTTON (GREEN + AMBER) ===== */
.cta-button {
  display: inline-block;
  padding: var(--space-sm) var(--space-xl);
  font-size: var(--text-button);
  font-weight: var(--fw-normal);
  font-family: var(--font-sans);
  color: var(--button-text);
  background: linear-gradient(135deg, var(--button-bg) 0%, var(--button-bg-hover) 100%);
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  min-height: var(--touch-target);
  min-width: 160px;
  box-shadow:
    inset 0 0 20px rgba(14, 223, 24, 0.3),
    0 0 0 2px var(--text-amber),
    0 0 15px var(--glow-amber),
    0 0 30px var(--glow-green),
    0 4px 12px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

/* Shimmer effect overlay */
.cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left var(--shimmer-duration);
}

.cta-button:hover::before {
  left: 100%;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 30px rgba(14, 223, 24, 0.5),
    0 0 0 2px var(--text-amber-bright),
    0 0 25px var(--glow-amber-bright),
    0 0 40px var(--glow-green),
    0 6px 16px rgba(0, 0, 0, 0.6);
}

/* Enhancement #2: Tactile press animation */
.cta-button:active {
  transform: translateY(0);
  box-shadow:
    inset 0 0 20px rgba(14, 223, 24, 0.4),
    0 0 0 2px var(--text-amber),
    0 0 15px var(--glow-amber),
    0 2px 8px rgba(0, 0, 0, 0.7);
}

.cta-button:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 20px rgba(14, 223, 24, 0.3),
    0 0 0 4px var(--text-amber),
    0 0 20px var(--glow-amber-bright);
}

.cta-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--shadow-button-base);
}

/* Loading state with animated ellipsis */
.cta-button.loading::after {
  content: '';
  animation: ellipsis 1.5s infinite;
}

@keyframes ellipsis {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
  100% { content: ''; }
}

/* ===== FORM MESSAGES ===== */
.form-msg {
  font-size: var(--text-sm);
  margin-top: var(--space-sm);
  min-height: 1.5em;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono-body);
}

.form-msg:empty {
  display: none;
}

.form-msg[data-status="error"] {
  color: var(--error);
  background-color: rgba(0, 0, 0, 0.6);  /* Dark background for contrast */
  border-left: 3px solid var(--error);
  font-weight: var(--fw-semibold);  /* Increase weight for readability */
}

.form-msg[data-status="success"] {
  color: var(--success);
  background-color: rgba(14, 223, 24, 0.1);
  border-left: 3px solid var(--success);
}

/* ===== PRIVACY NOTICE ===== */
.privacy-notice {
  font-size: var(--text-xs);
  color: var(--text-amber);
  text-shadow: var(--text-shadow-glow-amber);
  margin-top: var(--space-lg);
  margin-bottom: 0;
}

.privacy-notice a {
  color: var(--text-green);
  font-weight: var(--fw-medium);
}

/* ===== FOOTER ===== */
footer {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--crt-border);
  margin-top: auto;
  position: relative;
  z-index: var(--z-content);
}

.footer-text {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 0;
  line-height: 1.6;
  opacity: 0.9;
}

.footer-text a {
  color: var(--text-green);
  font-weight: var(--fw-medium);
  transition: color var(--transition-fast);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.footer-text a:hover {
  color: var(--text-green-alt);
  text-shadow: var(--text-shadow-glow);
  text-decoration-thickness: 2px;
}

/* ===== THANKS PAGE ===== */
.thanks-page {
  padding-top: var(--space-3xl);
  padding-bottom: var(--space-3xl);
  max-width: 700px;
}

/* Blur background behind text for better readability on amber bg */
.thanks-content {
  backdrop-filter: blur(2px);
}

.thanks-content h1 {
  text-shadow:
    0 0 12px var(--glow-green),
    0 2px 4px rgba(0, 0, 0, 0.8);
  color: var(--success);
  margin-bottom: var(--space-lg);
}

.message {
  font-size: var(--text-lg);
  color: var(--text-green);
  margin-bottom: var(--space-2xl);
  text-shadow:
    0 0 12px var(--glow-green),
    0 2px 4px rgba(0, 0, 0, 0.8);
}

.next-steps {
  background-color: var(--bg-overlay);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--crt-border);
  margin-bottom: var(--space-2xl);
}

.next-steps h2 {
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
  text-shadow:
    0 0 12px var(--glow-green),
    0 2px 4px rgba(0, 0, 0, 0.8);
}

.next-steps ul {
  list-style: none;
  padding: 0;
}

.next-steps li {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
  position: relative;
  color: var(--text-green);
  text-shadow:
    0 0 12px var(--glow-green),
    0 2px 4px rgba(0, 0, 0, 0.8);
}

.next-steps li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--text-green);
  font-weight: var(--fw-bold);
}

.next-steps li:last-child {
  margin-bottom: 0;
}

.back-link {
  text-align: center;
  margin-top: var(--space-2xl);
}

.back-link a {
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--text-green);
  font-weight: var(--fw-medium);
}

.back-link a:hover {
  text-decoration: underline;
}

/* ===== PRIVACY PAGE ===== */
.privacy-page {
  padding: var(--space-xl) 0 var(--space-3xl);
  max-width: 800px;
}

.privacy-page article {
  margin-bottom: var(--space-2xl);
}

.privacy-page h1 {
  margin-bottom: var(--space-md);
}

.intro {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: var(--space-2xl);
}

.privacy-page section {
  margin-bottom: var(--space-2xl);
}

.privacy-page h2 {
  font-size: var(--text-xl);
  color: var(--text-green);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.privacy-page ul {
  margin-left: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.privacy-page li {
  margin-bottom: var(--space-xs);
  color: var(--text-green);
}

.privacy-page strong {
  color: var(--text-green-alt);
  font-weight: var(--fw-semibold);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 390px) {
  .container {
    padding: 0 var(--space-md);  /* Keep breathing room even on smallest screens (24px) */
  }

  .cta-button {
    width: 100%;
  }
}

/* ===== FOCUS STYLES ===== */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--text-green);
  outline-offset: 2px;
}

/* ===== REDUCED MOTION OVERRIDE ===== */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .hint::before {
    animation: none !important;
  }

  input[type="email"]:hover,
  input[type="email"]:focus,
  .cta-button:hover,
  .cta-button:active {
    transform: none !important;
  }

  .cta-button::before {
    transition: none !important;
  }
}