/* =====================================================
   GLOBAL THEME
===================================================== */

:root {

    /* ---------- Layout ---------- */

    --desktop-margin: 24px;
    --mobile-margin: 16px;

    --top-ui-height: 80px;
    /* --top-ui-height: var(--music-panel-width); */

    --popup-margin-x: 5vw;
    --popup-margin-bottom: 8vh;

    /* Popup starts below the music bar */
    --popup-top: calc(var(--top-ui-height) + 20px);

    /* ---------- Popup ---------- */

    --popup-radius: 16px;

    /* Placeholder values */
    --popup-opacity: 1;
    --popup-background: rgb(255, 254, 219);
    --popup-border-color: rgb(207, 161, 90);
    --popup-border-width: 4px;

    /* ---------- Icon ---------- */

    --arrow-icon-size: clamp(42px, 4.5vw, 47px);
    --menu-icon-height: clamp(40px, 4vw, 45px);
    --x-icon-size: clamp(35px, 5vw, 40px);

    /* ---------- Music ---------- */

    --music-width: 240px;
    --volume-width: 140px;

    /* ---------- Animation ---------- */

    --transition-fast: 0.20s;
    --transition-normal: 0.35s;
    --transition-slow: 0.50s;

    --ease: cubic-bezier(.22,.61,.36,1);

    /* ---------- Layer ---------- */

    --z-background: -100;

    --z-dropdown: 100;

    --z-popup: 200;

    --z-music: 150;

}

/* ===========================
   RESET
=========================== */

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

html,
body{

    width:100%;
    height:100%;
    overflow:hidden;

    font-family:sans-serif;
}

/* ===========================
   BACKGROUND
=========================== */

#background{

    position:fixed;

    inset:0;

    background-image:url("../asset/background.png");

    background-repeat:no-repeat;

    background-size:cover;

    background-position:bottom right;

    z-index:-100;

}

#background-grass {
    position: fixed;
    inset: 0;
    z-index: -90;
    pointer-events: none;

    background-image: url("../asset/grass.png");
    background-repeat: repeat-x;
    background-position: right bottom;
    background-size: auto 30vh;
}

#background-kita {
    position: fixed;
    inset: 0;
    z-index: -95;
    pointer-events: none;

    display: grid;
    place-items: end;
    overflow: hidden;

    padding-bottom: clamp(15px, 3vw, 4vh);
    box-sizing: border-box;
}

#background-kita img {
    display: block;
    width: min(100vw, 70vh);
    height: min(100vw, 70vh);
    aspect-ratio: 1 / 1;
    object-fit: contain;
    max-width: none;
}

/* ===============
   WELCOME TEXT
================= */

#welcome-layer {
    position: fixed;
    inset: 0;
    z-index: -96; 
    pointer-events: none; 
    display: flex;
    flex-direction: column;
    
    /* Gap dihapus karena flexbox tidak menerima gap negatif */
    
    /* Nilai vw dinaikkan sedikit agar mulus menuju 250px */
    padding-top: clamp(100px, 12vh, 120px);
    padding-left: clamp(70px, 20vw, 230px);
}

.welcome-sub {
    font-family: 'Raleway', sans-serif;
    font-style: italic;
    color: #ffffff;
    line-height: 1.4;
    
    /* Pengganti gap negatif: menarik judul agar lebih rapat ke atas */
    margin-bottom: 0px; 
    
    font-size: clamp(1rem, 3.5vw, 1.5rem);
}

/* --- WADAH UTAMA NAMA --- */
.welcome-title {
    display: flex;
    flex-direction: column;
    font-family: 'Dancing Script', cursive;
    color: #ffffff;
    font-weight: bold;
    font-size: clamp(3rem, 12vw, 6rem);
}

/* --- 1. NAMA PRIA --- */
.nama-pria {
    /* Turunkan ke 2vw agar tidak cepat menabrak 30px */
    padding-left: 0;
    margin-left: clamp(-60px, -2vw, 10px);
}

/* --- 2. SIMBOL & --- */
.simbol-dan {
    /* Turunkan ke 7vw agar mulus menuju 90px */
    padding-left: clamp(40px, 10vw, 90px);
    
    /* KUNCI: Turunkan ke -5vw agar margin bergerak seirama dengan font */
    margin-top: clamp(-15px, -2vw, 15px); 
    
    font-size: clamp(2.5rem, 9vw, 4.5rem); 
}

/* --- 3. NAMA WANITA --- */
.nama-wanita {
    /* Turunkan ke 11vw agar tidak cepat mentok di 140px */
    padding-left: 0;
    margin-left: clamp(-100px, 2vw, 50px);
    
    margin-top: clamp(-20px, -1vw, -5px);
}

/* ===========================
   CLOUD LAYER (AWAN BESAR POJOK KANAN BAWAH)
=========================== */

#cloud-layer {
    position: fixed;
    inset: 0;
    
    /* Berada di atas background dasar, di bawah elemen UI */
    z-index: -98; 
    
    /* Mencegah awan memblokir klik pada tombol/layar */
    pointer-events: none; 
    overflow: hidden; 
}

.cloud-corner {
    position: absolute;
    
    /* Ini kuncinya agar benar-benar menempel di pojok kanan bawah */
    bottom: 0;
    right: 0;
    
    /* Karena hanya 1 dan besar, angka clamp-nya kita buat lebih masif */
    /* clamp(Ukuran_Terkecil_HP, Ukuran_Dinamis, Ukuran_Terbesar_PC) */
    width: clamp(450px, 70vw, 1200px); 
    
    height: auto;
    object-fit: contain; /* Memastikan proporsi gambar tidak gepeng */
}

/* ===========================
   UI ROOT
=========================== */

#ui-layer{

    position:relative;

    width:100%;
    height:100%;

}

/* ===========================
   DROPDOWN PLACEHOLDER
=========================== */

#dropdown-container{

    position:absolute;

    top:var(--desktop-margin);
    left:var(--desktop-margin);

    z-index:100;

}

/* ===========================
   POPUP PLACEHOLDER
=========================== */

#popup-container{

    position:absolute;

    inset:0;

    z-index: var(--z-popup);

    pointer-events:none;
}

/* ===========================
   MUSIC PLACEHOLDER
=========================== */

#music-container{

    position:absolute;

    top:var(--desktop-margin);
    right:var(--desktop-margin);

    z-index:var(--z-music);

}

.hidden{
    display:none !important;
}

.no-pointer{
    pointer-events:none;
}

.fade{
    transition:opacity var(--transition-normal) var(--ease);
}

.scale{
    transition:transform var(--transition-normal) var(--ease);
}

/* ===========================
   EFEK GELAP (DIMMING)
=========================== */

#dropdown-container,
#music-container {
    transition: filter var(--transition-normal) var(--ease);
}

body.popup-active #dropdown-container,
body.popup-active #music-container {
    
    filter: brightness(70%) grayscale(10%);
    
}

/* ===========================
   COPYRIGHT TEXT
=========================== */
#copyright-text {
    position: absolute;
    bottom: clamp(10px, 2vh, 15px); /* Jarak dinamis dari bawah layar */
    width: 100%;
    text-align: center;
    
    font-family: 'Raleway', sans-serif; 
    font-size: clamp(0.75rem, 2vw, 0.9rem);
    letter-spacing: 0px;
    
    color: #ffffff; /* Warna putih agar kontras */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5); /* Bayangan gelap agar teks menonjol */
    
    z-index: 50; /* Berada di atas background tapi di bawah pop-up */
    pointer-events: none; /* Agar tidak menghalangi jika area bawah ditekan */
}