.intro-active { overflow: hidden; }
.veyrion-intro { position: fixed; z-index: 10000; inset: 0; overflow: hidden; background: #020303; opacity: 1; visibility: visible; }
.veyrion-intro::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 55%,rgba(220,171,58,.16),transparent 34%),linear-gradient(180deg,#020303 0%,#070707 62%,#010202 100%); }
.veyrion-intro::after { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none; background: linear-gradient(90deg,rgba(0,0,0,.32),transparent 12% 88%,rgba(0,0,0,.38)),linear-gradient(180deg,rgba(0,0,0,.18),transparent 32% 75%,rgba(0,0,0,.52)); }
.intro-road { position: absolute; right: -18%; bottom: -13%; left: -18%; height: 50%; overflow: hidden; transform: perspective(430px) rotateX(59deg); transform-origin: center top; background: repeating-linear-gradient(90deg,transparent 0 13%,rgba(220,171,58,.18) 13.15%,transparent 13.35%),linear-gradient(180deg,rgba(218,168,49,.13),transparent 50%); border-top: 1px solid rgba(245,204,98,.43); box-shadow: 0 -2px 45px rgba(220,171,58,.13); opacity: 0; }
.intro-road span { position: absolute; inset: 0; background: repeating-linear-gradient(0deg,transparent 0 20%,rgba(234,188,70,.13) 20.5%,transparent 21%); }
.intro-speed-lines { position: absolute; inset: 0; opacity: 0; background: repeating-linear-gradient(12deg,transparent 0 8%,rgba(232,190,76,.075) 8.1%,transparent 8.28%); transform: scale(1.2); }
.intro-car-wrap { position: absolute; z-index: 3; right: 0; bottom: 1%; width: min(79vw,1280px); transform: translate3d(132%,1%,0) scale(.68); will-change: transform,filter; }
.intro-car-wrap::after { content: ""; position: absolute; z-index: -1; left: 10%; right: 3%; bottom: 4%; height: 11%; border-radius: 50%; background: rgba(0,0,0,.86); filter: blur(18px); transform: skewX(-12deg); }
.intro-car-rig { position: relative; width: 100%; filter: drop-shadow(0 28px 42px rgba(0,0,0,.78)); transform-origin: 58% 82%; }
.intro-car { position: relative; z-index: 2; width: 100%; height: auto; }
.intro-light-trail { position: absolute; z-index: -2; top: 56%; left: 84%; width: 82vw; height: 6px; background: linear-gradient(90deg,#fff0ad,#ffc13b 4%,rgba(224,177,61,.3) 35%,transparent 100%); box-shadow: 0 0 14px #ffbd38,0 0 45px rgba(255,182,47,.75),0 18px 50px rgba(255,164,22,.32); transform: scaleX(.05); transform-origin: left center; opacity: 0; }
.intro-road-spray { position: absolute; z-index: -1; left: 82%; bottom: 8%; width: 44vw; height: 23%; opacity: 0; transform: skewX(-24deg); transform-origin: left center; background: radial-gradient(ellipse at left,rgba(255,211,88,.62),rgba(221,144,18,.17) 26%,transparent 70%); filter: blur(8px); }
.intro-sparks { position: absolute; z-index: 1; left: 88%; bottom: 18%; width: 48vw; height: 24%; pointer-events: none; }
.intro-sparks i { position: absolute; left: 0; bottom: 0; width: 5px; height: 5px; border-radius: 50%; background: #ffe8a0; box-shadow: 0 0 7px 2px #ffad23; opacity: 0; }
.intro-sparks i:nth-child(2) { bottom: 18%; animation-delay: .08s!important; }
.intro-sparks i:nth-child(3) { bottom: 35%; animation-delay: .16s!important; }
.intro-sparks i:nth-child(4) { bottom: 7%; animation-delay: .24s!important; }
.intro-sparks i:nth-child(5) { bottom: 48%; animation-delay: .31s!important; }
.intro-sparks i:nth-child(6) { bottom: 27%; animation-delay: .39s!important; }
.intro-sparks i:nth-child(7) { bottom: 12%; animation-delay: .48s!important; }
.intro-wordmark { position: absolute; z-index: 2; top: 13%; right: 7vw; display: flex; align-items: flex-end; flex-direction: column; text-align: right; opacity: 0; transform: translateY(25px); }
.intro-wordmark span,.intro-wordmark i { color: var(--gold); font-size: clamp(8px,1vw,12px); font-style: normal; font-weight: 700; letter-spacing: .35em; }
.intro-wordmark strong { margin: 4px 0; color: #f5df9d; font-family: var(--serif); font-size: clamp(60px,11vw,175px); font-weight: 400; line-height: .9; letter-spacing: .06em; text-shadow: 0 0 50px rgba(220,171,58,.26); }
.intro-skip { position: absolute; z-index: 6; right: 24px; bottom: 22px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.15); background: rgba(0,0,0,.35); color: #aaa; cursor: pointer; font-size: 9px; letter-spacing: .17em; text-transform: uppercase; opacity: 0; }
.intro-running .intro-road { animation: roadReveal .7s .15s ease forwards; }
.intro-running .intro-road span { animation: roadFlow .48s linear infinite; }
.intro-running .intro-speed-lines { animation: speedPulse 3s .5s ease both; }
.intro-running .intro-wordmark { animation: wordReveal .9s .3s ease forwards,wordBlast .7s 3.85s ease forwards; }
.intro-running .intro-car-wrap { animation: carDriveReverse 4.15s .5s cubic-bezier(.16,.68,.18,1) forwards; }
.intro-running .intro-car-rig { animation: suspension 1.05s .65s ease-in-out 4; }
.intro-running .intro-light-trail { animation: trailReverse 3.1s .7s ease both; }
.intro-running .intro-road-spray { animation: roadSpray 3s .75s ease both; }
.intro-running .intro-sparks i { animation: sparkFly .85s 1.05s ease-out 4; }
.intro-running .intro-skip { animation: skipReveal .5s .95s ease forwards; }
.intro-running { animation: introExit .85s 4.55s ease forwards; }
@keyframes carDriveReverse { 0%{transform:translate3d(132%,3%,0) scale(.65);filter:blur(2px)} 42%{transform:translate3d(-3%,0,0) scale(.93);filter:blur(0)} 70%{transform:translate3d(-24%,-1%,0) scale(1.04);filter:blur(0)} 100%{transform:translate3d(-150%,-3%,0) scale(1.19);filter:blur(2px)} }
@keyframes suspension { 0%,100%{transform:translateY(0) rotate(.05deg)} 30%{transform:translateY(-3px) rotate(-.13deg)} 65%{transform:translateY(2px) rotate(.1deg)} }
@keyframes trailReverse { 0%{opacity:0;transform:scaleX(.03)} 15%,72%{opacity:1;transform:scaleX(1)} 100%{opacity:0;transform:scaleX(.3)} }
@keyframes roadSpray { 0%{opacity:0;transform:skewX(-24deg) scaleX(.05)} 18%,72%{opacity:.8;transform:skewX(-24deg) scaleX(1)} 100%{opacity:0;transform:skewX(-24deg) scaleX(.25)} }
@keyframes sparkFly { 0%{opacity:0;transform:translate(0,0) scale(.5)} 15%{opacity:1} 100%{opacity:0;transform:translate(34vw,-8vh) scale(.1)} }
@keyframes roadFlow { to{background-position:0 110px} }
@keyframes roadReveal { to{opacity:1} }
@keyframes speedPulse { 0%{opacity:0;transform:translateX(8%) scale(1.2)} 30%,75%{opacity:1} 100%{opacity:0;transform:translateX(-10%) scale(1.3)} }
@keyframes wordReveal { to{opacity:1;transform:none} }
@keyframes wordBlast { to{opacity:0;transform:translateX(6%) scale(1.05);filter:blur(5px)} }
@keyframes skipReveal { to{opacity:1} }
@keyframes introExit { to{opacity:0;visibility:hidden;transform:scale(1.03)} }
.intro-finished { pointer-events:none!important; opacity:0!important; visibility:hidden!important; transition:opacity .6s ease,visibility .6s ease; }
@media(max-width:700px){.intro-car-wrap{width:144vw;bottom:12%}.intro-wordmark{top:16%;right:6vw}.intro-wordmark strong{font-size:clamp(42px,17vw,72px);letter-spacing:.015em}.intro-running .intro-car-wrap{animation-duration:3.65s}.intro-running{animation-delay:4.02s}.intro-light-trail{width:125vw}.intro-road{height:40%;bottom:-7%}.intro-sparks{width:75vw}.intro-running .intro-wordmark{animation-name:wordReveal,wordBlast;animation-delay:.3s,3.3s}}
@media(max-height:520px) and (orientation:landscape){.intro-car-wrap{width:76vw;bottom:-3%}.intro-wordmark{top:7%}.intro-wordmark strong{font-size:18vh}}
@media(prefers-reduced-motion:reduce){.veyrion-intro{display:none!important}.intro-active{overflow:auto}}