/* Engranajes industriales: reproduccion del prototipo ATB_engranajes_final_v2. */
.atb-gears {
    position: fixed;
    z-index: 1000;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 480ms ease, visibility 0s linear 480ms;
}

.atb-gears.is-visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.atb-gear {
    position: fixed;
    bottom: 24px;
    width: 230px;
    height: 230px;
    filter: drop-shadow(5px 8px 3px #111);
    pointer-events: none;
    transform: scale(.6);
    transform-origin: left bottom;
    --angle: 0deg;
    --patina: 1;
}

.atb-gear--down,
.atb-gear--up { left: -9999px; }
.atb-gear .rotor { position: absolute; inset: 0; transform: rotate(var(--angle)); will-change: transform; }
.atb-gear .teeth { position: absolute; inset: 0; background: linear-gradient(128deg, #c2bfb3 0%, #74736c 13%, #45453f 26%, #a29e91 41%, #5b5a53 57%, #c0bbae 74%, #55534c 100%); clip-path: path("M 115 5 C 119 5 121 8 122 12 L 124 23 Q 134 24 143 27 L 151 18 Q 154 15 158 17 L 171 24 Q 174 27 172 31 L 167 42 Q 175 48 182 55 L 194 51 Q 198 50 201 54 L 209 66 Q 211 70 208 73 L 198 81 Q 202 91 204 100 L 216 103 Q 220 104 220 109 L 220 122 Q 220 126 216 127 L 204 130 Q 202 140 198 149 L 208 157 Q 211 160 209 164 L 201 176 Q 198 180 194 179 L 182 175 Q 175 182 167 188 L 172 199 Q 174 203 171 206 L 158 213 Q 154 215 151 212 L 143 203 Q 134 206 124 207 L 122 219 Q 121 223 115 223 L 108 223 Q 104 223 103 219 L 101 207 Q 91 206 82 203 L 74 212 Q 71 215 67 213 L 54 206 Q 51 203 53 199 L 58 188 Q 50 182 43 175 L 31 179 Q 27 180 24 176 L 16 164 Q 14 160 17 157 L 27 149 Q 23 140 21 130 L 9 127 Q 5 126 5 122 L 5 109 Q 5 104 9 103 L 21 100 Q 23 91 27 81 L 17 73 Q 14 70 16 66 L 24 54 Q 27 50 31 51 L 43 55 Q 50 48 58 42 L 53 31 Q 51 27 54 24 L 67 17 Q 71 15 74 18 L 82 27 Q 91 24 101 23 L 103 12 Q 104 5 108 5 Z"); }
.atb-gear .teeth::after { position: absolute; inset: 0; background: repeating-linear-gradient(117deg, transparent 0, transparent 12px, #fff2 12.5px, transparent 13px, transparent 27px, #0003 28px, transparent 29px), radial-gradient(ellipse at 75% 30%, #aa613a55, transparent 35%), radial-gradient(ellipse at 23% 75%, #281a0d77, transparent 38%); content: ''; opacity: var(--patina); }
.atb-gear .body { position: absolute; inset: 24px; border: 5px solid #242320; border-radius: 50%; background: linear-gradient(140deg, #b7b3a6, #57564f 25%, #999587 48%, #464640 72%, #b2ac9c); box-shadow: inset 0 0 0 4px #b0aca0, inset 0 0 0 9px #45443f, 0 0 0 2px #a4a094; }
.atb-gear .body::after { position: absolute; inset: 0; border-radius: 50%; background: repeating-linear-gradient(24deg, transparent 0 8px, #100d0a33 9px, transparent 10px, transparent 20px, #fff2 21px, transparent 22px), radial-gradient(ellipse at 24% 76%, #42291399, transparent 45%), radial-gradient(ellipse at 78% 22%, #e0d5b633, transparent 35%); content: ''; opacity: var(--patina); }
.atb-gear .recess { position: absolute; inset: 49px; border: 5px solid #aaa69a; border-radius: 50%; background: #242422; box-shadow: inset 0 0 0 5px #111, 0 0 0 3px #4a4944; }
.atb-gear .spoke { position: absolute; top: 49px; left: calc(50% - 9px); width: 18px; height: 132px; border: 2px solid #282723; border-radius: 5px; background: linear-gradient(90deg, #34332e, #c0b8a6 30%, #777267 65%, #302e29); transform: rotate(var(--a)); }
.atb-gear .bolt { position: absolute; top: 36px; left: calc(50% - 6px); width: 12px; height: 12px; border: 2px solid #242320; border-radius: 50%; background: #b7b1a2; box-shadow: inset 2px 1px #ded8c8; transform: rotate(var(--a)); transform-origin: 6px 79px; }
.atb-gear .hub { position: absolute; inset: 76px; border: 6px solid #b7b2a4; border-radius: 50%; background: linear-gradient(135deg, #77736a, #343330 60%, #a9a394); box-shadow: 0 0 0 4px #222, inset 0 0 0 4px #222; }
.atb-gear .button { position: absolute; top: 77px; left: 77px; display: grid; width: 76px; height: 76px; padding: 0; border: 4px solid #bdb6a5; border-radius: 50%; background: radial-gradient(circle at 32% 25%, #64615a, #343330 65%, #1b1a18); box-shadow: 0 0 0 5px #161615, inset 0 0 0 3px #777369; cursor: pointer; place-items: center; pointer-events: auto; }
.atb-gear .button:hover { background: radial-gradient(circle at 32% 25%, #77736b, #45423c 65%, #25231f); }
.atb-gear .button:active { transform: translateY(2px); }
.atb-gear .button:focus-visible { outline: 3px solid #f4e8c7; outline-offset: 7px; }
.atb-gear .arrow { position: relative; display: block; width: 43px; height: 47px; filter: drop-shadow(2px 3px 1px #090807); }
.atb-gear .arrow::before { position: absolute; inset: 0; background: linear-gradient(110deg, #494740 0%, #d3ccba 21%, #8f8b80 46%, #ddd6c5 64%, #55524b 100%); clip-path: polygon(50% 0, 100% 43%, 69% 43%, 69% 100%, 31% 100%, 31% 43%, 0 43%); content: ''; }
.atb-gear .arrow::after { position: absolute; inset: 3px 4px 4px; background: linear-gradient(110deg, #aaa597, #77736a 38%, #4c4943 78%, #898478); clip-path: polygon(50% 0, 100% 42%, 68% 42%, 68% 100%, 32% 100%, 32% 42%, 0 42%); content: ''; opacity: .72; }
.atb-gear--down .arrow { transform: rotate(180deg); }

/* Vapor ambiental: fijo al viewport y sin participar en el layout. */
.atb-steam { position: fixed; z-index: 999; inset: 0; overflow: hidden; pointer-events: none; }
.atb-steam__puff { position: absolute; bottom: -28px; width: 42px; height: 42px; }
.atb-steam__puff--left { left: calc(-8px + var(--steam-shift, 0px)); }
.atb-steam__puff--right { right: calc(-8px + var(--steam-shift, 0px)); }
.atb-steam__volume { position: absolute; left: 50%; bottom: 0; width: var(--steam-size); height: var(--steam-size); clip-path: polygon(8% 53%, 16% 28%, 34% 11%, 59% 5%, 84% 19%, 96% 43%, 88% 67%, 73% 91%, 46% 97%, 21% 84%); background: radial-gradient(ellipse 42% 54% at 34% 48%, rgba(250, 248, 240, .58) 0, rgba(238, 235, 225, .35) 55%, transparent 100%), radial-gradient(ellipse 48% 38% at 70% 58%, rgba(226, 223, 213, .28) 0, transparent 100%); opacity: 0; transform: translateX(-50%); will-change: transform, opacity; animation: atb-steam-volume var(--steam-duration) linear forwards; animation-delay: var(--steam-delay); }
@keyframes atb-steam-volume { 0% { opacity: 0; transform: translate(calc(-50% + var(--steam-start-x)), 8px) rotate(var(--steam-turn-start)) scale(.19,.7); } 12% { opacity: var(--steam-opacity); transform: translate(calc(-50% + var(--steam-early-drift)), var(--steam-early-rise)) rotate(var(--steam-turn-early)) scale(.58,.82); } 54% { opacity: .35; transform: translate(calc(-50% + var(--steam-mid-drift)), var(--steam-mid-rise)) rotate(var(--steam-turn)) scale(1.45,1.08); } 100% { opacity: 0; transform: translate(calc(-50% + var(--steam-drift)), var(--steam-rise)) rotate(var(--steam-turn-end)) scale(2.45,1.62); } }

@media (prefers-reduced-motion: reduce) {
    .atb-gears { transition: none; }
    .atb-steam { display: none; }
}