/* ──────────────────────────────────────────────────────────────────────
   FreightFang Brand Tokens + Neon Modern System
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Surface ── */
  --ff-bg-0:        #060912;   /* deepest, page edges */
  --ff-bg-1:        #0a0f1c;   /* default page bg */
  --ff-bg-2:        #131c2e;   /* card / panel */
  --ff-bg-3:        #1c2740;   /* hover surface */
  --ff-bg-glass:    rgba(19, 28, 46, 0.7);   /* glassmorphism */

  /* ── Border / divider ── */
  --ff-border:      #1f2a44;
  --ff-border-dim:  #131c2e;
  --ff-border-strong: #2a3654;
  --ff-border-glow: rgba(219, 32, 40, 0.35);

  /* ── Text ── */
  --ff-text:        #e2e8f0;
  --ff-text-hi:     #f5f9ff;
  --ff-text-dim:    #94a3b8;
  --ff-text-faint:  #64748b;
  --ff-text-ghost:  #475569;

  /* ── PRIMARY BRAND (red, matching logo) ── */
  --ff-brand:           #DB2028;
  --ff-brand-hi:        #E74F48;
  --ff-brand-soft:      #FAD3D1;
  --ff-brand-action:    #DB2028;
  --ff-brand-action-hover: #B81A21;
  --ff-brand-tint:      rgba(219, 32, 40, 0.10);
  --ff-brand-halo:      rgba(219, 32, 40, 0.35);
  --ff-brand-flame:     rgba(231, 79, 72, 0.55);

  /* ── Info blue (for links / secondary accent, kept legible) ── */
  --ff-info:        #60a5fa;
  --ff-info-hi:     #93c5fd;

  /* ── Semantic ── */
  --ff-success:     #16a34a;
  --ff-success-hi:  #4ade80;
  --ff-success-soft: rgba(22, 163, 74, 0.15);

  --ff-warn:        #d97706;
  --ff-warn-hi:     #fbbf24;
  --ff-warn-soft:   rgba(251, 191, 36, 0.10);

  --ff-danger:      #dc2626;
  --ff-danger-hi:   #f87171;
  --ff-danger-soft: rgba(239, 68, 68, 0.12);

  /* ── Provider accents ── */
  --ff-gmail:       #ef4444;
  --ff-outlook:     #3b82f6;

  /* ── Typography ── */
  --ff-font:        'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ff-font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --ff-font-mono:   ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --ff-size-xs:     11px;
  --ff-size-sm:     13px;
  --ff-size-base:   15px;
  --ff-size-md:     16px;
  --ff-size-lg:     19px;
  --ff-size-xl:     22px;
  --ff-size-2xl:    32px;
  --ff-size-3xl:    56px;

  --ff-weight-normal: 400;
  --ff-weight-medium: 500;
  --ff-weight-semi:   600;
  --ff-weight-bold:   700;

  /* ── Radius ── */
  --ff-radius-xs:   4px;
  --ff-radius-sm:   6px;
  --ff-radius:      10px;
  --ff-radius-md:   12px;
  --ff-radius-lg:   16px;
  --ff-radius-xl:   22px;
  --ff-radius-pill: 9999px;

  /* ── Spacing scale ── */
  --ff-space-1:     4px;
  --ff-space-2:     8px;
  --ff-space-3:     12px;
  --ff-space-4:     16px;
  --ff-space-5:     20px;
  --ff-space-6:     24px;
  --ff-space-8:     32px;
  --ff-space-10:    40px;
  --ff-space-12:    48px;

  /* ── Motion ── */
  --ff-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ff-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ff-dur-fast:    120ms;
  --ff-dur:         220ms;
  --ff-dur-slow:    400ms;

  /* ── Shadow / glow ── */
  --ff-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.25);
  --ff-shadow:      0 8px 24px rgba(0, 0, 0, 0.45);
  --ff-shadow-lg:   0 20px 48px rgba(0, 0, 0, 0.55);
  --ff-focus-ring:  0 0 0 3px var(--ff-brand-tint);

  --ff-glow-sm:     0 0 12px var(--ff-brand-halo);
  --ff-glow:        0 0 28px var(--ff-brand-halo), 0 0 48px rgba(219, 32, 40, 0.15);
  --ff-glow-lg:     0 0 40px var(--ff-brand-halo), 0 0 80px var(--ff-brand-flame), 0 0 120px rgba(219, 32, 40, 0.2);
  --ff-glow-blue:   0 0 24px rgba(96, 165, 250, 0.35);
}

/* ── Universal reset ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(219, 32, 40, 0.10), transparent 60%),
    radial-gradient(ellipse 800px 400px at 90% 110%, rgba(96, 165, 250, 0.06), transparent 70%),
    var(--ff-bg-1);
  background-attachment: fixed;
  color: var(--ff-text);
  font-family: var(--ff-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

/* ── Wordmark / icon helpers ── */
.ff-logo-glow {
  filter:
    drop-shadow(0 0 12px var(--ff-brand-halo))
    drop-shadow(0 0 28px rgba(219, 32, 40, 0.25));
}
.ff-logo-glow-lg {
  filter:
    drop-shadow(0 0 18px var(--ff-brand-halo))
    drop-shadow(0 0 45px var(--ff-brand-flame))
    drop-shadow(0 0 90px rgba(219, 32, 40, 0.2));
}

/* ── Focus style ── */
:focus-visible {
  outline: none;
  box-shadow: var(--ff-focus-ring);
  border-radius: var(--ff-radius-sm);
}

/* ──────────────────────────────────────────────────────────────────────
   Page transition (fade-out before navigation)
   Triggered by adding `is-leaving` to <html>. window.ffNav() handles it.
   ────────────────────────────────────────────────────────────────────── */
html.is-leaving body > *:not(.ff-loader) {
  animation: ff-page-out 1000ms var(--ff-ease) forwards;
}
html.is-leaving .ff-loader {
  animation: ff-loader-in 600ms var(--ff-ease) forwards !important;
  pointer-events: auto;
}
@keyframes ff-page-out {
  to { opacity: 0; transform: translateY(-6px) scale(0.995); }
}
@keyframes ff-loader-in {
  from { opacity: 0; visibility: visible; }
  to   { opacity: 1; visibility: visible; }
}

/* ──────────────────────────────────────────────────────────────────────
   Loading screen
   Rendered at the top of every page. Fades out automatically once the
   page has loaded, then becomes pointer-events:none so it never blocks.
   ────────────────────────────────────────────────────────────────────── */
.ff-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background:
    radial-gradient(ellipse 800px 500px at 50% 50%, rgba(219, 32, 40, 0.18), transparent 60%),
    var(--ff-bg-1);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ff-loader-fade 600ms var(--ff-ease-out) 250ms forwards;
  pointer-events: none;
}
.ff-loader__mark {
  width: 140px;
  height: auto;
  animation: ff-loader-pulse 1.6s var(--ff-ease) infinite;
  filter:
    drop-shadow(0 0 18px var(--ff-brand-halo))
    drop-shadow(0 0 50px var(--ff-brand-flame))
    drop-shadow(0 0 100px rgba(219, 32, 40, 0.25));
}

@keyframes ff-loader-pulse {
  0%, 100% { transform: scale(1) rotate(0deg);   opacity: 0.85; }
  50%      { transform: scale(1.08) rotate(2deg); opacity: 1;    }
}
@keyframes ff-loader-fade {
  to { opacity: 0; visibility: hidden; }
}

/* ──────────────────────────────────────────────────────────────────────
   Universal entrance animations (used by hero, cards, forms)
   ────────────────────────────────────────────────────────────────────── */
@keyframes ff-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}
@keyframes ff-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ff-glow-breath {
  0%, 100% { filter: drop-shadow(0 0 18px var(--ff-brand-halo)) drop-shadow(0 0 50px var(--ff-brand-flame)); }
  50%      { filter: drop-shadow(0 0 26px var(--ff-brand-halo)) drop-shadow(0 0 80px var(--ff-brand-flame)); }
}

/* ──────────────────────────────────────────────────────────────────────
   Neon breathing — pulsing red halo UNDERNEATH cards, via a ::before
   pseudo-element so it never fights the card's own box-shadow or hover.
   ────────────────────────────────────────────────────────────────────── */
@keyframes ff-breathe {
  0%, 100% { opacity: 0.45; transform: scale(0.96); }
  50%      { opacity: 0.85; transform: scale(1.02); }
}

.auth-card,
.feature,
.legal-toc,
.legal-callout:not(.legal-callout--warn),
.item {
  position: relative;
  /* z-index ensures content sits on TOP of the glow */
  z-index: 0;
}

.auth-card::after,
.feature::after,
.legal-toc::after,
.legal-callout:not(.legal-callout--warn)::after,
.item::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      rgba(219, 32, 40, 0.55) 0%,
      rgba(219, 32, 40, 0.25) 35%,
      transparent 70%);
  filter: blur(28px);
  animation: ff-breathe 4.5s ease-in-out infinite;
}

/* Slower breathing for screenshots grid (lots of items) */
.item::after {
  animation-duration: 7s;
  inset: -4px;
  background:
    radial-gradient(ellipse at center,
      rgba(219, 32, 40, 0.35) 0%,
      transparent 65%);
  filter: blur(18px);
}

/* Optional utility class — add `ff-breathe` to any custom element */
.ff-breathe {
  position: relative;
  z-index: 0;
}
.ff-breathe::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center,
      rgba(219, 32, 40, 0.45) 0%,
      transparent 70%);
  filter: blur(24px);
  animation: ff-breathe 4.5s ease-in-out infinite;
}

.ff-rise { animation: ff-rise 700ms var(--ff-ease-out) both; }
.ff-rise-1 { animation-delay: 100ms; }
.ff-rise-2 { animation-delay: 200ms; }
.ff-rise-3 { animation-delay: 300ms; }
.ff-rise-4 { animation-delay: 400ms; }

/* ──────────────────────────────────────────────────────────────────────
   Neon button (drop-in via .btn-neon class)
   ────────────────────────────────────────────────────────────────────── */
.btn-neon {
  position: relative;
  background: linear-gradient(135deg, #DB2028 0%, #B81A21 100%);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.35),
    0 0 0 0 var(--ff-brand-halo),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    transform var(--ff-dur) var(--ff-ease-out),
    box-shadow var(--ff-dur) var(--ff-ease-out);
}
.btn-neon:hover {
  transform: translateY(-2px);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    0 0 28px var(--ff-brand-halo),
    0 0 60px var(--ff-brand-flame),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-neon:active {
  transform: translateY(0);
}

/* ──────────────────────────────────────────────────────────────────────
   Glass card variant
   ────────────────────────────────────────────────────────────────────── */
.card-glass {
  background: var(--ff-bg-glass);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-lg);
}
.card-glass:hover {
  border-color: var(--ff-border-glow);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 24px var(--ff-brand-tint);
}