[data-motion^="obl-"] {
  --obl-ink: #0c1c25;
  --obl-blue: #24678a;
  --obl-teal: #32c6b2;
  --obl-mist: #e8f0ef;
  --obl-steel: #82979a;
  --obl-amber: #efa94d;
  --obl-shift: 30px;
  isolation: isolate;
}

.obl-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(--obl-mist);
  background: rgba(12,28,37,.94);
  border: 1px solid rgba(50,198,178,.36);
  box-shadow: 0 15px 36px rgba(5,15,20,.23);
}

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

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

.obl-boundary-seams { right: 4vw; bottom: 22px; width: 272px; height: 144px; }
.obl-city-windows { left: 4vw; bottom: 22px; width: 266px; height: 140px; }
.obl-direction-sectors { right: 4vw; top: 28px; width: 260px; height: 142px; }
.obl-surface-relief { left: 4vw; bottom: 22px; width: 268px; height: 140px; }
.obl-vehicle-shell { right: 4vw; bottom: 22px; width: 264px; height: 138px; }
.obl-coordinate-vernier { left: 4vw; top: 26px; width: 252px; height: 142px; }
.obl-contact-patches { right: 4vw; bottom: 22px; width: 258px; height: 138px; }
.obl-surface-register { left: 4vw; bottom: 22px; width: 266px; height: 140px; }
.obl-tariff-comb { right: 4vw; top: 26px; width: 270px; height: 140px; }
.obl-contour-faq { left: 4vw; bottom: 22px; width: 260px; height: 140px; }

.js [data-motion="obl-boundary-seams"] .obl-decor .decor-child,
.js [data-motion="obl-city-windows"] .obl-decor .decor-child,
.js [data-motion="obl-direction-sectors"] .obl-decor .decor-child,
.js [data-motion="obl-surface-relief"] .obl-decor .decor-child,
.js [data-motion="obl-vehicle-shell"] .obl-decor .decor-child,
.js [data-motion="obl-coordinate-vernier"] .obl-decor .decor-child,
.js [data-motion="obl-contact-patches"] .obl-decor .decor-child,
.js [data-motion="obl-surface-register"] .obl-decor .decor-child,
.js [data-motion="obl-tariff-comb"] .obl-decor .decor-child,
.js [data-motion="obl-contour-faq"] .obl-decor .decor-child,
.js [data-motion^="obl-"] .obl-decor * {
  animation-play-state: paused;
}

.js [data-motion="obl-boundary-seams"].is-motion-active .obl-decor .decor-child,
.js [data-motion="obl-city-windows"].is-motion-active .obl-decor .decor-child,
.js [data-motion="obl-direction-sectors"].is-motion-active .obl-decor .decor-child,
.js [data-motion="obl-surface-relief"].is-motion-active .obl-decor .decor-child,
.js [data-motion="obl-vehicle-shell"].is-motion-active .obl-decor .decor-child,
.js [data-motion="obl-coordinate-vernier"].is-motion-active .obl-decor .decor-child,
.js [data-motion="obl-contact-patches"].is-motion-active .obl-decor .decor-child,
.js [data-motion="obl-surface-register"].is-motion-active .obl-decor .decor-child,
.js [data-motion="obl-tariff-comb"].is-motion-active .obl-decor .decor-child,
.js [data-motion="obl-contour-faq"].is-motion-active .obl-decor .decor-child,
.js [data-motion^="obl-"].is-motion-active .obl-decor * {
  animation-play-state: running;
}

/* Scene 1: six local seams close around a fixed center. */
.obl-boundary-seams {
  background:
    radial-gradient(circle at 50% 50%, rgba(50,198,178,.14), transparent 43%),
    var(--obl-ink);
}
.obl-boundary-seams .obl-boundary-plate {
  position: absolute;
  z-index: 8;
  top: 36%;
  left: 40%;
  width: 20%;
  height: 28%;
  background: linear-gradient(145deg, var(--obl-mist), var(--obl-steel));
  border: 2px solid #fff;
  clip-path: polygon(18% 0,86% 7%,100% 72%,68% 100%,8% 82%,0 24%);
}
.obl-boundary-seams .obl-boundary-segment {
  position: absolute;
  z-index: 4;
  background: var(--obl-blue);
  border: 2px solid #86bfd7;
  transform-origin: var(--obl-origin, center);
}
.obl-boundary-seams .segment-a { top: 10%; left: 15%; width: 32%; height: 11%; transform: skewX(-13deg); --obl-origin: right center; animation: obl-boundary-nw-knit .72s cubic-bezier(.2,.65,.27,1.14) .08s both paused; }
.obl-boundary-seams .segment-b { top: 7%; right: 18%; width: 29%; height: 10%; transform: skewX(8deg); --obl-origin: left center; animation: obl-boundary-n-knit .78s cubic-bezier(.2,.65,.27,1.14) .16s both paused; }
.obl-boundary-seams .segment-c { top: 19%; right: 8%; width: 10%; height: 39%; transform: skewY(11deg); --obl-origin: center bottom; animation: obl-boundary-e-knit .84s cubic-bezier(.2,.65,.27,1.14) .24s both paused; }
.obl-boundary-seams .segment-d { right: 14%; bottom: 10%; width: 34%; height: 11%; transform: skewX(-9deg); --obl-origin: left center; animation: obl-boundary-se-knit .9s cubic-bezier(.2,.65,.27,1.14) .32s both paused; }
.obl-boundary-seams .segment-e { bottom: 7%; left: 18%; width: 30%; height: 10%; transform: skewX(14deg); --obl-origin: right center; animation: obl-boundary-s-knit .96s cubic-bezier(.2,.65,.27,1.14) .4s both paused; }
.obl-boundary-seams .segment-f { top: 23%; left: 8%; width: 10%; height: 37%; transform: skewY(-12deg); --obl-origin: center top; animation: obl-boundary-w-knit 1.02s cubic-bezier(.2,.65,.27,1.14) .48s both paused; }
.obl-boundary-seams .obl-mkad-quadrant {
  position: absolute;
  z-index: 6;
  width: 20%;
  aspect-ratio: 1;
  border: 4px solid var(--obl-teal);
  border-radius: 50%;
  clip-path: var(--obl-quad-end);
  animation: obl-mkad-quadrants-open .7s steps(7,end) both paused;
}
.obl-boundary-seams .quadrant-a { top: 24%; left: 30%; --obl-quad-start: inset(100% 0 0 100%); --obl-quad-end: inset(0 0 50% 50%); animation-delay: .62s; }
.obl-boundary-seams .quadrant-b { top: 24%; right: 30%; --obl-quad-start: inset(100% 100% 0 0); --obl-quad-end: inset(0 50% 50% 0); animation-delay: .7s; }
.obl-boundary-seams .quadrant-c { right: 30%; bottom: 24%; --obl-quad-start: inset(0 100% 100% 0); --obl-quad-end: inset(50% 50% 0 0); animation-delay: .78s; }
.obl-boundary-seams .quadrant-d { bottom: 24%; left: 30%; --obl-quad-start: inset(0 0 100% 100%); --obl-quad-end: inset(50% 0 0 50%); animation-delay: .86s; }
.obl-boundary-seams .obl-boundary-tab {
  position: absolute;
  z-index: 9;
  width: 8%;
  height: 12%;
  background: var(--obl-amber);
  border: 2px solid #ffdbac;
  animation: obl-boundary-tabs-seat .52s cubic-bezier(.2,.67,.28,1.15) both paused;
}
.obl-boundary-seams .tab-a { top: 23%; left: 46%; --obl-tab-x: 0; --obl-tab-y: -10px; animation-delay: .94s; }
.obl-boundary-seams .tab-b { top: 44%; right: 21%; --obl-tab-x: 11px; --obl-tab-y: 0; animation-delay: 1.02s; }
.obl-boundary-seams .tab-c { bottom: 22%; left: 46%; --obl-tab-x: 0; --obl-tab-y: 9px; animation-delay: 1.1s; }
.obl-boundary-seams .tab-d { top: 44%; left: 21%; --obl-tab-x: -12px; --obl-tab-y: 0; animation-delay: 1.18s; }

@keyframes obl-boundary-nw-knit {
  0% { transform: skewX(-28deg); scale: .12 1.34; translate: 16px 3px; opacity: .14; }
  70% { transform: skewX(-9deg); scale: 1.1 .88; translate: -2px 0; opacity: 1; }
  100% { transform: skewX(-13deg); scale: 1; translate: none; opacity: 1; }
}
@keyframes obl-boundary-n-knit {
  0% { transform: skewX(24deg); scale: .18 .7; translate: -14px -3px; filter: brightness(.52); }
  68% { transform: skewX(5deg); scale: 1.08 1.14; translate: 3px 0; filter: brightness(1.18); }
  100% { transform: skewX(8deg); scale: 1; translate: none; filter: none; }
}
@keyframes obl-boundary-e-knit {
  0% { transform: skewY(29deg); scale: 1 .1; translate: 4px 15px; opacity: .12; }
  73% { transform: skewY(7deg); scale: .9 1.12; translate: 0 -3px; opacity: 1; }
  100% { transform: skewY(11deg); scale: 1; translate: none; opacity: 1; }
}
@keyframes obl-boundary-se-knit {
  0% { transform: skewX(-25deg); scale: .16 1.22; translate: -17px 4px; filter: saturate(.34); }
  71% { transform: skewX(-6deg); scale: 1.12 .9; translate: 3px -1px; filter: saturate(1.22); }
  100% { transform: skewX(-9deg); scale: 1; translate: none; filter: none; }
}
@keyframes obl-boundary-s-knit {
  0% { transform: skewX(31deg); scale: .22 .62; translate: 15px 5px; opacity: .16; }
  69% { transform: skewX(10deg); scale: 1.06 1.18; translate: -2px -1px; opacity: 1; }
  100% { transform: skewX(14deg); scale: 1; translate: none; opacity: 1; }
}
@keyframes obl-boundary-w-knit {
  0% { transform: skewY(-32deg); scale: .74 .08; translate: -5px -16px; filter: brightness(.5); }
  75% { transform: skewY(-8deg); scale: 1.14 1.08; translate: 1px 3px; filter: brightness(1.2); }
  100% { transform: skewY(-12deg); scale: 1; translate: none; filter: none; }
}
@keyframes obl-mkad-quadrants-open {
  0% { clip-path: var(--obl-quad-start); opacity: .1; filter: brightness(.54); }
  100% { clip-path: var(--obl-quad-end); opacity: 1; filter: none; }
}
@keyframes obl-boundary-tabs-seat {
  0% { translate: var(--obl-tab-x) var(--obl-tab-y); scale: .38 1.25; opacity: .14; }
  70% { translate: 0 0; scale: 1.14 .86; opacity: 1; }
  100% { translate: none; scale: 1; opacity: 1; }
}

/* Scene 2: four facade apertures open without moving their frames. */
.obl-city-windows {
  background:
    linear-gradient(150deg, rgba(50,198,178,.12), transparent 52%),
    var(--obl-ink);
}
.obl-city-windows .obl-city-window {
  position: absolute;
  z-index: 4;
  width: 31%;
  height: 30%;
  background:
    repeating-linear-gradient(90deg, var(--obl-blue) 0 8%, transparent 8% 19%),
    repeating-linear-gradient(0deg, #77969f 0 12%, var(--obl-mist) 12% 20%);
  border: 3px solid var(--obl-mist);
}
.obl-city-windows .window-a { top: 11%; left: 13%; animation: obl-window-a-aperture .7s steps(7,end) .08s both paused; }
.obl-city-windows .window-b { top: 10%; right: 11%; width: 36%; animation: obl-window-b-aperture .78s steps(8,end) .18s both paused; }
.obl-city-windows .window-c { bottom: 20%; left: 10%; width: 36%; height: 34%; animation: obl-window-c-aperture .86s steps(9,end) .28s both paused; }
.obl-city-windows .window-d { right: 13%; bottom: 21%; animation: obl-window-d-aperture .94s steps(10,end) .38s both paused; }
.obl-city-windows .obl-city-key {
  position: absolute;
  z-index: 7;
  width: 8%;
  aspect-ratio: 1;
  background: var(--obl-amber);
  border: 2px solid #ffdbac;
  transform-origin: center;
  rotate: var(--obl-key-angle);
  animation: obl-window-keys-index .52s cubic-bezier(.2,.67,.28,1.16) both paused;
}
.obl-city-windows .key-a { top: 7%; left: 9%; --obl-key-angle: 11deg; animation-delay: .7s; }
.obl-city-windows .key-b { top: 7%; right: 7%; --obl-key-angle: 17deg; animation-delay: .8s; }
.obl-city-windows .key-c { bottom: 16%; left: 6%; --obl-key-angle: 23deg; animation-delay: .9s; }
.obl-city-windows .key-d { right: 9%; bottom: 17%; --obl-key-angle: 29deg; animation-delay: 1s; }
.obl-city-windows .obl-city-sill {
  position: absolute;
  z-index: 8;
  right: 7%;
  bottom: 7%;
  left: 7%;
  height: 8%;
  background: var(--obl-teal);
  border: 2px solid #b5fff5;
  transform-origin: center bottom;
  animation: obl-window-sill-set .6s cubic-bezier(.2,.67,.28,1.14) 1.12s both paused;
}

@keyframes obl-window-a-aperture {
  0% { clip-path: polygon(0 0,9% 0,9% 9%,0 9%); opacity: .12; }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; }
}
@keyframes obl-window-b-aperture {
  0% { clip-path: polygon(91% 91%,100% 91%,100% 100%,91% 100%); opacity: .14; filter: brightness(.52); }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; filter: none; }
}
@keyframes obl-window-c-aperture {
  0% { clip-path: inset(0 46%); scale: .82 1; opacity: .16; }
  100% { clip-path: inset(0); scale: 1; opacity: 1; }
}
@keyframes obl-window-d-aperture {
  0% { clip-path: polygon(50% 46%,54% 50%,50% 54%,46% 50%); opacity: .1; filter: saturate(.3); }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; filter: none; }
}
@keyframes obl-window-keys-index {
  0% { rotate: 0deg; scale: .22 1.38; opacity: .12; }
  72% { rotate: calc(var(--obl-key-angle) + 4deg); scale: 1.16 .84; opacity: 1; }
  100% { rotate: var(--obl-key-angle); scale: 1; opacity: 1; }
}
@keyframes obl-window-sill-set {
  0% { scale: 1 .08; opacity: .16; filter: brightness(.56); }
  69% { scale: .96 1.18; opacity: 1; filter: brightness(1.18); }
  100% { scale: 1; opacity: 1; filter: none; }
}

/* Scene 3: five bounded sectors fan from one negative window. */
.obl-direction-sectors {
  background:
    radial-gradient(circle at 50% 50%, rgba(36,103,138,.2), transparent 44%),
    var(--obl-ink);
}
.obl-direction-sectors .obl-sector-window {
  position: absolute;
  z-index: 9;
  top: 38%;
  left: 41%;
  width: 18%;
  height: 24%;
  background: var(--obl-ink);
  border: 3px solid var(--obl-mist);
  box-shadow: inset 0 0 0 4px rgba(50,198,178,.32);
}
.obl-direction-sectors .obl-sector {
  position: absolute;
  z-index: 4;
  background: linear-gradient(135deg, var(--obl-blue), #78a9ba);
  border: 2px solid #a9d2dd;
}
.obl-direction-sectors .sector-a { top: 8%; left: 41%; width: 18%; height: 31%; clip-path: polygon(34% 100%,66% 100%,100% 0,0 0); animation: obl-sector-n-fan .72s steps(7,end) .08s both paused; }
.obl-direction-sectors .sector-b { top: 18%; right: 9%; width: 34%; height: 27%; clip-path: polygon(0 64%,0 100%,100% 70%,100% 0); animation: obl-sector-ne-fan .8s steps(8,end) .18s both paused; }
.obl-direction-sectors .sector-c { right: 10%; bottom: 10%; width: 35%; height: 31%; clip-path: polygon(0 0,0 40%,100% 100%,100% 28%); animation: obl-sector-se-fan .88s steps(9,end) .28s both paused; }
.obl-direction-sectors .sector-d { bottom: 9%; left: 10%; width: 35%; height: 32%; clip-path: polygon(100% 0,100% 42%,0 100%,0 25%); animation: obl-sector-sw-fan .96s steps(10,end) .38s both paused; }
.obl-direction-sectors .sector-e { top: 22%; left: 8%; width: 35%; height: 28%; clip-path: polygon(100% 63%,100% 100%,0 73%,0 0); animation: obl-sector-w-fan 1.04s steps(11,end) .48s both paused; }
.obl-direction-sectors .obl-sector-stop {
  position: absolute;
  z-index: 7;
  width: 7%;
  aspect-ratio: 1;
  background: var(--obl-amber);
  border: 2px solid #ffdaaa;
  border-radius: 3px;
  animation: obl-sector-stops-confirm .5s cubic-bezier(.2,.67,.28,1.16) both paused;
}
.obl-direction-sectors .stop-a { top: 4%; left: 46%; animation-delay: .66s; }
.obl-direction-sectors .stop-b { top: 13%; right: 5%; animation-delay: .76s; }
.obl-direction-sectors .stop-c { right: 5%; bottom: 5%; animation-delay: .86s; }
.obl-direction-sectors .stop-d { bottom: 4%; left: 5%; animation-delay: .96s; }
.obl-direction-sectors .stop-e { top: 17%; left: 4%; animation-delay: 1.06s; }

@keyframes obl-sector-n-fan {
  0% { clip-path: polygon(46% 100%,54% 100%,55% 91%,45% 91%); translate: 0 12px; opacity: .12; }
  100% { clip-path: polygon(34% 100%,66% 100%,100% 0,0 0); translate: none; opacity: 1; }
}
@keyframes obl-sector-ne-fan {
  0% { clip-path: polygon(0 64%,0 76%,11% 70%,11% 62%); translate: -13px 7px; filter: brightness(.52); }
  100% { clip-path: polygon(0 64%,0 100%,100% 70%,100% 0); translate: none; filter: none; }
}
@keyframes obl-sector-se-fan {
  0% { clip-path: polygon(0 0,0 12%,10% 18%,10% 7%); translate: -11px -8px; opacity: .14; scale: .92; }
  100% { clip-path: polygon(0 0,0 40%,100% 100%,100% 28%); translate: none; opacity: 1; scale: 1; }
}
@keyframes obl-sector-sw-fan {
  0% { clip-path: polygon(100% 0,100% 12%,89% 19%,89% 7%); translate: 12px -9px; filter: saturate(.34); }
  100% { clip-path: polygon(100% 0,100% 42%,0 100%,0 25%); translate: none; filter: none; }
}
@keyframes obl-sector-w-fan {
  0% { clip-path: polygon(100% 63%,100% 76%,90% 71%,90% 60%); translate: 14px 5px; opacity: .1; scale: .9 1; }
  100% { clip-path: polygon(100% 63%,100% 100%,0 73%,0 0); translate: none; opacity: 1; scale: 1; }
}
@keyframes obl-sector-stops-confirm {
  0% { scale: .14 1.42; border-radius: 50%; opacity: .12; }
  68% { scale: 1.18 .82; border-radius: 18%; opacity: 1; }
  100% { scale: 1; border-radius: 3px; opacity: 1; }
}

/* Scene 4: four static textures gain distinct local relief. */
.obl-surface-relief {
  background:
    linear-gradient(90deg, rgba(50,198,178,.1), transparent 52%),
    var(--obl-ink);
}
.obl-surface-relief .obl-relief-surface {
  position: absolute;
  z-index: 3;
  left: 12%;
  width: 60%;
  border: 1px solid var(--obl-mist);
  transform-origin: center bottom;
}
.obl-surface-relief .surface-a { top: 10%; height: 13%; background: linear-gradient(90deg,#60777b,var(--obl-steel)); animation: obl-relief-asphalt-rise .7s cubic-bezier(.2,.65,.27,1.14) .08s both paused; }
.obl-surface-relief .surface-b { top: 29%; height: 15%; background: radial-gradient(circle,#dbe5e3 0 2px,transparent 3px) 0 0 / 10px 8px, #60777b; animation: obl-relief-gravel-rise .78s cubic-bezier(.2,.65,.27,1.14) .18s both paused; }
.obl-surface-relief .surface-c { top: 50%; height: 17%; background: repeating-linear-gradient(135deg,#eaf3f1 0 7px,#9fb1b1 7px 10px); animation: obl-relief-snow-rise .86s cubic-bezier(.2,.65,.27,1.14) .28s both paused; }
.obl-surface-relief .surface-d { top: 73%; height: 18%; background: linear-gradient(8deg,#355d68 0 48%,var(--obl-blue) 48%); animation: obl-relief-slope-rise .94s cubic-bezier(.2,.65,.27,1.14) .38s both paused; }
.obl-surface-relief .obl-relief-rib {
  position: absolute;
  z-index: 5;
  left: 18%;
  width: 47%;
  height: 3%;
  background: var(--obl-amber);
  transform: skewX(var(--obl-rib-skew));
  animation: obl-relief-ribs-flex .62s cubic-bezier(.2,.67,.28,1.14) both paused;
}
.obl-surface-relief .rib-a { top: 13%; --obl-rib-skew: -9deg; --obl-rib-over: -11deg; animation-delay: .5s; }
.obl-surface-relief .rib-b { top: 19%; --obl-rib-skew: 6deg; --obl-rib-over: 8deg; animation-delay: .56s; }
.obl-surface-relief .rib-c { top: 33%; --obl-rib-skew: -13deg; --obl-rib-over: -16deg; animation-delay: .62s; }
.obl-surface-relief .rib-d { top: 40%; --obl-rib-skew: 11deg; --obl-rib-over: 14deg; animation-delay: .68s; }
.obl-surface-relief .rib-e { top: 54%; --obl-rib-skew: -7deg; --obl-rib-over: -9deg; animation-delay: .74s; }
.obl-surface-relief .rib-f { top: 63%; --obl-rib-skew: 15deg; --obl-rib-over: 18deg; animation-delay: .8s; }
.obl-surface-relief .rib-g { top: 77%; --obl-rib-skew: -16deg; --obl-rib-over: -20deg; animation-delay: .86s; }
.obl-surface-relief .rib-h { top: 86%; --obl-rib-skew: 8deg; --obl-rib-over: 10deg; animation-delay: .92s; }
.obl-surface-relief .obl-relief-datum {
  position: absolute;
  z-index: 7;
  top: 8%;
  width: 7%;
  height: 84%;
  background: var(--obl-teal);
  border: 2px solid #b7fff5;
  animation: obl-relief-datums-seat .68s cubic-bezier(.2,.67,.28,1.14) 1.02s both paused;
}
.obl-surface-relief .datum-a { left: 5%; --obl-datum-start: -14px; }
.obl-surface-relief .datum-b { right: 5%; --obl-datum-start: 16px; animation-delay: 1.12s; }
.obl-surface-relief .obl-relief-zone {
  position: absolute;
  z-index: 8;
  top: 29%;
  right: 12%;
  width: 17%;
  height: 43%;
  background: var(--obl-ink);
  border: 3px solid var(--obl-mist);
  box-shadow: inset 0 0 0 4px rgba(50,198,178,.35);
  transform-origin: center;
  animation: obl-relief-zone-clear .6s cubic-bezier(.2,.67,.28,1.14) 1.3s both paused;
}

@keyframes obl-relief-asphalt-rise {
  0% { clip-path: inset(72% 0 0); scale: 1 .3; opacity: .16; }
  70% { clip-path: inset(0); scale: 1.04 1.12; opacity: 1; }
  100% { clip-path: inset(0); scale: 1; opacity: 1; }
}
@keyframes obl-relief-gravel-rise {
  0% { clip-path: polygon(0 100%,100% 100%,100% 78%,0 86%); scale: .9 .42; filter: brightness(.54); }
  68% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); scale: 1.08 1.14; filter: brightness(1.18); }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); scale: 1; filter: none; }
}
@keyframes obl-relief-snow-rise {
  0% { clip-path: inset(84% 8% 0); scale: 1 .22; opacity: .12; filter: saturate(.3); }
  72% { clip-path: inset(0); scale: .96 1.18; opacity: 1; filter: saturate(1.2); }
  100% { clip-path: inset(0); scale: 1; opacity: 1; filter: none; }
}
@keyframes obl-relief-slope-rise {
  0% { clip-path: polygon(0 100%,100% 100%,100% 92%,0 76%); scale: .86 .36; opacity: .14; }
  74% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); scale: 1.1 1.1; opacity: 1; }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); scale: 1; opacity: 1; }
}
@keyframes obl-relief-ribs-flex {
  0% { transform: skewX(0deg); scale: .18 1.4; opacity: .12; }
  69% { transform: skewX(var(--obl-rib-over)); scale: 1.12 .84; opacity: 1; }
  100% { transform: skewX(var(--obl-rib-skew)); scale: 1; opacity: 1; }
}
@keyframes obl-relief-datums-seat {
  0% { translate: 0 var(--obl-datum-start); scale: 1 .68; opacity: .16; filter: brightness(.52); }
  72% { translate: 0 2px; scale: .92 1.1; opacity: 1; filter: brightness(1.2); }
  100% { translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes obl-relief-zone-clear {
  0% { scale: .08 1.28; opacity: .1; border-radius: 50%; }
  67% { scale: 1.16 .86; opacity: 1; border-radius: 8px; }
  100% { scale: 1; opacity: 1; border-radius: 0; }
}

/* Scene 5: eight line fragments join into one stationary shell. */
.obl-vehicle-shell {
  background:
    linear-gradient(0deg, rgba(50,198,178,.12), transparent 44%),
    var(--obl-ink);
}
.obl-vehicle-shell .obl-shell-floor {
  position: absolute;
  z-index: 3;
  right: 8%;
  bottom: 20%;
  left: 8%;
  height: 7%;
  background: linear-gradient(90deg, var(--obl-steel), var(--obl-mist), var(--obl-steel));
  border: 1px solid #fff;
}
.obl-vehicle-shell .obl-shell-part {
  position: absolute;
  z-index: 6;
  height: 5%;
  background: var(--obl-blue);
  border: 1px solid #a4d3df;
  transform-origin: var(--obl-shell-origin, center);
}
.obl-vehicle-shell .part-a { top: 50%; left: 10%; width: 27%; transform: skewX(-12deg); --obl-shell-origin: right center; animation: obl-shell-hood-join .72s cubic-bezier(.2,.65,.27,1.14) .08s both paused; }
.obl-vehicle-shell .part-b { top: 25%; left: 35%; width: 31%; transform: rotate(-4deg); --obl-shell-origin: left center; animation: obl-shell-roof-join .8s cubic-bezier(.2,.65,.27,1.14) .18s both paused; }
.obl-vehicle-shell .part-c { top: 43%; right: 9%; width: 26%; transform: skewX(13deg); --obl-shell-origin: left center; animation: obl-shell-rear-join .88s cubic-bezier(.2,.65,.27,1.14) .28s both paused; }
.obl-vehicle-shell .part-d { bottom: 30%; left: 20%; width: 62%; transform: rotate(1deg); --obl-shell-origin: center; animation: obl-shell-floor-join .96s cubic-bezier(.2,.65,.27,1.14) .38s both paused; }
.obl-vehicle-shell .part-e { top: 38%; left: 28%; width: 19%; --obl-shell-start-angle: -18deg; --obl-shell-over-angle: -52deg; --obl-shell-angle: -48deg; --obl-shell-origin: right center; animation: obl-shell-corners-stitch .76s cubic-bezier(.2,.66,.27,1.14) .5s both paused; }
.obl-vehicle-shell .part-f { top: 32%; left: 30%; width: 14%; --obl-shell-start-angle: -25deg; --obl-shell-over-angle: -65deg; --obl-shell-angle: -61deg; --obl-shell-origin: right center; animation: obl-shell-corners-stitch .82s cubic-bezier(.2,.66,.27,1.14) .58s both paused; }
.obl-vehicle-shell .part-g { top: 31%; right: 25%; width: 17%; --obl-shell-start-angle: 18deg; --obl-shell-over-angle: 51deg; --obl-shell-angle: 47deg; --obl-shell-origin: left center; animation: obl-shell-corners-stitch .88s cubic-bezier(.2,.66,.27,1.14) .66s both paused; }
.obl-vehicle-shell .part-h { top: 50%; right: 17%; width: 16%; --obl-shell-start-angle: 24deg; --obl-shell-over-angle: 68deg; --obl-shell-angle: 63deg; --obl-shell-origin: left center; animation: obl-shell-corners-stitch .94s cubic-bezier(.2,.66,.27,1.14) .74s both paused; }
.obl-vehicle-shell .part-e,
.obl-vehicle-shell .part-f,
.obl-vehicle-shell .part-g,
.obl-vehicle-shell .part-h { rotate: var(--obl-shell-angle); }
.obl-vehicle-shell .obl-shell-swatch {
  position: absolute;
  z-index: 8;
  bottom: 6%;
  width: 12%;
  height: 12%;
  background: var(--obl-amber);
  border: 2px solid #ffdcad;
  border-radius: var(--obl-swatch-radius);
  animation: obl-shell-swatches-resolve .58s cubic-bezier(.2,.67,.28,1.16) both paused;
}
.obl-vehicle-shell .swatch-a { left: 16%; --obl-swatch-radius: 4px 12px 4px 8px; animation-delay: .88s; }
.obl-vehicle-shell .swatch-b { left: 35%; --obl-swatch-radius: 10px 3px 9px 3px; animation-delay: .98s; }
.obl-vehicle-shell .swatch-c { right: 35%; --obl-swatch-radius: 3px 11px 3px 11px; animation-delay: 1.08s; }
.obl-vehicle-shell .swatch-d { right: 16%; --obl-swatch-radius: 8px 5px 13px 4px; animation-delay: 1.18s; }

@keyframes obl-shell-hood-join {
  0% { transform: skewX(-28deg); translate: -16px 6px; scale: .32 1.2; opacity: .14; }
  70% { transform: skewX(-8deg); translate: 2px -1px; scale: 1.08 .9; opacity: 1; }
  100% { transform: skewX(-12deg); translate: none; scale: 1; opacity: 1; }
}
@keyframes obl-shell-roof-join {
  0% { transform: rotate(-17deg); translate: 4px -13px; scale: .24 .72; filter: brightness(.52); }
  68% { transform: rotate(-1deg); translate: -1px 2px; scale: 1.1 1.14; filter: brightness(1.18); }
  100% { transform: rotate(-4deg); translate: none; scale: 1; filter: none; }
}
@keyframes obl-shell-rear-join {
  0% { transform: skewX(31deg); translate: 17px -5px; scale: .28 1.22; opacity: .12; filter: saturate(.34); }
  73% { transform: skewX(9deg); translate: -3px 1px; scale: 1.12 .88; opacity: 1; filter: saturate(1.22); }
  100% { transform: skewX(13deg); translate: none; scale: 1; opacity: 1; filter: none; }
}
@keyframes obl-shell-floor-join {
  0% { transform: rotate(-5deg); translate: 0 12px; scale: .18 .66; opacity: .16; }
  71% { transform: rotate(3deg); translate: 0 -2px; scale: 1.06 1.16; opacity: 1; }
  100% { transform: rotate(1deg); translate: none; scale: 1; opacity: 1; }
}
@keyframes obl-shell-corners-stitch {
  0% { rotate: var(--obl-shell-start-angle); translate: 0 8px; scale: .16 1.3; opacity: .12; }
  69% { rotate: var(--obl-shell-over-angle); translate: 0 -2px; scale: 1.14 .86; opacity: 1; }
  100% { rotate: var(--obl-shell-angle); translate: none; scale: 1; opacity: 1; }
}
@keyframes obl-shell-swatches-resolve {
  0% { border-radius: 50%; scale: .24 1.4; opacity: .12; }
  66% { border-radius: 18%; scale: 1.16 .82; opacity: 1; }
  100% { border-radius: var(--obl-swatch-radius); scale: 1; opacity: 1; }
}

/* Scene 6: two independent verniers register in one fixed window. */
.obl-coordinate-vernier {
  background:
    linear-gradient(135deg, rgba(36,103,138,.18), transparent 54%),
    var(--obl-ink);
}
.obl-coordinate-vernier .obl-vernier-x,
.obl-coordinate-vernier .obl-vernier-y {
  position: absolute;
  z-index: 5;
  background-color: var(--obl-steel);
  border: 2px solid var(--obl-mist);
}
.obl-coordinate-vernier .obl-vernier-x {
  top: 45%;
  left: 9%;
  width: 82%;
  height: 17%;
  background-image: repeating-linear-gradient(90deg, transparent 0 9%, var(--obl-cobalt) 9% 11%, transparent 11% 17%);
  animation: obl-vernier-x-register .94s cubic-bezier(.2,.62,.27,1.08) .1s both paused;
}
.obl-coordinate-vernier .obl-vernier-y {
  top: 8%;
  left: 44%;
  width: 13%;
  height: 84%;
  background-image: repeating-linear-gradient(0deg, transparent 0 13%, var(--obl-teal) 13% 16%, transparent 16% 22%);
  transform: skewY(-4deg);
  animation: obl-vernier-y-register 1s cubic-bezier(.2,.62,.27,1.08) .28s both paused;
}
.obl-coordinate-vernier .obl-vernier-support {
  position: absolute;
  z-index: 3;
  bottom: 9%;
  width: 34%;
  height: 13%;
  background: var(--obl-amber);
  border: 2px solid #ffdcad;
  animation: obl-vernier-supports-set .62s cubic-bezier(.2,.67,.28,1.15) .72s both paused;
}
.obl-coordinate-vernier .support-a { left: 8%; }
.obl-coordinate-vernier .support-b { right: 8%; animation-delay: .82s; }
.obl-coordinate-vernier .obl-vernier-window {
  position: absolute;
  z-index: 8;
  top: 34%;
  left: 34%;
  width: 32%;
  height: 35%;
  background: rgba(12,28,37,.78);
  border: 4px solid var(--obl-mist);
  box-shadow: inset 0 0 0 4px var(--obl-teal);
  clip-path: inset(0);
  animation: obl-vernier-window-open .68s steps(7,end) 1.14s both paused;
}

@keyframes obl-vernier-x-register {
  0% { translate: -27px 0; scale: .86 1; opacity: .18; }
  47% { translate: 8px 0; scale: 1.04 .92; opacity: 1; }
  76% { translate: -3px 0; scale: .98 1.06; }
  100% { translate: none; scale: 1; opacity: 1; }
}
@keyframes obl-vernier-y-register {
  0% { transform: skewY(13deg); translate: 0 -24px; scale: 1 .76; filter: brightness(.52); }
  53% { transform: skewY(-8deg); translate: 0 7px; scale: .92 1.1; filter: brightness(1.18); }
  79% { transform: skewY(1deg); translate: 0 -2px; scale: 1.05 .97; }
  100% { transform: skewY(-4deg); translate: none; scale: 1; filter: none; }
}
@keyframes obl-vernier-window-open {
  0% { clip-path: inset(45% 47% 43% 46%); opacity: .1; filter: contrast(.5); }
  100% { clip-path: inset(0); opacity: 1; filter: none; }
}
@keyframes obl-vernier-supports-set {
  0% { scale: .18 1.34; opacity: .14; }
  70% { scale: 1.12 .86; opacity: 1; }
  100% { scale: 1; opacity: 1; }
}

/* Scene 7: four elastomer patches resolve against fixed stops. */
.obl-contact-patches {
  background:
    radial-gradient(circle at 50% 50%, rgba(50,198,178,.12), transparent 38%),
    var(--obl-ink);
}
.obl-contact-patches .obl-patch {
  position: absolute;
  z-index: 6;
  width: 24%;
  height: 23%;
  background: var(--obl-blue);
  border: 2px solid #9ccbd8;
}
.obl-contact-patches .patch-a { top: 12%; left: 15%; border-radius: 50%; scale: 1.15 .8; animation: obl-patch-a-spread .76s cubic-bezier(.2,.65,.27,1.14) .08s both paused; }
.obl-contact-patches .patch-b { top: 13%; right: 15%; transform: skewX(8deg) rotate(45deg); scale: .78; animation: obl-patch-b-shear .84s cubic-bezier(.2,.65,.27,1.14) .18s both paused; }
.obl-contact-patches .patch-c { bottom: 14%; left: 14%; transform: skewX(-14deg); border-radius: 6px 18px 5px 14px; animation: obl-patch-c-rebound .92s cubic-bezier(.2,.65,.27,1.14) .28s both paused; }
.obl-contact-patches .patch-d { right: 14%; bottom: 14%; border-radius: 18px 5px 15px 4px; scale: 1.2 .78; animation: obl-patch-d-compress 1s cubic-bezier(.2,.65,.27,1.14) .38s both paused; }
.obl-contact-patches .obl-pressure-stop {
  position: absolute;
  z-index: 8;
  width: 8%;
  aspect-ratio: 1;
  background: var(--obl-amber);
  border: 2px solid #ffdcad;
  animation: obl-patch-pressure-set .5s cubic-bezier(.2,.67,.28,1.16) both paused;
}
.obl-contact-patches .stop-a { top: 10%; left: 8%; animation-delay: .68s; }
.obl-contact-patches .stop-b { top: 10%; right: 8%; animation-delay: .78s; }
.obl-contact-patches .stop-c { bottom: 12%; left: 7%; animation-delay: .88s; }
.obl-contact-patches .stop-d { right: 7%; bottom: 12%; animation-delay: .98s; }
.obl-contact-patches .obl-patch-brace {
  position: absolute;
  z-index: 4;
  top: 47%;
  width: 39%;
  height: 7%;
  background: var(--obl-teal);
  border: 1px solid #b4fff5;
  transform-origin: center;
}
.obl-contact-patches .brace-a { left: 8%; rotate: 8deg; animation: obl-patch-brace-left .64s cubic-bezier(.2,.66,.28,1.14) .88s both paused; }
.obl-contact-patches .brace-b { right: 8%; rotate: -11deg; animation: obl-patch-brace-right .72s cubic-bezier(.2,.66,.28,1.14) .98s both paused; }

@keyframes obl-patch-a-spread {
  0% { border-radius: 50%; scale: .44 1.22; opacity: .14; }
  68% { border-radius: 48%; scale: 1.26 .72; opacity: 1; }
  100% { border-radius: 50%; scale: 1.15 .8; opacity: 1; }
}
@keyframes obl-patch-b-shear {
  0% { transform: skewX(-18deg) rotate(12deg); scale: .34 1.2; filter: brightness(.5); }
  72% { transform: skewX(13deg) rotate(49deg); scale: .84 .74; filter: brightness(1.2); }
  100% { transform: skewX(8deg) rotate(45deg); scale: .78; filter: none; }
}
@keyframes obl-patch-c-rebound {
  0% { transform: skewX(0deg); scale: .58 .72; opacity: .16; }
  53% { transform: skewX(-23deg); scale: 1.18 1.12; opacity: 1; }
  76% { transform: skewX(-9deg); scale: .94 .9; }
  100% { transform: skewX(-14deg); scale: 1; opacity: 1; }
}
@keyframes obl-patch-d-compress {
  0% { scale: .72 1.28; border-radius: 50%; opacity: .12; filter: saturate(.34); }
  70% { scale: 1.28 .7; border-radius: 13px 3px 18px 5px; opacity: 1; filter: saturate(1.22); }
  100% { scale: 1.2 .78; border-radius: 18px 5px 15px 4px; opacity: 1; filter: none; }
}
@keyframes obl-patch-brace-left {
  0% { rotate: -17deg; scale: .42 1.18; opacity: .14; }
  71% { rotate: 11deg; scale: 1.08 .9; opacity: 1; }
  100% { rotate: 8deg; scale: 1; opacity: 1; }
}
@keyframes obl-patch-brace-right {
  0% { rotate: 21deg; scale: .36 .76; filter: brightness(.52); }
  68% { rotate: -15deg; scale: 1.12 1.14; filter: brightness(1.18); }
  100% { rotate: -11deg; scale: 1; filter: none; }
}
@keyframes obl-patch-pressure-set {
  0% { scale: .16 1.42; border-radius: 50%; opacity: .1; }
  67% { scale: 1.18 .82; border-radius: 18%; opacity: 1; }
  100% { scale: 1; border-radius: 0; opacity: 1; }
}

/* Scene 8: two static texture fields register their stripe phases. */
.obl-surface-register {
  background:
    linear-gradient(90deg, rgba(36,103,138,.15) 0 46%, transparent 46% 54%, rgba(50,198,178,.13) 54%),
    var(--obl-ink);
}
.obl-surface-register .obl-register-stripe {
  position: absolute;
  z-index: 4;
  width: 34%;
  height: 11%;
  border: 1px solid var(--obl-mist);
  background: repeating-linear-gradient(90deg, var(--obl-steel) 0 9px, var(--obl-blue) 9px 13px, transparent 13px 18px);
  background-position: var(--obl-stripe-end) 0;
}
.obl-surface-register .stripe-la { top: 17%; left: 8%; --obl-stripe-start: -19px; --obl-stripe-end: 2px; animation: obl-register-left-phase .72s cubic-bezier(.2,.62,.27,1.08) .08s both paused; }
.obl-surface-register .stripe-lb { top: 44%; left: 8%; --obl-stripe-start: 23px; --obl-stripe-end: -3px; animation: obl-register-left-phase .82s cubic-bezier(.2,.62,.27,1.08) .18s both paused; }
.obl-surface-register .stripe-lc { bottom: 17%; left: 8%; --obl-stripe-start: -27px; --obl-stripe-end: 4px; animation: obl-register-left-phase .92s cubic-bezier(.2,.62,.27,1.08) .28s both paused; }
.obl-surface-register .stripe-ra { top: 17%; right: 8%; --obl-stripe-start: 21px; --obl-stripe-end: -2px; animation: obl-register-right-phase .76s cubic-bezier(.2,.62,.27,1.08) .13s both paused; }
.obl-surface-register .stripe-rb { top: 44%; right: 8%; --obl-stripe-start: -24px; --obl-stripe-end: 3px; animation: obl-register-right-phase .86s cubic-bezier(.2,.62,.27,1.08) .23s both paused; }
.obl-surface-register .stripe-rc { right: 8%; bottom: 17%; --obl-stripe-start: 29px; --obl-stripe-end: -4px; animation: obl-register-right-phase .96s cubic-bezier(.2,.62,.27,1.08) .33s both paused; }
.obl-surface-register .obl-register-comb {
  position: absolute;
  z-index: 7;
  top: 8%;
  width: 8%;
  height: 84%;
  border: 2px solid var(--obl-mist);
  background: repeating-linear-gradient(0deg, var(--obl-amber) 0 7%, transparent 7% 13%);
}
.obl-surface-register .comb-a { left: 44%; animation: obl-register-comb-top .74s steps(7,end) .72s both paused; }
.obl-surface-register .comb-b { right: 44%; animation: obl-register-comb-bottom .8s steps(8,end) .82s both paused; }
.obl-surface-register .obl-register-window {
  position: absolute;
  z-index: 9;
  top: 35%;
  left: 40%;
  width: 20%;
  height: 30%;
  background: var(--obl-ink);
  border: 3px solid var(--obl-teal);
  box-shadow: inset 0 0 0 3px var(--obl-mist);
  animation: obl-register-window-square .62s cubic-bezier(.2,.67,.28,1.14) 1.14s both paused;
}

@keyframes obl-register-left-phase {
  0% { background-position: var(--obl-stripe-start) 0; scale: .84 1; opacity: .18; filter: brightness(.52); }
  56% { background-position: 7px 0; scale: 1.06 .92; opacity: 1; filter: brightness(1.18); }
  100% { background-position: var(--obl-stripe-end) 0; scale: 1; opacity: 1; filter: none; }
}
@keyframes obl-register-right-phase {
  0% { background-position: var(--obl-stripe-start) 0; scale: .76 .82; opacity: .14; }
  61% { background-position: -8px 0; scale: 1.1 1.14; opacity: 1; }
  100% { background-position: var(--obl-stripe-end) 0; scale: 1; opacity: 1; }
}
@keyframes obl-register-comb-top {
  0% { clip-path: inset(100% 0 0); opacity: .12; filter: saturate(.32); }
  100% { clip-path: inset(0); opacity: 1; filter: none; }
}
@keyframes obl-register-comb-bottom {
  0% { clip-path: inset(0 0 100%); scale: .84 1; opacity: .16; }
  100% { clip-path: inset(0); scale: 1; opacity: 1; }
}
@keyframes obl-register-window-square {
  0% { clip-path: polygon(25% 0,100% 0,75% 100%,0 100%); scale: .42 1.18; opacity: .12; }
  68% { clip-path: polygon(4% 0,100% 3%,96% 100%,0 97%); scale: 1.12 .86; opacity: 1; }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); scale: 1; opacity: 1; }
}

/* Scene 9: seven teeth rise out of order on a static tariff plate. */
.obl-tariff-comb {
  background:
    linear-gradient(145deg, rgba(239,169,77,.14), transparent 52%),
    var(--obl-ink);
}
.obl-tariff-comb .obl-tariff-base {
  position: absolute;
  z-index: 3;
  right: 7%;
  bottom: 13%;
  left: 7%;
  height: 35%;
  background: linear-gradient(145deg, var(--obl-steel), var(--obl-mist));
  border: 2px solid #fff;
  animation: obl-tariff-base-cast .78s steps(8,end) .08s both paused;
}
.obl-tariff-comb .obl-tariff-perimeter {
  position: absolute;
  z-index: 7;
  inset: 7% 4%;
  border: 3px solid var(--obl-teal);
  animation: obl-tariff-perimeter-set .72s cubic-bezier(.2,.67,.28,1.14) .32s both paused;
}
.obl-tariff-comb .obl-tariff-tooth {
  position: absolute;
  z-index: 8;
  bottom: 45%;
  width: 8%;
  height: var(--obl-tooth-height);
  background: var(--obl-blue);
  border: 2px solid #9ecbda;
  transform-origin: center bottom;
}
.obl-tariff-comb .tooth-a { left: 10%; --obl-tooth-height: 25%; animation: obl-tariff-tooth-a-rise .56s cubic-bezier(.2,.67,.28,1.16) .48s both paused; }
.obl-tariff-comb .tooth-b { left: 22%; --obl-tooth-height: 34%; animation: obl-tariff-tooth-b-rise .62s cubic-bezier(.2,.67,.28,1.16) .68s both paused; }
.obl-tariff-comb .tooth-c { left: 34%; --obl-tooth-height: 29%; animation: obl-tariff-tooth-c-rise .68s cubic-bezier(.2,.67,.28,1.16) .88s both paused; }
.obl-tariff-comb .tooth-d { left: 46%; --obl-tooth-height: 39%; animation: obl-tariff-tooth-d-rise .74s cubic-bezier(.2,.67,.28,1.16) .58s both paused; }
.obl-tariff-comb .tooth-e { right: 34%; --obl-tooth-height: 31%; animation: obl-tariff-tooth-e-rise .8s cubic-bezier(.2,.67,.28,1.16) 1.08s both paused; }
.obl-tariff-comb .tooth-f { right: 22%; --obl-tooth-height: 36%; animation: obl-tariff-tooth-f-rise .86s cubic-bezier(.2,.67,.28,1.16) .98s both paused; }
.obl-tariff-comb .tooth-g { right: 10%; --obl-tooth-height: 27%; animation: obl-tariff-tooth-g-rise .92s cubic-bezier(.2,.67,.28,1.16) .78s both paused; }
.obl-tariff-comb .obl-tariff-notch {
  position: absolute;
  z-index: 10;
  top: 8%;
  left: 43%;
  width: 14%;
  height: 19%;
  background: var(--obl-amber);
  border: 2px solid #ffdcac;
  clip-path: polygon(0 0,100% 0,84% 100%,16% 100%);
  animation: obl-tariff-notch-cut .58s cubic-bezier(.2,.67,.28,1.15) 1.24s both paused;
}
.obl-tariff-comb .obl-tariff-value {
  position: absolute;
  z-index: 9;
  bottom: 18%;
  display: grid;
  width: 27%;
  height: 21%;
  place-items: center;
  color: var(--obl-ink);
  background: var(--obl-mist);
  border: 1px solid #fff;
  font: 900 10px/1 system-ui, sans-serif;
  font-style: normal;
}
.obl-tariff-comb .value-a { left: 15%; }
.obl-tariff-comb .value-b { right: 15%; }

@keyframes obl-tariff-base-cast {
  0% { clip-path: polygon(0 100%,8% 100%,100% 88%,100% 100%); opacity: .12; filter: brightness(.52); }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; filter: none; }
}
@keyframes obl-tariff-perimeter-set {
  0% { scale: .18 .46; opacity: .14; border-radius: 28px; }
  69% { scale: 1.1 1.08; opacity: 1; border-radius: 5px; }
  100% { scale: 1; opacity: 1; border-radius: 0; }
}
@keyframes obl-tariff-tooth-a-rise {
  0% { scale: .72 .08; opacity: .14; }
  70% { scale: 1.08 1.14; opacity: 1; }
  100% { scale: 1; opacity: 1; }
}
@keyframes obl-tariff-tooth-b-rise {
  0% { scale: .84 .12; filter: brightness(.5); }
  68% { scale: .94 1.18; filter: brightness(1.2); }
  100% { scale: 1; filter: none; }
}
@keyframes obl-tariff-tooth-c-rise {
  0% { scale: .64 .06; opacity: .1; filter: saturate(.32); }
  73% { scale: 1.12 1.1; opacity: 1; filter: saturate(1.22); }
  100% { scale: 1; opacity: 1; filter: none; }
}
@keyframes obl-tariff-tooth-d-rise {
  0% { scale: .9 .16; opacity: .18; }
  66% { scale: 1.06 1.2; opacity: 1; }
  100% { scale: 1; opacity: 1; }
}
@keyframes obl-tariff-tooth-e-rise {
  0% { scale: .58 .09; filter: contrast(.5); opacity: .12; }
  75% { scale: 1.15 1.08; filter: contrast(1.2); opacity: 1; }
  100% { scale: 1; filter: none; opacity: 1; }
}
@keyframes obl-tariff-tooth-f-rise {
  0% { scale: .78 .05; opacity: .1; }
  71% { scale: .92 1.16; opacity: 1; }
  100% { scale: 1; opacity: 1; }
}
@keyframes obl-tariff-tooth-g-rise {
  0% { scale: .68 .14; filter: brightness(.56); }
  67% { scale: 1.14 1.12; filter: brightness(1.18); }
  100% { scale: 1; filter: none; }
}
@keyframes obl-tariff-notch-cut {
  0% { clip-path: polygon(24% 0,76% 0,62% 28%,38% 28%); scale: .46 .72; opacity: .12; }
  68% { clip-path: polygon(0 0,100% 0,88% 108%,12% 108%); scale: 1.12 1.08; opacity: 1; }
  100% { clip-path: polygon(0 0,100% 0,84% 100%,16% 100%); scale: 1; opacity: 1; }
}

/* Scene 10: six relief islands rise over independent shadow beds. */
.obl-contour-faq {
  background:
    radial-gradient(circle at 50% 50%, rgba(36,103,138,.16), transparent 43%),
    var(--obl-ink);
}
.obl-contour-faq .obl-contour-frame {
  position: absolute;
  z-index: 2;
  inset: 6%;
  border: 3px solid var(--obl-teal);
  animation: obl-contour-frame-hold .68s steps(7,end) .08s both paused;
}
.obl-contour-faq .obl-contour-bed,
.obl-contour-faq .obl-contour-island {
  position: absolute;
  width: 22%;
  height: 25%;
}
.obl-contour-faq .obl-contour-bed {
  z-index: 3;
  background: rgba(0,0,0,.5);
  border-radius: 50%;
  transform-origin: center;
  animation: obl-contour-shadows-set .72s cubic-bezier(.2,.66,.28,1.14) both paused;
}
.obl-contour-faq .obl-contour-island {
  z-index: 6;
  background: linear-gradient(145deg, var(--obl-mist), var(--obl-steel));
  border: 2px solid #fff;
  transform: skewX(var(--obl-island-skew));
  border-radius: var(--obl-island-radius);
  box-shadow: var(--obl-island-shadow);
  transition: translate .18s ease-out;
}
.obl-contour-faq .island-a,
.obl-contour-faq .bed-a { top: 12%; left: 9%; }
.obl-contour-faq .island-b,
.obl-contour-faq .bed-b { top: 10%; left: 39%; }
.obl-contour-faq .island-c,
.obl-contour-faq .bed-c { top: 13%; right: 9%; }
.obl-contour-faq .island-d,
.obl-contour-faq .bed-d { bottom: 12%; left: 9%; }
.obl-contour-faq .island-e,
.obl-contour-faq .bed-e { bottom: 10%; left: 39%; }
.obl-contour-faq .island-f,
.obl-contour-faq .bed-f { right: 9%; bottom: 13%; }
.obl-contour-faq .island-a { --obl-island-skew: -8deg; --obl-island-radius: 50% 24% 42% 20%; --obl-island-shadow: 3px 5px 0 rgba(50,198,178,.34); animation: obl-contour-a-relief .74s cubic-bezier(.2,.65,.27,1.15) .18s both paused; }
.obl-contour-faq .island-b { --obl-island-skew: 11deg; --obl-island-radius: 18% 52% 22% 46%; --obl-island-shadow: -2px 6px 0 rgba(36,103,138,.38); animation: obl-contour-b-relief .82s cubic-bezier(.2,.65,.27,1.15) .28s both paused; }
.obl-contour-faq .island-c { --obl-island-skew: -14deg; --obl-island-radius: 44% 17% 53% 24%; --obl-island-shadow: 4px 4px 0 rgba(239,169,77,.34); animation: obl-contour-c-relief .9s cubic-bezier(.2,.65,.27,1.15) .38s both paused; }
.obl-contour-faq .island-d { --obl-island-skew: 7deg; --obl-island-radius: 23% 47% 19% 56%; --obl-island-shadow: -3px 5px 0 rgba(50,198,178,.3); animation: obl-contour-d-relief .98s cubic-bezier(.2,.65,.27,1.15) .48s both paused; }
.obl-contour-faq .island-e { --obl-island-skew: -10deg; --obl-island-radius: 55% 21% 38% 16%; --obl-island-shadow: 2px 6px 0 rgba(36,103,138,.4); animation: obl-contour-e-relief 1.06s cubic-bezier(.2,.65,.27,1.15) .58s both paused; }
.obl-contour-faq .island-f { --obl-island-skew: 13deg; --obl-island-radius: 16% 49% 27% 45%; --obl-island-shadow: -4px 4px 0 rgba(239,169,77,.3); animation: obl-contour-f-relief 1.14s cubic-bezier(.2,.65,.27,1.15) .68s both paused; }
.obl-contour-faq .bed-a { --obl-bed-scale: .72; animation-delay: .18s; }
.obl-contour-faq .bed-b { --obl-bed-scale: .64; animation-delay: .28s; }
.obl-contour-faq .bed-c { --obl-bed-scale: .77; animation-delay: .38s; }
.obl-contour-faq .bed-d { --obl-bed-scale: .68; animation-delay: .48s; }
.obl-contour-faq .bed-e { --obl-bed-scale: .6; animation-delay: .58s; }
.obl-contour-faq .bed-f { --obl-bed-scale: .74; animation-delay: .68s; }

.obl-faq:has(.obl-faq-grid details:nth-child(1)[open]) .obl-contour-faq .island-a,
.obl-faq:has(.obl-faq-grid details:nth-child(2)[open]) .obl-contour-faq .island-b,
.obl-faq:has(.obl-faq-grid details:nth-child(3)[open]) .obl-contour-faq .island-c,
.obl-faq:has(.obl-faq-grid details:nth-child(4)[open]) .obl-contour-faq .island-d,
.obl-faq:has(.obl-faq-grid details:nth-child(5)[open]) .obl-contour-faq .island-e,
.obl-faq:has(.obl-faq-grid details:nth-child(6)[open]) .obl-contour-faq .island-f {
  translate: 0 2px;
}

@keyframes obl-contour-a-relief {
  0% { border-radius: 50%; scale: .62 .42; rotate: -8deg; box-shadow: 0 1px 0 rgba(50,198,178,.08); opacity: .14; }
  70% { border-radius: 44% 28% 39% 24%; scale: 1.1 1.14; rotate: 3deg; box-shadow: 4px 7px 0 rgba(50,198,178,.4); opacity: 1; }
  100% { border-radius: var(--obl-island-radius); scale: 1; rotate: 0deg; box-shadow: var(--obl-island-shadow); opacity: 1; }
}
@keyframes obl-contour-b-relief {
  0% { border-radius: 12%; scale: .44 .7; rotate: 11deg; box-shadow: 0 0 0 rgba(36,103,138,0); filter: brightness(.52); }
  68% { border-radius: 22% 48% 27% 41%; scale: 1.14 .92; rotate: -4deg; box-shadow: -3px 8px 0 rgba(36,103,138,.44); filter: brightness(1.18); }
  100% { border-radius: var(--obl-island-radius); scale: 1; rotate: 0deg; box-shadow: var(--obl-island-shadow); filter: none; }
}
@keyframes obl-contour-c-relief {
  0% { border-radius: 50%; scale: .74 .34; rotate: -13deg; box-shadow: 0 1px 0 rgba(239,169,77,.06); opacity: .12; }
  73% { border-radius: 39% 21% 49% 29%; scale: .94 1.18; rotate: 5deg; box-shadow: 5px 6px 0 rgba(239,169,77,.4); opacity: 1; }
  100% { border-radius: var(--obl-island-radius); scale: 1; rotate: 0deg; box-shadow: var(--obl-island-shadow); opacity: 1; }
}
@keyframes obl-contour-d-relief {
  0% { border-radius: 8px; scale: .38 .82; rotate: 9deg; box-shadow: 0 0 0 rgba(50,198,178,0); filter: saturate(.32); }
  69% { border-radius: 27% 42% 23% 51%; scale: 1.16 .88; rotate: -3deg; box-shadow: -4px 7px 0 rgba(50,198,178,.36); filter: saturate(1.22); }
  100% { border-radius: var(--obl-island-radius); scale: 1; rotate: 0deg; box-shadow: var(--obl-island-shadow); filter: none; }
}
@keyframes obl-contour-e-relief {
  0% { border-radius: 50% 50% 12% 12%; scale: .68 .38; rotate: -6deg; box-shadow: 0 1px 0 rgba(36,103,138,.08); opacity: .16; }
  72% { border-radius: 49% 25% 34% 20%; scale: 1.08 1.16; rotate: 4deg; box-shadow: 3px 8px 0 rgba(36,103,138,.46); opacity: 1; }
  100% { border-radius: var(--obl-island-radius); scale: 1; rotate: 0deg; box-shadow: var(--obl-island-shadow); opacity: 1; }
}
@keyframes obl-contour-f-relief {
  0% { border-radius: 10% 46% 10% 46%; scale: .4 .76; rotate: 14deg; box-shadow: 0 0 0 rgba(239,169,77,0); filter: contrast(.52); }
  75% { border-radius: 20% 44% 31% 39%; scale: 1.18 .86; rotate: -5deg; box-shadow: -5px 6px 0 rgba(239,169,77,.36); filter: contrast(1.18); }
  100% { border-radius: var(--obl-island-radius); scale: 1; rotate: 0deg; box-shadow: var(--obl-island-shadow); filter: none; }
}
@keyframes obl-contour-shadows-set {
  0% { scale: 1.16 .34; opacity: .08; filter: blur(2px); }
  68% { scale: calc(var(--obl-bed-scale) - .06) .58; opacity: .56; filter: blur(.4px); }
  100% { scale: var(--obl-bed-scale) .5; opacity: .5; filter: none; }
}
@keyframes obl-contour-frame-hold {
  0% { clip-path: polygon(0 0,8% 0,8% 8%,0 8%); opacity: .14; filter: brightness(.54); }
  100% { clip-path: polygon(0 0,100% 0,100% 100%,0 100%); opacity: 1; filter: none; }
}

@media (max-width: 1080px) {
  [data-motion^="obl-"] { --obl-shift: 25px; }
  .obl-page .obl-decor { width: 238px; height: 128px; }
  .obl-hero .obl-boundary-seams { right: 2%; bottom: 18px; }
  .obl-cities .obl-city-windows { left: 2%; bottom: 18px; }
  .obl-points .obl-direction-sectors { right: 2%; top: 23px; }
  .obl-access .obl-surface-relief { left: 2%; bottom: 18px; }
  .obl-vehicle .obl-vehicle-shell { right: 2%; bottom: 18px; }
  .obl-coordinates .obl-coordinate-vernier { left: 2%; top: 22px; }
  .obl-loading .obl-contact-patches { right: 2%; bottom: 18px; }
  .obl-handover .obl-surface-register { left: 2%; bottom: 18px; }
  .obl-price .obl-tariff-comb { right: 2%; top: 22px; }
  .obl-faq .obl-contour-faq { left: 2%; bottom: 18px; }
}

@media (max-width: 840px) {
  [data-motion^="obl-"] { --obl-shift: 21px; }
  .obl-page .obl-decor {
    position: relative;
    inset: auto;
    width: 220px;
    height: 118px;
    margin: 20px auto 0;
  }
  .obl-hero .obl-boundary-seams { margin-top: 24px; }
  .obl-cities .obl-city-windows { margin-top: 18px; }
  .obl-points .obl-direction-sectors { margin-top: 22px; }
  .obl-access .obl-surface-relief { margin-top: 18px; }
  .obl-vehicle .obl-vehicle-shell { margin-top: 21px; }
  .obl-coordinates .obl-coordinate-vernier { margin-top: 19px; }
  .obl-loading .obl-contact-patches { margin-top: 22px; }
  .obl-handover .obl-surface-register { margin-top: 18px; }
  .obl-price .obl-tariff-comb { margin-top: 23px; }
  .obl-faq .obl-contour-faq { margin-top: 24px; }
}

@media (max-width: 560px) {
  [data-motion^="obl-"] { --obl-shift: 17px; }
  .obl-page .obl-decor {
    width: 190px;
    height: 104px;
    margin-top: 16px;
    box-shadow: 0 8px 22px rgba(5,15,20,.18);
  }
  .obl-boundary-seams .obl-boundary-segment { border-width: 1px; }
  .obl-boundary-seams .obl-mkad-quadrant { border-width: 3px; }
  .obl-city-windows .obl-city-window { border-width: 2px; }
  .obl-direction-sectors .obl-sector-window { border-width: 2px; box-shadow: inset 0 0 0 2px rgba(50,198,178,.32); }
  .obl-surface-relief .obl-relief-surface { left: 10%; width: 63%; }
  .obl-vehicle-shell .obl-shell-part { height: 4%; }
  .obl-coordinate-vernier .obl-vernier-window { border-width: 3px; box-shadow: inset 0 0 0 2px var(--obl-teal); }
  .obl-contact-patches .obl-patch { width: 25%; }
  .obl-surface-register .obl-register-stripe { width: 35%; }
  .obl-tariff-comb .obl-tariff-tooth { width: 8.5%; border-width: 1px; }
  .obl-tariff-comb .obl-tariff-value { font-size: 8px; }
  .obl-contour-faq .obl-contour-island,
  .obl-contour-faq .obl-contour-bed { width: 23%; }
}

@media (max-width: 380px) {
  [data-motion^="obl-"] { --obl-shift: 13px; }
  .obl-page .obl-decor {
    width: min(160px, calc(100% - 8px));
    height: 88px;
    margin-top: 13px;
    border-width: 1px;
    box-shadow: none;
  }
  .obl-page .obl-decor .decor-child { animation-duration: .56s; }
  .obl-boundary-seams .obl-boundary-tab { width: 7%; border-width: 1px; }
  .obl-boundary-seams .obl-boundary-plate { border-width: 1px; }
  .obl-city-windows .obl-city-key { width: 7%; border-width: 1px; }
  .obl-city-windows .obl-city-sill { right: 4%; left: 4%; border-width: 1px; }
  .obl-direction-sectors .obl-sector { border-width: 1px; }
  .obl-direction-sectors .obl-sector-stop { width: 6%; border-width: 1px; }
  .obl-surface-relief .obl-relief-datum { width: 6%; border-width: 1px; }
  .obl-surface-relief .obl-relief-zone { right: 9%; width: 19%; border-width: 2px; box-shadow: inset 0 0 0 2px rgba(50,198,178,.35); }
  .obl-vehicle-shell .obl-shell-floor { right: 4%; left: 4%; }
  .obl-vehicle-shell .obl-shell-swatch { width: 11%; border-width: 1px; }
  .obl-coordinate-vernier .obl-vernier-x,
  .obl-coordinate-vernier .obl-vernier-y { border-width: 1px; }
  .obl-contact-patches .obl-patch { border-width: 1px; }
  .obl-contact-patches .obl-pressure-stop { width: 7%; border-width: 1px; }
  .obl-surface-register .obl-register-comb { width: 7%; border-width: 1px; }
  .obl-surface-register .obl-register-window { border-width: 2px; box-shadow: inset 0 0 0 2px var(--obl-mist); }
  .obl-tariff-comb .obl-tariff-perimeter { inset: 4%; border-width: 2px; }
  .obl-tariff-comb .obl-tariff-value { bottom: 16%; height: 22%; font-size: 7px; }
  .obl-contour-faq .obl-contour-frame { inset: 4%; border-width: 2px; }
  .obl-contour-faq .obl-contour-island { border-width: 1px; box-shadow: 0 3px 0 rgba(50,198,178,.24); }
}

@media (prefers-reduced-motion: reduce) {
  .obl-page [data-motion^="obl-"] .obl-decor,
  .obl-page [data-motion^="obl-"] .obl-decor *,
  .obl-page [data-motion^="obl-"] .obl-decor *::before,
  .obl-page [data-motion^="obl-"] .obl-decor *::after {
    animation: none !important;
    transition: none !important;
  }

  .obl-boundary-seams .obl-boundary-segment,
  .obl-boundary-seams .obl-boundary-tab,
  .obl-city-windows .obl-city-key,
  .obl-city-windows .obl-city-sill,
  .obl-direction-sectors .obl-sector-stop,
  .obl-surface-relief .obl-relief-rib,
  .obl-surface-relief .obl-relief-datum,
  .obl-surface-relief .obl-relief-zone,
  .obl-shell-part,
  .obl-shell-swatch,
  .obl-vernier-support,
  .obl-patch-brace,
  .obl-pressure-stop,
  .obl-register-stripe,
  .obl-tariff-perimeter,
  .obl-tariff-tooth,
  .obl-tariff-notch,
  .obl-contour-island {
    opacity: 1 !important;
    filter: none !important;
  }
  .obl-boundary-seams .obl-mkad-quadrant { clip-path: var(--obl-quad-end) !important; opacity: 1 !important; filter: none !important; }
  .obl-boundary-seams .obl-boundary-tab { translate: none !important; scale: 1 !important; }
  .obl-city-windows .obl-city-window { clip-path: polygon(0 0,100% 0,100% 100%,0 100%) !important; opacity: 1 !important; filter: none !important; scale: 1 !important; }
  .obl-city-windows .obl-city-key { rotate: var(--obl-key-angle) !important; scale: 1 !important; }
  .obl-direction-sectors .obl-sector { translate: none !important; opacity: 1 !important; filter: none !important; scale: 1 !important; }
  .obl-surface-relief .obl-relief-surface { clip-path: inset(0) !important; scale: 1 !important; opacity: 1 !important; filter: none !important; }
  .obl-surface-relief .obl-relief-rib { transform: skewX(var(--obl-rib-skew)) !important; scale: 1 !important; }
  .obl-vehicle-shell .obl-shell-part { translate: none !important; scale: 1 !important; }
  .obl-vehicle-shell .obl-shell-swatch { border-radius: var(--obl-swatch-radius) !important; scale: 1 !important; }
  .obl-coordinate-vernier .obl-vernier-x { translate: none !important; scale: 1 !important; opacity: 1 !important; }
  .obl-coordinate-vernier .obl-vernier-y { transform: skewY(-4deg) !important; translate: none !important; scale: 1 !important; }
  .obl-coordinate-vernier .obl-vernier-window { clip-path: inset(0) !important; opacity: 1 !important; filter: none !important; }
  .obl-contact-patches .patch-a { border-radius: 50% !important; scale: 1.15 .8 !important; }
  .obl-contact-patches .patch-b { transform: skewX(8deg) rotate(45deg) !important; scale: .78 !important; }
  .obl-contact-patches .patch-c { transform: skewX(-14deg) !important; scale: 1 !important; }
  .obl-contact-patches .patch-d { scale: 1.2 .78 !important; }
  .obl-surface-register .obl-register-stripe { background-position: var(--obl-stripe-end) 0 !important; scale: 1 !important; }
  .obl-surface-register .obl-register-comb { clip-path: inset(0) !important; opacity: 1 !important; }
  .obl-surface-register .obl-register-window { clip-path: polygon(0 0,100% 0,100% 100%,0 100%) !important; scale: 1 !important; opacity: 1 !important; }
  .obl-tariff-comb .obl-tariff-base { clip-path: polygon(0 0,100% 0,100% 100%,0 100%) !important; opacity: 1 !important; filter: none !important; }
  .obl-tariff-comb .obl-tariff-tooth { scale: 1 !important; }
  .obl-tariff-comb .obl-tariff-notch { clip-path: polygon(0 0,100% 0,84% 100%,16% 100%) !important; scale: 1 !important; }
  .obl-contour-faq .obl-contour-island { border-radius: var(--obl-island-radius) !important; scale: 1 !important; rotate: 0deg !important; box-shadow: var(--obl-island-shadow) !important; }
  .obl-contour-faq .obl-contour-bed { scale: var(--obl-bed-scale) .5 !important; opacity: .5 !important; filter: none !important; }
  .obl-contour-faq .obl-contour-frame { clip-path: polygon(0 0,100% 0,100% 100%,0 100%) !important; opacity: 1 !important; filter: none !important; }
}