/* ==========================================
   Sara XV Luxury Signature Edition V4
   Archivo 3: hero-cinematic.css
   ========================================== */

/* ==========================================
   HERO CINEMATOGRÁFICO
   ========================================== */

.hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    isolation:isolate;
}

/* Fondo principal */

.hero-bg{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            rgba(20,8,10,.28),
            rgba(20,8,10,.45)
        ),
        url('../assets/images/hero-placeholder.svg')
        center center / cover no-repeat;

    animation:kenBurns 24s ease-in-out infinite alternate;
    transform-origin:center center;
    z-index:1;
}

@keyframes kenBurns{

    from{
        transform:scale(1.08);
    }

    to{
        transform:scale(1.18);
    }

}

/* Iluminación editorial */

.hero::before{
    content:"";
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(255,235,190,.18),
            transparent 35%
        ),
        radial-gradient(
            circle at 82% 28%,
            rgba(200,162,74,.12),
            transparent 40%
        ),
        radial-gradient(
            circle at center,
            transparent 35%,
            rgba(0,0,0,.28) 100%
        );

    z-index:2;
}

/* Overlay suave */

.hero-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.02),
            rgba(0,0,0,.10),
            rgba(0,0,0,.22)
        );

    z-index:3;
}

/* Contenido */

.hero-content{
    position:relative;
    z-index:5;

    background:
        linear-gradient(
            rgba(255,255,255,.14),
            rgba(255,255,255,.08)
        );

    backdrop-filter:blur(16px);

    border:1px solid rgba(255,255,255,.18);

    border-radius:36px;

    box-shadow:
        0 35px 90px rgba(0,0,0,.25);

    overflow:hidden;
}

/* Marco dorado */

.hero-content::before{
    content:"";
    position:absolute;
    inset:16px;

    border:1px solid rgba(200,162,74,.45);

    border-radius:26px;

    pointer-events:none;
}

/* Monograma */

.hero-content::after{
    content:"S";
    position:absolute;

    top:24px;
    right:28px;

    width:62px;
    height:62px;

    border:1px solid rgba(200,162,74,.45);

    border-radius:50%;

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

    font-family:'Italianno', cursive;
    font-size:2rem;

    color:#E8D08A;

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

    box-shadow:
        0 0 20px rgba(200,162,74,.18);
}

/* Rosas decorativas */

.hero .rose-top-left,
.hero .rose-top-right,
.hero .rose-bottom-left,
.hero .rose-bottom-right{
    position:absolute;
    width:220px;
    opacity:.9;
    z-index:4;
    pointer-events:none;
    filter:
        drop-shadow(0 18px 30px rgba(0,0,0,.12));
}

.hero .rose-top-left{
    top:-30px;
    left:-30px;
}

.hero .rose-top-right{
    top:-30px;
    right:-30px;
    transform:scaleX(-1);
}

.hero .rose-bottom-left{
    bottom:-40px;
    left:-30px;
    transform:scaleY(-1);
}

.hero .rose-bottom-right{
    bottom:-40px;
    right:-30px;
    transform:scale(-1);
}

/* Animación de entrada */

.hero-content{
    opacity:0;
    transform:translateY(35px) scale(.98);
    animation:heroReveal 1.8s ease forwards;
    animation-delay:.6s;
}

@keyframes heroReveal{

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

}

/* Brillo dorado */

.hero-divider{
    position:relative;
}

.hero-divider::after{
    content:"";
    position:absolute;
    inset:-2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(232,208,138,.45),
            transparent
        );

    filter:blur(6px);
    opacity:.8;
}

/* Botones */

.hero-buttons{
    position:relative;
    z-index:6;
}

.btn-primary{
    position:relative;
    overflow:hidden;
}

.btn-primary::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:120%;
    height:100%;

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

    transition:left .8s ease;
}

.btn-primary:hover::before{
    left:120%;
}

/* Responsive */

@media(max-width:768px){

    .hero-content{
        border-radius:28px;
    }

    .hero-content::before{
        inset:12px;
        border-radius:18px;
    }

    .hero-content::after{
        width:52px;
        height:52px;
        font-size:1.7rem;
        top:18px;
        right:18px;
    }

    .hero .rose-top-left,
    .hero .rose-top-right,
    .hero .rose-bottom-left,
    .hero .rose-bottom-right{
        width:150px;
    }

}