/* ==========================================================================
   animations.css
   Invitación XV · Danna Sarahi
   Animaciones premium y transición de portada.

   Orden recomendado:
   1. app.css / site.css
   2. cover.css
   3. sections.css
   4. cards.css
   5. buttons.css
   6. animations.css

   IMPORTANTE:
   - No reemplaza tu JavaScript actual.
   - Trabaja con las clases .reveal, .is-visible y .is-cover-transforming.
   - La transición de portada usa dos imágenes superpuestas:
       .welcome-cover-layer--child
       .welcome-cover-layer--xv
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES DE ANIMACIÓN
   ========================================================================== */

:root {
    --motion-fast: 220ms;
    --motion-normal: 520ms;
    --motion-slow: 900ms;
    --motion-cinematic: 1800ms;
    --motion-ease: cubic-bezier(.22, .72, .22, 1);
    --motion-ease-soft: cubic-bezier(.25, .8, .25, 1);
    --motion-ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   2. TRANSICIÓN DE PORTADA: NIÑA → QUINCEAÑERA
   ========================================================================== */

/*
   Estructura esperada dentro de WelcomeCover.razor:

   <picture class="welcome-screen__picture
                   welcome-cover-layer
                   welcome-cover-layer--child">
       ...
   </picture>

   <picture class="welcome-screen__picture
                   welcome-cover-layer
                   welcome-cover-layer--xv">
       ...
   </picture>

   <div class="welcome-cover-flash"></div>
*/

.welcome-screen .welcome-cover-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    will-change: opacity, transform, filter;
}

.welcome-screen .welcome-cover-layer--child {
    opacity: 1;
    transform: scale(1);
    filter: blur(0) saturate(1);
}

.welcome-screen .welcome-cover-layer--xv {
    opacity: 0;
    transform: scale(1.075);
    filter: blur(12px) saturate(.88);
}

/* Mantiene ambas imágenes alineadas. */
.welcome-screen .welcome-cover-layer .welcome-screen__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ajuste independiente de posición. */
.welcome-screen .welcome-cover-layer--child .welcome-screen__image {
    object-position: center 38%;
}

.welcome-screen .welcome-cover-layer--xv .welcome-screen__image {
    object-position: center 44%;
}

/* Capa de destello central. */
.welcome-cover-flash {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient( circle at 50% 42%, rgba(255, 251, 229, .96) 0%, rgba(244, 209, 140, .74) 14%, rgba(211, 155, 80, .24) 36%, transparent 68% );
    mix-blend-mode: screen;
    will-change: opacity, transform, filter;
}

/* Halo detrás de la quinceañera durante la transformación. */
.welcome-screen::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 43%;
    z-index: 2;
    width: min(76vw, 650px);
    aspect-ratio: 1;
    border: 1px solid rgba(239, 203, 130, .34);
    border-radius: 50%;
    opacity: .34;
    background: radial-gradient( circle, rgba(255, 237, 193, .16) 0%, rgba(214, 169, 90, .08) 46%, transparent 72% );
    box-shadow: 0 0 70px rgba(221, 174, 94, .19), inset 0 0 44px rgba(255, 236, 186, .11);
    transform: translate(-50%, -50%) scale(.92);
    pointer-events: none;
    animation: invitationHaloBreath 6s ease-in-out infinite;
}

/* Oculta suavemente texto y botón al comenzar la transformación. */
.welcome-screen.is-cover-transforming .welcome-screen__content {
    pointer-events: none;
    animation: invitationCoverCopyOut 480ms var(--motion-ease) both;
}

/* Sale la fotografía de infancia. */
.welcome-screen.is-cover-transforming .welcome-cover-layer--child {
    animation: invitationChildFadeOut var(--motion-cinematic) var(--motion-ease-soft) both;
}

/* Entra la fotografía original de quinceañera. */
.welcome-screen.is-cover-transforming .welcome-cover-layer--xv {
    animation: invitationXvFadeIn var(--motion-cinematic) var(--motion-ease-soft) both;
}

/* Destello dorado en el centro de la transición. */
.welcome-screen.is-cover-transforming .welcome-cover-flash {
    animation: invitationCoverFlash var(--motion-cinematic) ease-in-out both;
}

/* Halo más brillante durante el cambio. */
.welcome-screen.is-cover-transforming::after {
    animation: invitationHaloTransform var(--motion-cinematic) var(--motion-ease-soft) both;
}

/* ==========================================================================
   3. BRILLOS FLOTANTES DE LA PORTADA
   ========================================================================== */

.welcome-screen .cover-sparkles {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
}

.welcome-screen .cover-sparkle {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 235, 183, .94);
    box-shadow: 0 0 8px rgba(255, 229, 164, .92), 0 0 18px rgba(229, 177, 85, .6);
    opacity: 0;
    animation: invitationSparkleFloat var(--sparkle-duration, 5.2s) ease-in-out var(--sparkle-delay, 0s) infinite;
}

    .welcome-screen .cover-sparkle:nth-child(1) {
        left: 12%;
        top: 28%;
        --sparkle-duration: 5.4s;
        --sparkle-delay: .2s;
    }

    .welcome-screen .cover-sparkle:nth-child(2) {
        left: 22%;
        top: 54%;
        --sparkle-duration: 6.2s;
        --sparkle-delay: 1.1s;
    }

    .welcome-screen .cover-sparkle:nth-child(3) {
        right: 18%;
        top: 32%;
        --sparkle-duration: 4.8s;
        --sparkle-delay: .6s;
    }

    .welcome-screen .cover-sparkle:nth-child(4) {
        right: 11%;
        top: 61%;
        --sparkle-duration: 5.8s;
        --sparkle-delay: 1.8s;
    }

    .welcome-screen .cover-sparkle:nth-child(5) {
        left: 47%;
        top: 17%;
        --sparkle-duration: 6.5s;
        --sparkle-delay: 2.2s;
    }

    .welcome-screen .cover-sparkle:nth-child(6) {
        left: 57%;
        top: 68%;
        --sparkle-duration: 5.1s;
        --sparkle-delay: 1.4s;
    }

/* ==========================================================================
   4. SISTEMA GENERAL REVEAL
   ========================================================================== */

.reveal {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(.985);
    filter: blur(5px);
    transition: opacity var(--motion-slow) var(--motion-ease), transform var(--motion-slow) var(--motion-ease), filter var(--motion-slow) ease;
    will-change: opacity, transform, filter;
}

    .reveal.is-visible,
    .is-visible > .reveal,
    .story-step.is-visible .reveal {
        opacity: 1;
        transform: none;
        filter: none;
    }

/* ==========================================================================
   5. VARIANTES REVEAL
   ========================================================================== */

.reveal--soft {
    transform: translate3d(0, 22px, 0) scale(.992);
    filter: blur(3px);
}

.reveal--rise {
    transform: translate3d(0, 48px, 0) scale(.98);
}

.reveal--fade {
    transform: none;
    filter: none;
}

.reveal--left {
    transform: translate3d(-46px, 0, 0) scale(.985);
}

.reveal--right {
    transform: translate3d(46px, 0, 0) scale(.985);
}

.reveal--scale {
    transform: scale(.9);
    filter: blur(4px);
}

.reveal--glow {
    transform: translate3d(0, 20px, 0) scale(.97);
    filter: blur(6px) brightness(1.15);
}

/* ==========================================================================
   6. RETARDOS ESCALONADOS
   ========================================================================== */

.reveal-delay-1 {
    transition-delay: 80ms;
}

.reveal-delay-2 {
    transition-delay: 160ms;
}

.reveal-delay-3 {
    transition-delay: 240ms;
}

.reveal-delay-4 {
    transition-delay: 320ms;
}

.reveal-delay-5 {
    transition-delay: 400ms;
}

.reveal-delay-6 {
    transition-delay: 480ms;
}

/* Soporte automático para elementos consecutivos. */
.story-step.is-visible .stagger > :nth-child(1) {
    animation-delay: 70ms;
}

.story-step.is-visible .stagger > :nth-child(2) {
    animation-delay: 150ms;
}

.story-step.is-visible .stagger > :nth-child(3) {
    animation-delay: 230ms;
}

.story-step.is-visible .stagger > :nth-child(4) {
    animation-delay: 310ms;
}

.story-step.is-visible .stagger > :nth-child(5) {
    animation-delay: 390ms;
}

.story-step.is-visible .stagger > :nth-child(6) {
    animation-delay: 470ms;
}

/* ==========================================================================
   7. ANIMACIONES PARA TEXTO
   ========================================================================== */

.animated-text {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    white-space: normal;
}

.animated-text__word {
    display: inline-flex;
    white-space: nowrap;
}

    .animated-text__word:not(:last-child) {
        margin-right: .28em;
    }

.animated-text__letter {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, .72em, 0) rotateX(-42deg);
    transform-origin: center bottom;
    animation: invitationLetterRise .72s var(--motion-ease-out) forwards;
    animation-delay: calc(var(--letter-index, 0) * 38ms);
}

.animated-text--glow .animated-text__letter {
    animation-name: invitationLetterGlow;
}

.animated-text--soft .animated-text__letter {
    animation-name: invitationLetterSoft;
}

/* ==========================================================================
   8. TARJETAS FLOTANTES
   ========================================================================== */

.invitation-content .floating-card {
    animation: invitationCardFloat 7s ease-in-out infinite;
}

    .invitation-content .floating-card:nth-child(even) {
        animation-delay: -2.6s;
    }

/* ==========================================================================
   9. ÍCONOS Y ORNAMENTOS
   ========================================================================== */

.invitation-content :is( .card-icon, .event-card__icon, .gift-card__icon, .dress-code-card__icon, .rsvp-card__icon, .location-card__icon ) {
    animation: invitationIconBreath 4.8s ease-in-out infinite;
}

.invitation-content .ornament {
    animation: invitationOrnamentGlow 4s ease-in-out infinite;
}

/* ==========================================================================
   10. CUENTA REGRESIVA
   ========================================================================== */

.invitation-content :is( .countdown-number, .countdown-card__number, .countdown-value ) {
    transform-origin: center;
}

    .invitation-content :is( .countdown-number, .countdown-card__number, .countdown-value ).is-changing {
        animation: invitationCountdownChange .42s var(--motion-ease) both;
    }

/* ==========================================================================
   11. BOTONES Y PULSOS
   ========================================================================== */

.invitation-content .pulse-button {
    animation: invitationButtonPulse 2.8s ease-in-out infinite;
}

.invitation-content .whatsapp-button.pulse-button {
    animation-name: invitationWhatsappPulse;
}

/* ==========================================================================
   12. TRANSICIÓN FINAL DE LA PORTADA
   ========================================================================== */

.welcome-screen.is-hidden {
    pointer-events: none;
    animation: invitationCoverExit 1.1s var(--motion-ease) both;
}

/* ==========================================================================
   13. KEYFRAMES DE PORTADA
   ========================================================================== */

@keyframes invitationChildFadeOut {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) saturate(1);
    }

    28% {
        opacity: 1;
        transform: scale(1.018);
        filter: blur(0) saturate(1.04);
    }

    58% {
        opacity: .46;
        transform: scale(1.045);
        filter: blur(4px) saturate(.92);
    }

    100% {
        opacity: 0;
        transform: scale(1.075);
        filter: blur(12px) saturate(.8);
    }
}

@keyframes invitationXvFadeIn {
    0% {
        opacity: 0;
        transform: scale(1.075);
        filter: blur(12px) saturate(.84);
    }

    34% {
        opacity: 0;
    }

    60% {
        opacity: .52;
        transform: scale(1.04);
        filter: blur(5px) saturate(.96);
    }

    100% {
        opacity: 1;
        transform: scale(1);
        filter: blur(0) saturate(1);
    }
}

@keyframes invitationCoverFlash {
    0%, 24% {
        opacity: 0;
        transform: scale(.72);
        filter: blur(18px);
    }

    48% {
        opacity: .88;
        transform: scale(1);
        filter: blur(4px);
    }

    64% {
        opacity: .46;
        transform: scale(1.18);
        filter: blur(10px);
    }

    100% {
        opacity: 0;
        transform: scale(1.42);
        filter: blur(22px);
    }
}

@keyframes invitationHaloTransform {
    0% {
        opacity: .34;
        transform: translate(-50%, -50%) scale(.92);
    }

    48% {
        opacity: .86;
        transform: translate(-50%, -50%) scale(1.08);
    }

    100% {
        opacity: .48;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes invitationHaloBreath {
    0%, 100% {
        opacity: .28;
        transform: translate(-50%, -50%) scale(.96);
    }

    50% {
        opacity: .48;
        transform: translate(-50%, -50%) scale(1.025);
    }
}

@keyframes invitationCoverCopyOut {
    from {
        opacity: 1;
        transform: none;
        filter: none;
    }

    to {
        opacity: 0;
        transform: translate3d(0, -18px, 0) scale(.985);
        filter: blur(4px);
    }
}

@keyframes invitationCoverExit {
    0% {
        opacity: 1;
        visibility: visible;
        transform: scale(1);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        visibility: hidden;
        transform: scale(1.035);
        filter: blur(8px);
    }
}

/* ==========================================================================
   14. KEYFRAMES GENERALES
   ========================================================================== */

@keyframes invitationSparkleFloat {
    0% {
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(.45);
    }

    22% {
        opacity: .92;
    }

    54% {
        opacity: .5;
        transform: translate3d(10px, -14px, 0) scale(1);
    }

    78% {
        opacity: .84;
    }

    100% {
        opacity: 0;
        transform: translate3d(-7px, -42px, 0) scale(.34);
    }
}

@keyframes invitationLetterRise {
    from {
        opacity: 0;
        transform: translate3d(0, .72em, 0) rotateX(-42deg);
        filter: blur(4px);
    }

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

@keyframes invitationLetterGlow {
    from {
        opacity: 0;
        transform: translate3d(0, .5em, 0) scale(.86);
        filter: blur(6px) brightness(1.45);
        text-shadow: 0 0 26px rgba(255, 231, 176, .9);
    }

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

@keyframes invitationLetterSoft {
    from {
        opacity: 0;
        transform: translate3d(0, .28em, 0);
        filter: blur(3px);
    }

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

@keyframes invitationCardFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes invitationIconBreath {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 10px 30px rgba(104, 70, 55, .11), 0 0 0 rgba(215, 170, 88, 0);
    }

    50% {
        transform: scale(1.045);
        box-shadow: 0 13px 34px rgba(104, 70, 55, .14), 0 0 24px rgba(215, 170, 88, .22);
    }
}

@keyframes invitationOrnamentGlow {
    0%, 100% {
        opacity: .72;
        filter: brightness(1);
    }

    50% {
        opacity: 1;
        filter: brightness(1.2);
    }
}

@keyframes invitationCountdownChange {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    45% {
        opacity: 0;
        transform: translateY(-10px) scale(.94);
    }

    55% {
        opacity: 0;
        transform: translateY(10px) scale(.94);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes invitationButtonPulse {
    0%, 100% {
        box-shadow: var(--button-shadow), 0 0 0 0 rgba(205, 159, 78, .24);
    }

    50% {
        box-shadow: var(--button-shadow), 0 0 0 12px rgba(205, 159, 78, 0);
    }
}

@keyframes invitationWhatsappPulse {
    0%, 100% {
        box-shadow: 0 15px 36px rgba(15, 116, 65, .22), 0 0 0 0 rgba(37, 194, 108, .24);
    }

    50% {
        box-shadow: 0 15px 36px rgba(15, 116, 65, .22), 0 0 0 12px rgba(37, 194, 108, 0);
    }
}

/* ==========================================================================
   15. AJUSTES PARA MÓVIL
   ========================================================================== */

@media (max-width: 760px) {
    .welcome-screen .welcome-cover-layer--child .welcome-screen__image {
        object-position: center 35%;
    }

    .welcome-screen .welcome-cover-layer--xv .welcome-screen__image {
        object-position: center 40%;
    }

    .welcome-screen::after {
        top: 42%;
        width: min(108vw, 560px);
    }

    .welcome-cover-flash {
        background: radial-gradient( circle at 50% 40%, rgba(255, 251, 229, .94) 0%, rgba(244, 209, 140, .66) 15%, rgba(211, 155, 80, .2) 38%, transparent 70% );
    }
}

/* ==========================================================================
   16. MOVIMIENTO REDUCIDO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
    }

    .reveal,
    .reveal--soft,
    .reveal--rise,
    .reveal--fade,
    .reveal--left,
    .reveal--right,
    .reveal--scale,
    .reveal--glow {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .animated-text__letter {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
    }

    .welcome-screen::after,
    .welcome-screen .cover-sparkle,
    .invitation-content .floating-card,
    .invitation-content :is( .card-icon, .event-card__icon, .gift-card__icon, .dress-code-card__icon, .rsvp-card__icon, .location-card__icon ),
    .invitation-content .ornament,
    .invitation-content .pulse-button {
        animation: none !important;
    }

    .welcome-screen.is-cover-transforming .welcome-screen__content {
        opacity: 0;
        animation: none !important;
    }

    .welcome-screen.is-cover-transforming .welcome-cover-layer--child {
        opacity: 0;
        animation: none !important;
    }

    .welcome-screen.is-cover-transforming .welcome-cover-layer--xv {
        opacity: 1;
        transform: scale(1);
        filter: none;
        animation: none !important;
    }

    .welcome-screen.is-cover-transforming .welcome-cover-flash {
        display: none;
    }

    .welcome-screen.is-hidden {
        opacity: 0;
        visibility: hidden;
        animation: none !important;
    }
}