.hero-intro{--intro-accent:#f5c96f;position:fixed;inset:0;z-index:1000;isolation:isolate;overflow:hidden;color:#fff;background:radial-gradient(ellipse at 32% 45%,#243d48 0,#101d2c 45%,#060e18 90%);font-family:system-ui,sans-serif;contain:layout paint}.hero-intro::after{content:'';position:absolute;inset:16px;border:1px solid #ffffff24;pointer-events:none}.hero-intro__rays{position:absolute;inset:-50%;opacity:.25;background:repeating-conic-gradient(from 10deg at 42% 48%,transparent 0 19deg,var(--intro-accent) 20deg,transparent 21deg 40deg);transform:rotate(-8deg);transition:transform 2.8s ease}.hero-intro[data-phase=hold] .hero-intro__rays{transform:rotate(10deg)}.hero-intro__actor{position:absolute;width:min(72vh,60vw);height:min(72vh,60vw);left:8%;top:8%;object-fit:contain;filter:drop-shadow(0 20px 25px #000a);transform:translateX(-65px);opacity:0;transition:transform .42s cubic-bezier(.2,.8,.2,1),opacity .3s}.hero-intro[data-phase=action] .hero-intro__actor,.hero-intro[data-phase=hold] .hero-intro__actor{transform:translateX(0);opacity:1}.hero-intro__card{position:absolute;left:54%;right:7%;top:29%;transform:translateX(55px);opacity:0;transition:transform .35s ease,opacity .25s}.hero-intro[data-phase=action] .hero-intro__card,.hero-intro[data-phase=hold] .hero-intro__card{opacity:1;transform:none}.hero-intro__eyebrow{letter-spacing:.25em;font-size:11px;color:#adbbc9}.hero-intro__title{font-size:clamp(16px,3vw,25px);color:var(--intro-accent);letter-spacing:.16em;margin:.5em 0}.hero-intro h2{font-size:clamp(32px,6vw,76px);margin:0;line-height:1.1;letter-spacing:.045em;text-transform:uppercase}.hero-intro__role{font-size:clamp(14px,2vw,21px);color:#d7e3ed;line-height:1.6}.hero-intro__skill{display:inline-block;border-top:1px solid var(--intro-accent);padding-top:12px;color:var(--intro-accent)}.hero-intro__controls{position:absolute;right:max(28px,env(safe-area-inset-right));bottom:max(28px,env(safe-area-inset-bottom));display:flex;gap:12px;z-index:5}.hero-intro button{min-width:104px;min-height:48px;border:1px solid #ffffff60;border-radius:6px;background:#122437;color:white;padding:10px 15px;font:inherit;cursor:pointer}.hero-intro button:focus-visible{outline:3px solid var(--intro-accent);outline-offset:4px}.hero-intro__status{position:absolute;bottom:32px;left:32px;max-width:42%;font-size:12px;color:#b8c9d6}.hero-intro__portal{position:absolute;left:28%;top:42%;width:22vw;height:22vw;border:3px solid var(--intro-accent);border-radius:50%;box-shadow:0 0 35px var(--intro-accent),inset 0 0 35px var(--intro-accent);opacity:0;transform:translate(-50%,-50%) scale(.2);transition:transform .55s ease,opacity .5s}.hero-intro[data-phase=portal] .hero-intro__portal{opacity:.85;transform:translate(-50%,-50%) scale(7)}.hero-intro[data-phase=portal] .hero-intro__card{opacity:0}.hero-intro__motif{position:absolute;left:20%;top:30%;width:25vw;height:25vw;opacity:0;transition:opacity .2s}.hero-intro[data-phase=action] .hero-intro__motif,.hero-intro[data-phase=hold] .hero-intro__motif{opacity:.6}.hero-intro__motif i{position:absolute;inset:10%;border:2px solid var(--intro-accent);transform:rotate(45deg)}.hero-intro__motif i:nth-child(2){inset:22%}.hero-intro__motif i:nth-child(3){inset:34%}.hero-intro[data-motif=tether] .hero-intro__motif i{border-radius:50%;transform:scaleX(1.6)}.hero-intro[data-motif=scan] .hero-intro__motif i{border-width:0 0 2px;transform:translateY(-30%)}.hero-intro[data-motif=forge] .hero-intro__motif i{border-style:dashed;transform:rotate(30deg)}.hero-intro[data-motif=shield] .hero-intro__motif i{border-radius:10% 10% 50% 50%;transform:none}.hero-intro[data-motif=beacon] .hero-intro__motif i{border-radius:50%;border-width:2px 0 0;transform:rotate(30deg)}.hero-intro[data-motif=supply] .hero-intro__motif i{border-radius:50%;transform:translateY(-30%) scaleX(.65)}.hero-intro[data-motif=anchor] .hero-intro__motif{transform:translateY(40%) scaleY(.4)}.hero-intro--repeat .hero-intro__actor,.hero-intro--repeat .hero-intro__card{transition-duration:.15s}.hero-intro--reduced *{transition:none!important;animation:none!important}.hero-intro--reduced .hero-intro__rays,.hero-intro--reduced .hero-intro__motif,.hero-intro--reduced .hero-intro__portal{display:none}.hero-intro--reduced .hero-intro__actor,.hero-intro--reduced .hero-intro__card{transform:none;opacity:1}@media(max-width:600px) and (orientation:portrait){.hero-intro__actor{width:80vw;height:80vw;top:5%;left:10%}.hero-intro__card{top:49%;left:12%;right:10%}.hero-intro h2{font-size:44px}.hero-intro__status{bottom:90px;max-width:80%}.hero-intro__motif{top:18%;left:29%;width:40vw;height:40vw}.hero-intro__controls{left:24px;right:24px;justify-content:space-between}.hero-intro__role{margin:8px 0}.hero-intro__skill{margin:4px 0}}
