[data-motion^="grz-"] { contain: paint; }

/* 1. A vehicle enters the scale, the deck settles, then the terminal reads the class. */
.js [data-motion="grz-weighbridge"] .grz-hero-copy { animation: grzWeighCopy .88s cubic-bezier(.18,.8,.24,1) both paused; }
.js [data-motion="grz-weighbridge"] .grz-weigh-deck { animation: grzWeighDeck 1.12s cubic-bezier(.2,.72,.22,1) .18s both paused; }
.js [data-motion="grz-weighbridge"] .grz-weigh-deck > span { animation: grzWeighPlate .68s cubic-bezier(.2,.8,.2,1) both paused; }
.js [data-motion="grz-weighbridge"] .grz-weigh-deck > span:nth-child(2) { animation-delay: .12s; }
.js [data-motion="grz-weighbridge"] .grz-weigh-deck > span:nth-child(3) { animation-delay: .24s; }
.js [data-motion="grz-weighbridge"] .grz-weigh-deck > span:nth-child(4) { animation-delay: .36s; }
.js [data-motion="grz-weighbridge"] .grz-terminal-screen strong { animation: grzWeighDigits 1.25s steps(6,end) .42s both paused; }
.js [data-motion="grz-weighbridge"] .grz-terminal-screen i { animation: grzWeighSignal 1.25s steps(3,end) infinite both paused; }
.js [data-motion="grz-weighbridge"] .grz-terminal-screen i:nth-of-type(2) { animation-delay: .16s; }
.js [data-motion="grz-weighbridge"] .grz-terminal-screen i:nth-of-type(3) { animation-delay: .32s; }
.js [data-motion="grz-weighbridge"] .grz-terminal-beam span { animation: grzWeighBeam 1.5s cubic-bezier(.3,.02,.25,1) .25s both paused; }
.js [data-motion="grz-weighbridge"].is-motion-active .grz-hero-copy,
.js [data-motion="grz-weighbridge"].is-motion-active .grz-weigh-deck,
.js [data-motion="grz-weighbridge"].is-motion-active .grz-weigh-deck > span,
.js [data-motion="grz-weighbridge"].is-motion-active .grz-terminal-screen strong,
.js [data-motion="grz-weighbridge"].is-motion-active .grz-terminal-screen i,
.js [data-motion="grz-weighbridge"].is-motion-active .grz-terminal-beam span { animation-play-state: running; }
@keyframes grzWeighCopy { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 100% { opacity: 1; clip-path: inset(0); } }
@keyframes grzWeighDeck { 0% { opacity: 0; transform: translateX(32%) skewX(-8deg); } 68% { opacity: 1; transform: translateX(-2%) skewX(1deg); } 100% { opacity: 1; transform: translateX(0) skewX(0); } }
@keyframes grzWeighPlate { 0% { transform: translateY(-14px); filter: brightness(1.4); } 62% { transform: translateY(5px); filter: brightness(.8); } 100% { transform: translateY(0); filter: brightness(1); } }
@keyframes grzWeighDigits { 0% { opacity: 0; filter: blur(7px); letter-spacing: 10px; } 70% { opacity: 1; filter: blur(0); letter-spacing: -2px; } 100% { opacity: 1; filter: none; letter-spacing: 0; } }
@keyframes grzWeighSignal { 0%, 38% { opacity: .18; transform: scaleX(.18); transform-origin: left; } 39%, 100% { opacity: 1; transform: scaleX(1); transform-origin: left; } }
@keyframes grzWeighBeam { 0% { transform: rotate(-88deg); opacity: .4; } 64% { transform: rotate(7deg); opacity: 1; } 100% { transform: rotate(0); opacity: 1; } }

/* 2. Cargo cells settle independently, latches close, and a plumb line checks balance. */
.js [data-motion="grz-cargo-lock"] .grz-cargo-photo { animation: grzCargoPhotoReveal 1.02s cubic-bezier(.16,.8,.22,1) both paused; }
.js [data-motion="grz-cargo-lock"] .grz-cargo-cell { animation: grzCargoCell .76s cubic-bezier(.14,.75,.22,1.08) both paused; animation-delay: calc(.12s + var(--cell) * 125ms); }
.js [data-motion="grz-cargo-lock"] .grz-cargo-cell > i { animation: grzCargoLatch .78s steps(4,end) both paused; animation-delay: calc(.5s + var(--cell) * 125ms); }
.js [data-motion="grz-cargo-lock"] .grz-cargo-plumb { animation: grzCargoPlumb 2.2s cubic-bezier(.45,.02,.36,1) .18s both paused; }
.js [data-motion="grz-cargo-lock"] .grz-cargo-heading { animation: grzCargoSurvey .82s ease-out both paused; }
.js [data-motion="grz-cargo-lock"].is-motion-active .grz-cargo-photo,
.js [data-motion="grz-cargo-lock"].is-motion-active .grz-cargo-cell,
.js [data-motion="grz-cargo-lock"].is-motion-active .grz-cargo-cell > i,
.js [data-motion="grz-cargo-lock"].is-motion-active .grz-cargo-plumb,
.js [data-motion="grz-cargo-lock"].is-motion-active .grz-cargo-heading { animation-play-state: running; }
@keyframes grzCargoPhotoReveal { 0% { opacity: 0; filter: grayscale(1) contrast(1.5); clip-path: inset(0 0 100% 0); } 100% { opacity: 1; filter: none; clip-path: inset(0); } }
@keyframes grzCargoCell { 0% { opacity: 0; transform: translateY(-54px) scaleY(.84); transform-origin: top; } 72% { opacity: 1; transform: translateY(4px) scaleY(1.02); } 100% { opacity: 1; transform: translateY(0) scaleY(1); } }
@keyframes grzCargoLatch { 0% { opacity: .15; transform: rotate(-135deg) scale(.35); } 80% { opacity: 1; transform: rotate(8deg) scale(1.08); } 100% { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes grzCargoPlumb { 0% { opacity: 0; transform: rotate(33deg); } 28% { opacity: 1; transform: rotate(-20deg); } 52% { transform: rotate(11deg); } 74% { transform: rotate(-5deg); } 100% { opacity: 1; transform: rotate(0); } }
@keyframes grzCargoSurvey { 0% { opacity: 0; transform: translateX(-58px); } 100% { opacity: 1; transform: translateX(0); } }

/* 3. A dimension sheet feeds in, two rulers extend, and the passport is stamped. */
.js [data-motion="grz-dimension-print"] .grz-dimensions-photo { animation: grzDimensionPaper 1.08s cubic-bezier(.17,.78,.23,1) both paused; }
.js [data-motion="grz-dimension-print"] .grz-axis-x { animation: grzDimensionAxisX 1s cubic-bezier(.2,.75,.22,1) .28s both paused; }
.js [data-motion="grz-dimension-print"] .grz-axis-y { animation: grzDimensionAxisY 1s cubic-bezier(.2,.75,.22,1) .4s both paused; }
.js [data-motion="grz-dimension-print"] .grz-passport-stamp { animation: grzDimensionStamp .64s cubic-bezier(.15,.7,.22,1.3) 1s both paused; }
.js [data-motion="grz-dimension-print"] .grz-print-ticks span { animation: grzDimensionTicks .54s steps(3,end) both paused; }
.js [data-motion="grz-dimension-print"] .grz-print-ticks span:nth-child(2n) { animation-delay: .11s; }
.js [data-motion="grz-dimension-print"] .grz-dimension-list > div { animation: grzDimensionInk .58s ease-out both paused; }
.js [data-motion="grz-dimension-print"] .grz-dimension-list > div:nth-child(2) { animation-delay: .1s; }
.js [data-motion="grz-dimension-print"] .grz-dimension-list > div:nth-child(3) { animation-delay: .2s; }
.js [data-motion="grz-dimension-print"] .grz-dimension-list > div:nth-child(4) { animation-delay: .3s; }
.js [data-motion="grz-dimension-print"].is-motion-active .grz-dimensions-photo,
.js [data-motion="grz-dimension-print"].is-motion-active .grz-axis-x,
.js [data-motion="grz-dimension-print"].is-motion-active .grz-axis-y,
.js [data-motion="grz-dimension-print"].is-motion-active .grz-passport-stamp,
.js [data-motion="grz-dimension-print"].is-motion-active .grz-print-ticks span,
.js [data-motion="grz-dimension-print"].is-motion-active .grz-dimension-list > div { animation-play-state: running; }
@keyframes grzDimensionPaper { 0% { opacity: 0; transform: translateY(-100px) scaleY(.7); filter: brightness(1.5); } 76% { opacity: 1; transform: translateY(8px) scaleY(1.02); filter: brightness(1); } 100% { opacity: 1; transform: translateY(0) scaleY(1); filter: none; } }
@keyframes grzDimensionAxisX { 0% { opacity: 0; transform: scaleX(.02); transform-origin: left; } 100% { opacity: 1; transform: scaleX(1); transform-origin: left; } }
@keyframes grzDimensionAxisY { 0% { opacity: 0; transform: scaleY(.02); transform-origin: bottom; } 100% { opacity: 1; transform: scaleY(1); transform-origin: bottom; } }
@keyframes grzDimensionStamp { 0% { opacity: 0; transform: translateY(-105px) rotate(14deg) scale(1.65); } 68% { opacity: 1; transform: translateY(7px) rotate(-9deg) scale(.92); } 100% { opacity: 1; transform: translateY(0) rotate(-7deg) scale(1); } }
@keyframes grzDimensionTicks { 0% { opacity: .12; transform: scaleX(.15); transform-origin: right; } 100% { opacity: 1; transform: scaleX(1); transform-origin: right; } }
@keyframes grzDimensionInk { 0% { opacity: 0; filter: blur(6px); transform: translateX(24px); } 100% { opacity: 1; filter: none; transform: translateX(0); } }

/* 4. Axle pads compress in sequence while the inspection console wakes. */
.js [data-motion="grz-axle-pads"] .grz-condition-photo { animation: grzAxlePhoto .96s cubic-bezier(.16,.78,.22,1) both paused; }
.js [data-motion="grz-axle-pads"] .grz-axle-console li > span { animation: grzAxlePad .84s cubic-bezier(.22,.7,.2,1.12) both paused; animation-delay: calc(.12s + var(--pad) * 180ms); }
.js [data-motion="grz-axle-pads"] .grz-axle-console li > i { animation: grzAxleLamp 1.2s steps(2,end) infinite both paused; animation-delay: calc(var(--pad) * 220ms); }
.js [data-motion="grz-axle-pads"] .grz-tread span { animation: grzAxleTread 1.7s linear infinite both paused; }
.js [data-motion="grz-axle-pads"] .grz-axle-console { animation: grzAxleConsoleWake 1.1s ease-out both paused; }
.js [data-motion="grz-axle-pads"].is-motion-active .grz-condition-photo,
.js [data-motion="grz-axle-pads"].is-motion-active .grz-axle-console li > span,
.js [data-motion="grz-axle-pads"].is-motion-active .grz-axle-console li > i,
.js [data-motion="grz-axle-pads"].is-motion-active .grz-tread span,
.js [data-motion="grz-axle-pads"].is-motion-active .grz-axle-console { animation-play-state: running; }
@keyframes grzAxlePhoto { 0% { opacity: 0; clip-path: circle(8% at 38% 62%); } 100% { opacity: 1; clip-path: circle(115% at 38% 62%); } }
@keyframes grzAxlePad { 0% { opacity: 0; transform: translateY(-30px) scaleY(1.35); } 55% { opacity: 1; transform: translateY(8px) scaleY(.75); } 100% { opacity: 1; transform: translateY(0) scaleY(1); } }
@keyframes grzAxleLamp { 0%, 44% { opacity: .28; filter: grayscale(1); } 45%, 100% { opacity: 1; filter: grayscale(0); box-shadow: inset 0 0 0 6px #1e282b, 0 0 15px rgba(245,210,31,.35); } }
@keyframes grzAxleTread { 0% { transform: translateX(38px) skewX(-20deg); opacity: 0; } 40% { opacity: .8; } 100% { transform: translateX(-45px) skewX(-20deg); opacity: 0; } }
@keyframes grzAxleConsoleWake { 0% { filter: brightness(.35) saturate(0); } 55% { filter: brightness(1.24) saturate(1.2); } 100% { filter: none; } }

/* 5. The yard frame is assembled, the boom rises, and guide posts pulse. */
.js [data-motion="grz-yard-gate"] .grz-yard-panel { animation: grzYardPanel .92s cubic-bezier(.16,.8,.24,1) both paused; }
.js [data-motion="grz-yard-gate"] .grz-gate-frame { animation: grzYardFrame 1.05s cubic-bezier(.2,.75,.24,1) both paused; }
.js [data-motion="grz-yard-gate"] .grz-gate-frame > span { animation: grzYardArm 1.65s cubic-bezier(.36,.02,.28,1) .4s both paused; }
.js [data-motion="grz-yard-gate"] .grz-gate-frame > b { animation: grzYardLamp 1.05s steps(2,end) infinite both paused; }
.js [data-motion="grz-yard-gate"] .grz-bollards span { animation: grzYardBollard 1.3s ease-in-out infinite alternate both paused; }
.js [data-motion="grz-yard-gate"] .grz-bollards span:nth-child(2) { animation-delay: .16s; }
.js [data-motion="grz-yard-gate"] .grz-bollards span:nth-child(3) { animation-delay: .32s; }
.js [data-motion="grz-yard-gate"] .grz-bollards span:nth-child(4) { animation-delay: .48s; }
.js [data-motion="grz-yard-gate"].is-motion-active .grz-yard-panel,
.js [data-motion="grz-yard-gate"].is-motion-active .grz-gate-frame,
.js [data-motion="grz-yard-gate"].is-motion-active .grz-gate-frame > span,
.js [data-motion="grz-yard-gate"].is-motion-active .grz-gate-frame > b,
.js [data-motion="grz-yard-gate"].is-motion-active .grz-bollards span { animation-play-state: running; }
@keyframes grzYardPanel { 0% { opacity: 0; transform: perspective(900px) rotateY(-18deg) translateX(-70px); transform-origin: left; } 100% { opacity: 1; transform: perspective(900px) rotateY(0) translateX(0); } }
@keyframes grzYardFrame { 0% { opacity: 0; clip-path: polygon(0 100%, 0 100%, 0 100%, 0 100%); } 100% { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes grzYardArm { 0% { transform: rotate(88deg); } 66% { transform: rotate(-7deg); } 100% { transform: rotate(0); } }
@keyframes grzYardLamp { 0%, 48% { background: #5d2620; box-shadow: none; } 49%, 100% { background: var(--grz-oxide); box-shadow: 0 0 22px rgba(217,71,47,.9); } }
@keyframes grzYardBollard { 0% { filter: brightness(.7); transform: translateY(8px); } 100% { filter: brightness(1.3); transform: translateY(0); } }

/* 6. A workshop gantry aligns a trolley and hook over the selected parameters. */
.js [data-motion="grz-gantry-align"] .grz-platform-photo { animation: grzGantryPhoto .96s cubic-bezier(.18,.78,.24,1) both paused; }
.js [data-motion="grz-gantry-align"] .grz-gantry-bridge { animation: grzGantryBridge .86s cubic-bezier(.15,.8,.24,1) .12s both paused; }
.js [data-motion="grz-gantry-align"] .grz-gantry-bridge > i { animation: grzGantryTrolley 2.5s cubic-bezier(.45,.02,.3,1) .3s both paused; }
.js [data-motion="grz-gantry-align"] .grz-gantry-bridge > b { animation: grzGantryHook 1.8s cubic-bezier(.35,.02,.28,1) .5s both paused; }
.js [data-motion="grz-gantry-align"] .grz-gantry-spec dl > div { animation: grzGantryRow .6s ease-out both paused; }
.js [data-motion="grz-gantry-align"] .grz-gantry-spec dl > div:nth-child(2) { animation-delay: .12s; }
.js [data-motion="grz-gantry-align"] .grz-gantry-spec dl > div:nth-child(3) { animation-delay: .24s; }
.js [data-motion="grz-gantry-align"] .grz-gantry-spec dl > div:nth-child(4) { animation-delay: .36s; }
.js [data-motion="grz-gantry-align"] .grz-gantry-shadow { animation: grzGantryTrack 2.8s linear infinite both paused; }
.js [data-motion="grz-gantry-align"].is-motion-active .grz-platform-photo,
.js [data-motion="grz-gantry-align"].is-motion-active .grz-gantry-bridge,
.js [data-motion="grz-gantry-align"].is-motion-active .grz-gantry-bridge > i,
.js [data-motion="grz-gantry-align"].is-motion-active .grz-gantry-bridge > b,
.js [data-motion="grz-gantry-align"].is-motion-active .grz-gantry-spec dl > div,
.js [data-motion="grz-gantry-align"].is-motion-active .grz-gantry-shadow { animation-play-state: running; }
@keyframes grzGantryPhoto { 0% { opacity: 0; transform: perspective(1000px) rotateY(13deg) translateX(-45px); transform-origin: right; } 100% { opacity: 1; transform: perspective(1000px) rotateY(0) translateX(0); } }
@keyframes grzGantryBridge { 0% { opacity: 0; transform: translateY(-70px) scaleX(.55); } 72% { opacity: 1; transform: translateY(5px) scaleX(1.02); } 100% { opacity: 1; transform: translateY(0) scaleX(1); } }
@keyframes grzGantryTrolley { 0% { left: 8%; } 55% { left: 74%; } 78% { left: 43%; } 100% { left: 48%; } }
@keyframes grzGantryHook { 0% { opacity: 0; transform: translateY(-57px) rotate(-35deg); } 58% { opacity: 1; transform: translateY(7px) rotate(14deg); } 100% { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes grzGantryRow { 0% { opacity: 0; transform: translateX(55px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes grzGantryTrack { to { background-position: 94px 0; } }

/* 7. Shutter slats roll away, a tariff stencil lands, and the route belt advances. */
.js [data-motion="grz-shutter-price"] .grz-price-shutter { animation: grzShutterPanel 1.05s cubic-bezier(.17,.78,.23,1) both paused; }
.js [data-motion="grz-shutter-price"] .grz-shutter-slats i { animation: grzShutterSlat .8s cubic-bezier(.2,.72,.22,1) both paused; transform-origin: top; }
.js [data-motion="grz-shutter-price"] .grz-shutter-slats i:nth-child(2n) { animation-delay: .08s; }
.js [data-motion="grz-shutter-price"] .grz-price-value { animation: grzPriceStencil .85s steps(5,end) .46s both paused; }
.js [data-motion="grz-shutter-price"] .grz-chain-wheel { animation: grzChainWheel 3.8s linear infinite both paused; }
.js [data-motion="grz-shutter-price"] .grz-km-strip i { animation: grzKmBelt 2.1s linear infinite both paused; }
.js [data-motion="grz-shutter-price"].is-motion-active .grz-price-shutter,
.js [data-motion="grz-shutter-price"].is-motion-active .grz-shutter-slats i,
.js [data-motion="grz-shutter-price"].is-motion-active .grz-price-value,
.js [data-motion="grz-shutter-price"].is-motion-active .grz-chain-wheel,
.js [data-motion="grz-shutter-price"].is-motion-active .grz-km-strip i { animation-play-state: running; }
@keyframes grzShutterPanel { 0% { opacity: 0; transform: translateY(-88px); clip-path: inset(0 0 100% 0); } 100% { opacity: 1; transform: translateY(0); clip-path: inset(0); } }
@keyframes grzShutterSlat { 0% { opacity: .85; transform: scaleY(2.4) rotateX(45deg); } 100% { opacity: .16; transform: scaleY(1) rotateX(0); } }
@keyframes grzPriceStencil { 0% { opacity: 0; filter: blur(9px); transform: scale(1.45) rotate(-4deg); } 70% { opacity: 1; filter: blur(0); transform: scale(.96) rotate(1deg); } 100% { opacity: 1; filter: none; transform: scale(1) rotate(0); } }
@keyframes grzChainWheel { to { transform: rotate(360deg); } }
@keyframes grzKmBelt { to { background-position: 76px 0; } }

/* 8. Lock pins drop into a rail, the beam charges, and the control note seals. */
.js [data-motion="grz-lock-pins"] .grz-control-photo { animation: grzControlPhoto .98s cubic-bezier(.16,.78,.23,1) both paused; }
.js [data-motion="grz-lock-pins"] .grz-pin-rail li > span i { animation: grzPinDrop .72s cubic-bezier(.15,.7,.24,1.22) both paused; animation-delay: calc(.16s + var(--pin) * 145ms); }
.js [data-motion="grz-lock-pins"] .grz-pin-rail::before { animation: grzRailCharge 1.35s ease-out .2s both paused; }
.js [data-motion="grz-lock-pins"] .grz-lock-beam span { animation: grzLockBeam 2.3s cubic-bezier(.42,.02,.25,1) .3s both paused; }
.js [data-motion="grz-lock-pins"] .grz-control-note { animation: grzControlNote .72s steps(5,end) .72s both paused; }
.js [data-motion="grz-lock-pins"].is-motion-active .grz-control-photo,
.js [data-motion="grz-lock-pins"].is-motion-active .grz-pin-rail li > span i,
.js [data-motion="grz-lock-pins"].is-motion-active .grz-pin-rail::before,
.js [data-motion="grz-lock-pins"].is-motion-active .grz-lock-beam span,
.js [data-motion="grz-lock-pins"].is-motion-active .grz-control-note { animation-play-state: running; }
@keyframes grzControlPhoto { 0% { opacity: 0; filter: contrast(1.7) grayscale(1); clip-path: polygon(50% 0, 50% 0, 50% 100%, 50% 100%); } 100% { opacity: 1; filter: none; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } }
@keyframes grzPinDrop { 0% { opacity: 0; transform: translateY(-42px) scaleY(1.3); } 68% { opacity: 1; transform: translateY(6px) scaleY(.85); } 100% { opacity: 1; transform: translateY(0) scaleY(1); } }
@keyframes grzRailCharge { 0% { opacity: .2; transform: scaleY(.03); transform-origin: top; } 100% { opacity: 1; transform: scaleY(1); transform-origin: top; } }
@keyframes grzLockBeam { 0% { width: 0; } 62% { width: 68%; } 82% { width: 29%; } 100% { width: 34%; } }
@keyframes grzControlNote { 0% { opacity: 0; transform: translateX(45px); box-shadow: inset 0 0 0 0 var(--grz-oxide); } 100% { opacity: 1; transform: translateX(0); box-shadow: inset 7px 0 0 var(--grz-oxide); } }

/* 9. The intercom establishes a signal and FAQ lines answer as an equalizer responds. */
.js [data-motion="grz-intercom"] .grz-faq-photo { animation: grzIntercomPhoto 1.02s cubic-bezier(.17,.78,.23,1) both paused; }
.js [data-motion="grz-intercom"] .grz-intercom > span { animation: grzIntercomSpeaker 1.8s ease-out infinite both paused; }
.js [data-motion="grz-intercom"] .grz-intercom > i { animation: grzIntercomDot 1.4s steps(2,end) infinite both paused; }
.js [data-motion="grz-intercom"] .grz-intercom > i:nth-of-type(2n) { animation-delay: .24s; }
.js [data-motion="grz-intercom"] .grz-faq-list details { animation: grzFaqLine .58s ease-out both paused; }
.js [data-motion="grz-intercom"] .grz-faq-list details:nth-child(2) { animation-delay: .08s; }
.js [data-motion="grz-intercom"] .grz-faq-list details:nth-child(3) { animation-delay: .16s; }
.js [data-motion="grz-intercom"] .grz-faq-list details:nth-child(4) { animation-delay: .24s; }
.js [data-motion="grz-intercom"] .grz-faq-list details:nth-child(5) { animation-delay: .32s; }
.js [data-motion="grz-intercom"] .grz-faq-list details:nth-child(6) { animation-delay: .4s; }
.js [data-motion="grz-intercom"] .grz-equalizer span { animation: grzEqualizer .88s ease-in-out infinite alternate both paused; }
.js [data-motion="grz-intercom"] .grz-equalizer span:nth-child(2n) { animation-delay: .14s; }
.js [data-motion="grz-intercom"] .grz-equalizer span:nth-child(3n) { animation-delay: .28s; }
.js [data-motion="grz-intercom"] .grz-intercom > b { animation: grzIntercomButton 1.3s steps(2,end) infinite both paused; }
.js [data-motion="grz-intercom"].is-motion-active .grz-faq-photo,
.js [data-motion="grz-intercom"].is-motion-active .grz-intercom > span,
.js [data-motion="grz-intercom"].is-motion-active .grz-intercom > i,
.js [data-motion="grz-intercom"].is-motion-active .grz-faq-list details,
.js [data-motion="grz-intercom"].is-motion-active .grz-equalizer span,
.js [data-motion="grz-intercom"].is-motion-active .grz-intercom > b { animation-play-state: running; }
@keyframes grzIntercomPhoto { 0% { opacity: 0; transform: perspective(900px) rotateX(-12deg) translateY(65px); transform-origin: bottom; } 100% { opacity: 1; transform: perspective(900px) rotateX(0) translateY(0); } }
@keyframes grzIntercomSpeaker { 0% { box-shadow: 0 0 0 0 rgba(245,210,31,.55); } 100% { box-shadow: 0 0 0 24px rgba(245,210,31,0); } }
@keyframes grzIntercomDot { 0%, 44% { opacity: .2; } 45%, 100% { opacity: 1; filter: brightness(1.5); } }
@keyframes grzFaqLine { 0% { opacity: 0; transform: translateX(-42px); border-color: transparent; } 100% { opacity: 1; transform: translateX(0); border-color: rgba(255,255,255,.17); } }
@keyframes grzEqualizer { 0% { transform: scaleY(.28); transform-origin: bottom; opacity: .42; } 100% { transform: scaleY(1); transform-origin: bottom; opacity: 1; } }
@keyframes grzIntercomButton { 0%, 48% { filter: brightness(.6); } 49%, 100% { filter: brightness(1.35); box-shadow: 0 0 16px rgba(217,71,47,.65); } }

/* 10. A departure receipt prints while runway marks converge on the route. */
.js [data-motion="grz-departure"] .grz-departure-panel { animation: grzDeparturePanel 1s cubic-bezier(.16,.8,.23,1) both paused; }
.js [data-motion="grz-departure"] .grz-departure-code span { animation: grzDepartureCode .7s steps(4,end) both paused; }
.js [data-motion="grz-departure"] .grz-departure-code span:nth-child(2n) { animation-delay: .1s; }
.js [data-motion="grz-departure"] .grz-departure-code span:nth-child(3n) { animation-delay: .2s; }
.js [data-motion="grz-departure"] .grz-runway { animation: grzRunwayLine 1.35s cubic-bezier(.18,.75,.22,1) .25s both paused; }
.js [data-motion="grz-departure"] .grz-runway span { animation: grzRunwayLamp 1.1s steps(2,end) infinite both paused; }
.js [data-motion="grz-departure"] .grz-runway span:nth-child(2n) { animation-delay: .22s; }
.js [data-motion="grz-departure"] .grz-horizon-scan { animation: grzHorizonScan 3.2s ease-in-out infinite both paused; }
.js [data-motion="grz-departure"] .grz-contact-photo img { animation: grzContactPhoto 8s ease-in-out infinite alternate both paused; }
.js [data-motion="grz-departure"].is-motion-active .grz-departure-panel,
.js [data-motion="grz-departure"].is-motion-active .grz-departure-code span,
.js [data-motion="grz-departure"].is-motion-active .grz-runway,
.js [data-motion="grz-departure"].is-motion-active .grz-runway span,
.js [data-motion="grz-departure"].is-motion-active .grz-horizon-scan,
.js [data-motion="grz-departure"].is-motion-active .grz-contact-photo img { animation-play-state: running; }
@keyframes grzDeparturePanel { 0% { opacity: 0; transform: translateX(-90px) skewX(-4deg); } 72% { opacity: 1; transform: translateX(6px) skewX(1deg); } 100% { opacity: 1; transform: translateX(0) skewX(0); } }
@keyframes grzDepartureCode { 0% { opacity: 0; transform: scaleY(.05); transform-origin: bottom; } 100% { opacity: 1; transform: scaleY(1); transform-origin: bottom; } }
@keyframes grzRunwayLine { 0% { opacity: 0; transform: perspective(700px) rotateX(70deg) scaleX(.2); transform-origin: bottom; } 100% { opacity: 1; transform: perspective(700px) rotateX(0) scaleX(1); } }
@keyframes grzRunwayLamp { 0%, 46% { opacity: .18; filter: blur(2px); } 47%, 100% { opacity: 1; filter: blur(0); box-shadow: 0 0 12px rgba(245,210,31,.75); } }
@keyframes grzHorizonScan { 0% { opacity: .15; transform: translateY(-90px) scaleX(.25); } 50% { opacity: 1; transform: translateY(70px) scaleX(1); } 100% { opacity: .15; transform: translateY(190px) scaleX(.25); } }
@keyframes grzContactPhoto { 0% { transform: scale(1.01) translateX(0); filter: saturate(.9); } 100% { transform: scale(1.06) translateX(-1.2%); filter: saturate(1.12); } }

@media (max-width: 1080px) {
  [data-motion="grz-yard-gate"] .grz-gate-frame,
  [data-motion="grz-departure"] .grz-runway { transform-origin: bottom right; }
}

@media (max-width: 840px) {
  .js [data-motion="grz-weighbridge"] .grz-terminal-screen { animation: grzWeighDigits .9s steps(5,end) .25s both paused; }
  .js [data-motion="grz-weighbridge"].is-motion-active .grz-terminal-screen { animation-play-state: running; }
  .js [data-motion="grz-yard-gate"] .grz-gate-frame { transform-origin: bottom right; }
  .js [data-motion="grz-shutter-price"] .grz-price-shutter,
  .js [data-motion="grz-departure"] .grz-departure-panel { transform-origin: top left; }
}

@media (max-width: 560px) {
  .js [data-motion="grz-cargo-lock"] .grz-cargo-cell { animation-duration: .62s; }
  .js [data-motion="grz-dimension-print"] .grz-passport-stamp { animation-duration: .5s; }
  .js [data-motion="grz-intercom"] .grz-intercom > span { animation-duration: 2.2s; }
  .js [data-motion="grz-departure"] .grz-contact-photo img { animation-duration: 10s; }
}

@media (max-width: 380px) {
  .js [data-motion="grz-weighbridge"] .grz-weigh-deck,
  .js [data-motion="grz-yard-gate"] .grz-gate-frame,
  .js [data-motion="grz-departure"] .grz-runway { animation-duration: .78s; }
}

@media (prefers-reduced-motion: reduce) {
  [data-motion^="grz-"] *,
  [data-motion^="grz-"] *::before,
  [data-motion^="grz-"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}