/* 13 · BELT DETAIL PASS — mechanical micro-animation for all 12 variants.
   Loaded last so it layers over per-belt files. Respects prefers-reduced-motion via styles.css. */
.belt-stage::before {
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, transparent 70%);
  bottom: 6px; content: ""; height: 36px; left: 50%; position: absolute;
  transform: translateX(-50%); width: 240px; z-index: 0;
  animation: stage-shadow 5s ease-in-out infinite;
}
.belt-stage::after {
  background-image:
    radial-gradient(circle, rgba(232,198,128,0.7) 0 1.5px, transparent 2px),
    radial-gradient(circle, rgba(232,198,128,0.45) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(140,200,255,0.5) 0 1px, transparent 2px);
  background-size: 90px 90px, 130px 130px, 170px 170px;
  content: ""; inset: 0; pointer-events: none; position: absolute; z-index: 5;
  animation: dust-rise 9s linear infinite; opacity: 0.5;
}
.belt-illustration.active > div { animation: part-in 0.7s cubic-bezier(0.2, 0.9, 0.25, 1.2) backwards; }
.belt-illustration.active > div:nth-child(1) { animation-delay: 0.02s; }
.belt-illustration.active > div:nth-child(2) { animation-delay: 0.1s; }
.belt-illustration.active > div:nth-child(3) { animation-delay: 0.18s; }
.belt-illustration.active > div:nth-child(4) { animation-delay: 0.26s; }
.belt-illustration.active > div:nth-child(5) { animation-delay: 0.34s; }
.belt-stage.is-switching::after { animation-duration: 2.5s; opacity: 0.9; }

/* Universal lock micro-detail: keyhole glow + shackle glint sweep */
.belt-illustration.active .keyhole { animation: keyhole-glow 2.4s ease-in-out infinite; }
.belt-illustration.active .lock-shackle::after,
.belt-illustration.active .male-shackle::after {
  animation: shackle-glint 3s ease-in-out infinite; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.9) 50%, transparent 70%);
  content: ""; display: block; height: 100%; width: 100%;
}
.belt-illustration { perspective: 700px; }
.belt-illustration.active { animation-timing-function: ease-in-out; }

/* 1 · CLASSIC BRASS — rivet chase, vent breathe, hinge tick */
.variant-classic.active .rivet { animation: rivet-chase 2.8s ease-in-out infinite; }
.variant-classic.active .rv2 { animation-delay: 0.35s; } .variant-classic.active .rv3 { animation-delay: 0.7s; } .variant-classic.active .rv4 { animation-delay: 1.05s; }
.variant-classic.active .vent { animation: vent-breathe 3.2s ease-in-out infinite; transform-origin: top center; }
.variant-classic.active .v2 { animation-delay: 0.3s; } .variant-classic.active .v3 { animation-delay: 0.6s; } .variant-classic.active .v4 { animation-delay: 0.9s; } .variant-classic.active .v5 { animation-delay: 1.2s; }
.variant-classic.active .plate-ridge { animation: ridge-tick 4s ease-in-out infinite; }

/* 2 · STEEL CAGE — bar shimmer wave, ring glint orbit, cap spin */
.variant-male.active .cage-bar { animation: bar-shimmer 2.2s ease-in-out infinite; }
.variant-male.active .b2 { animation-delay: 0.35s; } .variant-male.active .b3 { animation-delay: 0.7s; }
.variant-male.active .male-ring::after {
  animation: ring-orbit 3.4s linear infinite; border-top: 4px solid rgba(255,255,255,0.95);
  border-radius: 50%; content: ""; inset: -4px; position: absolute;
}
.variant-male.active .male-ring { position: absolute; }
.variant-male.active .cage-cap { animation: cap-spin 4s ease-in-out infinite; }

/* 3 · FLORENTINE SHIELD — engraving march, gem sparkle cross */
.variant-shield.active .shield-ridge { animation: engrave-march 6s linear infinite; }
.variant-shield.active .shield-gem::after {
  animation: gem-sparkle 2.2s ease-in-out infinite; background: linear-gradient(90deg, transparent, #fff 50%, transparent);
  content: ""; height: 2px; left: -6px; position: absolute; top: 12px; width: 38px;
}
.variant-shield.active .shield-plate::after {
  animation: shield-tilt-sheen 5s ease-in-out infinite; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
  content: ""; inset: 0; position: absolute;
}

/* 4 · NOIR STEEL — dial tick steps, edge chase, LED heartbeat */
.variant-noir.active .noir-dial.d1 { animation: dial-tick 2s steps(12) infinite; }
.variant-noir.active .noir-dial.d3 { animation: dial-tick 2s steps(12) 1s infinite reverse; }
.variant-noir.active .noir-edge { animation: edge-chase 2.4s linear infinite; background: linear-gradient(180deg, rgba(140,200,255,0.9), transparent 40%, rgba(140,200,255,0.9)); background-size: 100% 60px; }
.variant-noir.active .noir-strap { animation: strap-tighten 4.6s ease-in-out infinite; }

/* 5 · AEGIS — core flare, orbit satellite, readout flicker */
.variant-hitech.active .hitech-core::after {
  animation: core-flare 2.4s ease-out infinite; border: 1px solid rgba(140,230,255,0.8);
  border-radius: 50%; content: ""; height: 26px; left: 50%; position: absolute; top: 13px; width: 26px; transform: translateX(-50%);
}
.variant-hitech.active .hitech-orbit::after {
  animation: hitech-orbit-spin 9s linear infinite reverse; background: #9fe8ff; border-radius: 50%;
  box-shadow: 0 0 12px #6edcff; content: ""; height: 8px; left: 50%; position: absolute; top: -4px; width: 8px;
}
.variant-hitech.active .hread { animation-duration: 0.9s; }

/* 6 · ASYLUM — lamp sway, chain rattle, fog pulse already present + stitch crawl */
.variant-asym.active .jacket-stitch { animation: stitch-crawl 3s linear infinite; }
.variant-asym.active .asylum-chain .link { animation: chain-rattle 1.8s ease-in-out infinite; }
.variant-asym.active .asylum-chain .link.l2 { animation-delay: 0.25s; } .variant-asym.active .asylum-chain .link.l3 { animation-delay: 0.5s; }
.variant-asym.active .cellplate::after { animation: keyhole-glow 3s ease-in-out infinite; content: "▦"; color: rgba(255,255,255,0.6); font-size: 18px; left: 20px; position: absolute; top: 8px; }

/* 7 · DUNGEON — spark burst, band heat cycle, rivet tick */
.variant-dungeon.active .dungeon-band { animation: band-heat 3.8s ease-in-out infinite; }
.variant-dungeon.active .dungeon-band.db2 { animation-delay: 1.9s; }
.variant-dungeon.active .dungeon-plate::after {
  animation: spark-burst 2.6s linear infinite; background-image: radial-gradient(circle, #ffd27a 0 1.5px, transparent 2px);
  background-size: 34px 34px; content: ""; inset: 0; position: absolute; opacity: 0.8;
}

/* 8 · LEATHER — stitch march, grain flex, eyelet glint */
.variant-leather.active .leather-stitchline { animation: stitch-march 2.4s linear infinite; }
.variant-leather.active .leather-panel::after {
  animation: grain-flex 4s ease-in-out infinite; background: repeating-linear-gradient(35deg, transparent 0 14px, rgba(0,0,0,0.14) 14px 16px);
  content: ""; inset: 0; position: absolute;
}
.variant-leather.active .leather-eyelet { animation: eyelet-glint 2.8s ease-in-out infinite; }
.variant-leather.active .leather-eyelet.le2 { animation-delay: 0.9s; } .variant-leather.active .leather-eyelet.le3 { animation-delay: 1.8s; }

/* 9 · TITAN — brushed sweep already + groove light chase, screw tick */
.variant-titan.active .titan-groove { animation: groove-chase 2.6s linear infinite; background: linear-gradient(180deg, rgba(20,26,31,0.55) 0 60%, rgba(255,255,255,0.9) 60% 62%, rgba(20,26,31,0.55) 62%); background-size: 100% 40px; }
.variant-titan.active .titan-plate::after {
  animation: shield-sheen-move 4s ease-in-out infinite; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.5) 50%, transparent 60%);
  content: ""; height: 100%; left: -70%; position: absolute; top: 0; width: 240%;
}

/* 10 · BAROQUE — scroll shimmer, gem flare, heart thump glow */
.variant-baroque.active .baroque-scroll { animation: scroll-shimmer 3.4s ease-in-out infinite; }
.variant-baroque.active .baroque-scroll.bs2 { animation-delay: 1.7s; }
.variant-baroque.active .baroque-gem::after {
  animation: gem-flare 2.6s ease-in-out infinite; border: 1px solid rgba(255,255,255,0.9); border-radius: 50%;
  content: ""; inset: 3px; position: absolute;
}
.variant-baroque.active .baroque-heart { animation: heart-thump 1.8s ease-in-out infinite; }

/* 11 · CARBON — neon flicker, vein surge, pad ping */
.variant-carbon.active .carbon-plate { animation: neon-flicker 5s steps(1) infinite; }
.variant-carbon.active .carbon-vein { animation-duration: 1.6s; }
.variant-carbon.active .carbon-pad::after {
  animation: pad-ping 2s ease-out infinite; border: 1px solid rgba(0,255,220,0.8); border-radius: 50%;
  content: ""; inset: 0; position: absolute;
}

/* 12 · VOYAGER — weave tighten, tag glint, ring rock */
.variant-voyager.active .voyager-webbing { animation: weave-tighten 3.8s ease-in-out infinite; }
.variant-voyager.active .voyager-webbing.vw2 { animation-delay: 1.9s; }
.variant-voyager.active .voyager-tag::after {
  animation: tag-glint 3s ease-in-out infinite; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.9) 50%, transparent 70%);
  content: ""; inset: 0; position: absolute;
}
.variant-voyager.active .voyager-pack::after {
  animation: grain-flex 5s ease-in-out infinite; background: repeating-linear-gradient(-30deg, transparent 0 12px, rgba(0,0,0,0.12) 12px 14px);
  content: ""; inset: 0; position: absolute;
}

@keyframes part-in { from { opacity: 0; transform: translateY(26px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes stage-shadow { 0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.8; } 50% { transform: translateX(-50%) scaleX(0.82); opacity: 0.5; } }
@keyframes dust-rise { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 -180px, 0 -260px, 0 -340px; } }
@keyframes keyhole-glow { 0%, 100% { filter: brightness(1); box-shadow: 0 0 0 rgba(255,220,150,0); } 50% { filter: brightness(1.6); box-shadow: 0 0 10px rgba(255,220,150,0.9); } }
@keyframes shackle-glint { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes rivet-chase { 0%, 100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.7); transform: scale(1.25); box-shadow: 0 0 10px rgba(255,240,195,0.9); } }
@keyframes vent-breathe { 0%, 100% { transform: scaleY(1); filter: brightness(1); } 50% { transform: scaleY(1.12); filter: brightness(1.4); } }
@keyframes ridge-tick { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(0.4deg); } 75% { transform: rotate(-0.4deg); } }
@keyframes bar-shimmer { 0%, 100% { filter: brightness(0.9); } 50% { filter: brightness(1.6); } }
@keyframes ring-orbit { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes cap-spin { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes engrave-march { to { filter: hue-rotate(8deg) brightness(1.15); } from { filter: hue-rotate(0) brightness(1); } }
@keyframes gem-sparkle { 0%, 100% { transform: scaleX(0.3); opacity: 0; } 50% { transform: scaleX(1); opacity: 1; } }
@keyframes shield-tilt-sheen { 0%, 100% { transform: translateX(0); opacity: 0.4; } 50% { transform: translateX(12%); opacity: 1; } }
@keyframes dial-tick { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes edge-chase { from { background-position: 0 -60px; } to { background-position: 0 60px; } }
@keyframes strap-tighten { 0%, 100% { transform: scaleX(1); filter: brightness(1); } 50% { transform: scaleX(0.96); filter: brightness(1.25); } }
@keyframes core-flare { 0% { opacity: 0.9; transform: translateX(-50%) scale(0.6); } 100% { opacity: 0; transform: translateX(-50%) scale(2.6); } }
@keyframes stitch-crawl { from { filter: brightness(1); } to { filter: brightness(1.3); } }
@keyframes chain-rattle { 0%, 100% { transform: rotate(6deg) translateX(0); } 50% { transform: rotate(-6deg) translateX(1px); } }
@keyframes band-heat { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.5) sepia(0.6); } }
@keyframes spark-burst { 0% { transform: translateY(20px); opacity: 0; } 30% { opacity: 0.9; } 100% { transform: translateY(-140px); opacity: 0; } }
@keyframes stitch-march { from { filter: brightness(1); } to { filter: brightness(1.5); } }
@keyframes grain-flex { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.02); opacity: 1; } }
@keyframes eyelet-glint { 0%, 100% { box-shadow: 0 0 3px rgba(255,225,180,0.4); } 50% { box-shadow: 0 0 12px rgba(255,225,180,1); } }
@keyframes groove-chase { from { background-position: 0 -40px; } to { background-position: 0 40px; } }
@keyframes scroll-shimmer { 0%, 100% { transform: rotate(0); filter: brightness(1); } 50% { transform: rotate(6deg); filter: brightness(1.5); } }
@keyframes gem-flare { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.25); opacity: 1; } }
@keyframes heart-thump { 0%, 100% { transform: scale(1); filter: brightness(1); } 30% { transform: scale(1.06); filter: brightness(1.3); } 60% { transform: scale(0.99); } }
@keyframes neon-flicker { 0%, 91%, 94%, 100% { filter: brightness(1); } 92%, 93% { filter: brightness(1.6); } }
@keyframes pad-ping { 0% { opacity: 0.9; transform: scale(0.7); } 100% { opacity: 0; transform: scale(1.8); } }
@keyframes weave-tighten { 0%, 100% { transform: scaleY(1); filter: brightness(1); } 50% { transform: scaleY(1.03); filter: brightness(1.2); } }
@keyframes tag-glint { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }

/* 13 · ATELIER REAL — perforation breathe wave, bridge flex, crotch creak, lock glints */
.variant-real.active .real-hole { animation: real-perf-breathe 3.4s ease-in-out infinite; }
.variant-real.active .h2, .variant-real.active .h5, .variant-real.active .h8, .variant-real.active .h11 { animation-delay: 0.4s; }
.variant-real.active .h3, .variant-real.active .h6, .variant-real.active .h9, .variant-real.active .h12 { animation-delay: 0.8s; }
.variant-real.active .real-bridge { animation: real-bridge-flex 4s ease-in-out infinite; transform-origin: top center; }
.variant-real.active .bridge-right { animation-delay: 2s; }
.variant-real.active .real-crotch { animation: real-crotch-creak 5s ease-in-out infinite; }
.variant-real.active .real-center-rib { animation: real-rib-glint 3.2s ease-in-out infinite; }
.variant-real.active .real-stitch { animation: real-stitch-march 2.6s linear infinite; }
@keyframes real-perf-breathe { 0%, 100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.5); transform: scale(1.15); } }
@keyframes real-bridge-flex { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } }
@keyframes real-crotch-creak { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(0.8deg); } 75% { transform: rotate(-0.8deg); } }
@keyframes real-rib-glint { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.8); } }
@keyframes real-stitch-march { from { opacity: 0.7; } to { opacity: 1; } }