/* Loading-screen face. Two cream dots in the same bubble.
   They move together, slow and a little springy. Reduced motion only blinks. */

.face-mark { overflow: visible; }

.face-mark .eyes,
.face-mark .eye,
.face-mark .dot,
.face-mark .arc,
.face-mark .mouth-o,
.face-mark .zee {
    transform-box: fill-box;
    transform-origin: center;
}

.face-mark .eyes {
    transition: transform 1.05s cubic-bezier(0.22, 1.22, 0.36, 1);
}

.face-mark .dot,
.face-mark .arc,
.face-mark .mouth-o {
    transition: transform 0.85s cubic-bezier(0.22, 1.18, 0.36, 1), opacity 0.45s ease;
}

.face-mark .arc,
.face-mark .mouth-o,
.face-mark .zee {
    opacity: 0;
}

.face-mark .zee {
    transform-origin: 0 0;
    pointer-events: none;
}

.face-mark[data-pose="blink"] .dot {
    animation: face-blink 0.7s ease-in-out;
}

.face-mark[data-pose="double-blink"] .dot {
    animation: face-double 1.55s ease-in-out;
}

@keyframes face-blink {
    0%, 100% { transform: scaleY(1); }
    36%, 58% { transform: scaleY(0.12); }
}

@keyframes face-double {
    0%, 100% { transform: scaleY(1); }
    12%, 24% { transform: scaleY(0.12); }
    40% { transform: scaleY(1); }
    54%, 68% { transform: scaleY(0.12); }
}

.face-mark[data-pose="glance-left"] .eyes { transform: translate(-30%, 8%); }
.face-mark[data-pose="glance-right"] .eyes { transform: translate(30%, 8%); }
.face-mark[data-pose="glance-up"] .eyes { transform: translate(0, -36%); }
.face-mark[data-pose="glance-down"] .eyes { transform: translate(0, 28%); }

.face-mark[data-pose="bounce"] .eyes {
    animation: face-bounce 1.15s cubic-bezier(0.22, 1.25, 0.36, 1);
}

@keyframes face-bounce {
    0%, 100% { transform: translateY(0); }
    38% { transform: translateY(-16%); }
    64% { transform: translateY(0); }
    80% { transform: translateY(-7%); }
}

.face-mark[data-pose="curious"] .eyes { transform: rotate(-7deg); }
.face-mark[data-pose="curious"] .eye-r .dot { transform: scaleY(0.42); }

.face-mark[data-state="listening"] .dot { transform: scale(1.12, 1.32); }
.face-mark[data-state="listening"] .mouth-o {
    opacity: 1;
    animation: face-sing 1.7s ease-in-out infinite;
}

@keyframes face-sing {
    0%, 100% { transform: scale(0.45); }
    50% { transform: scale(1); }
}

.face-mark[data-state="sleepy"] .dot { transform: translateY(70%) scaleY(0.16); }
.face-mark[data-state="sleepy"]:not([data-pose]) .eyes {
    animation: face-sleep-float 5.2s ease-in-out infinite;
}
.face-mark[data-state="sleepy"] .mouth-o {
    opacity: 1;
    animation: face-yawn 3.8s ease-in-out infinite;
}
.face-mark[data-state="sleepy"] .zee { animation: face-float-z 4.4s ease-in-out infinite; }
.face-mark[data-state="sleepy"][data-pose="blink"] .dot,
.face-mark[data-state="sleepy"][data-pose="double-blink"] .dot {
    animation: face-sleepy-blink 0.85s ease-in-out;
}

@keyframes face-sleep-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12%); }
}

@keyframes face-yawn {
    0%, 100% { transform: scale(0.35); }
    46%, 64% { transform: scale(1); }
}

@keyframes face-float-z {
    0%, 16% { opacity: 0; transform: translate(0, 20%); }
    34% { opacity: 0.9; transform: translate(12%, -40%); }
    100% { opacity: 0; transform: translate(28%, -150%); }
}

@keyframes face-sleepy-blink {
    0%, 100% { transform: translateY(70%) scaleY(0.16); }
    40%, 60% { transform: translateY(78%) scaleY(0.07); }
}

.face-mark[data-state="happy"] .dot { opacity: 0; }
.face-mark[data-state="happy"] .arc { opacity: 1; }
.face-mark[data-state="happy"] .eyes {
    animation: face-happy-bob 1.7s cubic-bezier(0.22, 1.2, 0.36, 1) 1;
}

@keyframes face-happy-bob {
    0%, 100% { transform: translateY(0); }
    34% { transform: translateY(-12%); }
    62% { transform: translateY(0); }
    78% { transform: translateY(-5%); }
}

.face-mark[data-state="thinking"]:not([data-pose]) .eyes {
    animation: face-think 5.6s ease-in-out infinite;
}

@keyframes face-think {
    0%, 100% { transform: translate(22%, -28%); }
    50% { transform: translate(34%, -46%); }
}

@media (prefers-reduced-motion: reduce) {
    .face-mark .eyes,
    .face-mark .dot,
    .face-mark .mouth-o,
    .face-mark .zee,
    .face-mark[data-state="thinking"] .eyes,
    .face-mark[data-state="sleepy"] .eyes,
    .face-mark[data-state="sleepy"] .mouth-o,
    .face-mark[data-state="sleepy"] .zee,
    .face-mark[data-state="listening"] .mouth-o,
    .face-mark[data-state="happy"] .eyes,
    .face-mark[data-pose="bounce"] .eyes {
        animation: none !important;
    }
    .face-mark[data-state="thinking"] .eyes { transform: none; }
    .face-mark[data-state="sleepy"] .dot { transform: translateY(70%) scaleY(0.16); }
    .face-mark[data-state="sleepy"] .mouth-o { opacity: 1; transform: scale(0.55); }
    .face-mark[data-state="sleepy"] .zee { opacity: 0.85; transform: none; }
    .face-mark[data-pose="blink"] .dot,
    .face-mark[data-pose="double-blink"] .dot {
        animation: face-blink 0.9s ease-in-out !important;
    }
    .face-mark[data-state="sleepy"][data-pose="blink"] .dot {
        animation: face-sleepy-blink 0.9s ease-in-out !important;
    }
}

html.face-reduced .face-mark .eyes,
html.face-reduced .face-mark .dot,
html.face-reduced .face-mark .mouth-o,
html.face-reduced .face-mark .zee,
html.face-reduced .face-mark[data-state="thinking"] .eyes,
html.face-reduced .face-mark[data-state="sleepy"] .eyes,
html.face-reduced .face-mark[data-state="sleepy"] .mouth-o,
html.face-reduced .face-mark[data-state="sleepy"] .zee,
html.face-reduced .face-mark[data-state="listening"] .mouth-o,
html.face-reduced .face-mark[data-state="happy"] .eyes,
html.face-reduced .face-mark[data-pose="bounce"] .eyes {
    animation: none !important;
}

html.face-reduced .face-mark[data-state="thinking"] .eyes { transform: none; }
html.face-reduced .face-mark[data-state="sleepy"] .dot { transform: translateY(70%) scaleY(0.16); }
html.face-reduced .face-mark[data-state="sleepy"] .mouth-o { opacity: 1; transform: scale(0.55); }
html.face-reduced .face-mark[data-state="sleepy"] .zee { opacity: 0.85; transform: none; }
html.face-reduced .face-mark[data-pose="blink"] .dot,
html.face-reduced .face-mark[data-pose="double-blink"] .dot {
    animation: face-blink 0.9s ease-in-out !important;
}
html.face-reduced .face-mark[data-state="sleepy"][data-pose="blink"] .dot {
    animation: face-sleepy-blink 0.9s ease-in-out !important;
}

/* Route change. A small face passes through. It does not take taps. */
.face-route {
    position: fixed;
    inset: 0;
    z-index: 140;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    visibility: hidden;
}
.face-route.is-on { visibility: visible; }
.face-route-hold { width: 96px; }
.face-route .brand-logo { width: 96px; margin: 0; }
.face-route.is-on .face-route-hold {
    animation: face-route-glide 520ms ease forwards;
}
.face-route.is-on[data-dir="left"] .face-route-hold {
    animation-name: face-route-glide-left;
}
@keyframes face-route-glide {
    0% { opacity: 0; transform: translateX(-12px) scale(0.9); }
    26% { opacity: 1; transform: translateX(0) scale(1); }
    64% { opacity: 1; transform: translateX(6px) scale(1); }
    100% { opacity: 0; transform: translateX(10px) scale(0.94); }
}
@keyframes face-route-glide-left {
    0% { opacity: 0; transform: translateX(12px) scale(0.9); }
    26% { opacity: 1; transform: translateX(0) scale(1); }
    64% { opacity: 1; transform: translateX(-6px) scale(1); }
    100% { opacity: 0; transform: translateX(-10px) scale(0.94); }
}
.face-route-mark .eyes {
    transition: transform 280ms cubic-bezier(0.22, 1.04, 0.36, 1);
}
.face-route-mark[data-look="right"] .eyes { transform: translate(22%, 4%); }
.face-route-mark[data-look="left"] .eyes { transform: translate(-22%, 4%); }
.face-route-mark[data-pose="blink"] .dot { animation-duration: 0.42s; }
.face-route-mark[data-state="happy"] .eyes,
.face-route-mark[data-state="sleepy"] .eyes,
.face-route-mark[data-state="sleepy"] .mouth-o,
.face-route-mark[data-state="sleepy"] .zee {
    animation: none;
}
.face-route-mark[data-state="sleepy"] .mouth-o { opacity: 0; }
.face-route-mark[data-state="sleepy"] .zee { opacity: 0.85; transform: none; }
.face-incoming { animation: face-view-in 480ms ease; }
@keyframes face-view-in {
    from { opacity: 0.2; }
    to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .face-route { display: none !important; }
    .face-incoming { animation: face-view-in 300ms ease !important; }
}
html.face-reduced .face-route { display: none !important; }
html.face-reduced .face-incoming { animation: face-view-in 300ms ease !important; }

/* Header and other small marks stay the dots, and only blink. */
.top-bar .logo .face-mark,
.logo .face-tiny {
    width: 36px;
    height: auto;
    margin: 0;
}
.guide-thumb.face-mark {
    width: 64px;
    height: auto;
}
.credits-sheet-mark.face-mark,
.celebrate-logo.face-mark {
    width: 72px;
    height: auto;
}
.tonie-avatar-btn .face-mark {
    width: 100%;
    height: auto;
    margin: 0;
}
html[data-daypart="night"] .top-bar .face-tiny {
    filter: drop-shadow(0 0 1px #FFF8EC);
}