/* SMOKE/FOG */
.smoke-container { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.smoke { position: absolute; bottom: -50px; width: 100%; height: 200px; background: radial-gradient(ellipse at center, rgba(100,100,100,0.15) 0%, transparent 70%); animation: smokeDrift 8s ease-in-out infinite; opacity: 0.6; }
.smoke:nth-child(2) { animation-delay: -3s; animation-duration: 10s; bottom: -30px; opacity: 0.4; }
.smoke:nth-child(3) { animation-delay: -6s; animation-duration: 12s; bottom: -70px; opacity: 0.3; }

@keyframes smokeDrift {
    0%, 100% { transform: translateX(-10%) scaleX(1.2); opacity: 0.3; }
    50% { transform: translateX(10%) scaleX(1.5); opacity: 0.6; }
}

/* TEXT FLICKER — анимирует только opacity, чтобы не затирать text-shadow заголовков */
.flicker { animation: textFlicker 4s ease-in-out infinite; }

@keyframes textFlicker {
    0%, 91%, 100% { opacity: 1; }
    92%, 94% { opacity: 0.8; }
    93%      { opacity: 1; }
    95%      { opacity: 0.65; }
    96%, 100% { opacity: 1; }
}

/* CARD GLOW */
.glow-hover { transition: box-shadow 0.3s ease; }
.glow-hover:hover { box-shadow: 0 0 25px rgba(196,30,30,0.2), 0 4px 20px rgba(0,0,0,0.5); }

/* FADE IN */
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* PULSE GLOW */
.pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(196,30,30,0.3); }
    50% { box-shadow: 0 0 20px rgba(196,30,30,0.5), 0 0 40px rgba(196,30,30,0.2); }
}

/* BLOOD DRIP */
.blood-drip { position: relative; }
.blood-drip::after { content: ''; position: absolute; bottom: -8px; left: 20%; width: 4px; height: 8px; background: var(--accent); border-radius: 0 0 4px 4px; animation: drip 3s ease-in-out infinite; }
@keyframes drip {
    0%, 80%, 100% { height: 8px; opacity: 1; }
    90% { height: 16px; opacity: 0.7; }
}

/* BLOOD DRIPS ON CARDS */
.blood-drips {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 3;
    overflow: hidden;
    border-radius: inherit;
}

.blood-drop {
    position: absolute;
    top: -2px;
    width: 6px;
    background: #8b0000;
    border-radius: 0 0 50% 50%;
    opacity: 0;
    animation: bloodDrip var(--drip-duration, 4s) var(--drip-delay, 0s) ease-in infinite;
    box-shadow: 0 0 4px rgba(139, 0, 0, 0.5);
}

.blood-drop::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 9px;
    height: 9px;
    background: #8b0000;
    border-radius: 50%;
    opacity: 0.85;
    box-shadow: 0 0 4px rgba(139, 0, 0, 0.6);
}

.blood-drop:nth-child(1)  { left: 4%;  width: 6px; --drip-duration: 4s;   --drip-delay: 0s;   --drip-max: 90px; }
.blood-drop:nth-child(2)  { left: 12%; width: 4px; --drip-duration: 5.2s; --drip-delay: 1.4s; --drip-max: 120px; }
.blood-drop:nth-child(3)  { left: 20%; width: 7px; --drip-duration: 4.5s; --drip-delay: 2.6s; --drip-max: 70px; }
.blood-drop:nth-child(4)  { left: 29%; width: 5px; --drip-duration: 5.8s; --drip-delay: 0.8s; --drip-max: 140px; }
.blood-drop:nth-child(5)  { left: 38%; width: 6px; --drip-duration: 4.2s; --drip-delay: 3.1s; --drip-max: 100px; }
.blood-drop:nth-child(6)  { left: 47%; width: 4px; --drip-duration: 5s;   --drip-delay: 1.9s; --drip-max: 75px; }
.blood-drop:nth-child(7)  { left: 56%; width: 7px; --drip-duration: 4.8s; --drip-delay: 2.4s; --drip-max: 125px; }
.blood-drop:nth-child(8)  { left: 65%; width: 5px; --drip-duration: 4.3s; --drip-delay: 0.5s; --drip-max: 85px; }
.blood-drop:nth-child(9)  { left: 74%; width: 6px; --drip-duration: 5.5s; --drip-delay: 2.8s; --drip-max: 110px; }
.blood-drop:nth-child(10) { left: 83%; width: 4px; --drip-duration: 4.6s; --drip-delay: 1.6s; --drip-max: 80px; }
.blood-drop:nth-child(11) { left: 91%; width: 7px; --drip-duration: 5s;   --drip-delay: 0.3s; --drip-max: 130px; }
.blood-drop:nth-child(12) { left: 97%; width: 5px; --drip-duration: 4.4s; --drip-delay: 2.1s; --drip-max: 95px; }

/* SIDE DRIPS — thicker, longer, streaming down edges */
.blood-drop-side {
    position: absolute;
    width: 7px;
    background: #8b0000;
    border-radius: 0 0 50% 50%;
    opacity: 0;
    animation: bloodDripSide var(--drip-duration, 6s) var(--drip-delay, 0s) ease-in infinite;
    box-shadow: 0 0 5px rgba(139, 0, 0, 0.6);
}

.blood-drop-side::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    background: #8b0000;
    border-radius: 50%;
    opacity: 0.85;
    box-shadow: 0 0 5px rgba(139, 0, 0, 0.6);
}

.blood-drop-side.left-1  { left: 2px;   top: 8%;  width: 6px; --drip-duration: 5.8s; --drip-delay: 0.4s; --drip-max: 180px; }
.blood-drop-side.left-2  { left: 10px;  top: 22%; width: 5px; --drip-duration: 6.5s; --drip-delay: 2.9s; --drip-max: 220px; }
.blood-drop-side.left-3  { left: 18px;  top: 3%;  width: 7px; --drip-duration: 5.2s; --drip-delay: 1.7s; --drip-max: 150px; }
.blood-drop-side.right-1 { right: 2px;  top: 12%; width: 6px; --drip-duration: 6s;   --drip-delay: 1.2s; --drip-max: 200px; }
.blood-drop-side.right-2 { right: 10px; top: 28%; width: 5px; --drip-duration: 6.8s; --drip-delay: 3.4s; --drip-max: 170px; }
.blood-drop-side.right-3 { right: 20px; top: 5%;  width: 7px; --drip-duration: 5.5s; --drip-delay: 0.6s; --drip-max: 230px; }

@keyframes bloodDrip {
    0%   { height: 0; opacity: 0; }
    5%   { height: 4px; opacity: 0.95; }
    50%  { height: calc(var(--drip-max, 60px) * 0.55); opacity: 0.85; }
    75%  { height: calc(var(--drip-max, 60px) * 0.82); opacity: 0.55; }
    100% { height: var(--drip-max, 60px); opacity: 0; }
}

@keyframes bloodDripSide {
    0%   { height: 0; opacity: 0; }
    5%   { height: 6px; opacity: 0.95; }
    55%  { height: calc(var(--drip-max, 150px) * 0.6); opacity: 0.85; }
    82%  { height: calc(var(--drip-max, 150px) * 0.88); opacity: 0.45; }
    100% { height: var(--drip-max, 150px); opacity: 0; }
}

/* ============ DARKNESS + CANDLE CURSOR ============ */

body.candle-mode,
body.candle-mode * { cursor: none !important; }

/* Inputs keep a visible caret so users can still type */
body.candle-mode input,
body.candle-mode textarea { cursor: text !important; }

.darkness-layer {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    z-index: 500;
    pointer-events: none;
    background: radial-gradient(
        circle 230px at var(--mx, 50vw) var(--my, 50vh),
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.25) 30%,
        rgba(0, 0, 0, 0.7) 65%,
        rgba(0, 0, 0, 0.93) 100%
    );
    opacity: 0;
    animation: darknessFadeIn 900ms ease-out 100ms forwards;
}

body.candle-away .darkness-layer {
    background: rgba(0, 0, 0, 0.93);
    transition: background 400ms ease-out;
}

@keyframes darknessFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.candle-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 60px;
    height: 140px;
    z-index: 2001;
    pointer-events: none;
    /* Hotspot: flame tip at (30, 14) of viewBox → translate so it sits on cursor */
    transform: translate3d(calc(var(--mx, 0px) - 30px), calc(var(--my, 0px) - 14px), 0);
    will-change: transform;
    filter:
        drop-shadow(0 0 10px rgba(255, 170, 60, 0.6))
        drop-shadow(0 0 24px rgba(255, 120, 30, 0.35));
}

body.candle-away .candle-cursor { opacity: 0; transition: opacity 250ms; }

.candle-cursor svg { width: 100%; height: 100%; display: block; overflow: visible; }

.candle-cursor .c-flame {
    transform-origin: 30px 48px;
    animation: flameFlicker 150ms ease-in-out infinite alternate;
}

@keyframes flameFlicker {
    0%   { transform: scale(1, 1)       skewX(0deg);  opacity: 1; }
    50%  { transform: scale(1.05, 0.96) skewX(2deg);  opacity: 0.95; }
    100% { transform: scale(0.96, 1.04) skewX(-2deg); opacity: 1; }
}

/* ============ NEON GLOWING TEXT ============ */

/* Real title elements keep their layout space but become transparent —
   the neon-mirror (above darkness) is what the user sees. */
body.candle-mode .section-title,
body.candle-mode .nav-logo-text,
body.candle-mode .hero h1,
body.candle-mode .quest-hero-content h1 {
    color: transparent !important;
    text-shadow: none !important;
}

.neon-mirror {
    position: absolute; /* document coords — scrolls with page, no scroll listener needed */
    left: 0;
    top: 0;
    z-index: 1050; /* above darkness(500) and navbar(1000), below lightbox(2000) and candle(2001) */
    pointer-events: none;
    color: #fff5f5;
    text-shadow:
        0 0 2px #ffffff,
        0 0 6px #ffd0d0,
        0 0 14px #ff2b2b,
        0 0 28px #c41e1e,
        0 0 52px #8b0000,
        0 0 90px rgba(139, 0, 0, 0.6);
    animation: neonFlicker 3.6s linear infinite;
    will-change: opacity;
    box-sizing: border-box;
}

/* Element is inside a position:fixed ancestor (e.g. navbar) —
   mirror stays locked to the viewport, does not scroll with page */
.neon-mirror.neon-mirror--fixed { position: fixed; }

.neon-mirror--white {
    color: #ffffff;
    text-shadow:
        0 0 2px #ffffff,
        0 0 8px #ffffff,
        0 0 18px #f5fbff,
        0 0 36px rgba(210, 230, 255, 0.95),
        0 0 64px rgba(180, 210, 255, 0.75),
        0 0 110px rgba(150, 200, 255, 0.55);
}

/* On mobile the blur radii relative to small font washed letters into a solid
   white blob — keep only a tight crisp halo so letter shapes stay readable. */
@media (hover: none), (max-width: 768px) {
    .candle-cursor { display: none !important; }

    .neon-mirror {
        color: #ffecec;
        text-shadow:
            0 0 2px #ffffff,
            0 0 5px #ff8080,
            0 0 12px #ff2020,
            0 0 24px rgba(196, 30, 30, 1),
            0 0 48px rgba(196, 30, 30, 0.85),
            0 0 85px rgba(139, 0, 0, 0.6);
    }
    .neon-mirror--white {
        color: #f8fbff;
        text-shadow:
            0 0 1px #ffffff,
            0 0 2px rgba(200, 220, 255, 0.95),
            0 0 5px rgba(140, 180, 255, 0.6);
    }
}

@keyframes neonFlicker {
    0%, 19%, 21%, 23%, 80%, 83%, 87%, 100% { opacity: 1; }
    20%  { opacity: 0.45; }
    22%  { opacity: 0.8; }
    40%  { opacity: 1; }
    41%  { opacity: 0.6; }
    42%  { opacity: 1; }
    81%  { opacity: 0.35; }
    82%  { opacity: 0.9; }
    85%  { opacity: 0.5; }
    86%  { opacity: 1; }
}

/* SPINNER */
.spinner { width: 40px; height: 40px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 20px auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ========= CARD BLOOD FX VIDEO OVERLAY (desktop only) =========
   .card-fx-video--alpha — video has real alpha channel (effect1.webm, white bg keyed out)
   .card-fx-video--screen — video is opaque with dark bg; screen blend drops dark pixels */
.card-fx-video {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    opacity: 0.55;
    background: transparent;
    z-index: 3;
    will-change: opacity;
}
.card-fx-video--screen {
    mix-blend-mode: screen;
}
/* Mobile/iOS Safari can't decode VP9 alpha channel — video plays with opaque black bg.
   Force screen blend there so black background drops out (red blood still shows). */
@media (hover: none), (pointer: coarse), (max-width: 768px) {
    .card-fx-video { mix-blend-mode: screen; }
}
@media (prefers-reduced-motion: reduce) {
    .card-fx-video { display: none !important; }
}