/**
 * Ambient "Fun" gimmicks (Administration -> Fun): the office cat, seasonal
 * weather, the desk toy, and the footer fortune cookie. The rabbit's own
 * styles stay in core/layout.css next to its markup in navbar.php; this file
 * covers the four gimmicks driven by fun-ambient.php/.js + footer-content.php.
 *
 * Loaded on every page (layouts/app.php $coreCssFiles). Every rule here is
 * scoped to a .fun-* class, so a page with nothing switched on pays for an
 * unused stylesheet and nothing more.
 */

/* ── The office cat ───────────────────────────────────────────────────── */
.fun-cat {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1035;
    width: clamp(90px, 9vw, 130px);
    aspect-ratio: 44 / 26;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #241f1c;
    opacity: 0;
    pointer-events: none;
    transform: translate(-90px, 0);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 5px rgba(255, 255, 255, 0.45));
    will-change: transform, opacity;
}
.fun-cat__svg { display: block; width: 100%; height: 100%; }

.fun-cat.is-strolling {
    pointer-events: auto;
    cursor: pointer;
    animation: fun-cat-stroll 18s linear forwards;
}
.fun-cat.is-strolling:hover,
.fun-cat.is-strolling:focus-visible {
    animation-play-state: paused;
}
.fun-cat:focus-visible {
    outline: 2px solid rgba(0, 0, 0, 0.55);
    outline-offset: 3px;
    border-radius: 6px;
}

.fun-cat__bubble {
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    margin-bottom: 10px;
    max-width: 220px;
    width: max-content;
    background: #fff;
    color: #202124;
    font-size: 0.78rem;
    line-height: 1.4;
    text-align: center;
    padding: 0.5em 0.75em;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}
.fun-cat__bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fff;
}

@keyframes fun-cat-stroll {
    0%   { opacity: 0; transform: translate(-90px, 0); }
    4%   { opacity: 1; }
    10%  { transform: translate(10vw, -3px); }
    16%  { transform: translate(20vw, 0); }
    22%  { transform: translate(30vw, -3px); }
    28%  { transform: translate(40vw, 0); }
    32%  { transform: translate(42vw, 0); }
    64%  { transform: translate(42vw, 0); }   /* sitting still */
    70%  { transform: translate(52vw, -3px); }
    76%  { transform: translate(62vw, 0); }
    82%  { transform: translate(72vw, -3px); }
    88%  { transform: translate(84vw, 0); }
    96%  { opacity: 1; }
    100% { opacity: 0; transform: translate(calc(100vw + 90px), 0); }
}

@media (prefers-reduced-motion: reduce) {
    /* Rests bottom-LEFT, not bottom-right — the desk toy docks bottom-right
       and a parked (rather than travelling-through) cat must not sit under it. */
    .fun-cat.is-strolling {
        animation: fun-cat-peek 6000ms ease forwards;
    }
    @keyframes fun-cat-peek {
        0%   { opacity: 0; transform: translate(24px, 6px); }
        15%  { opacity: 1; transform: translate(24px, 0); }
        85%  { opacity: 1; transform: translate(24px, 0); }
        100% { opacity: 0; transform: translate(24px, 0); }
    }
}

/* ── Seasonal weather — confined to the navbar strip itself ─────────────
   top:0/height:var(--topnav-height) means it can never reach page content,
   which starts exactly at --topnav-height (see .wrapper in layout.css). */
.fun-weather {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--topnav-height);
    overflow: hidden;
    pointer-events: none;
    z-index: 1031;
}
.fun-flake,
.fun-leaf {
    position: absolute;
    top: -10px;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.fun-flake {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.65);
    animation-name: fun-flake-fall;
}
.fun-leaf {
    border-radius: 0 60% 0 60%;
    animation-name: fun-leaf-fall;
}
.fun-leaf--a { background: #d98a3d; }
.fun-leaf--b { background: #c15a2c; }
.fun-leaf--c { background: #e0b23a; }

@keyframes fun-flake-fall {
    0%   { transform: translateY(-10px); opacity: 0; }
    15%  { opacity: 0.9; }
    80%  { opacity: 0.6; }
    100% { transform: translateY(72px); opacity: 0; }
}
@keyframes fun-leaf-fall {
    0%   { transform: translate(0, -10px) rotate(0deg); opacity: 0; }
    15%  { opacity: 0.9; }
    50%  { transform: translate(6px, 30px) rotate(140deg); }
    80%  { opacity: 0.6; }
    100% { transform: translate(-6px, 72px) rotate(300deg); opacity: 0; }
}

/* ── The desk toy — bubble wrap ──────────────────────────────────────── */
.fun-desktoy {
    position: fixed;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 1035;
    background: var(--theme-bg-primary, #fff);
    color: var(--theme-text-primary, #212529);
    border: 1px solid var(--theme-footer-border, rgba(0, 0, 0, 0.1));
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
    padding: 0.5rem 0.6rem 0.6rem;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.fun-desktoy.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.fun-desktoy__dismiss {
    position: absolute;
    top: 0;
    right: 4px;
    background: none;
    border: 0;
    color: inherit;
    opacity: 0.55;
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.25em;
    cursor: pointer;
}
.fun-desktoy__dismiss:hover { opacity: 1; }
.fun-desktoy__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 0.9rem;
}
.fun-bubble {
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #e6f6ff, #a9d7f2 60%, #6fb3dd);
    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.18), 0 1px 1px rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.fun-bubble:hover { transform: scale(1.08); }
.fun-bubble.popped {
    background: #d8dee2;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
    transform: scale(0.85);
    cursor: default;
}
.fun-bubble.popped:hover { transform: scale(0.85); }

/* ── Footer fortune cookie ───────────────────────────────────────────── */
.fun-fortune-wrap {
    position: relative;
    display: inline-block;
    margin-left: 0.5rem;
    vertical-align: middle;
}
.fun-fortune {
    background: none;
    border: 0;
    padding: 0 0.1em;
    font-size: 1rem;
    line-height: 1;
    color: var(--theme-text-secondary, #6c757d);
    cursor: pointer;
}
.fun-fortune.is-fresh {
    color: #b8860b;
    text-shadow: 0 0 6px rgba(184, 134, 11, 0.5);
    animation: fun-fortune-twinkle 2.4s ease-in-out infinite;
}
@keyframes fun-fortune-twinkle {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
.fun-fortune__text {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
    background: #212529;
    color: #fff;
    padding: 0.5em 0.8em;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: normal;
    width: max-content;
    max-width: 240px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    z-index: 10;
}
.fun-fortune__text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #212529;
}

@media (prefers-reduced-motion: reduce) {
    .fun-fortune.is-fresh { animation: none; }
}