/* DTM 3.8 — progressive motion layer. No remote libraries or artwork. */
.motion-controls[hidden] { display: none; }
.motion-controls { position: absolute; z-index: 5; left: max(40px, calc((100vw - 1480px)/2)); bottom: 28px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: calc(100% - 48px); }
.motion-controls button { min-height: 44px; padding: 10px 16px; border: 1px solid #776536; background: #080808df; color: #f7ce58; font-size: 14px; }
.motion-controls button:hover, .motion-controls button[aria-pressed="true"] { background: var(--yellow); color: #050505; }
.motion-controls button:focus-visible, .gallery-credit a:focus-visible, .gallery-credit button:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
.motion-hint { color: #ddd; font-size: 12px; }
.motion-controls ~ .hero__scroll { left: auto; right: 35px; transform: none; bottom: 43px; }
.motion-enhanced .hero > .hero__image { filter: grayscale(.8) brightness(.7) contrast(1.12); transition: filter .65s ease; }
.motion-enhanced .hero.garage-lit > .hero__image { filter: saturate(1.1) brightness(1) contrast(1.05); }
.garage-reveal { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s ease; -webkit-mask-image: radial-gradient(ellipse 260px 220px at var(--spot-x,70%) var(--spot-y,60%), #000 18%, #000b 50%, transparent 100%); mask-image: radial-gradient(ellipse 260px 220px at var(--spot-x,70%) var(--spot-y,60%), #000 18%, #000b 50%, transparent 100%); }
.garage-reveal.is-tracking { opacity: 1; }
.garage-reveal .hero__image { filter: saturate(1.25) brightness(1.3) contrast(1.05); }
.garage-lit .garage-reveal { opacity: 0; }
.garage-curtain { position: absolute; z-index: 4; inset: 0; display: grid; grid-template-columns: repeat(3,1fr); pointer-events: none; overflow: hidden; }
.garage-curtain i { background: #101010; border-right: 1px solid #524324; transform-origin: top; animation: garage-open 1s cubic-bezier(.76,0,.24,1) both; }
.garage-curtain i:nth-child(2) { animation-delay: .1s; }
.garage-curtain i:nth-child(3) { animation-delay: .2s; }
@keyframes garage-open { from { transform: scaleY(1); } to { transform: scaleY(0); } }
.motion-enhanced .hero__title > * { animation: ignition-type .95s cubic-bezier(.16,1,.3,1) both; animation-delay: .18s; }
.motion-enhanced .hero__title > :nth-child(2) { animation-delay: .32s; }
.motion-enhanced .hero__title > :nth-child(3) { animation-delay: .46s; }
@keyframes ignition-type { from { opacity: 0; clip-path: inset(0 0 100% 0); translate: 40px 35px; } to { opacity: 1; clip-path: inset(-15% -10% -15% -10%); translate: 0 0; } }
.motion-heading { animation: heading-drive .8s cubic-bezier(.16,1,.3,1) both; }
@keyframes heading-drive { from { clip-path: inset(0 100% -20% -5%); translate: 35px 18px; } to { clip-path: inset(-15% -8% -20% -5%); translate: 0 0; } }
.motion-enhanced .section-label.is-visible i { transform-origin: left; animation: rule-grow .85s cubic-bezier(.16,1,.3,1) both; }
@keyframes rule-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.car-arrival { animation: car-arrival .65s cubic-bezier(.16,1,.3,1) both; }
@keyframes car-arrival { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); translate: 30px 0; } to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); translate: 0 0; } }
.machine-stage { position: relative; }
.machine-stage.motion-shift::after { content: ''; position: absolute; inset: 0; z-index: 5; background: var(--yellow); pointer-events: none; animation: gear-shift .65s cubic-bezier(.76,0,.24,1) both; }
@keyframes gear-shift { 0% { clip-path: polygon(0 0,0 0,0 100%,0 100%); } 38% { clip-path: polygon(0 0,85% 0,65% 100%,0 100%); } 100% { clip-path: polygon(100% 0,100% 0,100% 100%,100% 100%); } }
.motion-enhanced .program-panel:not([hidden]) .program-panel__content { animation: panel-in .55s ease both; }
@keyframes panel-in { from { opacity: .3; translate: 24px 0; } to { opacity: 1; translate: 0 0; } }
.motion-enhanced .lightbox[open] img { animation: panel-in .35s ease both; }
@media (hover: hover) and (pointer: fine) {
  .motion-enhanced .button { translate: var(--mag-x,0px) var(--mag-y,0px); transition: translate .22s ease, background .2s ease, color .2s ease; }
  .motion-enhanced .gallery-item { transition: box-shadow .3s ease, translate .3s ease; }
  .motion-enhanced .gallery-item:hover { translate: 0 -5px; box-shadow: 0 10px 0 -6px var(--yellow), 0 20px 36px #0009; }
  .motion-enhanced .gallery-item span { transition: color .25s ease, background .25s ease; }
  .motion-enhanced .gallery-item:hover span { background: #2a2415; color: #ffdb72; }
}
@media(max-width: 900px) { .motion-controls { left: 20px; bottom: 20px; } .motion-hint { display: none; } .motion-controls ~ .hero__scroll { display: none; } .garage-reveal { display: none; } .garage-curtain i { animation-duration: .65s; } }
@media(max-width: 600px) { .motion-controls { left: 14px; gap: 8px; } .motion-controls button { font-size: 13px; padding: 8px 12px; } }
/* The explicit switch pauses legacy animations too. All content remains visible. */
.motion-off *, .motion-off *::before, .motion-off *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.motion-off { scroll-behavior: auto; }
.motion-off .garage-curtain, .motion-off .garage-reveal, .motion-off .speed-cursor { display: none !important; }
.motion-off .reveal, .motion-off .stagger-item { opacity: 1 !important; transform: none !important; }
.motion-off .hero > .hero__image { filter: saturate(.88) contrast(1.08); transform: none !important; }
.motion-off .button, .motion-off .gallery-item { translate: none !important; }
.motion-off .parallax-media { transform: none !important; }
.motion-off .hero.garage-lit > .hero__image { filter: saturate(1.1) brightness(1) contrast(1.05); }
@media(prefers-reduced-motion: reduce) {
  .garage-curtain, .garage-reveal { display: none !important; }
  .motion-enhanced .hero > .hero__image { filter: saturate(.88) contrast(1.08); }
  .motion-enhanced *, .motion-enhanced *::before, .motion-enhanced *::after { animation: none !important; transition: none !important; }
  .motion-enhanced .hero.garage-lit > .hero__image { filter: saturate(1.1) brightness(1) contrast(1.05); }
}