/* ╔══════════════════════════════════════════════════════════════╗
   ║  OLED / P3 PROGRESSIVE ENHANCEMENTS                         ║
   ║  Shared across all marketing & feature pages.                ║
   ║  See §33 in FRONTEND-STYLE-GUIDE.md for documentation.      ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── P3 Wide-Gamut Colors + CTA Glow (iPhone 7+, MacBook Pro 2016+) ── */
@media (color-gamut: p3) {
  :root {
    --primary: color(display-p3 0.10 0.37 0.97);
    --primary-dark: color(display-p3 0.08 0.30 0.88);
    --accent: color(display-p3 0.05 0.82 0.30);
  }

  .btn-primary {
    box-shadow:
      0 10px 30px color(display-p3 0.10 0.37 0.97 / 0.5),
      0 0 60px color(display-p3 0.10 0.37 0.97 / 0.15),
      0 0 0 1px rgba(15, 23, 42, 0.9);
  }

  .btn-primary:hover {
    box-shadow:
      0 14px 40px color(display-p3 0.10 0.37 0.97 / 0.6),
      0 0 80px color(display-p3 0.10 0.37 0.97 / 0.2),
      0 0 0 1px rgba(15, 23, 42, 0.9);
  }
}

/* ── Alternating Section Depth + Anti-Banding Gradient Overlays ── */
main > :nth-child(odd of .section-wrapper) {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(37, 99, 235, 0.04) 0%, transparent 70%),
    #020617;
}

main > :nth-child(even of .section-wrapper) {
  background: radial-gradient(ellipse at 50% 100%, rgba(37, 99, 235, 0.02) 0%, transparent 70%);
}

/* ── Prefers Contrast: More ── */
@media (prefers-contrast: more) {
  :root {
    --text-main: #f8fafc;
    --border-subtle: #94a3b8;
  }

  .section-wrapper {
    border-bottom-color: rgba(148, 163, 184, 0.5);
  }

  .section-wrapper-bordered {
    border-top-color: rgba(148, 163, 184, 0.5);
  }

  .btn-primary {
    box-shadow:
      0 10px 30px rgba(37, 99, 235, 0.45),
      0 0 0 2px rgba(96, 165, 250, 0.6);
  }

  .section-wrapper .section-content {
    color: #f8fafc;
  }
}

/* ── Image Dimming in Dark Context ── */
.section-wrapper img:not([role="presentation"]) {
  filter: brightness(0.82) contrast(1.15);
  transition: filter 0.3s ease;
}

.section-wrapper img:hover {
  filter: brightness(1) contrast(1);
}

/* Override: feature images stay full brightness with hover lift/glow */
.section-wrapper .feature-image img,
.section-wrapper .screenshot-flow-step img {
  filter: brightness(1) contrast(1);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* ── ::selection with Accent Color ── */
::selection {
  background: rgba(37, 99, 235, 0.35);
  color: #f8fafc;
}

@media (color-gamut: p3) {
  ::selection {
    background: color(display-p3 0.10 0.37 0.97 / 0.35);
  }

  /* ── P3 Gradient Text on Section Headlines ── */
  .section-title {
    background: linear-gradient(
      135deg,
      color(display-p3 0.38 0.65 0.98),
      color(display-p3 0.20 0.83 0.60)
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .section-title::after {
    background: linear-gradient(
      90deg,
      color(display-p3 0.38 0.65 0.98),
      color(display-p3 0.20 0.83 0.60)
    );
  }
}

/* ── Amber/Gold Active & Focus States (OLED vibrant) ── */
a:focus-visible,
button:focus-visible {
  outline-color: #f59e0b;
}

.btn:active {
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.4);
}

@media (color-gamut: p3) {
  a:focus-visible,
  button:focus-visible {
    outline-color: color(display-p3 0.96 0.62 0.04);
  }

  .btn:active {
    box-shadow: 0 0 0 3px color(display-p3 0.96 0.62 0.04 / 0.4);
  }
}

/* ─────────────────────────────────────────────────────
   start6.html - OLED / Display-P3 Enhancements
   ───────────────────────────────────────────────────── */

/* Anti-banding overlay for demo card (all screens) */
.demo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 0%,
    rgba(255, 255, 255, 0.02) 0%,
    transparent 70%
  );
  z-index: 0;
  border-radius: inherit;
}

@media (color-gamut: p3) {
  /* Gradient headline - wider P3 gamut */
  .hero h1 .gradient-text {
    background: linear-gradient(
      135deg,
      color(display-p3 0.23 0.51 0.96),
      color(display-p3 0.13 0.77 0.37)
    );
    -webkit-background-clip: text;
    background-clip: text;
  }

  /* Primary CTA - P3 blue with enhanced glow */
  .generate-btn {
    background: linear-gradient(
      135deg,
      color(display-p3 0.23 0.51 0.96),
      color(display-p3 0.11 0.31 0.85)
    );
  }

  .generate-btn:hover {
    box-shadow: 0 8px 25px color(display-p3 0.23 0.51 0.96 / 0.45);
  }

  /* Mic button - P3 green */
  .mic-button {
    background: linear-gradient(
      135deg,
      color(display-p3 0.13 0.77 0.37) 0%,
      color(display-p3 0.09 0.64 0.29) 100%
    );
    box-shadow: 0 4px 16px color(display-p3 0.13 0.77 0.37 / 0.3);
  }

  .mic-button:hover {
    box-shadow: 0 6px 24px color(display-p3 0.13 0.77 0.37 / 0.45);
  }

  /* Recording state - P3 red */
  .mic-button.recording {
    background: linear-gradient(
      135deg,
      color(display-p3 0.94 0.27 0.27),
      color(display-p3 0.86 0.15 0.15)
    );
  }

  /* Email submit - P3 accent green */
  .email-submit {
    background: color(display-p3 0.13 0.77 0.37);
  }

  .email-submit:hover {
    background: color(display-p3 0.09 0.64 0.29);
  }

  /* Eyebrow text - P3 orange */
  .hero .eyebrow {
    color: color(display-p3 0.98 0.45 0.09);
  }
}

/* High-contrast mode for start6.html elements */
@media (prefers-contrast: more) {
  .demo-card {
    border-color: rgba(148, 163, 184, 0.5);
  }

  .generate-btn {
    outline: 1px solid rgba(255, 255, 255, 0.3);
  }

  .mic-button {
    outline: 1px solid rgba(255, 255, 255, 0.3);
  }

  .email-submit {
    outline: 1px solid rgba(255, 255, 255, 0.3);
  }

  .hero h1,
  .input-description {
    color: #f8fafc;
  }
}