/* Lightweight motion layer shared by Mathify public and learning pages. */
@view-transition { navigation: none; }

:root {
    --motion-origin-x: 50vw;
    --motion-origin-y: 50vh;
}

.motion-page {
    animation: mathify-page-in 300ms ease-out both;
    will-change: opacity, transform;
}

.motion-page.motion-page-exit {
    opacity: 0;
    transform: scale(.985);
    transition: opacity 300ms ease, transform 300ms ease;
}

.motion-page.motion-page-enter-origin { animation: mathify-page-in 300ms ease-out both; }

::view-transition-old(root) {
    animation: mathify-view-old 300ms ease both;
}

::view-transition-new(root) {
    animation: mathify-view-new 300ms ease both;
}

.motion-page .auth-card,
.motion-dashboard .welcome-card,
.motion-dashboard .dashboard-card,
.motion-dashboard .action-card {
    animation: mathify-card-in 480ms ease-out both;
}

.motion-dashboard .welcome-card { animation-delay: 0ms; }

.motion-dashboard .dashboard-card,
.motion-dashboard .action-card {
    animation-name: mathify-card-in, mathify-card-float;
    animation-duration: 480ms, 4.8s;
    animation-timing-function: ease-out, ease-in-out;
    animation-fill-mode: both, both;
    animation-iteration-count: 1, infinite;
    animation-delay: var(--card-delay, 50ms), calc(var(--card-delay, 50ms) + 520ms);
}
.motion-dashboard main > .row > :nth-child(1) .dashboard-card { --card-delay: 50ms; }
.motion-dashboard main > .row > :nth-child(2) .dashboard-card { --card-delay: 100ms; }
.motion-dashboard .row > :nth-child(1) .action-card { --card-delay: 150ms; }
.motion-dashboard .row > :nth-child(2) .action-card { --card-delay: 200ms; }

.motion-result-enter { animation: mathify-card-in 420ms ease-out both; }

.landing-copy { animation: mathify-content-in 440ms ease-out both; }
.landing-copy .heading-icon { animation: mathify-logo-in 420ms ease-out 70ms both; }
.landing-shell .learning-panel { animation: mathify-illustration-float 5.5s ease-in-out 500ms infinite; }

.motion-symbols { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.motion-symbol {
    position: absolute;
    display: grid;
    place-items: center;
    color: var(--symbol-color);
    font-size: clamp(1.25rem, 2vw, 2rem);
    font-weight: 900;
    line-height: 1;
    opacity: .72;
    filter: drop-shadow(0 4px 5px rgba(45, 52, 91, .12));
    animation: mathify-symbol-float var(--float-duration, 5s) ease-in-out var(--float-delay, 0s) infinite alternate;
}
.motion-symbol:nth-child(1) { --symbol-color: #7252d6; --float-duration: 5.2s; top: 7%; left: 4%; }
.motion-symbol:nth-child(2) { --symbol-color: #ffbd25; --float-duration: 6s; --float-delay: -.8s; top: 13%; left: 43%; }
.motion-symbol:nth-child(3) { --symbol-color: #f44f83; --float-duration: 5.6s; --float-delay: -1.4s; top: 34%; left: 7%; }
.motion-symbol:nth-child(4) { --symbol-color: #66bd4b; --float-duration: 6.4s; --float-delay: -.4s; top: 23%; left: 46%; }
.motion-symbol:nth-child(5) { --symbol-color: #28afe8; --float-duration: 5.8s; --float-delay: -2s; top: 48%; left: 45%; }

.motion-page .btn:not(.answer-button),
.motion-dashboard .btn:not(.answer-button) {
    transition: transform 220ms ease, scale 140ms ease, box-shadow 220ms ease, background-color 220ms ease, border-color 220ms ease, color 220ms ease, filter 220ms ease;
}
.motion-page .btn:not(.answer-button):hover,
.motion-page .btn:not(.answer-button):focus-visible,
.motion-dashboard .btn:not(.answer-button):hover,
.motion-dashboard .btn:not(.answer-button):focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(43, 48, 89, .2), 0 0 18px rgba(114, 82, 214, .14);
    filter: brightness(1.025);
}

.motion-page .btn:active:not(:disabled),
.motion-dashboard .btn:active:not(:disabled) { scale: .97; }

.flying-coin {
    position: fixed;
    left: var(--coin-start-x);
    top: var(--coin-start-y);
    z-index: 9999;
    pointer-events: none;
    font-size: 1.35rem;
    filter: drop-shadow(0 5px 7px rgba(98, 67, 13, .28));
    animation: mathify-coin-flight 620ms cubic-bezier(.25, .8, .3, 1) both;
}

.motion-heart-shake { animation: mathify-heart-shake 440ms ease-in-out both !important; }

.result-star {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px) scale(.5) rotate(-12deg);
    animation: mathify-star-in 460ms cubic-bezier(.2, 1.4, .4, 1) forwards;
}

.confetti-layer { position: fixed; inset: 0; z-index: 9998; overflow: hidden; pointer-events: none; }
.confetti-piece {
    position: absolute;
    top: -18px;
    width: 9px;
    height: 14px;
    border-radius: 2px;
    background: var(--confetti-color);
    animation: mathify-confetti-fall var(--confetti-duration) cubic-bezier(.2, .7, .35, 1) var(--confetti-delay) both;
}

@keyframes mathify-page-in {
    from { opacity: 0; transform: scale(.98); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes mathify-origin-expand {
    from { opacity: 0; transform: scale(.985); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes mathify-view-old {
    to { opacity: 0; transform: scale(.985); }
}

@keyframes mathify-view-new {
    from { opacity: 0; transform: scale(.985); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes mathify-card-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mathify-card-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes mathify-content-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes mathify-logo-in {
    from { opacity: 0; transform: scale(.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes mathify-illustration-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes mathify-symbol-float {
    from { transform: translate3d(0, 0, 0) rotate(-4deg); }
    to { transform: translate3d(4px, -9px, 0) rotate(5deg); }
}

@keyframes mathify-coin-flight {
    0% { opacity: 0; transform: translate3d(-50%, -50%, 0) scale(.55) rotate(-15deg); }
    16% { opacity: 1; transform: translate3d(-50%, -70%, 0) scale(1.12) rotate(8deg); }
    100% { opacity: 0; transform: translate3d(calc(var(--coin-x) - 50%), calc(var(--coin-y) - 50%), 0) scale(.45) rotate(320deg); }
}

@keyframes mathify-heart-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px) rotate(-2deg); }
    40% { transform: translateX(4px) rotate(2deg); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

@keyframes mathify-star-in {
    to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes mathify-confetti-fall {
    0% { opacity: 0; transform: translate3d(0, -20px, 0) rotate(0); }
    12% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--confetti-drift), 105vh, 0) rotate(var(--confetti-spin)); }
}

@media (max-width: 991.98px) {
    .motion-symbols { display: none; }
}

.game-launch-screen{position:fixed;inset:0;z-index:20000;overflow:hidden;display:grid;place-items:center;background:linear-gradient(145deg,#21105e,#4931b7 55%,#126bb4);color:#fff;opacity:0;transition:opacity .2s ease}.game-launch-screen.is-visible{opacity:1}.launch-copy{position:absolute;top:24%;font-size:clamp(1.2rem,3vw,1.75rem);font-weight:900}.launch-dots::after{display:inline-block;width:1.5em;text-align:left;content:'';animation:launch-dots 1s steps(4,end) infinite}.launch-stars{position:absolute;inset:0}.launch-stars i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 9px #fff;animation:launch-star-twinkle 2.8s ease-in-out infinite}.launch-stars i:nth-child(1){left:12%;top:18%}.launch-stars i:nth-child(2){left:77%;top:14%;animation-delay:-.8s}.launch-stars i:nth-child(3){left:25%;top:55%;animation-delay:-1.7s}.launch-stars i:nth-child(4){left:87%;top:63%;animation-delay:-2.2s}.launch-stars i:nth-child(5){left:58%;top:37%;animation-delay:-1.1s}.launch-stars i:nth-child(6){left:43%;top:73%;animation-delay:-2.5s}.launch-symbols span{position:absolute;color:rgba(255,255,255,.2);font-size:2rem;font-weight:900;animation:launch-symbol-float 5s ease-in-out infinite}.launch-symbols span:nth-child(1){left:15%;top:35%}.launch-symbols span:nth-child(2){right:17%;top:31%;animation-delay:-1.2s}.launch-symbols span:nth-child(3){left:27%;bottom:18%;animation-delay:-2.4s}.launch-symbols span:nth-child(4){right:26%;bottom:20%;animation-delay:-3.6s}.launch-rocket{position:absolute;left:50%;bottom:11%;width:90px;height:125px;transform:translateX(-50%);will-change:transform,opacity}.launch-rocket-body{position:absolute;left:13px;top:0;z-index:2;font-size:4.8rem;filter:drop-shadow(0 0 17px rgba(150,218,255,.55));animation:launch-rocket-idle 1.8s ease-in-out infinite}.launch-flame{position:absolute;left:29px;top:72px;font-size:2rem;filter:drop-shadow(0 0 12px #ffca3a);animation:launch-flame-idle .2s ease-in-out infinite alternate}.launch-particles i{position:absolute;left:43px;top:98px;width:7px;height:7px;border-radius:50%;background:#ffca3a;box-shadow:0 0 10px #ff9e2c;animation:launch-particle 1s ease-out infinite}.launch-particles i:nth-child(2){left:28px;animation-delay:-.35s}.launch-particles i:nth-child(3){left:54px;animation-delay:-.7s}.launch-glow{position:absolute;left:50%;bottom:8%;width:130px;height:30px;border-radius:50%;background:rgba(94,211,255,.28);filter:blur(12px);transform:translateX(-50%);animation:launch-glow 1.4s ease-in-out infinite}.game-launch-screen.is-launching .launch-rocket{animation:launch-rocket-go .8s cubic-bezier(.3,.6,.3,1) forwards}.game-launch-screen.is-launching .launch-flame{font-size:2.8rem;filter:drop-shadow(0 0 18px #fff) drop-shadow(0 0 26px #ff9e2c)}.game-launch-screen::after{position:absolute;inset:0;background:#fff;content:'';opacity:0}.game-launch-screen.is-flashing::after{animation:launch-flash .2s ease-out}.game-page-enter .game-hud,.game-page-enter .game-header{animation:game-item-enter .32s ease-out both}.game-page-enter .game-question,.game-page-enter .progress-panel{animation:game-item-enter .32s ease-out 50ms both}.game-page-enter .hud-pill,.game-page-enter .status-pill{animation:game-item-enter .32s ease-out 100ms both}.game-page-enter .game-stage,.game-page-enter .quiz-card{animation:game-item-enter .32s ease-out 150ms both}.game-page-enter .answer-button{animation:game-item-enter .3s ease-out 200ms both}
@keyframes launch-dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%,100%{content:'...'}}@keyframes launch-star-twinkle{50%{opacity:.25;transform:scale(.65)}}@keyframes launch-symbol-float{50%{transform:translateY(-10px) rotate(5deg)}}@keyframes launch-rocket-idle{50%{transform:translateY(-6px)}}@keyframes launch-flame-idle{to{transform:scale(.72,1.2);opacity:.7}}@keyframes launch-particle{to{opacity:0;transform:translate(-12px,38px) scale(.2)}}@keyframes launch-glow{50%{opacity:.45;transform:translateX(-50%) scale(1.15)}}@keyframes launch-rocket-go{0%{transform:translateX(-50%)}20%{transform:translateX(-50%) translateY(8px)}100%{opacity:0;transform:translateX(-50%) translateY(-115vh)}}@keyframes launch-flash{50%{opacity:.16}}@keyframes game-item-enter{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce) {
    .motion-page,
    .motion-page *,
    .motion-dashboard,
    .motion-dashboard * {
        animation: none !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        transition-delay: 0ms !important;
    }

    .motion-page.motion-page-exit { opacity: 1; transform: none; filter: none; }
    .result-star { opacity: 1; transform: none; }
    .confetti-layer, .flying-coin { display: none !important; }
    .game-launch-screen { display: none !important; }
}

/* Logout-only mission completion transition. */
.logout-scene{position:fixed;inset:0;z-index:30000;overflow:hidden;background:rgba(17,12,52,.34);opacity:0;pointer-events:none;transition:opacity .4s ease}.logout-scene.is-visible{opacity:1}.logout-message{position:absolute;left:50%;top:18%;z-index:6;display:grid;gap:.35rem;color:#fff;text-align:center;opacity:0;transform:translate(-50%,10px);animation:logout-message-in .4s ease .05s forwards}.logout-message strong{font-size:clamp(1.8rem,5vw,3.1rem);font-weight:900;text-shadow:0 4px 20px rgba(20,11,75,.38)}.logout-message span{font-size:clamp(1rem,2.5vw,1.35rem);font-weight:800;color:rgba(255,255,255,.82)}.logout-paper{position:absolute;inset:3%;z-index:2;border-radius:22px;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);opacity:0}.logout-paper i{position:absolute;width:7px;height:7px;background:#fff;border-radius:2px;opacity:0}.logout-paper i:nth-child(1){left:36%;top:44%}.logout-paper i:nth-child(2){left:58%;top:53%}.logout-paper i:nth-child(3){left:48%;top:32%}.logout-rocket{position:absolute;left:50%;bottom:-145px;z-index:7;width:120px;height:180px;transform:translateX(-50%);animation:logout-rocket-arrive .7s cubic-bezier(.2,.8,.3,1) .75s forwards}.logout-rocket b{position:absolute;left:17px;top:0;font-size:5.8rem;font-weight:400;filter:drop-shadow(0 0 20px rgba(121,214,255,.7))}.logout-rocket em{position:absolute;left:42px;top:88px;font-size:2.5rem;font-style:normal;filter:drop-shadow(0 0 14px #ffb62e);animation:logout-flame .18s ease-in-out infinite alternate}.logout-smoke i{position:absolute;left:54px;top:125px;width:13px;height:13px;border-radius:50%;background:rgba(255,255,255,.72);filter:blur(1px);animation:logout-smoke 1.1s ease-out infinite}.logout-smoke i:nth-child(2){left:35px;animation-delay:-.3s}.logout-smoke i:nth-child(3){left:72px;animation-delay:-.6s}.logout-smoke i:nth-child(4){left:47px;animation-delay:-.9s}.logout-space{position:absolute;inset:0;opacity:0;transition:opacity .35s ease}.logout-space i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px #fff}.logout-space i:nth-child(1){left:14%;top:20%}.logout-space i:nth-child(2){left:83%;top:26%}.logout-space i:nth-child(3){left:25%;top:68%}.logout-space i:nth-child(4){left:72%;top:62%}.logout-space span{position:absolute;color:rgba(255,255,255,.5);font-size:1.5rem;font-weight:900}.logout-space span:nth-of-type(1){left:20%;top:40%}.logout-space span:nth-of-type(2){right:18%;top:42%}.logout-space span:nth-of-type(3){left:32%;bottom:17%}.logout-space span:nth-of-type(4){right:30%;bottom:18%}.logout-folding{transform-origin:50% 76%;animation:logout-page-fold 1.25s cubic-bezier(.55,0,.3,1) .42s forwards;will-change:transform,opacity,clip-path}.logout-scene.is-absorbing{background:rgba(17,12,52,.68)}.logout-scene.is-absorbing .logout-paper{animation:logout-paper-absorb 1.05s cubic-bezier(.6,0,.4,1) forwards}.logout-scene.is-absorbing .logout-paper i{animation:logout-paper-particle .8s ease-in forwards}.logout-scene.is-launching{background:linear-gradient(160deg,#21105e,#172d77)}.logout-scene.is-launching .logout-message{animation:logout-message-out .25s ease forwards}.logout-scene.is-launching .logout-space{opacity:1}.logout-scene.is-launching .logout-rocket{animation:logout-launch .9s cubic-bezier(.35,.7,.25,1) forwards}.logout-scene.is-launching .logout-rocket em{font-size:3.3rem;filter:drop-shadow(0 0 18px #fff) drop-shadow(0 0 28px #ff9e2c)}.logout-scene.is-fading{background:#fff;transition:background .25s ease}
@keyframes logout-message-in{to{opacity:1;transform:translate(-50%,0)}}@keyframes logout-message-out{to{opacity:0;transform:translate(-50%,-8px)}}@keyframes logout-page-fold{0%{transform:none;opacity:1;clip-path:inset(0 round 0)}40%{transform:perspective(1200px) rotateX(2deg) scale(.94,.97);clip-path:polygon(2% 3%,98% 1%,97% 96%,3% 99%)}100%{transform:perspective(1200px) translateY(28vh) scale(.08,.04) rotateX(12deg);opacity:.15;clip-path:polygon(12% 28%,88% 15%,72% 85%,22% 74%)}}@keyframes logout-rocket-arrive{to{transform:translateX(-50%) translateY(-190px)}}@keyframes logout-flame{to{transform:scale(.72,1.22);opacity:.72}}@keyframes logout-smoke{to{opacity:0;transform:translate(-18px,48px) scale(2)}}@keyframes logout-paper-absorb{0%{opacity:0;transform:scale(.8)}25%{opacity:.45}100%{opacity:0;transform:translateY(68%) scale(.04) rotate(8deg)}}@keyframes logout-paper-particle{35%{opacity:.8}100%{opacity:0;transform:translate(0,55vh) scale(.1)}}@keyframes logout-launch{0%{transform:translateX(-50%) translateY(-190px)}18%{transform:translateX(-50%) translateY(-180px)}100%{opacity:0;transform:translateX(-50%) translateY(-130vh)}}
@media(prefers-reduced-motion:reduce){.logout-scene{display:none!important}.logout-folding{animation:none!important}}

/* Larger, upright rocket for the logout mission. */
.logout-rocket{bottom:-195px;width:170px;height:235px}
.logout-rocket b{left:20px;top:0;font-size:8rem;line-height:1;transform:rotate(-45deg);filter:drop-shadow(0 0 26px rgba(121,214,255,.82))}
.logout-rocket em{left:62px;top:130px;font-size:3.2rem;line-height:1}
.logout-smoke i{left:78px;top:176px;width:16px;height:16px}
.logout-smoke i:nth-child(2){left:52px}
.logout-smoke i:nth-child(3){left:101px}
.logout-smoke i:nth-child(4){left:69px}

/* Login-success landing mission; only the dashboard activates this scene. */
.login-mission-scene{position:fixed;inset:0;z-index:30000;overflow:hidden;display:grid;place-items:center;background:linear-gradient(160deg,#21105e,#244ab5);opacity:0;pointer-events:none;transition:opacity .28s ease}
.login-mission-scene.is-active{opacity:1}
.login-mission-stars i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;animation:login-star 1.4s ease-in-out infinite alternate}
.login-mission-stars i:nth-child(1){left:15%;top:19%}.login-mission-stars i:nth-child(2){left:80%;top:24%;animation-delay:-.5s}.login-mission-stars i:nth-child(3){left:26%;top:67%;animation-delay:-.9s}.login-mission-stars i:nth-child(4){left:74%;top:72%;animation-delay:-1.2s}
.login-mission-stars>span{position:absolute;color:rgba(255,255,255,.48);font-size:1.8rem;font-weight:900}.login-mission-stars>span:nth-of-type(1){left:22%;top:42%}.login-mission-stars>span:nth-of-type(2){right:19%;top:43%}.login-mission-stars>span:nth-of-type(3){right:31%;bottom:16%}
.login-mission-rocket{position:absolute;left:50%;top:-250px;width:170px;height:235px;transform:translateX(-50%);animation:login-rocket-land 1.15s cubic-bezier(.22,.72,.28,1) .18s forwards}
.login-mission-rocket b{position:absolute;left:20px;top:0;font-size:8rem;line-height:1;font-weight:400;transform:rotate(-45deg);filter:drop-shadow(0 0 26px rgba(121,214,255,.82))}
.login-mission-rocket em{position:absolute;left:62px;top:130px;font-size:3.2rem;line-height:1;font-style:normal;filter:drop-shadow(0 0 17px #ffb62e);animation:logout-flame .18s ease-in-out infinite alternate}
.login-mission-rocket>span i{position:absolute;left:78px;top:176px;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.72);animation:login-smoke .8s ease-out infinite}.login-mission-rocket>span i:nth-child(2){left:52px;animation-delay:-.25s}.login-mission-rocket>span i:nth-child(3){left:101px;animation-delay:-.5s}
.login-mission-message{position:absolute;left:50%;top:18%;display:grid;gap:.35rem;width:min(90%,600px);text-align:center;color:#fff;opacity:0;transform:translate(-50%,18px) scale(.96)}
.login-mission-message strong{font-size:clamp(2rem,5vw,3.4rem);font-weight:900;text-shadow:0 5px 24px rgba(10,7,45,.45)}.login-mission-message span{font-size:clamp(1rem,2.5vw,1.35rem);font-weight:800;color:rgba(255,255,255,.84)}
.login-mission-scene.has-landed .login-mission-message{animation:login-message-in .45s ease forwards}.login-mission-scene.has-landed .login-mission-rocket em,.login-mission-scene.has-landed .login-mission-rocket>span{opacity:0;transition:opacity .25s ease}
.login-mission-scene.is-leaving{opacity:0}
@keyframes login-rocket-land{0%{transform:translateX(-50%) translateY(0)}72%{transform:translateX(-50%) translateY(66vh)}88%{transform:translateX(-50%) translateY(63vh)}100%{transform:translateX(-50%) translateY(64vh)}}
@keyframes login-message-in{to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes login-star{to{opacity:.35;transform:scale(.65)}}
@keyframes login-smoke{to{opacity:0;transform:translateY(42px) scale(1.8)}}
@media(prefers-reduced-motion:reduce){.login-mission-scene{display:none!important}}

/* Shared lunar platform: the login rocket lands here and the logout rocket launches from it. */
.mission-moon{position:absolute;left:50%;z-index:5;width:clamp(310px,36vw,520px);height:clamp(125px,17vw,210px);overflow:hidden;border-radius:50% 50% 18% 18%/72% 72% 28% 28%;background:radial-gradient(circle at 35% 25%,#fff 0 3%,transparent 4%),radial-gradient(circle at 67% 37%,rgba(155,163,207,.3) 0 8%,transparent 9%),radial-gradient(circle at 48% 62%,rgba(151,158,199,.22) 0 11%,transparent 12%),linear-gradient(155deg,#fff,#dfe5f7 58%,#aeb8da);box-shadow:inset -24px -22px 38px rgba(78,86,145,.23),0 -10px 40px rgba(205,218,255,.35),0 0 65px rgba(146,183,255,.28);transform:translateX(-50%)}
.mission-moon:before{content:"";position:absolute;inset:0;border-radius:inherit;border-top:2px solid rgba(255,255,255,.88)}
.mission-moon i{position:absolute;border-radius:50%;background:rgba(133,143,190,.18);box-shadow:inset 2px 2px 5px rgba(93,102,155,.16)}.mission-moon i:nth-child(1){left:18%;top:34%;width:34px;height:18px}.mission-moon i:nth-child(2){right:21%;top:20%;width:24px;height:14px}.mission-moon i:nth-child(3){left:56%;top:58%;width:42px;height:22px}
.login-mission-moon{top:calc(64vh - 8px);opacity:0;transform:translateX(-50%) scale(.88);animation:login-moon-in .55s ease .25s forwards}
.login-mission-rocket{z-index:7}.login-mission-message{z-index:8}
.logout-mission-moon{bottom:-120px;opacity:0;transform:translateX(-50%) translateY(30px);animation:logout-moon-rise .55s ease .62s forwards}
.logout-scene.is-launching .logout-mission-moon{filter:brightness(1.12);box-shadow:inset -24px -22px 38px rgba(78,86,145,.23),0 -15px 55px rgba(205,218,255,.5),0 0 90px rgba(146,183,255,.42);transition:filter .3s ease,box-shadow .3s ease}
@keyframes login-moon-in{to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes logout-moon-rise{to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* Keep the lunar platform and rocket on one exact centre axis. */
.login-mission-moon,.logout-mission-moon,.login-mission-rocket,.logout-rocket{left:50%}
.login-mission-rocket b,.logout-rocket b{left:50%;transform:translateX(-50%) rotate(-45deg);transform-origin:center}
.login-mission-rocket em,.logout-rocket em{left:50%;margin-left:-18px}
.login-mission-rocket>span i,.logout-smoke i{left:50%;margin-left:-8px}
.login-mission-rocket>span i:nth-child(2),.logout-smoke i:nth-child(2){left:calc(50% - 26px)}
.login-mission-rocket>span i:nth-child(3),.logout-smoke i:nth-child(3){left:calc(50% + 24px)}
.logout-smoke i:nth-child(4){left:calc(50% - 9px)}
html[data-mathify-motion="off"] *,html[data-mathify-motion="off"] *::before,html[data-mathify-motion="off"] *::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}