/* ═══════════════════════════════════════════════════════════════════════
   theme.css — United Drivers Design Tokens
   Single source of truth for all colors, typography and spacing.
   Import this file in every HTML/CSS file of the project.
   ═══════════════════════════════════════════════════════════════════════

   COLOR PALETTE — "Neons" brand palette
   ───────────────────────────────────────────────────────────────────────
   --ud-yellow    #FFAF19   Accent / warnings / highlights
   --ud-pink      #FF386B   Destructive / hot accent / photo-op badge
   --ud-green     #B5FF63   PRIMARY BRAND COLOR — CTAs, links, logo mark
   --ud-cyan      #4FFFFC   Track Day badge / info states
   --ud-purple    #5824C7   Secondary accent / roadmap / decorative

   Surface scale (dark mode)
   ───────────────────────────────────────────────────────────────────────
   --ud-bg        #0D0D0D   Page background    (deepest)
   --ud-surface   #141414   Section background (one step up)
   --ud-card      #1C1C1C   Card background
   --ud-elevated  #242424   Hovered / active card
   --ud-border    #2E2E2E   Dividers, card borders
   --ud-border-subtle #1E1E1E  Very subtle separator

   Text scale
   ───────────────────────────────────────────────────────────────────────
   --ud-text-primary   #F2F2F2   Headings, body copy
   --ud-text-secondary #A0A0A0   Supporting text, labels
   --ud-text-muted     #5E5E5E   Placeholder, disabled, footnotes

   Event-type badge colors (mirrors the app's own system)
   ───────────────────────────────────────────────────────────────────────
   Cruise     → --ud-purple
   Track Day  → --ud-cyan
   Meetup     → --ud-yellow
   Photo Op   → --ud-pink
   Car Show   → --ud-green  (primary brand color)

   Typography
   ───────────────────────────────────────────────────────────────────────
   Font family : Manrope (Google Fonts)
   Weights used: 400 (body), 600 (semibold), 700 (bold), 800 (extrabold), 900 (black)
   Base size   : 16 px (1 rem)
   Scale       : 14 / 16 / 18 / 20 / 24 / 30 / 36 / 48 / 60 px

   Spacing / Radius
   ───────────────────────────────────────────────────────────────────────
   --ud-radius-sm   8px
   --ud-radius-md  12px
   --ud-radius-lg  16px
   --ud-radius-xl  20px
   --ud-radius-pill 999px

   Shadows & Glows
   ───────────────────────────────────────────────────────────────────────
   --ud-glow-primary  0 8px 32px rgba(181,255,99,0.30)
   --ud-glow-pink     0 8px 24px rgba(255,56,107,0.28)
   --ud-glow-cyan     0 8px 24px rgba(79,255,252,0.22)

   Transitions
   ───────────────────────────────────────────────────────────────────────
   --ud-transition   0.22s ease
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800;900&display=swap');

/* Keyframe AUSSERHALB von @theme */
@keyframes marquee {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

@theme {
  /* Nur der Token-Verweis bleibt hier */
  --animate-marquee: marquee 30s linear infinite;
}

/* ── CSS Custom Properties (variables) ─────────────────────────────── */
:root {

  /* Brand palette */
  --ud-yellow:  #FFAF19;
  --ud-pink:    #FF386B;
  --ud-green:   #B5FF63;        /* PRIMARY */
  --ud-cyan:    #4FFFFC;
  --ud-purple:  #5824C7;        /* dark/saturated — decorative backgrounds */
  --ud-purple-light: #9B6DFF;  /* readable text on dark backgrounds (badges) #a98fff  */

  /* Derived / semantic aliases */
  --ud-brand:           var(--ud-green);
  --ud-brand-dim:       rgba(181, 255, 99, 0.13);   /* bg tint for badges and icon chips */
  --ud-brand-border:    rgba(181, 255, 99, 0.30);   /* border on badge/chip              */

  /* Opacity tints per brand color — badges, icon chips, roadmap circles */
  --ud-cyan-dim:            rgba(79,  255, 252, 0.12);
  --ud-cyan-border:         rgba(79,  255, 252, 0.30);
  --ud-yellow-dim:          rgba(255, 175,  25, 0.13);
  --ud-yellow-border:       rgba(255, 175,  25, 0.30);
  --ud-pink-dim:            rgba(255,  56, 107, 0.13);
  --ud-pink-border:         rgba(255,  56, 107, 0.30);
  --ud-purple-dim:          rgba(88,   36, 199, 0.18);
  --ud-purple-border:       rgba(88,   36, 199, 0.38);
  --ud-purple-light-border: rgba(155, 109, 255, 0.38);
  --ud-muted-dim:           rgba(160, 160, 160, 0.10);
  --ud-muted-border:        rgba(160, 160, 160, 0.25);

  /* Surface scale */
  --ud-bg:              #0D0D0D;
  --ud-surface:         #141414;
  --ud-card:            #1C1C1C;
  --ud-elevated:        #242424;
  --ud-border:          #2E2E2E;
  --ud-border-subtle:   #1E1E1E;

  /* Text scale */
  --ud-text-primary:    #F2F2F2;
  --ud-text-secondary:  #A0A0A0;
  --ud-text-muted:      #5E5E5E;

  /* Typography */
  --ud-font:            'Manrope', sans-serif;
  --ud-font-size-base:  16px;

  /* Border radius */
  --ud-radius-sm:       8px;
  --ud-radius-md:       12px;
  --ud-radius-lg:       16px;
  --ud-radius-xl:       20px;
  --ud-radius-pill:     999px;

  /* Glows */
  --ud-glow-primary:    0 8px 32px rgba(181, 255, 99, 0.30);
  --ud-glow-primary-lg: 0 12px 48px rgba(181, 255, 99, 0.22);
  --ud-glow-pink:       0 8px 24px rgba(255,  56, 107, 0.28);
  --ud-glow-cyan:       0 8px 24px rgba( 79, 255, 252, 0.22);
  --ud-glow-purple:     0 8px 24px rgba( 88,  36, 199, 0.35);

  /* Transitions */
  --ud-transition:      0.22s ease;
}

/* ── Reset / Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: var(--ud-font-size-base);
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--ud-bg);
  color: var(--ud-text-primary);
  font-family: var(--ud-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
}

/* ── Typography helpers ─────────────────────────────────────────────── */
.ud-text-brand    { color: var(--ud-brand); }
.ud-text-yellow   { color: var(--ud-yellow); }
.ud-text-pink     { color: var(--ud-pink); }
.ud-text-cyan     { color: var(--ud-cyan); }
.ud-text-purple   { color: var(--ud-purple); }
.ud-text-muted    { color: var(--ud-text-muted); }
.ud-text-secondary{ color: var(--ud-text-secondary); }

/* ── Surface helpers ────────────────────────────────────────────────── */
.ud-bg-card     { background: var(--ud-card); }
.ud-bg-surface  { background: var(--ud-surface); }
.ud-border      { border: 1px solid var(--ud-border); }

/* ── Button base ────────────────────────────────────────────────────── */
.ud-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--ud-font);
  font-weight: 700;
  font-size: 1rem;
  padding: 1rem 1.75rem;
  border-radius: var(--ud-radius-pill);
  border: none;
  cursor: pointer;
  transition: opacity var(--ud-transition), transform var(--ud-transition);
  text-decoration: none;
  white-space: nowrap;
}
.ud-btn:hover   { opacity: 0.88; }
.ud-btn:active  { transform: scale(0.97); }

/* Primary CTA — green brand */
.ud-btn-primary {
  background: var(--ud-green);
  color: #0D0D0D;              /* dark text on bright green for max contrast */
  box-shadow: var(--ud-glow-primary);
}

/* Secondary / Facebook */
.ud-btn-facebook {
  background: #1877F2;
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(24,119,242,0.28);
  border-radius: var(--ud-radius-xl);
}

/* ── Focus ring (accessibility) ─────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--ud-green);
  outline-offset: 3px;
}

/* ── Badge pill (event types) ───────────────────────────────────────── */
.ud-badge {
  display: inline-block;
  padding: 4px 13px;
  border-radius: var(--ud-radius-pill);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Card ───────────────────────────────────────────────────────────── */
.ud-card {
  background: var(--ud-card);
  border: 1px solid var(--ud-border);
  border-radius: var(--ud-radius-xl);
  padding: 1.75rem;
  transition: transform var(--ud-transition), border-color var(--ud-transition);
}
.ud-card:hover {
  transform: translateY(-3px);
  border-color: var(--ud-brand-border);
}

/* ── Icon chip ──────────────────────────────────────────────────────── */
.ud-icon-chip {
  width: 3rem;
  height: 3rem;
  border-radius: var(--ud-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Scroll-reveal animation ────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible { opacity: 1; transform: none; }

/* Stagger helpers */
.delay-1 { transition-delay: 0.10s; }
.delay-2 { transition-delay: 0.20s; }
.delay-3 { transition-delay: 0.30s; }
.delay-4 { transition-delay: 0.40s; }
.delay-5 { transition-delay: 0.50s; }
.delay-6 { transition-delay: 0.60s; }

/* ── Parallax (desktop only) ────────────────────────────────────────── */
.parallax-bg {
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  /* Disable on touch — prevents scroll jank on iOS/Android */
  .parallax-bg { background-attachment: scroll; }
}

/* ── Background slideshow layers ───────────────────────────────────── */
/* Two stacked divs inside #hero; JS fades between them (cross-dissolve).
   Desktop: JS drives half-speed parallax.
   Mobile:  background-attachment:fixed sticks the image (works on Android;
            iOS Safari ignores it and falls back to normal scroll). */
.bg-layer {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 2.5s ease-in-out;
  z-index: 0;
}
.bg-layer.active { opacity: 1; }
@media (max-width: 768px) {
  .bg-layer { background-attachment: fixed; }
}

/* ── Hero gradient overlay ──────────────────────────────────────────── */
.hero-overlay {
  background: linear-gradient(
    to bottom,
    rgba(13,13,13,0.45) 0%,
    rgba(13,13,13,0.78) 55%,
    #0D0D0D 100%
  );
}

/* ── Section overlay (features bg) ─────────────────────────────────── */
.section-overlay {
  background: rgba(13,13,13,0.93);
}

/* ── Roadmap — connector lines are now inline flex elements in HTML ─── */
/* (no separate CSS needed; lines are <div> elements in the left column) */

/* ── Input field ────────────────────────────────────────────────────── */
.ud-input {
  background: var(--ud-card);
  border: 2px solid var(--ud-border);
  border-radius: var(--ud-radius-lg);
  padding: 1rem 1.25rem;
  color: var(--ud-text-primary);
  font-family: var(--ud-font);
  font-size: 1rem;
  font-weight: 600;
  width: 100%;
  transition: border-color var(--ud-transition);
}
.ud-input::placeholder { color: var(--ud-text-muted); }
.ud-input:focus        { border-color: var(--ud-green); outline: none; }
.ud-input.error        { border-color: var(--ud-pink); }

/* ── Divider ────────────────────────────────────────────────────────── */
.ud-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.75rem 0;
}
.ud-divider::before,
.ud-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ud-border);
}
.ud-divider span {
  color: var(--ud-text-muted);
  font-size: 0.875rem;
  font-weight: 600;
}

/* ── Success banner ─────────────────────────────────────────────────── */
.ud-success {
  color: var(--ud-green);
  background: rgba(181,255,99,0.08);
  border: 1px solid rgba(181,255,99,0.25);
  border-radius: var(--ud-radius-lg);
  padding: 1rem 1.5rem;
  font-weight: 700;
  font-size: 1rem;
}