/* ============================================================
   Character Sheet — Living Combat Portrait (rw-clp-*)
   Prototype: on the Combat lens, the center hero portrait stops
   being a static image and becomes the live combat anchor —
   it breathes, it takes the hit, it dims as you bleed out.

   Self-contained and tuned for the hero-sized center stage
   (the Veil's living-portraits.css targets the small .portrait-card
   and is deliberately left untouched). All animated properties are
   GPU-composited: transform / opacity / filter only.

   Applied to .rw-character-art-stage when the Combat lens is active:
     .rw-clp            → living treatment on
     .rw-clp--live      → an encounter is running (combat frame)
     .rw-clp-state-*     → sustained HP / condition states (Blazor-bound)
     .rw-clp-react-*     → one-shot reactions (JS-toggled)
   The .rw-clp-aura child is the overlay surface reactions/states paint to.
   ============================================================ */

@property --rw-clp-hp {
    syntax: '<number>';
    initial-value: 1;
    inherits: true;
}

/* --- The overlay surface: transparent at rest, painted by states/reactions --- */
.rw-clp-aura {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    border-radius: inherit;
    transition: opacity 0.5s ease;
}

/* =================================================================
   AMBIENT — the hero breathes while the fight is live
   ================================================================= */
@keyframes rw-clp-breathe {
    0%, 100% { transform: scale(1) translateY(0); }
    50%      { transform: scale(1.006) translateY(-0.4%); }
}

.rw-clp--live .rw-character-stage__portrait > img,
.rw-clp--live .rw-character-hero__fallback {
    transform-origin: center bottom;
    animation: rw-clp-breathe 6s ease-in-out infinite;
    will-change: transform;
}

/* A quiet stance ring so the Combat lens reads "guard up" vs the calm lenses. */
.rw-clp--live {
    box-shadow:
        0 0 0 1px rgba(196, 160, 64, 0.22),
        0 0 28px rgba(196, 160, 64, 0.10);
    transition: box-shadow 0.6s ease;
}

/* =================================================================
   SUSTAINED STATES — driven by live HP / conditions
   ================================================================= */

/* Bloodied (25–50%): a faint pallor + breath quickens. */
.rw-clp-state-bloodied .rw-character-stage__portrait > img,
.rw-clp-state-bloodied .rw-character-hero__fallback {
    filter: saturate(0.86);
    animation-duration: 4.4s;
}
.rw-clp-state-bloodied .rw-clp-aura {
    opacity: 1;
    background: linear-gradient(to top, rgba(140, 30, 20, 0.16), transparent 42%);
}

/* Critical (<25%): drained + a red rim, breath ragged. */
.rw-clp-state-critical .rw-character-stage__portrait > img,
.rw-clp-state-critical .rw-character-hero__fallback {
    filter: saturate(0.66) brightness(0.92);
    animation-duration: 3.2s;
}
.rw-clp-state-critical .rw-clp-aura {
    opacity: 1;
    background:
        radial-gradient(ellipse at 50% 92%, rgba(150, 28, 18, 0.30) 0%, transparent 55%),
        radial-gradient(ellipse at 50% 50%, transparent 58%, rgba(120, 22, 14, 0.30) 100%);
    animation: rw-clp-crit-pulse 2.4s ease-in-out infinite;
}
@keyframes rw-clp-crit-pulse {
    0%, 100% { opacity: 0.78; }
    50%      { opacity: 1; }
}

/* Down / unconscious (HP ≤ 0): the hero slumps, color drains out. */
.rw-clp-state-down .rw-character-stage__portrait > img,
.rw-clp-state-down .rw-character-hero__fallback {
    filter: grayscale(0.7) brightness(0.5);
    transform: translateY(5px) scale(0.99);
    animation-play-state: paused;
    transition: filter 1s ease, transform 1s ease;
}
.rw-clp-state-down .rw-clp-aura {
    opacity: 1;
    background: rgba(0, 0, 0, 0.42);
}
.rw-clp-state-down.rw-clp--live {
    box-shadow: 0 0 0 1px rgba(120, 22, 14, 0.4);
}

/* Temp HP: a cool shield sheen. */
.rw-clp-state-temphp .rw-clp-aura {
    opacity: 1;
    background: linear-gradient(180deg, rgba(100, 160, 220, 0.10) 0%, rgba(140, 180, 230, 0.16) 50%, rgba(100, 160, 220, 0.08) 100%);
    mix-blend-mode: screen;
    animation: rw-clp-temphp 3.2s ease-in-out infinite;
}
@keyframes rw-clp-temphp {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 0.85; }
}

/* Raging: heat haze, saturated, ember rim. */
.rw-clp-state-raging .rw-character-stage__portrait > img {
    filter: saturate(1.3) contrast(1.08);
}
.rw-clp-state-raging.rw-clp--live {
    box-shadow: 0 0 0 1px rgba(184, 58, 26, 0.55), 0 0 30px rgba(184, 58, 26, 0.22);
}
.rw-clp-state-raging .rw-clp-aura {
    opacity: 1;
    background: radial-gradient(ellipse at 50% 88%, rgba(184, 58, 26, 0.32) 0%, transparent 55%);
    mix-blend-mode: screen;
    animation: rw-clp-rage 1.5s ease-in-out infinite;
}
@keyframes rw-clp-rage {
    0%, 100% { opacity: 0.55; }
    50%      { opacity: 0.95; }
}

/* Concentrating: a slow arcane ring. */
.rw-clp-state-concentrating .rw-clp-aura {
    opacity: 1;
    background: conic-gradient(from 0deg,
        transparent 0deg, rgba(72, 176, 192, 0.12) 40deg, transparent 80deg,
        transparent 180deg, rgba(72, 176, 192, 0.10) 220deg, transparent 260deg, transparent 360deg);
    animation: rw-clp-conc 14s linear infinite;
}
@keyframes rw-clp-conc {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* =================================================================
   ONE-SHOT REACTIONS — JS toggles the class for one animation
   ================================================================= */

/* Take a hit — the hero recoils, a red flash crosses the frame. */
@keyframes rw-clp-hit {
    0%, 100% { transform: translateX(0) translateY(0); }
    10%      { transform: translateX(-13px) translateY(3px); }
    28%      { transform: translateX(10px) translateY(-1px); }
    46%      { transform: translateX(-7px); }
    64%      { transform: translateX(4px); }
    82%      { transform: translateX(-2px); }
}
@keyframes rw-clp-hit-flash {
    0%   { opacity: 0; }
    14%  { opacity: 1; }
    100% { opacity: 0; }
}
.rw-clp-react-hit { animation: rw-clp-hit 0.42s ease-out; }
.rw-clp-react-hit .rw-clp-aura {
    background: radial-gradient(ellipse at 40% 35%, rgba(184, 58, 26, 0.45) 0%, transparent 55%);
    mix-blend-mode: screen;
    animation: rw-clp-hit-flash 0.42s ease-out forwards;
}

/* Critical hit — bigger recoil, a darker splatter. */
@keyframes rw-clp-crit {
    0%   { transform: translateX(0) scale(1); }
    8%   { transform: translateX(-18px) scale(1.025); }
    20%  { transform: translateX(14px) scale(1.015); }
    34%  { transform: translateX(-10px); }
    50%  { transform: translateX(6px); }
    68%  { transform: translateX(-3px); }
    100% { transform: translateX(0) scale(1); }
}
@keyframes rw-clp-crit-splatter {
    0%   { opacity: 0; }
    16%  { opacity: 0.6; }
    100% { opacity: 0; }
}
.rw-clp-react-crit { animation: rw-clp-crit 0.6s ease-out; }
.rw-clp-react-crit .rw-clp-aura {
    background:
        radial-gradient(ellipse at 32% 22%, rgba(160, 20, 10, 0.5) 0%, transparent 34%),
        radial-gradient(ellipse at 72% 32%, rgba(140, 15, 5, 0.4) 0%, transparent 30%),
        radial-gradient(ellipse at 50% 82%, rgba(120, 10, 5, 0.45) 0%, transparent 40%);
    mix-blend-mode: multiply;
    animation: rw-clp-crit-splatter 0.6s ease-out forwards;
}

/* Healed — a green/gold tide rises up the frame, hero swells slightly. */
@keyframes rw-clp-heal {
    0%   { transform: scale(1); filter: brightness(1); }
    35%  { transform: scale(1.012); filter: brightness(1.12); }
    100% { transform: scale(1); filter: brightness(1); }
}
@keyframes rw-clp-heal-sweep {
    0%   { opacity: 0; background-position: 50% 130%; }
    35%  { opacity: 0.7; background-position: 50% 50%; }
    100% { opacity: 0; background-position: 50% -25%; }
}
.rw-clp-react-heal { animation: rw-clp-heal 0.85s ease-out; }
.rw-clp-react-heal .rw-clp-aura {
    background: linear-gradient(to top, rgba(80, 176, 104, 0.32) 0%, rgba(218, 184, 85, 0.22) 50%, transparent 100%);
    background-size: 100% 220%;
    mix-blend-mode: soft-light;
    animation: rw-clp-heal-sweep 0.85s ease-out forwards;
}

/* Dropped to 0 — a heavier recoil into the down state. */
@keyframes rw-clp-down {
    0%   { transform: translateY(0) scale(1); filter: grayscale(0) brightness(1); }
    100% { transform: translateY(5px) scale(0.99); filter: grayscale(0.7) brightness(0.5); }
}
.rw-clp-react-down { animation: rw-clp-down 1s ease-in forwards; }

/* Your turn — a gold spotlight sweeps across and the hero lifts. */
@keyframes rw-clp-turn {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.018); }
    100% { transform: scale(1); }
}
@keyframes rw-clp-turn-sweep {
    0%   { opacity: 0; background-position: -120% 0; }
    35%  { opacity: 0.5; }
    100% { opacity: 0; background-position: 220% 0; }
}
.rw-clp-react-turn { animation: rw-clp-turn 0.7s ease-out; }
.rw-clp-react-turn .rw-clp-aura {
    background: linear-gradient(90deg, transparent 30%, rgba(196, 160, 64, 0.32) 50%, transparent 70%);
    background-size: 220% 100%;
    animation: rw-clp-turn-sweep 0.7s ease-out forwards;
}

/* Combat begins — a brief lift as the hero sets their stance. */
@keyframes rw-clp-ready {
    0%   { transform: scale(1) translateY(0); }
    45%  { transform: scale(1.02) translateY(-3px); }
    100% { transform: scale(1) translateY(0); }
}
.rw-clp-react-ready { animation: rw-clp-ready 0.55s ease-out; }

/* Respect reduced-motion: drop the shakes/sweeps, keep the sustained colour cues. */
@media (prefers-reduced-motion: reduce) {
    .rw-clp--live .rw-character-stage__portrait > img,
    .rw-clp--live .rw-character-hero__fallback,
    .rw-clp-react-hit, .rw-clp-react-crit, .rw-clp-react-heal,
    .rw-clp-react-turn, .rw-clp-react-ready,
    .rw-clp-aura {
        animation: none !important;
    }
}