/* The dog lives only in a shallow, non-interactive bottom lane. */
#site-pet-controls[hidden],
#site-pet-strip[hidden] { display: none !important; }

#site-pet-controls {
    display: grid;
    justify-items: center;
    gap: .45rem;
    margin: 1rem auto 0;
    padding: 0 1rem calc(100px + env(safe-area-inset-bottom, 0px));
    max-width: 30rem;
    box-sizing: border-box;
    text-align: center;
}

#site-pet-toggle {
    min-width: 44px;
    min-height: 44px;
    max-width: 100%;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: .55rem 1rem;
    color: var(--text-color, #333);
    background: var(--bg-1, #f4f1ed);
    font: inherit;
    line-height: 1.3;
    cursor: pointer;
    overflow-wrap: anywhere;
}

#site-pet-toggle[aria-pressed="true"] {
    border-color: var(--primary-color, #7a4f2e);
    box-shadow: inset 0 0 0 1px var(--primary-color, #7a4f2e);
}

#site-pet-toggle:focus-visible {
    outline: 3px solid var(--primary-color, #7a4f2e);
    outline-offset: 4px;
}

#site-pet-hint { line-height: 1.5; }

#site-pet-strip {
    position: fixed;
    /* Both edges stay clear of tabi's right-hand quick-navigation buttons. */
    left: 5rem;
    right: 5rem;
    bottom: env(safe-area-inset-bottom, 0px);
    height: 100px;
    overflow: hidden;
    contain: layout paint;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    direction: ltr;
}
#site-pet-strip * { pointer-events: none; }

/* A shared 48s clock: sit, stroll, sit, sleep, sit, return, sit.
   Only the walking sprite is visible while the carrier changes position.
   Sprite frames articulate opposite leg pairs and the tail; no SVG scripting. */
.site-pet-walk {
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 96px;
    height: 96px;
    animation: site-pet-stroll 48s linear infinite;
}
.site-pet-face {
    position: relative;
    width: 96px;
    height: 96px;
    animation: site-pet-turn 48s steps(1, end) infinite;
}
.site-pet-sit, .site-pet-sleep, .site-pet-gait {
    position: absolute;
    inset: 0;
    display: block;
    width: 96px;
    height: 96px;
    max-width: none;
}
.site-pet-sit { animation: site-pet-sitting 48s steps(1, end) infinite; }
.site-pet-sleep {
    visibility: hidden;
    transform-origin: 50% 90%;
    animation: site-pet-sleeping 48s steps(1, end) infinite,
               site-pet-breathe 4s ease-in-out infinite;
}
.site-pet-gait {
    visibility: hidden;
    overflow: hidden;
    animation: site-pet-walking 48s steps(1, end) infinite;
}
.site-pet-gait img {
    display: block;
    width: 384px;
    height: 96px;
    max-width: none;
    animation: site-pet-legs .8s steps(4, end) infinite;
}
@keyframes site-pet-stroll {
    0%, 12.5% { left: 0; }
    41.666666%, 66.666666% { left: max(0px, calc(100% - 96px)); }
    95.833333%, 100% { left: 0; }
}
@keyframes site-pet-turn {
    0%, 100% { transform: scaleX(1); }
    66.666666% { transform: scaleX(-1); }
}
@keyframes site-pet-sitting {
    0%, 41.666666%, 62.5%, 95.833333%, 100% { visibility: visible; }
    12.5%, 50%, 66.666666% { visibility: hidden; }
}
@keyframes site-pet-walking {
    0%, 41.666666%, 95.833333%, 100% { visibility: hidden; }
    12.5%, 66.666666% { visibility: visible; }
}
@keyframes site-pet-sleeping {
    0%, 62.5%, 100% { visibility: hidden; }
    50% { visibility: visible; }
}
@keyframes site-pet-legs {
    to { transform: translateX(-384px); }
}
@keyframes site-pet-breathe {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(1.018); }
}
#site-pet-strip.is-paused * { animation-play-state: paused; }
#site-pet-strip.is-static * { animation: none !important; }
#site-pet-strip.is-static .site-pet-sit { visibility: visible; }
#site-pet-strip.is-static .site-pet-gait,
#site-pet-strip.is-static .site-pet-sleep { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
    #site-pet-strip * { animation: none !important; }
    #site-pet-strip .site-pet-sit { visibility: visible; }
    #site-pet-strip .site-pet-gait,
    #site-pet-strip .site-pet-sleep { visibility: hidden; }
}