/* ============================================================================
   avatar.css — Phase R1 — the visual language for the human interface layer.

   Three layers per avatar:
     .y-avatar-glow       Soft warm radial glow behind the portrait.
     .y-avatar-ripple     Spherical-harmonic pulse, animates on speaking.
     .y-avatar-portrait   The portrait itself, holds the SVG and the eyelid.
       .y-avatar-img      The SVG / future neural-render <img>.
       .y-avatar-lid      Thin overlay that drives the blink animation.

   Five scales — each is a self-contained sizing context so the same instance
   can move between scales without re-mounting.

   Eight states — driven by [data-state] on the host. Each adjusts the glow,
   ripple, breath rate, and (for speaking) the lip / mouth tilt at the
   portrait layer. State transitions are CSS so the JS controller stays
   tiny.
   ========================================================================= */

.y-avatar {
    position: relative;
    display: inline-block;
    isolation: isolate;
    line-height: 0;
    border-radius: 50%;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ── Layers ─────────────────────────────────────────────────────────────── */

.y-avatar-glow,
.y-avatar-ripple,
.y-avatar-portrait,
.y-avatar-img,
.y-avatar-lid {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
}

.y-avatar-glow {
    background: radial-gradient(circle at 50% 40%,
                rgba(255, 220, 180, 0.55) 0%,
                rgba(255, 200, 150, 0.25) 40%,
                rgba(255, 180, 120, 0)    72%);
    filter: blur(18px);
    transform: scale(1.18);
    z-index: 0;
}

.y-avatar-ripple {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: radial-gradient(circle at 50% 50%,
                rgba(255, 255, 255, 0.05) 0%,
                rgba(255, 255, 255, 0)    65%);
    transform: scale(1);
    opacity: 0;
    z-index: 1;
}

.y-avatar-portrait {
    overflow: hidden;
    z-index: 2;
    box-shadow:
        inset 0 0  0 1px rgba(255, 255, 255, 0.10),
        0     8px 32px   rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(0);
}

.y-avatar-img {
    width:  100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transform-origin: 50% 55%;
}

/* The eyelid is a thin colored band that descends to cover the eye region.
   Color tracks the template's skin tone via a CSS variable each SVG sets
   on its host (see :where(.y-avatar[data-template="…"])  blocks below). */
.y-avatar-lid {
    background: var(--y-avatar-lid-color, rgba(245, 210, 175, 0.0));
    transform-origin: 50% 0%;
    transform: scaleY(0);
    z-index: 2;
}

/* ── Scales ─────────────────────────────────────────────────────────────── */

.y-avatar-scale-hero        { width: clamp(220px, 38vmin, 380px); height: clamp(220px, 38vmin, 380px); }
.y-avatar-scale-full-screen { width: clamp(280px, 70vmin, 640px); height: clamp(280px, 70vmin, 640px); }
.y-avatar-scale-corner      { width: 56px;  height: 56px;  }
.y-avatar-scale-inline      { width: 96px;  height: 96px;  }
.y-avatar-scale-bubble      { width: 72px;  height: 72px;  }

/* Hero gets a richer glow + heavier shadow so it earns the screen real estate. */
.y-avatar-scale-hero        .y-avatar-glow,
.y-avatar-scale-full-screen .y-avatar-glow {
    transform: scale(1.32);
    filter: blur(28px);
}
.y-avatar-scale-hero        .y-avatar-portrait,
.y-avatar-scale-full-screen .y-avatar-portrait {
    box-shadow:
        inset 0 0   0  1px rgba(255, 255, 255, 0.12),
        0     14px 56px   rgba(0, 0, 0, 0.45);
}

/* Corner gets a thinner ring + tighter glow so it doesn't dominate. */
.y-avatar-scale-corner      .y-avatar-glow,
.y-avatar-scale-bubble      .y-avatar-glow {
    transform: scale(1.10);
    filter: blur(8px);
    opacity: 0.7;
}

/* ── Idle breathing — the always-on rhythm ──────────────────────────────── */

@keyframes y-avatar-breath {
    0%, 100% { transform: scale(1.000); }
    50%      { transform: scale(1.022); }
}
@keyframes y-avatar-glow-breath {
    0%, 100% { transform: scale(var(--glow-base, 1.18)); opacity: 0.85; }
    50%      { transform: scale(calc(var(--glow-base, 1.18) * 1.06)); opacity: 1.00; }
}
.y-avatar .y-avatar-portrait { animation: y-avatar-breath 4.6s ease-in-out infinite; }
.y-avatar .y-avatar-glow     { animation: y-avatar-glow-breath 4.6s ease-in-out infinite; }

.y-avatar-scale-hero        { --glow-base: 1.32; }
.y-avatar-scale-full-screen { --glow-base: 1.32; }
.y-avatar-scale-corner,
.y-avatar-scale-bubble       { --glow-base: 1.10; }

/* ── Eye blink — every ~6.4s, only at scales where the eyes are visible ── */

@keyframes y-avatar-blink {
    0%, 92%, 100% { transform: scaleY(0); }
    95%, 97%      { transform: scaleY(1); }
}
.y-avatar-scale-hero        .y-avatar-lid,
.y-avatar-scale-full-screen .y-avatar-lid,
.y-avatar-scale-inline      .y-avatar-lid {
    animation: y-avatar-blink 6.4s ease-in-out infinite;
}

/* ── States ─────────────────────────────────────────────────────────────── */

/* Listening — quiet attentive lean. Slightly brighter glow, faster breath. */
.y-avatar[data-state="listening"] .y-avatar-portrait { animation-duration: 3.4s; }
.y-avatar[data-state="listening"] .y-avatar-glow     { animation-duration: 3.4s; opacity: 1.0; }

/* Speaking — visible pulse at the ripple layer, mouth subtly opens via the
   portrait scale tweak. Future neural render replaces this with real lip
   animation; the contract stays the same. */
@keyframes y-avatar-speak-ripple {
    0%   { transform: scale(0.92); opacity: 0.55; }
    100% { transform: scale(1.55); opacity: 0;    }
}
@keyframes y-avatar-speak-portrait {
    0%, 100% { transform: scale(1.000); }
    25%      { transform: scale(1.018); }
    60%      { transform: scale(1.008); }
}
.y-avatar[data-state="speaking"] .y-avatar-portrait {
    animation: y-avatar-speak-portrait 0.55s ease-in-out infinite;
}
.y-avatar[data-state="speaking"] .y-avatar-ripple {
    animation: y-avatar-speak-ripple 1.2s ease-out infinite;
    border-color: rgba(255, 220, 180, 0.45);
}

/* Thinking — slow, deliberate, slightly larger glow.  */
.y-avatar[data-state="thinking"] .y-avatar-portrait { animation-duration: 5.8s; }
.y-avatar[data-state="thinking"] .y-avatar-glow     {
    animation-duration: 5.8s;
    background: radial-gradient(circle at 50% 40%,
                rgba(180, 200, 255, 0.55) 0%,
                rgba(160, 180, 235, 0.20) 40%,
                rgba(140, 160, 215, 0)    72%);
}

/* Celebrating — quicker breath + warmer glow. */
.y-avatar[data-state="celebrating"] .y-avatar-portrait { animation-duration: 2.4s; }
.y-avatar[data-state="celebrating"] .y-avatar-glow     {
    animation-duration: 2.4s;
    background: radial-gradient(circle at 50% 40%,
                rgba(255, 200, 110, 0.65) 0%,
                rgba(255, 170,  90, 0.30) 40%,
                rgba(255, 140,  70, 0)    72%);
}

/* Concerned — cooler tone, slower. */
.y-avatar[data-state="concerned"] .y-avatar-glow {
    background: radial-gradient(circle at 50% 40%,
                rgba(180, 180, 200, 0.45) 0%,
                rgba(150, 150, 180, 0.18) 40%,
                rgba(120, 120, 150, 0)    72%);
}

/* Announcing-call — urgent ripple, breath rhythm matches typical ringtone. */
@keyframes y-avatar-call-ripple {
    0%   { transform: scale(0.90); opacity: 0.70; }
    100% { transform: scale(1.65); opacity: 0;    }
}
.y-avatar[data-state="announcing-call"] .y-avatar-portrait { animation-duration: 1.4s; }
.y-avatar[data-state="announcing-call"] .y-avatar-ripple {
    animation: y-avatar-call-ripple 1.4s ease-out infinite;
    border-color: rgba(255, 220, 180, 0.55);
}

/* Narrating-vault — calm authoritative, slightly cooler. */
.y-avatar[data-state="narrating-vault"] .y-avatar-portrait { animation-duration: 5.0s; }
.y-avatar[data-state="narrating-vault"] .y-avatar-glow {
    background: radial-gradient(circle at 50% 40%,
                rgba(160, 220, 255, 0.55) 0%,
                rgba(140, 200, 235, 0.22) 40%,
                rgba(120, 180, 215, 0)    72%);
}

/* ── Per-template eyelid color overrides ────────────────────────────────── */

.y-avatar[data-template="aurora"] { --y-avatar-lid-color: rgba(245, 210, 175, 1); }
.y-avatar[data-template="umbra"]  { --y-avatar-lid-color: rgba(208, 168, 138, 1); }
.y-avatar[data-template="sage"]   { --y-avatar-lid-color: rgba(232, 215, 195, 1); }
.y-avatar[data-template="echo"]   { --y-avatar-lid-color: rgba(238, 200, 175, 1); }
.y-avatar[data-template="lyra"]   { --y-avatar-lid-color: rgba(212, 168, 142, 1); }
.y-avatar[data-template="vega"]   { --y-avatar-lid-color: rgba(244, 208, 178, 1); }
.y-avatar[data-template="orbit"]  { --y-avatar-lid-color: rgba(220, 220, 230, 1); }

/* ── prefers-reduced-motion — accessibility: kill all idle motion. ──────── */

@media (prefers-reduced-motion: reduce) {
    .y-avatar .y-avatar-portrait,
    .y-avatar .y-avatar-glow,
    .y-avatar .y-avatar-lid,
    .y-avatar .y-avatar-ripple {
        animation: none !important;
    }
    .y-avatar .y-avatar-ripple { opacity: 0 !important; }
}