/**
 * The login bear's states.
 *
 * Colours come from Filament's own `--primary-*` variables, so the bear is
 * emerald on the student panel and amber on the coordinator's without either
 * knowing about the other. Plain CSS, not Tailwind utilities: the panel ships a
 * compiled stylesheet and utility classes in a Blade view render unstyled
 * unless the project also builds a custom theme.
 */

.login-bear {
    /* Where the eyes are pointed. The script sets both: down at whichever
       field has focus, and along the line as it is typed. */
    --bear-gaze-x: 0px;
    --bear-gaze-y: 0px;

    width: 132px;
    height: 132px;
    margin: 0 auto 1.5rem;
    /* Nothing here is interactive; never take a click from the form. */
    pointer-events: none;
    user-select: none;
}

.login-bear svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
}

.bear-bg {
    fill: var(--primary-100, #d1fae5);
}

.bear-fur {
    fill: var(--primary-400, #34d399);
}

.bear-inner-ear,
.bear-muzzle {
    fill: var(--primary-200, #a7f3d0);
}

.bear-pad {
    fill: var(--primary-200, #a7f3d0);
}

.bear-nose {
    fill: var(--gray-800, #1f2937);
}

.bear-eye {
    fill: var(--gray-800, #1f2937);
}

.bear-glint {
    fill: #fff;
}

.bear-mouth {
    fill: none;
    stroke: var(--gray-800, #1f2937);
    stroke-width: 4;
    stroke-linecap: round;
}

.bear-eyes {
    transform: translate(var(--bear-gaze-x), var(--bear-gaze-y));
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
}

/*
 * The blink.
 *
 * Squashing the eyes to nothing for a frame and letting them back reads as a
 * blink; drawing a lid over them would need one more shape per eye and match
 * the fur exactly, which the muzzle already makes awkward. Its own group, so
 * the squash and the gaze are not fighting over one transform property.
 *
 * Roughly every five seconds, in a pair — one blink alone looks like a glitch,
 * two looks like a bear.
 */
.bear-blink {
    transform-box: fill-box;
    transform-origin: center;
    animation: bear-blink 5.4s infinite;
}

@keyframes bear-blink {
    0%, 88%, 100% { transform: scaleY(1); }
    90% { transform: scaleY(0.06); }
    92% { transform: scaleY(1); }
    94% { transform: scaleY(0.06); }
    96% { transform: scaleY(1); }
}

/* Eyes shut behind the paws are wasted work, and a blink under them would
   flicker at the edges. */
.login-bear.is-shy .bear-blink,
.login-bear.is-happy .bear-blink {
    animation: none;
}

.bear-eyes-closed {
    fill: none;
    stroke: var(--gray-800, #1f2937);
    stroke-width: 5;
    stroke-linecap: round;
    opacity: 0;
}

/* Below the picture until they are wanted. Far enough down that no sliver of
   paw shows at the bottom of the circle when the bear is simply sitting there. */
.bear-paws {
    transform: translateY(140px);
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.bear-paw-left,
.bear-paw-right {
    /*
     * Rotate the paw about its own base. An SVG element defaults to
     * transform-box: view-box with the origin at 0 0 — the top-left corner of
     * the whole drawing — so a 6deg tilt swung the paws sideways and left one
     * 13px higher than the other. fill-box makes the origin the paw's own box.
     */
    transform-box: fill-box;
    transform-origin: 50% 100%;
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Watching you type: only the eyes move, via --bear-gaze from the script. */

/* Hiding: paws all the way up, and a slight inward tilt so they meet. */
.login-bear.is-shy .bear-paws {
    transform: translateY(0);
}

.login-bear.is-shy .bear-paw-left {
    transform: rotate(6deg);
}

.login-bear.is-shy .bear-paw-right {
    transform: rotate(-6deg);
}

/* Peeking: the same paws, stopped low enough to see over. */
.login-bear.is-peeking .bear-paws {
    transform: translateY(26px);
}

.login-bear.is-peeking .bear-paw-left {
    transform: rotate(3deg);
}

.login-bear.is-peeking .bear-paw-right {
    transform: rotate(-3deg);
}

/* Pleased: eyes close, and the smile is already in the artwork. */
.login-bear.is-happy .bear-eyes {
    opacity: 0;
}

.login-bear.is-happy .bear-eyes-closed {
    opacity: 1;
}

.login-bear.is-happy svg {
    animation: bear-bob 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes bear-bob {
    0% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-8px) scale(1.04); }
    100% { transform: translateY(0) scale(1); }
}

/* Somebody who has asked their system not to animate things means it: the bear
   stays, the movement does not. */
@media (prefers-reduced-motion: reduce) {
    .bear-blink { animation: none; }

    .bear-eyes,
    .bear-paws,
    .bear-paw-left,
    .bear-paw-right {
        transition: none;
    }

    .login-bear.is-happy svg {
        animation: none;
    }
}