/* Magic Valley Piloting — shared stylesheet
 * Loaded on every page. Tailwind handles utilities via CDN; this file adds:
 * - Design tokens (CSS custom properties)
 * - Cross-document View Transitions
 * - Scroll-driven animations
 * - Custom keyframes
 * - Beacon brand mark utilities
 * - Reduced-motion + reduced-data respect
 */

/* Modern cross-document view transitions (Chrome 126+, Safari 18+). 
   Older browsers fall back to instant page swap — graceful degradation. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(root) {
  animation-name: vt-fade-out;
}

::view-transition-new(root) {
  animation-name: vt-fade-in;
}

@keyframes vt-fade-out {
  to { opacity: 0; transform: translateY(-4px); }
}

@keyframes vt-fade-in {
  from { opacity: 0; transform: translateY(4px); }
}

/* Design tokens */
:root {
  --color-ink-950: #0a0f1c;
  --color-ink-900: #0f172a;
  --color-ink-850: #172033;
  --color-ink-800: #1e293b;
  --color-ink-700: #334155;
  --color-ink-600: #475569;

  --color-beacon-300: #fcd34d;
  --color-beacon-400: #fbbf24;
  --color-beacon-500: #f59e0b;
  --color-beacon-600: #d97706;

  --color-text-primary: #f8fafc;
  --color-text-muted: #94a3b8;
  --color-text-subtle: #64748b;

  --grad-beacon: linear-gradient(135deg, var(--color-beacon-400) 0%, var(--color-beacon-500) 50%, var(--color-beacon-600) 100%);
  --grad-text-beacon: linear-gradient(to right, var(--color-beacon-400), var(--color-beacon-500), var(--color-beacon-300));

  --shadow-beacon-sm: 0 4px 12px -2px color-mix(in srgb, var(--color-beacon-500) 25%, transparent);
  --shadow-beacon-md: 0 10px 30px -5px color-mix(in srgb, var(--color-beacon-500) 35%, transparent);
  --shadow-beacon-lg: 0 20px 50px -10px color-mix(in srgb, var(--color-beacon-500) 45%, transparent);

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;

  --easing-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --easing-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html {
  scroll-behavior: smooth;
  background: var(--color-ink-950);
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--color-ink-950);
  color: var(--color-text-primary);
}

/* Brand mark — pulsing amber dot used in header + various places */
.beacon-mark {
  position: relative;
  display: inline-flex;
  width: 0.75rem;
  height: 0.75rem;
}

.beacon-mark::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: var(--color-beacon-500);
  opacity: 0.75;
  animation: beacon-pulse 2s ease-in-out infinite;
}

.beacon-mark::after {
  content: '';
  position: relative;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  background: var(--color-beacon-500);
}

.beacon-mark-lg {
  width: 1rem;
  height: 1rem;
}

@keyframes beacon-pulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(1.4); }
}

/* Subtle grid texture for hero / section backgrounds */
.grid-pattern {
  background-image:
    linear-gradient(rgba(245, 158, 11, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 158, 11, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
}

.grid-pattern-tight {
  background-image:
    linear-gradient(rgba(245, 158, 11, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 158, 11, 0.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

/* Scroll-driven reveal via JS class swap (cross-browser-safe) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s var(--easing-out-expo),
    transform 0.8s var(--easing-out-expo);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Native scroll-driven animation for modern browsers (Chrome 115+).
   Used as progressive enhancement on top of the .reveal JS class. */
@supports (animation-timeline: view()) {
  .scroll-rise {
    animation: scroll-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }

  @keyframes scroll-rise {
    from {
      opacity: 0;
      transform: translateY(40px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Modal/popover backdrop */
dialog::backdrop {
  background: rgba(10, 15, 28, 0.75);
  backdrop-filter: blur(8px);
}

/* Text shadow utility for hero headlines over visual texture */
.text-shadow-soft {
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}

/* Gradient text utility */
.text-grad-beacon {
  background: var(--grad-text-beacon);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Sticky call CTA — appears on scroll on mobile, persistent on desktop */
.call-cta-floating {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 40;
  opacity: 0;
  transform: translateY(20px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.4s var(--easing-out-expo), transform 0.4s var(--easing-out-back);
}

.call-cta-floating.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

@media (min-width: 1024px) {
  .call-cta-floating {
    display: none;
  }
}

/* Form input styling */
.form-input {
  width: 100%;
  padding: 0.875rem 1rem;
  background: var(--color-ink-800);
  border: 1px solid var(--color-ink-700);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-beacon-500);
  background: color-mix(in srgb, var(--color-ink-800) 70%, var(--color-ink-700) 30%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-beacon-500) 15%, transparent);
}

.form-input::placeholder {
  color: var(--color-text-subtle);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Reciprocal "Find a Pilot Car" banner shape (used in footer) */
.reciprocal-banner {
  border: 1px solid color-mix(in srgb, var(--color-beacon-500) 20%, transparent);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--color-beacon-500) 8%, transparent),
      color-mix(in srgb, var(--color-ink-800) 50%, transparent));
}

/* Print friendly — when someone prints a quote or rate sheet */
@media print {
  .no-print, header, footer, nav, .call-cta-floating { display: none !important; }
  body { background: white; color: black; }
  a { color: black; text-decoration: underline; }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .beacon-mark::before {
    animation: none;
    opacity: 0.5;
  }
}

/* Container query support for the rates card (wide vs narrow) */
.rate-card {
  container-type: inline-size;
}

@container (min-width: 480px) {
  .rate-card-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 2rem;
    align-items: center;
  }
}

/* :has() selector — adjust hero padding when a banner is present */
main:has(> .alert-banner) section.hero {
  padding-top: 1rem;
}

/* Focus-visible for keyboard nav (a11y) */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-beacon-400);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}