/* Living mechanical identity and service demonstrations. */
.hero{position:relative;isolation:isolate;overflow:hidden}.hero-grid{position:relative;z-index:2}.ambient-car{position:absolute;width:min(1500px,120vw);right:-20%;bottom:-2%;opacity:.28;z-index:0;transform:rotate(-4deg);pointer-events:none}.ambient-body{animation:carIdle 6s ease-in-out infinite}.ambient-wheel{animation:ambientWheel 45s linear infinite}.headlight{animation:headlightGlow 4s ease-in-out infinite}.ambient-sweep{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(112deg,transparent 38%,rgba(225,233,255,.045) 49%,transparent 57%);animation:surfaceSweep 9s ease-in-out infinite}.hero-copy{position:relative}.hero-visual{background:radial-gradient(ellipse,rgba(4,4,5,.6),transparent 70%)}
@keyframes carIdle{50%{transform:translateY(-4px)}}@keyframes ambientWheel{to{transform:rotate(360deg)}}@keyframes headlightGlow{50%{stroke:#ff6b55;filter:drop-shadow(0 0 13px #ef3327)}}@keyframes surfaceSweep{0%,15%{transform:translateX(-80%)}75%,100%{transform:translateX(80%)}}
.kinetic-brand{aspect-ratio:960/470;width:min(1080px,95vw);filter:drop-shadow(0 10px 30px rgba(222,39,27,.09))}.kinetic-brand svg{width:100%;height:100%;overflow:visible}.intro{background:radial-gradient(ellipse at 50% 55%,#151014,#030304 65%)}.intro-gear,.intro-engine,.intro-lettering{opacity:0}.intro-car{opacity:1}.draw-car{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1400;stroke-dashoffset:1400}.silver-line{stroke:url(#chrome);stroke-width:9}.red-line{stroke:#ec3828;stroke-width:10}.intro.playing .intro-engine{animation:mechanicalEnter .8s ease both}.intro.playing .intro-gear{animation:gearEnter 1s cubic-bezier(.16,.8,.24,1) .8s both}.intro.playing .moving-piston{animation:pistonCycle .8s ease-in-out 1.5s infinite;transform-origin:190px 235px}.intro.playing .draw-car{animation:drawCar 1.7s cubic-bezier(.4,0,.2,1) 1.6s both}.intro.playing .intro-lettering{animation:wordmarkEnter 1s cubic-bezier(.16,.8,.24,1) 3s both}.intro.playing .engine-pulse{animation:enginePulse 1.3s linear 3.6s infinite}.engine-pulse{opacity:0;stroke-dasharray:180 800}.intro-caption{animation:none;opacity:1;color:#818189;bottom:14vh}.intro-progress{position:absolute;left:20%;right:12%;bottom:-16px;height:2px;background:#2c2325;overflow:hidden}.intro-progress span{display:block;width:100%;height:100%;background:#f14435;transform-origin:left;transform:scaleX(0)}.intro.playing .intro-progress span{animation:introDuration 6.2s linear both}.intro.hide .moving-piston,.intro.hide .engine-pulse{animation-play-state:paused}
@keyframes mechanicalEnter{from{opacity:0;transform:translateY(-100px)}to{opacity:1;transform:none}}@keyframes gearEnter{from{opacity:0;transform:translateX(-90px)}to{opacity:1;transform:none}}@keyframes pistonCycle{50%{transform:translateY(-12px)}}@keyframes drawCar{to{stroke-dashoffset:0}}@keyframes wordmarkEnter{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}@keyframes enginePulse{0%{opacity:.2;stroke-dashoffset:980}50%{opacity:.65}100%{opacity:.2;stroke-dashoffset:0}}@keyframes introDuration{to{transform:scaleX(1)}}
.meister-seal{display:inline-flex;align-items:center;gap:10px;margin-top:12px;border:1px solid #59332c;color:#e1cac4;background:#201411;border-radius:30px;padding:12px 18px;font-size:.83rem;font-weight:700}.meister-seal span{color:#ff7760;font-size:1.1rem}
.service-lab{padding-top:20px;background:linear-gradient(#070707,#0b0c0f)}.lab-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.lab-card{padding:24px;border:1px solid #2b2e34;border-radius:22px;background:linear-gradient(155deg,#14161b,#0d0e11);overflow:hidden}.lab-heading{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:.6rem;letter-spacing:.12em;color:#838b98;min-height:28px}.lab-status{font-size:.61rem;color:#c2c9d2;letter-spacing:0;text-align:right;max-width:145px}.lab-stage{height:235px;position:relative;overflow:hidden;margin:20px -8px 18px;border-bottom:1px solid #252931;background:radial-gradient(ellipse at center,#20252d80,transparent 70%)}.lab-stage>svg{width:100%;height:100%;display:block}.lab-card h3{font-size:1.25rem;letter-spacing:-.025em;margin:0 0 14px}.lab-card p{font-size:.9rem;line-height:1.7;color:#9da5b1;margin:0 0 22px;min-height:76px}.lab-start{position:relative;width:100%;border:1px solid #42322f;color:#eee;background:#24130f;cursor:pointer;border-radius:11px;padding:13px 15px;text-align:left;font-weight:700;font-size:.84rem;transition:background .2s,border-color .2s}.lab-start:hover{background:#38201a;border-color:#9d4437}.lab-start>span{float:right;color:#ff7864}.lab-card small{display:block;margin-top:13px;font-size:.65rem;line-height:1.5;color:#7b8390}.lab-card.completed .lab-status{color:#80d5b1}
.inspection-beam{opacity:0}.lab-card.running .inspection-beam{opacity:.8;animation:inspectionScan 2.4s ease-in-out both}.inspection-list{display:flex;justify-content:center;gap:12px;position:absolute;bottom:15px;left:0;right:0;font-size:.67rem;color:#788491}.inspection-list span{border:1px solid #3b424c;border-radius:20px;padding:5px 8px;transition:color .3s,border-color .3s}.inspection-list span.passed{color:#8ee0bb;border-color:#3d8967}.inspection-list span.passed:before{content:'✓ ';color:#86ddb4}.inspection-badge{position:absolute;right:9%;top:15%;font-size:2rem;font-weight:900;width:100px;height:100px;border-radius:50%;border:2px solid #83d6b0;background:#10241d;color:#a1e9c6;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:scale(.5) rotate(-18deg);transition:opacity .5s,transform .5s;box-shadow:0 0 30px #5bdd9820}.inspection-badge span{font-size:.48rem;letter-spacing:.1em;margin-top:4px}.lab-card.completed .inspection-badge{opacity:1;transform:scale(1) rotate(-8deg)}@keyframes inspectionScan{0%{transform:translateX(25px);opacity:0}10%{opacity:.9}90%{opacity:.9}100%{transform:translateX(310px);opacity:0}}
.climate-temp{position:absolute;right:12px;top:9px;display:flex;flex-direction:column;text-align:right}.climate-temp strong{font-size:2.15rem;font-weight:800;color:#e1e8ee;font-variant-numeric:tabular-nums}.climate-temp span{font-size:.45rem;color:#7f8c98;letter-spacing:.1em}.gas-flow{stroke-dasharray:8 14;opacity:0}.lab-card.running .gas-flow{opacity:1;animation:gasFlow .6s linear infinite}.cool-air{opacity:0}.lab-card.running .cool-air,.lab-card.completed .cool-air{opacity:.8;animation:airFlow 1.3s ease-in-out infinite}.pressure-needle{transform-origin:65px 142px;transition:transform 3.8s ease}.lab-card.running .pressure-needle,.lab-card.completed .pressure-needle{transform:rotate(106deg)}.fill-track{position:absolute;left:16px;right:16px;bottom:14px;height:3px;background:#263641;border-radius:10px}.fill-track span{display:block;height:100%;width:0;background:#8cd9f3;box-shadow:0 0 12px #77c6ed;transition:width 4.4s ease}.lab-card.running .fill-track span,.lab-card.completed .fill-track span{width:100%}.lab-card.completed .climate-temp strong{color:#8ad8f0}@keyframes gasFlow{to{stroke-dashoffset:-44}}@keyframes airFlow{0%,100%{transform:translateY(0);opacity:.3}50%{transform:translateY(9px);opacity:.9}}
.wheel-stage{perspective:800px}.wheel-machine{position:absolute;left:43%;top:35%;width:75px;height:115px;border-radius:6px;background:linear-gradient(90deg,#424955,#232931);border:1px solid #5a626e;transition:opacity .3s}.wheel-machine>span{position:absolute;left:0;right:0;bottom:18px;height:14px;background:#c5382a}.machine-arm{position:absolute;right:-15px;top:-48px;width:20px;height:80px;background:#626b77;border-radius:4px;transform-origin:bottom;transition:transform 1s}.demo-rim{position:absolute;width:118px;height:118px;border-radius:50%;left:50%;top:36%;transform:translate(-50%,-50%);border:9px solid #78828e;background:conic-gradient(#181e26 0deg 34deg,#afb8c6 34deg 46deg,#181e26 46deg 94deg,#afb8c6 94deg 106deg,#181e26 106deg 154deg,#afb8c6 154deg 166deg,#181e26 166deg 214deg,#afb8c6 214deg 226deg,#181e26 226deg 274deg,#afb8c6 274deg 286deg,#181e26 286deg 334deg,#afb8c6 334deg 346deg,#181e26 346deg);box-shadow:inset 0 0 0 5px #454e5d}.demo-rim>div{position:absolute;inset:43%;border-radius:50%;background:#c7cfd9}.demo-tire{position:absolute;left:50%;top:36%;width:154px;height:154px;border:24px solid #14171c;border-radius:50%;transform:translate(-130%,-50%) rotateY(30deg);box-shadow:inset 0 0 0 2px #535c68,0 0 0 3px #37404b;background:transparent;opacity:1;transition:transform 1.4s ease-in-out,border-color .4s}.lab-card.running .demo-tire,.lab-card.completed .demo-tire{transform:translate(-50%,-50%) rotateY(0deg)}.lab-card.running .machine-arm{transform:rotate(-40deg)}.wheel-route{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:.5rem;letter-spacing:.1em;color:#828e9e}.wheel-lugs{position:absolute;left:50%;top:36%;width:35px;height:35px;transform:translate(-50%,-50%);opacity:0}.wheel-lugs i{position:absolute;width:6px;height:6px;background:#f0a595;border-radius:50%}.wheel-lugs i:nth-child(1){left:15px;top:0}.wheel-lugs i:nth-child(2){right:0;top:12px}.wheel-lugs i:nth-child(3){right:6px;bottom:0}.wheel-lugs i:nth-child(4){left:6px;bottom:0}.wheel-lugs i:nth-child(5){left:0;top:12px}.lab-card[data-mode="umstecken"] .wheel-machine{opacity:0}.lab-card[data-mode="umstecken"] .wheel-lugs{opacity:1}.lab-card[data-mode="umstecken"] .demo-rim{border-color:#bdc4d0}.lab-card[data-mode="umstecken"].running .demo-tire{animation:swapWheel 3.8s ease both}.lab-card[data-mode="umstecken"].running .wheel-lugs{animation:lugTurn 1.2s linear 2.5s 1}.lab-card.balancing .demo-rim{animation:balanceWheel 1s linear infinite}.tire-modes{display:flex;gap:8px}.tire-modes .lab-start{padding:13px 10px;font-size:.76rem;white-space:nowrap}.tire-modes .selected{background:#452219;border-color:#aa5140}.lab-card.completed .demo-tire{border-color:#1f242c}@keyframes swapWheel{0%{transform:translate(-50%,-50%)}30%{transform:translate(-135%,-50%) rotateY(38deg);opacity:.2}48%{transform:translate(30%,-50%) rotateY(-38deg);opacity:0}65%{opacity:1}100%{transform:translate(-50%,-50%);opacity:1}}@keyframes lugTurn{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes balanceWheel{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(max-width:1050px){.lab-grid{grid-template-columns:1fr 1fr}.lab-card:last-child{grid-column:1/-1;max-width:560px;width:100%;justify-self:center}.ambient-car{width:1400px;right:-60%;opacity:.2}}@media(max-width:640px){.lab-grid{grid-template-columns:1fr}.lab-card:last-child{grid-column:auto;max-width:none}.lab-card{padding:22px}.lab-stage{height:250px}.lab-card p{min-height:0}.ambient-car{width:1050px;right:-540px;bottom:18%;opacity:.22}.hero h1{font-size:clamp(2.3rem,10vw,3.25rem)}.intro-caption{bottom:22vh;font-size:.55rem;letter-spacing:.18em}.kinetic-brand{width:100vw}.intro-progress{bottom:-24px}.meister-seal{padding:10px 12px;font-size:.76rem}.service-lab{padding-top:0}.lab-heading{font-size:.58rem}}
@media(prefers-reduced-motion:reduce){.ambient-body,.ambient-wheel,.headlight,.ambient-sweep,.gas-flow,.cool-air,.inspection-beam,.demo-rim,.demo-tire,.wheel-lugs{animation:none!important;transition:none!important}.gas-flow{opacity:.7}.intro{display:none!important}.lab-card.running .inspection-beam{opacity:0}.fill-track span,.pressure-needle{transition:none}.lab-card.completed .inspection-badge{transition:none}}
