/* ============================================================
   AE Detailing — custom CSS
   Everything Tailwind's utility classes can't express cleanly:
   fonts, hero word-mask reveal, nav blur state, before/after
   slider, FAQ accordion, reduced-motion overrides.
   ============================================================ */

html {
  scroll-behavior: auto; /* Lenis drives smooth scrolling in JS */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow-x: hidden;
}

::selection {
  background: #2f6bff;
  color: #fff;
}

:focus-visible {
  outline: 2px solid #5b8cff;
  outline-offset: 3px;
}

/* Safety net for anchor nav when JS's own offset math doesn't run
   (prefers-reduced-motion path, or if a script fails to load) —
   keeps section titles from landing hidden behind the fixed nav. */
main section[id] {
  scroll-margin-top: 76px;
}

/* ------------------------------------------------------------
   Sticky nav — transparent over hero, frosted once scrolled
   ------------------------------------------------------------ */
#site-nav {
  background-color: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s ease, border-color 0.5s ease, backdrop-filter 0.5s ease;
}

#site-nav.nav-scrolled {
  background-color: rgba(0, 0, 0, 0.65);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

#menu-toggle.is-open .menu-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#menu-toggle.is-open .menu-bar:nth-child(2) { opacity: 0; }
#menu-toggle.is-open .menu-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-link {
  position: relative;
}

.mobile-link {
  color: rgba(255, 255, 255, 0.85);
}

/* ------------------------------------------------------------
   Hero word-mask reveal
   Outer span clips, inner span is what GSAP animates on load.
   Kept visible by default (no motion) unless JS explicitly
   hides it first — see js/main.js heroIntro().
   ------------------------------------------------------------ */
.hero-word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  vertical-align: bottom;
}

.hero-word-inner {
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  /* .process-media-item / .process-copy are deliberately left out — their
     CSS default (only :first-child visible) is already the correct static
     fallback; forcing all three steps to opacity:1 stacks them since
     nothing repositions them when GSAP's pin/crossfade never runs. */
  .hero-word-inner,
  [data-reveal],
  [data-reveal-item],
  [data-statement] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ------------------------------------------------------------
   Ambient glow blob float (transform-only, respects reduced motion)
   ------------------------------------------------------------ */
@keyframes float-slow {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(30px, -24px); }
}

.animate-float-slow {
  animation: float-slow 12s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .animate-float-slow { animation: none; }
}

/* ------------------------------------------------------------
   The Full Detail Process — pinned crossfade (desktop)
   ------------------------------------------------------------ */
.process-media-item {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.process-media-item:first-child {
  opacity: 1;
}

.process-copy {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.process-copy:first-child {
  position: relative;
  opacity: 1;
}

.process-num {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #5b8cff;
}

.process-dots {
  position: relative;
}

.process-dots .dot {
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  transition: background-color 0.3s ease;
}

.process-dots .dot[data-dot="1"] {
  background: #2f6bff;
}

/* ------------------------------------------------------------
   FAQ accordion — CSS grid-rows trick, no JS height math needed
   ------------------------------------------------------------ */
.faq-answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
  min-height: 0;
}

.faq-answer-wrap > div {
  overflow: hidden;
  min-height: 0;
}

.faq-item.open .faq-answer-wrap {
  grid-template-rows: 1fr;
}

.faq-icon {
  transition: transform 0.3s ease;
}

.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

/* ------------------------------------------------------------
   Form inputs
   ------------------------------------------------------------ */
.form-input {
  width: 100%;
  background: #111319;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0.75rem;
  padding: 0.9rem 1.1rem;
  font-size: 0.95rem;
  color: #fff;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.form-input::placeholder {
  color: rgba(255, 255, 255, 0.35);
}

.form-input:focus {
  outline: none;
  border-color: #2f6bff;
}

.form-input option {
  background: #111319;
}

/* ------------------------------------------------------------
   Counters — tabular numbers so width doesn't jitter while counting
   ------------------------------------------------------------ */
.counter {
  font-variant-numeric: tabular-nums;
}