/**
 * KOMNATA 1: Studna u brány
 * =========================
 * Specifické styly pro Komnatu 1 - Žabí princ
 *
 * NAMING KONVENCE:
 * - Všechny třídy používají prefix k1-
 *
 * Barevná paleta:
 * - Noční modrá: #1a1f2e
 * - Teplá žlutá: #e8c547
 * - Růžová: #c45a7a
 * - Zlatá: #ffd700
 * - Mokrá šedá: #4a5a5a
 */

/* ==========================================================================
   KOMNATA 1 - ZÁKLADNÍ MODIFIKÁTOR
   ========================================================================== */

.komnata-1 {
    /* Noční atmosféra */
    background: linear-gradient(to bottom, #0a0a12, #1a1f2e);
}

/* ==========================================================================
   INTERAKTIVNÍ ZÓNY - POZICE
   ========================================================================== */

/* ZÓNA 1: Otevřené dveře - vysoký obdélník vlevo */
.k1-zone-dvere {
    position: absolute;
    left: 30%;
    top: 18%;
    width: 12%;
    height: 55%;
}

/* ZÓNA 2: Mokrý otisk žáby na zdi - vedle dveří */
.k1-zone-otisk {
    position: absolute;
    left: 45%;
    top: 38%;
    width: 12%;
    height: 28%;
}

/* ZÓNA 3: Zlatá korunka - na zemi uprostřed */
.k1-zone-korunka {
    position: absolute;
    left: 50%;
    top: 65%;
    width: 10%;
    height: 18%;  /* 10% * 16/9 ≈ 18% pro vizuální čtverec */
}

/* ZÓNA 4: Princezna - velký obdélník vpravo */
.k1-zone-princezna {
    position: absolute;
    left: 63%;
    top: 22%;
    width: 22%;
    height: 66%;
}

/* ZÓNA 5: Stopy v blátě - pod korunkou/dveřmi */
.k1-zone-stopy {
    position: absolute;
    left: 32%;
    top: 73%;
    width: 18%;
    height: 12%;
}

/* ZÓNA 6: Studna - pravý dolní roh */
.k1-zone-studna {
    position: absolute;
    right: 0%;
    left: auto;
    top: 50%;
    width: 18%;
    height: 18%;
}

/* Doplňková zóna */
.k1-zone-easter-egg {
    position: absolute;
    left: 10%;
    top: 5%;
    width: 15%;
    height: 21%;
    opacity: 0.15;
}

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

/* ==========================================================================
   EFEKTY ZÓNY - HOVER STAVY
   ========================================================================== */

/* Dveře - teplá záře */
.k1-zone-dvere .zone-highlight {
    background: radial-gradient(ellipse at center,
        rgba(232, 197, 71, 0.2) 0%,
        transparent 70%);
}

.k1-zone-dvere:hover .zone-highlight,
.k1-zone-dvere.active .zone-highlight,
.k1-zone-dvere.touch-active .zone-highlight {
    opacity: 1;
    background: radial-gradient(ellipse at center,
        rgba(232, 197, 71, 0.35) 0%,
        transparent 70%);
}

/* Otisk žáby - mokrá modrošedá záře */
.k1-zone-otisk .zone-highlight {
    background: radial-gradient(ellipse at center,
        rgba(74, 90, 90, 0.3) 0%,
        transparent 70%);
}

.k1-zone-otisk:hover .zone-highlight,
.k1-zone-otisk.active .zone-highlight,
.k1-zone-otisk.touch-active .zone-highlight {
    opacity: 1;
}

/* Korunka - jemná zlatá záře */
.k1-zone-korunka .zone-highlight {
    background: radial-gradient(ellipse at center,
        rgba(255, 215, 0, 0.15) 0%,
        transparent 70%);
}

.k1-zone-korunka:hover .zone-highlight,
.k1-zone-korunka.active .zone-highlight,
.k1-zone-korunka.touch-active .zone-highlight {
    opacity: 1;
}

/* Princezna - jemná bílá záře */
.k1-zone-princezna .zone-highlight {
    background: radial-gradient(ellipse at center,
        rgba(245, 240, 230, 0.15) 0%,
        transparent 70%);
}

.k1-zone-princezna:hover .zone-highlight,
.k1-zone-princezna.active .zone-highlight,
.k1-zone-princezna.touch-active .zone-highlight {
    opacity: 1;
}

/* Stopy - hnědá záře */
.k1-zone-stopy .zone-highlight {
    background: radial-gradient(ellipse at center,
        rgba(101, 67, 33, 0.25) 0%,
        transparent 70%);
}

.k1-zone-stopy:hover .zone-highlight,
.k1-zone-stopy.active .zone-highlight,
.k1-zone-stopy.touch-active .zone-highlight {
    opacity: 1;
}

/* Studna - jemná modrá záře */
.k1-zone-studna .zone-highlight {
    background: radial-gradient(ellipse at center,
        rgba(100, 140, 180, 0.15) 0%,
        transparent 70%);
}

.k1-zone-studna:hover .zone-highlight,
.k1-zone-studna.active .zone-highlight,
.k1-zone-studna.touch-active .zone-highlight {
    opacity: 1;
}

/* Doplňková zóna - záměrně bez záře */
.k1-zone-easter-egg .zone-highlight {
    background: transparent;
}

.k1-zone-easter-egg:hover .zone-highlight,
.k1-zone-easter-egg.active .zone-highlight,
.k1-zone-easter-egg.touch-active .zone-highlight {
    background: radial-gradient(ellipse at center,
        rgba(196, 90, 122, 0.15) 0%,
        transparent 60%);
    opacity: 1;
}

/* ==========================================================================
   MLHA U ZEMĚ
   ========================================================================== */

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

.k1-fog {
    position: absolute;
    bottom: -10%;
    width: 150%;
    height: 100%;
    background: linear-gradient(
        to top,
        rgba(180, 190, 200, 0.15) 0%,
        rgba(180, 190, 200, 0.08) 30%,
        transparent 70%
    );
    animation: k1-fogDrift 25s ease-in-out infinite;
}

.k1-fog-1 {
    left: -25%;
    animation-delay: 0s;
}

.k1-fog-2 {
    left: -50%;
    animation-delay: 12s;
    opacity: 0.7;
}

@keyframes k1-fogDrift {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    50% {
        transform: translateX(15%) translateY(-5%);
    }
}

/* ==========================================================================
   PRACH VE SVĚTLE
   ========================================================================== */

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

.k1-dust {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(232, 197, 71, 0.5);
    border-radius: 50%;
    animation: k1-dustFloat 12s ease-in-out infinite;
}

/* Pozice jednotlivých částic - koncentrované ve světle z dveří */
.k1-dust-1 { top: 40%; left: 30%; animation-delay: 0s; }
.k1-dust-2 { top: 50%; left: 45%; animation-delay: 1.5s; }
.k1-dust-3 { top: 55%; left: 25%; animation-delay: 3s; }
.k1-dust-4 { top: 45%; left: 55%; animation-delay: 4.5s; }
.k1-dust-5 { top: 60%; left: 35%; animation-delay: 6s; }
.k1-dust-6 { top: 48%; left: 60%; animation-delay: 7.5s; }
.k1-dust-7 { top: 52%; left: 20%; animation-delay: 9s; }
.k1-dust-8 { top: 58%; left: 50%; animation-delay: 10.5s; }

@keyframes k1-dustFloat {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    50% {
        transform: translateY(-40px) translateX(15px);
        opacity: 0.5;
    }
    90% {
        opacity: 0.6;
    }
}

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

/* Mobil */
@media (max-width: 768px) {
    /* Zjednodušení efektů pro výkon */
    .k1-dust {
        display: none;
    }

    .k1-fog {
        opacity: 0.5;
    }
}

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

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