/* Finite interactions; only transforms and opacity move. */
.mascot-moment {
    display: flex; align-items: center; gap: 18px; position: relative;
    max-width: 380px; min-width: 0; isolation: isolate;
}
.mascot-button {
    position: relative; display: block; flex: 0 0 160px; width: 160px; height: 224px;
    padding: 0; border: 0; background: none; color: var(--accent, #d7fc70);
    cursor: pointer; perspective: 850px; -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.mascot-button:focus-visible { outline: 2px solid var(--accent, #d7fc70); outline-offset: 5px; border-radius: 20px; }
.mascot-figure {
    position: absolute; inset: 0; display: block; transform-style: preserve-3d;
    transform: rotateX(var(--mascot-rx, 0deg)) rotateY(var(--mascot-ry, 0deg));
    transition: transform 180ms ease-out;
}
.mascot-figure img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; user-select: none; }
.mascot-ground { position: absolute; width: 76%; height: 14px; bottom: 2px; left: 12%; border-radius: 50%; background: radial-gradient(ellipse, #c5f06e26, transparent 70%); }
.mascot-orbit { position: absolute; inset: 24% 0 10%; border: 1px solid #d7fc7017; border-radius: 50%; transform: rotate(-24deg); background: radial-gradient(ellipse, #b4e56b08, transparent 70%); }
.mascot-spark { position: absolute; top: 15%; right: 2%; font-size: 21px; opacity: .7; transform: translateZ(20px); }
.mascot-change { position: absolute; right: 0; bottom: 8%; display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #ffffff20; background: #111820; color: #c7d0dc; border-radius: 50%; font-size: 18px; transition: transform 200ms ease, border-color 200ms ease; }
.mascot-button:hover .mascot-change, .mascot-button:focus-visible .mascot-change { border-color: #d7fc7080; color: #d7fc70; transform: rotate(35deg); }
.mascot-caption { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.mascot-kicker { font-size: 8px; letter-spacing: .17em; color: #81909f; font-weight: 600; }
.mascot-caption strong { font-size: 17px; line-height: 1.2; letter-spacing: -.035em; color: #e9edf0; }
.mascot-description { font-size: 12px; line-height: 1.65; color: #9ba8b6; }
.mascot-hint { font-size: 10px; line-height: 1.5; color: #91a071; }
.mascot-home { margin-top: 20px; gap: 12px; max-width: 350px; }
.mascot-home .mascot-button { flex-basis: 100px; width: 100px; height: 144px; }
.mascot-home .mascot-description { max-width: 190px; }
.mascot-projects { flex-shrink: 0; gap: 10px; }
.mascot-projects .mascot-button { flex-basis: 104px; width: 104px; height: 150px; }
.mascot-projects .mascot-caption { max-width: 125px; }
.mascot-projects .mascot-description, .mascot-projects .mascot-kicker { display: none; }
.projects-heading .collection-count { margin-left: auto; }
.mascot-about { margin-top: 25px; border-top: 1px solid #ffffff12; padding-top: 16px; }
.mascot-about .mascot-button { flex-basis: 120px; width: 120px; height: 180px; }
.mascot-lab { flex-shrink: 0; gap: 12px; }
.mascot-lab .mascot-caption { max-width: 145px; }
.mascot-contact { margin-top: 26px; }
.mascot-contact .mascot-button { flex-basis: 120px; width: 120px; height: 180px; }
.mascot-crop-bust .mascot-button { flex-basis: 120px; width: 120px; height: 144px; }
.mascot-crop-bust .mascot-figure { overflow: hidden; mask-image: linear-gradient(#000 86%, transparent 100%); }
.mascot-crop-bust .mascot-figure img { position: absolute; top: 0; left: -25%; width: 150%; max-width: none; height: auto; }
.mascot-crop-face .mascot-button { flex-basis: 100px; width: 100px; height: 108px; }
.mascot-crop-face .mascot-figure { overflow: hidden; border-radius: 46%; }
.mascot-crop-face .mascot-figure img { position: absolute; top: -3%; left: -50%; width: 200%; max-width: none; height: auto; }
.mascot-crop-face .mascot-ground { display: none; }
.mascot-crop-face .mascot-orbit { inset: 10% 0 0; }
.mascot-crop-face .mascot-change { bottom: 0; }
@media (max-width: 1000px) {
    .mascot-projects .mascot-caption { display: none; }
    .mascot-lab .mascot-button { flex-basis: 120px; width: 120px; height: 180px; }
    .mascot-lab .mascot-description { display: none; }
}
@media (max-width: 600px) {
    .lab-heading { flex-direction: column; align-items: flex-start; }
    .mascot-moment { gap: 12px; }
    .mascot-button, .mascot-home .mascot-button, .mascot-projects .mascot-button,
    .mascot-about .mascot-button, .mascot-lab .mascot-button, .mascot-contact .mascot-button {
        flex-basis: 96px; width: 96px; height: 140px;
    }
    .mascot-caption strong { font-size: 15px; }
    .mascot-description { font-size: 11px; }
    .mascot-home { margin-top: 15px; }
    .mascot-projects { position: absolute; right: 0; top: -8px; }
    .projects-heading { position: relative; padding-right: 94px; }
    .projects-heading .collection-count { margin-left: 0; }
    .mascot-projects .mascot-caption { display: none; }
    .mascot-lab { max-width: 300px; margin-top: 10px; }
    .mascot-lab .mascot-caption { max-width: 180px; }
    .mascot-lab .mascot-description { display: block; }
    .mascot-contact { margin-top: 18px; }
    .mascot-crop-face .mascot-button { flex-basis: 80px; width: 80px; height: 86px; }
    .mascot-crop-bust .mascot-button { flex-basis: 96px; width: 96px; height: 116px; }
}
:root[data-motion='off'] .mascot-figure, :root[data-motion='off'] .mascot-change { transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
    .mascot-figure, .mascot-change { transform: none !important; transition: none !important; }
}