/**
 * PROLOG: Les
 * ============
 * Specifické styly pro Prolog (cesta lesem k zámku)
 *
 * NAMING KONVENCE:
 * - Všechny třídy používají prefix kP-
 *
 * ZÓNY (dle referenčního obrázku s žlutými rámečky):
 * - oci: malý čtverec vlevo (~3%, 48%)
 * - plast: vysoký obdélník vlevo (~8%, 28%)
 * - zamek: velký čtverec nahoře uprostřed (~38%, 5%)
 * - brana: malý obdélník pod zámkem (~44%, 40%)
 * - pesina: velký obdélník dole uprostřed (~35%, 58%)
 * - easter-egg: vysoký obdélník vpravo (~92%, 28%)
 */

/* ==========================================================================
   PROLOG - ZÁKLADNÍ MODIFIKÁTOR
   ========================================================================== */

.komnata-prolog {
    background: linear-gradient(to bottom, #020204, #0a0f12);
}

/* Preloader specifický pro Prolog */
.prolog-preloader .preloader-title {
    font-size: 2.5rem;
    letter-spacing: 0.3em;
}

.prolog-preloader .preloader-subtitle {
    font-style: italic;
    color: #B84035;
    margin-top: 0.5rem;
}

/* ==========================================================================
   INTERAKTIVNÍ ZÓNY - POZICE DLE SCREENSHOTU Z PROHLÍŽEČE
   (Deaktivace zón je nyní v core.css - univerzální pro všechny komnaty)
   ========================================================================== */

/* ZÓNA: Vlčí oči (malý čtverec vlevo dole) */
.kP-zone-oci {
    position: absolute;
    left: 11%;
    top: 64%;
    width: 9%;
    height: 13%;
    cursor: pointer;
}

.kP-zone-oci .zone-highlight {
    background: transparent;
}

/* ZÓNA: Červený plášť (vysoký obdélník vlevo) */
.kP-zone-plast {
    position: absolute;
    left: 23%;
    top: 34%;
    width: 7%;
    height: 52%;
    cursor: pointer;
}

.kP-zone-plast .zone-highlight {
    background: transparent;
}

/* ZÓNA: Věž (malý čtverec nahoře) */
.kP-zone-vez {
    position: absolute;
    left: 42%;
    top: 19%;
    width: 6%;
    height: 12%;
    cursor: pointer;
}

.kP-zone-vez .zone-highlight {
    background: transparent;
}

/* ZÓNA: Zámek (velký obdélník pod věží) */
.kP-zone-zamek {
    position: absolute;
    left: 42%;
    top: 26%;
    width: 15%;
    height: 21%;
    cursor: pointer;
}

.kP-zone-zamek .zone-highlight {
    background: transparent;
}

.kP-zone-zamek:hover .zone-highlight,
.kP-zone-zamek.active .zone-highlight,
.kP-zone-zamek.touch-active .zone-highlight {
    opacity: 1;
    background: radial-gradient(ellipse at center,
        rgba(74, 111, 165, 0.3) 0%,
        transparent 70%);
}

/* ZÓNA: Brána (menší obdélník pod zámkem) */
.kP-zone-brana {
    position: absolute;
    left: 46%;
    top: 42%;
    width: 15%;
    height: 18%;
    cursor: pointer;
}

.kP-zone-brana .zone-highlight {
    background: transparent;
}

.kP-zone-brana:hover .zone-highlight,
.kP-zone-brana.active .zone-highlight,
.kP-zone-brana.touch-active .zone-highlight {
    background: radial-gradient(ellipse at center,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 70%);
}

/* ZÓNA: Pěšina (velký obdélník dole uprostřed) */
.kP-zone-pesina {
    position: absolute;
    left: 37%;
    top: 65%;
    width: 27%;
    height: 25%;
    cursor: pointer;
}

.kP-zone-pesina .zone-highlight {
    background: transparent;
}

/* Doplňková zóna */
.kP-zone-easter-egg {
    position: absolute;
    right: 8%;
    left: auto;
    top: 30%;
    width: 12%;
    height: 35%;
    cursor: pointer;
    opacity: 0.15;
}

/* Musí mít :hover i .touch-active — jinak se rámeček na mobilu nezobrazí */
.kP-zone-easter-egg:hover,
.kP-zone-easter-egg.touch-active {
    opacity: 1;
}

.kP-zone-easter-egg .zone-highlight {
    background: transparent;
}

/* ==========================================================================
   MLHA
   ========================================================================== */

.kP-fog-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.kP-fog {
    position: absolute;
    left: -50%;
    width: 200%;
    height: 30%;
    background: linear-gradient(to right,
        transparent 0%,
        rgba(40, 50, 70, 0.3) 15%,
        rgba(40, 50, 70, 0.4) 50%,
        rgba(40, 50, 70, 0.3) 85%,
        transparent 100%);
    filter: blur(20px);
    animation: kP-fogDrift 60s linear infinite;
}

.kP-fog-1 {
    top: 45%;
    animation-delay: 0s;
    opacity: 0.5;
}

.kP-fog-2 {
    top: 55%;
    animation-delay: -20s;
    opacity: 0.4;
}

.kP-fog-3 {
    top: 65%;
    animation-delay: -40s;
    opacity: 0.3;
}

@keyframes kP-fogDrift {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(50%);
    }
}

/* ==========================================================================
   PRACH / ČÁSTICE
   ========================================================================== */

/* Vrstva světlušek (bez parallaxu) */
.layer-fireflies {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
}

.kP-dust-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

/* Světlušky */
.kP-dust {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(170, 190, 90, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 4px 2px rgba(170, 190, 90, 0.4);
    animation: kP-fireflyFloat 18s ease-in-out infinite,
               kP-fireflyGlow 3.5s ease-in-out infinite;
}

.kP-dust-1 { top: 35%; left: 15%; animation-delay: 0s, 0s; }
.kP-dust-2 { top: 50%; left: 30%; animation-delay: 2.5s, 0.6s; }
.kP-dust-3 { top: 60%; left: 45%; animation-delay: 5s, 1.2s; }
.kP-dust-4 { top: 45%; left: 60%; animation-delay: 7.5s, 1.8s; }
.kP-dust-5 { top: 55%; left: 20%; animation-delay: 10s, 2.4s; }
.kP-dust-6 { top: 40%; left: 70%; animation-delay: 12.5s, 0.4s; }
.kP-dust-7 { top: 65%; left: 10%; animation-delay: 15s, 1.5s; }
.kP-dust-8 { top: 50%; left: 75%; animation-delay: 17.5s, 2.8s; }

@keyframes kP-fireflyFloat {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-18px) translateX(10px);
    }
    50% {
        transform: translateY(-30px) translateX(-5px);
    }
    75% {
        transform: translateY(-12px) translateX(-12px);
    }
}

@keyframes kP-fireflyGlow {
    0%, 100% {
        opacity: 0.15;
        box-shadow: 0 0 3px 1px rgba(170, 190, 90, 0.2);
    }
    50% {
        opacity: 0.7;
        box-shadow: 0 0 6px 3px rgba(170, 190, 90, 0.5);
    }
}

/* ==========================================================================
   INTRO TEXT - SBĚRATELŮV MONOLOG
   ========================================================================== */

.komnata-prolog .intro-text {
    max-width: 700px;
    cursor: pointer;
}

.komnata-prolog .intro-line.emphasis {
    color: #B84035;
    font-weight: 600;
}

/* ==========================================================================
   OUTRO - PŘECHOD DO ZÁMKU
   ========================================================================== */

.komnata-prolog .outro-text {
    text-align: center;
}

.komnata-prolog .continue-button {
    background: linear-gradient(135deg, #3D2914 0%, #1a1008 100%);
    border: 1px solid #8B0000;
}

.komnata-prolog .continue-button:hover {
    background: linear-gradient(135deg, #5D3924 0%, #2a1a12 100%);
    border-color: #a00000;
    box-shadow: 0 0 20px rgba(139, 0, 0, 0.4);
}

/* ==========================================================================
   RESPONSIVE ÚPRAVY
   ========================================================================== */

/* (min. velikosti zón řeší globálně core.css přes .interactive-zone) */

@media (max-width: 768px) {
    .kP-fog-2,
    .kP-fog-3 {
        display: none;
    }

    .kP-dust {
        display: none;
    }

    .prolog-preloader .preloader-title {
        font-size: 1.8rem;
        letter-spacing: 0.15em;
    }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .kP-fog,
    .kP-dust {
        animation: none;
    }

    .kP-fog {
        opacity: 0.3;
    }
}