/*=========================================================
    FASE 2 · ACABADO PREMIUM
    Sombras, textura, profundidad y microinteracciones.
=========================================================*/

:root{
    --premium-ease:cubic-bezier(.22,.72,.24,1);
    --premium-shadow-sm:0 10px 28px rgba(66,42,35,.08);
    --premium-shadow-md:0 24px 55px rgba(66,42,35,.13);
    --premium-shadow-lg:0 38px 85px rgba(54,31,27,.18);
    --premium-border:rgba(141,116,101,.18);
}

/* Textura de papel muy discreta en toda la página */
body{
    background:var(--crema);
}


/* Separaciones editoriales suaves entre secciones */
main > section{
    isolation:isolate;
}

main > section::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:min(720px,72vw);
    height:1px;
    transform:translateX(-50%);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(142,148,156,.25),
        transparent
    );
    pointer-events:none;
}

main > section:last-of-type::after{
    display:none;
}

/* Encabezados: entrada más elegante */
.section-header,
.story-content,
.countdown-container,
.program-container{
    transition:
        opacity .9s var(--premium-ease),
        transform .9s var(--premium-ease);
}

.premium-reveal{
    opacity:0;
    transform:translateY(24px);
}

.premium-reveal.is-premium-visible{
    opacity:1;
    transform:none;
}

/* Botones con brillo contenido */
.button{
    position:relative;
    overflow:hidden;
    box-shadow:0 8px 22px rgba(106,36,52,.08);
    transition:
        transform .36s var(--premium-ease),
        background .36s ease,
        color .36s ease,
        border-color .36s ease,
        box-shadow .36s ease;
}

.button::after{
    content:"";
    position:absolute;
    top:-80%;
    left:-45%;
    width:28%;
    height:260%;
    transform:rotate(18deg);
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.34),
        transparent
    );
    transition:left .72s var(--premium-ease);
}

.button:hover::after{
    left:125%;
}

.button:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 38px rgba(106,36,52,.18);
}

/* Tarjetas y bloques: borde fino y profundidad */
.location-card,
.dress-card,
.gifts-card,
.rsvp-content,
.gallery-upload{
    border:1px solid var(--premium-border);
    box-shadow:var(--premium-shadow-sm);
    transition:
        transform .55s var(--premium-ease),
        box-shadow .55s var(--premium-ease),
        border-color .55s ease;
}

.location-card:hover,
.dress-card:hover,
.gifts-card:hover,
.gallery-upload:hover{
    transform:translateY(-7px);
    box-shadow:var(--premium-shadow-md);
    border-color:rgba(106,36,52,.17);
}

/* Fotografías: zoom lento y sombra natural */
.story-image-wrapper,
.location-image-wrapper,
.gallery-item{
    overflow:hidden;
    box-shadow:var(--premium-shadow-md);
}

.story-image,
.location-image,
.gallery-item img{
    transition:
        transform 1.15s var(--premium-ease),
        filter .8s ease;
    will-change:transform;
}

.story-image-wrapper:hover .story-image,
.location-image-wrapper:hover .location-image,
.gallery-item:hover img{
    transform:scale(1.035);
    filter:saturate(.96) contrast(1.015);
}

/* Galería: elevación desigual, más editorial */
.gallery-item{
    transition:
        transform .55s var(--premium-ease),
        box-shadow .55s var(--premium-ease);
}

.gallery-item:hover{
    transform:translateY(-8px);
    box-shadow:var(--premium-shadow-lg);
}

/* Iconos y escudo: vida casi imperceptible */
.brand-icon,
.footer-crest,
.gallery-tulip{
    transition:
        transform .5s var(--premium-ease),
        filter .5s ease;
}

.dress-card:hover .brand-icon,
.gifts-card:hover .brand-icon,
.rsvp-content:hover .brand-icon,
.gallery-upload:hover .gallery-tulip{
    transform:translateY(-3px) scale(1.025);
    filter:drop-shadow(0 9px 14px rgba(106,36,52,.11));
}

/* Divisores con aparición suave */
.divider,
.story-divider,
.program-divider,
.countdown-divider{
    transform-origin:center;
    transition:
        transform .9s var(--premium-ease),
        opacity .9s ease;
}

.premium-reveal:not(.is-premium-visible) .divider,
.premium-reveal:not(.is-premium-visible) .story-divider,
.premium-reveal:not(.is-premium-visible) .program-divider,
.premium-reveal:not(.is-premium-visible) .countdown-divider{
    transform:scaleX(.25);
    opacity:.2;
}

/* Footer más ceremonial */
.footer{
    position:relative;
    overflow:hidden;
}

.footer::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 50% 0,rgba(255,255,255,.08),transparent 42%);
}

.footer-crest{
    animation:premiumCrestFloat 7s ease-in-out infinite;
}

/* Preferencias de accesibilidad */
@media (prefers-reduced-motion:reduce){
    .premium-reveal{
        opacity:1;
        transform:none;
    }

    .button::after,
    .intro__envelope::after{
        display:none;
    }
}

@media (max-width:700px){
    .location-card:hover,
    .dress-card:hover,
    .gifts-card:hover,
    .gallery-upload:hover,
    .gallery-item:hover{
        transform:none;
    }

    body::before{
        opacity:.11;
    }
}

@keyframes premiumCrestFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-4px)}
}

/* =========================================================
   TEXTURAS PREMIUM
   Papel de algodón + grano fotográfico
========================================================= */

/* Fondo base marfil */
body{
    background:#f7f2e9;
}

/* Textura de papel en todo el contenido principal */
main{
    position:relative;
    isolation:isolate;
    background:var(--crema);
}

main::before{
    content:"";
    position:absolute;
    inset:0;

    z-index:0;
    pointer-events:none;

    background:
        url("../assets/brand/textures/paper-cotton-textured.webp")
        center top / 850px repeat;

    opacity:.45;

    mix-blend-mode:multiply;
}

/* Mantiene el contenido por encima de la textura */
main > *{
    position:relative;
    z-index:1;
}

/* Grano fotográfico muy sutil en el Hero */
.hero-v2::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    pointer-events:none;

    opacity:.03;

    background:
        url("../assets/brand/textures/hero-grain.webp")
        center / 600px repeat;

    mix-blend-mode:overlay;
}

/* El overlay, el contenido y la flecha quedan encima */
.hero-v2__overlay{
    z-index:2;
}

.hero-v2__content{
    z-index:3;
}

.hero-v2__scroll{
    z-index:20;
}

/* Difuminado inferior del Hero */
.hero-v2::after{
    z-index:4;
}

/* Ajuste para móvil */
@media (max-width:700px){

    main::before{
        opacity:.11;
        background-size:560px;
    }

    .hero-v2::before{
        opacity:.022;
        background-size:480px;
    }
}