/* Care overlays sit around the existing capybara artwork; they never move it. */
.capy-container > .wetland-care-bath-front,
.capy-container > .wetland-care-rain-splashes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.capy-container > .wetland-care-bath-front {
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: opacity 350ms ease;
}

.capy-container.is-yuzu-bathing > .wetland-care-bath-front {
    opacity: 1;
    visibility: visible;
}

.care-bath-steam, .care-yuzu { animation-play-state: paused; }
.capy-container.is-yuzu-bathing .care-bath-steam,
.capy-container.is-yuzu-bathing .care-yuzu { animation-play-state: running; }

.care-bath-steam {
    position: absolute;
    top: 18%;
    width: 25px;
    height: 43px;
    border-left: 3px solid rgba(255, 255, 244, .96);
    border-radius: 50%;
    opacity: 0;
    filter: drop-shadow(0 0 5px rgba(255, 244, 207, .78));
    animation: careSteam 3.4s ease-out infinite;
}

.care-bath-steam-a { left: 29%; animation-delay: .15s; }
.care-bath-steam-b { left: 48%; top: 4%; height: 49px; animation-delay: 1.2s; }
.care-bath-steam-c { right: 27%; top: 17%; height: 39px; animation-delay: 2.1s; }

.care-yuzu {
    position: absolute;
    display: block;
    width: var(--yuzu-size, clamp(17px, 5vw, 23px));
    height: calc(var(--yuzu-size, clamp(17px, 5vw, 23px)) * 1.1);
    border: 1px solid rgba(167, 117, 37, .56);
    border-radius: 48% 48% 53% 53%;
    background: radial-gradient(circle at 34% 27%, #fff1a6 0 12%, #f5cf58 38%, #dfa63c 100%);
    box-shadow: 0 2px 5px rgba(86, 71, 41, .28), 0 0 7px rgba(255, 217, 105, .64), inset 1px 1px 2px rgba(255, 255, 228, .88);
    transform-origin: 50% 55%;
}

.care-yuzu::before {
    position: absolute;
    top: -3px;
    left: 7px;
    width: 7px;
    height: 4px;
    border-radius: 90% 10% 90% 10%;
    background: #668750;
    content: "";
    transform: rotate(-28deg);
}

.care-yuzu i {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(255, 251, 211, .86);
    box-shadow: 6px 5px 0 rgba(183, 125, 38, .22), 8px 1px 0 rgba(255, 246, 193, .74);
}

.care-yuzu-float { top: var(--yuzu-y); left: var(--yuzu-x); opacity: .94; animation: careYuzuFloat var(--yuzu-duration, 3.8s) ease-in-out infinite; animation-delay: var(--yuzu-delay, 0s); }
.care-yuzu-float-1 { --yuzu-x: 25%; --yuzu-y: 55%; --yuzu-duration: 3.7s; --yuzu-delay: -.5s; --yuzu-turn: -9deg; }
.care-yuzu-float-2 { --yuzu-x: 69%; --yuzu-y: 58%; --yuzu-duration: 4.3s; --yuzu-delay: -2.1s; --yuzu-turn: 12deg; }
.care-yuzu-float-3 { --yuzu-x: 20%; --yuzu-y: 38%; --yuzu-size: clamp(15px, 4.2vw, 19px); --yuzu-duration: 4.8s; --yuzu-delay: -3.2s; --yuzu-turn: -5deg; }

.capy-container.is-yuzu-bathing:not(.is-snoozing) .capy-wrapper { animation: capyWarmSoak 3.8s ease-in-out infinite; }
.capy-container.is-yuzu-bathing .capy-img { filter: drop-shadow(0 0 10px rgba(255, 199, 72, .88)) saturate(1.08) brightness(1.025); }
.capy-container > .wetland-care-rain-splashes {
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms ease;
}

.capy-container[data-weather="rainy"] > .wetland-care-rain-splashes {
    opacity: .88;
    visibility: visible;
}

.care-rain-drop, .care-rain-ring { animation-play-state: paused; }
.capy-container[data-weather="rainy"] .care-rain-drop,
.capy-container[data-weather="rainy"] .care-rain-ring { animation-play-state: running; }

.care-rain-splash {
    position: absolute;
    bottom: 35%;
    width: 31px;
    height: 22px;
    --care-rain-delay: 0s;
}

.care-rain-splash-1 { left: 9%; bottom: 34%; }
.care-rain-splash-2 { left: 21%; bottom: 29%; transform: scale(.72); --care-rain-delay: .45s; }
.care-rain-splash-3 { right: 21%; bottom: 40%; transform: scale(.86); --care-rain-delay: .85s; }
.care-rain-splash-4 { right: 9%; bottom: 32%; transform: scale(.68); --care-rain-delay: 1.1s; }

.care-rain-drop {
    position: absolute;
    top: -13px;
    left: 50%;
    width: 4px;
    height: 9px;
    border-radius: 70% 70% 75% 75%;
    background: rgba(199, 233, 224, .88);
    box-shadow: 0 0 4px rgba(221, 246, 236, .56);
    animation: careRainDrop 1.35s ease-in infinite;
    animation-delay: var(--care-rain-delay, 0s);
}

.care-rain-ring {
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 26px;
    height: 8px;
    border: 1.5px solid rgba(210, 239, 229, .78);
    border-radius: 50%;
    opacity: 0;
    transform: translateX(-50%) scale(.2);
    animation: careRainRing 1.35s ease-out infinite;
    animation-delay: var(--care-rain-delay, 0s);
}

.care-rain-ring-small {
    bottom: 3px;
    width: 13px;
    height: 4px;
    border-width: 1px;
    animation-delay: calc(var(--care-rain-delay, 0s) + .12s);
}

.capy-container.is-celebrating > .wetland-care-bath-front,
.capy-container.is-celebrating > .wetland-care-rain-splashes { visibility: hidden; }
.capy-container.is-celebrating .care-bath-steam,
.capy-container.is-celebrating .care-yuzu { animation-play-state: paused; }

@keyframes capyWarmSoak {
    0%, 100% { transform: translateY(0) rotate(0) scaleY(1); }
    50% { transform: translateY(3px) rotate(.45deg) scaleY(.985); }
}

@keyframes careSteam {
    0% { opacity: 0; translate: 0 9px; scale: .75; }
    22% { opacity: .74; }
    100% { opacity: 0; translate: 3px -25px; scale: 1.14; }
}

@keyframes careYuzuFloat {
    0%, 100% { translate: 0 1px; rotate: calc(var(--yuzu-turn) - 3deg); }
    50% { translate: 2px -5px; rotate: calc(var(--yuzu-turn) + 3deg); }
}

@keyframes careRainDrop {
    0% { opacity: 0; translate: 0 -5px; }
    42% { opacity: .9; }
    65%, 100% { opacity: 0; translate: 0 15px; }
}

@keyframes careRainRing {
    0%, 36% { opacity: 0; transform: translateX(-50%) scale(.2); }
    48% { opacity: .8; }
    100% { opacity: 0; transform: translateX(-50%) scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
    .capy-container > .wetland-care-bath-front,
    .capy-container > .wetland-care-rain-splashes { transition: none; }
    .capy-container.is-yuzu-bathing:not(.is-snoozing) .capy-wrapper { animation: none; }
    .capy-container.is-yuzu-bathing .capy-img { filter: drop-shadow(0 0 10px rgba(255, 199, 72, .88)) saturate(1.08) brightness(1.025); }
    .care-bath-steam,
    .care-yuzu,
    .care-rain-drop, .care-rain-ring { animation: none !important; }
    .care-yuzu-float { top: var(--yuzu-y); opacity: .94; translate: 0 0; rotate: var(--yuzu-turn); scale: 1; }
    .care-bath-steam { opacity: .5; }
    .care-rain-drop { opacity: .3; }
    .care-rain-ring { opacity: .42; transform: translateX(-50%) scale(.8); }
}