/* ============================================================
   Sakeenah Auto Solutions — overhaul layer
   Night Service palette · section color journey · 3D canvas plumbing
   Loaded after the inline <style>; ID selectors out-rank classes.
   ============================================================ */

/* ---------- Tier plumbing ----------
   boot.js stamps html[data-tier="full|lite|static"] pre-paint.
   On full/lite, Lenis owns scrolling — native CSS smoothing must be off
   or anchor jumps double-animate. */

html[data-tier="full"],
html[data-tier="lite"] {
  scroll-behavior: auto;
}

/* ---------- 3D canvas layer ----------
   Fixed canvas + scrim live at z:-1 (above the body background, below all
   content). Scrim follows the canvas in the DOM, so it paints on top of it. */

#bg3d,
.bg3d-scrim {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

html[data-tier="full"] #bg3d,
html[data-tier="lite"] #bg3d,
html[data-tier="full"] .bg3d-scrim,
html[data-tier="lite"] .bg3d-scrim {
  display: block;
}

/* body's own background would paint OVER negative-z-index children
   (html has a background, so body's never propagates to the root canvas).
   The html background stays as the fallback behind the canvas. */
html[data-tier="full"] body,
html[data-tier="lite"] body {
  background: transparent;
}

#bg3d { opacity: 0; } /* GSAP owns the fade — no CSS transition here */

.bg3d-scrim {
  background:
    radial-gradient(ellipse at 62% 45%, transparent 32%, rgba(8, 24, 32, 0.5) 95%);
}

/* ---------- See-through sections (full/lite only) ----------
   Sections go translucent so the fixed canvas reads through them;
   cards keep their opaque elevated surfaces for text contrast. */

html[data-tier="full"] .section-lift,
html[data-tier="lite"] .section-lift {
  background: color-mix(in srgb, var(--bg-elev-2) 72%, transparent);
}

/* Hero: drop the photo — the engine IS the hero visual. Keep a left
   text-protection gradient and a bottom fade for the HUD bar. */
html[data-tier="full"] .hero,
html[data-tier="lite"] .hero {
  background-image: none;
}
html[data-tier="full"] .hero::before,
html[data-tier="lite"] .hero::before {
  background:
    linear-gradient(95deg,
      rgba(8, 24, 32, 0.88) 0%,
      rgba(8, 24, 32, 0.62) 38%,
      rgba(8, 24, 32, 0.18) 62%,
      transparent 78%),
    linear-gradient(180deg,
      rgba(8, 24, 32, 0.45) 0%,
      transparent 22%,
      transparent 68%,
      rgba(8, 24, 32, 0.78) 100%);
}

/* ============================================================
   SECTION COLOR JOURNEY — five swatches, six rooms, one night.
   hero/services petrol → makes SILVER → process mauve →
   reviews olive → about smoked gray → contact petrol again.
   Scoped custom properties re-tint every card/line/surface inside
   a room through the normal cascade. The 3D world's clear color
   and fog tween to each room in js/scroll.js SHOTS.
   ============================================================ */

/* ---------- #makes — THE SILVER BAND (all tiers, opaque) ----------
   One light moment: printed-spec-sheet silver, dark petrol ink.
   The marquee strip keeps its own dark background (inline CSS),
   so the brand logos stay on a dark film-strip across the band. */

#makes {
  background: linear-gradient(180deg,
    #C2C6D2 0%,
    #CDD0DA 18%,
    #CDD0DA 82%,
    #C2C6D2 100%);
  --text:        #0F2B3E;
  --text-soft:   #2C3944;
  --text-faint:  #5A6772;
  --red:         #0F2B3E;
  --red-bright:  #081820;
  --red-deep:    #2C3944;
  --red-glow:    rgba(15, 43, 62, 0.22);
  --line:        rgba(8, 24, 32, 0.14);
  --line-strong: rgba(8, 24, 32, 0.28);
}

/* speed-lines ::after was ice-on-dark; on silver it smears — off everywhere */
#makes::after { display: none; }

/* ---------- #process — MAUVE room ---------- */

#process {
  --bg-elev-1: #272025;
  --bg-elev-2: #2F262C;
  --bg-elev-3: #382E35;
  background: linear-gradient(180deg, #261E23 0%, #2B2229 50%, #261E23 100%);
}

html[data-tier="full"] #process,
html[data-tier="lite"] #process {
  background: linear-gradient(180deg,
    color-mix(in srgb, #261E23 80%, transparent) 0%,
    color-mix(in srgb, #2B2229 84%, transparent) 50%,
    color-mix(in srgb, #261E23 80%, transparent) 100%);
}

/* ---------- #reviews — OLIVE room ---------- */

#reviews {
  --bg-elev-1: #23241B;
  --bg-elev-2: #2A2B20;
  --bg-elev-3: #333426;
  background: linear-gradient(180deg, #20211A 0%, #25261C 50%, #20211A 100%);
}

html[data-tier="full"] #reviews,
html[data-tier="lite"] #reviews {
  background: linear-gradient(180deg,
    color-mix(in srgb, #20211A 72%, transparent) 0%,
    color-mix(in srgb, #25261C 78%, transparent) 50%,
    color-mix(in srgb, #20211A 72%, transparent) 100%);
}

/* ---------- #about — SMOKED GRAY room ---------- */

#about {
  --bg-elev-1: #252428;
  --bg-elev-2: #2C2B30;
  --bg-elev-3: #343339;
  background: linear-gradient(180deg, #242326 0%, #29272A 55%, #242326 100%);
}

html[data-tier="full"] #about,
html[data-tier="lite"] #about {
  background: linear-gradient(180deg,
    color-mix(in srgb, #242326 78%, transparent) 0%,
    color-mix(in srgb, #29272A 82%, transparent) 55%,
    color-mix(in srgb, #242326 78%, transparent) 100%);
}

/* About: the portrait frame stays a window onto the canvas — the
   reassembling engine parks inside it ("every bolt back in place"). */
html[data-tier="full"] .section-lift .portrait,
html[data-tier="lite"] .section-lift .portrait {
  background: color-mix(in srgb, var(--bg-elev-3) 22%, transparent);
}

/* ---------- CSS atmosphere retired where WebGL replaces it ----------
   light-roam / sparks-rise / dial-sweep belong to the static tier now
   (speed-lines is gone everywhere — see #makes). hazard-slide (#process)
   and glow-breathe (#contact) stay on all tiers. */
html[data-tier="full"] #services::after,
html[data-tier="lite"] #services::after,
html[data-tier="full"] #reviews::after,
html[data-tier="lite"] #reviews::after,
html[data-tier="full"] #about::after,
html[data-tier="lite"] #about::after {
  display: none;
}

/* ---------- card tilt ----------
   Fast transition while tilting so the pointer-follow doesn't inherit
   the slow reveal transition. */
.tilting {
  transition: transform 0.12s ease-out !important;
  will-change: transform;
}

/* ============================================================
   CARD ELEVATION PASS — make the layering unmistakable:
   3D world (back) → section veil (middle) → floating card (front).

   Full tier: glass — translucent panels that blur the engine
   behind them, lit top edge, real drop shadow.
   Lite/static: no backdrop blur (GPU cost on phones / no canvas),
   so solid brighter surfaces + the same edge/shadow language.
   Room-scoped --bg-elev-* vars keep every card in its room's color.
   ============================================================ */

/* SPEC-SHEET CARDS (all tiers): service, pillar and review cards flip to
   silver with petrol ink — small pages of the service manual floating in
   each dark room, echoing the Makes band. Scoped vars flip every child:
   text, icons, numbers, accents, dividers. */
.section-lift .svc,
.section-lift .pillar,
.quote-card {
  --text:        #0F2B3E;
  --text-soft:   #2C3944;
  --text-faint:  #5A6772;
  --text-deep:   #8A93A0;
  --chrome:      #2C3944;
  --chrome-soft: #5A6772;
  --red:         #0F2B3E;
  --red-bright:  #081820;
  --red-deep:    #2C3944;
  --red-glow:    rgba(15, 43, 62, 0.2);
  --line:        rgba(8, 24, 32, 0.14);
  --line-strong: rgba(8, 24, 32, 0.3);
  --bg-elev-1:   #DCDFE6;
  --bg-elev-2:   #D5D8E0;
  --bg-elev-3:   #E4E7EC;
  background: linear-gradient(180deg, #D4D7E0 0%, #CDD0DA 55%, #C5C9D4 100%);
  border: 1px solid rgba(8, 24, 32, 0.22);
  border-top-color: rgba(255, 255, 255, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 28px 60px rgba(0, 0, 0, 0.55),
    0 3px 10px rgba(0, 0, 0, 0.35);
}

.section-lift .svc:hover,
.section-lift .pillar:hover,
.quote-card:hover {
  background: linear-gradient(180deg, #E2E5EC 0%, #D8DBE4 55%, #CDD0DA 100%);
  border-color: rgba(8, 24, 32, 0.42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 34px 70px rgba(0, 0, 0, 0.6),
    0 4px 12px rgba(0, 0, 0, 0.4);
}

/* creds stay dark glass — instruments, not paper (the tachometer lives here) */
html[data-tier="full"] .section-lift .cred {
  background: color-mix(in srgb, var(--bg-elev-2) 52%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid color-mix(in srgb, var(--text-soft) 18%, transparent);
  border-top-color: color-mix(in srgb, var(--text-soft) 40%, transparent);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.45),
    0 2px 8px rgba(0, 0, 0, 0.3);
}
html[data-tier="lite"] .section-lift .cred,
html[data-tier="static"] .section-lift .cred,
html:not([data-tier]) .section-lift .cred {
  background: var(--bg-elev-3);
  border: 1px solid color-mix(in srgb, var(--text-soft) 18%, transparent);
  border-top-color: color-mix(in srgb, var(--text-soft) 36%, transparent);
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.25);
}