/* ==========================================================================
   sections.css
   Tema Premium · Secciones de la invitación de Danna Sarahi
   Cargar después de app.css y cover.css.
   Este archivo no modifica la portada ni la lógica de Blazor/JavaScript.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variables exclusivas de las escenas
   -------------------------------------------------------------------------- */

.invitation-content {
    --section-bg-start: #fff9f5;
    --section-bg-middle: #f4e4de;
    --section-bg-end: #fffaf7;
    --section-plum-900: #2a1520;
    --section-plum-700: #5d3345;
    --section-rose-500: #a97070;
    --section-gold-200: #f2ddb1;
    --section-gold-400: #d9b56a;
    --section-gold-600: #aa7831;
    --section-text: #513b3d;
    --section-muted: #7d6263;
    --section-border: rgba(170, 120, 49, .23);
    --section-glass: rgba(255, 252, 249, .72);
    --section-shadow: 0 24px 70px rgba(70, 38, 49, .12), 0 8px 26px rgba(111, 73, 76, .08);
}

/* --------------------------------------------------------------------------
   Fondo general después de abrir la invitación
   -------------------------------------------------------------------------- */

.invitation-content {
    min-height: 100svh;
    overflow: clip;
    background: radial-gradient( circle at 10% 8%, rgba(255, 255, 255, .92), transparent 34% ), radial-gradient( circle at 92% 24%, rgba(218, 181, 106, .14), transparent 36% ), radial-gradient( circle at 20% 72%, rgba(216, 160, 163, .16), transparent 38% ), linear-gradient( 180deg, var(--section-bg-start) 0%, var(--section-bg-middle) 47%, var(--section-bg-end) 100% );
}

    /* --------------------------------------------------------------------------
   Escenas
   -------------------------------------------------------------------------- */

    .invitation-content .story-step {
        --scene-accent: rgba(217, 181, 106, .22);
        --scene-accent-soft: rgba(216, 160, 163, .16);
        position: relative;
        width: 100%;
        max-width: none;
        min-height: 100svh;
        margin: 0;
        padding: max(92px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(48px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
        display: flex;
        flex-direction: column;
        justify-content: center;
        isolation: isolate;
        overflow: clip;
        opacity: .62;
        filter: saturate(.88);
        transform: scale(.985);
        transition: opacity .85s ease, filter .85s ease, transform 1s cubic-bezier(.22, .72, .22, 1);
    }

        /* Variación sutil para evitar que todas las escenas se sientan iguales. */
        .invitation-content .story-step:nth-of-type(3n + 2) {
            --scene-accent: rgba(205, 149, 157, .19);
            --scene-accent-soft: rgba(231, 190, 111, .13);
        }

        .invitation-content .story-step:nth-of-type(3n + 3) {
            --scene-accent: rgba(157, 112, 127, .14);
            --scene-accent-soft: rgba(222, 183, 106, .18);
        }

        /* Escena visible/actual. Compatible con tu IntersectionObserver. */
        .invitation-content .story-step.is-visible,
        .invitation-content .story-step.is-active-step,
        .invitation-content .story-step.is-current {
            opacity: 1;
            filter: none;
            transform: scale(1);
        }

        /* --------------------------------------------------------------------------
   Fondos decorativos por escena
   Conserva los pseudo-elementos ya usados por el motor Story.
   -------------------------------------------------------------------------- */

        .invitation-content .story-step::before {
            width: min(560px, 76vw);
            top: 5%;
            right: -24%;
            background: radial-gradient( circle, var(--scene-accent) 0%, rgba(255, 255, 255, .08) 48%, transparent 72% );
            filter: blur(1px);
        }

        .invitation-content .story-step::after {
            width: min(470px, 66vw);
            left: -22%;
            bottom: 3%;
            background: radial-gradient( circle, var(--scene-accent-soft) 0%, transparent 72% );
        }

    /* --------------------------------------------------------------------------
   Glow interior de escena
   -------------------------------------------------------------------------- */

    .invitation-content .story-step__glow {
        inset: 13% 8%;
        opacity: .28;
        background: radial-gradient( ellipse at center, rgba(255, 255, 255, .72) 0%, rgba(255, 250, 244, .30) 42%, transparent 72% );
        filter: blur(28px);
        transition: opacity 1.25s ease, transform 1.25s cubic-bezier(.22, .72, .22, 1);
    }

    .invitation-content .story-step.is-visible .story-step__glow,
    .invitation-content .story-step.is-active-step .story-step__glow,
    .invitation-content .story-step.is-current .story-step__glow {
        opacity: .72;
    }

    /* --------------------------------------------------------------------------
   Contenedor central
   -------------------------------------------------------------------------- */

    .invitation-content .story-step__content {
        position: relative;
        z-index: 3;
        width: min(100%, 980px);
        margin: auto;
        display: grid;
        align-items: center;
    }

        /* Evita que textos/tarjetas expulsen el ancho de la escena. */
        .invitation-content .story-step__content > *,
        .invitation-content .section-heading,
        .invitation-content .lead-text {
            min-width: 0;
            max-width: 100%;
        }

    /* --------------------------------------------------------------------------
   Encabezados
   -------------------------------------------------------------------------- */

    .invitation-content .section-heading {
        width: min(100%, 780px);
        margin: 0 auto 38px;
        text-align: center;
    }

    .invitation-content .section-heading__symbol {
        margin-bottom: 7px;
        color: var(--section-gold-400);
        font-size: clamp(1.15rem, 3vw, 1.55rem);
        text-shadow: 0 0 18px rgba(217, 181, 106, .34);
        animation: sectionSymbolFloat 5s ease-in-out infinite;
    }

    .invitation-content .section-heading .eyebrow {
        margin: 0 0 12px;
        color: var(--section-gold-600);
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(.92rem, 2.4vw, 1.2rem);
        font-weight: 700;
        letter-spacing: .22em;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .invitation-content .section-heading h2 {
        width: 100%;
        max-width: 860px;
        margin: 0 auto;
        color: var(--section-plum-700);
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(2.55rem, 8.5vw, 5rem);
        font-weight: 500;
        line-height: .98;
        text-align: center;
        text-wrap: balance;
        text-shadow: 0 3px 18px rgba(255, 255, 255, .78);
    }

    .invitation-content .section-heading p:not(.eyebrow) {
        width: min(100%, 630px);
        margin: 20px auto 0;
        color: var(--section-muted);
        font-size: 1rem;
        line-height: 1.8;
    }

    /* Línea ornamental inferior automática. */
    .invitation-content .section-heading::after {
        content: "";
        width: min(240px, 52vw);
        height: 1px;
        margin: 23px auto 0;
        display: block;
        background: linear-gradient( 90deg, transparent, rgba(217, 181, 106, .82), transparent );
        transform: scaleX(.7);
        opacity: .65;
        transition: transform 1s cubic-bezier(.22, .72, .22, 1), opacity 1s ease;
    }

    .invitation-content .story-step.is-visible .section-heading::after,
    .invitation-content .story-step.is-active-step .section-heading::after {
        transform: scaleX(1);
        opacity: 1;
    }

    /* --------------------------------------------------------------------------
   Texto principal de bienvenida
   -------------------------------------------------------------------------- */

    .invitation-content .lead-text {
        width: min(100%, 740px);
        margin: 0 auto;
        color: var(--section-text);
        font-family: "Cormorant Garamond", serif;
        font-size: clamp(1.42rem, 4.8vw, 2.02rem);
        font-weight: 500;
        line-height: 1.62;
        text-align: center;
        text-wrap: pretty;
    }

    /* --------------------------------------------------------------------------
   Escena Intro
   -------------------------------------------------------------------------- */

    .invitation-content #intro .story-step__content {
        width: min(100%, 900px);
    }

    .invitation-content #intro .lead-text {
        position: relative;
        padding: clamp(25px, 5vw, 44px) clamp(22px, 6vw, 58px);
        border: 1px solid var(--section-border);
        border-radius: 28px;
        background: linear-gradient( 145deg, rgba(255, 255, 255, .68), rgba(252, 238, 231, .46) );
        box-shadow: var(--section-shadow);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

        /* Pequeño detalle dorado sobre el mensaje. */
        .invitation-content #intro .lead-text::before {
            content: "❧";
            position: absolute;
            top: -18px;
            left: 50%;
            width: 46px;
            height: 36px;
            display: grid;
            place-items: center;
            color: var(--section-gold-600);
            background: rgba(255, 249, 245, .94);
            transform: translateX(-50%);
            font-family: Georgia, serif;
            font-size: 1.35rem;
        }

    /* --------------------------------------------------------------------------
   Escenas de evento
   -------------------------------------------------------------------------- */

    .invitation-content .section--event .story-step__content {
        width: min(100%, 760px);
        place-items: center;
    }

    /* --------------------------------------------------------------------------
   Escena final
   -------------------------------------------------------------------------- */

    .invitation-content .story-step--final {
        background: radial-gradient( circle at 50% 33%, rgba(255, 255, 255, .88), transparent 38% ), radial-gradient( circle at 20% 78%, rgba(218, 181, 106, .18), transparent 36% ), linear-gradient( 180deg, rgba(255, 250, 246, .34), rgba(226, 194, 184, .45) );
    }

        .invitation-content .story-step--final .invitation-footer {
            width: min(100%, 760px);
            margin: auto;
            padding: clamp(38px, 7vw, 70px) 22px;
            border: 1px solid var(--section-border);
            border-radius: 34px;
            background: linear-gradient( 145deg, rgba(255, 255, 255, .76), rgba(249, 231, 224, .54) );
            box-shadow: var(--section-shadow);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
        }

            .invitation-content .story-step--final .invitation-footer h2 {
                color: var(--section-gold-600);
                text-shadow: 0 4px 18px rgba(255, 255, 255, .9), 0 1px 0 rgba(110, 68, 40, .12);
            }

    /* --------------------------------------------------------------------------
   Aparición coordinada al activar una escena
   -------------------------------------------------------------------------- */

    .invitation-content .story-step.is-visible .section-heading,
    .invitation-content .story-step.is-active-step .section-heading {
        animation: sectionHeadingEnter .95s cubic-bezier(.22, .72, .22, 1) both;
    }

/* --------------------------------------------------------------------------
   Keyframes locales
   -------------------------------------------------------------------------- */

@keyframes sectionHeadingEnter {
    from {
        opacity: 0;
        transform: translate3d(0, 32px, 0) scale(.97);
        filter: blur(5px);
    }

    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes sectionSymbolFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-5px) scale(1.05);
    }
}

/* --------------------------------------------------------------------------
   Escritorio
   -------------------------------------------------------------------------- */

@media (min-width: 900px) {
    .invitation-content .story-step {
        padding-inline: 42px;
    }

    .invitation-content .section-heading {
        margin-bottom: 48px;
    }
}

/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
    .invitation-content .story-step {
        min-height: 100svh;
        padding: max(78px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(34px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    }

        .invitation-content .story-step::before {
            right: -38%;
        }

        .invitation-content .story-step::after {
            left: -34%;
        }

    .invitation-content .section-heading {
        margin-bottom: 30px;
    }

        .invitation-content .section-heading h2 {
            font-size: clamp(2.35rem, 12vw, 3.75rem);
            line-height: 1;
        }

        .invitation-content .section-heading .eyebrow {
            font-size: .84rem;
            letter-spacing: .17em;
        }

    .invitation-content .lead-text {
        font-size: clamp(1.3rem, 6vw, 1.62rem);
        line-height: 1.55;
    }

    .invitation-content #intro .lead-text {
        padding: 33px 22px 27px;
        border-radius: 24px;
    }

    .invitation-content .story-step--final .invitation-footer {
        border-radius: 26px;
    }
}

/* --------------------------------------------------------------------------
   Pantallas con poca altura
   -------------------------------------------------------------------------- */

@media (max-height: 720px) {
    .invitation-content .story-step {
        min-height: auto;
        padding-block: 80px 34px;
    }

    .invitation-content .section-heading {
        margin-bottom: 24px;
    }

        .invitation-content .section-heading h2 {
            font-size: clamp(2.25rem, 8vw, 3.8rem);
        }

    .invitation-content .lead-text {
        font-size: 1.35rem;
    }
}

/* --------------------------------------------------------------------------
   Reducir movimiento
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .invitation-content .story-step,
    .invitation-content .story-step__glow,
    .invitation-content .section-heading::after {
        transition: none !important;
    }

        .invitation-content .story-step.is-visible .section-heading,
        .invitation-content .story-step.is-active-step .section-heading,
        .invitation-content .section-heading__symbol {
            animation: none !important;
        }
}