/* =========================================================
   ✨ VIDA FINAL — PORTADA
   Aislado: no modifica el resto del regalo
========================================================= */

body:has(.cover),
.cover {
    overflow-x: hidden;
}

/* ---------- CAPA AMBIENTAL ---------- */

.cover::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    z-index: 2;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(255,255,255,.24),
            transparent 28%
        ),
        radial-gradient(
            circle at 78% 72%,
            rgba(255,190,205,.16),
            transparent 30%
        );

    animation:
        coverAmbientLight
        12s
        ease-in-out
        infinite
        alternate;
}

@keyframes coverAmbientLight {

    from {
        opacity: .35;

        transform:
            scale(1)
            translate3d(0, 0, 0);
    }

    to {
        opacity: .8;

        transform:
            scale(1.12)
            translate3d(1.5%, -1%, 0);
    }
}


/* ---------- BRILLO QUE RECORRE LA PORTADA ---------- */

.cover .cover-content {
    position: relative;

    z-index: 4;
}

.cover .cover-content::before {
    content: "";

    position: absolute;

    top: -35%;
    left: -60%;

    width: 38%;
    height: 170%;

    pointer-events: none;

    opacity: .35;

    transform:
        rotate(18deg);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.26),
            transparent
        );

    animation:
        coverLightSweep
        11s
        ease-in-out
        infinite;
}

@keyframes coverLightSweep {

    0%,
    62% {
        left: -60%;
        opacity: 0;
    }

    70% {
        opacity: .35;
    }

    92% {
        left: 130%;
        opacity: .18;
    }

    100% {
        left: 130%;
        opacity: 0;
    }
}


/* ---------- TÍTULO ---------- */

.cover h1 {
    text-shadow:
        0 0 0 rgba(255,255,255,0);

    animation:
        coverTitleGlow
        5s
        ease-in-out
        infinite;
}

@keyframes coverTitleGlow {

    0%,
    100% {
        text-shadow:
            0 0 0 rgba(255,255,255,0);
    }

    50% {
        text-shadow:
            0 0 18px
            rgba(255,255,255,.38);
    }
}


/* ---------- PARTÍCULAS ---------- */

.cover-life-particle {
    position: absolute;

    width: var(--size);
    height: var(--size);

    border-radius: 50%;

    pointer-events: none;

    z-index: 3;

    opacity: 0;

    background:
        rgba(255,255,255,.9);

    box-shadow:
        0 0 8px
        rgba(255,255,255,.55);

    animation:
        coverParticleFloat
        var(--duration)
        ease-in-out
        infinite;

    animation-delay:
        var(--delay);
}

@keyframes coverParticleFloat {

    0% {
        opacity: 0;

        transform:
            translate3d(
                0,
                20px,
                0
            )
            scale(.5);
    }

    20% {
        opacity:
            var(--opacity);
    }

    75% {
        opacity:
            var(--opacity);
    }

    100% {
        opacity: 0;

        transform:
            translate3d(
                var(--drift),
                -120px,
                0
            )
            scale(1.15);
    }
}


/* ---------- PARALLAX ---------- */

.cover {
    --cover-x: 0px;
    --cover-y: 0px;
}

.cover .cover-content {
    transform:
        translate3d(
            var(--cover-x),
            var(--cover-y),
            0
        );

    transition:
        transform
        .6s
        cubic-bezier(.22,.61,.36,1);
}


/* ---------- ACCESIBILIDAD ---------- */

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

    .cover::after,
    .cover .cover-content::before,
    .cover h1,
    .cover-life-particle {
        animation:
            none !important;
    }

    .cover .cover-content {
        transition:
            none !important;
    }
}