/* ============================================================
   oomph.css v2 - two-metal uplift + showroom turntable
   Gold = warm accent (star). Silver = cool structure (chrome).
   Load AFTER styles.css and fleet.css. Overrides tokens and
   adds atmosphere; touches no existing rule destructively.
   No mix-blend layers (v1's flicker source is removed).
   ASCII only. WCAG AA preserved. Reduced-motion respected.
   ============================================================ */

/* ---- 1. Tokens: brighter gold + a real silver metal ------- */
:root {
  --gold:        #e3b563;
  --gold-bright: #f6d492;
  --gold-deep:   #b3873f;
  --gold-soft:   rgba(227, 181, 99, 0.46);

  --silver:      #e9edf3;   /* chrome highlight  */
  --silver-mid:  #aab2be;   /* brushed body      */
  --silver-deep: #6c7480;   /* shadow edge       */
  --silver-soft: rgba(196, 205, 216, 0.30);

  --bg-0: #060507;          /* a hair warmer than #050506 */
  --bg-1: #0b0a0c;
}

/* Brushed-metal gradient helpers */
.metal-silver {
  background: linear-gradient(120deg,
    var(--silver) 0%, var(--silver-mid) 42%,
    var(--silver) 55%, var(--silver-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* ---- 2. FLICKER FIX --------------------------------------- *
   Kill the old blend-mode sheen sweep and the bobbing float on
   the legacy single-car hero. The turntable replaces both.    */
.hero-car::after { display: none !important; }
.float-slow { animation: none !important; }

/* ---- 3. Visible section rhythm (static, no repaint) ------- *
   Odd = warm graphite. Even = cool graphite with a silver top
   sheen. This is what breaks the monotone tunnel while you    *
   scroll. Backgrounds are static gradients (flicker-free).    */
.section:nth-of-type(odd) {
  background-color: #0a0807;
  background-image: linear-gradient(180deg,
    rgba(227, 181, 99, 0.05) 0%, transparent 26%,
    transparent 84%, rgba(0, 0, 0, 0.32) 100%);
}
.section:nth-of-type(even) {
  background-color: #08090b;
  background-image: linear-gradient(180deg,
    rgba(196, 205, 216, 0.06) 0%, transparent 24%,
    transparent 84%, rgba(0, 0, 0, 0.32) 100%);
}

/* Warm pool behind each section heading (no blend mode) */
.section-head { position: relative; }
.section-head::after {
  content: ""; position: absolute; z-index: -1;
  left: -4%; top: 4%; width: 42%; height: 150%;
  pointer-events: none;
  background: radial-gradient(58% 58% at 30% 40%,
    rgba(227, 181, 99, 0.12), transparent 72%);
}

/* Two-metal eyebrow tick: a gold dash trailed by a silver one */
.eyebrow::before {
  background: linear-gradient(90deg, var(--gold), var(--silver-mid));
  box-shadow: 0 0 12px rgba(227, 181, 99, 0.55);
}

/* ---- 4. Warm grade on ATMOSPHERE photos only -------------- *
   Skyline / city / band imagery gets the accent's warmth.
   Vehicle photos are left crisp and true (buyers want the     *
   real car), so .tt-slide / fleet imagery is untouched here.  */
.hero-skyline img,
.areas-skyline img,
.svc-hero-skyline img,
.svc-band-media img,
.chi-figure img {
  filter: sepia(0.36) saturate(1.4) hue-rotate(-12deg)
          contrast(1.05) brightness(0.95);
}

/* ---- 5. Metallic buttons ---------------------------------- */
.btn-primary {
  background: linear-gradient(135deg,
    var(--gold-bright) 0%, var(--gold) 44%, var(--gold-deep) 100%);
  color: #17120a; border-color: transparent;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55),
              inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn-primary:hover {
  color: #120e07;
  box-shadow: 0 16px 40px rgba(0,0,0,0.6),
              0 0 0 1px var(--gold-soft),
              inset 0 1px 0 rgba(255,255,255,0.5);
}
/* Ghost button reads as brushed chrome edge */
.btn-ghost {
  border-color: transparent;
  background:
    linear-gradient(#0c0c0f, #0c0c0f) padding-box,
    linear-gradient(135deg, var(--silver), var(--silver-deep)) border-box;
  border: 1px solid transparent;
}
.btn-ghost:hover {
  background:
    linear-gradient(#141418, #141418) padding-box,
    linear-gradient(135deg, var(--silver), var(--gold)) border-box;
}

/* ============================================================
   6. THE SHOWROOM TURNTABLE (signature)
   ============================================================ */
.turntable {
  position: relative;
  width: 100%;
  padding: 6px 0 8px;
  outline: none;
}
.turntable:focus-visible { outline: 2px solid var(--gold); outline-offset: 8px; border-radius: 16px; }

/* Chrome platform rings */
.tt-rings {
  position: absolute; left: 50%; top: 46%;
  width: 108%; transform: translate(-50%, -50%);
  z-index: 1; pointer-events: none;
}

/* Lit floor pool + reactive spotlight (opacity only) */
.tt-pool {
  position: absolute; left: 50%; bottom: 12%;
  width: 96%; aspect-ratio: 5 / 1.5; transform: translateX(-50%);
  z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side,
    rgba(233, 237, 243, 0.20), rgba(233,237,243,0.05) 52%, transparent 72%);
  filter: blur(3px);
}
.tt-spot {
  position: absolute; left: 50%; top: -6%;
  width: 80%; aspect-ratio: 1 / 1; transform: translateX(-50%);
  z-index: 0; pointer-events: none; opacity: 0.5;
  background: radial-gradient(50% 50% at 50% 30%,
    rgba(227, 181, 99, 0.16), transparent 62%);
}

/* Slides: crossfade, no blend mode */
.tt-track {
  position: relative; z-index: 2;
  aspect-ratio: 750 / 430; width: 100%;
}
.tt-slide {
  position: absolute; inset: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transform: scale(0.985);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out),
              visibility 0s linear 0.7s;
}
.tt-slide.is-active {
  opacity: 1; visibility: visible; transform: scale(1);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}
.tt-slide img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,0.55));
}

/* Caption: silver class label, serif name, silver spec, gold link */
.tt-caption {
  position: relative; z-index: 3;
  margin-top: 6px; display: grid; gap: 4px;
  justify-items: start;
}
.tt-class {
  font-family: var(--font-label);
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase;
  background: linear-gradient(120deg, var(--silver), var(--silver-mid) 60%, var(--silver-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tt-name {
  font-family: var(--font-display);
  font-size: var(--step-2); line-height: 1.05; color: var(--ink-0);
}
.tt-spec {
  font-family: var(--font-body);
  font-size: 0.85rem; color: var(--silver-mid); letter-spacing: 0.02em;
}
.tt-link {
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.04em; color: var(--gold);
  text-decoration: none; margin-top: 2px;
  border-bottom: 1px solid var(--gold-soft); padding-bottom: 2px;
  transition: gap 0.3s, color 0.3s, border-color 0.3s;
}
.tt-link::after { content: " \2192"; }
.tt-link:hover { color: var(--gold-bright); border-color: var(--gold); }

/* Settle: caption lifts in on each change (transform+opacity) */
@keyframes tt-settle {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tt-settle { animation: tt-settle 0.55s var(--ease-out); }

/* Controls */
.tt-controls {
  position: relative; z-index: 3;
  display: flex; align-items: center; gap: 14px;
  margin-top: 16px;
}
.tt-arrow {
  width: 42px; height: 42px; flex: none; cursor: pointer;
  border-radius: 50%;
  background:
    linear-gradient(#0d0d10, #0d0d10) padding-box,
    linear-gradient(135deg, var(--silver), var(--silver-deep)) border-box;
  border: 1px solid transparent; position: relative;
  transition: transform 0.25s var(--ease-out), background 0.25s;
}
.tt-arrow::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 9px; height: 9px;
  border-right: 1.6px solid var(--silver); border-bottom: 1.6px solid var(--silver);
}
.tt-prev::before { transform: translateX(2px) rotate(135deg); }
.tt-next::before { transform: translateX(-2px) rotate(-45deg); }
.tt-arrow:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(#141319, #141319) padding-box,
    linear-gradient(135deg, var(--gold-bright), var(--gold-deep)) border-box;
}
.tt-arrow:hover::before { border-color: var(--gold-bright); }
.tt-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.tt-dots { display: flex; align-items: center; gap: 8px; }
.tt-dot {
  width: 8px; height: 8px; padding: 0; cursor: pointer;
  border: none; border-radius: 50%;
  background: var(--silver-deep); opacity: 0.6;
  transition: width 0.3s var(--ease-out), background 0.3s, opacity 0.3s;
}
.tt-dot.is-current {
  width: 24px; border-radius: 5px; opacity: 1;
  background: linear-gradient(90deg, var(--gold-bright), var(--gold-deep));
}
.tt-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.tt-counter {
  position: absolute; top: 2px; right: 0; z-index: 3;
  font-family: var(--font-label); font-size: 0.72rem;
  letter-spacing: 0.22em; color: var(--silver-mid);
}
.tt-counter .tt-index { color: var(--silver); }

/* ---- Quality floor ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tt-slide { transition: opacity 0.001ms; }
  .tt-settle { animation: none; }
  .tt-spot { display: none; }
}

@media (max-width: 640px) {
  .tt-controls { justify-content: center; }
  .tt-counter { position: static; margin-top: 10px; text-align: center; }
  .tt-caption { justify-items: center; text-align: center; }
}