/*
 * SPECMETRO - Стили оформления и стробоскопической анимации
 */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #051384;
    /* Насыщенный глубокий темно-синий фон в точности как на фото */
    background: 
        radial-gradient(ellipse at 50% 50%, #06168e 0%, #051384 40%, #030d5a 75%, #010626 100%);
    font-family: Impact, "Arial Black", "Montserrat", "Segoe UI", sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

/* Центрирующий контейнер во весь экран */
.viewport-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* Диагональное позиционирование из нижнего левого угла в верхний правый */
.diagonal-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-31deg);
    transform-origin: center center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200vw;
    text-align: center;
    pointer-events: none;
}

/* 3D-надпись SPECMETRO с эффектом стробоскопа */
.strobe-text {
    display: inline-block;
    color: #fdfd48;
    font-size: clamp(3.5rem, 11vw, 15rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    line-height: 1;
    white-space: nowrap;
    
    /* Реалистичный 3D-объем с синей фаской #17489f и тенью на стену */
    text-shadow:
        /* Контур граней для четкости */
        -1px -1px 0 #123e88,
         1px -1px 0 #123e88,
        /* Насыщенно-синий 3D-объем (экструзия) */
        -1px 1px 0 #17489f,
        -2px 2px 0 #17489f,
        -3px 3px 0 #17489f,
        -4px 4px 0 #17489f,
        -5px 5px 0 #17489f,
        -6px 6px 0 #17489f,
        -7px 7px 0 #17489f,
        -8px 8px 0 #17489f,
        -9px 9px 0 #17489f,
        -10px 10px 0 #17489f,
        -11px 11px 0 #17489f,
        -12px 12px 0 #17489f,
        -13px 13px 0 #17489f,
        -14px 14px 0 #17489f,
        /* Падающая глубокая тень на стену */
        -16px 18px 6px rgba(1, 5, 25, 0.9),
        -22px 24px 16px rgba(0, 3, 18, 0.8),
        -30px 36px 32px rgba(0, 2, 12, 0.7);

    /* Стробоскоп: период 0.5 секунды = ровно 2 вспышки в секунду (2 Гц) */
    animation: strobe 0.5s infinite;
    will-change: opacity, filter;
}

/* Анимация стробоскопа (вспышка + затухание, 2 раза в секунду) */
@keyframes strobe {
    0% {
        opacity: 1;
        filter: brightness(1.4) drop-shadow(0 0 45px rgba(253, 253, 72, 0.9));
    }
    15% {
        opacity: 1;
        filter: brightness(1.05) drop-shadow(0 0 15px rgba(253, 253, 72, 0.4));
    }
    48% {
        opacity: 1;
        filter: brightness(1);
    }
    50% {
        opacity: 0;
        filter: none;
    }
    98% {
        opacity: 0;
        filter: none;
    }
    100% {
        opacity: 1;
        filter: brightness(1.4) drop-shadow(0 0 45px rgba(253, 253, 72, 0.9));
    }
}