/* ============================
   1. НАСТРОЙКИ ТЕМ (VARIABLES)
   ============================ */
:root {
    /* --- СВЕТЛАЯ ТЕМА --- */
    /* --bg-gradient: radial-gradient(circle at 50% 30%, #e4e402, #c99b05, #ede102); */
    background-color: rgb(255, 255, 158);
    --trunk-filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.2));
    --text-color: rgba(255, 255, 255, 0.95);
    --text-shadow: 0 0 15px rgba(218, 165, 32, 0.8);
    --btn-bg: rgba(255, 255, 255, 0.2);

    --grape-glow-color: rgba(80, 0, 180, 0.85);
    --pulse-color-main: rgba(80, 0, 180, 0.8);
    --pulse-color-core: #ffffff;
}

body.dark-theme {
    /* --- ТЕМНАЯ ТЕМА --- */
    --bg-gradient: radial-gradient(circle at 50% 30%, #0f2027, #203a43, #2c5364);
    --trunk-filter: brightness(0.7) drop-shadow(0 0 15px rgba(100, 149, 237, 0.5));
    --text-color: #ecf0f1;
    --text-shadow: 0 0 10px rgba(0, 191, 255, 0.8);
    --btn-bg: rgba(255, 255, 255, 0.1);

    --grape-glow-color: rgba(255, 223, 0, 0.8);
    --pulse-color-main: rgba(255, 215, 0, 0.8);
    --pulse-color-core: #ffffff;
}

/* ============================
   2. ОБЩИЕ БАЗОВЫЕ СТИЛИ
   ============================ */
body,
html {
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: 'Segoe UI', serif;
    background: var(--bg-gradient);
    background-attachment: fixed;
    transition: background 0.8s ease, color 0.8s ease;
}

/* Кнопки */
.ui-controls {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    gap: 15px;
}

.theme-toggle-btn,
.home-btn {
    background: var(--btn-bg);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    backdrop-filter: blur(5px);
    transition: 0.3s all ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

h1 {
    position: absolute;
    top: 20px;
    width: 100%;
    text-align: center;
    color: var(--text-color);
    font-size: 2.5rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    z-index: 90;
    pointer-events: none;
    text-shadow: var(--text-shadow);
    transition: color 0.5s, text-shadow 0.5s;
}

.scene-wrapper {
    position: relative;
    width: 100%;
}

/* 4. СТВОЛ (Общие параметры) */
.magic-trunk {
    position: relative;
    width: 100%;
    background-color: #3e2723;
    filter: var(--trunk-filter);
    transition: filter 0.8s ease;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ПУЛЬСАЦИЯ (DESKTOP ПО УМОЛЧАНИЮ) */
.magic-trunk::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);

    /* Градиент для ПК - обычная пульсация */
    background: radial-gradient(circle, transparent 10%, var(--pulse-color-main) 30%,
            var(--pulse-color-core) 40%, var(--pulse-color-main) 50%, transparent 70%);
    mix-blend-mode: hard-light;
    animation: centerPulse 4s infinite ease-out;
    border-radius: 50%;
}

@keyframes centerPulse {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    80% {
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}

/* 5. ВИНОГРАД */
.grapes-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none;
}

.grape-item {
    position: absolute;
    display: block;
    pointer-events: auto;
    cursor: default;
}

.grape-img {
    width: 200px;
    height: auto;
    filter: grayscale(100%) brightness(0.6) contrast(0.8);
    opacity: 0.7;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.grape-item.active .grape-img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
    animation: grapeMagicGlow 2.5s infinite alternate ease-in-out;
}

@keyframes grapeMagicGlow {
    0% {
        filter: brightness(1) saturate(1) drop-shadow(0 0 0 transparent);
    }

    100% {
        filter: brightness(1.1) saturate(1.2) drop-shadow(0 0 25px var(--grape-glow-color));
    }
}

.grape-item.active:hover .grape-img {
    transform: scale(1.15);
    filter: brightness(1.2) saturate(1.4) drop-shadow(0 0 45px var(--grape-glow-color));
    animation: none;
    z-index: 50;
    transition: all 0.3s ease-out;
}


/* =================================================================
   !!! DESKTOP ONLY (ОТ 769px) !!!
   ================================================================= */
@media screen and (min-width: 769px) {

    body,
    html {
        height: 100vh;
        overflow: hidden;
    }

    .scene-wrapper {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .magic-trunk {
        height: 95vh;
        -webkit-mask-image: url('../media/Loza_img/Stvol.png');
        mask-image: url('../media/Loza_img/Stvol.png');
        -webkit-mask-size: contain;
        mask-size: contain;
    }
}


/* =================================================================
   !!! MOBILE ONLY (ДО 768px) - ИСПРАВЛЕННАЯ ВЕРСИЯ !!!
   ================================================================= */
@media screen and (max-width: 768px) {

    body,
    html {
        /* ВАЖНО: Разрешаем высоту больше экрана */
        height: auto !important;
        min-height: 100vh !important;

        /* ВАЖНО: Включаем стандартный скролл */
        overflow-y: auto !important;
        overflow-x: hidden;
        /* Убираем горизонтальную полосу */

        /* Возвращаем "пружинистость" (это лечит застревание на iPhone) */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: auto;
    }

    /* Добавляем страховку для контейнера */
    #world-container {
        height: auto !important;
        overflow: visible !important;
    }

    .scene-wrapper {
        display: block;
        width: 100%;
        max-width: 641px;
        margin: 0 auto;
        position: relative;
        height: 0;
        padding-bottom: 312%;
        overflow: hidden;
    }

    .magic-trunk {
        position: absolute;
        top: 0;
        left: 0;

        -webkit-mask-image: url('../media/Loza_img/Stvol_Mobile.png');
        mask-image: url('../media/Loza_img/Stvol_Mobile.png');

        width: 100%;
        height: 100%;

        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        -webkit-mask-position: top center;
        mask-position: top center;

        animation: none;
    }

    /* --- АДАПТАЦИЯ ЭНЕРГИИ (Столб света) --- */
    .magic-trunk::before {
        /* Используем эллипс, но растягиваем его анимацией */
        background: radial-gradient(ellipse at center,
                transparent 0%,
                transparent 15%,
                var(--pulse-color-core) 25%,
                var(--pulse-color-main) 45%,
                transparent 70%);
        animation: mobileEnergyFlow 4s infinite linear;
        mix-blend-mode: screen;
    }

    .grapes-layer {
        width: 100%;
        height: 100%;
    }

    .grape-img {
        width: 18%;
        max-width: 85px;
        min-width: 50px;
    }

    .grape-item {
        display: block !important;
    }

    /* Координаты винограда */
    .grape-item:nth-of-type(1) {
        top: 8% !important;
        left: 25% !important;
    }

    .grape-item:nth-of-type(2) {
        top: 10% !important;
        left: 60% !important;
    }

    .grape-item:nth-of-type(3) {
        top: 18% !important;
        left: 15% !important;
    }

    .grape-item:nth-of-type(4) {
        top: 25% !important;
        left: 65% !important;
    }

    .grape-item:nth-of-type(5) {
        top: 35% !important;
        left: 10% !important;
    }

    .grape-item:nth-of-type(6) {
        top: 45% !important;
        left: 60% !important;
    }

    .grape-item:nth-of-type(7) {
        top: 55% !important;
        left: 20% !important;
    }

    .grape-item:nth-of-type(8) {
        top: 65% !important;
        left: 30% !important;
    }

    .grape-item:nth-of-type(9) {
        top: 75% !important;
        left: 30% !important;
    }

    .grape-item:nth-of-type(10) {
        top: 85% !important;
        left: 30% !important;
    }

    .grape-item:nth-of-type(11) {
        top: 92% !important;
        left: 20% !important;
    }

    .grape-item:nth-of-type(12) {
        top: 96% !important;
        left: 10% !important;
    }

    h1 {
        font-size: 1.5rem;
        top: 15px;
    }
}

/* --- КЛЮЧЕВЫЕ КАДРЫ (РАСТЯНУТЫЙ СТОЛБ) --- */
@keyframes mobileEnergyFlow {
    0% {
        opacity: 0;
        /* Узкий, но высокий столб света */
        transform: translate(-50%, -50%) scale(0.05, 3.0);
    }

    10% {
        opacity: 1;
        /* Резкая вспышка яркости в начале */
    }

    100% {
        opacity: 0;
        /* Равномерное расширение до конца без остановок */
        transform: translate(-50%, -50%) scale(4.5, 4.5);
    }
}

/* === ЭФФЕКТ: НАЕЗД КАМЕРЫ === */

.scene-wrapper {
    /* 3 секунды - это очень плавно */
    transition: transform 3.0s cubic-bezier(0.25, 1, 0.5, 1); 
    will-change: transform;
    transform-origin: center center; /* По умолчанию центр */
}

/* Активный зум */
.camera-zoom-active {
    transform: scale(2.0); /* Не так агрессивно, как 2.8, чтобы не теряться */
    cursor: zoom-out;      /* Курсор покажет минус (на компе) */
}

/* На мобильных чуть сильнее */
@media screen and (max-width: 768px) {
    .camera-zoom-active {
        transform: scale(2.3); 
    }
}