/* =========================================================================
   Tetris — прелоадер (волны + прогресс-бар). Палитра из tetris-tokens.css.
   Железное авто-скрытие управляется tetris-preloader.js (класс .is-hidden).
   ========================================================================= */

.tt-preloader {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tt-dark, #292929);
    opacity: 1;
    visibility: visible;
    transition: opacity 400ms ease, visibility 0s linear 400ms;
}
.tt-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.tt-preloader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: min(260px, 70vw);
}

/* Лого-тетрамино 2×2 с лёгкой пульсацией */
.tt-preloader__logo {
    display: grid;
    grid-template-columns: 14px 14px;
    grid-template-rows: 14px 14px;
    gap: 3px;
    animation: ttPlPulse 1.6s ease-in-out infinite;
}
.tt-preloader__logo span { display: block; border-radius: 2px; }
.tt-preloader__logo span:nth-child(1) { background: var(--tt-brand-light, #C08464); }
.tt-preloader__logo span:nth-child(2) { background: var(--tt-brand, #914A2B); }
.tt-preloader__logo span:nth-child(3) { background: var(--tt-brand, #914A2B); }
.tt-preloader__logo span:nth-child(4) { background: var(--tt-brand-dark, #6E3820); }

/* Волны — вертикальные столбики, «дышат» со стаггером */
.tt-preloader__waves {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
    height: 34px;
}
.tt-preloader__waves span {
    display: block;
    width: 6px;
    height: 100%;
    border-radius: 3px;
    background: var(--tt-action, #1A693C);
    transform-origin: bottom center;
    animation: ttPlWave 1.1s ease-in-out infinite;
}
.tt-preloader__waves span:nth-child(1) { animation-delay: 0s;    background: var(--tt-brand-light, #C08464); }
.tt-preloader__waves span:nth-child(2) { animation-delay: 0.12s; background: var(--tt-brand, #914A2B); }
.tt-preloader__waves span:nth-child(3) { animation-delay: 0.24s; background: var(--tt-action, #1A693C); }
.tt-preloader__waves span:nth-child(4) { animation-delay: 0.36s; background: var(--tt-brand, #914A2B); }
.tt-preloader__waves span:nth-child(5) { animation-delay: 0.48s; background: var(--tt-brand-light, #C08464); }

/* Прогресс-бар */
.tt-preloader__bar {
    width: 100%;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}
.tt-preloader__bar-fill {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--tt-brand, #914A2B), var(--tt-action, #1A693C));
    animation: ttPlBar 1.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes ttPlWave {
    0%, 100% { transform: scaleY(0.35); opacity: 0.6; }
    50%      { transform: scaleY(1);    opacity: 1; }
}
@keyframes ttPlPulse {
    0%, 100% { transform: scale(1);    opacity: 0.9; }
    50%      { transform: scale(1.12); opacity: 1; }
}
@keyframes ttPlBar {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

/* Reduced-motion: не убиваем полностью — оставляем медленную волну, чтобы был признак жизни */
@media (prefers-reduced-motion: reduce) {
    .tt-preloader__logo,
    .tt-preloader__waves span,
    .tt-preloader__bar-fill {
        animation-duration: 3s !important;
        animation-iteration-count: infinite !important;
    }
}