/* Only transform/opacity animate; there is no persistent canvas or video loop. */
.landing-page #vehicle-visual { --view-accent: #5f6862; }
.landing-page #vehicle-visual[data-view="wiring"] { --view-accent: #078e91; }
.landing-page #vehicle-visual[data-view="service"] { --view-accent: #c77920; }
.landing-page .public-car-stage { overflow: hidden; }
.landing-page .public-car-media .public-car-layer { position: absolute; inset: 0; opacity: 0; transform: translateY(5px) scale(1.012); transition: opacity .8s ease, transform 1.1s var(--public-ease); pointer-events: none; }
.landing-page .public-car-media .public-car-layer.is-active { opacity: 1; transform: translateY(0) scale(1); }
.landing-page .public-car-media .public-car-layer-service img { width: auto; max-width: 100%; height: 100%; margin-inline: auto; object-fit: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 10%, #000 92%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent), linear-gradient(transparent, #000 10%, #000 92%, transparent); mask-composite: intersect; }
.landing-page .public-car-layer-service { background: radial-gradient(ellipse, rgba(241,181,91,.12), transparent 65%); }
.landing-page .public-view-label { display: inline-flex; align-items: center; gap: 8px; position: absolute; right: 0; top: 0; z-index: 2; padding: 7px 11px; border: 1px solid #d9ddd3; border-radius: 6px; color: var(--view-accent); background: rgba(250,250,247,.88); font-size: 8px; letter-spacing: .13em; pointer-events: none; }
.landing-page .public-view-label i { width: 5px; height: 5px; border-radius: 50%; background: var(--view-accent); }
.landing-page .public-hotspot { z-index: 3; }
.landing-page #vehicle-visual[data-view="wiring"] .public-hotspot { border-color: #079fa0; color: #17696a; background: rgba(223,251,246,.6); box-shadow: 0 0 0 5px rgba(10,166,163,.08); }
.landing-page #vehicle-visual[data-view="service"] .public-hotspot { border-color: #c99045; color: #865c23; background: rgba(255,244,223,.7); box-shadow: 0 0 0 5px rgba(212,147,55,.08); }
.landing-page #vehicle-visual[data-view="service"] .public-hotspot-engine { left: 36%; top: 65%; }
.landing-page #vehicle-visual[data-view="service"] .public-hotspot-transmission { left: 58%; top: 70%; }
.landing-page #vehicle-visual[data-view="service"] .public-hotspot-wiring { left: 70%; top: 30%; }
.landing-page #vehicle-visual:not([data-view="overview"]) .public-hotspot::before { background: var(--view-accent); box-shadow: none; }
.landing-page #vehicle-visual:not([data-view="overview"]) .public-hotspot:hover,
.landing-page #vehicle-visual:not([data-view="overview"]) .public-hotspot[aria-pressed="true"] { background: #fff; box-shadow: 0 0 0 7px rgba(80,96,76,.1); }
.landing-page .public-visual-controls { display: flex; align-items: center; justify-content: center; gap: 9px; }
.landing-page .public-visual-modes { margin: 0; }
.landing-page .public-autoplay-toggle { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border: 1px solid #c7cac1; border-radius: 50%; color: #6f7868; background: transparent; padding: 0; flex: 0 0 auto; }
.landing-page .public-autoplay-toggle:hover:not(:disabled) { color: #171818; background: #e7eae1; }
.landing-page .public-autoplay-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.landing-page .public-autoplay-toggle .public-icon-play { display: none; }
.landing-page .public-autoplay-toggle[aria-pressed="true"] .public-icon-play { display: block; }
.landing-page .public-autoplay-toggle[aria-pressed="true"] .public-icon-pause { display: none; }
.landing-page .public-car-scan { position: absolute; inset: 17% auto 13% 0; width: 8%; background: linear-gradient(90deg, transparent, rgba(24,210,206,.13), transparent); opacity: 0; pointer-events: none; }
.landing-page [data-view="wiring"][data-animate="true"] .public-car-scan { animation: public-hero-scan 2.2s ease-out 1 both; }
.landing-page [data-view="service"][data-animate="true"] .public-car-scan { background: linear-gradient(90deg, transparent, rgba(235,168,67,.18), transparent); animation: public-hero-service-scan 2.2s ease-out 1 both; }
.landing-page [data-animate="false"] .public-car-scan { animation-play-state: paused; }
.landing-page [data-animate="false"] .public-car-media,
.landing-page [data-animate="false"] .public-car-layer { transition: none; }
@keyframes public-hero-scan { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 85% { opacity: .6; } 100% { transform: translateX(1150%); opacity: 0; } }
@keyframes public-hero-service-scan { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 85% { opacity: .6; } 100% { transform: translateX(1150%); opacity: 0; } }
@media (max-width: 800px) { .landing-page .public-view-label { right: 5px; top: 9px; } }
@media (max-width: 520px) {
  .landing-page .public-visual-modes button { padding-inline: 8px; font-size: 9px; }
  .landing-page .public-autoplay-toggle { width: 31px; height: 31px; }
  .landing-page .public-visual-controls { gap: 7px; }
  .landing-page .public-view-label { padding: 5px 8px; font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .landing-page .public-car-layer { transform: none !important; transition: none !important; }
  .landing-page .public-car-scan { display: none !important; animation: none !important; }
}