/* ==========================================
   ANIMACIONES DE LA PORTADA
========================================== */

@keyframes fade-up{
    from{
        opacity:0;
        transform:translateY(22px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes monogram-entry{
    from{
        opacity:0;
        transform:scale(.75) rotate(-7deg);
    }

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

@keyframes background-zoom{
    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.035);
    }
}

@keyframes arrow-movement{
    0%,
    100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(7px);
    }
}

@keyframes button-glow{
    0%,
    100%{
        box-shadow:
            0 10px 25px rgba(111,78,55,.16),
            0 0 0 rgba(212,175,55,0);
    }

    50%{
        box-shadow:
            0 12px 30px rgba(111,78,55,.18),
            0 0 22px rgba(212,175,55,.24);
    }
}

/* Movimiento muy lento del fondo */

.hero-background{
    animation:
        background-zoom 20s ease-in-out alternate infinite;
}

/* Entrada progresiva */

.monogram{
    opacity:0;
    animation:
        monogram-entry 1.1s ease .1s forwards;
}

.hero-years{
    opacity:0;
    animation:
        fade-up .9s ease .35s forwards;
}

.hero-content h1{
    opacity:0;
    animation:
        fade-up 1s ease .55s forwards;
}

.hero-text{
    opacity:0;
    animation:
        fade-up .9s ease .8s forwards;
}

.hero-actions{
    opacity:0;
    animation:
        fade-up .9s ease 1.05s forwards;
}

.scroll-down{
    opacity:0;
    animation:
        fade-up .9s ease 1.3s forwards;
}

.scroll-down i{
    animation:
        arrow-movement 1.8s ease-in-out infinite;
}

.btn-primary{
    animation:
        button-glow 4s ease-in-out infinite;
}

/* Accesibilidad */

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

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:.01ms !important;
        scroll-behavior:auto !important;
    }
}

/* ==========================================
   ANIMACIONES DE LA CUENTA REGRESIVA
========================================== */

@keyframes countdown-number-change{

    0%{
        opacity:.15;
        transform:translateY(8px) scale(.94);
    }

    50%{
        opacity:1;
        transform:translateY(-2px) scale(1.04);
    }

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

}

@keyframes countdown-soft-glow{

    0%,
    100%{
        text-shadow:
            0 3px 12px rgba(182,138,45,.10);
    }

    50%{
        text-shadow:
            0 3px 16px rgba(212,175,55,.30),
            0 0 22px rgba(212,175,55,.12);
    }

}

.countdown-number{
    animation:
        countdown-soft-glow 3.5s ease-in-out infinite;
}

.countdown-number.is-changing{
    animation:
        countdown-number-change .38s ease,
        countdown-soft-glow 3.5s ease-in-out infinite;
}

/* ==========================================
   ANIMACIÓN DEL MENSAJE PRINCIPAL
========================================== */

.reveal{
    opacity:0;
    transform:translateY(35px);

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

.reveal.is-visible{
    opacity:1;
    transform:translateY(0);
}

.message-title{
    transition:
        letter-spacing .7s ease,
        color .7s ease;
}

.message-container.is-visible .message-title{
    letter-spacing:.5px;
}

.message-thanks{
    animation:
        message-soft-float 4s ease-in-out infinite;
}

@keyframes message-soft-float{

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

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

}

/* ==========================================
   ANIMACIONES DE NUESTRA HISTORIA
========================================== */

.timeline-item{
    transition:
        opacity 1s ease,
        transform 1s ease;
}

.timeline-item-left.reveal{
    opacity:0;
    transform:translateX(-45px);
}

.timeline-item-right.reveal{
    opacity:0;
    transform:translateX(45px);
}

.timeline-item.reveal.is-visible{
    opacity:1;
    transform:translateX(0);
}

.timeline-marker{
    transition:
        transform .45s ease,
        background-color .45s ease,
        box-shadow .45s ease;
}

.timeline-item:hover .timeline-marker{
    transform:scale(1.08);

    background:var(--gold);
    color:var(--white);

    box-shadow:
        0 0 0 8px rgba(212,175,55,.10),
        0 12px 30px rgba(111,78,55,.13);
}

.timeline-card{
    transition:
        transform .4s ease,
        box-shadow .4s ease,
        border-color .4s ease;
}

.timeline-item:hover .timeline-card{
    transform:translateY(-4px);

    border-color:rgba(182,138,45,.38);

    box-shadow:
        0 22px 52px rgba(111,78,55,.11),
        inset 0 0 25px rgba(212,175,55,.05);
}

/* ==========================================
   ANIMACIÓN DE CEREMONIA
========================================== */

.ceremony-icon{
    transition:
        transform .45s ease,
        background-color .45s ease,
        color .45s ease,
        box-shadow .45s ease;
}

.ceremony-container:hover .ceremony-icon{
    transform:scale(1.07);

    background:var(--gold);
    color:var(--white);

    box-shadow:
        0 0 0 8px rgba(212,175,55,.10),
        0 14px 32px rgba(111,78,55,.13);
}

/* ==========================================
   ANIMACIÓN DE RECEPCIÓN
========================================== */

.reception-icon{
    transition:
        transform .45s ease,
        background-color .45s ease,
        color .45s ease,
        box-shadow .45s ease;
}

.reception-container:hover .reception-icon{
    transform:scale(1.07);

    background:var(--gold);
    color:var(--white);

    box-shadow:
        0 0 0 8px rgba(212,175,55,.10),
        0 14px 32px rgba(111,78,55,.13);
}

/* ==========================================
   ANIMACIÓN DE CÓDIGO DE VESTIMENTA
========================================== */

.dress-code-icon{
    transition:
        transform .45s ease,
        background-color .45s ease,
        color .45s ease,
        box-shadow .45s ease;
}

.dress-code-container:hover .dress-code-icon{
    transform:scale(1.07);

    background:var(--gold);
    color:var(--white);

    box-shadow:
        0 0 0 8px rgba(212,175,55,.10),
        0 14px 32px rgba(111,78,55,.13);
}

.dress-code-style{
    transition:
        letter-spacing .45s ease,
        color .45s ease;
}

.dress-code-container:hover .dress-code-style{
    letter-spacing:4px;
    color:var(--gold-light);
}

/* ==========================================
   ANIMACIÓN DE REGALOS
========================================== */

.gifts-icon{
    transition:
        transform .45s ease,
        background-color .45s ease,
        color .45s ease,
        box-shadow .45s ease;
}

.gifts-container:hover .gifts-icon{
    transform:scale(1.07);

    background:var(--gold);
    color:var(--white);

    box-shadow:
        0 0 0 8px rgba(212,175,55,.10),
        0 14px 32px rgba(111,78,55,.13);
}

/* ==========================================
   ANIMACIÓN DE CONFIRMACIÓN
========================================== */

.confirmation-icon{
    transition:
        transform .45s ease,
        background-color .45s ease,
        color .45s ease,
        box-shadow .45s ease;
}

.confirmation-container:hover .confirmation-icon{
    transform:scale(1.07);

    background:var(--gold);
    color:var(--white);

    box-shadow:
        0 0 0 8px rgba(212,175,55,.10),
        0 14px 32px rgba(111,78,55,.13);
}

/* ==========================================
   ANIMACIÓN DEL MENSAJE FINAL
========================================== */

.final-monogram{
    transition:
        transform .45s ease,
        background-color .45s ease,
        color .45s ease,
        box-shadow .45s ease;
}

.final-message-container:hover .final-monogram{
    transform:scale(1.07);

    background:var(--gold);
    color:var(--white);

    box-shadow:
        0 0 0 8px rgba(212,175,55,.10),
        0 14px 32px rgba(111,78,55,.13);
}

.final-message-signature{
    animation:
        final-soft-float 4s ease-in-out infinite;
}

@keyframes final-soft-float{

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

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

/* ==========================================
   ANIMACIONES DE LA PANTALLA DE APERTURA
========================================== */

@keyframes envelope-entry {

    from {
        opacity: 0;

        transform:
            translateY(30px)
            scale(.94);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

@keyframes intro-text-entry {

    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes seal-pulse {

    0%,
    100% {
        box-shadow:
            0 8px 20px rgba(111, 78, 55, .22),
            inset 0 0 0 3px rgba(255, 255, 255, .18),
            0 0 0 0 rgba(182, 138, 45, .20);
    }

    50% {
        box-shadow:
            0 10px 24px rgba(111, 78, 55, .25),
            inset 0 0 0 3px rgba(255, 255, 255, .18),
            0 0 0 10px rgba(182, 138, 45, 0);
    }
}

.intro-eyebrow {
    animation:
        intro-text-entry .8s ease .1s both;
}

.envelope {
    animation:
        envelope-entry 1.2s ease .25s both;
}

.envelope-seal {
    animation:
        seal-pulse 2.4s ease-in-out 1.5s infinite;
}

.envelope-open-label {
    animation:
        intro-text-entry .8s ease .55s both;
}

.intro-title {
    animation:
        intro-text-entry .9s ease .7s both;
}

.intro-text {
    animation:
        intro-text-entry .9s ease .9s both;
}

.invitation-intro.is-opening
.envelope-seal {
    animation: none;
}

/* ==========================================
   ANIMACIONES GENERALES AL HACER SCROLL
========================================== */

.reveal {
    opacity: 0;

    transform:
        translateY(38px);

    transition:
        opacity .9s ease,
        transform .9s ease;

    transition-delay:
        var(--reveal-delay, 0ms);

    will-change:
        opacity,
        transform;
}

.reveal.is-visible {
    opacity: 1;

    transform:
        translateY(0);
}


/* Entrada desde la izquierda */

.reveal-left {
    opacity: 0;

    transform:
        translateX(-42px);

    transition:
        opacity .9s ease,
        transform .9s ease;

    transition-delay:
        var(--reveal-delay, 0ms);
}

.reveal-left.is-visible {
    opacity: 1;

    transform:
        translateX(0);
}


/* Entrada desde la derecha */

.reveal-right {
    opacity: 0;

    transform:
        translateX(42px);

    transition:
        opacity .9s ease,
        transform .9s ease;

    transition-delay:
        var(--reveal-delay, 0ms);
}

.reveal-right.is-visible {
    opacity: 1;

    transform:
        translateX(0);
}


/* Entrada con escala */

.reveal-scale {
    opacity: 0;

    transform:
        scale(.94);

    transition:
        opacity .85s ease,
        transform .85s ease;

    transition-delay:
        var(--reveal-delay, 0ms);
}

.reveal-scale.is-visible {
    opacity: 1;

    transform:
        scale(1);
}


/* ==========================================
   ANIMACIÓN DE LA LÍNEA DEL TIEMPO
========================================== */

.timeline-item {
    transition:
        opacity .75s ease,
        transform .75s ease;
}

.timeline-marker {
    transition:
        background-color .45s ease,
        color .45s ease,
        border-color .45s ease,
        transform .45s ease,
        box-shadow .45s ease;
}

.timeline-card {
    transition:
        border-color .45s ease,
        box-shadow .45s ease,
        transform .45s ease,
        background-color .45s ease;
}


/* Marcador activo */

.timeline-item:hover .timeline-marker,
.timeline-item.is-active .timeline-marker {
    background:
        var(--gold);

    color:
        var(--white);

    border-color:
        var(--gold);

    transform:
        scale(1.08);

    box-shadow:
        0 10px 28px
        rgba(182, 138, 45, .28),

        0 0 0 8px
        rgba(212, 175, 55, .10);
}


/* Tarjeta activa */

.timeline-item:hover .timeline-card,
.timeline-item.is-active .timeline-card {
    border-color:
        rgba(182, 138, 45, .55);

    background-color:
        rgba(255, 255, 255, .92);

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 38px
        rgba(111, 78, 55, .12);
}


/* Año de la etapa activa */

.timeline-year {
    transition:
        color .4s ease,
        letter-spacing .4s ease;
}

.timeline-item.is-active
.timeline-year {
    color:
        var(--gold);

    letter-spacing:
        4px;
}


/* Ícono activo */

.timeline-marker i {
    transition:
        transform .45s ease;
}

.timeline-item.is-active
.timeline-marker i {
    transform:
        scale(1.08);
}


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

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

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale {
        opacity: 1;

        transform: none;

        transition: none;
    }

    .timeline-item,
    .timeline-marker,
    .timeline-card,
    .timeline-year,
    .timeline-marker i {
        transition: none;
    }
}