/* Um portão de enrolar: o motor dá a partida e a oficina se abre. */
.garage-opening[hidden]{display:none}
.garage-opening{position:fixed;inset:0;z-index:1000;overflow:hidden;isolation:isolate;animation:opening-release 2.9s step-end both}
.garage-door{position:absolute;inset:0;background:repeating-linear-gradient(0deg,#111923 0,#111923 47px,#19232e 48px,#080f17 50px,#111923 52px);border-bottom:5px solid #2979e8;box-shadow:0 20px 45px #0008;animation:garage-rise 1.15s cubic-bezier(.65,0,.2,1) 1.55s both;will-change:transform}
.garage-door::before,.garage-door::after{content:"";position:absolute;top:0;bottom:0;width:9px;background:#080d14;border-inline:1px solid #283442}
.garage-door::before{left:18px}.garage-door::after{right:18px}
.garage-scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px 32px 70px}
.garage-brand{width:clamp(200px,20vw,285px);height:auto;mix-blend-mode:screen;margin-bottom:24px}
.starting-engine{width:clamp(240px,29vw,365px);height:auto;overflow:visible;animation:engine-vibration .16s linear 10}
.motor-frame{stroke:#7b91a8;stroke-width:2;stroke-linejoin:round;fill:#111923}
.motor-frame .engine-head{fill:#203d60;stroke:#5687bb}
.piston{fill:#dce9f5;stroke:#dce9f5;stroke-width:2}
.piston-head{animation:piston-cycle .36s ease-in-out 5;animation-direction:var(--piston-direction,alternate)}
.piston-b{--piston-direction:alternate-reverse}
.piston-rings{stroke:#243a50;stroke-width:2}
.connecting-rod{fill:#7f9ab4;stroke:#7f9ab4;transform-box:fill-box;transform-origin:center bottom;animation:rod-cycle .36s ease-in-out 5;animation-direction:var(--piston-direction,alternate)}
.rod-joint{fill:#111923;stroke:#9ab2c8;stroke-width:3}
.crankshaft{stroke:#7693ad;stroke-width:7}
.crank{fill:#14283f;stroke:#4894f2;stroke-width:2;animation:crank-cycle .72s linear 3}
.garage-message{position:relative;margin-top:22px;width:100%;height:42px;text-align:center;font-size:clamp(22px,2.4vw,30px);font-weight:600;letter-spacing:-.03em;color:#edf3fa}
.garage-message span{position:absolute;inset:0}
.engine-message{animation:engine-message-out .22s ease 1.12s both}
.welcome-message{animation:welcome-message-in .3s ease 1.23s both}
.garage-handle{position:absolute;bottom:30px;left:calc(50% - 32px);width:64px;height:12px;border:2px solid #64788e;border-bottom:4px solid #64788e;border-radius:3px}
.opening-skip{position:absolute;right:max(40px,env(safe-area-inset-right));bottom:max(30px,env(safe-area-inset-bottom));min-height:44px;padding:10px 14px;border:1px solid #4c6077;background:#111923;color:#edf3fa;font:inherit;font-size:14px;cursor:pointer;animation:engine-message-out .18s ease 1.55s both}
.opening-skip:hover{background:#203d60}.opening-skip:focus-visible{outline:2px solid #edf3fa;outline-offset:4px}
@keyframes piston-cycle{from{transform:translateY(0)}to{transform:translateY(24px)}}
@keyframes rod-cycle{from{transform:scaleY(1)}to{transform:scaleY(.7474)}}
@keyframes crank-cycle{to{transform:rotate(360deg)}}
@keyframes engine-vibration{0%,100%{transform:translateY(0)}50%{transform:translateY(.6px)}}
@keyframes garage-rise{0%{transform:translateY(0)}12%{transform:translateY(-1.5%)}100%{transform:translateY(-105%)}}
@keyframes engine-message-out{to{opacity:0}}
@keyframes welcome-message-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes opening-release{from{visibility:visible}to{visibility:hidden;pointer-events:none}}
@media(max-width:600px){.garage-door::before{left:8px}.garage-door::after{right:8px}.garage-scene{padding-inline:28px;padding-bottom:80px}.garage-brand{margin-bottom:30px}.starting-engine{width:min(300px,85vw)}.opening-skip{right:24px;bottom:24px}.garage-handle{bottom:92px}}
@media(max-height:500px){.garage-scene{padding:20px;flex-direction:row;gap:25px}.garage-brand{width:180px;margin:0}.starting-engine{width:210px}.garage-message{position:absolute;bottom:42px;font-size:20px}.garage-handle{display:none}}
@media(prefers-reduced-motion:reduce){.garage-opening{display:none}}