/* =================================================================
   1. GLOBAL STYLES & VARIABLES
================================================================= */
:root {
    /* Colors */
    --color-dark-blue: #02111d;
    --color-neon-pink: #ff00ab;
    --color-soft-white: #f0f0f0;
    
    /* Outer Glow */
    --glow-initial: 
        drop-shadow(0 0 5px rgba(255, 0, 171, 0.3)) 
        drop-shadow(0 0 10px rgba(255, 0, 171, 0.15));
    --glow-active: 
        drop-shadow(0 0 10px rgba(255, 255, 255, 0.5))
        drop-shadow(0 0 20px rgba(255, 0, 171, 0.5))
        drop-shadow(0 0 40px rgba(138, 43, 226, 0.2));

    /* Fonts */
    --font-primary: 'Poppins', sans-serif;

    /* Transitions */
    --transition-smooth: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    --transition-bounce: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    cursor: none;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-dark-blue);
    color: var(--color-soft-white);
    overflow: hidden;
}

/* =================================================================
   2. HERO SECTION
================================================================= */

/* --- [REVISI] Kursor Animasi Sparkle --- */
.custom-cursor {
    position: fixed;
    width: 25px; /* Sedikit lebih besar */
    height: 25px;
    background-image: url('../images/sparkle-star.png'); /* Menggunakan gambar sparkle */
    background-size: contain;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 9999;
    transition: transform 0.1s ease-out;
    filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px var(--color-neon-pink));
}

.cursor-sparkle { /* Menggantikan smoke-particle */
    position: fixed;
    width: 20px;
    height: 20px;
    background-image: url('../images/sparkle-star.png');
    background-size: contain;
    pointer-events: none;
    z-index: 9998;
    animation: sparkle-burst 1s ease-out forwards;
}

@keyframes sparkle-burst { /* Animasi baru untuk sparkle */
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0) rotate(180deg) translateY(-20px);
    }
}


/* --- Sisa kode hero section --- */
.hero {
    min-height: 100vh;
    width: 100%;
    position: relative;
    padding: 0;
    overflow: hidden;
    display: grid; 
    grid-template-columns: 55% 45%; 
    align-items: center;
}
.hero__background {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/bg-image2.jpg');
    background-size: cover;
    background-position: center left; 
    z-index: 1;
}

.hero__smoke-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    mask-image: linear-gradient(to top, black 20%, transparent 100%);
}

.smoke-plume {
    position: absolute;
    bottom: -10%;
    opacity: 0;
    animation: drift-up 20s linear infinite;
}
.smoke-plume:nth-child(1) { left: 5%; width: 40%; animation-delay: 0s; animation-duration: 25s; }
.smoke-plume:nth-child(2) { left: 20%; width: 60%; animation-delay: 5s; animation-duration: 20s; }
.smoke-plume:nth-child(3) { left: 50%; width: 50%; animation-delay: 10s; animation-duration: 30s; }
.smoke-plume:nth-child(4) { left: 70%; width: 30%; animation-delay: 15s; animation-duration: 22s; }
@keyframes drift-up {
    0% { transform: translateY(0); opacity: 0; }
    20% { opacity: 0.15; }
    80% { opacity: 0.05; }
    100% { transform: translateY(-100vh); opacity: 0; }
}

.hero__sparkles {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.sparkle {
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url('../images/sparkle-star.png');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0;
    animation: twinkle 4s ease-in-out infinite;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.7));
}
@keyframes twinkle {
    0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
}

.sparkle:nth-child(1){top:30%;left:45%;animation-delay:0.2s;animation-duration:5s;transform:scale(0.8)}
.sparkle:nth-child(2){top:50%;left:70%;animation-delay:1.1s;animation-duration:4s;transform:scale(1.2)}
.sparkle:nth-child(3){top:65%;left:85%;animation-delay:2.3s;animation-duration:6s;transform:scale(0.6)}
.sparkle:nth-child(4){top:80%;left:60%;animation-delay:0.8s;animation-duration:3s;transform:scale(1.1)}
.sparkle:nth-child(5){top:20%;left:80%;animation-delay:3.5s;animation-duration:5.5s;transform:scale(0.9)}
.sparkle:nth-child(6){top:40%;left:30%;animation-delay:1.8s;animation-duration:4.5s}
.sparkle:nth-child(7){top:85%;left:25%;animation-delay:2.9s;animation-duration:7s;transform:scale(0.7)}
.sparkle:nth-child(8){top:15%;left:55%;animation-delay:0.5s;animation-duration:3.5s;transform:scale(1)}
.sparkle:nth-child(9){top:55%;left:20%;animation-delay:4.1s;animation-duration:6.5s;transform:scale(0.8)}
.sparkle:nth-child(10){top:75%;left:40%;animation-delay:1.5s;animation-duration:4s;transform:scale(1.1)}
.sparkle:nth-child(11){top:90%;left:75%;animation-delay:3.2s;animation-duration:5s;transform:scale(0.7)}
.sparkle:nth-child(12){top:25%;left:15%;animation-delay:4.5s;animation-duration:6s;transform:scale(0.9)}

/* --- Animasi Pembuka --- */
.hero__entry-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to right, transparent 0%, rgba(255,255,255,0.3) 50%, transparent 100%);
    z-index: 10;
    animation: light-sweep 2s cubic-bezier(0.7, 0, 0.3, 1) forwards 0.5s;
}
@keyframes light-sweep {
    0% { transform: translateX(-100%) skewX(-20deg); opacity: 1; }
    100% { transform: translateX(200%) skewX(-20deg); opacity: 0; }
}
.animate-on-load {
    opacity: 0;
    animation-fill-mode: forwards;
}
.hero__title.animate-on-load.delay-1 {
    animation: zoom-in-fade 1.8s cubic-bezier(0.25, 1, 0.5, 1) 1.5s forwards,
               neon-pulse 8s ease-in-out infinite 3.3s;
}
.animate-on-load.delay-2 { animation: fade-in-up 1.5s ease-out 1.8s forwards; }
.animate-on-load.delay-3 { animation: fade-in-up 1.5s ease-out 2.0s forwards; }
@keyframes zoom-in-fade {
    0% { opacity: 0; transform: scale(0.8); filter: var(--glow-initial); }
    100% { opacity: 1; transform: scale(1); filter: var(--glow-initial); }
}
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Styling Konten Hero --- */
.hero__logo {
    position: absolute;
    bottom: 40px;
    left: 40px;
    width: 120px;
    z-index: 5;
}
.hero__content {
    grid-column: 2 / 3;
    z-index: 4;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-right: 5%;
    width: 100%;
    max-width: 650px;
}
.hero__title {
    width: 100%;
    max-width: 480px;
    height: auto;
    filter: var(--glow-initial); 
    animation: neon-pulse 8s ease-in-out infinite;
}
@keyframes neon-pulse {
    0%, 100% { filter: var(--glow-initial); }
    50% { filter: var(--glow-active); }
}
.hero__presave {
    margin-top: 50px;
    text-align: center;
}
.hero__presave-label {
    font-weight: 700;
    letter-spacing: 3px;
    font-size: 1.2rem;
}
.hero__platforms {
    margin-top: 15px;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.hero__platform-link {
    color: var(--color-soft-white);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.0rem;
    position: relative;
    padding: 10px;
    transition: color 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    z-index: 1;
}
.hero__platform-link::before { 
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    background: var(--color-neon-pink);
    border-radius: 50px;
    transform: translate(-50%, -50%) scale(0);
    transition: var(--transition-bounce);
    z-index: -1;
}
.hero__platform-link:hover::before {
    transform: translate(-50%, -50%) scale(1.1);
}
.hero__platform-link:hover {
    color: var(--color-dark-blue); 
}
.hero__platform-link > * { 
    transition: var(--transition-smooth);
}
.hero__platform-link:hover > * {
    transform: scale(1.1);
}
.hero__platform-link .fab,
.hero__platform-link svg {
    font-size: 2.5rem;
    width: 2.5rem;
    height: 2.5rem;
}
.hero__platform-link .platform-text {
    line-height: 1.2;
    font-weight: 400;
}

/* =================================================================
   5. MEDIA QUERIES (RESPONSIVE DESIGN)
================================================================= */

/* ---- DESKTOP BESAR (1441px ke atas) ---- */
@media (min-width: 1441px) {
    html {
        font-size: clamp(16px, 1.1vw, 20px);
    }
    .hero__logo {
        width: clamp(120px, 8vw, 180px);
    }
    .hero__content {
        max-width: clamp(650px, 40vw, 800px);
    }
}

/* ---- TABLET (1024px ke bawah) ---- */
@media (max-width: 1024px) {
    .hero {
        grid-template-columns: 1fr;
        padding: 0 5%;
        align-content: center;
        justify-items: center;
    }
    .hero__background {
        background-position: center center;
    }
    .hero__content {
        grid-column: 1 / 2;
        align-items: center;
        text-align: center;
        padding-right: 0;
        max-width: 500px;
    }
    .hero__presave {
        align-items: center;
        text-align: center;
    }
    .hero__platforms {
        justify-content: center;
    }
}

/* ---- MOBILE (767px ke bawah) ---- */
@media (max-width: 767px) {
    * {
        cursor: auto;
    }
    .custom-cursor {
        display: none;
    }

    html {
        font-size: 16px;
    }

    body {
        overflow: auto;
    }

    .hero {
        display: block;
        height: 100vh;
        min-height: 600px;
        background-image: url('../images/bg-image2-mobile2.jpg');
        background-size: cover;
        background-position: center top;
        position: relative;
    }

    .hero__background, .hero__entry-overlay {
        display: none;
    }
    
    .hero__smoke-overlay, .hero__sparkles {
        display: block;
    }

    .sparkle {
        width: 15px;
        height: 15px;
    }
    .sparkle:nth-child(1){top:25%;left:15%}
    .sparkle:nth-child(2){top:40%;left:80%}
    .sparkle:nth-child(3){top:55%;left:10%}
    .sparkle:nth-child(4){top:70%;left:90%}
    .sparkle:nth-child(5){top:10%;left:40%}
    .sparkle:nth-child(6){top:30%;left:50%}
    .sparkle:nth-child(7){top:85%;left:25%}
    .sparkle:nth-child(8){top:15%;left:5%}
    .sparkle:nth-child(9){top:50%;left:60%}
    .sparkle:nth-child(10){top:75%;left:15%}
    .sparkle:nth-child(11){top:90%;left:70%}
    .sparkle:nth-child(12){top:20%;left:95%}

    .hero__content, .hero__logo {
        position: absolute;
        transform: none;
        margin: 0;
        padding: 0;
        grid-column: auto;
        grid-row: auto;
    }

    .hero__title {
        top: 12vh;
        right: 8vw;
        width: 40vw;
        max-width: 250px;
        margin-top: 20%;
        margin-left: 40%;
        animation: neon-pulse 8s ease-in-out infinite;
    }
    
    .hero__logo {
        top: 55vh;
        left: 8vw;
        bottom: auto;
        width: 24vw;
        max-width: 110px;
    }
    
    .hero__content {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        pointer-events: none;
    }

    .hero__presave {
        position: absolute;
        bottom: 18vh;
        transform: translateX(-50%);
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 0;
        pointer-events: auto;
    }
    
    .hero__presave-overlay {
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
        z-index: 5;
        pointer-events: none;
    }
    
    .hero__platforms {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
        width: 100%;
    }
    
    .hero__platform-link {
        flex-direction: column;
        gap: 5px;
        padding: 5px;
    }

    .hero__platform-link .platform-text {
        font-size: 0.6rem;
        line-height: 1.1;
        font-weight: 700;
    }
    
    .hero__platform-link .fab,
    .hero__platform-link svg {
        font-size: 1.8rem;
        width: 1.8rem;
        height: 1.8rem;
    }
    
    .animate-on-load {
        animation: fade-in-simple 1.5s ease-out 0.5s forwards;
    }
    .hero__title.animate-on-load.delay-1 {
        animation: zoom-in-simple 1.5s ease-out 0.8s forwards,
                   neon-pulse 8s ease-in-out infinite 2.3s;
    }
    @keyframes fade-in-simple {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    @keyframes zoom-in-simple {
        from { opacity: 0; transform: scale(0.8); }
        to { opacity: 1; transform: scale(1); }
    }
}