.sa-intro{position:fixed;inset:0;max-width:none;max-height:none;width:100%;height:100%;margin:0;padding:24px;border:0;background:transparent;overflow:auto;color:#eff7ff;box-sizing:border-box}
.sa-intro[open]{display:grid;place-items:center}
.sa-intro::backdrop{background:rgba(10,27,44,.67);backdrop-filter:blur(14px)}
.sa-intro-panel{position:relative;width:min(800px,100%);margin:auto;padding:30px 36px 26px;overflow:hidden;border:1px solid #527e95;border-radius:32px;background:radial-gradient(ellipse at 65% 65%,#2c6270 0%,#1e455e 50%,#153954 100%);box-shadow:0 40px 120px #06142166;animation:saIntroWindow 6.2s both}
.sa-intro-top{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:23px;font-weight:750;letter-spacing:-.6px}
.sa-intro-skip{padding:9px 13px;border:1px solid #86a7ba77;border-radius:30px;background:transparent;color:#eff7ff;font:inherit;font-size:14px;font-weight:500;line-height:1.3;cursor:pointer;letter-spacing:0}
.sa-intro-skip:hover{background:#ffffff16}.sa-intro-skip:focus-visible{outline:3px solid #d58437;outline-offset:4px}
.sa-intro h2{max-width:600px;margin:32px 0 10px;font-size:clamp(24px,4vw,38px);line-height:1.12;font-weight:650;letter-spacing:-1.2px;color:#fff}
.sa-intro-subtitle{margin:0;font-size:16px;line-height:1.5;color:#d4e6ef}
.sa-intro-stage{position:relative;height:360px;margin:24px 0 16px;isolation:isolate}
.sa-intro-orbit{position:absolute;left:50%;top:50%;width:270px;height:270px;margin:-135px;border:1px solid #7ed8d22b;border-radius:50%;box-shadow:0 0 65px #49d4d413;animation:saIntroOrbit 5.8s both}
.sa-intro-word{position:absolute;left:50%;top:50%;padding:9px 17px;white-space:nowrap;color:#e7f2f9;background:#91badb12;border:1px solid #a1c1d630;border-radius:40px;font-size:clamp(15px,2.1vw,20px);font-weight:550;will-change:transform,opacity;animation:saIntroWord 4.3s cubic-bezier(.37,0,.63,1) both;animation-delay:var(--phase)}
.sa-intro-logo{position:absolute;left:50%;top:50%;width:210px;height:210px;margin:-105px;opacity:0;will-change:transform,opacity;animation:saIntroLogo 6.2s both}
.sa-intro-logo img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 35px #031d2b88)}
.sa-intro-roles{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);display:flex;justify-content:center;gap:10px;white-space:nowrap;opacity:0;animation:saIntroRoles 6.2s both}
.sa-intro-roles span{padding:7px 15px;border-radius:25px;border:1px solid #a4d2dc50;background:#5b93a323;font-size:14px;color:#e7f2f9}
.sa-intro-progress{height:2px;background:#ffffff18;border-radius:3px;overflow:hidden}.sa-intro-progress span{display:block;width:100%;height:100%;transform-origin:left;background:linear-gradient(90deg,#d58437,#5fdaca);animation:saIntroProgress 6.2s linear both}
@keyframes saIntroWord{0%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(var(--scale))}12%{opacity:1}27%{opacity:1;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(calc(var(--r)*-.65)) scale(var(--scale))}49%{opacity:.94;transform:translate(calc(-50% + var(--bx)),calc(-50% + var(--by))) rotate(calc(var(--r)*.8)) scale(var(--scale))}63%{opacity:1;transform:translate(calc(-50% + var(--x)*.75),calc(-50% + var(--y)*.75)) rotate(calc(var(--r)*-.3)) scale(var(--scale))}88%,100%{opacity:0;transform:translate(calc(-50% + var(--mx)),calc(-50% + var(--my))) rotate(0) scale(.15)}}
@keyframes saIntroLogo{0%,48%{opacity:0;transform:scale(.65)}65%{opacity:1;transform:scale(1.045)}76%,100%{opacity:1;transform:scale(1)}}
@keyframes saIntroRoles{0%,69%{opacity:0;translate:0 10px}82%,100%{opacity:1;translate:0 0}}
@keyframes saIntroOrbit{0%{opacity:0;transform:scale(1.2)}20%,44%{opacity:1}70%,100%{opacity:0;transform:scale(.6)}}
@keyframes saIntroProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes saIntroWindow{0%{opacity:0;transform:translateY(14px) scale(.98)}8%,92%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-8px) scale(1.015)}}
@media(max-width:600px){.sa-intro{padding:14px}.sa-intro-panel{padding:23px 18px 22px;border-radius:25px}.sa-intro-top{font-size:22px}.sa-intro h2{margin-top:26px;letter-spacing:-.7px}.sa-intro-subtitle{font-size:14px}.sa-intro-stage{height:300px;width:640px;left:50%;margin-left:-320px;transform:scale(.5);transform-origin:center center;margin-top:-30px;margin-bottom:-40px}.sa-intro-logo{width:260px;height:260px;margin:-130px}.sa-intro-word{font-size:26px}.sa-intro-roles{bottom:-60px;gap:12px}.sa-intro-roles span{font-size:22px;padding:10px 17px}.sa-intro-skip{font-size:13px}}
@media(prefers-reduced-motion:reduce){.sa-intro{display:none!important}.sa-intro *{animation:none!important}}

/* Hand the exact same icon from the modal to the real header position. */
.sa-intro::backdrop{transition:background .7s ease,backdrop-filter .7s ease}
.sa-intro.sa-intro-departing::backdrop{background:transparent;backdrop-filter:blur(0)}
.sa-intro-departing .sa-intro-panel{animation:none;opacity:0;transition:opacity .24s ease;pointer-events:none}
.sa-intro-flying{position:fixed;display:block;max-width:none;max-height:none;margin:0;opacity:1;visibility:visible;z-index:3;pointer-events:none;isolation:isolate;overflow:visible;transform:none!important}
.sa-intro-flying>img{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;object-fit:contain;opacity:1!important;visibility:visible!important;transform:none!important;animation:none!important}
