/* ==========================================================================
   TruDealers - Lift CSS (3D Supreme Lift Architecture)
   Palette: Deep Dark Titanium #030508 · Subdued Obsidian #04060A · Electric Cyan #56E1E9
   Standard: Tekion / Linear Luxury Aerospace · Zero Green · Pure Stealth Dark
   ========================================================================== */

:root {
  --tdx-titanium-deep: #030508;
  --tdx-titanium-alt: #04060A;
  --tdx-glass: rgba(5, 8, 13, 0.92);
  --tdx-glass-hover: rgba(9, 14, 22, 0.96);
  --tdx-cyan: #56E1E9;
  --tdx-cyan-glow: rgba(86, 225, 233, 0.22);
  --tdx-cyan-border: rgba(86, 225, 233, 0.14);
  --tdx-cyan-light: rgba(86, 225, 233, 0.05);
  --tdx-purple-glow: rgba(187, 99, 255, 0.08);
  --tdx-gold: #56E1E9;
  --tdx-gold-border: rgba(86, 225, 233, 0.3);
}

/* Ensure root canvas is pure deep dark titanium */
html, body {
  background-color: var(--tdx-titanium-deep) !important;
  color: var(--ink-soft);
}

/* Prevent offscreen drawer from expanding screenshot width */

/* ==========================================================================
   1. HERO 3D PERSPECTIVE STAGE & AURORA (DARKENED STEALTH)
   ========================================================================== */

/* ==========================================================================
   2. POLO 360 3D STAGE & SPECULAR LIGHT SWEEP
   ========================================================================== */

.tdx-stage {
  perspective: 1400px;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.tdx-stage-tilt {
  width: 100%;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.12s ease-out;
}

.tdx-stage-aura,
.tdx-stage > .tdx-stage-aura { /* beats .td-card > * { position: relative } in subpages.css */
  position: absolute;
  left: 50%;
  bottom: 25px;
  width: 86%;
  height: 120px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(86, 225, 233, 0.22), rgba(86, 225, 233, 0.05) 45%, transparent 75%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
}

@keyframes tdxAuraBreathe {
  0% {
    opacity: 0.55;
    transform: translateX(-50%) scale(0.95);
  }
  100% {
    opacity: 0.85;
    transform: translateX(-50%) scale(1.05);
  }
}

.tdx-orbit {
  aspect-ratio: 16 / 10 !important;
  border-radius: 20px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, #080D14 0%, #020306 85%);
  border: 1px solid var(--tdx-cyan-border);
  box-shadow: 
    0 24px 60px -12px rgba(0, 0, 0, 0.9),
    0 0 30px rgba(86, 225, 233, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  position: relative;
}

.tdx-specular {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  background: radial-gradient(circle 380px at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.1), transparent 70%);
  mix-blend-mode: overlay;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

/* ==========================================================================
   3. SECTIONS & DARKENED OBSIDIAN SURFACES
   ========================================================================== */

/* Depth-1 atmosphere: static cyan aura overhead, no animation cost */

/* Glass Card & 3D Tilt Glare */

/* Raised 3D icon chip - matches the in-app icon treatment */

/* Feature-list check chips - previously unstyled bare glyphs */

/* Number reveal guard - number hidden until tapped, second tap dials/opens */

/* Compact 3D button for inline use */

/* Non-clickable "coming soon" pill - deliberately not a link */

/* Mobile: fan collapses to the active phone only; showroom imgs stay 16:10 desktop renders */

/* Live dealer-site previews - real pages iframed at a fixed viewport and
   scaled to the card: 1280px desktop render, 390px mobile render. */

.tdx-small {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}

/* Example managed post - branded video card */

/* Backdrop blur is the single biggest scroll cost on mobile GPUs -
   halve the radius on small screens where it hurts, keep it on desktop */

/* ==========================================================================
   4. FLOW CHAIN (8 PILLS JOINED)
   ========================================================================== */

/* ==========================================================================
   5. YARD TO WEBSITE (3D PHONE STACK & STEPS)
   ========================================================================== */

/* 3D Phone Stage */

/* Fan positioning based on active index */

/* ==========================================================================
   6. BANDS, SHIELD & COMING SOON STRIP
   ========================================================================== */

/* ==========================================================================
   7. COMPARISON TABLE (RESPONSIVE SCROLL)
   ========================================================================== */

/* Raised highlight on the TruDealers column */

/* ==========================================================================
   8. PRICING & FOUNDING DEALERS
   ========================================================================== */

/* ==========================================================================
   9. SHOWROOMS & FINAL HERO PANEL
   ========================================================================== */

/* ==========================================================================
   10. FOOTER STYLING
   ========================================================================== */

/* ==========================================================================
   11. REVEAL ANIMATIONS & ACCESSIBILITY
   ========================================================================== */

/* Fallback for JS disabled: elements must never remain hidden */

/* Reduced Motion Override */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transform: none !important;
  }
}