body {
    font-family: 'Outfit', sans-serif;
}

.font-display {
    font-family: 'Fraunces', serif;
}

.dark {
    color-scheme: dark;
}

/* ── Scene backdrop — a soft wash in light mode, a starry night in
   dark mode. Both tinted by the live --color-primary. ── */
body {
    background:
        radial-gradient(closest-side, rgb(var(--color-primary-rgb) / 0.10), transparent 70%),
        linear-gradient(160deg, #f8fafc, #eef2ff);
}

.dark body,
html.dark body {
    background:
        radial-gradient(1px 1px at 20% 30%, rgb(255 255 255 / .5) 50%, transparent 51%),
        radial-gradient(1px 1px at 70% 20%, rgb(255 255 255 / .4) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 40% 70%, rgb(255 255 255 / .45) 50%, transparent 51%),
        radial-gradient(1px 1px at 85% 65%, rgb(255 255 255 / .35) 50%, transparent 51%),
        radial-gradient(1px 1px at 10% 85%, rgb(255 255 255 / .35) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 90% 90%, rgb(255 255 255 / .4) 50%, transparent 51%),
        linear-gradient(160deg, rgb(var(--color-primary-rgb) / 0.35) 0%, #100c1f 55%, #07060c 100%);
}

html.dark body {
    background:
        radial-gradient(1px 1px at 20% 30%, rgb(255 255 255 / .5) 50%, transparent 51%),
        radial-gradient(1px 1px at 70% 20%, rgb(255 255 255 / .4) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 40% 70%, rgb(255 255 255 / .45) 50%, transparent 51%),
        radial-gradient(1px 1px at 85% 65%, rgb(255 255 255 / .35) 50%, transparent 51%),
        radial-gradient(1px 1px at 10% 85%, rgb(255 255 255 / .35) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 90% 90%, rgb(255 255 255 / .4) 50%, transparent 51%),
        linear-gradient(160deg, rgb(var(--color-primary-rgb) / 0.35) 0%, #100c1f 55%, #07060c 100%);
}

/* ── Mascot ── (raw CSS: organic blob shapes aren't expressible in
   Tailwind utilities) — body colored with the live primary/secondary
   gradient instead of a fixed skin tone, so it re-skins with the theme. */
.mascot-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    z-index: 3;
    margin-bottom: -46px;
}

.mascot {
    width: 132px;
    height: 96px;
    background: linear-gradient(160deg, var(--color-secondary, #8B6CF9), var(--color-primary, #6C4CF1));
    border-radius: 50% 50% 46% 46% / 65% 65% 35% 35%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    position: relative;
    box-shadow: 0 10px 24px -8px rgb(var(--color-primary-rgb) / 0.55), inset 0 -6px 10px rgb(0 0 0 / 0.08);
}

.mascot::before,
.mascot::after {
    content: '';
    position: absolute;
    top: -14px;
    width: 26px;
    height: 34px;
    background: inherit;
    border-radius: 60% 60% 40% 40%;
}

.mascot::before {
    left: 6px;
    transform: rotate(-18deg);
}

.mascot::after {
    right: 6px;
    transform: rotate(18deg);
}

.mascot .cheek {
    position: absolute;
    bottom: 14px;
    width: 14px;
    height: 8px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.35);
}

.mascot .cheek.l {
    left: 14px;
}

.mascot .cheek.r {
    right: 14px;
}

.eye {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 2px 5px rgb(0 0 0 / 0.18);
    transition: transform 0.09s ease-out;
    z-index: 1;
}

.eye.blink {
    transform: scaleY(0.12);
}

.iris {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--color-secondary, #8B6CF9), var(--color-primary, #6C4CF1) 70%);
    position: absolute;
    top: 9px;
    left: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.12s ease-out;
    will-change: transform;
}

.pupil {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1b1730;
    position: relative;
}

.pupil::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 1px;
    width: 2.5px;
    height: 2.5px;
    background: rgb(255 255 255 / 0.9);
    border-radius: 50%;
}

.eyelid {
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, var(--color-secondary, #8B6CF9), var(--color-primary, #6C4CF1));
    border-radius: 50%;
    transform: translateY(-100%);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 2;
}

.mascot.closed .eyelid {
    transform: translateY(0%);
}

.mascot.peek .eyelid {
    transform: translateY(-58%);
}

@media (prefers-reduced-motion: reduce) {

    .eye,
    .eyelid,
    .iris {
        transition: none !important;
    }
}

/* ── Mouth — invisible in the neutral face; a frown only appears in the
   sad/crying mood (login error), so the default look stays unchanged. ── */
.mascot .mouth {
    position: absolute;
    bottom: 12px;
    width: 18px;
    height: 9px;
    border-top: 3px solid rgb(255 255 255 / 0.65);
    border-radius: 18px 18px 0 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* ── Sad / crying mood — triggered on a login error ── */
.mascot.sad .mouth {
    opacity: 1;
}

.mascot.sad .eye {
    transform: scaleY(0.72);
}

.mascot.sad .cheek {
    background: rgb(255 120 120 / 0.5);
}

.tear {
    position: absolute;
    width: 7px;
    height: 9px;
    background: linear-gradient(180deg, rgb(140 200 255 / 0.95), rgb(90 160 255 / 0.95));
    border-radius: 50% 50% 50% 0;
    transform: rotate(45deg);
    top: 58px;
    opacity: 0;
    z-index: 3;
    pointer-events: none;
}

.tear.l {
    left: 30px;
}

.tear.r {
    right: 30px;
}

.mascot.sad .tear {
    animation: tear-fall 1.6s ease-in infinite;
}

.mascot.sad .tear.r {
    animation-delay: 0.6s;
}

@keyframes tear-fall {
    0% {
        opacity: 0;
        top: 56px;
        transform: rotate(45deg) scale(0.6);
    }

    15% {
        opacity: 1;
        transform: rotate(45deg) scale(1);
    }

    80% {
        opacity: 1;
        top: 88px;
    }

    100% {
        opacity: 0;
        top: 92px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mascot.sad .tear {
        animation: none !important;
        opacity: 1;
        top: 60px;
    }
}

/* ── Segmented Email/Phone tabs ── */
.tab-active {
    background: var(--color-primary);
    color: #fff;
}

/* ── Toast ── */
#toast {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#toast.toast-hidden {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}

.error-shake {
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    75% {
        transform: translateX(6px);
    }
}

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up {
    animation: fade-up 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .fade-up {
        animation: none;
    }
}