[data-motion^="cao-"] {
  --cao-night: #0a1523;
  --cao-graphite: #142231;
  --cao-stone: #dde2e7;
  --cao-teal: #20c9c3;
  --cao-copper: #b9784a;
  --cao-warm: #e8b66c;
  position: relative;
  isolation: isolate;
}
.cao-decor {
  position: absolute;
  z-index: 1;
  width: min(274px, calc(100% - 24px));
  height: 146px;
  overflow: hidden;
  overflow: clip;
  contain: layout paint;
  isolation: isolate;
  box-sizing: border-box;
  color: var(--cao-stone);
  background: rgba(10,21,35,.97);
  border: 1px solid rgba(32,201,195,.4);
  box-shadow: 0 4px 4px rgba(4,10,17,.22);
  pointer-events: none;
  user-select: none;
}
.cao-decor,
.cao-decor * {
  box-sizing: border-box;
  pointer-events: none;
  user-select: none;
}
[data-motion^="cao-"] > :not(.cao-decor) { position: relative; z-index: 2; }
.cao-kirigami-canyon { right: 4vw; bottom: 22px; width: 274px; height: 146px; }
.cao-cleavage-aperture { left: 4vw; bottom: 22px; width: 268px; height: 142px; }
.cao-guilloche-register { right: 4vw; bottom: 22px; width: 266px; height: 142px; }
.cao-yield-triplex { left: 4vw; bottom: 22px; width: 270px; height: 140px; }
.cao-airfilm-seat { right: 4vw; bottom: 22px; width: 268px; height: 142px; }
.cao-tabwasher-bends { left: 4vw; bottom: 22px; width: 268px; height: 140px; }
.cao-sgraffito-factors { right: 4vw; bottom: 22px; width: 270px; height: 144px; }
.cao-escapement-transfer { left: 4vw; bottom: 22px; width: 264px; height: 140px; }
.cao-scrollwork-faq { right: 4vw; bottom: 22px; width: 270px; height: 144px; }
.cao-knocker-call { left: 4vw; bottom: 22px; width: 258px; height: 142px; }

.js .cao-page [data-motion^="cao-"] .cao-decor .decor-child,
.js .cao-page [data-motion^="cao-"] .cao-decor * { animation-play-state: paused; }
.js .cao-page [data-motion^="cao-"].is-motion-active .cao-decor .decor-child,
.js .cao-page [data-motion^="cao-"].is-motion-active .cao-decor * { animation-play-state: running; }

/* 01. Киригами: один лист раскрывает семь разных прорезей. */
.cao-kirigami-canyon {
  background:
    radial-gradient(circle at 50% 52%, rgba(32,201,195,.12), transparent 36%),
    var(--cao-night);
}
.cao-kiri-sheet {
  position: absolute;
  top: 15px;
  left: 31px;
  width: 212px;
  height: 116px;
  background: linear-gradient(135deg, #273747, #132434 64%, #263b4d);
  border: 1px solid rgba(232,182,108,.78);
  clip-path: polygon(12% 7%,88% 7%,95% 93%,5% 93%);
  animation: cao-kirigami-sheet-spread .88s cubic-bezier(.2,.67,.28,1.06) .08s both paused;
}
.cao-kiri-slot {
  position: absolute;
  z-index: 3;
  background: var(--cao-night);
  border: 1px solid rgba(32,201,195,.68);
  transform-origin: center;
}
.cao-kiri-slot--1 { top: 30px; left: 61px; width: 30px; height: 8px; }
.cao-kiri-slot--2 { top: 34px; left: 107px; width: 9px; height: 31px; }
.cao-kiri-slot--3 { top: 28px; right: 57px; width: 37px; height: 7px; }
.cao-kiri-slot--4 { top: 65px; left: 73px; width: 43px; height: 8px; }
.cao-kiri-slot--5 { top: 55px; right: 70px; width: 8px; height: 34px; }
.cao-kiri-slot--6 { bottom: 39px; left: 96px; width: 29px; height: 7px; }
.cao-kiri-slot--7 { right: 53px; bottom: 29px; width: 34px; height: 8px; }
.cao-kiri-slot--1,
.cao-kiri-slot--3,
.cao-kiri-slot--5,
.cao-kiri-slot--7 { animation: cao-kirigami-slots-odd .76s cubic-bezier(.18,.72,.3,1.08) .32s both paused; }
.cao-kiri-slot--2,
.cao-kiri-slot--4,
.cao-kiri-slot--6 { animation: cao-kirigami-slots-even .82s cubic-bezier(.18,.72,.3,1.08) .42s both paused; }
.cao-kiri-rib {
  position: absolute;
  z-index: 4;
  width: 3px;
  height: 36px;
  background: var(--cao-copper);
  box-shadow: 0 0 0 1px rgba(232,182,108,.22);
  translate: 0 0;
}
.cao-kiri-rib--1 { --cao-kiri-x: -14px; --cao-kiri-y: -5px; top: 46px; left: 50px; rotate: -13deg; }
.cao-kiri-rib--2 { --cao-kiri-x: 8px; --cao-kiri-y: -14px; top: 81px; left: 125px; rotate: 7deg; }
.cao-kiri-rib--3 { --cao-kiri-x: 14px; --cao-kiri-y: 6px; top: 47px; right: 46px; rotate: 15deg; }
.cao-kiri-rib--4 { --cao-kiri-x: -9px; --cao-kiri-y: 13px; bottom: 22px; left: 157px; rotate: -6deg; }
.cao-kiri-rib { animation: cao-kirigami-ribs-set .9s cubic-bezier(.2,.68,.27,1.06) .55s both paused; }
.cao-kiri-datum { position: absolute; z-index: 5; right: 38px; bottom: 11px; width: 42px; height: 3px; background: var(--cao-teal); }
@keyframes cao-kirigami-sheet-spread {
  0% { clip-path: polygon(45% 10%,55% 10%,59% 90%,41% 90%); scale: 1 .7; filter: saturate(.48); }
  58% { clip-path: polygon(18% 8%,82% 8%,91% 91%,9% 91%); scale: 1 .96; filter: saturate(.82); }
  100% { clip-path: polygon(12% 7%,88% 7%,95% 93%,5% 93%); scale: 1; filter: none; }
}
@keyframes cao-kirigami-slots-odd {
  0% { scale: 1 .22; transform: skewX(-8deg); filter: brightness(.55); }
  63% { scale: 1 1.08; transform: skewX(2deg); filter: brightness(1.12); }
  100% { scale: 1; transform: none; filter: none; }
}
@keyframes cao-kirigami-slots-even {
  0% { scale: .26 1; transform: skewY(7deg); clip-path: inset(8% 14%); }
  52% { scale: 1.04 1; transform: skewY(-2deg); clip-path: inset(0); }
  100% { scale: 1; transform: none; clip-path: inset(0); }
}
@keyframes cao-kirigami-ribs-set {
  0% { translate: var(--cao-kiri-x) var(--cao-kiri-y); scale: .68 1; filter: brightness(.62); }
  72% { translate: -1px 1px; scale: 1.08 1; filter: brightness(1.15); }
  100% { translate: 0 0; scale: 1; filter: none; }
}

/* 02. Cleavage: четыре минеральных фрагмента освобождают центральный просвет. */
.cao-cleavage-aperture {
  --cao-cleave-shift: 6px;
  background: linear-gradient(145deg, #e8edf0, #9ba8b2);
  border-color: rgba(10,21,35,.32);
}
.cao-cleave-bed { position: absolute; inset: 10px; background: #394957; clip-path: polygon(3% 5%,96% 0,100% 91%,89% 100%,0 95%); }
.cao-cleave-fragment {
  position: absolute;
  z-index: 3;
  width: 82px;
  height: 48px;
  background: linear-gradient(135deg, #9da9b2, #536573);
  border: 1px solid rgba(232,182,108,.7);
  translate: var(--cao-cleave-x) var(--cao-cleave-y);
}
.cao-cleave-fragment.fragment-a { --cao-cleave-x: -6px; --cao-cleave-y: -4px; top: 23px; left: 38px; clip-path: polygon(0 0,100% 8%,78% 100%,7% 82%); animation: cao-cleavage-fragment-a-shear .72s cubic-bezier(.2,.66,.27,1.08) .14s both paused; }
.cao-cleave-fragment.fragment-b { --cao-cleave-x: 5px; --cao-cleave-y: -6px; top: 23px; right: 38px; clip-path: polygon(0 8%,100% 0,93% 83%,22% 100%); animation: cao-cleavage-fragment-b-shear .82s cubic-bezier(.2,.66,.27,1.08) .24s both paused; }
.cao-cleave-fragment.fragment-c { --cao-cleave-x: -4px; --cao-cleave-y: 6px; bottom: 23px; left: 38px; clip-path: polygon(7% 18%,78% 0,100% 92%,0 100%); animation: cao-cleavage-fragment-c-shear .92s cubic-bezier(.2,.66,.27,1.08) .34s both paused; }
.cao-cleave-fragment.fragment-d { --cao-cleave-x: 7px; --cao-cleave-y: 4px; right: 38px; bottom: 23px; clip-path: polygon(22% 0,93% 17%,100% 100%,0 92%); animation: cao-cleavage-fragment-d-shear 1.02s cubic-bezier(.2,.66,.27,1.08) .44s both paused; }
.cao-cleave-seam { position: absolute; z-index: 4; width: 32px; height: 2px; background: var(--cao-teal); }
.cao-cleave-seam.seam-a { top: 25px; left: 48px; rotate: 8deg; }
.cao-cleave-seam.seam-b { top: 30px; right: 50px; rotate: -10deg; }
.cao-cleave-seam.seam-c { bottom: 27px; left: 50px; rotate: -12deg; }
.cao-cleave-seam.seam-d { right: 47px; bottom: 26px; rotate: 9deg; }
.cao-cleave-void { position: absolute; z-index: 5; top: 46px; left: 106px; width: 56px; height: 50px; background: var(--cao-night); border: 2px solid var(--cao-warm); clip-path: polygon(24% 0,79% 7%,100% 43%,75% 100%,18% 91%,0 46%); animation: cao-cleavage-void-clarify .86s steps(8,end) .58s both paused; }
.cao-cleave-stop { position: absolute; z-index: 6; bottom: 11px; left: 111px; width: 46px; height: 4px; background: var(--cao-copper); }
@keyframes cao-cleavage-fragment-a-shear { 0% { translate: 0 0; clip-path: polygon(0 0,100% 1%,91% 100%,4% 93%); filter: contrast(.74); } 61% { translate: -7px -5px; clip-path: polygon(0 0,100% 8%,77% 100%,7% 82%); filter: contrast(1.08); } 100% { translate: var(--cao-cleave-x) var(--cao-cleave-y); clip-path: polygon(0 0,100% 8%,78% 100%,7% 82%); filter: none; } }
@keyframes cao-cleavage-fragment-b-shear { 0% { translate: 0 0; clip-path: polygon(3% 2%,100% 0,98% 94%,12% 100%); scale: .94 1; } 48% { translate: 6px -8px; clip-path: polygon(0 8%,100% 0,92% 83%,22% 100%); scale: 1.02 .98; } 100% { translate: var(--cao-cleave-x) var(--cao-cleave-y); clip-path: polygon(0 8%,100% 0,93% 83%,22% 100%); scale: 1; } }
@keyframes cao-cleavage-fragment-c-shear { 0% { translate: 0 0; clip-path: polygon(0 4%,90% 0,100% 97%,2% 100%); filter: saturate(.45); } 67% { translate: -6px 7px; clip-path: polygon(7% 18%,79% 0,100% 92%,0 100%); filter: saturate(1.2); } 100% { translate: var(--cao-cleave-x) var(--cao-cleave-y); clip-path: polygon(7% 18%,78% 0,100% 92%,0 100%); filter: none; } }
@keyframes cao-cleavage-fragment-d-shear { 0% { translate: 0 0; clip-path: polygon(11% 0,98% 3%,100% 96%,0 100%); scale: 1 .91; } 55% { translate: 9px 5px; clip-path: polygon(22% 0,93% 17%,100% 100%,0 92%); scale: .99 1.04; } 100% { translate: var(--cao-cleave-x) var(--cao-cleave-y); clip-path: polygon(22% 0,93% 17%,100% 100%,0 92%); scale: 1; } }
@keyframes cao-cleavage-void-clarify { 0% { clip-path: polygon(46% 38%,58% 39%,63% 54%,52% 65%,39% 59%,35% 46%); scale: .38; filter: brightness(.5); } 62% { clip-path: polygon(20% 0,82% 8%,100% 43%,76% 100%,17% 92%,0 44%); scale: 1.06; filter: brightness(1.15); } 100% { clip-path: polygon(24% 0,79% 7%,100% 43%,75% 100%,18% 91%,0 46%); scale: 1; filter: none; } }

/* 03. Guilloche: две гравированные сетки сводят неподвижные ориентиры. */
.cao-guilloche-register { background: linear-gradient(150deg,#162b3b,#081521); }
.cao-guilloche-plate { position: absolute; inset: 11px; background: #d9e0e4; border: 2px solid var(--cao-copper); clip-path: polygon(4% 0,96% 0,100% 88%,91% 100%,8% 96%,0 13%); }
.cao-guilloche-weave { position: absolute; z-index: 3; inset: 25px 39px; border: 1px solid rgba(10,21,35,.36); mix-blend-mode: multiply; }
.cao-guilloche-weave.weave-a { background: repeating-radial-gradient(ellipse at 38% 54%, transparent 0 5px, rgba(17,83,92,.8) 6px 7px, transparent 8px 12px); background-position: 8px -5px; transform: skewX(-3deg); animation: cao-guilloche-weave-a-register .86s cubic-bezier(.2,.65,.27,1.04) .16s both paused; }
.cao-guilloche-weave.weave-b { background: repeating-radial-gradient(ellipse at 63% 45%, transparent 0 4px, rgba(185,120,74,.72) 5px 6px, transparent 7px 11px); background-position: -7px 6px; transform: skewY(2deg); animation: cao-guilloche-weave-b-register .96s cubic-bezier(.2,.65,.27,1.04) .3s both paused; }
.cao-guilloche-tick { position: absolute; z-index: 5; width: 18px; height: 3px; background: var(--cao-teal); scale: 1; }
.cao-guilloche-tick.tick-a { top: 21px; left: 46px; --cao-tick-x: -5px; --cao-tick-y: -2px; }
.cao-guilloche-tick.tick-b { top: 22px; right: 43px; --cao-tick-x: 4px; --cao-tick-y: -3px; rotate: 90deg; }
.cao-guilloche-tick.tick-c { bottom: 20px; left: 47px; --cao-tick-x: -3px; --cao-tick-y: 4px; rotate: 90deg; }
.cao-guilloche-tick.tick-d { right: 44px; bottom: 22px; --cao-tick-x: 5px; --cao-tick-y: 3px; }
.cao-guilloche-tick { animation: cao-guilloche-ticks-seat .72s cubic-bezier(.18,.7,.3,1.1) .48s both paused; }
.cao-guilloche-centre { position: absolute; z-index: 6; top: 58px; left: 120px; width: 26px; height: 26px; background: var(--cao-night); border: 4px double var(--cao-warm); border-radius: 47% 53% 45% 55%; animation: cao-guilloche-centre-confirm .66s steps(7,end) .68s both paused; }
.cao-guilloche-stop { position: absolute; z-index: 5; width: 5px; height: 14px; background: var(--cao-copper); }
.cao-guilloche-stop.stop-a { top: 64px; left: 29px; }
.cao-guilloche-stop.stop-b { top: 64px; right: 29px; }
@keyframes cao-guilloche-weave-a-register { 0% { background-position: -19px 11px; transform: skewX(-13deg); filter: contrast(.52); } 57% { background-position: 11px -7px; transform: skewX(1deg); filter: contrast(1.16); } 100% { background-position: 8px -5px; transform: skewX(-3deg); filter: none; } }
@keyframes cao-guilloche-weave-b-register { 0% { background-position: 17px -13px; transform: skewY(12deg); scale: .91 1; } 64% { background-position: -9px 8px; transform: skewY(-1deg); scale: 1.02 .98; } 100% { background-position: -7px 6px; transform: skewY(2deg); scale: 1; } }
@keyframes cao-guilloche-ticks-seat { 0% { translate: var(--cao-tick-x) var(--cao-tick-y); scale: .32 1; filter: brightness(.55); } 71% { translate: 1px 0; scale: 1.12 1; filter: brightness(1.2); } 100% { translate: 0 0; scale: 1; filter: none; } }
@keyframes cao-guilloche-centre-confirm { 0% { clip-path: polygon(50% 42%,58% 50%,50% 58%,42% 50%); scale: .42; filter: saturate(.35); } 54% { clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); scale: 1.08; filter: saturate(1.2); } 100% { clip-path: inset(0 round 47% 53% 45% 55%); scale: 1; filter: none; } }

/* 04. Triplex: сжатие, сдвиг и кручение остаются разными. */
.cao-yield-triplex { background: linear-gradient(145deg,#33261f,#111c28); }
.cao-yield-cage { position: absolute; top: 24px; width: 72px; height: 88px; border: 1px solid rgba(221,226,231,.48); }
.cao-yield-cage.cage-a { left: 14px; }
.cao-yield-cage.cage-b { left: 99px; }
.cao-yield-cage.cage-c { left: 184px; }
.cao-yield-coupon { position: absolute; z-index: 4; top: 43px; width: 42px; height: 48px; background: linear-gradient(150deg,var(--cao-warm),var(--cao-copper)); border: 1px solid #f3d8af; transform-origin: center; }
.cao-yield-coupon.coupon-compression { left: 29px; scale: .72 1.08; animation: cao-yield-compression-set .82s cubic-bezier(.2,.67,.28,1.07) .16s both paused; }
.cao-yield-coupon.coupon-shear { left: 114px; transform: skewX(13deg); translate: 0 5px; animation: cao-yield-shear-set .9s cubic-bezier(.2,.67,.28,1.07) .28s both paused; }
.cao-yield-coupon.coupon-torsion { left: 199px; rotate: 17deg; clip-path: polygon(8% 0,100% 9%,92% 100%,0 91%); animation: cao-yield-torsion-set .98s cubic-bezier(.2,.67,.28,1.07) .4s both paused; }
.cao-yield-stop { position: absolute; z-index: 5; width: 11px; height: 11px; background: var(--cao-teal); border: 2px solid var(--cao-stone); border-radius: 50%; translate: 0 0; }
.cao-yield-stop.stop-a { --cao-stop-x: -7px; --cao-stop-y: 4px; top: 30px; left: 65px; }
.cao-yield-stop.stop-b { --cao-stop-x: 5px; --cao-stop-y: -8px; right: 130px; bottom: 31px; }
.cao-yield-stop.stop-c { --cao-stop-x: 8px; --cao-stop-y: 6px; top: 31px; right: 17px; }
.cao-yield-stop { animation: cao-yield-stops-catch .72s cubic-bezier(.18,.7,.3,1.1) .64s both paused; }
.cao-yield-baseline { position: absolute; right: 17px; bottom: 17px; left: 17px; height: 3px; background: rgba(32,201,195,.7); }
@keyframes cao-yield-compression-set { 0% { scale: 1; filter: brightness(.7); } 58% { scale: .68 1.12; filter: brightness(1.15); } 100% { scale: .72 1.08; filter: none; } }
@keyframes cao-yield-shear-set { 0% { transform: skewX(0); translate: 0 0; clip-path: inset(0); } 63% { transform: skewX(16deg); translate: 0 6px; clip-path: polygon(4% 0,100% 0,96% 100%,0 100%); } 100% { transform: skewX(13deg); translate: 0 5px; clip-path: inset(0); } }
@keyframes cao-yield-torsion-set { 0% { rotate: 0deg; clip-path: inset(0); scale: .94; } 52% { rotate: 20deg; clip-path: polygon(6% 0,100% 11%,94% 100%,0 89%); scale: 1.03; } 100% { rotate: 17deg; clip-path: polygon(8% 0,100% 9%,92% 100%,0 91%); scale: 1; } }
@keyframes cao-yield-stops-catch { 0% { translate: var(--cao-stop-x) var(--cao-stop-y); scale: .45; filter: saturate(.35); } 70% { translate: -1px 1px; scale: 1.18; filter: saturate(1.2); } 100% { translate: 0 0; scale: 1; filter: none; } }

/* 05. Air film: slab final top 38, base top 48, travel 10px. */
.cao-airfilm-seat { --cao-air-travel: 10px; background: linear-gradient(155deg,#d8e0e6,#7c909e); border-color: rgba(10,21,35,.34); }
.cao-air-plenum { position: absolute; z-index: 2; top: 76px; left: 31px; width: 206px; height: 48px; background: linear-gradient(90deg,#17293a 0 32%,#23515c 47%,#17293a 68%); border: 2px solid var(--cao-night); clip-path: polygon(3% 0,97% 0,100% 78%,91% 100%,9% 100%,0 78%); animation: cao-airfilm-plenum-charge .9s cubic-bezier(.2,.64,.27,1.05) .12s both paused; }
.cao-air-slab { position: absolute; z-index: 6; top: 38px; left: 38px; width: 192px; height: 28px; background: linear-gradient(180deg,#f1d29e,var(--cao-copper)); border: 2px solid var(--cao-night); box-shadow: 0 3px 3px rgba(10,21,35,.24); translate: 0 0; animation: cao-airfilm-slab-float 1.02s cubic-bezier(.2,.68,.25,1.07) .5s both paused; }
.cao-air-port { position: absolute; z-index: 4; top: 88px; width: 8px; background: var(--cao-teal); border-radius: 6px 6px 0 0; }
.cao-air-port.port-1 { left: 52px; height: 17px; }
.cao-air-port.port-2 { left: 79px; height: 13px; }
.cao-air-port.port-3 { left: 108px; height: 21px; }
.cao-air-port.port-4 { right: 108px; height: 15px; }
.cao-air-port.port-5 { right: 79px; height: 19px; }
.cao-air-port.port-6 { right: 52px; height: 12px; }
.cao-air-zone { position: absolute; z-index: 5; top: 68px; width: 83px; height: 8px; background: rgba(32,201,195,.72); border: 1px solid rgba(255,255,255,.5); }
.cao-air-zone.zone-a { left: 43px; transform-origin: right center; scale: 1; animation: cao-airfilm-zone-a-spread .74s cubic-bezier(.18,.7,.3,1.08) .26s both paused; }
.cao-air-zone.zone-b { right: 43px; transform-origin: left center; scale: 1; animation: cao-airfilm-zone-b-spread .82s cubic-bezier(.18,.7,.3,1.08) .34s both paused; }
.cao-air-datum { position: absolute; z-index: 7; top: 34px; width: 4px; height: 36px; background: var(--cao-night); }
.cao-air-datum.datum-left { left: 27px; }
.cao-air-datum.datum-right { right: 27px; }
@keyframes cao-airfilm-plenum-charge { 0% { background-position: -54px 0; filter: contrast(.58) saturate(.5); } 62% { background-position: 16px 0; filter: contrast(1.15) saturate(1.2); } 100% { background-position: 0 0; filter: none; } }
@keyframes cao-airfilm-zone-a-spread { 0% { scale: .18 1; clip-path: inset(0 0 0 44%); filter: brightness(.6); } 68% { scale: 1.06 1; clip-path: inset(0); filter: brightness(1.14); } 100% { scale: 1; clip-path: inset(0); filter: none; } }
@keyframes cao-airfilm-zone-b-spread { 0% { scale: .24 1; clip-path: inset(0 41% 0 0); filter: saturate(.45); } 55% { scale: 1.08 1; clip-path: inset(0); filter: saturate(1.22); } 100% { scale: 1; clip-path: inset(0); filter: none; } }
@keyframes cao-airfilm-slab-float { 0% { translate: 0 var(--cao-air-travel); scale: .98 1; filter: brightness(.7); } 66% { translate: 0 -2px; scale: 1.01 .99; filter: brightness(1.1); } 100% { translate: 0 0; scale: 1; filter: none; } }

/* 06. Три шайбы статичны, движутся только три разные загибаемые лапки. */
.cao-tabwasher-bends { background: linear-gradient(145deg,#182836,#091522); }
.cao-tab-base { position: absolute; right: 12px; bottom: 14px; left: 12px; height: 5px; background: var(--cao-copper); }
.cao-tab-nut,
.cao-tab-washer,
.cao-tab-fold { position: absolute; z-index: 3; }
.cao-tab-nut { top: 50px; width: 32px; height: 32px; background: #b5c1c9; border: 2px solid var(--cao-night); clip-path: polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%); }
.cao-tab-washer { top: 43px; width: 46px; height: 46px; border: 6px solid var(--cao-warm); border-radius: 50%; }
.cao-tab-fold { z-index: 5; width: 17px; height: 25px; background: linear-gradient(180deg,var(--cao-teal),#147b79); border: 1px solid #d8fffc; transform-style: preserve-3d; }
.cao-tab-nut.nut-a { left: 40px; }
.cao-tab-nut.nut-b { left: 118px; }
.cao-tab-nut.nut-c { right: 39px; }
.cao-tab-washer.washer-a { left: 33px; }
.cao-tab-washer.washer-b { left: 111px; }
.cao-tab-washer.washer-c { right: 32px; }
.cao-tab-fold.fold-a { top: 34px; left: 48px; transform-origin: center bottom; transform: perspective(130px) rotateX(72deg); animation: cao-tabwasher-fold-a-bend .78s cubic-bezier(.2,.68,.27,1.08) .18s both paused; }
.cao-tab-fold.fold-b { top: 54px; left: 148px; transform-origin: left center; transform: perspective(130px) rotateY(-68deg); animation: cao-tabwasher-fold-b-bend .88s cubic-bezier(.2,.68,.27,1.08) .32s both paused; }
.cao-tab-fold.fold-c { top: 74px; right: 47px; transform-origin: center top; transform: perspective(130px) rotate3d(1,1,0,64deg); animation: cao-tabwasher-fold-c-diagonal .98s cubic-bezier(.2,.68,.27,1.08) .46s both paused; }
@keyframes cao-tabwasher-fold-a-bend { 0% { transform: perspective(130px) rotateX(0deg); filter: brightness(.66); } 58% { transform: perspective(130px) rotateX(78deg); filter: brightness(1.2); } 100% { transform: perspective(130px) rotateX(72deg); filter: none; } }
@keyframes cao-tabwasher-fold-b-bend { 0% { transform: perspective(130px) rotateY(0deg); clip-path: inset(0); } 64% { transform: perspective(130px) rotateY(-74deg); clip-path: polygon(0 0,100% 7%,100% 93%,0 100%); } 100% { transform: perspective(130px) rotateY(-68deg); clip-path: inset(0); } }
@keyframes cao-tabwasher-fold-c-diagonal { 0% { transform: perspective(130px) rotate3d(1,1,0,0deg); filter: saturate(.5); } 52% { transform: perspective(130px) rotate3d(1,1,0,70deg); filter: saturate(1.25); } 100% { transform: perspective(130px) rotate3d(1,1,0,64deg); filter: none; } }

/* 07. Sgraffito: четыре изолированных штриха проявляются в твёрдой штукатурке. */
.cao-sgraffito-factors { background: linear-gradient(145deg,#e7d8c7,#8e6951); border-color: rgba(10,21,35,.32); }
.cao-sgraffito-plate { position: absolute; inset: 10px; background: linear-gradient(118deg,#d5c0aa,#8d684f 54%,#cfae8c); border: 2px solid var(--cao-night); background-position: 0 0; animation: cao-sgraffito-plate-cure .76s cubic-bezier(.2,.64,.27,1.06) .08s both paused; }
.cao-sgraffito-tile,
.cao-sgraffito-hatch { position: absolute; width: 41%; height: 35%; }
.cao-sgraffito-tile { z-index: 3; background: rgba(10,21,35,.82); border: 1px solid rgba(232,182,108,.58); }
.cao-sgraffito-tile.tile-a,
.cao-sgraffito-hatch.hatch-a { top: 15%; left: 6%; }
.cao-sgraffito-tile.tile-b,
.cao-sgraffito-hatch.hatch-b { top: 15%; right: 6%; }
.cao-sgraffito-tile.tile-c,
.cao-sgraffito-hatch.hatch-c { bottom: 12%; left: 6%; }
.cao-sgraffito-tile.tile-d,
.cao-sgraffito-hatch.hatch-d { right: 6%; bottom: 12%; }
.cao-sgraffito-hatch { z-index: 4; background-color: var(--cao-teal); mask-repeat: no-repeat; mask-size: 100% 100%; }
.cao-sgraffito-hatch.hatch-a { background-image: repeating-linear-gradient(17deg,transparent 0 4px,#9ffff9 5px 7px); mask-image: linear-gradient(90deg,#000,#000); animation: cao-sgraffito-hatch-a-etch .78s steps(8,end) .22s both paused; }
.cao-sgraffito-hatch.hatch-b { background-image: repeating-radial-gradient(circle at 30% 50%,transparent 0 4px,#ffd293 5px 7px); mask-image: radial-gradient(circle,#000 0 70%,transparent 72%); animation: cao-sgraffito-hatch-b-etch .88s steps(9,end) .34s both paused; }
.cao-sgraffito-hatch.hatch-c { background-image: repeating-linear-gradient(-23deg,transparent 0 5px,#94e9e5 6px 8px); mask-image: conic-gradient(from 45deg,#000 0 75%,transparent 76%); animation: cao-sgraffito-hatch-c-etch .98s steps(10,end) .46s both paused; }
.cao-sgraffito-hatch.hatch-d { background-image: repeating-radial-gradient(ellipse at 70% 40%,transparent 0 3px,#f2c27a 4px 6px); mask-image: linear-gradient(135deg,#000 0 82%,transparent 83%); animation: cao-sgraffito-hatch-d-etch 1.08s steps(11,end) .58s both paused; }
.cao-sgraffito-anchor { position: absolute; z-index: 5; width: 7px; height: 7px; background: var(--cao-warm); border: 1px solid var(--cao-night); border-radius: 50%; }
.cao-sgraffito-anchor.anchor-a { top: 18%; left: 9%; }
.cao-sgraffito-anchor.anchor-b { top: 18%; right: 9%; }
.cao-sgraffito-anchor.anchor-c { bottom: 15%; left: 9%; }
.cao-sgraffito-anchor.anchor-d { right: 9%; bottom: 15%; }
@keyframes cao-sgraffito-plate-cure { 0% { background-position: -38px 17px; filter: contrast(.58) saturate(.6); } 66% { background-position: 5px -3px; filter: contrast(1.14) saturate(1.1); } 100% { background-position: 0 0; filter: none; } }
@keyframes cao-sgraffito-hatch-a-etch { 0% { mask-size: 17% 72%; mask-position: 0 50%; background-position: -22px 0; filter: brightness(.58); } 62% { mask-size: 106% 100%; mask-position: 0 0; background-position: 4px 0; filter: brightness(1.12); } 100% { mask-size: 100% 100%; mask-position: 0 0; background-position: 0 0; filter: none; } }
@keyframes cao-sgraffito-hatch-b-etch { 0% { mask-size: 28% 28%; mask-position: 50% 50%; background-position: 15px -8px; filter: contrast(.55); } 53% { mask-size: 112% 108%; mask-position: 47% 51%; background-position: -3px 4px; filter: contrast(1.18); } 100% { mask-size: 100% 100%; mask-position: 50% 50%; background-position: 0 0; filter: none; } }
@keyframes cao-sgraffito-hatch-c-etch { 0% { mask-size: 44% 21%; mask-position: 21% 79%; background-position: -17px 11px; filter: saturate(.42); } 68% { mask-size: 101% 107%; mask-position: 0 0; background-position: 3px -2px; filter: saturate(1.24); } 100% { mask-size: 100% 100%; mask-position: 0 0; background-position: 0 0; filter: none; } }
@keyframes cao-sgraffito-hatch-d-etch { 0% { mask-size: 25% 68%; mask-position: 83% 12%; background-position: 19px 7px; filter: sepia(.7); } 57% { mask-size: 109% 96%; mask-position: 0 0; background-position: -4px -3px; filter: sepia(.12); } 100% { mask-size: 100% 100%; mask-position: 0 0; background-position: 0 0; filter: none; } }

/* 08. Escapement: один такт переводит jewel к неподвижному приёмнику. */
.cao-escapement-transfer { background: linear-gradient(150deg,#1b2c3a,#08131f); }
.cao-escape-base { position: absolute; inset: 11px; border: 2px solid rgba(221,226,231,.5); clip-path: polygon(0 8%,91% 0,100% 89%,86% 100%,7% 94%); }
.cao-escape-sector { position: absolute; z-index: 3; top: 25px; left: 83px; width: 98px; height: 86px; border: 8px solid var(--cao-copper); border-left-color: transparent; border-radius: 50%; transform-origin: center; rotate: 13deg; animation: cao-escapement-sector-step .88s cubic-bezier(.2,.65,.27,1.06) .14s both paused; }
.cao-escape-pallet { position: absolute; z-index: 5; top: 55px; width: 32px; height: 11px; background: var(--cao-warm); transform-origin: center; }
.cao-escape-pallet.pallet-left { left: 90px; rotate: -8deg; translate: -4px 3px; animation: cao-escapement-pallet-release .72s cubic-bezier(.2,.68,.27,1.08) .34s both paused; }
.cao-escape-pallet.pallet-right { right: 68px; rotate: 11deg; translate: -6px 4px; animation: cao-escapement-pallet-catch .82s cubic-bezier(.2,.68,.27,1.08) .46s both paused; }
.cao-escape-pivot { position: absolute; z-index: 6; top: 60px; left: 123px; width: 18px; height: 18px; background: var(--cao-teal); border: 3px solid var(--cao-stone); border-radius: 50%; }
.cao-escape-jewel { position: absolute; z-index: 7; top: 60px; left: 115px; width: 18px; height: 18px; background: #e99070; border: 2px solid #ffe0c8; border-radius: 50%; translate: 25px 8px; animation: cao-escapement-jewel-seat .94s cubic-bezier(.2,.66,.26,1.08) .58s both paused; }
.cao-escape-sender,
.cao-escape-receiver { position: absolute; z-index: 4; top: 55px; width: 30px; height: 30px; border: 2px solid rgba(32,201,195,.75); border-radius: 50%; }
.cao-escape-sender { left: 98px; }
.cao-escape-receiver { right: 90px; background: rgba(32,201,195,.15); }
.cao-escape-stop { position: absolute; z-index: 6; top: 43px; width: 7px; height: 34px; background: #c7d0d6; }
.cao-escape-stop.stop-left { left: 77px; rotate: -9deg; }
.cao-escape-stop.stop-right { right: 55px; rotate: 8deg; }
@keyframes cao-escapement-sector-step { 0% { rotate: -9deg; filter: brightness(.62); } 57% { rotate: 16deg; filter: brightness(1.16); } 100% { rotate: 13deg; filter: none; } }
@keyframes cao-escapement-pallet-release { 0% { rotate: 5deg; translate: 0 0; scale: 1.08 1; } 61% { rotate: -11deg; translate: -5px 4px; scale: .96 1; } 100% { rotate: -8deg; translate: -4px 3px; scale: 1; } }
@keyframes cao-escapement-pallet-catch { 0% { rotate: 20deg; translate: 8px -3px; clip-path: inset(0 0 0 18%); } 69% { rotate: 8deg; translate: -8px 5px; clip-path: inset(0); } 100% { rotate: 11deg; translate: -6px 4px; clip-path: inset(0); } }
@keyframes cao-escapement-jewel-seat { 0% { translate: 0 0; scale: .82; filter: saturate(.52); } 48% { translate: 18px 3px; scale: 1.08; filter: saturate(1.25); } 78% { translate: 27px 9px; scale: .96; filter: saturate(1.06); } 100% { translate: 25px 8px; scale: 1; filter: none; } }

/* 09. Scrollwork: шесть независимых завитков, FAQ остаётся нативным. */
.cao-scrollwork-faq { background: linear-gradient(145deg,#d6dde2,#6f7f8a); border-color: rgba(10,21,35,.34); }
.cao-scroll-rail { position: absolute; top: 70px; left: 19px; width: 232px; height: 6px; background: var(--cao-night); border: 1px solid var(--cao-copper); }
.cao-scroll-arc { position: absolute; z-index: 3; width: 38px; height: 38px; border: 5px solid var(--cao-night); border-left-color: var(--cao-copper); border-radius: 50%; }
.cao-scroll-arc.arc-1 { top: 24px; left: 21px; --cao-scroll-rot: -8deg; }
.cao-scroll-arc.arc-2 { bottom: 20px; left: 57px; --cao-scroll-rot: 12deg; }
.cao-scroll-arc.arc-3 { top: 18px; left: 95px; width: 43px; height: 43px; --cao-scroll-rot: -14deg; }
.cao-scroll-arc.arc-4 { right: 91px; bottom: 17px; width: 35px; height: 35px; --cao-scroll-rot: 7deg; }
.cao-scroll-arc.arc-5 { top: 23px; right: 52px; width: 41px; height: 41px; --cao-scroll-rot: 15deg; }
.cao-scroll-arc.arc-6 { right: 14px; bottom: 20px; width: 34px; height: 34px; --cao-scroll-rot: -10deg; }
.cao-scroll-arc.arc-1,
.cao-scroll-arc.arc-2 { rotate: var(--cao-scroll-rot); scale: 1; animation: cao-scrollwork-pair-a-open .78s cubic-bezier(.2,.67,.28,1.07) .18s both paused; }
.cao-scroll-arc.arc-3,
.cao-scroll-arc.arc-4 { rotate: var(--cao-scroll-rot); clip-path: inset(0); animation: cao-scrollwork-pair-b-open .9s cubic-bezier(.2,.67,.28,1.07) .34s both paused; }
.cao-scroll-arc.arc-5,
.cao-scroll-arc.arc-6 { translate: 0 0; border-radius: 50%; animation: cao-scrollwork-pair-c-open 1.02s cubic-bezier(.2,.67,.28,1.07) .5s both paused; }
.cao-scroll-rivet { position: absolute; z-index: 5; width: 8px; height: 8px; background: var(--cao-teal); border: 1px solid var(--cao-night); border-radius: 50%; }
.cao-scroll-rivet.rivet-1 { top: 54px; left: 39px; }
.cao-scroll-rivet.rivet-2 { bottom: 48px; left: 75px; }
.cao-scroll-rivet.rivet-3 { top: 53px; left: 113px; }
.cao-scroll-rivet.rivet-4 { right: 107px; bottom: 47px; }
.cao-scroll-rivet.rivet-5 { top: 55px; right: 68px; }
.cao-scroll-rivet.rivet-6 { right: 29px; bottom: 48px; }
.cao-scroll-terminus { position: absolute; z-index: 6; right: 12px; bottom: 9px; width: 27px; height: 5px; background: var(--cao-copper); translate: 4px 0; animation: cao-scrollwork-terminus-seat .66s cubic-bezier(.18,.7,.3,1.1) .72s both paused; }
@keyframes cao-scrollwork-pair-a-open { 0% { scale: .54; rotate: -21deg; filter: contrast(.54); } 64% { scale: 1.08; rotate: calc(var(--cao-scroll-rot) + 3deg); filter: contrast(1.16); } 100% { scale: 1; rotate: var(--cao-scroll-rot); filter: none; } }
@keyframes cao-scrollwork-pair-b-open { 0% { clip-path: inset(38% 42% 26% 18% round 50%); scale: .83; } 56% { clip-path: inset(0 round 50%); scale: 1.06; } 100% { clip-path: inset(0); scale: 1; } }
@keyframes cao-scrollwork-pair-c-open { 0% { translate: 0 7px; border-radius: 36% 64% 31% 69%; filter: saturate(.48); } 71% { translate: 0 -1px; border-radius: 54% 46% 57% 43%; filter: saturate(1.17); } 100% { translate: 0 0; border-radius: 50%; filter: none; } }
@keyframes cao-scrollwork-terminus-seat { 0% { translate: 0 0; scale: .37 1; filter: brightness(.58); } 68% { translate: 5px 0; scale: 1.08 1; filter: brightness(1.18); } 100% { translate: 4px 0; scale: 1; filter: none; } }

/* 10. Knocker: пластина внутри 10px, кольцо делает один двойной удар. */
.cao-knocker-call { background: linear-gradient(145deg,#1d2d3a,#07131f); }
.cao-knocker-plate { position: absolute; z-index: 2; top: 10px; left: 72px; width: 114px; height: 122px; background: linear-gradient(120deg,#72472f,#d49b64 52%,#68422e); background-position: 0 0; border: 2px solid #edd0a5; box-shadow: 0 2px 2px rgba(3,8,14,.28); animation: cao-knocker-plate-temper .84s cubic-bezier(.2,.64,.27,1.05) .1s both paused; }
.cao-knocker-hinge { position: absolute; z-index: 5; top: 23px; left: 105px; width: 48px; height: 18px; background: #aebbc3; border: 2px solid var(--cao-night); translate: 0 0; animation: cao-knocker-hinge-seat .7s cubic-bezier(.2,.68,.27,1.09) .28s both paused; }
.cao-knocker-ring { position: absolute; z-index: 6; top: 36px; left: 91px; width: 76px; height: 70px; border: 9px solid var(--cao-night); border-top-color: transparent; border-radius: 0 0 50% 50%; transform-origin: 50% 7%; transform: perspective(220px) rotateX(0deg); animation: cao-knocker-double-strike 1.18s cubic-bezier(.2,.6,.24,1) .4s both paused; }
.cao-knocker-boss { position: absolute; z-index: 5; top: 94px; left: 118px; width: 22px; height: 18px; background: var(--cao-teal); border: 3px solid var(--cao-night); border-radius: 50%; }
.cao-knocker-rivet { position: absolute; z-index: 7; width: 8px; height: 8px; background: var(--cao-warm); border: 1px solid var(--cao-night); border-radius: 50%; }
.cao-knocker-rivet.rivet-1 { top: 18px; left: 80px; }
.cao-knocker-rivet.rivet-2 { top: 18px; right: 80px; }
.cao-knocker-rivet.rivet-3 { bottom: 17px; left: 80px; }
.cao-knocker-rivet.rivet-4 { right: 80px; bottom: 17px; }
.cao-knocker-witness { position: absolute; z-index: 7; right: 82px; bottom: 12px; width: 38px; height: 4px; background: var(--cao-teal); outline: 1px solid rgba(221,226,231,.7); transform-origin: right center; scale: 1 1; animation: cao-knocker-witness-show .62s steps(6,end) .86s both paused; }
@keyframes cao-knocker-plate-temper { 0% { background-position: -42px 13px; filter: contrast(.58) saturate(.52); } 62% { background-position: 7px -3px; filter: contrast(1.16) saturate(1.14); } 100% { background-position: 0 0; filter: none; } }
@keyframes cao-knocker-hinge-seat { 0% { translate: 0 -3px; scale: .92 1; filter: brightness(.64); } 73% { translate: 0 1px; scale: 1.05 .98; filter: brightness(1.18); } 100% { translate: 0 0; scale: 1; filter: none; } }
@keyframes cao-knocker-double-strike { 0% { transform: perspective(220px) rotateX(-34deg); filter: brightness(.72); } 31% { transform: perspective(220px) rotateX(8deg); filter: brightness(1.16); } 55% { transform: perspective(220px) rotateX(-13deg); filter: brightness(.9); } 78% { transform: perspective(220px) rotateX(3deg); filter: brightness(1.05); } 100% { transform: perspective(220px) rotateX(0deg); filter: none; } }
@keyframes cao-knocker-witness-show { 0% { scale: .25 1; outline-color: transparent; filter: saturate(.4); } 68% { scale: 1.08 1; outline-color: rgba(221,226,231,.84); filter: saturate(1.2); } 100% { scale: 1; outline-color: rgba(221,226,231,.7); filter: none; } }

html:not(.js) .cao-page [data-motion^="cao-"] .cao-decor .decor-child { animation-delay: -100s !important; animation-play-state: paused; }

@media (max-width: 1080px) {
  .cao-page [data-motion^="cao-"] > .cao-decor { width: 238px; height: 128px; bottom: 20px; }
  .cao-page .cao-kirigami-canyon,
  .cao-page .cao-guilloche-register,
  .cao-page .cao-airfilm-seat,
  .cao-page .cao-sgraffito-factors,
  .cao-page .cao-scrollwork-faq { right: 24px; }
  .cao-page .cao-cleavage-aperture,
  .cao-page .cao-yield-triplex,
  .cao-page .cao-tabwasher-bends,
  .cao-page .cao-escapement-transfer,
  .cao-page .cao-knocker-call { left: 24px; }
  .cao-page .cao-kiri-sheet { top: 10%; left: 11%; width: 78%; height: 80%; }
  .cao-page .cao-kiri-slot--1 { top: 21%; left: 22%; width: 11%; }
  .cao-page .cao-kiri-slot--2 { top: 24%; left: 39%; height: 22%; }
  .cao-page .cao-kiri-slot--3 { top: 20%; right: 21%; width: 14%; }
  .cao-page .cao-kiri-slot--4 { top: 46%; left: 27%; width: 16%; }
  .cao-page .cao-kiri-slot--5 { top: 39%; right: 26%; height: 24%; }
  .cao-page .cao-kiri-slot--6 { bottom: 27%; left: 36%; width: 11%; }
  .cao-page .cao-kiri-slot--7 { right: 20%; bottom: 20%; width: 13%; }
  .cao-page .cao-kiri-rib--1 { top: 32%; left: 18%; }
  .cao-page .cao-kiri-rib--2 { top: 56%; left: 46%; }
  .cao-page .cao-kiri-rib--3 { top: 33%; right: 17%; }
  .cao-page .cao-kiri-rib--4 { bottom: 15%; left: 58%; }
  .cao-page .cao-cleave-fragment { width: 31%; height: 34%; }
  .cao-page .cao-cleave-fragment.fragment-a { top: 16%; left: 14%; }
  .cao-page .cao-cleave-fragment.fragment-b { top: 16%; right: 14%; }
  .cao-page .cao-cleave-fragment.fragment-c { bottom: 16%; left: 14%; }
  .cao-page .cao-cleave-fragment.fragment-d { right: 14%; bottom: 16%; }
  .cao-page .cao-cleave-void { top: 32%; left: 40%; width: 20%; height: 36%; }
  .cao-page .cao-guilloche-centre { top: 41%; left: 45%; width: 10%; height: 19%; }
  .cao-page .cao-yield-cage { top: 17%; width: 27%; height: 63%; }
  .cao-page .cao-yield-cage.cage-a { left: 5%; }
  .cao-page .cao-yield-cage.cage-b { left: 36.5%; }
  .cao-page .cao-yield-cage.cage-c { left: 68%; }
  .cao-page .cao-yield-coupon { top: 31%; width: 16%; height: 34%; }
  .cao-page .cao-yield-coupon.coupon-compression { left: 10.5%; }
  .cao-page .cao-yield-coupon.coupon-shear { left: 42%; }
  .cao-page .cao-yield-coupon.coupon-torsion { left: 73.5%; }
  .cao-page .cao-airfilm-seat { --cao-air-travel: 8px; }
  .cao-page .cao-air-plenum { top: 54%; left: 12%; width: 76%; height: 34%; }
  .cao-page .cao-air-slab { top: 27%; left: 15%; width: 70%; height: 20%; }
  .cao-page .cao-tab-nut { top: 36%; width: 12%; height: 23%; }
  .cao-page .cao-tab-washer { top: 31%; width: 17%; height: 33%; }
  .cao-page .cao-tab-nut.nut-a { left: 15%; }
  .cao-page .cao-tab-nut.nut-b { left: 44%; }
  .cao-page .cao-tab-nut.nut-c { right: 15%; }
  .cao-page .cao-tab-washer.washer-a { left: 12%; }
  .cao-page .cao-tab-washer.washer-b { left: 41%; }
  .cao-page .cao-tab-washer.washer-c { right: 12%; }
  .cao-page .cao-tab-fold.fold-a { top: 24%; left: 18%; }
  .cao-page .cao-tab-fold.fold-b { top: 39%; left: 55%; }
  .cao-page .cao-tab-fold.fold-c { top: 53%; right: 17%; }
  .cao-page .cao-escape-sector { top: 18%; left: 31%; width: 37%; height: 61%; }
  .cao-page .cao-knocker-plate { top: 7%; left: 28%; width: 44%; height: 86%; }
  .cao-page .cao-knocker-hinge { top: 16%; left: 41%; width: 18%; height: 13%; }
  .cao-page .cao-knocker-ring { top: 25%; left: 35%; width: 30%; height: 49%; }
  .cao-page .cao-knocker-boss { top: 66%; left: 46%; width: 9%; height: 13%; }
}

@media (max-width: 840px) {
  .cao-page [data-motion^="cao-"] > .cao-decor { width: 218px; height: 118px; bottom: 18px; }
  .cao-page .cao-kirigami-canyon,
  .cao-page .cao-guilloche-register,
  .cao-page .cao-airfilm-seat,
  .cao-page .cao-sgraffito-factors,
  .cao-page .cao-scrollwork-faq { right: 20px; }
  .cao-page .cao-cleavage-aperture,
  .cao-page .cao-yield-triplex,
  .cao-page .cao-tabwasher-bends,
  .cao-page .cao-escapement-transfer,
  .cao-page .cao-knocker-call { left: 20px; }
  .cao-page .cao-airfilm-seat { --cao-air-travel: 8px; }
  .cao-page .cao-scroll-arc { width: 14%; height: 27%; }
}

@media (max-width: 560px) {
  .cao-page [data-motion^="cao-"] > .cao-decor { right: auto; bottom: 14px; left: calc(50% - 96px); width: 192px; height: 104px; box-shadow: 0 3px 3px rgba(4,10,17,.2); }
  .cao-page .cao-airfilm-seat { --cao-air-travel: 7px; }
  .cao-page .cao-kiri-rib { height: 25%; }
  .cao-page .cao-cleave-seam { width: 12%; }
  .cao-page .cao-guilloche-weave { inset: 18% 15%; }
  .cao-page .cao-tab-fold { width: 7%; height: 18%; }
  .cao-page .cao-escape-pallet { width: 12%; height: 8%; }
  .cao-page .cao-knocker-rivet { width: 6px; height: 6px; }
}

@media (max-width: 380px) {
  .cao-page [data-motion^="cao-"] > .cao-decor { right: auto; bottom: 10px; left: calc(50% - 82px); width: 164px; height: 90px; border-width: 1px; box-shadow: 0 2px 2px rgba(4,10,17,.18); }
  .cao-page .cao-airfilm-seat { --cao-air-travel: 6px; }
  .cao-page .cao-decor .decor-child { border-width: 1px; }
  .cao-page .cao-knocker-ring { border-width: 6px; }
  .cao-page .cao-tab-washer { border-width: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .cao-page [data-motion^="cao-"] .cao-decor,
  .cao-page [data-motion^="cao-"] .cao-decor *,
  .cao-page [data-motion^="cao-"] .cao-decor::before,
  .cao-page [data-motion^="cao-"] .cao-decor::after,
  .cao-page [data-motion^="cao-"] .cao-decor *::before,
  .cao-page [data-motion^="cao-"] .cao-decor *::after { animation: none !important; transition: none !important; }
  .cao-page .cao-kiri-sheet { clip-path: polygon(12% 7%,88% 7%,95% 93%,5% 93%); scale: 1; filter: none; }
  .cao-page .cao-kiri-slot { scale: 1; transform: none; clip-path: inset(0); filter: none; }
  .cao-page .cao-kiri-rib { translate: 0 0; scale: 1; filter: none; }
  .cao-page .cao-cleave-fragment { translate: var(--cao-cleave-x) var(--cao-cleave-y); scale: 1; filter: none; }
  .cao-page .cao-cleave-void { clip-path: polygon(24% 0,79% 7%,100% 43%,75% 100%,18% 91%,0 46%); scale: 1; filter: none; }
  .cao-page .cao-guilloche-weave.weave-a { background-position: 8px -5px; transform: skewX(-3deg); scale: 1; filter: none; }
  .cao-page .cao-guilloche-weave.weave-b { background-position: -7px 6px; transform: skewY(2deg); scale: 1; filter: none; }
  .cao-page .cao-guilloche-tick { translate: 0 0; scale: 1; filter: none; }
  .cao-page .cao-guilloche-centre { clip-path: inset(0 round 47% 53% 45% 55%); scale: 1; filter: none; }
  .cao-page .coupon-compression { scale: .72 1.08; filter: none; }
  .cao-page .coupon-shear { transform: skewX(13deg); translate: 0 5px; clip-path: inset(0); }
  .cao-page .coupon-torsion { rotate: 17deg; clip-path: polygon(8% 0,100% 9%,92% 100%,0 91%); scale: 1; }
  .cao-page .cao-yield-stop { translate: 0 0; scale: 1; filter: none; }
  .cao-page .cao-air-plenum { background-position: 0 0; filter: none; }
  .cao-page .cao-air-zone { scale: 1; clip-path: inset(0); filter: none; }
  .cao-page .cao-air-slab { translate: 0 0; scale: 1; filter: none; }
  .cao-page .cao-tab-fold.fold-a { transform: perspective(130px) rotateX(72deg); filter: none; }
  .cao-page .cao-tab-fold.fold-b { transform: perspective(130px) rotateY(-68deg); clip-path: inset(0); }
  .cao-page .cao-tab-fold.fold-c { transform: perspective(130px) rotate3d(1,1,0,64deg); filter: none; }
  .cao-page .cao-sgraffito-plate { background-position: 0 0; filter: none; }
  .cao-page .cao-sgraffito-hatch { mask-size: 100% 100%; mask-position: 0 0; background-position: 0 0; filter: none; }
  .cao-page .cao-escape-sector { rotate: 13deg; filter: none; }
  .cao-page .pallet-left { rotate: -8deg; translate: -4px 3px; scale: 1; }
  .cao-page .pallet-right { rotate: 11deg; translate: -6px 4px; clip-path: inset(0); }
  .cao-page .cao-escape-jewel { translate: 25px 8px; scale: 1; filter: none; }
  .cao-page .cao-scroll-arc.arc-1,
  .cao-page .cao-scroll-arc.arc-2 { rotate: var(--cao-scroll-rot); scale: 1; filter: none; }
  .cao-page .cao-scroll-arc.arc-3,
  .cao-page .cao-scroll-arc.arc-4 { clip-path: inset(0); scale: 1; }
  .cao-page .cao-scroll-arc.arc-5,
  .cao-page .cao-scroll-arc.arc-6 { translate: 0 0; border-radius: 50%; filter: none; }
  .cao-page .cao-scroll-terminus { translate: 4px 0; scale: 1; filter: none; }
  .cao-page .cao-knocker-plate { background-position: 0 0; filter: none; }
  .cao-page .cao-knocker-hinge { translate: 0 0; scale: 1; filter: none; }
  .cao-page .cao-knocker-ring { transform: perspective(220px) rotateX(0deg); filter: none; }
  .cao-page .cao-knocker-witness { scale: 1; outline-color: rgba(221,226,231,.7); filter: none; }
}