/* The fox in costume (javascript/foxArt.js). Every rule is prefixed fa-.
   Motion only runs on an SVG that has .fa-anim (motion allowed), is slow
   and small, and stops for prefers-reduced-motion. */

/* In the work-area pop-up the storybook fox (storyFox.js layers) takes the
   plain fox's place, a little bigger: the helper grows from 84px to 106px
   wide and the bubble moves over with it (.fa-beside), so no more of the
   board's tools is covered than the bubble and fox already were. The plain
   fox stays until the storybook fox's pictures are drawn (fa-drawn), so a
   slow drawing never leaves the pop-up without a fox. */
.mascot-helper.fa-drawn .work-mascot {
    display: none;
}

.mascot-helper:not(.fa-drawn) .fa-popup-figure {
    display: none;
}

.mascot-helper.fa-costumed {
    width: 106px;
    transform: translate(18px, 20px);
}

.fox-reaction.fa-beside {
    right: 118px;
    max-width: min(16rem, calc(100% - 128px));
}

html.has-pages:not(.page-open) body:not(.homework-solving) #foxReaction.fa-beside {
    right: calc(var(--fox-pin-right, 275px) + 118px);
}

.fa-popup-figure {
    position: relative;
    width: 100%;
    height: 118px;
    pointer-events: none;
    user-select: none;
}

.fa-popup-figure .fa-story {
    position: absolute;
    inset: 0;
    transform-origin: 50% 100%;
    filter: drop-shadow(0 3px 4px rgba(40, 30, 20, 0.22));
}

/* His drawing box (400 x 560 units, boots at 92.5% down, 48.5% across),
   134px tall, boots on the bottom of the pop-up. */
.fa-popup-figure .sf-fox {
    position: absolute;
    left: 50%;
    bottom: -9px;
    width: 96px;
    height: 134px;
    margin-left: -46.5px;
    transform-origin: 48.5% 92.5%;
}

/* Story fox layers (storyFox.js), shared with Home and the Sunday reading. */
.sf-fox .sf-g,
.sf-fox .sf-p {
    position: absolute;
    inset: 0;
}

.sf-fox .sf-p[hidden] {
    display: none;
}

.sf-fox .sf-p img {
    display: block;
    width: 100%;
    height: 100%;
    user-select: none;
    pointer-events: none;
}

/* The closed lids show only for a blink (motion on). */
.fa-popup-figure .sf-p-blink {
    opacity: 0;
}

/* Arriving: a small hop up from below the bubble, then the day's loop. */
.fa-popup-figure .fa-story.fa-anim { animation: fa-arrive 0.7s cubic-bezier(.3, 1.5, .5, 1) both; }
.fa-popup-figure .fa-anim .sf-fox { animation: fa-breathe 4.2s ease-in-out 0.7s infinite; }
.fa-popup-figure .fa-anim .fa-g-head { animation: fa-look 7s ease-in-out 0.9s infinite; }
.fa-popup-figure .fa-anim .fa-g-tail { animation: fa-sway 6s ease-in-out infinite; }
.fa-popup-figure .fa-anim:not(.fa-face-sleepy) .sf-p-blink { animation: fa-blink 6.5s linear 1.4s infinite; }
.fa-popup-figure .fa-anim.fa-face-sleepy .sf-p-blink { animation: fa-doze 5.5s ease-in-out infinite; }

.fa-popup-figure .fa-anim.fa-act-brushing .fa-g-head { animation: fa-scrub 0.42s ease-in-out infinite alternate; }
.fa-popup-figure .fa-anim.fa-act-lunch .fa-g-head { animation: fa-munch 0.8s ease-in-out infinite; }
.fa-popup-figure .fa-anim.fa-act-sleeping .fa-g-head,
.fa-popup-figure .fa-anim.fa-act-waking .fa-g-head { animation: fa-drowse 5.5s ease-in-out infinite; }
.fa-popup-figure .fa-anim.fa-act-walking .sf-fox { animation: fa-stroll 1.3s ease-in-out 0.7s infinite; }
.fa-popup-figure .fa-anim.fa-act-walking .fa-g-arm { animation: fa-swing 2.6s ease-in-out infinite; }
.fa-popup-figure .fa-anim.fa-act-shower .sf-fox { animation: fa-shiver 0.18s linear 0.7s 6 alternate, fa-breathe 4.2s ease-in-out 2s infinite; }
.fa-popup-figure .fa-anim.fa-act-camp .fa-g-arm { animation: fa-tug 2.4s ease-in-out infinite; }
.fa-popup-figure .fa-anim.fa-mood-annoyed .fa-g-head { animation: fa-huff 2.2s ease-in-out infinite; }

.fa-popup-figure .fa-zz {
    position: absolute;
    z-index: 1;
    right: 4%;
    top: 0;
    font: italic 600 13px var(--serif, Georgia, serif);
    color: var(--ink-soft, #6b706a);
    opacity: 0;
}
.fa-popup-figure .fa-anim .fa-zz { animation: fa-zz 3.6s ease-out infinite; }
.fa-popup-figure .fa-anim .fa-zz2 { animation-delay: 1.8s; font-size: 10px; }

@keyframes fa-arrive {
    0% { transform: translateY(14px) scale(0.92); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}
@keyframes fa-breathe {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(1.008, 1.02); }
}
@keyframes fa-look {
    0%, 30%, 100% { transform: rotate(0deg); }
    40%, 55% { transform: rotate(-3deg); }
    65%, 80% { transform: rotate(2.2deg); }
}
@keyframes fa-scrub {
    from { transform: rotate(-2deg) translateX(-0.6px); }
    to { transform: rotate(2deg) translateX(0.6px); }
}
@keyframes fa-munch {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50% { transform: translateY(0.8px) scaleY(0.985); }
}
@keyframes fa-drowse {
    0%, 60%, 100% { transform: rotate(0deg) translateY(0); }
    70%, 85% { transform: rotate(4deg) translateY(1.5px); }
}
@keyframes fa-doze {
    0%, 62%, 92%, 100% { opacity: 0; }
    68%, 86% { opacity: 1; }
}
@keyframes fa-stroll {
    0%, 100% { transform: translateY(0) rotate(-0.8deg); }
    25% { transform: translateY(-1.5px) rotate(0deg); }
    50% { transform: translateY(0) rotate(0.8deg); }
    75% { transform: translateY(-1.5px) rotate(0deg); }
}
@keyframes fa-swing {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(3deg); }
}
@keyframes fa-shiver {
    from { transform: translateX(-0.6px); }
    to { transform: translateX(0.6px); }
}
@keyframes fa-tug {
    0%, 100% { transform: rotate(0deg); }
    45%, 55% { transform: rotate(-5deg); }
}
@keyframes fa-huff {
    0%, 70%, 100% { transform: rotate(0deg); }
    76% { transform: rotate(-3deg); }
    82% { transform: rotate(3deg); }
    88% { transform: rotate(-1.5deg); }
}
@keyframes fa-zz {
    0% { opacity: 0; transform: translate(0, 6px) scale(0.8); }
    25% { opacity: 0.9; }
    100% { opacity: 0; transform: translate(10px, -16px) scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    .fa-popup-figure .fa-story,
    .fa-popup-figure .fa-story * { animation: none !important; }
    .fa-popup-figure .fa-zz { display: none; }
}

.fa-popup-figure svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* One short in-character line above the fox's own line. */
.fa-aside {
    margin: 0;
    flex: 1 1 100%;
    font-size: 0.8rem;
    font-style: italic;
    line-height: 1.3;
    color: var(--ink-soft, var(--ink));
}

.fa-fox {
    overflow: visible;
}

@keyframes fa-sway {
    0%, 100% { transform: rotate(-2.5deg); }
    50% { transform: rotate(2.5deg); }
}

@keyframes fa-blink {
    0%, 95%, 100% { opacity: 0; }
    96.2%, 97.8% { opacity: 1; }
}

/* Sleeping: a yawn early in the cycle, an eye rub later. */
@keyframes fa-yawn-show {
    0%, 8%, 26%, 100% { opacity: 0; }
    10%, 23% { opacity: 1; }
}

@keyframes fa-yawn-hide {
    0%, 8%, 26%, 100% { opacity: 1; }
    10%, 23% { opacity: 0; }
}

@keyframes fa-rub-show {
    0%, 54%, 80%, 100% { opacity: 0; transform: translate(0, 0); }
    56% { opacity: 1; transform: translate(0, 0); }
    60%, 68% { opacity: 1; transform: translate(-2px, 1.5px); }
    64%, 72% { opacity: 1; transform: translate(1px, -1px); }
    78% { opacity: 1; transform: translate(0, 0); }
}

@keyframes fa-rub-hide {
    0%, 54%, 80%, 100% { opacity: 1; }
    56%, 78% { opacity: 0; }
}

@keyframes fa-brush {
    from { transform: translateX(-2px); }
    to { transform: translateX(2px); }
}

@keyframes fa-chew {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(1.035, 0.97); }
}

@keyframes fa-chew-mouth {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(1.2px); }
}

@keyframes fa-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1.6px); }
}

@keyframes fa-drop {
    0% { transform: translateY(0); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(16px); opacity: 0; }
}

@keyframes fa-flicker {
    0%, 100% { opacity: 0.22; }
    40% { opacity: 0.36; }
    70% { opacity: 0.27; }
}

@keyframes fa-bubble {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translateY(-14px); opacity: 0; }
}

.fa-anim .fa-tail {
    animation: fa-sway 6s ease-in-out infinite;
}

.fa-anim:not(.fa-act-sleeping):not(.fa-act-waking) .fa-blink {
    animation: fa-blink 7s linear infinite;
}

.fa-anim .fa-pompom {
    animation: fa-sway 5s ease-in-out infinite;
}

.fa-anim.fa-act-sleeping .fa-yawn,
.fa-anim.fa-act-sleeping .fa-squeeze {
    animation: fa-yawn-show 9s ease-in-out infinite;
}

.fa-anim.fa-act-sleeping .fa-lips {
    animation: fa-yawn-hide 9s ease-in-out infinite;
}

.fa-anim.fa-act-sleeping .fa-arm-rub {
    animation: fa-rub-show 9s ease-in-out infinite;
}

.fa-anim.fa-act-sleeping .fa-arm-rest {
    animation: fa-rub-hide 9s ease-in-out infinite;
}

.fa-anim.fa-act-waking .fa-yawn,
.fa-anim.fa-act-waking .fa-squeeze {
    animation: fa-yawn-show 10s ease-in-out 2s infinite;
}

.fa-anim.fa-act-waking .fa-lips {
    animation: fa-yawn-hide 10s ease-in-out 2s infinite;
}

.fa-anim .fa-drop {
    animation: fa-drop 2.8s ease-in infinite;
}

.fa-anim .fa-drop2 {
    animation-delay: 1.4s;
}

.fa-anim .fa-brush {
    animation: fa-brush 0.6s ease-in-out infinite alternate;
}

.fa-anim .fa-bubble {
    animation: fa-bubble 3.2s ease-out infinite;
}

.fa-anim .fa-cheeks {
    animation: fa-chew 0.9s ease-in-out infinite;
}

.fa-anim .fa-chew {
    animation: fa-chew-mouth 0.9s ease-in-out infinite;
}

.fa-anim.fa-act-walking .fa-body {
    animation: fa-bob 1.8s ease-in-out infinite;
}

.fa-anim .fa-bindle {
    animation: fa-sway 3.6s ease-in-out infinite;
}

@keyframes fa-flame {
    from { transform: scale(1, 1); }
    to { transform: scale(0.94, 1.08); }
}

.fa-anim .fa-flame {
    animation: fa-flame 0.9s ease-in-out infinite alternate;
}

.fa-anim .fa-glow {
    animation: fa-flicker 2.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .fa-fox,
    .fa-fox * {
        animation: none !important;
    }
}