/*===================================
   ПРИВЕТСТВЕННЫЙ РОЛИК (INTRO)
   intro.css
   =================================== */

/* ════════════════════════════════════
   ОВЕРЛЕЙ
   ════════════════════════════════════ */

/* Скрываем страницу ДО того, как intro.js отработает */
html.intro-loading {
    background: #fff;
}

html.intro-loading body {
    visibility: hidden;
    background: transparent;
}

/* Замораживаем все CSS-анимации Hero пока идёт intro */
html.intro-loading .hero__title,
html.intro-loading .hero__subtitle,
html.intro-loading .hero__actions,
html.intro-loading .hero__right-col {
    animation-play-state: paused !important;
    animation-delay: 0s !important;
    opacity: 0 !important;
}


.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    opacity: 1;
    visibility: visible;/* pointer-events отключаются только когда --fading */
}

.intro-overlay--fading {
    pointer-events: none;
}

.intro-overlay--removed {
    display: none !important;
}

/* ════════════════════════════════════
   КОНТЕЙНЕР SVG
   ════════════════════════════════════ */

.intro-svg-wrap {
    width: 80vw;
    max-width: 700px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-svg-wrap svg {
    width: 100%;
    height: auto;
    overflow: visible;
    /* начальное состояние — скрыт (выставляется JS) */
    will-change: opacity, transform, filter;
}

/* ════════════════════════════════════
   ПУТИ ВНУТРИ SVG
   ════════════════════════════════════ */

.intro-letter-path {
    fill: #000000;
    stroke: none;
}

/* ════════════════════════════════════
   ПОДЗАГОЛОВОК
   ════════════════════════════════════ */

.intro-subtitle {
    font-family: 'Playpen Sans', cursive, sans-serif;
    font-size: clamp(13px, 2vw, 19px);
    color: #888888;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 18px;
    opacity: 0;
    transform: translateY(8px);
    will-change: opacity, transform;
}

/* ════════════════════════════════════
   БЛОКИРОВКА СКРОЛЛА
   ════════════════════════════════════ */

body.intro-active {
    overflow: hidden !important;
}

/*════════════════════════════════════
   ТУМАН (FOG)
   ════════════════════════════════════ */

.intro-fog {
    position:fixed;
    inset:          0;
    z-index:        99998;
    pointer-events: none;
    opacity:        0;
    background:     #ffffff;
    will-change:    opacity;
    /* Убираем любой transition по умолчанию —
       состоянием управляет только JS/anime*/
    transition:     none;
}

.intro-fog--active {
    opacity:   1;
    /* transform создаёт новый stacking context —
       гарантирует перекрытие контента снизу      */
    transform: translateZ(0);
}

/* CSS-фолбэк (только когда anime.js недоступен) */
.intro-fog--dissolve {
    transition: opacity 1.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity:    0 !important;
}

.intro-fog--removed {
    visibility: hidden !important;
    pointer-events: none !important;
}

/* ════════════════════════════════════
   АДАПТИВНОСТЬ
   ════════════════════════════════════ */

@media (max-width: 768px) {
    .intro-svg-wrap {
        width: 88vw;
        max-width: 420px;
    }
}

@media (max-width: 480px) {
    .intro-svg-wrap {
        width: 92vw;
        max-width: 320px;
    }

    .intro-subtitle {
        font-size: 11px;
        letter-spacing: 0.13em;
    }
}

/* intro.css — добавить/изменить */

/* Туман изначально непрозрачен пока идёт intro */
html.intro-loading .intro-fog {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Скрываем мобильный слайдер во время intro */
html.intro-loading .hero__mobile-slider,
html.intro-loading .hero__mobile-slide,
html.intro-loading .hero__bento-grid,
html.intro-loading .hero__inner--desktop {
    visibility: hidden !important;
    opacity: 0 !important;
}