/* 🫀 RadimLife — breath-synchronized avatar animation
   Controlled by CSS variables set from JS (RadimLife.js):
     --radim-bpm                → integer 40-140
     --radim-breath-duration    → seconds, one full breath cycle
     --radim-breath-amplitude   → scale delta (0.02-0.06)
     --radim-breath-warmth      → 0-1, color tint towards warm
*/

:root {
    --radim-bpm: 62;
    --radim-breath-duration: 1.94s;
    --radim-breath-amplitude: 0.025;
    --radim-breath-warmth: 0;
}

/* The core breath — gentle scale with slight vertical lift like actual breathing */
@keyframes radim-breath {
    0%, 100% {
        transform: scale(1) translateY(0);
        filter: brightness(1);
    }
    40% {
        transform: scale(calc(1 + var(--radim-breath-amplitude))) translateY(-0.5%);
        filter: brightness(1.02);
    }
    60% {
        transform: scale(calc(1 + var(--radim-breath-amplitude))) translateY(-0.5%);
        filter: brightness(1.02);
    }
}

/* Any element marked alive pulses with Radim */
.radim-alive {
    animation: radim-breath var(--radim-breath-duration, 1.94s) ease-in-out infinite;
    transform-origin: center center;
    will-change: transform;
}

/* For avatars with inner <img> (clip wrapper pattern), animate the image, not wrapper */
.radim-alive-inner > img,
.cr-avatar-hero.radim-alive > img,
.cr-msg-avatar.radim-alive > img {
    animation: radim-breath var(--radim-breath-duration, 1.94s) ease-in-out infinite;
    transform-origin: center top;
    will-change: transform;
}
/* When animating inner img, suppress the wrapper's own transform so the zoom scale (1.7) is preserved */
.cr-avatar-hero.radim-alive,
.cr-msg-avatar.radim-alive {
    animation: none;
}

/* IMPORTANT: the wrapper img already has transform: scale(1.7) for head-zoom.
   We need to COMPOSE the breath scale on top of it — CSS transforms overwrite,
   so we use a secondary wrapping technique: animate the wrapper's own
   padding/scale indirectly through box-shadow + a subtle ::after glow. */
.cr-avatar-hero.radim-alive::after,
.cr-msg-avatar.radim-alive::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid rgba(91, 168, 160, calc(0.25 + var(--radim-breath-warmth) * 0.35));
    opacity: 0;
    pointer-events: none;
    animation: radim-breath-glow var(--radim-breath-duration, 1.94s) ease-in-out infinite;
}

@keyframes radim-breath-glow {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    40%, 60% { opacity: 0.55; transform: scale(calc(1 + var(--radim-breath-amplitude) * 1.5)); }
}

/* State-specific color tints — warmth increases with sympathetic activation */
:root[data-radim-state="crisis"] {
    --radim-breath-warmth: 0.55;
}
:root[data-radim-state="alert"] {
    --radim-breath-warmth: 0.35;
}
:root[data-radim-state="thinking"] {
    --radim-breath-warmth: 0.2;
}
:root[data-radim-state="festive"] {
    --radim-breath-warmth: 0.15;
}
:root[data-radim-state="listening"] {
    --radim-breath-warmth: 0.1;
}

/* Warmth expressed as subtle inner glow on avatars */
.cr-avatar-hero.radim-alive {
    box-shadow:
        0 6px 20px rgba(26, 74, 68, calc(0.18 + var(--radim-breath-warmth) * 0.15)),
        inset 0 0 calc(20px * var(--radim-breath-warmth)) rgba(236, 201, 75, calc(var(--radim-breath-warmth) * 0.45));
}

/* When Radim is speaking: secondary slow "phrase" cycle — gentle tilt per sentence */
:root[data-radim-state="speaking"] .cr-avatar-hero.radim-alive > img {
    animation:
        radim-breath var(--radim-breath-duration, 1.94s) ease-in-out infinite,
        radim-speak-sway 4.8s ease-in-out infinite;
}
@keyframes radim-speak-sway {
    0%, 100% { filter: brightness(1) hue-rotate(0deg); }
    25% { filter: brightness(1.03) hue-rotate(-2deg); }
    75% { filter: brightness(1.03) hue-rotate(2deg); }
}

/* Thinking state: subtle anticipation quiver */
:root[data-radim-state="thinking"] .cr-avatar-hero.radim-alive::after {
    border-color: color-mix(in srgb, var(--radim-primary) 60%, transparent);
    animation:
        radim-breath-glow var(--radim-breath-duration, 1.94s) ease-in-out infinite,
        radim-think-spin 8s linear infinite;
}
@keyframes radim-think-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Crisis: deep deliberate breath visible */
:root[data-radim-state="crisis"] .cr-avatar-hero.radim-alive::after {
    border-color: rgba(229, 62, 62, 0.5);
    border-width: 3px;
}

/* Listening: warm yellow glow */
:root[data-radim-state="listening"] .cr-avatar-hero.radim-alive::after {
    border-color: rgba(236, 201, 75, 0.65);
}

/* ───── Accessibility: respect reduced motion ───── */
@media (prefers-reduced-motion: reduce) {
    .radim-alive,
    .radim-alive > img,
    .cr-avatar-hero.radim-alive::after,
    .cr-msg-avatar.radim-alive::after {
        animation: none !important;
    }
    .cr-avatar-hero.radim-alive,
    .cr-msg-avatar.radim-alive {
        box-shadow: 0 6px 20px color-mix(in srgb, var(--radim-primary-deep) 18%, transparent) !important;
    }
}

/* ───── Debug helper (optional, shows BPM in corner when body has .radim-debug) ───── */
body.radim-debug::after {
    content: '🫀 ' counter(radim-bpm-counter) ' BPM · ' attr(data-radim-state);
    counter-reset: radim-bpm-counter var(--radim-bpm);
    position: fixed;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 4px 10px;
    border-radius: 12px;
    font-family: monospace;
    font-size: 0.72rem;
    z-index: 9999;
    pointer-events: none;
}