/* Входная заставка VISNER — чёрный фон, зум логотипа, shake, glow, слоган */

html.visner-intro-off #visnerIntro {
    display: none !important;
}

.visner-intro {
    position: fixed;
    inset: 0;
    z-index: 25000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 0.65s cubic-bezier(0.33, 1, 0.68, 1),
        visibility 0s linear 0s;
}

.visner-intro[hidden] {
    display: none !important;
}

.visner-intro.visner-intro--done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.65s cubic-bezier(0.33, 1, 0.68, 1),
        visibility 0s linear 0.7s;
}

.visner-intro__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: max(24px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px))
        max(24px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
}

/* Свечение за логотипом — pulse */
.visner-intro__glow {
    position: absolute;
    left: 50%;
    top: 38%;
    width: min(120vw, 520px);
    height: min(120vw, 520px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    background: radial-gradient(
        ellipse 55% 45% at 50% 50%,
        rgba(255, 215, 0, 0.42) 0%,
        rgba(255, 69, 0, 0.28) 28%,
        rgba(255, 20, 147, 0.22) 52%,
        transparent 72%
    );
    filter: blur(28px);
    opacity: 0.45;
    animation: visnerIntroGlowPulse 1.05s cubic-bezier(0.33, 1, 0.68, 1) 1.28s forwards;
}

@keyframes visnerIntroGlowPulse {
    0% {
        opacity: 0.38;
        transform: translate(-50%, -50%) scale(0.88);
    }
    48% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.12);
    }
    100% {
        opacity: 0.62;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Обертка под shake — не трогает scale у текста */
.visner-intro__shake {
    position: relative;
    z-index: 2;
    animation: visnerIntroShake 0.34s ease-out 1.14s both;
}

@keyframes visnerIntroShake {
    0%,
    100% {
        transform: translateX(0);
    }
    18% {
        transform: translateX(-2px);
    }
    36% {
        transform: translateX(2px);
    }
    54% {
        transform: translateX(-2px);
    }
    72% {
        transform: translateX(2px);
    }
    88% {
        transform: translateX(-1px);
    }
}

.visner-intro__logo {
    position: relative;
    z-index: 2;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(40px, 11.5vw, 56px);
    font-weight: 800;
    letter-spacing: clamp(3px, 1.2vw, 6px);
    line-height: 1.05;
    margin: 0;
    text-align: center;
    color: transparent;
    background: linear-gradient(90deg, #ffd700 0%, #ff8c00 28%, #ff4500 58%, #ff1493 100%);
    -webkit-background-clip: text;
    background-clip: text;
    transform-origin: center center;
    filter: drop-shadow(0 0 24px rgba(255, 105, 180, 0.35));
    animation: visnerIntroLogoZoom 1.18s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes visnerIntroLogoZoom {
    0% {
        opacity: 0;
        transform: scale(0.9);
        filter: blur(8px) drop-shadow(0 0 12px rgba(255, 215, 0, 0.2));
    }
    52% {
        opacity: 1;
        transform: scale(1.05);
        filter: blur(0) drop-shadow(0 0 36px rgba(255, 105, 180, 0.55));
    }
    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) drop-shadow(0 0 28px rgba(255, 20, 147, 0.38));
    }
}

.visner-intro__tagline-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: clamp(14px, 3.5vw, 22px);
    width: 100%;
    max-width: 92vw;
}

.visner-intro__tagline-line {
    flex: 1;
    height: 1px;
    max-width: 56px;
    border-radius: 1px;
    opacity: 0;
    transform: scaleX(0.4);
    animation: visnerIntroLineIn 0.45s cubic-bezier(0.33, 1, 0.68, 1) 1.68s forwards;
}

.visner-intro__tagline-line--l {
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.65));
}

.visner-intro__tagline-line--r {
    background: linear-gradient(270deg, transparent, rgba(255, 20, 147, 0.55));
}

@keyframes visnerIntroLineIn {
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

.visner-intro__tagline {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(9px, 2.6vw, 11px);
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(255, 245, 250, 0.82);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(14px);
    animation: visnerIntroTagline 0.58s cubic-bezier(0.33, 1, 0.68, 1) 1.72s forwards;
}

@keyframes visnerIntroTagline {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.visner-intro__spark {
    display: block;
    margin-top: clamp(12px, 3vw, 18px);
    width: 10px;
    height: 10px;
    opacity: 0;
    transform: scale(0.6);
    background: radial-gradient(circle at 50% 50%, #ff6b35 0%, #ff4500 45%, transparent 70%);
    box-shadow:
        0 0 12px rgba(255, 100, 50, 0.9),
        -24px 0 20px -18px rgba(255, 200, 120, 0.35),
        24px 0 20px -18px rgba(255, 80, 140, 0.35);
    clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
    animation: visnerIntroSpark 0.45s cubic-bezier(0.33, 1, 0.68, 1) 2s forwards;
}

@keyframes visnerIntroSpark {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.visner-intro-skip {
    position: absolute;
    top: max(12px, env(safe-area-inset-top, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    z-index: 5;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 250, 252, 0.72);
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    font-family: 'Montserrat', sans-serif;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.visner-intro-skip:active {
    transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
    .visner-intro__glow,
    .visner-intro__shake,
    .visner-intro__logo,
    .visner-intro__tagline-line,
    .visner-intro__tagline,
    .visner-intro__spark {
        animation: none !important;
    }
    .visner-intro__logo {
        opacity: 1;
        transform: scale(1);
        filter: none;
    }
    .visner-intro__tagline {
        opacity: 1;
        transform: none;
    }
    .visner-intro__tagline-line {
        opacity: 1;
        transform: none;
    }
    .visner-intro__spark {
        opacity: 1;
        transform: none;
    }
    .visner-intro__glow {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(1);
    }
}