/* === PRESENTATION.CSS === */
/* assets/css/presentation.css */
/* НАЗНАЧЕНИЕ: карусель вступительной презентации (15 слайдов), luxe-стиль */
/* СВЯЗИ: views/partials/presentation.php, assets/js/presentation.js, luxe.css (переменные) */

.pres { padding: 80px 0; background: var(--bg); }
.pres-head { text-align: center; margin-bottom: 36px; }
.pres-head .eyebrow { justify-content: center; }

/* Сцена: фиксированное окно 16:9, слайды листаются внутри */
.pres-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 78vh;
    border: 1px solid var(--line);
    border-radius: var(--r);
    overflow: hidden;
    background: linear-gradient(160deg, var(--surface), var(--bg));
}

/* Track НЕ flex - слайды абсолютные, кладутся друг на друга и появляются по очереди.
   Так ширина слайда всегда = ширине сцены (нет циклической flex-зависимости). */
.pres-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4%;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transform: translateX(40px);
    transition: opacity .5s ease, transform .5s cubic-bezier(.65,0,.35,1), visibility .5s;
}
.slide[data-active] {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    z-index: 2;
}
.slide-inner {
    position: relative;
    width: 100%;
    max-width: 900px;
    text-align: center;
}

/* служебные */
.slide-num {
    position: absolute; top: -2%; right: 0;
    font-family: var(--serif); font-size: 14px; letter-spacing: .12em;
    color: var(--muted-2);
}
.slide-kicker {
    font-family: var(--serif); text-transform: uppercase; letter-spacing: .22em;
    font-size: clamp(12px, 1.1vw, 15px); color: var(--gold);
    margin-top: 28px; margin-bottom: 24px;
}

/* Появление контента делает сам слайд (fade+slide по [data-active]) - доп. анимация не нужна */

/* === типографика слайдов === */
.slide-title-xl {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(34px, 5.2vw, 72px); line-height: 1.05; color: #f0ebe0;
    margin-bottom: 20px;
}
.slide-title {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(26px, 3.6vw, 46px); line-height: 1.1; color: #f0ebe0;
    margin-bottom: 32px;
}
.slide-subtitle { font-size: clamp(16px, 1.8vw, 23px); color: var(--muted); max-width: 680px; margin: 0 auto; }
.slide-note { font-size: clamp(14px, 1.4vw, 19px); color: var(--muted); margin-top: 26px; }

/* 02 quote */
.slide-quote {
    font-family: var(--serif); font-style: italic; font-weight: 500;
    font-size: clamp(30px, 4.6vw, 62px); line-height: 1.12; color: var(--gold);
}
/* 03,07,11 statement */
.slide-statement {
    font-family: var(--serif); font-weight: 600;
    font-size: clamp(30px, 4.4vw, 60px); line-height: 1.1; color: #f0ebe0;
}
.slide-statement em { font-style: italic; color: var(--gold); }

/* 04 grid6 */
.slide-grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.g6-item {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 22px 14px; border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface); font-size: clamp(14px, 1.4vw, 18px); color: var(--ink);
}
.g6-ic { color: var(--gold); }

/* 05 equation */
.slide-eq { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.eq-box {
    border: 1px solid var(--line); border-radius: var(--r); padding: 24px 32px;
    font-family: var(--serif); font-size: clamp(22px, 3vw, 38px); color: var(--ink);
    background: var(--surface);
}
.eq-strong { border-color: var(--gold); color: var(--gold); }
.eq-sign { font-family: var(--serif); font-size: clamp(34px, 5vw, 60px); color: var(--gold); }

/* 06 ladder - лестница растёт снизу вверх: ступень 1 (основание) внизу, ступень 4 (вершина) наверху */
.slide-ladder { display: flex; flex-direction: column-reverse; gap: 12px; max-width: 620px; margin: 0 auto; }
.ladder-step {
    display: flex; align-items: center; gap: 18px;
    padding: 16px 22px; border: 1px solid var(--line); border-radius: var(--r);
    background: linear-gradient(90deg, color-mix(in oklch, var(--gold), transparent calc(92% - var(--lvl) * 6%)), var(--surface));
    margin-left: calc(var(--lvl) * 7%);
}
.ladder-n {
    font-family: var(--serif); font-size: 22px; color: var(--bg); background: var(--gold);
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-weight: 600;
}
.ladder-t { font-size: clamp(15px, 1.6vw, 20px); color: var(--ink); text-align: left; }

/* 08 sources */
.slide-sources { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.src-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 22px; border: 1px solid var(--line); border-radius: 50px;
    background: var(--surface); font-size: clamp(14px, 1.5vw, 19px); color: var(--ink);
}
.src-chip .ic { color: var(--gold); }

/* 09 versus */
.slide-versus { display: flex; align-items: stretch; justify-content: center; gap: 20px; flex-wrap: wrap; }
.vs-side { flex: 1 1 280px; max-width: 360px; padding: 32px 26px; border: 1px solid var(--line); border-radius: var(--r); }
.vs-chaos { background: color-mix(in oklch, #b04a3a, transparent 90%); border-color: color-mix(in oklch, #b04a3a, transparent 70%); }
.vs-order { background: var(--gold-soft); border-color: var(--gold); }
.vs-t { font-family: var(--serif); font-size: clamp(20px, 2.6vw, 32px); margin-bottom: 10px; color: #f0ebe0; }
.vs-n { font-size: clamp(13px, 1.3vw, 16px); color: var(--muted); }
.vs-mid { align-self: center; font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--muted-2); }

/* 10 core */
.slide-core { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.core-center {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: 170px; height: 170px; border-radius: 50%;
    border: 1.5px solid var(--gold); background: radial-gradient(circle, var(--gold-soft), var(--surface) 72%);
    justify-content: center; color: var(--gold); font-family: var(--serif); font-size: 20px;
}
.core-around { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 620px; }
.core-node {
    padding: 10px 20px; border: 1px solid var(--line); border-radius: 50px;
    background: var(--surface); font-size: clamp(13px, 1.4vw, 17px); color: var(--ink);
}

/* 12 flow */
.slide-flow { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.flow-step {
    padding: 16px 24px; border: 1px solid var(--line); border-radius: var(--r);
    background: var(--surface); font-family: var(--serif); font-size: clamp(15px, 1.8vw, 22px); color: var(--ink);
}
.flow-step:last-of-type { border-color: var(--gold); color: var(--gold); }
.flow-arrow { color: var(--gold); display: flex; }

/* 13 expo */
.slide-expo { max-width: 520px; margin: 0 auto; }
.slide-expo svg { width: 100%; height: auto; }
.expo-axis { stroke: var(--line); stroke-width: 1.5; fill: none; }
.expo-curve {
    stroke: var(--gold); stroke-width: 3; fill: none; stroke-linecap: round;
    stroke-dasharray: 600; stroke-dashoffset: 600;
}
.slide[data-active] .expo-curve { animation: expo-draw 1.4s .3s ease-out forwards; }
@keyframes expo-draw { to { stroke-dashoffset: 0; } }

/* 14 versus2 */
.slide-versus2 { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.v2-side {
    flex: 1 1 240px; max-width: 320px; padding: 36px 26px; border-radius: var(--r);
    font-family: var(--serif); font-size: clamp(18px, 2.2vw, 28px);
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.v2-weak { border: 1px dashed var(--line); color: var(--muted); }
.v2-strong { border: 1px solid var(--gold); background: var(--gold-soft); color: var(--gold); }
.v2-strong .ic { color: var(--gold); }

/* === навигация === */
.pres-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 52px; height: 52px; border-radius: 50%;
    border: 1px solid var(--line); background: rgba(14,13,11,.7); backdrop-filter: blur(6px);
    color: var(--ink); cursor: pointer; z-index: 5;
    display: flex; align-items: center; justify-content: center; transition: .25s;
}
.pres-nav:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.pres-nav:disabled { opacity: .25; cursor: default; }
.pres-prev { left: 18px; }
.pres-prev .ic { transform: rotate(180deg); }
.pres-next { right: 18px; }

.pres-dots { display: flex; justify-content: center; gap: 9px; margin-top: 24px; flex-wrap: wrap; }
.pres-dot {
    width: 9px; height: 9px; border-radius: 50%; border: none; padding: 0; cursor: pointer;
    background: var(--muted-2); opacity: .5; transition: .25s;
}
.pres-dot:hover { opacity: .9; }
.pres-dot.is-active { background: var(--gold); opacity: 1; width: 26px; border-radius: 5px; }

/* === АДАПТИВ: вертикальный экран (телефон / 9:16) === */
@media (max-width: 768px) {
    .pres { padding: 56px 0; }
    .pres-stage { aspect-ratio: 9 / 16; max-height: 82vh; }
    .slide { padding: 7% 6%; }
    .slide-num { top: 0; }
    /* схемы перестраиваются в столбик для читаемости */
    .slide-grid6 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .slide-eq { flex-direction: column; gap: 14px; }
    .slide-flow { flex-direction: column; gap: 10px; }
    .slide-flow .flow-arrow .ic { transform: rotate(90deg); }
    .slide-versus, .slide-versus2 { flex-direction: column; }
    .vs-mid { transform: rotate(90deg); }
    .slide-sources { gap: 10px; }
    .ladder-step { margin-left: calc(var(--lvl) * 4%); }
    .pres-nav { width: 44px; height: 44px; }
    .pres-prev { left: 10px; } .pres-next { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .pres-track { transition: none; }
    .slide-inner > *, .slide-kicker { animation: none !important; opacity: 1 !important; transform: none !important; }
    .expo-curve { stroke-dashoffset: 0; }
}