/* =========================
   INTRO — ANIMACIONES DE ENTRADA
   ========================= */

/* -------------------------
   ESTADO INICIAL
   ------------------------- */

.intro-name,
.intro-xv,
.intro-divider,
.intro-date,
.intro-silhouette img,
.intro-phrase,
.scroll-indicator {
    opacity: 0;
}


/* -------------------------
   INGRID
   ------------------------- */

.intro.is-revealed .intro-name {
    animation: intro-fade-in 1.2s ease-out 0.15s forwards;
}


/* -------------------------
   XV AÑOS
   ------------------------- */

.intro.is-revealed .intro-xv {
    animation: intro-fade-in 1s ease-out 0.45s forwards;
}


/* -------------------------
   SEPARADOR
   ------------------------- */

.intro.is-revealed .intro-divider {
    animation: intro-fade-in 0.9s ease-out 0.75s forwards;
}


/* -------------------------
   FECHA
   ------------------------- */

.intro.is-revealed .intro-date {
    animation: intro-fade-in 1s ease-out 0.95s forwards;
}


/* -------------------------
   IMAGEN
   ------------------------- */

.intro.is-revealed .intro-silhouette img {
    animation: intro-image-reveal 1.8s ease-out 0.65s forwards;
}


/* -------------------------
   FRASE
   ------------------------- */

.intro.is-revealed .intro-phrase {
    animation: intro-phrase-reveal 1.2s ease-out 1.5s forwards;
}


/* -------------------------
   DESLIZA
   ------------------------- */

.intro.is-revealed .scroll-indicator {
    animation:
        intro-scroll-reveal 1s ease-out 2.1s forwards,
        scroll-breathe 2.5s ease-in-out 3.2s infinite;
}


/* =========================
   KEYFRAMES
   ========================= */

@keyframes intro-fade-in {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


@keyframes intro-image-reveal {

    from {
        opacity: 0;
        transform: scale(0.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


@keyframes intro-phrase-reveal {

    from {
        opacity: 0;
        transform: translateX(-50%) translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}


@keyframes intro-scroll-reveal {

    from {
        opacity: 0;
        transform: translateX(-50%) translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}


@keyframes scroll-breathe {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}


/* =========================
   ACCESIBILIDAD
   ========================= */

@media (prefers-reduced-motion: reduce) {

    .intro-name,
    .intro-xv,
    .intro-divider,
    .intro-date,
    .intro-silhouette img,
    .intro-phrase,
    .scroll-indicator,
    .petal {
        animation: none;
        opacity: 1;
    }
}

/* =========================================================
   04 — ENTRADA SUAVE PADRES + PADRINOS
   ========================================================= */

.people-content {
    opacity: 0;

    transform: translateY(18px);

    transition:
        opacity 1.1s ease,
        transform 1.1s ease;
}

.people.is-visible .people-content {
    opacity: 1;

    transform: translateY(-4%);
}

/* =========================================================
   05 — ENTRADA SUAVE
   ========================================================= */

.ceremony-content {
    opacity: 0;

    transform: translateY(14px);

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;
}

.events.is-visible .ceremony-content {
    opacity: 1;

    transform: translateY(0);
}