/* Intro de entrada: pantalla negra y amarilla con carro, logo y título que se arma letra por letra.
   Solo existe mientras <html> tiene la clase intro-on (una vez por sesión, nunca con "reducir movimiento"). */
#intro{display:none}
html.intro-on{overflow:hidden}
html.intro-on #intro{display:block;position:fixed;inset:0;z-index:10000;overflow:hidden;color:#fff;-webkit-tap-highlight-color:transparent}
.in-half{position:absolute;left:0;right:0;height:50.2%;background:#0E0E0C;z-index:0}
.in-top{top:0;border-bottom:8px solid transparent}
.in-bot{bottom:0;border-top:8px solid transparent}
.in-half::before{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,217,59,.16) 1.4px,transparent 1.6px) 0 0/28px 28px}

.in-band{position:absolute;left:0;right:0;height:30px;z-index:3;background:repeating-linear-gradient(-45deg,#FFD93B 0 22px,#0E0E0C 22px 44px);background-size:62px 62px;animation:inBand .9s linear infinite}
.in-band.t{top:0}.in-band.b{bottom:0}
@keyframes inBand{to{background-position:62px 0}}

.in-stage{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(10px,2.2vh,22px);padding:0 16px 8vh;text-align:center}
.in-logo-wrap{position:relative;width:clamp(120px,26vmin,210px);aspect-ratio:1}
.in-ring{position:absolute;inset:-4%;border-radius:50%;border:6px solid #FFD93B;opacity:0}
.in-logo{position:relative;width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 8px 0 rgba(0,0,0,.5))}
.in-seal{position:absolute;right:-26%;top:-8%;width:clamp(64px,10vmin,92px);aspect-ratio:1;border-radius:50%;background:#FFD93B;color:#0E0E0C;border:3px solid #fff;display:grid;place-items:center;align-content:center;line-height:.9;font:900 clamp(1.5rem,5vmin,2.2rem) Archivo,sans-serif;font-stretch:125%;box-shadow:4px 4px 0 #000;opacity:0}
.in-seal small{display:block;font:800 .58rem Archivo,sans-serif;letter-spacing:.14em;margin-top:2px}
.in-title{margin:0;font:900 clamp(2.1rem,8.6vw,5.4rem)/.95 Archivo,sans-serif;font-stretch:125%;text-transform:uppercase;letter-spacing:-.01em}
.in-title .ln{display:block}
.in-title .ln+.ln{color:#FFD93B}
.iw{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .02em .12em;margin:-.06em -.02em -.12em}
.ic{display:inline-block;will-change:transform}
.in-sub{margin:0;font:800 clamp(.72rem,2.3vw,1rem) Archivo,sans-serif;letter-spacing:.32em;text-transform:uppercase;color:#E9E6D8;opacity:0}
.in-sub b{color:#FFD93B}

/* carretera con carro */
.in-road{position:absolute;left:0;right:0;bottom:calc(30px + 6vh);height:clamp(74px,12vh,110px);z-index:2}
.in-asphalt{position:absolute;left:0;right:0;bottom:0;height:34%;background:#1d1d19;border-top:4px solid #FFD93B;transform-origin:left}
.in-asphalt::after{content:"";position:absolute;left:0;right:0;top:50%;height:5px;margin-top:-2px;background:repeating-linear-gradient(90deg,#fff 0 36px,transparent 36px 72px);background-size:72px 5px;animation:inDash .35s linear infinite;opacity:.85}
@keyframes inDash{to{background-position:-72px 0}}
.in-carwrap{position:absolute;left:0;bottom:calc(34% - 14px);width:clamp(170px,32vw,290px);will-change:transform}
.in-car{display:block;width:100%;height:auto;overflow:visible}
.in-wheel{transform-box:fill-box;transform-origin:center;animation:inSpin .28s linear infinite}
@keyframes inSpin{to{transform:rotate(-360deg)}}
/* suspensión: solo la carrocería rebota (las ruedas quedan sobre el asfalto); .in-carwrap lo mueve GSAP, esto va adentro */
.in-body{transform-box:fill-box;transform-origin:50% 100%;animation:inBob .36s ease-in-out infinite}
@keyframes inBob{0%,100%{translate:0 0;rotate:0deg}40%{translate:0 -3px;rotate:-.5deg}70%{translate:0 -1px;rotate:.3deg}}
.in-sp{position:absolute;right:98%;height:5px;border-radius:5px;background:#FFD93B;transform-origin:right}
.in-sp:nth-of-type(1){top:22%;width:150%}.in-sp:nth-of-type(2){top:42%;width:230%;opacity:.8}.in-sp:nth-of-type(3){top:60%;width:110%;opacity:.7}.in-sp:nth-of-type(4){top:76%;width:190%;opacity:.6}

.in-skip{position:absolute;right:14px;top:44px;z-index:5;border:2px solid rgba(255,255,255,.55);background:rgba(14,14,12,.6);color:#fff;font:800 .74rem Archivo,sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:8px 14px;border-radius:999px;cursor:pointer}
.in-skip:hover{background:#FFD93B;color:#0E0E0C;border-color:#FFD93B}
@media (max-width:560px){.in-seal{right:-18%}.in-road{bottom:calc(30px + 4vh)}}