[data-motion^="dom-"] {
  --dom-asphalt: #0a171b;
  --dom-cobalt: #2864e8;
  --dom-peach: #f18a68;
  --dom-zinc: #b8c3c4;
  --dom-white: #f2f5f1;
  --dom-green: #176f62;
  --dom-shift: 31px;
  isolation: isolate;
}

.dom-decor {
  position: absolute;
  z-index: 1;
  width: min(280px, calc(100% - 24px));
  height: 150px;
  overflow: clip;
  contain: layout paint;
  pointer-events: none;
  isolation: isolate;
  box-sizing: border-box;
  color: var(--dom-white);
  background: rgba(10,23,27,.95);
  border: 1px solid rgba(241,138,104,.38);
  box-shadow: 0 15px 36px rgba(3,10,12,.24);
}

.dom-decor,
.dom-decor * {
  box-sizing: border-box;
  pointer-events: none;
}

[data-motion^="dom-"] > :not(.dom-decor) {
  position: relative;
  z-index: 2;
}

.dom-overpass-lift { right: 4vw; bottom: 22px; width: 272px; height: 144px; }
.dom-slip-pocket { left: 4vw; bottom: 22px; width: 266px; height: 140px; }
.dom-guardrail-thread { right: 4vw; top: 28px; width: 270px; height: 138px; }
.dom-yard-corner-clearance { left: 4vw; bottom: 22px; width: 274px; height: 142px; }
.dom-address-span { right: 4vw; bottom: 22px; width: 264px; height: 140px; }
.dom-wheel-silhouette-gauges { left: 4vw; top: 26px; width: 260px; height: 142px; }
.dom-deck-rivet-bloom { right: 4vw; bottom: 22px; width: 268px; height: 140px; }
.dom-fare-notch-ledger { left: 4vw; bottom: 22px; width: 266px; height: 142px; }
.dom-sign-counterweights { right: 4vw; top: 26px; width: 270px; height: 144px; }
.dom-reflector-prism-set { left: 4vw; bottom: 22px; width: 262px; height: 144px; }

.js [data-motion="dom-overpass-lift"] .dom-decor .decor-child,
.js [data-motion="dom-slip-pocket"] .dom-decor .decor-child,
.js [data-motion="dom-guardrail-thread"] .dom-decor .decor-child,
.js [data-motion="dom-yard-corner-clearance"] .dom-decor .decor-child,
.js [data-motion="dom-address-span"] .dom-decor .decor-child,
.js [data-motion="dom-wheel-silhouette-gauges"] .dom-decor .decor-child,
.js [data-motion="dom-deck-rivet-bloom"] .dom-decor .decor-child,
.js [data-motion="dom-fare-notch-ledger"] .dom-decor .decor-child,
.js [data-motion="dom-sign-counterweights"] .dom-decor .decor-child,
.js [data-motion="dom-reflector-prism-set"] .dom-decor .decor-child,
.js [data-motion^="dom-"] .dom-decor * {
  animation-play-state: paused;
}

.js [data-motion="dom-overpass-lift"].is-motion-active .dom-decor .decor-child,
.js [data-motion="dom-slip-pocket"].is-motion-active .dom-decor .decor-child,
.js [data-motion="dom-guardrail-thread"].is-motion-active .dom-decor .decor-child,
.js [data-motion="dom-yard-corner-clearance"].is-motion-active .dom-decor .decor-child,
.js [data-motion="dom-address-span"].is-motion-active .dom-decor .decor-child,
.js [data-motion="dom-wheel-silhouette-gauges"].is-motion-active .dom-decor .decor-child,
.js [data-motion="dom-deck-rivet-bloom"].is-motion-active .dom-decor .decor-child,
.js [data-motion="dom-fare-notch-ledger"].is-motion-active .dom-decor .decor-child,
.js [data-motion="dom-sign-counterweights"].is-motion-active .dom-decor .decor-child,
.js [data-motion="dom-reflector-prism-set"].is-motion-active .dom-decor .decor-child,
.js [data-motion^="dom-"].is-motion-active .dom-decor * {
  animation-play-state: running;
}

/* Scene 1: two road levels form a finite overpass assembly. */
.dom-overpass-lift {
  background:
    linear-gradient(145deg, rgba(40,100,232,.16), transparent 55%),
    var(--dom-asphalt);
}
.dom-overpass-lift .dom-overpass-support {
  position: absolute;
  z-index: 3;
  bottom: 13%;
  width: 12%;
  height: 46%;
  background: linear-gradient(90deg, #687576, var(--dom-zinc), #687576);
  border: 2px solid var(--dom-white);
  clip-path: polygon(16% 0,84% 0,100% 100%,0 100%);
}
.dom-overpass-lift .support-a { left: 24%; }
.dom-overpass-lift .support-b { right: 24%; }
.dom-overpass-lift .dom-overpass-arc {
  position: absolute;
  left: 8%;
  width: 84%;
  height: 21%;
  border: 3px solid var(--dom-white);
  border-radius: 50% 50% 8px 8px;
}
.dom-overpass-lift .arc-lower {
  z-index: 2;
  top: 54%;
  background: repeating-linear-gradient(90deg, #546264 0 13px, #718184 13px 21px);
  animation: dom-overpass-lower-mask .76s steps(8,end) .08s both paused;
}
.dom-overpass-lift .arc-upper {
  z-index: 6;
  top: 34%;
  background: repeating-linear-gradient(90deg, var(--dom-cobalt) 0 18px, #7294ee 18px 25px);
  animation: dom-overpass-upper-lift .88s cubic-bezier(.2,.64,.27,1.14) .24s both paused;
}
.dom-overpass-lift .dom-overpass-bearing {
  position: absolute;
  z-index: 7;
  top: 51%;
  width: 13%;
  height: 11%;
  background: var(--dom-peach);
  border: 2px solid #ffc7b5;
}
.dom-overpass-lift .bearing-a { left: 23.5%; animation: dom-overpass-bearing-a-seat .54s cubic-bezier(.2,.67,.28,1.16) .68s both paused; }
.dom-overpass-lift .bearing-b { right: 23.5%; animation: dom-overpass-bearing-b-seat .62s cubic-bezier(.2,.67,.28,1.16) .78s both paused; }
.dom-overpass-lift .dom-overpass-seam {
  position: absolute;
  z-index: 9;
  width: 7%;
  aspect-ratio: 1;
  background: var(--dom-green);
  border: 2px solid #8de0d3;
  transform-origin: center;
}
.dom-overpass-lift .seam-a { top: 21%; left: 17%; animation: dom-overpass-seam-a-lock .48s cubic-bezier(.2,.67,.28,1.16) .86s both paused; }
.dom-overpass-lift .seam-b { top: 17%; right: 17%; animation: dom-overpass-seam-b-lock .54s cubic-bezier(.2,.67,.28,1.16) .96s both paused; }
.dom-overpass-lift .seam-c { bottom: 12%; left: 12%; animation: dom-overpass-seam-c-lock .6s cubic-bezier(.2,.67,.28,1.16) 1.06s both paused; }
.dom-overpass-lift .seam-d { right: 12%; bottom: 12%; animation: dom-overpass-seam-d-lock .66s cubic-bezier(.2,.67,.28,1.16) 1.16s both paused; }

@keyframes dom-overpass-lower-mask {
  0% { clip-path: inset(0 48%); opacity: .14; filter: brightness(.52); }
  100% { clip-path: inset(0); opacity: 1; filter: none; }
}
@keyframes dom-overpass-upper-lift {
  0% { translate: 0 7px; scale: .84 .72; opacity: .16; }
  72% { translate: 0 -19px; scale: 1.06 1.12; opacity: 1; }
  100% { translate: 0 -16px; scale: 1; opacity: 1; }
}
@keyframes dom-overpass-bearing-a-seat {
  0% { scale: .18 1.4; translate: -8px 0; opacity: .12; }
  68% { scale: 1.16 .84; translate: 2px 0; opacity: 1; }
  100% { scale: 1; translate: none; opacity: 1; }
}
@keyframes dom-overpass-bearing-b-seat {
  0% { scale: 1.34 .14; translate: 9px 0; filter: brightness(.5); }
  71% { scale: .86 1.18; translate: -2px 0; filter: brightness(1.2); }
  100% { scale: 1; translate: none; filter: none; }
}
@keyframes dom-overpass-seam-a-lock {
  0% { scale: .16 1.42; rotate: -21deg; opacity: .1; }
  67% { scale: 1.18 .82; rotate: 5deg; opacity: 1; }
  100% { scale: 1; rotate: 0deg; opacity: 1; }
}
@keyframes dom-overpass-seam-b-lock {
  0% { scale: 1.38 .12; rotate: 17deg; filter: saturate(.3); opacity: .12; }
  70% { scale: .84 1.16; rotate: -4deg; filter: saturate(1.22); opacity: 1; }
  100% { scale: 1; rotate: 0deg; filter: none; opacity: 1; }
}
@keyframes dom-overpass-seam-c-lock {
  0% { scale: .24 .5; rotate: 28deg; opacity: .14; filter: brightness(.54); }
  64% { scale: 1.12 1.1; rotate: -6deg; opacity: 1; filter: brightness(1.18); }
  100% { scale: 1; rotate: 0deg; opacity: 1; filter: none; }
}
@keyframes dom-overpass-seam-d-lock {
  0% { scale: .1 1.3; rotate: -26deg; opacity: .08; }
  73% { scale: 1.2 .8; rotate: 7deg; opacity: 1; }
  100% { scale: 1; rotate: 0deg; opacity: 1; }
}

/* Scene 2: one side pocket opens and seats one blank sign plate. */
.dom-slip-pocket {
  perspective: 600px;
  background:
    linear-gradient(90deg, rgba(241,138,104,.12), transparent 52%),
    var(--dom-asphalt);
}
.dom-slip-pocket .dom-slip-edge {
  position: absolute;
  z-index: 3;
  top: 19%;
  bottom: 19%;
  left: 10%;
  width: 10%;
  background: var(--dom-zinc);
  border: 2px solid var(--dom-white);
}
.dom-slip-pocket .dom-slip-pocket-shape {
  position: absolute;
  z-index: 4;
  top: 24%;
  left: 18%;
  width: 58%;
  height: 53%;
  background: linear-gradient(135deg, #536468, var(--dom-cobalt));
  border: 3px solid var(--dom-white);
  clip-path: polygon(0 0,100% 16%,82% 100%,0 76%);
  animation: dom-slip-pocket-open .78s steps(8,end) .08s both paused;
}
.dom-slip-pocket .dom-slip-sign-post {
  position: absolute;
  z-index: 6;
  right: 15%;
  bottom: 14%;
  width: 6%;
  height: 51%;
  background: var(--dom-zinc);
  border: 1px solid var(--dom-white);
  transform-origin: center bottom;
  animation: dom-slip-post-rise .66s cubic-bezier(.2,.67,.28,1.14) .52s both paused;
}
.dom-slip-pocket .dom-slip-sign-plate {
  position: absolute;
  z-index: 8;
  top: 16%;
  right: 7%;
  width: 30%;
  height: 29%;
  background: var(--dom-peach);
  border: 2px solid #ffc5b3;
  transform-origin: center right;
  animation: dom-slip-plate-turn .84s cubic-bezier(.2,.64,.27,1.14) .68s both paused;
}
.dom-slip-pocket .dom-slip-stop {
  position: absolute;
  z-index: 9;
  right: 10%;
  bottom: 10%;
  width: 18%;
  height: 12%;
  background: var(--dom-green);
  border: 2px solid #91e2d5;
  animation: dom-slip-stop-seat .54s cubic-bezier(.2,.67,.28,1.16) .98s both paused;
}
.dom-slip-pocket .dom-slip-stitch {
  position: absolute;
  z-index: 10;
  width: 8%;
  aspect-ratio: 1;
  background: var(--dom-white);
  border: 2px solid var(--dom-cobalt);
}
.dom-slip-pocket .stitch-a { top: 22%; left: 14%; animation: dom-slip-stitch-a-close .48s cubic-bezier(.2,.67,.28,1.16) 1.06s both paused; }
.dom-slip-pocket .stitch-b { bottom: 18%; left: 24%; animation: dom-slip-stitch-b-close .56s cubic-bezier(.2,.67,.28,1.16) 1.16s both paused; }

@keyframes dom-slip-pocket-open {
  0% { clip-path: polygon(0 38%,100% 38%,100% 54%,0 54%); scale: .92 1; opacity: .14; }
  100% { clip-path: polygon(0 0,100% 16%,82% 100%,0 76%); scale: 1; opacity: 1; }
}
@keyframes dom-slip-post-rise {
  0% { scale: 1 .12; opacity: .16; filter: brightness(.52); }
  70% { scale: .92 1.12; opacity: 1; filter: brightness(1.18); }
  100% { scale: 1; opacity: 1; filter: none; }
}
@keyframes dom-slip-plate-turn {
  0% { rotate: y 72deg; translate: 12px 0; scale: .82 1; opacity: .14; }
  72% { rotate: y -6deg; translate: -2px 0; scale: 1.08 .94; opacity: 1; }
  100% { rotate: y 0deg; translate: none; scale: 1; opacity: 1; }
}
@keyframes dom-slip-stop-seat {
  0% { translate: 0 10px; scale: .54 1.28; opacity: .12; }
  68% { translate: 0 -2px; scale: 1.14 .86; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes dom-slip-stitch-a-close {
  0% { scale: .12 1.44; rotate: 24deg; opacity: .1; }
  69% { scale: 1.18 .82; rotate: -5deg; opacity: 1; }
  100% { scale: 1; rotate: 0deg; opacity: 1; }
}
@keyframes dom-slip-stitch-b-close {
  0% { scale: 1.36 .1; rotate: -19deg; filter: saturate(.32); }
  72% { scale: .84 1.16; rotate: 4deg; filter: saturate(1.2); }
  100% { scale: 1; rotate: 0deg; filter: none; }
}

/* Scene 3: a corrugated guard profile threads through fixed brackets. */
.dom-guardrail-thread {
  background:
    linear-gradient(0deg, rgba(23,111,98,.14), transparent 47%),
    var(--dom-asphalt);
}
.dom-guardrail-thread .dom-guard-bracket {
  position: absolute;
  z-index: 6;
  top: 23%;
  width: 9%;
  height: 59%;
  background: var(--dom-zinc);
  border: 2px solid var(--dom-white);
  clip-path: polygon(0 0,100% 0,78% 100%,22% 100%);
  animation: dom-guard-brackets-confirm .52s cubic-bezier(.2,.67,.28,1.15) both paused;
}
.dom-guardrail-thread .bracket-a { left: 10%; animation-delay: .1s; }
.dom-guardrail-thread .bracket-b { left: 34%; animation-delay: .18s; }
.dom-guardrail-thread .bracket-c { right: 34%; animation-delay: .26s; }
.dom-guardrail-thread .bracket-d { right: 10%; animation-delay: .34s; }
.dom-guardrail-thread .dom-guard-profile {
  position: absolute;
  z-index: 8;
  top: 39%;
  left: 7%;
  width: 86%;
  height: 25%;
  background: repeating-linear-gradient(0deg, #647274 0 5px, var(--dom-zinc) 5px 10px, #718083 10px 14px);
  border: 2px solid var(--dom-white);
  clip-path: polygon(0 20%,100% 0,96% 77%,0 100%);
  animation: dom-guard-profile-thread .98s cubic-bezier(.2,.61,.27,1.05) .28s both paused;
}
.dom-guardrail-thread .dom-guard-reflector {
  position: absolute;
  z-index: 10;
  top: 42%;
  width: 8%;
  aspect-ratio: 1.35;
  background: var(--dom-peach);
  border: 2px solid #ffc7b5;
  animation: dom-guard-reflectors-set .5s cubic-bezier(.2,.67,.28,1.15) both paused;
}
.dom-guardrail-thread .reflector-a { left: 20%; animation-delay: .82s; }
.dom-guardrail-thread .reflector-b { left: 47%; animation-delay: .92s; }
.dom-guardrail-thread .reflector-c { right: 18%; animation-delay: 1.02s; }

@keyframes dom-guard-brackets-confirm {
  0% { scale: .82 .72; opacity: .16; filter: brightness(.54); }
  68% { scale: 1.08 1.12; opacity: 1; filter: brightness(1.16); }
  100% { scale: 1; opacity: 1; filter: none; }
}
@keyframes dom-guard-profile-thread {
  0% { translate: -32px 0; transform: skewY(0deg); clip-path: polygon(0 20%,18% 17%,18% 87%,0 100%); opacity: .16; }
  66% { translate: 4px 0; transform: skewY(5deg); clip-path: polygon(0 20%,100% 0,96% 77%,0 100%); opacity: 1; }
  82% { translate: -2px 0; transform: skewY(-2deg); }
  100% { translate: none; transform: skewY(0deg); clip-path: polygon(0 20%,100% 0,96% 77%,0 100%); opacity: 1; }
}
@keyframes dom-guard-reflectors-set {
  0% { scale: .42 1.22; opacity: .18; }
  70% { scale: 1.1 .9; opacity: 1; }
  100% { scale: 1; opacity: 1; }
}

/* Scene 4: four local obstacles retract and expose one central work void. */
.dom-yard-corner-clearance {
  background:
    linear-gradient(135deg, rgba(23,111,98,.14), transparent 58%),
    var(--dom-asphalt);
}
.dom-yard-corner-clearance .dom-yard-corner {
  position: absolute;
  z-index: 7;
  width: 35%;
  height: 39%;
  background: linear-gradient(135deg, var(--dom-cobalt), #7898ed);
  border: 2px solid #a9baff;
}
.dom-yard-corner-clearance .corner-a {
  top: 7%; left: 6%;
  clip-path: polygon(0 0,100% 0,78% 100%,0 72%);
  animation: dom-yard-corner-a-retract .78s cubic-bezier(.2,.64,.27,1.12) .08s both paused;
}
.dom-yard-corner-clearance .corner-b {
  top: 7%; right: 6%;
  clip-path: polygon(0 0,100% 0,100% 72%,22% 100%);
  animation: dom-yard-corner-b-retract .86s cubic-bezier(.2,.64,.27,1.12) .16s both paused;
}
.dom-yard-corner-clearance .corner-c {
  bottom: 7%; left: 6%;
  clip-path: polygon(0 28%,78% 0,100% 100%,0 100%);
  animation: dom-yard-corner-c-retract .94s cubic-bezier(.2,.64,.27,1.12) .24s both paused;
}
.dom-yard-corner-clearance .corner-d {
  right: 6%; bottom: 7%;
  clip-path: polygon(22% 0,100% 28%,100% 100%,0 100%);
  animation: dom-yard-corner-d-retract 1.02s cubic-bezier(.2,.64,.27,1.12) .32s both paused;
}
.dom-yard-corner-clearance .dom-yard-stop {
  position: absolute;
  z-index: 10;
  width: 9%;
  aspect-ratio: 1;
  background: var(--dom-peach);
  border: 2px solid #ffc7b5;
}
.dom-yard-corner-clearance .stop-a { top: 10%; left: 9%; animation: dom-yard-stop-a-set .48s cubic-bezier(.2,.67,.28,1.16) .72s both paused; }
.dom-yard-corner-clearance .stop-b { top: 10%; right: 9%; animation: dom-yard-stop-b-set .54s cubic-bezier(.2,.67,.28,1.16) .82s both paused; }
.dom-yard-corner-clearance .stop-c { bottom: 10%; left: 9%; animation: dom-yard-stop-c-set .6s cubic-bezier(.2,.67,.28,1.16) .92s both paused; }
.dom-yard-corner-clearance .stop-d { right: 9%; bottom: 10%; animation: dom-yard-stop-d-set .66s cubic-bezier(.2,.67,.28,1.16) 1.02s both paused; }
.dom-yard-corner-clearance .dom-yard-clearance-window {
  position: absolute;
  z-index: 5;
  inset: 25% 31%;
  background: var(--dom-green);
  border: 3px solid #91e2d5;
  box-shadow: inset 0 0 0 5px rgba(10,23,27,.46);
  animation: dom-yard-clearance-reveal .86s steps(7,end) .58s both paused;
}

@keyframes dom-yard-corner-a-retract {
  0% { translate: 34px 24px; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: .42; }
  72% { translate: -3px -2px; clip-path: polygon(0 0,100% 0,76% 100%,0 70%); opacity: 1; }
  100% { translate: none; clip-path: polygon(0 0,100% 0,78% 100%,0 72%); opacity: 1; }
}
@keyframes dom-yard-corner-b-retract {
  0% { translate: -29px 27px; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); filter: brightness(.58); }
  68% { translate: 3px -2px; clip-path: polygon(0 0,100% 0,100% 70%,24% 100%); filter: brightness(1.16); }
  100% { translate: none; clip-path: polygon(0 0,100% 0,100% 72%,22% 100%); filter: none; }
}
@keyframes dom-yard-corner-c-retract {
  0% { translate: 38px -20px; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: .36; filter: saturate(.46); }
  75% { translate: -4px 2px; clip-path: polygon(0 30%,76% 0,100% 100%,0 100%); opacity: 1; filter: saturate(1.18); }
  100% { translate: none; clip-path: polygon(0 28%,78% 0,100% 100%,0 100%); opacity: 1; filter: none; }
}
@keyframes dom-yard-corner-d-retract {
  0% { translate: -35px -23px; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); scale: 1.08 .86; }
  71% { translate: 4px 2px; clip-path: polygon(24% 0,100% 30%,100% 100%,0 100%); scale: .96 1.05; }
  100% { translate: none; clip-path: polygon(22% 0,100% 28%,100% 100%,0 100%); scale: 1; }
}
@keyframes dom-yard-stop-a-set {
  0% { scale: .16 1.38; rotate: -18deg; opacity: .12; }
  70% { scale: 1.16 .84; rotate: 4deg; opacity: 1; }
  100% { scale: 1; rotate: 0deg; opacity: 1; }
}
@keyframes dom-yard-stop-b-set {
  0% { scale: 1.34 .12; rotate: 15deg; filter: brightness(.52); }
  68% { scale: .85 1.14; rotate: -3deg; filter: brightness(1.2); }
  100% { scale: 1; rotate: 0deg; filter: none; }
}
@keyframes dom-yard-stop-c-set {
  0% { translate: -7px 6px; scale: .28 .64; opacity: .14; }
  73% { translate: 2px -1px; scale: 1.12 1.08; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes dom-yard-stop-d-set {
  0% { translate: 8px 5px; scale: .52 .2; opacity: .1; filter: saturate(.4); }
  76% { translate: -2px -1px; scale: .9 1.16; opacity: 1; filter: saturate(1.2); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes dom-yard-clearance-reveal {
  0% { clip-path: inset(49% 47%); opacity: .12; filter: brightness(.46); }
  100% { clip-path: inset(0); opacity: 1; filter: none; }
}

/* Scene 5: two abutments rise by different amounts before the span settles. */
.dom-address-span {
  perspective: 620px;
  background:
    linear-gradient(155deg, rgba(40,100,232,.17), transparent 56%),
    var(--dom-asphalt);
}
.dom-address-span .dom-address-abutment {
  position: absolute;
  z-index: 4;
  bottom: 12%;
  width: 17%;
  height: 55%;
  background: linear-gradient(90deg, #5f6d6f, var(--dom-zinc), #657476);
  border: 2px solid var(--dom-white);
  clip-path: polygon(10% 0,90% 0,100% 100%,0 100%);
}
.dom-address-span .abutment-a {
  left: 7%;
  animation: dom-address-abutment-a-rise .7s cubic-bezier(.2,.67,.28,1.14) .08s both paused;
}
.dom-address-span .abutment-b {
  right: 7%;
  animation: dom-address-abutment-b-rise .82s cubic-bezier(.2,.67,.28,1.14) .14s both paused;
}
.dom-address-span .dom-address-span-deck {
  position: absolute;
  z-index: 7;
  top: 39%;
  left: 14%;
  width: 72%;
  height: 24%;
  background: repeating-linear-gradient(90deg, var(--dom-cobalt) 0 23px, #7696ee 23px 31px);
  border: 3px solid var(--dom-white);
  transform-origin: center bottom;
  animation: dom-address-deck-lay .92s cubic-bezier(.2,.64,.27,1.12) .38s both paused;
}
.dom-address-span .dom-address-bearing {
  position: absolute;
  z-index: 9;
  top: 57%;
  width: 13%;
  height: 12%;
  background: var(--dom-green);
  border: 2px solid #91e2d5;
}
.dom-address-span .bearing-a { left: 17%; animation: dom-address-bearing-a-engage .52s cubic-bezier(.2,.67,.28,1.16) .94s both paused; }
.dom-address-span .bearing-b { right: 17%; animation: dom-address-bearing-b-engage .6s cubic-bezier(.2,.67,.28,1.16) 1.04s both paused; }
.dom-address-span .dom-address-label {
  position: absolute;
  z-index: 10;
  top: 23%;
  display: grid;
  width: 17%;
  aspect-ratio: 1.35;
  place-items: center;
  color: var(--dom-asphalt);
  background: var(--dom-peach);
  border: 2px solid #ffc7b5;
  font: 800 12px/1 system-ui, sans-serif;
}
.dom-address-span .label-a { left: 7%; }
.dom-address-span .label-b { right: 7%; }

@keyframes dom-address-abutment-a-rise {
  0% { translate: 0 6px; scale: .92 .76; opacity: .2; }
  72% { translate: 0 -2px; scale: 1.05 1.1; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes dom-address-abutment-b-rise {
  0% { translate: 0 10px; scale: 1.08 .68; filter: brightness(.5); }
  68% { translate: 0 -3px; scale: .96 1.14; filter: brightness(1.17); }
  100% { translate: none; scale: 1; filter: none; }
}
@keyframes dom-address-deck-lay {
  0% { rotate: x 78deg; translate: 0 -13px; scale: .84 1; opacity: .12; }
  72% { rotate: x -7deg; translate: 0 2px; scale: 1.04 .94; opacity: 1; }
  100% { rotate: x 0deg; translate: none; scale: 1; opacity: 1; }
}
@keyframes dom-address-bearing-a-engage {
  0% { translate: -9px 0; scale: .18 1.3; opacity: .12; }
  70% { translate: 2px 0; scale: 1.16 .86; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes dom-address-bearing-b-engage {
  0% { translate: 10px 0; scale: 1.32 .16; filter: saturate(.34); }
  73% { translate: -2px 0; scale: .86 1.14; filter: saturate(1.2); }
  100% { translate: none; scale: 1; filter: none; }
}

/* Scene 6: static wheel silhouettes are uncovered by four angular shutters. */
.dom-wheel-silhouette-gauges {
  background:
    linear-gradient(0deg, rgba(241,138,104,.13), transparent 54%),
    var(--dom-asphalt);
}
.dom-wheel-silhouette-gauges .dom-wheel-gauge-base {
  position: absolute;
  z-index: 3;
  right: 5%;
  bottom: 12%;
  left: 5%;
  height: 9%;
  background: var(--dom-zinc);
  border: 2px solid var(--dom-white);
}
.dom-wheel-silhouette-gauges .dom-wheel-silhouette {
  position: absolute;
  z-index: 5;
  top: 27%;
  width: 22%;
  aspect-ratio: 1;
  border: 7px solid var(--dom-white);
  border-radius: 50%;
  background: var(--dom-cobalt);
  box-shadow: inset 0 0 0 7px var(--dom-asphalt);
}
.dom-wheel-silhouette-gauges .wheel-a { left: 4%; }
.dom-wheel-silhouette-gauges .wheel-b { left: 28%; }
.dom-wheel-silhouette-gauges .wheel-c { right: 28%; }
.dom-wheel-silhouette-gauges .wheel-d { right: 4%; }
.dom-wheel-silhouette-gauges .dom-wheel-shutter {
  position: absolute;
  z-index: 8;
  top: 21%;
  width: 24%;
  height: 61%;
  background: #5b696b;
  border: 2px solid var(--dom-peach);
}
.dom-wheel-silhouette-gauges .shutter-a {
  left: 3%;
  clip-path: polygon(0 0,100% 0,71% 100%,0 83%);
  animation: dom-wheel-shutter-a-cut .76s cubic-bezier(.2,.61,.27,1.04) .08s both paused;
}
.dom-wheel-silhouette-gauges .shutter-b {
  left: 27%;
  clip-path: polygon(18% 0,100% 12%,100% 100%,0 70%);
  animation: dom-wheel-shutter-b-cut .84s cubic-bezier(.2,.61,.27,1.04) .18s both paused;
}
.dom-wheel-silhouette-gauges .shutter-c {
  right: 27%;
  clip-path: polygon(0 12%,82% 0,100% 70%,0 100%);
  animation: dom-wheel-shutter-c-cut .92s cubic-bezier(.2,.61,.27,1.04) .28s both paused;
}
.dom-wheel-silhouette-gauges .shutter-d {
  right: 3%;
  clip-path: polygon(0 0,100% 0,100% 83%,29% 100%);
  animation: dom-wheel-shutter-d-cut 1s cubic-bezier(.2,.61,.27,1.04) .38s both paused;
}
.dom-wheel-silhouette-gauges .dom-wheel-gauge-stop {
  position: absolute;
  z-index: 10;
  bottom: 9%;
  width: 12%;
  height: 13%;
  background: var(--dom-green);
  border: 2px solid #91e2d5;
  animation: dom-wheel-stops-confirm .5s cubic-bezier(.2,.67,.28,1.16) both paused;
}
.dom-wheel-silhouette-gauges .stop-a { left: 9%; animation-delay: .72s; }
.dom-wheel-silhouette-gauges .stop-b { left: 33%; animation-delay: .82s; }
.dom-wheel-silhouette-gauges .stop-c { right: 33%; animation-delay: .92s; }
.dom-wheel-silhouette-gauges .stop-d { right: 9%; animation-delay: 1.02s; }

@keyframes dom-wheel-shutter-a-cut {
  0% { translate: 0 0; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: .98; }
  100% { translate: -31px -5px; clip-path: polygon(0 0,36% 0,18% 100%,0 82%); opacity: .64; }
}
@keyframes dom-wheel-shutter-b-cut {
  0% { translate: 0 0; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); filter: brightness(.74); }
  100% { translate: 7px -34px; clip-path: polygon(42% 0,100% 14%,100% 36%,62% 25%); filter: brightness(1.08); }
}
@keyframes dom-wheel-shutter-c-cut {
  0% { translate: 0 0; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: .96; }
  100% { translate: -6px 35px; clip-path: polygon(0 66%,38% 77%,58% 100%,0 100%); opacity: .62; }
}
@keyframes dom-wheel-shutter-d-cut {
  0% { translate: 0 0; clip-path: polygon(0 0,100% 0,100% 100%,0 100%); filter: saturate(.58); }
  100% { translate: 32px 4px; clip-path: polygon(64% 0,100% 0,100% 82%,82% 100%); filter: saturate(1.12); }
}
@keyframes dom-wheel-stops-confirm {
  0% { scale: .34 1.3; translate: 0 7px; opacity: .12; }
  70% { scale: 1.13 .85; translate: 0 -2px; opacity: 1; }
  100% { scale: 1; translate: none; opacity: 1; }
}

/* Scene 7: eight rosettes are embossed independently into a fixed deck. */
.dom-deck-rivet-bloom {
  background:
    linear-gradient(145deg, rgba(40,100,232,.14), transparent 54%),
    var(--dom-asphalt);
}
.dom-deck-rivet-bloom .dom-deck-plate {
  position: absolute;
  z-index: 3;
  inset: 15% 7%;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.08) 0 4px, transparent 4px 12px),
    #536164;
  border: 3px solid var(--dom-white);
  clip-path: polygon(3% 0,97% 0,100% 86%,92% 100%,8% 100%,0 86%);
}
.dom-deck-rivet-bloom .dom-rivet-rosette {
  position: absolute;
  z-index: 7;
  width: 13%;
  aspect-ratio: 1;
  background: var(--dom-peach);
  border: 2px solid #ffc7b5;
  clip-path: polygon(50% 0,64% 27%,94% 18%,76% 48%,100% 63%,68% 69%,65% 100%,48% 75%,20% 94%,28% 63%,0 49%,31% 40%);
  transform-origin: center;
}
.dom-deck-rivet-bloom .rivet-a { top: 23%; left: 12%; animation: dom-rivet-a-emboss .58s cubic-bezier(.2,.67,.28,1.18) .08s both paused; }
.dom-deck-rivet-bloom .rivet-b { top: 23%; left: 34%; animation: dom-rivet-b-emboss .64s cubic-bezier(.2,.67,.28,1.18) .17s both paused; }
.dom-deck-rivet-bloom .rivet-c { top: 23%; right: 34%; animation: dom-rivet-c-emboss .7s cubic-bezier(.2,.67,.28,1.18) .26s both paused; }
.dom-deck-rivet-bloom .rivet-d { top: 23%; right: 12%; animation: dom-rivet-d-emboss .76s cubic-bezier(.2,.67,.28,1.18) .35s both paused; }
.dom-deck-rivet-bloom .rivet-e { bottom: 23%; left: 12%; animation: dom-rivet-e-emboss .62s cubic-bezier(.2,.67,.28,1.18) .44s both paused; }
.dom-deck-rivet-bloom .rivet-f { bottom: 23%; left: 34%; animation: dom-rivet-f-emboss .68s cubic-bezier(.2,.67,.28,1.18) .53s both paused; }
.dom-deck-rivet-bloom .rivet-g { right: 34%; bottom: 23%; animation: dom-rivet-g-emboss .74s cubic-bezier(.2,.67,.28,1.18) .62s both paused; }
.dom-deck-rivet-bloom .rivet-h { right: 12%; bottom: 23%; animation: dom-rivet-h-emboss .8s cubic-bezier(.2,.67,.28,1.18) .71s both paused; }
.dom-deck-rivet-bloom .dom-rivet-boundary {
  position: absolute;
  z-index: 10;
  inset: 9% 4%;
  border: 2px dashed #91e2d5;
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
  animation: dom-rivet-boundary-trace .92s steps(10,end) .56s both paused;
}

@keyframes dom-rivet-a-emboss {
  0% { scale: .08 1.24; rotate: -29deg; opacity: .08; box-shadow: 0 0 0 rgba(0,0,0,0); }
  68% { scale: 1.2 .84; rotate: 6deg; opacity: 1; box-shadow: -4px 5px 0 rgba(3,10,12,.38); }
  100% { scale: 1; rotate: 0deg; opacity: 1; box-shadow: -2px 3px 0 rgba(3,10,12,.42); }
}
@keyframes dom-rivet-b-emboss {
  0% { scale: 1.32 .1; rotate: 23deg; filter: brightness(.46); }
  71% { scale: .82 1.17; rotate: -5deg; filter: brightness(1.24); }
  100% { scale: 1; rotate: 0deg; filter: none; box-shadow: 2px 3px 0 rgba(3,10,12,.4); }
}
@keyframes dom-rivet-c-emboss {
  0% { translate: -8px 5px; scale: .24 .42; opacity: .12; }
  65% { translate: 2px -2px; scale: 1.13 1.12; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; box-shadow: -1px 4px 0 rgba(3,10,12,.4); }
}
@keyframes dom-rivet-d-emboss {
  0% { scale: .14 .76; rotate: -42deg; filter: saturate(.25); opacity: .16; }
  74% { scale: 1.16 1.04; rotate: 8deg; filter: saturate(1.26); opacity: 1; }
  100% { scale: 1; rotate: 0deg; filter: none; opacity: 1; box-shadow: 3px 2px 0 rgba(3,10,12,.44); }
}
@keyframes dom-rivet-e-emboss {
  0% { translate: 7px -5px; scale: .48 .16; opacity: .1; filter: contrast(.5); }
  69% { translate: -2px 2px; scale: .9 1.18; opacity: 1; filter: contrast(1.2); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; box-shadow: -3px -2px 0 rgba(3,10,12,.4); }
}
@keyframes dom-rivet-f-emboss {
  0% { scale: .19 1.3; rotate: 34deg; opacity: .11; }
  76% { scale: 1.19 .81; rotate: -7deg; opacity: 1; }
  100% { scale: 1; rotate: 0deg; opacity: 1; box-shadow: 1px -4px 0 rgba(3,10,12,.38); }
}
@keyframes dom-rivet-g-emboss {
  0% { translate: -6px -6px; scale: .58 .2; filter: brightness(.55); }
  72% { translate: 2px 2px; scale: 1.08 1.17; filter: brightness(1.19); }
  100% { translate: none; scale: 1; filter: none; box-shadow: 3px -2px 0 rgba(3,10,12,.42); }
}
@keyframes dom-rivet-h-emboss {
  0% { scale: 1.28 .12; rotate: -18deg; opacity: .09; filter: saturate(.38); }
  67% { scale: .86 1.14; rotate: 4deg; opacity: 1; filter: saturate(1.18); }
  100% { scale: 1; rotate: 0deg; opacity: 1; filter: none; box-shadow: 2px -3px 0 rgba(3,10,12,.4); }
}
@keyframes dom-rivet-boundary-trace {
  0% { clip-path: polygon(0 0,0 0,0 0,0 0); opacity: .12; }
  48% { clip-path: polygon(0 0,100% 0,100% 0,0 0); opacity: .8; }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; }
}

/* Scene 8: three offset ledger leaves receive three unlike corner notches. */
.dom-fare-notch-ledger {
  background:
    linear-gradient(120deg, rgba(23,111,98,.14), transparent 56%),
    var(--dom-asphalt);
}
.dom-fare-notch-ledger .dom-ledger-leaf {
  position: absolute;
  z-index: var(--dom-leaf-z);
  background: #5d6a6c;
  border: 2px solid var(--dom-white);
  transform-origin: left bottom;
}
.dom-fare-notch-ledger .leaf-a {
  --dom-leaf-z: 4;
  top: 13%; left: 9%; width: 68%; height: 35%;
  clip-path: polygon(0 0,100% 0,100% 100%,14% 100%,0 72%);
  animation: dom-ledger-leaf-a-set .72s cubic-bezier(.2,.64,.27,1.12) .08s both paused;
}
.dom-fare-notch-ledger .leaf-b {
  --dom-leaf-z: 5;
  top: 33%; left: 16%; width: 72%; height: 34%;
  clip-path: polygon(0 0,88% 0,100% 28%,100% 100%,0 100%);
  animation: dom-ledger-leaf-b-set .84s cubic-bezier(.2,.64,.27,1.12) .2s both paused;
}
.dom-fare-notch-ledger .leaf-c {
  --dom-leaf-z: 6;
  right: 6%; bottom: 10%; width: 66%; height: 33%;
  clip-path: polygon(12% 0,100% 0,100% 74%,86% 100%,0 100%,0 24%);
  animation: dom-ledger-leaf-c-set .96s cubic-bezier(.2,.64,.27,1.12) .32s both paused;
}
.dom-fare-notch-ledger .dom-ledger-notch {
  position: absolute;
  z-index: 10;
  width: 17%;
  height: 21%;
  background: var(--dom-peach);
  border: 2px solid #ffc7b5;
}
.dom-fare-notch-ledger .notch-a {
  top: 15%; right: 21%;
  clip-path: polygon(0 0,100% 0,72% 43%,100% 100%,0 100%,26% 43%);
  animation: dom-ledger-notch-a-cut .54s steps(5,end) .72s both paused;
}
.dom-fare-notch-ledger .notch-b {
  top: 38%; left: 18%;
  clip-path: polygon(0 0,74% 0,100% 50%,74% 100%,0 100%,24% 50%);
  animation: dom-ledger-notch-b-cut .62s steps(6,end) .84s both paused;
}
.dom-fare-notch-ledger .notch-c {
  right: 8%; bottom: 12%;
  clip-path: polygon(0 0,100% 0,76% 36%,100% 70%,58% 100%,0 76%,24% 38%);
  animation: dom-ledger-notch-c-cut .7s steps(7,end) .96s both paused;
}
.dom-fare-notch-ledger .dom-ledger-value {
  position: absolute;
  z-index: 12;
  display: grid;
  min-width: 18%;
  min-height: 17%;
  padding: 3px 6px;
  place-items: center;
  color: var(--dom-asphalt);
  background: var(--dom-white);
  font: 800 10px/1 system-ui, sans-serif;
  letter-spacing: .08em;
}
.dom-fare-notch-ledger .value-a { top: 24%; left: 24%; }
.dom-fare-notch-ledger .value-b { right: 25%; bottom: 18%; }
.dom-fare-notch-ledger .dom-ledger-spine {
  position: absolute;
  z-index: 14;
  top: 8%;
  bottom: 8%;
  left: 8%;
  width: 7%;
  background: var(--dom-green);
  border: 2px solid #91e2d5;
  animation: dom-ledger-spine-bind .78s cubic-bezier(.2,.67,.28,1.14) .48s both paused;
}

@keyframes dom-ledger-leaf-a-set {
  0% { translate: -14px -8px; rotate: -7deg; clip-path: polygon(0 0,18% 0,18% 100%,0 72%); opacity: .14; }
  70% { translate: 3px 2px; rotate: 2deg; clip-path: polygon(0 0,100% 0,100% 100%,14% 100%,0 72%); opacity: 1; }
  100% { translate: none; rotate: 0deg; clip-path: polygon(0 0,100% 0,100% 100%,14% 100%,0 72%); opacity: 1; }
}
@keyframes dom-ledger-leaf-b-set {
  0% { translate: 18px -5px; rotate: 6deg; scale: .76 1; filter: brightness(.52); }
  73% { translate: -3px 2px; rotate: -2deg; scale: 1.06 .96; filter: brightness(1.15); }
  100% { translate: none; rotate: 0deg; scale: 1; filter: none; }
}
@keyframes dom-ledger-leaf-c-set {
  0% { translate: 7px 17px; rotate: -5deg; clip-path: polygon(12% 0,100% 0,100% 74%,86% 74%,0 74%,0 24%); opacity: .16; }
  69% { translate: -2px -3px; rotate: 2deg; clip-path: polygon(12% 0,100% 0,100% 74%,86% 100%,0 100%,0 24%); opacity: 1; }
  100% { translate: none; rotate: 0deg; clip-path: polygon(12% 0,100% 0,100% 74%,86% 100%,0 100%,0 24%); opacity: 1; }
}
@keyframes dom-ledger-notch-a-cut {
  0% { clip-path: inset(0 100% 0 0); opacity: .1; }
  100% { clip-path: polygon(0 0,100% 0,72% 43%,100% 100%,0 100%,26% 43%); opacity: 1; }
}
@keyframes dom-ledger-notch-b-cut {
  0% { clip-path: inset(50% 50%); filter: brightness(.48); }
  100% { clip-path: polygon(0 0,74% 0,100% 50%,74% 100%,0 100%,24% 50%); filter: none; }
}
@keyframes dom-ledger-notch-c-cut {
  0% { clip-path: polygon(50% 0,50% 0,50% 100%,50% 100%); opacity: .12; }
  100% { clip-path: polygon(0 0,100% 0,76% 36%,100% 70%,58% 100%,0 76%,24% 38%); opacity: 1; }
}
@keyframes dom-ledger-spine-bind {
  0% { scale: 1 .12; transform-origin: center bottom; opacity: .14; }
  72% { scale: .88 1.12; transform-origin: center bottom; opacity: 1; }
  100% { scale: 1; transform-origin: center bottom; opacity: 1; }
}

/* Scene 9: three arms settle while three counterweights travel oppositely. */
.dom-sign-counterweights {
  background:
    linear-gradient(150deg, rgba(241,138,104,.13), transparent 58%),
    var(--dom-asphalt);
}
.dom-sign-counterweights .dom-sign-mast {
  position: absolute;
  z-index: 5;
  top: 8%;
  bottom: 8%;
  left: 48%;
  width: 6%;
  background: linear-gradient(90deg, #657476, var(--dom-zinc), #647274);
  border: 2px solid var(--dom-white);
}
.dom-sign-counterweights .dom-sign-arm {
  position: absolute;
  z-index: 7;
  left: 49%;
  width: 39%;
  height: 10%;
  background: var(--dom-cobalt);
  border: 2px solid #a9baff;
  transform-origin: 4% center;
}
.dom-sign-counterweights .arm-a { top: 22%; rotate: -13deg; animation: dom-sign-arm-a-balance .82s cubic-bezier(.2,.61,.27,1.08) .08s both paused; }
.dom-sign-counterweights .arm-b { top: 46%; rotate: 8deg; animation: dom-sign-arm-b-balance .94s cubic-bezier(.2,.61,.27,1.08) .2s both paused; }
.dom-sign-counterweights .arm-c { top: 69%; rotate: -5deg; animation: dom-sign-arm-c-balance 1.06s cubic-bezier(.2,.61,.27,1.08) .32s both paused; }
.dom-sign-counterweights .dom-sign-weight {
  position: absolute;
  z-index: 9;
  left: 11%;
  width: 19%;
  height: 17%;
  background: var(--dom-peach);
  border: 2px solid #ffc7b5;
  clip-path: polygon(16% 0,84% 0,100% 72%,78% 100%,22% 100%,0 72%);
}
.dom-sign-counterweights .weight-a { top: 17%; animation: dom-sign-weight-a-counter .78s cubic-bezier(.2,.67,.28,1.14) .3s both paused; }
.dom-sign-counterweights .weight-b { top: 42%; animation: dom-sign-weight-b-counter .9s cubic-bezier(.2,.67,.28,1.14) .42s both paused; }
.dom-sign-counterweights .weight-c { top: 66%; animation: dom-sign-weight-c-counter 1.02s cubic-bezier(.2,.67,.28,1.14) .54s both paused; }
.dom-sign-counterweights .dom-sign-pivot {
  position: absolute;
  z-index: 12;
  left: 46.5%;
  width: 9%;
  aspect-ratio: 1;
  background: var(--dom-green);
  border: 2px solid #91e2d5;
  rotate: 45deg;
  animation: dom-sign-pivots-lock .48s cubic-bezier(.2,.67,.28,1.16) both paused;
}
.dom-sign-counterweights .pivot-a { top: 20%; animation-delay: .84s; }
.dom-sign-counterweights .pivot-b { top: 44%; animation-delay: .96s; }
.dom-sign-counterweights .pivot-c { top: 67%; animation-delay: 1.08s; }

@keyframes dom-sign-arm-a-balance {
  0% { rotate: 31deg; translate: 0 -10px; scale: .36 1; opacity: .15; }
  68% { rotate: -18deg; translate: 0 2px; scale: 1.06 .94; opacity: 1; }
  100% { rotate: -13deg; translate: none; scale: 1; opacity: 1; }
}
@keyframes dom-sign-arm-b-balance {
  0% { rotate: -27deg; translate: 0 12px; scale: .48 .76; filter: brightness(.52); }
  72% { rotate: 13deg; translate: 0 -2px; scale: 1.04 1.1; filter: brightness(1.18); }
  100% { rotate: 8deg; translate: none; scale: 1; filter: none; }
}
@keyframes dom-sign-arm-c-balance {
  0% { rotate: 24deg; translate: 0 -8px; scale: .28 1.13; opacity: .12; filter: saturate(.38); }
  75% { rotate: -9deg; translate: 0 2px; scale: 1.09 .9; opacity: 1; filter: saturate(1.2); }
  100% { rotate: -5deg; translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes dom-sign-weight-a-counter {
  0% { translate: 0 18px; scale: .82 .58; opacity: .12; }
  70% { translate: 0 -3px; scale: 1.09 1.12; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes dom-sign-weight-b-counter {
  0% { translate: 0 -20px; scale: 1.18 .44; filter: brightness(.48); }
  73% { translate: 0 4px; scale: .91 1.16; filter: brightness(1.2); }
  100% { translate: none; scale: 1; filter: none; }
}
@keyframes dom-sign-weight-c-counter {
  0% { translate: 0 14px; scale: .54 1.2; opacity: .14; filter: saturate(.42); }
  69% { translate: 0 -3px; scale: 1.12 .87; opacity: 1; filter: saturate(1.18); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes dom-sign-pivots-lock {
  0% { scale: .14 1.36; rotate: 12deg; opacity: .1; }
  72% { scale: 1.16 .84; rotate: 51deg; opacity: 1; }
  100% { scale: 1; rotate: 45deg; opacity: 1; }
}

/* Scene 10: six triangular prisms rise from shallow rectangular beds. */
.dom-reflector-prism-set {
  background:
    linear-gradient(135deg, rgba(40,100,232,.15), transparent 56%),
    var(--dom-asphalt);
}
.dom-reflector-prism-set .dom-prism-frame {
  position: absolute;
  z-index: 3;
  inset: 8% 5%;
  border: 2px solid var(--dom-zinc);
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
  animation: dom-prism-frame-draw .9s steps(9,end) .18s both paused;
}
.dom-reflector-prism-set .dom-prism-bed {
  position: absolute;
  z-index: 5;
  width: 25%;
  height: 17%;
  background: #536164;
  border: 2px solid var(--dom-white);
  animation: dom-prism-beds-seat .54s cubic-bezier(.2,.67,.28,1.14) both paused;
}
.dom-reflector-prism-set .bed-a { top: 25%; left: 7%; animation-delay: .08s; }
.dom-reflector-prism-set .bed-b { top: 25%; left: 37.5%; animation-delay: .15s; }
.dom-reflector-prism-set .bed-c { top: 25%; right: 7%; animation-delay: .22s; }
.dom-reflector-prism-set .bed-d { bottom: 17%; left: 7%; animation-delay: .29s; }
.dom-reflector-prism-set .bed-e { bottom: 17%; left: 37.5%; animation-delay: .36s; }
.dom-reflector-prism-set .bed-f { right: 7%; bottom: 17%; animation-delay: .43s; }
.dom-reflector-prism-set .dom-reflector-prism {
  --dom-prism-rise: 8px;
  position: absolute;
  z-index: 9;
  width: 17%;
  height: 23%;
  background: linear-gradient(135deg, #ffc4b0 0 44%, var(--dom-peach) 45% 68%, #b84c43 69%);
  border: 2px solid #ffe0d5;
  clip-path: polygon(50% 0,100% 100%,0 100%);
  transform-origin: center bottom;
  translate: 0 calc(var(--dom-prism-rise) * -1);
  transition: rotate .18s ease-out;
}
.dom-reflector-prism-set .prism-a { --dom-prism-rise: 6px; top: 18%; left: 11%; animation: dom-prism-a-emerge .68s cubic-bezier(.2,.67,.28,1.15) .44s both paused; }
.dom-reflector-prism-set .prism-b { --dom-prism-rise: 10px; top: 18%; left: 41.5%; animation: dom-prism-b-emerge .76s cubic-bezier(.2,.67,.28,1.15) .52s both paused; }
.dom-reflector-prism-set .prism-c { --dom-prism-rise: 7px; top: 18%; right: 11%; animation: dom-prism-c-emerge .84s cubic-bezier(.2,.67,.28,1.15) .6s both paused; }
.dom-reflector-prism-set .prism-d { --dom-prism-rise: 12px; bottom: 24%; left: 11%; animation: dom-prism-d-emerge .72s cubic-bezier(.2,.67,.28,1.15) .68s both paused; }
.dom-reflector-prism-set .prism-e { --dom-prism-rise: 5px; bottom: 24%; left: 41.5%; animation: dom-prism-e-emerge .8s cubic-bezier(.2,.67,.28,1.15) .76s both paused; }
.dom-reflector-prism-set .prism-f { --dom-prism-rise: 9px; right: 11%; bottom: 24%; animation: dom-prism-f-emerge .88s cubic-bezier(.2,.67,.28,1.15) .84s both paused; }

.dom-faq:has(.dom-faq-list > details:nth-child(1)[open]) .dom-reflector-prism-set .prism-a,
.dom-faq:has(.dom-faq-list > details:nth-child(2)[open]) .dom-reflector-prism-set .prism-b,
.dom-faq:has(.dom-faq-list > details:nth-child(3)[open]) .dom-reflector-prism-set .prism-c,
.dom-faq:has(.dom-faq-list > details:nth-child(4)[open]) .dom-reflector-prism-set .prism-d,
.dom-faq:has(.dom-faq-list > details:nth-child(5)[open]) .dom-reflector-prism-set .prism-e,
.dom-faq:has(.dom-faq-list > details:nth-child(6)[open]) .dom-reflector-prism-set .prism-f {
  rotate: 7deg;
  filter: brightness(1.14) saturate(1.08);
}

@keyframes dom-prism-beds-seat {
  0% { scale: .72 .18; opacity: .16; filter: brightness(.5); }
  70% { scale: 1.08 1.16; opacity: 1; filter: brightness(1.16); }
  100% { scale: 1; opacity: 1; filter: none; }
}
@keyframes dom-prism-a-emerge {
  0% { translate: 0 8px; scale: .68 .14; clip-path: polygon(50% 72%,100% 100%,0 100%); opacity: .1; }
  72% { translate: 0 -8px; scale: 1.07 1.14; clip-path: polygon(50% 0,100% 100%,0 100%); opacity: 1; }
  100% { translate: 0 -6px; scale: 1; clip-path: polygon(50% 0,100% 100%,0 100%); opacity: 1; }
}
@keyframes dom-prism-b-emerge {
  0% { translate: 0 10px; scale: .36 .28; filter: brightness(.44); }
  68% { translate: 0 -13px; scale: 1.12 .92; filter: brightness(1.24); }
  100% { translate: 0 -10px; scale: 1; filter: none; }
}
@keyframes dom-prism-c-emerge {
  0% { translate: 0 7px; scale: .82 .1; opacity: .12; filter: saturate(.32); }
  75% { translate: 0 -9px; scale: .94 1.17; opacity: 1; filter: saturate(1.24); }
  100% { translate: 0 -7px; scale: 1; opacity: 1; filter: none; }
}
@keyframes dom-prism-d-emerge {
  0% { translate: 0 12px; scale: .2 .52; clip-path: polygon(50% 55%,82% 100%,18% 100%); opacity: .14; }
  71% { translate: 0 -15px; scale: 1.15 .88; clip-path: polygon(50% 0,100% 100%,0 100%); opacity: 1; }
  100% { translate: 0 -12px; scale: 1; clip-path: polygon(50% 0,100% 100%,0 100%); opacity: 1; }
}
@keyframes dom-prism-e-emerge {
  0% { translate: 0 6px; scale: 1.22 .12; filter: contrast(.45); }
  73% { translate: 0 -7px; scale: .88 1.13; filter: contrast(1.2); }
  100% { translate: 0 -5px; scale: 1; filter: none; }
}
@keyframes dom-prism-f-emerge {
  0% { translate: 0 11px; scale: .48 .22; opacity: .1; filter: hue-rotate(18deg); }
  69% { translate: 0 -12px; scale: 1.1 1.08; opacity: 1; filter: hue-rotate(-4deg); }
  100% { translate: 0 -9px; scale: 1; opacity: 1; filter: none; }
}
@keyframes dom-prism-frame-draw {
  0% { clip-path: polygon(0 0,0 0,0 0,0 0); opacity: .12; }
  52% { clip-path: polygon(0 0,100% 0,100% 0,0 0); opacity: .76; }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; }
}

@media (max-width: 1080px) {
  .dom-page .dom-decor { width: 238px; height: 128px; }
  .dom-overpass-lift { right: 24px; bottom: 18px; }
  .dom-slip-pocket { left: 22px; bottom: 24px; }
  .dom-guardrail-thread { top: 22px; right: 26px; }
  .dom-yard-corner-clearance { bottom: 18px; left: 28px; }
  .dom-address-span { right: 20px; bottom: 26px; }
  .dom-wheel-silhouette-gauges { top: 22px; left: 24px; }
  .dom-deck-rivet-bloom { right: 30px; bottom: 20px; }
  .dom-fare-notch-ledger { bottom: 25px; left: 20px; }
  .dom-sign-counterweights { top: 24px; right: 22px; }
  .dom-reflector-prism-set { bottom: 18px; left: 26px; }
}

@media (max-width: 840px) {
  .dom-page .dom-decor {
    position: relative;
    inset: auto;
    width: 220px;
    height: 118px;
    margin-top: 34px;
  }
  .dom-overpass-lift { margin-right: 34px; margin-left: auto; }
  .dom-slip-pocket { margin-right: auto; margin-left: 28px; }
  .dom-guardrail-thread { margin-right: 42px; margin-left: auto; }
  .dom-yard-corner-clearance { margin-right: auto; margin-left: 36px; }
  .dom-address-span { margin-right: 30px; margin-left: auto; }
  .dom-wheel-silhouette-gauges { margin-right: auto; margin-left: 44px; }
  .dom-deck-rivet-bloom { margin-right: 38px; margin-left: auto; }
  .dom-fare-notch-ledger { margin-right: auto; margin-left: 24px; }
  .dom-sign-counterweights { margin-right: 46px; margin-left: auto; }
  .dom-reflector-prism-set { margin-right: auto; margin-left: 32px; }
}

@media (max-width: 560px) {
  .dom-page .dom-decor {
    width: 190px;
    height: 104px;
    margin-top: 28px;
    box-shadow: 0 10px 24px rgba(3,10,12,.2);
  }
  .dom-overpass-lift { margin-right: 18px; margin-left: auto; }
  .dom-slip-pocket { margin-right: auto; margin-left: 20px; }
  .dom-guardrail-thread { margin-right: 24px; margin-left: auto; }
  .dom-yard-corner-clearance { margin-right: auto; margin-left: 16px; }
  .dom-address-span { margin-right: 22px; margin-left: auto; }
  .dom-wheel-silhouette-gauges { margin-right: auto; margin-left: 26px; }
  .dom-deck-rivet-bloom { margin-right: 16px; margin-left: auto; }
  .dom-fare-notch-ledger { margin-right: auto; margin-left: 22px; }
  .dom-sign-counterweights { margin-right: 28px; margin-left: auto; }
  .dom-reflector-prism-set { margin-right: auto; margin-left: 18px; }
  .dom-address-span .dom-address-label { font-size: 10px; }
  .dom-fare-notch-ledger .dom-ledger-value { min-width: 20%; min-height: 18%; padding: 2px 4px; font-size: 8px; }
}

@media (max-width: 380px) {
  .dom-page .dom-decor {
    width: 160px;
    height: 88px;
    margin-top: 22px;
    border-width: 1px;
    box-shadow: 0 7px 16px rgba(3,10,12,.18);
  }
  .dom-overpass-lift { margin-right: 14px; margin-left: auto; }
  .dom-slip-pocket { margin-right: auto; margin-left: 14px; }
  .dom-guardrail-thread { margin-right: 18px; margin-left: auto; }
  .dom-yard-corner-clearance { margin-right: auto; margin-left: 12px; }
  .dom-address-span { margin-right: 16px; margin-left: auto; }
  .dom-wheel-silhouette-gauges { margin-right: auto; margin-left: 20px; }
  .dom-deck-rivet-bloom { margin-right: 12px; margin-left: auto; }
  .dom-fare-notch-ledger { margin-right: auto; margin-left: 16px; }
  .dom-sign-counterweights { margin-right: 20px; margin-left: auto; }
  .dom-reflector-prism-set { margin-right: auto; margin-left: 14px; }
  .dom-decor .decor-child { border-width: 1px; }
  .dom-wheel-silhouette-gauges .dom-wheel-silhouette { border-width: 4px; box-shadow: inset 0 0 0 4px var(--dom-asphalt); }
  .dom-address-span .dom-address-label { font-size: 8px; }
  .dom-fare-notch-ledger .dom-ledger-value { padding: 1px 3px; font-size: 7px; }
  .dom-reflector-prism-set .dom-reflector-prism { transition-duration: .12s; }
}

@media (prefers-reduced-motion: reduce) {
  [data-motion^="dom-"] .dom-decor,
  [data-motion^="dom-"] .dom-decor *,
  [data-motion^="dom-"] .dom-decor::before,
  [data-motion^="dom-"] .dom-decor::after,
  [data-motion^="dom-"] .dom-decor *::before,
  [data-motion^="dom-"] .dom-decor *::after {
    animation: none !important;
    transition: none !important;
  }
  [data-motion^="dom-"] .dom-decor .decor-child {
    opacity: 1;
    filter: none;
  }
  .dom-overpass-lift .arc-lower { clip-path: inset(0); }
  .dom-overpass-lift .arc-upper { translate: 0 -16px; scale: 1; }
  .dom-overpass-lift .dom-overpass-bearing,
  .dom-overpass-lift .dom-overpass-seam,
  .dom-slip-pocket .dom-slip-sign-post,
  .dom-slip-pocket .dom-slip-stop,
  .dom-slip-pocket .dom-slip-stitch,
  .dom-guardrail-thread .dom-guard-bracket,
  .dom-guardrail-thread .dom-guard-reflector,
  .dom-yard-corner-clearance .dom-yard-stop,
  .dom-address-span .dom-address-abutment,
  .dom-address-span .dom-address-bearing,
  .dom-wheel-silhouette-gauges .dom-wheel-gauge-stop,
  .dom-fare-notch-ledger .dom-ledger-spine,
  .dom-sign-counterweights .dom-sign-weight {
    translate: none;
    scale: 1;
  }
  .dom-slip-pocket .dom-slip-pocket-shape { clip-path: polygon(0 0,100% 16%,82% 100%,0 76%); scale: 1; }
  .dom-slip-pocket .dom-slip-sign-plate { rotate: y 0deg; translate: none; scale: 1; }
  .dom-guardrail-thread .dom-guard-profile { translate: none; transform: skewY(0deg); clip-path: polygon(0 20%,100% 0,96% 77%,0 100%); }
  .dom-yard-corner-clearance .corner-a { translate: none; clip-path: polygon(0 0,100% 0,78% 100%,0 72%); }
  .dom-yard-corner-clearance .corner-b { translate: none; clip-path: polygon(0 0,100% 0,100% 72%,22% 100%); }
  .dom-yard-corner-clearance .corner-c { translate: none; clip-path: polygon(0 28%,78% 0,100% 100%,0 100%); }
  .dom-yard-corner-clearance .corner-d { translate: none; clip-path: polygon(22% 0,100% 28%,100% 100%,0 100%); scale: 1; }
  .dom-yard-corner-clearance .dom-yard-clearance-window,
  .dom-deck-rivet-bloom .dom-rivet-boundary,
  .dom-reflector-prism-set .dom-prism-frame { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
  .dom-address-span .dom-address-span-deck { rotate: x 0deg; translate: none; scale: 1; }
  .dom-wheel-silhouette-gauges .shutter-a { translate: -31px -5px; clip-path: polygon(0 0,36% 0,18% 100%,0 82%); opacity: .64; }
  .dom-wheel-silhouette-gauges .shutter-b { translate: 7px -34px; clip-path: polygon(42% 0,100% 14%,100% 36%,62% 25%); }
  .dom-wheel-silhouette-gauges .shutter-c { translate: -6px 35px; clip-path: polygon(0 66%,38% 77%,58% 100%,0 100%); opacity: .62; }
  .dom-wheel-silhouette-gauges .shutter-d { translate: 32px 4px; clip-path: polygon(64% 0,100% 0,100% 82%,82% 100%); }
  .dom-deck-rivet-bloom .rivet-a { scale: 1; rotate: 0deg; box-shadow: -2px 3px 0 rgba(3,10,12,.42); }
  .dom-deck-rivet-bloom .rivet-b { scale: 1; rotate: 0deg; box-shadow: 2px 3px 0 rgba(3,10,12,.4); }
  .dom-deck-rivet-bloom .rivet-c { translate: none; scale: 1; box-shadow: -1px 4px 0 rgba(3,10,12,.4); }
  .dom-deck-rivet-bloom .rivet-d { scale: 1; rotate: 0deg; box-shadow: 3px 2px 0 rgba(3,10,12,.44); }
  .dom-deck-rivet-bloom .rivet-e { translate: none; scale: 1; box-shadow: -3px -2px 0 rgba(3,10,12,.4); }
  .dom-deck-rivet-bloom .rivet-f { scale: 1; rotate: 0deg; box-shadow: 1px -4px 0 rgba(3,10,12,.38); }
  .dom-deck-rivet-bloom .rivet-g { translate: none; scale: 1; box-shadow: 3px -2px 0 rgba(3,10,12,.42); }
  .dom-deck-rivet-bloom .rivet-h { scale: 1; rotate: 0deg; box-shadow: 2px -3px 0 rgba(3,10,12,.4); }
  .dom-fare-notch-ledger .leaf-a { translate: none; rotate: 0deg; clip-path: polygon(0 0,100% 0,100% 100%,14% 100%,0 72%); }
  .dom-fare-notch-ledger .leaf-b { translate: none; rotate: 0deg; scale: 1; }
  .dom-fare-notch-ledger .leaf-c { translate: none; rotate: 0deg; clip-path: polygon(12% 0,100% 0,100% 74%,86% 100%,0 100%,0 24%); }
  .dom-fare-notch-ledger .notch-a { clip-path: polygon(0 0,100% 0,72% 43%,100% 100%,0 100%,26% 43%); }
  .dom-fare-notch-ledger .notch-b { clip-path: polygon(0 0,74% 0,100% 50%,74% 100%,0 100%,24% 50%); }
  .dom-fare-notch-ledger .notch-c { clip-path: polygon(0 0,100% 0,76% 36%,100% 70%,58% 100%,0 76%,24% 38%); }
  .dom-sign-counterweights .arm-a { rotate: -13deg; translate: none; scale: 1; }
  .dom-sign-counterweights .arm-b { rotate: 8deg; translate: none; scale: 1; }
  .dom-sign-counterweights .arm-c { rotate: -5deg; translate: none; scale: 1; }
  .dom-sign-counterweights .dom-sign-pivot { rotate: 45deg; scale: 1; }
  .dom-reflector-prism-set .prism-a { translate: 0 -6px; scale: 1; clip-path: polygon(50% 0,100% 100%,0 100%); }
  .dom-reflector-prism-set .prism-b { translate: 0 -10px; scale: 1; }
  .dom-reflector-prism-set .prism-c { translate: 0 -7px; scale: 1; }
  .dom-reflector-prism-set .prism-d { translate: 0 -12px; scale: 1; clip-path: polygon(50% 0,100% 100%,0 100%); }
  .dom-reflector-prism-set .prism-e { translate: 0 -5px; scale: 1; }
  .dom-reflector-prism-set .prism-f { translate: 0 -9px; scale: 1; }
}