/* Combat projectile animations */
.arrow-projectile {
    width: 44px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #6c482c 0 72%, #d8d2bf 72% 100%);
    box-shadow: 0 0 6px rgba(237, 221, 176, 0.65), 0 2px 3px rgba(0, 0, 0, 0.75);
    transition: none;
    transform-origin: center;
}

.arrow-projectile::before {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #d8d2bf;
}

.arrow-projectile::after {
    content: '';
    position: absolute;
    left: -7px;
    top: 50%;
    width: 11px;
    height: 12px;
    transform: translateY(-50%);
    clip-path: polygon(0 0, 100% 45%, 100% 55%, 0 100%, 35% 50%);
    background: #7f3030;
}

.magic-projectile {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    filter: blur(2px);
    transition: none;
}

/* Character visual states. Motion profile is selected from the current class. */
.combat-unit[data-motion-profile="heavy"],
.combat-unit[data-motion-profile="brute"] {
    --state-glow: rgba(220, 164, 93, 0.78);
    --idle-duration: 4.8s;
}

.combat-unit[data-motion-profile="agile"],
.combat-unit[data-motion-profile="ranged"] {
    --state-glow: rgba(126, 208, 169, 0.76);
    --idle-duration: 3.675s;
}

.combat-unit[data-motion-profile="arcane"] {
    --state-glow: rgba(116, 154, 255, 0.86);
    --idle-duration: 4.5s;
}

.combat-unit[data-motion-profile="fire"] {
    --state-glow: rgba(255, 111, 55, 0.9);
    --idle-duration: 4.125s;
}

.combat-unit[data-motion-profile="shadow"] {
    --state-glow: rgba(182, 96, 235, 0.88);
    --idle-duration: 5.025s;
}

.combat-unit[data-motion-profile="holy"] {
    --state-glow: rgba(255, 224, 133, 0.92);
    --idle-duration: 4.65s;
}

.combat-state-attack-prepare .unit-portrait-image,
.combat-state-cast-start .unit-portrait-image,
.combat-state-attack-release .unit-portrait-image,
.combat-state-cast-finish .unit-portrait-image,
.combat-state-block .unit-portrait-image,
.combat-state-dodge .unit-portrait-image,
.combat-state-hit .unit-portrait-image {
    transform-origin: 50% 92%;
}

.combat-state-attack-prepare .unit-portrait-image {
    animation: prepare-right 375ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes prepare-right {
    to { transform: translateX(-5%) translateY(1%) rotate(-2.5deg) scale(1.025); }
}

.combat-state-attack-prepare[data-motion-profile="agile"] .unit-portrait-image,
.combat-state-attack-prepare[data-motion-profile="ranged"] .unit-portrait-image {
    animation-duration: 285ms;
    filter: drop-shadow(0 0 7px var(--state-glow));
}

.combat-state-attack-prepare[data-motion-profile="heavy"] .unit-portrait-image,
.combat-state-attack-prepare[data-motion-profile="brute"] .unit-portrait-image {
    animation-duration: 435ms;
}

.combat-state-attack-release .unit-portrait-image {
    animation: release-right 495ms cubic-bezier(0.12, 0.85, 0.24, 1);
}

@keyframes release-right {
    0% { transform: translateX(-5%) rotate(-2deg) scale(1.02); }
    42% { transform: translateX(12%) rotate(3deg) scale(1.07); }
    100% { transform: translateX(0) rotate(0) scale(1); }
}

.combat-state-attack-release[data-motion-profile="agile"] .unit-portrait-image,
.combat-state-attack-release[data-motion-profile="ranged"] .unit-portrait-image {
    animation-duration: 375ms;
}

.combat-state-cast-start .unit-portrait-image {
    animation: cast-gather 780ms cubic-bezier(0.2, 0.75, 0.2, 1) forwards;
}

@keyframes cast-gather {
    0% { transform: translateY(0) scale(1); filter: brightness(1); }
    100% { transform: translateY(-4%) scale(1.045); filter: brightness(1.18) drop-shadow(0 0 13px var(--state-glow)); }
}

.combat-state-cast-start[data-motion-profile="fire"] .unit-portrait-image {
    animation-name: cast-gather-fire;
}

@keyframes cast-gather-fire {
    0% { transform: translateY(0) scale(1); filter: brightness(1); }
    55% { transform: translateY(-3%) rotate(-1deg) scale(1.04); }
    100% { transform: translateY(-5%) rotate(1deg) scale(1.06); filter: brightness(1.24) drop-shadow(0 0 16px var(--state-glow)); }
}

.combat-state-cast-start[data-motion-profile="shadow"] .unit-portrait-image {
    animation-duration: 975ms;
    filter: saturate(0.75);
}

.combat-state-cast-finish .unit-portrait-image {
    animation: cast-settle 540ms ease-out;
}

@keyframes cast-settle {
    0% { transform: translateY(-4%) scale(1.045); filter: brightness(1.2) drop-shadow(0 0 13px var(--state-glow)); }
    100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

.combat-state-hit .unit-portrait-image {
    animation: character-hit 510ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes character-hit {
    0%, 100% { transform: translateX(0) rotate(0); filter: brightness(1); }
    18% { transform: translateX(-7%) rotate(-2deg); filter: brightness(1.7) saturate(0.45); }
    42% { transform: translateX(5%) rotate(1.5deg); }
    68% { transform: translateX(-2.5%) rotate(-0.5deg); filter: brightness(1.1); }
}

.combat-state-block .unit-portrait-image {
    animation: character-block 630ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

@keyframes character-block {
    0%, 100% { transform: translateX(0) scale(1); }
    30% { transform: translateX(-3%) scale(0.96, 1.04); filter: brightness(1.55) drop-shadow(0 0 10px #d9dfe8); }
    55% { transform: translateX(1%) scale(1.02); }
}

.combat-state-dodge .unit-portrait-image {
    animation: character-dodge-left 630ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes character-dodge-left {
    0%, 100% { transform: translateX(0) rotate(0); }
    45% { transform: translateX(-24%) translateY(-2%) rotate(-5deg) scale(0.98); filter: brightness(1.12); }
}


/* Authored poses still need readable motion between frame changes. Individual
   transitions make the state machine visible in the actual battle, while the
   wide transparent canvases keep weapons and effects intact. */
.combat-unit.has-state-art.combat-state-attack-prepare .unit-portrait-image {
    animation: state-art-prepare 390ms cubic-bezier(.2,.75,.25,1) both;
}

.combat-unit.has-state-art.combat-state-attack-release .unit-portrait-image {
    animation: state-art-release 540ms cubic-bezier(.12,.82,.22,1) both;
}

.combat-unit.has-state-art.combat-state-cast-start .unit-portrait-image {
    animation: state-art-cast-start 780ms cubic-bezier(.2,.72,.2,1) both;
}

.combat-unit.has-state-art.combat-state-cast-finish .unit-portrait-image {
    animation: state-art-cast-finish 540ms ease-out both;
}

.combat-unit.has-state-art.combat-state-block .unit-portrait-image {
    animation: state-art-block 630ms cubic-bezier(.2,.75,.25,1) both;
}

.combat-unit.has-state-art.combat-state-dodge .unit-portrait-image {
    animation: state-art-dodge 630ms cubic-bezier(.2,.8,.2,1) both;
}

.combat-unit.has-state-art.combat-state-hit .unit-portrait-image {
    animation: state-art-hit 510ms cubic-bezier(.36,.07,.19,.97) both;
}

.combat-unit.has-state-art.combat-state-cast-start .unit-portrait-image,
.combat-unit.has-state-art.combat-state-cast-finish .unit-portrait-image {
    filter: drop-shadow(0 0 10px var(--state-glow));
}

@keyframes state-art-prepare {
    from { opacity: .82; transform: translateX(2.5%) rotate(1.2deg) scale(.985); }
    to { opacity: 1; transform: translateX(-1.5%) rotate(-.6deg) scale(1); }
}

@keyframes state-art-release {
    0% { opacity: .9; transform: translateX(-3.5%) scale(.985); }
    58% { opacity: 1; transform: translateX(3%) scale(1.025); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes state-art-cast-start {
    0% { opacity: .78; transform: translateY(2.5%) scale(.97); filter: brightness(.9); }
    70% { opacity: 1; transform: translateY(-1.5%) scale(1.025); }
    100% { opacity: 1; transform: translateY(-1%) scale(1.015); }
}

@keyframes state-art-cast-finish {
    from { opacity: 1; transform: translateY(-2%) scale(1.025); filter: brightness(1.2); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

@keyframes state-art-block {
    0% { transform: translateX(-2%) scale(.99); }
    42% { transform: translateX(1.5%) scale(1.025); filter: brightness(1.2); }
    100% { transform: translateX(0) scale(1); }
}

@keyframes state-art-dodge {
    0% { opacity: .82; transform: translateX(8%) rotate(2deg); }
    48% { opacity: 1; transform: translateX(-5%) rotate(-1.5deg); }
    100% { opacity: 1; transform: translateX(0) rotate(0); }
}

@keyframes state-art-hit {
    0%, 100% { transform: translateX(0) rotate(0); filter: brightness(1); }
    22% { transform: translateX(-4%) rotate(-1.3deg); filter: brightness(1.55) saturate(.7); }
    48% { transform: translateX(3%) rotate(1deg); }
    72% { transform: translateX(-1.5%) rotate(-.4deg); }
}

@keyframes projectile-entry {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.anim-projectile-entry {
    animation: projectile-entry 0.3s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
    .arrow-projectile,
    .magic-projectile,
    .combat-unit .unit-portrait-image {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}