/* ============================================================================
   AutoVault — UI/UX polish pass (additive; loads after sections.css)
   Goal: make real stock photos read as one art-directed cinematic set, lock
   text legibility over imagery, add restrained premium hover motion, and keep
   accessibility (focus rings + reduced-motion) intact.
   ============================================================================ */

:root { --av-red: #CC2C24; --av-ease: cubic-bezier(.22,.61,.36,1); }

/* 1 — Cinematic image cohesion -------------------------------------------------
   Slight desaturate + dim + contrast so mixed-brightness stock shots (red Ferrari
   vs grey BMW vs green classic) settle into the same dark, moody grade. */
image-slot {
  filter: saturate(.86) brightness(.9) contrast(1.06);
  transition: transform 1.1s var(--av-ease), filter .5s var(--av-ease);
}

/* Photo cells get a vignette + faint crimson grade so they belong to the brand. */
.shot-cell, .fac__media, .post__media, .ig-strip > * {
  position: relative;
  overflow: hidden;
}
.shot-cell::after, .fac__media::after, .post__media::after, .ig-strip > *::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(135% 120% at 50% 28%, transparent 52%, rgba(10,10,11,.5) 100%),
    linear-gradient(180deg, rgba(10,10,11,.06), rgba(10,10,11,.4)),
    linear-gradient(0deg, rgba(204,44,36,.05), transparent 42%);
}

/* 2 — Hero legibility scrim ----------------------------------------------------
   Guarantee the headline holds contrast over any hero photo (WCAG text-over-image). */
.hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,11,.5) 0%, rgba(10,10,11,.18) 40%, rgba(10,10,11,.82) 100%);
}

/* 3 — Premium hover micro-interactions (transform/opacity only, no layout shift) */
@media (hover: hover) {
  .shot-cell:hover image-slot,
  .fac__media:hover image-slot,
  .post__media:hover image-slot,
  .ig-strip > *:hover image-slot {
    transform: scale(1.06);
    filter: saturate(.98) brightness(1) contrast(1.06);
  }
  .svc, .tier, .step, .post { transition: transform .25s var(--av-ease), border-color .25s var(--av-ease); }
  .svc:hover, .tier:hover, .step:hover, .post:hover { transform: translateY(-4px); }
}

/* 4 — Accessibility: keep a visible, on-brand focus ring (never remove it) */
a:focus-visible, button:focus-visible, .btn:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--av-red);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 5 — Respect reduced motion: kill the cinematic zoom/transition */
@media (prefers-reduced-motion: reduce) {
  image-slot { transition: none !important; transform: none !important; }
}

/* ============================================================================
   Polish v2 — extra cinematic touches (still restrained)
   ============================================================================ */

/* a — Film grain: subtle moving-texture overlay = expensive, filmic depth */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 9; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* b — Hero Ken Burns: imperceptibly slow drift gives the still life */
@keyframes avKen { from { transform: scale(1.02); } to { transform: scale(1.1) translateY(-1.5%); } }
.hero__media image-slot { animation: avKen 26s ease-in-out infinite alternate; }

/* c — Nav: glass blur once scrolled (translucent + backdrop blur) */
.nav.solid {
  background: rgba(10,10,11,.72) !important;
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
}

/* d — Primary CTA: warm crimson glow + lift on hover */
.btn--primary { transition: transform .2s var(--av-ease), box-shadow .25s var(--av-ease), filter .2s; }
@media (hover:hover){
  .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 34px -10px rgba(204,44,36,.65); filter: brightness(1.05); }
}

/* e — Gallery / media: crimson hairline frame blooms on hover */
.shot-cell::after, .fac__media::after, .post__media::after, .ig-strip > *::after {
  box-shadow: inset 0 0 0 0 rgba(204,44,36,0);
  transition: box-shadow .35s var(--av-ease);
}
@media (hover:hover){
  .shot-cell:hover::after, .fac__media:hover::after, .post__media:hover::after, .ig-strip > *:hover::after {
    box-shadow: inset 0 0 0 1.5px rgba(204,44,36,.55);
  }
}

/* f — Reduced motion: stop the drift */
@media (prefers-reduced-motion: reduce){
  .hero__media image-slot { animation: none !important; }
  body::before { opacity: .04; }
}

.hero__media { overflow: hidden; }

/* multi-page: spacer so inner pages clear the fixed nav; solid nav on inner pages */
.page-pad { height: 88px; }
.shell--inner .nav { background: rgba(10,10,11,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--hair, rgba(255,255,255,.08)); }

/* deploy-only: hide editing tweaks panel */
.twk-panel,.twk-fab{display:none!important}