/* ============================================================
   LCS v11 — premium.css
   App-feel upgrade layer. Loads AFTER home/pages css.
   Smooth-scroll polish · count-up stats · live concierge pill ·
   scroll-progress rail · magnetic CTAs · depth backgrounds.
   Everything gated for reduced-motion + touch where relevant.
   ============================================================ */

/* ============================================================
   CROSS-DOCUMENT VIEW TRANSITIONS — premium app-like page morph.
   Native; Firefox/old Safari fall back to instant nav (no JS).
   ============================================================ */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 420ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ============================================================
   HERO SCROLL PARALLAX — pure CSS scroll-timeline, zero JS,
   zero jank. Desktop only; off for reduced-motion + touch.
   As the hero scrolls away: video drifts up + scales slightly,
   scrim deepens, content gently lifts and fades. Premium depth.
   ============================================================ */
@supports (animation-timeline: view()) {
  @media (min-width: 1025px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .hero__video,
    .hero__poster {
      animation: lcs-hero-parallax linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
      will-change: transform;
    }
    @keyframes lcs-hero-parallax {
      from { transform: scale(1)    translateY(0); }
      to   { transform: scale(1.10) translateY(-7%); }
    }
    .hero__scrim {
      animation: lcs-hero-scrim-deepen linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    @keyframes lcs-hero-scrim-deepen {
      from { opacity: 1; }
      to   { opacity: 1.0; filter: brightness(0.55); }
    }
    .hero__inner {
      animation: lcs-hero-content-lift linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 70%;
    }
    @keyframes lcs-hero-content-lift {
      from { transform: translateY(0);     opacity: 1; }
      to   { transform: translateY(-40px); opacity: 0; }
    }
  }
}

/* ---- Lenis smooth scroll hooks (desktop only) ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }


/* ============================================================
   COUNT-UP TRUST NUMBERS
   The .trust__n elements animate from 0 → target when scrolled in.
   ============================================================ */
.trust__n { font-variant-numeric: tabular-nums; }
.trust__n.is-counting { color: var(--terracotta); }

/* ============================================================
   SCROLL-PROGRESS SIDE RAIL  (desktop only, app-like)
   Fixed dots on the right tracking the page's section anchors.
   ============================================================ */
.scroll-rail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 34;
  display: none;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.scroll-rail__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(26, 26, 26, 0.22);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 280ms var(--ease-editorial), transform 280ms var(--ease-editorial);
}
.scroll-rail__dot:hover { background: rgba(200, 163, 87, 0.6); transform: scale(1.3); }
.scroll-rail__dot.is-active {
  background: var(--gold);
  transform: scale(1.5);
  box-shadow: 0 0 0 4px rgba(200, 163, 87, 0.18);
}
/* On dark sections the rail inverts */
.scroll-rail.on-dark .scroll-rail__dot { background: rgba(245, 240, 230, 0.22); }
.scroll-rail.on-dark .scroll-rail__dot.is-active { background: var(--gold); }
@media (min-width: 1100px) and (pointer: fine) {
  .scroll-rail { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-rail__dot { transition: none; }
}

/* ============================================================
   MAGNETIC CTA + cursor (desktop, pointer:fine, no reduced-motion)
   ============================================================ */
@media (pointer: fine) and (min-width: 1025px) {
  .btn[data-magnet] { will-change: transform; }
}

/* ============================================================
   DEPTH BACKGROUNDS — subtle grain + warm radial on dark sections
   Adds richness without hurting Core Web Vitals (pure CSS).
   ============================================================ */
.section--dark::before,
.vignettes::before,
.fleet-preview::before,
.final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(200, 163, 87, 0.06) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' seed='7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.section--dark > .container,
.vignettes > .container,
.fleet-preview > .container,
.final-cta > .container { position: relative; z-index: 1; }

/* ============================================================
   REVEAL refinement — gentle stagger for grids
   ============================================================ */
@supports (animation-timeline: view()) {
  .reveal-stagger > * {
    animation: lcs-reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-stagger > * { animation: none !important; opacity: 1 !important; transform: none !important; }
}