/* ============================================================================
   RinCraft — страница «Маски»: пять экранов презентации
   Зависит от tokens.css, base.css, layout.css, components.css
   ========================================================================= */

/* ------------------------------------------------------- Навигация экранов --- */
.masks-nav {
    position: sticky;
    top: 72px;
    z-index: calc(var(--z-header) - 1);
    background: var(--surface-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line-1);
}

.masks-nav__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-5);
    min-height: 56px;
    padding-block: var(--sp-2);
}

.masks-nav__inner .kicker { flex-shrink: 0; }

.masks-nav ul {
    display: flex;
    gap: var(--sp-1);
    overflow-x: auto;
    scrollbar-width: none;
}

.masks-nav ul::-webkit-scrollbar { display: none; }

.masks-nav a {
    display: block;
    padding: 7px 13px;
    border-radius: var(--r-sm);
    font-family: var(--font-display);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-3);
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.masks-nav a:hover,
.masks-nav a.is-active {
    color: var(--text-1);
    background: var(--brand-a10);
}

/* ------------------------------------------------------------- Экран --- */
.mask-screen {
    /* Меньше, чем у секций главной: экранов пять, иначе страница
       растягивается на десять экранов высоты */
    padding-block: clamp(44px, 6vw, 88px);
    border-bottom: 1px solid var(--line-1);
    scroll-margin-top: 140px;
}

.mask-screen:last-of-type { border-bottom: 0; }

.mask-screen__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}

/* Чётные экраны зеркалим: текст справа, визуал слева */
.mask-screen--flip .mask-screen__copy { order: 2; }
.mask-screen--flip .mask-screen__visual { order: 1; }

.mask-screen__title {
    margin: var(--sp-3) 0 var(--sp-4);
    font-size: var(--fs-3xl);
}

.mask-screen__lead {
    margin-bottom: var(--sp-5);
    font-size: var(--fs-lg);
    color: var(--text-1);
}

.mask-screen__text {
    margin-bottom: var(--sp-4);
    max-width: 62ch;
    color: var(--text-2);
}

/* Список особенностей — растягивается на всю ширину строки */
.mask-screen__points {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--sp-2) var(--sp-5);
    margin-top: var(--sp-6);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line-1);
}

.mask-screen__points li {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-2);
}

.mask-screen__points i {
    margin-top: 4px;
    flex-shrink: 0;
    color: var(--brand-400);
    font-size: 12px;
}

/* ------------------------------------------------------------- Визуал --- */
.mask-screen__visual {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    border: 1px solid var(--line-1);
    border-radius: var(--r-xl);
    background:
        radial-gradient(circle at 50% 45%, rgba(196, 15, 180, .14), transparent 64%),
        linear-gradient(160deg, var(--surface-1), var(--surface-0));
    overflow: hidden;
}

/* Сцена рисуется скриптом; до его загрузки держим рамку */
.mask-scene {
    width: 100%;
    height: 100%;
    display: block;
}

/* ------------------------------------------------------------ Призыв --- */
.masks-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    padding: var(--sp-7);
    border: 1px solid var(--line-brand);
    border-radius: var(--r-xl);
    background:
        radial-gradient(120% 180% at 100% 0%, rgba(196, 15, 180, .14), transparent 60%),
        var(--surface-1);
}

.masks-cta h2 { margin-bottom: var(--sp-2); }

.masks-cta p {
    max-width: 52ch;
    color: var(--text-2);
}

.masks-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    flex-shrink: 0;
}

/* ------------------------------------------------------------ Адаптив --- */
@media (max-width: 1024px) {
    .mask-screen__inner { grid-template-columns: 1fr; }
    .mask-screen--flip .mask-screen__copy,
    .mask-screen--flip .mask-screen__visual { order: 0; }
    .mask-screen__visual { max-width: 440px; margin-inline: auto; width: 100%; }
    .masks-nav { top: 64px; }
    .masks-cta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
    .masks-nav__inner { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
    .masks-cta { padding: var(--sp-5); }
    .masks-cta__actions { width: 100%; }
    .masks-cta__actions .btn { flex: 1; }
}