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

.hero{

    position:relative;

    width:100%;
    height:100vh;

    overflow:hidden;

    background:#000;

}

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

.hero-grid{

    transition:.35s ease;

    position:absolute;

    top:var(--header-height);
    left:0;
    right:0;
    bottom:0;

    overflow:hidden;

    z-index:1;

    cursor:pointer;


}

.hero-grid.hide{

    opacity:0;

    visibility:hidden;

}

.hero-grid img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    animation:heroZoom 22s ease-in-out infinite alternate;

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.05);

    }

}

/* ---------- Dark Overlay ---------- */

.hero::before{

    content:"";

    position:absolute;

    pointer-events:none;

    inset:0;

    background:
        linear-gradient(
            rgba(0,0,0,.22),
            rgba(0,0,0,.22)
        ),
        linear-gradient(
            to bottom,
            transparent 75%,
            rgba(0,0,0,.95) 100%
        );

    z-index:2;

}

.hero::before{

    transition:.35s ease;

}

.hero.playing::before{

    opacity:0;

}

/* ---------- Hero Content ---------- */

.hero-content{

    position:absolute;

    top:var(--header-height);
    left:0;
    right:0;
    bottom:0;

    display:flex;
    flex-direction:column;

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

    gap:35px;

    z-index:3;

    pointer-events:none;

    transition:.35s ease;

}

.hero-content.hide{

    opacity:0;

    transform:scale(.96);

    filter:blur(8px);

}

/* ---------- SHOWREEL ---------- */

.showreel-title{

    font-size:clamp(80px,10vw,170px);

    font-weight:900;

    letter-spacing:4px;

    user-select:none;

    pointer-events:none;

    line-height:1;

}

/* ---------- Play Button ---------- */

.play-button{

    pointer-events:auto;
    position:absolute;

    width:110px;
    height:110px;

    padding:0;

    border:none;

    background:transparent;

    border-radius:50%;

    transition:var(--transition);

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

}

.play-button{
    display:flex;
    justify-content:center;
    align-items:center;
}

.play-button img{

    width:100%;
    height:100%;

    display:block;

    object-fit:contain;

    user-select:none;

    pointer-events:none;

}




/* Hover */

.play-button:hover{

    transform:scale(1.08);



}

/* Pulse Animation */

.play-button{

    
    animation:pulse 2s infinite;

}

@keyframes pulse{

    0%{

        transform:scale(1);
        box-shadow:0 0 0 0 rgba(123,44,245,.7);

    }

    70%{

        transform:scale(1.08);
        box-shadow:0 0 0 30px rgba(123,44,245,0);

    }

    100%{

        transform:scale(1);
        box-shadow:0 0 0 0 rgba(123,44,245,0);

    }

}
/* ===========================
   HERO SHOWREEL
=========================== */

.hero-showreel{

    position:absolute;

    inset:0;

    top:var(--header-height);

    background:#000;

    display:flex;

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

    opacity:0;
    visibility:hidden;

    transition:.4s ease;

    z-index:5;

}

.hero-showreel.active{

    opacity:1;
    visibility:visible;

}

.hero-showreel video{

    width:100%;
    height:100%;

    object-fit:cover;

}

.hero-close{

    position:absolute;

    top:25px;
    right:30px;

    width:48px;
    height:48px;

    border:none;

    border-radius:50%;

    background:rgba(0,0,0,.55);

    color:#fff;

    font-size:24px;

    cursor:pointer;

    z-index:10;

    transition:.3s;

}

.hero-close:hover{

    transform:rotate(90deg);

    background:rgba(0,0,0,.8);

}
/* ===========================
   WHATSAPP BUTTON
=========================== */

.whatsapp-btn{

    position:fixed;

    right:30px;
    bottom:30px;

    width:62px;
    height:62px;

    border-radius:50%;

    background:#25D366;

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

    box-shadow:0 12px 30px rgba(0,0,0,.35);

    transition:.3s;

    z-index:999;

}

.whatsapp-btn img{

    width:32px;
    height:32px;

}

.whatsapp-btn:hover{

    transform:translateY(-5px) scale(1.08);

}

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

.hero-loader{

    position:absolute;

    inset:0;

    display:flex;

    flex-direction:column;

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

    gap:18px;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.3s ease;

    z-index:20;

}

.hero-loader.active{

    opacity:1;

    visibility:visible;

}

.loader-ring{

    width:58px;
    height:58px;

    border:3px solid rgba(255,255,255,.15);

    border-top-color:var(--primary-color);

    border-radius:50%;

    animation:loaderSpin .8s linear infinite;

}

.hero-loader span{

    color:#fff;

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

}

@keyframes loaderSpin{

    to{

        transform:rotate(360deg);

    }

}