/* cinema.css
   Styles for cinematic-director.js overlays. These elements are injected
   into #rw-cinematic-root by the director, outside any Blazor component,
   so scoped CSS can't reach them — they live here as globals.
   Uses the existing --rw-* design tokens from app.css. */

/* ---------- Chapter title card ---------- */

.rw-chapter-card {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    pointer-events: none;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    background: radial-gradient(
        ellipse at center,
        rgba(7, 14, 20, 0.55) 0%,
        rgba(7, 14, 20, 0.85) 70%);
    z-index: 10002;
}

.rw-chapter-card.rw-chapter-card-in {
    opacity: 1;
    transform: translateY(0);
}

.rw-chapter-card.rw-chapter-card-out {
    opacity: 0;
    transform: translateY(-24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.rw-chapter-card-title {
    font-family: "Fraunces", "MedievalSharp", serif;
    font-weight: 700;
    font-size: clamp(3rem, 7vw, 6rem);
    letter-spacing: 0.02em;
    line-height: 1.05;
    color: var(--rw-gold-light, #dab855);
    text-shadow:
        0 2px 16px rgba(0, 0, 0, 0.7),
        0 0 32px rgba(196, 160, 64, 0.25);
    text-align: center;
    padding: 0 2rem;
    max-width: 90vw;
}

.rw-chapter-card-subtitle {
    font-family: "Alegreya SC", "Alegreya", serif;
    font-weight: 400;
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    letter-spacing: 0.25em;
    color: var(--rw-sage-cream, #d8cfb8);
    text-transform: uppercase;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
    text-align: center;
    padding: 0 2rem;
    opacity: 0.85;
}

/* ---------- Party-panel spotlight ring ---------- */

.rw-cinema-spotlight {
    position: relative;
    animation: rw-cinema-spotlight-pulse 1.6s ease-in-out infinite;
    z-index: 2;
}

.rw-cinema-spotlight::after {
    content: "";
    position: absolute;
    inset: -8px;
    border-radius: inherit;
    border: 2px solid var(--rw-gold, #c4a040);
    box-shadow:
        0 0 24px 4px rgba(196, 160, 64, 0.45),
        inset 0 0 12px rgba(196, 160, 64, 0.2);
    pointer-events: none;
    animation: rw-cinema-spotlight-ring 2.4s ease-in-out infinite;
}

@keyframes rw-cinema-spotlight-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}

@keyframes rw-cinema-spotlight-ring {
    0%, 100% {
        box-shadow:
            0 0 24px 4px rgba(196, 160, 64, 0.45),
            inset 0 0 12px rgba(196, 160, 64, 0.2);
    }
    50% {
        box-shadow:
            0 0 42px 8px rgba(218, 184, 85, 0.7),
            inset 0 0 20px rgba(218, 184, 85, 0.3);
    }
}

.rw-cinema-spotlight-label {
    position: absolute;
    left: 50%;
    bottom: -1.75rem;
    transform: translateX(-50%);
    font-family: "Alegreya SC", "Alegreya", serif;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rw-gold-light, #dab855);
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.85);
    white-space: nowrap;
    pointer-events: none;
    animation: rw-cinema-spotlight-label-in 0.4s ease-out forwards;
}

@keyframes rw-cinema-spotlight-label-in {
    from { opacity: 0; transform: translateX(-50%) translateY(6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .rw-chapter-card,
    .rw-chapter-card.rw-chapter-card-in,
    .rw-chapter-card.rw-chapter-card-out {
        transition-duration: 0.2s;
        transform: none;
    }
    .rw-cinema-spotlight,
    .rw-cinema-spotlight::after {
        animation: none;
    }
    .rw-spell-overlay,
    .rw-spell-wisp,
    .rw-spell-shimmer,
    .rw-spell-morph-blur {
        animation: none !important;
        display: none;
    }
}

/* ---------- Cinematic captions (flashCaption) ---------- */

.rw-cinema-caption {
    position: fixed;
    left: 50%;
    top: 18%;
    transform: translate(-50%, -10px);
    padding: 0.55rem 1.75rem;
    font-family: "Fraunces", "MedievalSharp", serif;
    font-style: italic;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    letter-spacing: 0.04em;
    color: var(--rw-sage-cream, #d8cfb8);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.9);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    white-space: nowrap;
    z-index: 10002;
}

.rw-cinema-caption.rw-cinema-caption-in {
    opacity: 1;
    transform: translate(-50%, 0);
}

.rw-cinema-caption.rw-cinema-caption-out {
    opacity: 0;
    transform: translate(-50%, -10px);
    transition-duration: 0.4s;
}

.rw-caption-grim {
    color: #e7b8b2;
    text-shadow: 0 2px 16px rgba(80, 10, 10, 0.9);
}

.rw-caption-gold {
    color: var(--rw-gold-light, #dab855);
    text-shadow:
        0 2px 16px rgba(0, 0, 0, 0.8),
        0 0 24px rgba(196, 160, 64, 0.4);
}

.rw-caption-menace {
    color: #ffb3a8;
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-shadow:
        0 2px 20px rgba(0, 0, 0, 0.95),
        0 0 32px rgba(196, 30, 30, 0.45);
}

/* ---------- Spell-school overlays (spell-school-vfx.js) ---------- */

.rw-spell-overlay {
    transform: translate(-50%, -50%);
    opacity: 1;
    transition: opacity 0.35s ease-out;
}

.rw-spell-overlay.rw-spell-overlay-out {
    opacity: 0;
}

/* Conjuration sigil ring — gold circle with engraved glyphs. */
.rw-spell-sigil {
    width: 220px;
    height: 220px;
    border: 2px solid var(--rw-gold, #c4a040);
    border-radius: 50%;
    box-shadow:
        0 0 32px rgba(196, 160, 64, 0.55),
        inset 0 0 24px rgba(196, 160, 64, 0.35);
    animation: rw-spell-sigil-in 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.rw-spell-sigil::before,
.rw-spell-sigil::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed rgba(218, 184, 85, 0.5);
    animation: rw-spell-sigil-spin 3.5s linear infinite;
}

.rw-spell-sigil::after {
    inset: 18px;
    animation-direction: reverse;
    animation-duration: 4.5s;
    border-style: dotted;
}

@keyframes rw-spell-sigil-in {
    from { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
    to   { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
}
@keyframes rw-spell-sigil-spin {
    to { transform: rotate(360deg); }
}

/* Healing vignette — warm gold radial wash. */
.rw-spell-vignette {
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 232, 168, 0.35) 0%,
        rgba(218, 184, 85, 0.2) 40%,
        transparent 75%);
    animation: rw-spell-vignette-pulse 1.1s ease-out;
}

@keyframes rw-spell-vignette-pulse {
    0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
}

/* Abjuration ward — expanding teal ring. */
.rw-spell-ward {
    width: 40px;
    height: 40px;
    border: 3px solid #9cdbe8;
    border-radius: 50%;
    box-shadow: 0 0 24px rgba(95, 178, 208, 0.65);
    animation: rw-spell-ward-expand 0.9s ease-out;
}

@keyframes rw-spell-ward-expand {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 1; border-width: 4px; }
    100% { transform: translate(-50%, -50%) scale(8);   opacity: 0; border-width: 1px; }
}

/* Transmutation ripple — amber concentric wave. */
.rw-spell-ripple {
    width: 60px;
    height: 60px;
    border: 2px solid rgba(224, 136, 48, 0.65);
    border-radius: 50%;
    animation: rw-spell-ripple-wave 0.7s ease-out;
}

.rw-spell-morph-blur {
    filter: blur(3px) hue-rotate(15deg) saturate(1.25);
    transition: filter 0.25s ease-out;
}

@keyframes rw-spell-ripple-wave {
    0%   { transform: translate(-50%, -50%) scale(0.25); opacity: 0; }
    25%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(6.5);  opacity: 0; }
}

/* Divination tracers — radial lines with a subtle spin. */
.rw-spell-tracer {
    width: 280px;
    height: 280px;
    background:
        conic-gradient(
            from 0deg,
            transparent 0deg,    rgba(156, 220, 254, 0) 10deg,
            rgba(156, 220, 254, 0.5) 12deg, transparent 22deg,
            transparent 88deg,   rgba(156, 220, 254, 0) 90deg,
            rgba(156, 220, 254, 0.5) 92deg, transparent 104deg,
            transparent 178deg,  rgba(156, 220, 254, 0.5) 182deg,
            transparent 194deg,
            transparent 268deg,  rgba(156, 220, 254, 0.5) 272deg,
            transparent 284deg);
    border-radius: 50%;
    opacity: 0;
    mix-blend-mode: screen;
    animation: rw-spell-tracer-sweep 0.8s ease-out;
}

@keyframes rw-spell-tracer-sweep {
    0%   { transform: translate(-50%, -50%) scale(0.4) rotate(-25deg); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1)   rotate(35deg);  opacity: 0; }
}

/* Enchantment heart-pulse — soft pink oscillation. */
.rw-spell-heart {
    width: 180px;
    height: 180px;
    background: radial-gradient(circle,
        rgba(255, 153, 204, 0.55) 0%,
        rgba(232, 160, 255, 0.2) 50%,
        transparent 75%);
    border-radius: 50%;
    animation: rw-spell-heart-beat 0.85s ease-out;
}

@keyframes rw-spell-heart-beat {
    0%   { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
    25%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    55%  { transform: translate(-50%, -50%) scale(0.92); opacity: 0.85; }
    100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

/* Illusion bokeh + target shimmer. */
.rw-spell-bokeh {
    width: 240px;
    height: 240px;
    background:
        radial-gradient(circle at 30% 30%, rgba(178, 102, 255, 0.4), transparent 30%),
        radial-gradient(circle at 70% 55%, rgba(102, 224, 255, 0.4), transparent 25%),
        radial-gradient(circle at 45% 75%, rgba(255, 153, 221, 0.4), transparent 30%);
    border-radius: 50%;
    filter: blur(4px);
    animation: rw-spell-bokeh-drift 0.7s ease-out;
}

@keyframes rw-spell-bokeh-drift {
    0%   { transform: translate(-50%, -50%) scale(0.5) rotate(0deg);   opacity: 0; }
    30%  { opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(1.4) rotate(40deg);  opacity: 0; }
}

.rw-spell-shimmer {
    animation: rw-spell-shimmer-jitter 0.9s steps(9) 1;
}

@keyframes rw-spell-shimmer-jitter {
    0%, 100% { filter: none; }
    10%      { filter: drop-shadow(2px 0 rgba(178, 102, 255, 0.75)) drop-shadow(-2px 0 rgba(102, 224, 255, 0.75)); }
    30%      { filter: drop-shadow(-1px 1px rgba(255, 153, 221, 0.75)) drop-shadow(1px -1px rgba(102, 224, 255, 0.75)); }
    60%      { filter: drop-shadow(1px 0 rgba(178, 102, 255, 0.6)) drop-shadow(-1px 0 rgba(102, 224, 255, 0.6)); }
    85%      { filter: drop-shadow(-2px 1px rgba(255, 153, 221, 0.6)); }
}

/* Necromancy wisp — rising smoky tendrils. */
.rw-spell-wisp {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    opacity: 0.85;
    filter: blur(4px);
    transform: translate(-50%, -50%);
    animation: rw-spell-wisp-rise 1.6s ease-out forwards;
}

@keyframes rw-spell-wisp-rise {
    0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
    20%  { opacity: 0.9; }
    100% { transform: translate(-50%, -160%) scale(1.8); opacity: 0; }
}