/* ============================================================
   HOME.CSS — SIXMOREVODKA / POLAR ENGINE EDITION
   ============================================================ */
:root{
    --accent: #00aaff;
    --accent-strong: #0A84FF;
    --bg: #050507;
}

body { 
    background: var(--bg); 
    color: #fff;
}


/* ============================================================
   HERO VIDEO SECTION
   ============================================================ */
.hero-container{
    position: relative;
    height: 100vh;
    overflow: hidden;
}

/* video wrapper */
.hero-video-wrapper{
    position:absolute; inset:0; z-index:0; overflow:hidden;
}
.hero-video-wrapper video{
    width:100%; height:100%; object-fit:cover;
    transform: scale(1);
    transition: transform 0.2s linear;
}

/* overlay */
.video-overlay{
    position:absolute; inset:0;
    background:linear-gradient(
        180deg, 
        rgba(0,0,0,0.25), 
        rgba(0,0,0,0.65)
    );
    z-index:1;
}

/* hero content */
.hero-inner{ 
    position:relative; z-index:5;
    height:100%; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
    flex-direction:column; 
    text-align:center; 
    pointer-events:none;
}

/* ============================================================
   POLAR ENGINE — SMV STYLE TITLE
   ============================================================ */
.hero-title{
    font-family: 'Inter', 'Bebas Neue', 'Anton', sans-serif;
    font-size: 8vw;
    font-weight: 900;          
    letter-spacing: 12px;
    margin: 0;
    text-transform: uppercase;

    color: var(--accent-strong);

    text-shadow:
        0 0 10px rgba(0,140,255,0.8),
        0 0 25px rgba(0,140,255,0.6),
        0 0 45px rgba(0,140,255,0.35);

    transition: 0.3s ease-out;
}

/* Saat scroll mengecil — ala SMV */
body.scrolled .hero-title{
    font-size: 6vw;
    letter-spacing: 9px;
    opacity: 0.85;
}

/* sub text */
.hero-sub{ 
    margin-top:12px; 
    font-size:1.2rem; 
    opacity:.85; 
    letter-spacing: 2px;
}


/* ============================================================
   SMV LIGHT SHAPES
   ============================================================ */
.hero-shape{
    position:absolute; 
    width:420px; height:420px; 
    border-radius:50%; 
    filter: blur(70px); 
    opacity:.12; 
    z-index:2; 
}

.hero-shape-1{
    background: linear-gradient(90deg,var(--accent),#6b00ff);
    top:-80px; left:-80px;
}
.hero-shape-2{
    background: linear-gradient(90deg,#6b00ff,var(--accent));
    bottom:-120px; right:-80px;
}


/* ============================================================
   WORK SECTION
   ============================================================ */
.work-section{
    padding:120px 0; 
    background:#060608;
}

.section-title{
    font-family:'Anton';
    font-size:48px; 
    letter-spacing:3px;
    margin-bottom: 40px;
}

.work-grid{
    display:grid; 
    grid-template-columns: repeat(3,1fr); 
    gap:28px; 
}

.work-card{
    position:relative; 
    overflow:hidden; 
    border-radius:12px; 
    display:block; 
}

.work-card img{
    width:100%; 
    height:360px; 
    object-fit:cover; 
    transform-origin:center; 
    filter:brightness(.8); 
    transition: 
        transform .6s ease, 
        filter .4s ease;
}

.card-overlay{
    position:absolute; inset:0; 
    background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.45)); 
    pointer-events:none;
}

/* hover */
.work-card:hover img{
    transform: scale(1.12); 
    filter:brightness(1.05);
}
.work-card:hover .card-overlay{
    background:linear-gradient(
        180deg, 
        rgba(0,0,0,0), 
        rgba(0,170,255,0.08)
    );
}

/* ============================================================
   STUDIO SECTION
   ============================================================ */
.studio-section{
    padding:120px 0; 
    background:#050507; 
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:992px){
    .hero-title{ font-size:14vw; letter-spacing:6px; }
    body.scrolled .hero-title{ font-size: 10vw; }

    .work-grid{ grid-template-columns: 1fr; }
    .hero-shape{ display:none; }
}
 
/* FORCE POLAR ENGINE TITLE — MATCH EXACT BLADE STRUCTURE */
.hero-container {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.hero-title {
    position: absolute;
    top: 40%; /* posisi ideal, bisa naik/turun */
    left: 50%;
    transform: translate(-50%, -50%);

    z-index: 5;
    font-family: 'Anton', sans-serif !important;
    font-size: 10vw !important;
    letter-spacing: 8px !important;
    font-weight: 900 !important;

    color: #0094ff !important;
    text-shadow:
        0 0 10px rgba(0, 140, 255, 0.85),
        0 0 25px rgba(0, 140, 255, 0.75),
        0 0 45px rgba(0, 140, 255, 0.55),
        0 0 70px rgba(0, 140, 255, 0.4) !important;
}