/* =====================================================================
   VOIDBOUND - Portrait Animation System
   Mood-based portrait transitions, mirroring, and dynamic effects
   ===================================================================== */

/* =====================================================================
   BASE ANIMATED PORTRAIT CONTAINER
   ===================================================================== */

.animated-portrait {
    position: relative;
    width: 140px;
    height: 140px;
    overflow: hidden;
    border-radius: 8px;
}

.animated-portrait-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        transform 0.3s ease,
        filter 0.3s ease,
        opacity 0.25s ease;
}

/* =====================================================================
   MIRRORING - Left/Right facing
   Used for dialogue: speaker on left faces right, response on right faces left
   ===================================================================== */

.animated-portrait.facing-right .animated-portrait-image {
    transform: scaleX(1);
}

.animated-portrait.facing-left .animated-portrait-image {
    transform: scaleX(-1);
}

/* Smooth mirror transition */
.animated-portrait.transitioning-direction .animated-portrait-image {
    transition: transform 0.4s ease-in-out;
}

/* =====================================================================
   MOOD TRANSITIONS
   Smooth crossfade between mood portraits
   ===================================================================== */

.animated-portrait .mood-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.animated-portrait .mood-layer.active {
    opacity: 1;
    pointer-events: auto;
}

.animated-portrait .mood-layer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Quick mood flash (for reactions) */
.animated-portrait.mood-flash .mood-layer.active {
    animation: moodFlash 0.2s ease-out;
}

@keyframes moodFlash {
    0% { opacity: 0; transform: scale(1.05); }
    50% { opacity: 1; transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}

/* =====================================================================
   SPEAKING ANIMATION - Pulse when NPC is talking
   ===================================================================== */

.animated-portrait.speaking {
    animation: speakingPulse 0.8s ease-in-out infinite;
}

@keyframes speakingPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(255, 170, 80, 0.3);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 25px rgba(255, 170, 80, 0.5);
    }
}

/* Synthetic/AI speaking pulse (cyan) */
.animated-portrait.speaking.synthetic {
    animation: speakingPulseSynthetic 0.8s ease-in-out infinite;
}

@keyframes speakingPulseSynthetic {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 25px rgba(0, 240, 255, 0.5);
    }
}

/* =====================================================================
   BOUNCE ANIMATION - Excitement, surprise, agreement
   ===================================================================== */

.animated-portrait.bounce {
    animation: portraitBounce 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes portraitBounce {
    0% { transform: translateY(0); }
    20% { transform: translateY(-8px); }
    40% { transform: translateY(0); }
    60% { transform: translateY(-4px); }
    80% { transform: translateY(0); }
    100% { transform: translateY(0); }
}

/* Double bounce for extra emphasis */
.animated-portrait.bounce-double {
    animation: portraitBounceDouble 0.8s ease;
}

@keyframes portraitBounceDouble {
    0% { transform: translateY(0); }
    15% { transform: translateY(-10px); }
    30% { transform: translateY(0); }
    45% { transform: translateY(-6px); }
    60% { transform: translateY(0); }
    75% { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

/* =====================================================================
   EXPAND/ZOOM ANIMATION - Emphasis, importance
   ===================================================================== */

.animated-portrait.expand {
    animation: portraitExpand 0.4s ease-out;
}

@keyframes portraitExpand {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* Sustained expand (stays large) */
.animated-portrait.expand-hold {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* =====================================================================
   FLUCTUATE/SHAKE ANIMATION - Anger, fear, distress
   ===================================================================== */

.animated-portrait.shake {
    animation: portraitShake 0.5s ease-in-out;
}

@keyframes portraitShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-3px); }
    20% { transform: translateX(3px); }
    30% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    50% { transform: translateX(-2px); }
    60% { transform: translateX(2px); }
    70% { transform: translateX(-1px); }
    80% { transform: translateX(1px); }
    90% { transform: translateX(0); }
}

/* Intense shake for extreme emotion */
.animated-portrait.shake-intense {
    animation: portraitShakeIntense 0.6s ease-in-out;
}

@keyframes portraitShakeIntense {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5px, -2px); }
    20% { transform: translate(5px, 2px); }
    30% { transform: translate(-5px, 2px); }
    40% { transform: translate(5px, -2px); }
    50% { transform: translate(-4px, 0); }
    60% { transform: translate(4px, 0); }
    70% { transform: translate(-3px, 1px); }
    80% { transform: translate(3px, -1px); }
    90% { transform: translate(-1px, 0); }
}

/* =====================================================================
   FLOAT/FLUCTUATE ANIMATION - Calm, ethereal, thoughtful
   ===================================================================== */

.animated-portrait.float {
    animation: portraitFloat 3s ease-in-out infinite;
}

@keyframes portraitFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Subtle idle fluctuation */
.animated-portrait.idle-fluctuate {
    animation: idleFluctuate 4s ease-in-out infinite;
}

@keyframes idleFluctuate {
    0%, 100% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
    25% {
        transform: translateY(-2px) scale(1.005);
        filter: brightness(1.02);
    }
    50% {
        transform: translateY(0) scale(1);
        filter: brightness(1);
    }
    75% {
        transform: translateY(-1px) scale(0.998);
        filter: brightness(0.98);
    }
}

/* =====================================================================
   GLOW EFFECTS - Mood-based glows
   ===================================================================== */

.animated-portrait.glow-happy {
    box-shadow: 0 0 20px rgba(255, 220, 100, 0.4);
}

.animated-portrait.glow-angry {
    box-shadow: 0 0 20px rgba(255, 50, 50, 0.4);
}

.animated-portrait.glow-sad {
    box-shadow: 0 0 20px rgba(100, 150, 255, 0.3);
}

.animated-portrait.glow-stern {
    box-shadow: 0 0 20px rgba(150, 150, 180, 0.3);
}

.animated-portrait.glow-surprised {
    box-shadow: 0 0 20px rgba(255, 200, 50, 0.5);
}

.animated-portrait.glow-determined {
    box-shadow: 0 0 20px rgba(255, 180, 80, 0.4);
}

/* =====================================================================
   SYNTHETIC/AI SPECIFIC EFFECTS
   For ARIA and other AI characters
   ===================================================================== */

.animated-portrait.synthetic {
    border: 2px solid rgba(0, 240, 255, 0.5);
    box-shadow:
        0 0 15px rgba(0, 240, 255, 0.3),
        inset 0 0 10px rgba(0, 240, 255, 0.1);
}

.animated-portrait.synthetic.processing {
    animation: syntheticProcessing 1s ease-in-out infinite;
}

@keyframes syntheticProcessing {
    0%, 100% {
        box-shadow:
            0 0 15px rgba(0, 240, 255, 0.3),
            inset 0 0 10px rgba(0, 240, 255, 0.1);
    }
    50% {
        box-shadow:
            0 0 30px rgba(0, 240, 255, 0.5),
            inset 0 0 20px rgba(0, 240, 255, 0.2);
    }
}

/* Digital glitch effect for synthetic beings */
.animated-portrait.synthetic.glitch {
    animation: syntheticGlitch 0.3s ease;
}

@keyframes syntheticGlitch {
    0% { filter: none; transform: translate(0); }
    10% { filter: hue-rotate(90deg); transform: translate(2px, 0); }
    20% { filter: none; transform: translate(-2px, 0); }
    30% { filter: hue-rotate(-90deg); transform: translate(0, 2px); }
    40% { filter: none; transform: translate(0, -2px); }
    50% { filter: saturate(2); transform: translate(1px, 1px); }
    60% { filter: none; transform: translate(-1px, -1px); }
    70% { filter: contrast(1.5); transform: translate(0); }
    80% { filter: none; }
    100% { filter: none; transform: translate(0); }
}

/* Holographic scan lines for synthetic */
.animated-portrait.synthetic::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent 0px,
        transparent 2px,
        rgba(0, 240, 255, 0.03) 2px,
        rgba(0, 240, 255, 0.03) 4px
    );
    pointer-events: none;
    animation: scanLines 10s linear infinite;
}

@keyframes scanLines {
    from { background-position: 0 0; }
    to { background-position: 0 100px; }
}

/* =====================================================================
   REACTION ANIMATIONS - Quick emotional responses
   ===================================================================== */

/* Nod - agreement */
.animated-portrait.nod {
    animation: portraitNod 0.4s ease;
}

@keyframes portraitNod {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(3deg); }
    50% { transform: rotate(-2deg); }
    75% { transform: rotate(1deg); }
}

/* Head shake - disagreement */
.animated-portrait.head-shake {
    animation: portraitHeadShake 0.5s ease;
}

@keyframes portraitHeadShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

/* Lean in - interest */
.animated-portrait.lean-in {
    animation: portraitLeanIn 0.5s ease forwards;
}

@keyframes portraitLeanIn {
    0% { transform: scale(1); }
    100% { transform: scale(1.03) translateY(-2px); }
}

/* Lean back - surprise/recoil */
.animated-portrait.lean-back {
    animation: portraitLeanBack 0.4s ease;
}

@keyframes portraitLeanBack {
    0% { transform: scale(1); }
    40% { transform: scale(0.95) translateY(3px); }
    100% { transform: scale(1); }
}

/* =====================================================================
   MOOD-TO-ANIMATION MAPPING (CSS classes for quick application)
   ===================================================================== */

/* Happy reactions */
.animated-portrait[data-mood="happy"] {
    animation: portraitBounce 0.5s ease;
}

.animated-portrait[data-mood="happy"]::after {
    box-shadow: 0 0 20px rgba(255, 220, 100, 0.3);
}

/* Angry reactions */
.animated-portrait[data-mood="angry"] {
    animation: portraitShake 0.5s ease;
}

/* Sad reactions */
.animated-portrait[data-mood="sad"] {
    filter: brightness(0.9) saturate(0.8);
}

/* Surprised reactions */
.animated-portrait[data-mood="surprised"] {
    animation: portraitExpand 0.4s ease-out;
}

/* Stern reactions */
.animated-portrait[data-mood="stern"] {
    filter: contrast(1.05);
}

/* =====================================================================
   DIALOGUE CONTEXT ANIMATIONS
   ===================================================================== */

/* Player speaking to NPC */
.animated-portrait.listening {
    filter: brightness(0.95);
    transform: scale(0.98);
}

/* NPC responding */
.animated-portrait.responding {
    filter: brightness(1.05);
    transform: scale(1.02);
}

/* Thinking pause */
.animated-portrait.thinking {
    animation: thinkingPause 2s ease-in-out infinite;
}

@keyframes thinkingPause {
    0%, 100% { transform: translateY(0); filter: brightness(1); }
    50% { transform: translateY(-2px); filter: brightness(1.03); }
}

/* =====================================================================
   TRANSITION STATES
   ===================================================================== */

/* Entering conversation */
.animated-portrait.entering {
    animation: portraitEnter 0.5s ease-out;
}

@keyframes portraitEnter {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Leaving conversation */
.animated-portrait.leaving {
    animation: portraitLeave 0.3s ease-in forwards;
}

@keyframes portraitLeave {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

/* =====================================================================
   ACCESSIBILITY - Reduced motion
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    .animated-portrait,
    .animated-portrait *,
    .animated-portrait::after {
        animation: none !important;
        transition: opacity 0.2s ease !important;
    }
}