/*
 * Christmas Tree Animation
 * Original code by Jhey (https://codepen.io/jh3y/pen/XWjzyVL)
 *
 * Copyright (c) 2025 by Jhey
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is furnished
 * to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 * Modified for Slavic Professional College website
 */


/* Загальний стиль для header (основа - ПК версія) */
.header-container {
    display: flex;
    flex-direction: row;    /* Логотип і текст в один рядок */
    align-items: center;
    justify-content: center;
    padding: 30px 50px;    /* Відступи з боків */
    background-color: transparent;
    position: relative;    /* Для позиціонування ялинок */
    flex-wrap: nowrap;    /* Запобігає переносу елементів */
}

/* Логотип */
.header-logo {
    order: 1;    /* Порядок: другий елемент */
}

.header-logo img {
    max-width: 150px;    /* Розмір логотипу для ПК */
    height: auto;
    margin-right: 20px;    /* Відступ між логотипом і текстом */
}

/* Текст заголовка */
.header-text {
    text-align: center;    /* Вирівнювання тексту */
    font-family: 'Hoefler Text', Georgia, 'Times New Roman', serif;
    color: #03AAF9;
    font-weight: normal;
    line-height: 1.6;
    order: 2;    /* Порядок: третій елемент */
}

/* Кожен рядок тексту */
.header-line {
    font-size: 1.2em;    /* Базовий розмір тексту для ПК */
    line-height: 1.6;
    text-transform: uppercase;    /* Усі літери великі */
    display: block;
    white-space: nowrap;    /* Заборонити перенос тексту */
}

/* ==================== АДАПТАЦІЯ ТЕКСТУ ДЛЯ РІЗНИХ ШИРИН ==================== */

/* Для екранів від 1250px до 1400px */
@media screen and (max-width: 1400px) and (min-width: 1250px) {
    .header-line {
        font-size: 1.1em;
    }
}

/* Для екранів від 1100px до 1249px */
@media screen and (max-width: 1249px) and (min-width: 1100px) {
    .header-line {
        font-size: 1em;
    }
}

/* Для екранів від 1000px до 1099px */
@media screen and (max-width: 1099px) and (min-width: 1000px) {
    .header-line {
        font-size: 0.95em;
    }
}

/* Для екранів від 900px до 999px */
@media screen and (max-width: 999px) and (min-width: 900px) {
    .header-line {
        font-size: 0.85em;
    }
}

/* Для екранів від 800px до 899px */
@media screen and (max-width: 899px) and (min-width: 800px) {
    .header-line {
        font-size: 0.75em;
    }

    .header-container {
        padding: 25px 30px;
    }
}

/* Для екранів від 768px до 799px */
@media screen and (max-width: 799px) and (min-width: 768px) {
    .header-line {
        font-size: 0.7em;
    }

    .header-container {
        padding: 20px 20px;
    }

    .header-logo img {
        max-width: 120px;
    }
}

/* ==================== НОВОРІЧНІ ЯЛИНКИ ==================== */

/* Обгортки для ялинок */
.christmas-tree-left,
.christmas-tree-right {
    position: relative;    /* Відносне позиціонування в потоці */
    display: inline-block;
    z-index: 100;
    pointer-events: none;
    perspective: 1200px;
    transform-style: preserve-3d;
    flex-shrink: 0;    /* Не дозволяти стискатися */
    min-width: 80px;    /* Мінімальна ширина для ялинки */
}

.christmas-tree-left {
    margin-right: 30px;    /* Більший відступ між ялинкою і логотипом */
    order: -1;    /* Розташувати першою (перед усіма) */
}

.christmas-tree-right {
    margin-left: 30px;    /* Більший відступ між текстом і ялинкою */
    order: 3;    /* Розташувати четвертою (після тексту) */
}

/* Контейнер ялинки */
.tree {
    position: relative;
    height: 180px;      /* Фіксована висота в пікселях */
    width: 80px;        /* Фіксована ширина в пікселях */
    transform-style: preserve-3d;
    animation: spin 8s infinite linear;
}

/* Вогники на ялинці */
.tree__light {
    transform-style: preserve-3d;
    position: absolute;
    height: 8px;        /* Фіксований розмір */
    width: 8px;         /* Фіксований розмір */
    border-radius: 50%;
    animation:
            flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite steps(4),
            appear 0.5s calc(var(--appear) * 0.05s) both;
    left: 50%;
    transform:
            translate(-50%, 50%)
            rotateY(calc(var(--rotate, 0) * 1deg))
            translate3d(0, 0, calc(var(--radius, 0) * 4px));    /* Змінено з vmin на px */
    bottom: calc(var(--y, 0) * 1%);
    box-shadow: 0 0 8px currentColor;
}

/* Зірка на верхівці */
.tree__star {
    stroke: hsl(45, 100%, 65%);    /* Яскравіше золото */
    fill: hsl(45, 100%, 80%);      /* Світле золоте заповнення */
    filter: drop-shadow(0 0 12px hsl(45, 100%, 70%)) drop-shadow(0 0 20px hsl(45, 100%, 60%));    /* Потужніше світіння */
    height: 25px;
    width: 25px;
    overflow: visible !important;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    position: absolute;
    stroke-dasharray: 1000;
    stroke-dashoffset: -1000;
    animation: stroke 1s calc(var(--delay) * 0.05s) both, starGlow 2s infinite alternate;
}

/* Анімація мерехтіння зірки */
@keyframes starGlow {
    from {
        filter: drop-shadow(0 0 12px hsl(45, 100%, 70%)) drop-shadow(0 0 20px hsl(45, 100%, 60%));
    }
    to {
        filter: drop-shadow(0 0 18px hsl(45, 100%, 80%)) drop-shadow(0 0 30px hsl(45, 100%, 70%));
    }
}

/* Анімації */
@keyframes spin {
    to {
        transform: rotateY(360deg);
    }
}

@keyframes stroke {
    to { stroke-dashoffset: 0; }
}

@keyframes appear {
    from {
        opacity: 0;
        transform:
                translate(-50%, 50%)
                rotateY(calc(var(--rotate, 0) * 1deg))
                translate3d(0, 0, calc(var(--radius, 0) * 4px))
                scale(0);
    }
}

@keyframes flash {
    0% {
        background: hsl(120, 70%, 40%);    /* Темно-зелений */
    }
    20% {
        background: hsl(45, 100%, 60%);    /* Золотий */
    }
    40% {
        background: hsl(0, 100%, 50%);     /* Червоний */
    }
    60% {
        background: hsl(0, 0%, 95%);       /* Білий */
    }
    80% {
        background: hsl(140, 80%, 45%);    /* Яскраво-зелений */
    }
    100% {
        background: hsl(120, 70%, 40%);    /* Темно-зелений */
    }
}

/* ==================== АДАПТАЦІЯ ДЛЯ МОБІЛЬНИХ ==================== */

/* Адаптація для мобільних пристроїв */
@media screen and (max-width: 767px) {
    .header-container {
        flex-direction: column;        /* Логотип і текст у колонку */
        padding: 20px 15px;        /* Зменшення відступів */
    }

    .header-logo img {
        max-width: 100px;        /* Зменшений розмір логотипу */
        margin-right: 0;        /* Відсутній відступ між логотипом і текстом */
        margin-bottom: 15px;        /* Відступ між логотипом і текстом */
    }

    .header-text {
        text-align: center;        /* Текст по центру */
    }

    .header-line {
        font-size: 0.8em;        /* Менший розмір тексту */
        line-height: 1.4;        /* Зменшений інтервал рядків */
    }

    /* Ховаємо ялинки на мобільних */
    .christmas-tree-left,
    .christmas-tree-right {
        display: none;
    }
}

/* Для планшетів - зменшуємо ялинки */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .tree {
        height: 140px;
        width: 60px;
    }

    .tree__light {
        height: 6px;
        width: 6px;
        box-shadow: 0 0 6px currentColor;
    }

    .tree__star {
        height: 20px;
        width: 20px;
    }

    .christmas-tree-left {
        margin-right: 15px;
        min-width: 60px;
    }

    .christmas-tree-right {
        margin-left: 15px;
    }
}