/* preloader.css — анимация взлёта с частицами */

:root {
    --plane-color: #ffffff;   /* цвет самолёта */
    --trail-color: #ffffff;   /* цвет следа */
    --plane-size: 90px;       /* размер самолёта */
    
    /* Угол коррекции ориентации иконки. Вычислен точно по форме исходного
       SVG: нос самолёта в оригинале и так смотрит вверх-вправо (~45°),
       поэтому коррекция всего +45deg — она "обнуляет" собственный наклон
       иконки, а дальше JS довращивает её точно по направлению полёта. */
    --plane-base-rotate: 45deg;
}

#preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    /* фон нашего сайта в наших цветах */
    background: linear-gradient(180deg, var(--navy) 0%, var(--sky) 45%, var(--sky-light) 100%);
    overflow: hidden;
    display: block;
    transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

#preloader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#preloader[data-disabled="true"] {
    display: none;
}

#preloader-plane {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--plane-size);
    height: var(--plane-size);
    color: var(--plane-color);
    will-change: transform;
    transform: translate(-9999px, -9999px); /* спрятан до старта JS */
}

#preloader-plane svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: currentColor;
}

.trail-particle {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--trail-color);
    pointer-events: none;
    opacity: 0.55;
    transform: translate(-50%, -50%);
    transition: opacity 0.7s linear, transform 0.7s linear;
    will-change: opacity, transform;
}

/* === Подпись снизу === */
.preload-label {
    position: absolute;
    bottom: 38px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--font-mono);
    color: var(--on-dark-muted);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    animation: fadein 0.5s ease 0.3s both;
}

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

/* === prefers-reduced-motion: уважение настроек === */
@media (prefers-reduced-motion: reduce) {
    #preloader {
        transition-duration: 0s;
    }
}