/* Motion enhances the approved scene; all final geometry remains in hero.css. */
.brand--minimal { gap: 12px; min-height: 66px; }
.brand-symbol { position: relative; display: block; width: 82px; aspect-ratio: 831 / 488; overflow: hidden; }
.brand-symbol img { position: absolute; top: -31.56%; left: -6.38%; width: auto; height: 154.51%; max-width: none; }
.brand-name { display: grid; gap: 3px; color: #fff; font: 400 15px/1.05 var(--display); letter-spacing: .14em; }
.brand-name > span { letter-spacing: .21em; }
.brand--footer .brand-symbol { width: 88px; }
.brand--footer .brand-name { font-size: 16px; }

.hero { --car-x: 0px; --car-y: 0px; --car-roll: 0deg; --bs-x: 0px; --bs-y: 0px; --panel-shift: 0px; --car-lift: 0px; }
.hero-stage { perspective: 1200px; }
.hero-architecture { transform: translate3d(0, var(--panel-shift), 0); }
.hero-monogram { transform: translateX(-50%) translate3d(var(--bs-x), var(--bs-y), 0); }
.monogram-entrance { position: absolute; inset: 0; display: block; transform-origin: 50% 60%; }
.hero-car--cutout { transform: translateX(-50%) translate3d(var(--car-x), calc(var(--car-y) + var(--car-lift)), 0) rotate(var(--car-roll)); }
.motion-visible .hero-car--cutout { will-change: transform; }
.car-reflection {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mask: url('../assets/images/amg-concept-faf85908.png') center / 100% 100% no-repeat;
  -webkit-mask: url('../assets/images/amg-concept-faf85908.png') center / 100% 100% no-repeat;
}
.car-reflection::before {
  position: absolute;
  top: -30%;
  left: -55%;
  width: 32%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgb(255 230 220 / 4%) 20%, rgb(255 248 233 / 27%) 49%, rgb(255 255 255 / 8%) 62%, transparent);
  opacity: 0;
  transform: translate3d(0, 0, 0) skewX(-19deg);
  content: '';
}

.motion-enabled .monogram-entrance { animation: bs-arrive 1.15s cubic-bezier(.19,1,.22,1) both; }
.motion-enabled .arc-light { stroke-dasharray: 1; animation: arc-ignite 1.85s cubic-bezier(.45,0,.2,1) .25s both; }
.motion-enabled .arc-marker { animation: marker-arrive .65s cubic-bezier(.22,1,.36,1) calc(.8s + var(--order) * .15s) both; }
.motion-enabled .arc-dot { animation: dot-arrive .5s ease-out calc(.95s + var(--order) * .15s) both; }
.motion-enabled .hero-caption { animation: caption-arrive .85s ease-out .4s both; }
.motion-enabled .arc-breath { animation: arc-breathe 6s ease-in-out 2.2s infinite; }
.motion-enabled .car-reflection::before { animation: car-light 12s ease-in-out 1s infinite; }
.motion-paused *, .motion-paused *::before { animation-play-state: paused !important; }

.area-glow { opacity: 0; transition: opacity .4s ease; }
.arc-service { transition: color .35s ease, opacity .35s ease; }
.arc-marker, .arc-dot { transition: filter .35s ease; }
.area-glow.is-active { opacity: 1; }
.arc-service.is-active { color: #f6e7e5; opacity: 1; }
.arc-marker.is-active, .arc-dot.is-active { filter: drop-shadow(0 0 7px #ff273f); }
.arc-hit { pointer-events: all; cursor: pointer; outline: none; }
.arc-hit path { fill: transparent; stroke: transparent; stroke-width: 2; transition: fill .35s ease, stroke .35s ease; }
.arc-hit:hover path { fill: rgb(255 38 60 / 2%); }
.arc-hit:focus-visible path { stroke: #ffb7b0; fill: rgb(255 38 60 / 6%); }
.catalog-card[id] { scroll-margin-top: 100px; }

@keyframes bs-arrive {
  from { opacity: 0; filter: blur(7px); transform: translate3d(0, 14px, -65px) scale(.94); }
  to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes arc-ignite { from { stroke-dashoffset: 1; opacity: .2; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes marker-arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dot-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes caption-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes arc-breathe { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
@keyframes car-light {
  0%, 2% { opacity: 0; transform: translate3d(0, 0, 0) skewX(-19deg); }
  5% { opacity: .85; }
  23% { opacity: .6; }
  29%, 100% { opacity: 0; transform: translate3d(530%, 0, 0) skewX(-19deg); }
}
@media (max-width:600px) {
  .brand-symbol { width: 68px; }
  .brand--minimal { gap: 10px; min-height: 59px; }
  .brand-name { font-size: 12px; }
  .motion-enabled .car-reflection::before { animation-iteration-count: 1; }
  .arc-hit path { stroke-width: 3; }
}
@media (prefers-reduced-motion:reduce) {
  .hero *, .hero *::before { animation: none !important; transition: none !important; }
  .hero-car--cutout, .hero-monogram { transform: translateX(-50%) !important; will-change: auto; }
  .hero-architecture { transform: none; }
  .arc-light { stroke-dashoffset: 0 !important; }
  .car-reflection { display: none; }
}