/* ============================================================
   HISTORY ORBIT — iOS 26 Liquid Glass
   SURGICAL VERSION — only targets specific classes that have
   no existing styles in main.css / components.css.
   No wildcard [class*="..."] selectors. No bare element selectors.
   No ::before/::after on elements that already have them.
   ============================================================ */

/* ----------------------------------------------------------
   EASING TOKENS (additive — do not redefine --radius-* vars)
   ---------------------------------------------------------- */
:root {
  --lg-spring: cubic-bezier(0.34, 1.56, 0.64, 1.00);
  --lg-smooth: cubic-bezier(0.4,  0.0,  0.2,  1.0);
  --lg-ease:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* ============================================================
   OPT-IN UTILITY — add class="liquid-glass" to any element
   ============================================================ */
.liquid-glass {
  background: rgba(255, 252, 245, 0.42);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(200, 155, 70, 0.30);
  border-top-color: rgba(255, 240, 200, 0.60);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(100, 60, 20, 0.10),
              0 1px 0 rgba(255,255,255,0.55) inset;
}


/* ============================================================
   NAVBAR — enhance with blur; do NOT override layout/padding
   ============================================================ */
.navbar {
  backdrop-filter: blur(24px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(200%) !important;
  transition: background 0.3s var(--lg-smooth),
              box-shadow  0.3s var(--lg-smooth),
              padding     0.3s var(--lg-smooth);
}

/* Scroll-shrink state toggled by liquid_glass.js */
.navbar.lg-scrolled {
  background: rgba(255, 252, 245, 0.88) !important;
  box-shadow: 0 4px 24px rgba(100, 60, 20, 0.14),
              0 1px  0  rgba(255,255,255, 0.65) inset !important;
  padding-top:    6px !important;
  padding-bottom: 6px !important;
}

/* Landing-specific slim nav */
.landing-nav {
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}


/* ============================================================
   HERO SECTION — centre the compass logo
   ============================================================ */
.landing-hero-content {
  width:      100% !important;
  margin:     0 auto !important;
  text-align: center !important;
}

.compass-logo-hero {
  display:         flex !important;
  flex-direction:  column !important;
  align-items:     center !important;
  justify-content: center !important;
  margin:          0 auto !important;
}


/* ============================================================
   LANDING CTA BUTTONS — ONLY .landing-btn-primary
   Does NOT touch .btn, .btn-primary, nav-icon-btn, a11y-btn,
   action-btn, country-btn, reaction-btn, etc.
   ============================================================ */
.landing-btn-primary {
  position:   relative !important;
  overflow:   hidden !important;
  box-shadow: 0 8px 32px rgba(107, 56, 18, 0.28),
              0 2px  8px rgba(107, 56, 18, 0.15),
              0 1px  0   rgba(255,255,255, 0.38) inset !important;
  transition: transform   0.24s var(--lg-spring),
              box-shadow  0.24s var(--lg-smooth) !important;
}

.landing-btn-primary:hover {
  transform:  translateY(-2px) scale(1.025) !important;
  box-shadow: 0 14px 40px rgba(107, 56, 18, 0.34),
              0  4px 12px rgba(107, 56, 18, 0.18),
              0  1px  0   rgba(255,255,255, 0.48) inset !important;
}

.landing-btn-primary:active {
  transform:  translateY(1px) scale(0.975) !important;
  box-shadow: 0 3px 10px rgba(107, 56, 18, 0.18) !important;
}


/* ============================================================
   LANDING PAGE CARDS — only lp-* classes defined in welcome.html
   These classes do NOT exist in components.css — safe to style here
   ============================================================ */
.lp-usp-card,
.lp-audience-card,
.lp-step-card {
  /* Only add backdrop-filter — transitions are defined in welcome.html <style> */
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

/* Landing comparison cards (Why It Exists section) */
.lp-compare-card {
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  transition: transform 0.28s var(--lg-spring), box-shadow 0.28s var(--lg-smooth);
}

.lp-compare-card:hover {
  transform: translateY(-4px) !important;
}


/* ============================================================
   LANDING FOOTER — .landing-footer only (not global footer)
   ============================================================ */
.landing-footer {
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
}


/* ============================================================
   LANDING PREVIEW BANNER
   ============================================================ */
.landing-preview-banner {
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}


/* ============================================================
   LANDING STAT DIVIDERS — subtle glow
   ============================================================ */
.landing-stat-divider {
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(200, 150, 60, 0.45) 30%,
    rgba(200, 150, 60, 0.45) 70%,
    transparent 100%
  ) !important;
}


/* ============================================================
   SCROLL REVEAL — used by liquid_glass.js on elements that
   already have class="lg-reveal" or class="lg-reveal-stagger"
   in the HTML. JS does NOT auto-inject these classes.
   ============================================================ */
.lg-reveal {
  opacity:   0;
  transform: translateY(22px);
  transition: opacity   0.55s var(--lg-smooth),
              transform 0.55s var(--lg-spring);
}

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

/* Staggered grid children */
.lg-reveal-stagger > * {
  opacity:   0;
  transform: translateY(18px);
  transition: opacity   0.45s var(--lg-smooth),
              transform 0.45s var(--lg-spring);
}

.lg-reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: none; }
.lg-reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: none; }
.lg-reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: none; }
.lg-reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: none; }
.lg-reveal-stagger.visible > *:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: none; }
.lg-reveal-stagger.visible > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: none; }
.lg-reveal-stagger.visible > *:nth-child(7) { transition-delay: 0.47s; opacity: 1; transform: none; }


/* ============================================================
   ERA TAG STRIP — hover lift on .era-tag
   ============================================================ */
.era-tag {
  transition: background 0.2s var(--lg-smooth),
              transform  0.2s var(--lg-spring) !important;
}

.era-tag:hover {
  background: rgba(160, 98, 42, 0.18) !important;
  transform:  translateY(-2px) !important;
}


/* ============================================================
   SECTION LABELS — subtle glass pill
   Only .landing-section-label; not a wildcard
   ============================================================ */
.landing-section-label {
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}


/* ============================================================
   GUEST LIMIT MODAL — enhance existing modal (already has
   backdrop-filter in components.css — just add spring transition)
   ============================================================ */
.guest-limit-modal {
  transition: transform 0.35s var(--lg-spring),
              opacity   0.25s var(--lg-smooth) !important;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .lg-reveal,
  .lg-reveal-stagger > *,
  .landing-btn-primary,
  .lp-usp-card,
  .lp-audience-card,
  .lp-step-card,
  .lp-compare-card {
    transition: none !important;
    animation:  none !important;
    opacity:    1    !important;
    transform:  none !important;
  }
}


/* ============================================================
   DARK MODE — token overrides only
   ============================================================ */
@media (prefers-color-scheme: dark) {
  .navbar.lg-scrolled {
    background: rgba(25, 15, 5, 0.88) !important;
  }

  .liquid-glass {
    background: rgba(30, 20, 10, 0.50);
    border-color: rgba(255, 200, 100, 0.18);
  }

  .lp-usp-card,
  .lp-audience-card,
  .lp-step-card {
    background: rgba(30, 18, 8, 0.55) !important;
    border-color: rgba(180, 120, 50, 0.22) !important;
  }
}