/* ======================================
   HERO
====================================== */

.hero{
    position:relative;
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:flex-start;

    overflow:hidden;

    padding:300px 20px 80px;

    background:#f8e8ec;
}

.hero-card{
    margin-top:100px;
    max-width:700px;
    width:100%;
    background:rgba(255,255,255,.65);
    backdrop-filter:blur(10px);
    border-radius:32px;
    padding:40px 30px;
    text-align:center;
    box-shadow:
        0 15px 40px rgba(0,0,0,.08);
    position:relative;
    z-index:2;
}

.cross{
    font-size:2rem;
    color:#d88ea6;
    margin-bottom:20px;
}

.hero-image{
    position:relative;
    width:360px;
    height:360px;
    margin:0 auto 30px;
}

.hero-photo{
    position: absolute;
    top: 52%;
    left: 49%;
    width: 253px;
    height: 250px;
    object-fit: cover;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.photo-frame{
    position:absolute;
    top:50%;
    left:50%;

    width:360px;
    height:360px;

    transform:translate(-50%,-50%);
    margin-top:6px;
    margin-left:2px;

    z-index:3;
}

.event-type{
    color:#b77b92;
    font-size:1.1rem;
    margin-bottom:10px;
}

.hero h1{
    font-family:'Great Vibes', cursive;
    font-size:5rem;
    color:#c97f99;
    font-weight:400;
    line-height:1;
}

.hero h2{
    margin-top:12px;
    font-family:'Great Vibes', cursive;
    font-size:2.8rem;
    font-weight:400;
    color:#8a6673;
    letter-spacing:0;
}

.event-date{
    margin-top:25px;
    font-size:1.2rem;
    color:#9f6d80;
}

.hero-message{
    margin-top:25px;
    line-height:1.8;
    font-size:1.05rem;
}

.hero-actions{
    margin-top:30px;
    display:flex;
    gap:15px;
    justify-content:center;
    flex-wrap:wrap;
}

.btn-primary,
.btn-secondary,
button{
    padding:14px 24px;
    border-radius:999px;
    text-decoration:none;
    cursor:pointer;
    transition:.3s;
    font-family:'Playfair Display', serif;
}

.btn-primary,
button{
    border:none;
    background:#d88ea6;
    color:white;
}

.btn-primary:hover,
button:hover{
    transform:translateY(-2px);
}

.btn-secondary{
    border:2px solid #d88ea6;
    color:#d88ea6;
}

.scroll-indicator{
    position:absolute;
    bottom:25px;
    font-size:2rem;
    color:#c97f99;
    animation:bounce 2s infinite;
}

@keyframes bounce{
    0%,20%,50%,80%,100%{
        transform:translateY(0);
    }
    40%{
        transform:translateY(-10px);
    }
    60%{
        transform:translateY(-5px);
    }
}

/* ======================================
   DECORATIVE ELEMENTS
====================================== */

.papel-picado-bg{
    position:absolute;
    top:-95px;
    left:0;

    width:100%;
    height:460px;

    background-image:url("../../assets/hero/papel-picado-top.webp");
    background-repeat:repeat-x;
    background-position:center -10px;

    background-size:100% auto;

    z-index:1;
    pointer-events:none;
}

.papel-picado-top{
    width:100%;
    margin:-40px 0 25px 0;
}

.papel-picado-top img{
    width:100%;
    display:block;
}

.flowers-left,
.flowers-right{
    position:absolute;
    bottom:80px;
    width:1100px;
    height:1200px;

    background-image:url("../../assets/hero/floral-corner.webp");
    background-repeat:no-repeat;
    background-size:contain;
    background-position:bottom center;

    z-index:1;
    pointer-events:none;
}

.flowers-left{
    left:-280px;
}

.flowers-right{
    right:-280px;
    transform:scaleX(-1);
}

.hero-scroll-hint{

    margin-top:32px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;
}

.hero-scroll-hint span{

    font-size:.9rem;

    letter-spacing:.08em;

    color:#b57d97;

    text-transform:uppercase;
}

.hero-scroll-arrow{

    font-size:1.5rem;

    color:#d18ba8;

    animation:heroBounce 2s infinite;
}

@keyframes heroBounce{

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

    40%{
        transform:translateY(8px);
    }

    60%{
        transform:translateY(4px);
    }
}

.section-divider--hero{

    margin-top:20px;

    animation:heroFloat 3s ease-in-out infinite;
}

@keyframes heroFloat{

    0%{
        transform:translateY(0);
    }

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

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