/* ────────────────────────────────────────────────────────────────
   Лендинг «Искры» — главная zatochkanetwork.ru.

   Первый экран и финал разрезаны кромкой под 21,8°, с неё летят искры
   (landing.js); между ними — выбор ситуации, кому сюда, путь в клуб с
   билетом на встречу, правила и вопросы. Префикс lp- держит классы
   лендинга подальше от .hero, .section и прочих классов сайта.

   Новых цветовых токенов нет: оттенки получаются из токенов системы
   через color-mix, чтобы палитра на /system/ оставалась полной.
   ──────────────────────────────────────────────────────────────── */

@layer components {
    .lp {
        --lp-hot-glow: color-mix(in oklab, var(--spark), white 22%);
        --lp-on-light-muted: color-mix(in oklab, var(--steel), var(--ground) 32%);
        /* текст на искре: тёмный на светлой искре «Стали», белый на тёмной
           искре «Шлама» — ground там не дотягивает до 4,5:1 */
        --lp-on-spark: var(--ground);
    }

    /* :where — нулевая специфичность: сброс не перебивает классы ниже */
    :where(.lp) :is(h1, h2, h3) {
        margin: 0;
        color: var(--ink);
        font-family: var(--font-display);
        letter-spacing: -0.04em;
        text-wrap: balance;
    }

    :where(.lp) p {
        margin: 0;
        text-wrap: pretty;
    }

    .lp-section {
        padding-block: var(--space-10);
    }

    .lp-title {
        max-width: 16ch;
        font-size: clamp(2.2rem, 5vw, 4.2rem);
        font-weight: 800;
        line-height: 0.95;
    }

    .lp-title em {
        font-style: normal;
        color: var(--spark);
    }

    .lp-kicker {
        color: var(--brass-bright);
        font-family: var(--font-mono);
        font-size: 0.78rem;
        font-weight: 500;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .lp-cta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-5);
    }

    .lp-hint {
        color: var(--steel);
        font-size: 0.9rem;
    }

    /* ── разрез с искрами ───────────────────────────────────── */
    .lp-cut {
        position: relative;
        overflow: hidden;
        isolation: isolate;
    }

    .lp-hot {
        position: absolute;
        z-index: -1;
        inset: 0 0 0 auto;
        width: 52%;
        background: var(--spark);
        clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%);
    }

    .lp-hot::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(120% 90% at 10% 100%, var(--lp-hot-glow), transparent 55%);
        opacity: 0.7;
    }

    .lp-sparks {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

    .lp-cut-inner {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: var(--space-6);
        align-items: center;
    }

    .lp-hero .lp-cut-inner {
        min-height: min(700px, 90svh);
        padding-block: var(--space-9);
    }

    .lp-hero h1 {
        max-width: 9ch;
        font-size: clamp(3rem, 8vw, 7.4rem);
        font-weight: 900;
        line-height: 0.88;
        letter-spacing: -0.055em;
    }

    .lp-hero h1 span {
        display: block;
        color: var(--steel);
        font-weight: 700;
    }

    .lp-lead {
        max-width: 44ch;
        margin-block: var(--space-6) var(--space-6);
        font-size: 1.2rem;
    }

    .lp-stamp {
        justify-self: end;
        align-self: end;
        max-width: 15ch;
        color: var(--lp-on-spark);
        font-family: var(--font-display);
        font-size: clamp(1.6rem, 3.2vw, 2.7rem);
        font-weight: 800;
        line-height: 1;
        letter-spacing: -0.04em;
        text-align: right;
    }

    .lp-stamp small {
        display: block;
        margin-top: var(--space-3);
        font-family: var(--font-mono);
        font-size: 0.8rem;
        font-weight: 500;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0.8;
    }

    /* ── выбор ситуации ─────────────────────────────────────── */
    .lp-pick {
        background: radial-gradient(80% 60% at 90% 0%, var(--surface), var(--ground) 60%);
    }

    .lp-pick-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--space-5);
        align-items: end;
        margin-bottom: var(--space-7);
    }

    .lp-pick-intro {
        max-width: 30ch;
    }

    .lp-pick-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
        gap: var(--space-6);
    }

    .lp-choices {
        display: grid;
        align-content: start;
        gap: 10px;
    }

    .lp-choice {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
        width: 100%;
        padding: 20px 22px;
        border: 0;
        background: var(--surface);
        color: var(--ink);
        font: 600 1.12rem/1.3 var(--font-display);
        letter-spacing: -0.02em;
        text-align: left;
        cursor: pointer;
        clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 7px, 100% 100%, 0 100%);
        transition: background 0.2s, color 0.2s, transform 0.2s;
    }

    .lp-choice::after {
        content: "→";
        color: var(--steel);
        font-family: var(--font-mono);
        transition: color 0.2s, transform 0.2s;
    }

    .lp-choice:hover {
        background: var(--surface-raised);
        transform: translateX(4px);
    }

    /* фаска на кнопке срезала бы обводку фокуса — даём её внутрь */
    .lp-choice:focus-visible {
        outline: 2px solid var(--spark);
        outline-offset: -4px;
    }

    .lp-choice[aria-pressed="true"] {
        background: var(--spark);
        color: var(--lp-on-spark);
    }

    .lp-choice[aria-pressed="true"]::after {
        color: var(--lp-on-spark);
        transform: translateX(4px);
    }

    .lp-choice[aria-pressed="true"]:focus-visible {
        outline-color: var(--lp-on-spark);
    }

    .lp-answer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--space-6);
        min-height: 380px;
        padding: var(--space-7);
        background: var(--surface-raised);
        box-shadow: var(--shadow-edge);
        clip-path: polygon(0 0, calc(100% - 44px) 0, 100% 18px, 100% 100%, 0 100%);
    }

    .lp-answer h3 {
        margin-block: var(--space-3) var(--space-4);
        font-size: clamp(1.7rem, 3vw, 2.4rem);
        font-weight: 700;
        line-height: 1.05;
    }

    .lp-answer-body p:last-child {
        max-width: 46ch;
        font-size: 1.08rem;
    }

    .lp-answer-body.lp-swap {
        animation: lp-swap 0.45s ease-out;
    }

    @keyframes lp-swap {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
    }

    /* ── кому сюда ─────────────────────────────────────────── */
    .lp-fit-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: var(--space-7);
        border-top: 1px solid var(--hairline);
    }

    .lp-fit {
        padding: var(--space-6) var(--space-6) var(--space-2) 0;
    }

    .lp-fit + .lp-fit {
        padding-left: var(--space-6);
        border-left: 1px solid var(--hairline);
    }

    .lp-fit h3 {
        margin-bottom: var(--space-5);
        font-size: 1.5rem;
        font-weight: 700;
    }

    .lp-fit ul {
        display: grid;
        gap: 14px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .lp-fit li {
        position: relative;
        padding-left: 30px;
        color: var(--ink);
        font-size: 1.1rem;
    }

    .lp-fit-yes li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.55em;
        width: 14px;
        height: 8px;
        border-bottom: 2px solid var(--stone);
        border-left: 2px solid var(--stone);
        rotate: -45deg;
        translate: 0 -40%;
    }

    .lp-fit-no li {
        color: var(--steel);
        text-decoration: line-through;
        text-decoration-color: var(--spark);
        text-decoration-thickness: 2px;
    }

    .lp-fit-no li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0.75em;
        width: 16px;
        height: 2px;
        background: var(--spark);
    }

    .lp-fit-note {
        max-width: 60ch;
        margin-top: var(--space-6);
    }

    /* ── путь в клуб: шаги и билет ──────────────────────────── */
    .lp-path {
        background: linear-gradient(115deg, var(--ground) 52%, var(--surface) 52%);
    }

    .lp-path-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
        gap: var(--space-8);
        align-items: center;
        margin-top: var(--space-7);
    }

    .lp-steps {
        margin: 0;
        padding: 0;
        list-style: none;
        counter-reset: lp-step;
    }

    .lp-steps li {
        counter-increment: lp-step;
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        gap: var(--space-5);
        padding-block: var(--space-5);
        border-top: 1px solid var(--hairline);
    }

    .lp-steps li::before {
        content: counter(lp-step);
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        background: var(--surface-raised);
        box-shadow: var(--shadow-edge);
        color: var(--ink);
        font: 800 1.3rem/1 var(--font-display);
        clip-path: polygon(
            0 0,
            calc(100% - var(--bevel-run-s)) 0,
            100% var(--bevel-rise-s),
            100% 100%,
            0 100%
        );
    }

    .lp-steps li:last-child::before {
        background: var(--spark);
        color: var(--lp-on-spark);
    }

    .lp-steps h3 {
        margin-bottom: 6px;
        font-size: 1.3rem;
        font-weight: 700;
    }

    .lp-ticket {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 140px;
        background: var(--ink);
        color: var(--ground);
        filter: drop-shadow(0 30px 40px color-mix(in oklab, black 50%, transparent));
        clip-path: polygon(
            0 0,
            calc(100% - 36px) 0,
            100% 14px,
            100% 100%,
            36px 100%,
            0 calc(100% - 14px)
        );
        rotate: -3deg;
        transition: rotate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), translate 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    .lp-ticket:hover {
        rotate: 0deg;
        translate: 0 -6px;
    }

    .lp-ticket-main {
        padding: var(--space-6);
    }

    .lp-ticket-kicker,
    .lp-ticket-rows dt {
        color: var(--lp-on-light-muted);
        font-family: var(--font-mono);
        font-size: 0.72rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .lp-ticket-title {
        margin-block: var(--space-3) var(--space-5);
        color: var(--ground);
        font: 800 clamp(1.6rem, 2.6vw, 2.2rem)/1.02 var(--font-display);
        letter-spacing: -0.04em;
    }

    .lp-ticket-rows {
        display: grid;
        grid-template-columns: repeat(3, auto);
        justify-content: start;
        gap: 18px 28px;
        margin: 0;
    }

    .lp-ticket-rows dd {
        margin: 4px 0 0;
        font: 700 1.1rem/1.2 var(--font-display);
    }

    .lp-ticket-stub {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: 18px;
        border-left: 2px dashed color-mix(in oklab, var(--ground) 40%, transparent);
        background: var(--spark);
        color: var(--lp-on-spark);
        text-align: center;
    }

    .lp-ticket-stub b {
        font: 900 2.6rem/1 var(--font-display);
        letter-spacing: -0.04em;
        font-variant-numeric: tabular-nums;
    }

    .lp-ticket-stub span {
        font-family: var(--font-mono);
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .lp-ticket-cta {
        margin-top: var(--space-7);
    }

    /* ── правила ───────────────────────────────────────────── */
    .lp-rules {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--space-4);
        margin: var(--space-7) 0 0;
        padding: 0;
        list-style: none;
    }

    .lp-rules li {
        padding: var(--space-6) var(--space-5) 28px;
        background: var(--surface);
        color: var(--ink);
        font-size: 1.05rem;
        clip-path: polygon(
            0 0,
            calc(100% - var(--bevel-run)) 0,
            100% var(--bevel-rise),
            100% 100%,
            0 100%
        );
        transition: background 0.25s, translate 0.25s;
    }

    .lp-rules li:hover {
        background: var(--surface-raised);
        translate: 0 -4px;
    }

    .lp-rules b {
        display: block;
        margin-bottom: 14px;
        background: linear-gradient(180deg, var(--brass-bright), var(--brass));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font: 900 2.4rem/1 var(--font-display);
        letter-spacing: -0.04em;
    }

    .lp-rules-note {
        max-width: 70ch;
        margin-top: var(--space-6);
    }

    /* ── вопросы ───────────────────────────────────────────── */
    .lp-faq-section {
        padding-top: 0;
    }

    .lp-faq {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 var(--space-7);
        margin-top: var(--space-7);
    }

    .lp-faq details {
        padding-block: 22px;
        border-top: 1px solid var(--hairline);
    }

    .lp-faq summary {
        display: flex;
        justify-content: space-between;
        gap: var(--space-4);
        color: var(--ink);
        font: 700 1.2rem/1.3 var(--font-display);
        letter-spacing: -0.02em;
        list-style: none;
        cursor: pointer;
    }

    .lp-faq summary::-webkit-details-marker {
        display: none;
    }

    .lp-faq summary::after {
        content: "+";
        flex: none;
        color: var(--spark);
        font: 500 1.6rem/1 var(--font-mono);
        transition: rotate 0.2s;
    }

    .lp-faq details[open] summary::after {
        rotate: 45deg;
    }

    .lp-faq .rich-text {
        max-width: 56ch;
        margin-top: var(--space-3);
    }

    /* ── финал: кромка поперёк ─────────────────────────────── */
    .lp-finale {
        padding-block: var(--space-10);
        text-align: center;
        background: radial-gradient(60% 50% at 50% 55%, var(--surface), var(--ground) 70%);
    }

    .lp-finale h2 {
        max-width: 14ch;
        margin-inline: auto;
        font-size: clamp(2.6rem, 6.4vw, 6rem);
        font-weight: 900;
        line-height: 0.9;
        letter-spacing: -0.05em;
    }

    .lp-finale h2 span {
        color: var(--steel);
        font-weight: 700;
    }

    /* лезвие: сталь светлеет к середине, по кромке бежит искра */
    .lp-edge {
        position: relative;
        max-width: 1100px;
        height: 2px;
        margin: var(--space-8) auto;
        background: linear-gradient(
            90deg,
            transparent,
            var(--hairline-bright) 12%,
            var(--ink-muted) 50%,
            var(--hairline-bright) 88%,
            transparent
        );
    }

    .lp-edge::after {
        content: "";
        position: absolute;
        top: -3px;
        left: calc(50% - 60px);
        width: 120px;
        height: 8px;
        background: radial-gradient(closest-side, var(--ink), var(--spark) 40%, transparent);
        filter: blur(1px);
        animation: lp-edge-run 3.2s cubic-bezier(0.6, 0, 0.3, 1) infinite;
    }

    @keyframes lp-edge-run {
        0% {
            left: -10%;
            opacity: 0;
        }
        15%,
        85% {
            opacity: 1;
        }
        100% {
            left: 100%;
            opacity: 0;
        }
    }

    .lp-finale-text {
        max-width: 46ch;
        margin: 0 auto var(--space-7);
        font-size: 1.15rem;
    }

    .lp-finale-join {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }

    /* в конце длинной страницы кнопка — самое заметное пятно */
    .lp-button-hot {
        color: var(--lp-on-spark);
    }

    .lp-button-hot .button-face {
        background: var(--spark);
    }
}

/* «Шлам»: светлая тема сайта (см. zatochkasite.css) */
@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .lp {
        --lp-on-spark: var(--surface-raised);
    }
}

:root[data-theme="light"] .lp {
    --lp-on-spark: var(--surface-raised);
}

@media (max-width: 900px) {
    .lp-cut-inner,
    .lp-pick-grid,
    .lp-path-grid,
    .lp-pick-top,
    .lp-fit-grid,
    .lp-faq {
        grid-template-columns: 1fr;
    }

    .lp-hot {
        top: auto;
        width: 100%;
        height: 40%;
        clip-path: polygon(0 30%, 100% 0, 100% 100%, 0 100%);
    }

    .lp-stamp {
        justify-self: start;
        margin-top: var(--space-5);
        text-align: left;
    }

    .lp-fit + .lp-fit {
        padding-left: 0;
        border-top: 1px solid var(--hairline);
        border-left: 0;
    }

    .lp-rules {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lp-ticket {
        grid-template-columns: 1fr;
        rotate: 0deg;
    }

    .lp-ticket-stub {
        flex-direction: row;
        border-top: 2px dashed color-mix(in oklab, var(--ground) 40%, transparent);
        border-left: 0;
    }

    .lp-ticket-rows {
        grid-template-columns: repeat(2, auto);
    }

    .lp-path {
        background: var(--ground);
    }

    .lp-section {
        padding-block: var(--space-8);
    }

    .lp-answer {
        padding: var(--space-6) var(--space-5);
    }
}

@media (max-width: 520px) {
    .lp-rules {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lp *,
    .lp *::before,
    .lp *::after {
        animation: none !important;
        transition: none !important;
    }

    .lp-ticket {
        rotate: 0deg;
    }
}

@media (forced-colors: active) {
    .lp-choice,
    .lp-answer,
    .lp-ticket,
    .lp-rules li {
        border: 1px solid CanvasText;
    }

    .lp-choice[aria-pressed="true"] {
        border-width: 3px;
    }

    .lp-rules b {
        background: none;
        color: CanvasText;
    }
}