/* src/css/welcome.css - SHUTTER GATE: ROMANTIC PINK EDITION */

.welcome {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 500px;
    height: 100vh;
        /* Fallback untuk browser lama */
        height: 100dvh;
        /* SOLUSI: Menggunakan Dynamic Viewport Height */
        /* height: 100svh; <--- Gunakan ini jika ingin tampilan 'stabil' (Smallest Viewport) */
        min-height: -webkit-fill-available;
        /* Fix tambahan untuk Safari iOS */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    
    /* Background dasar Pink */
    background-color: var(--main-bg-color); 
    
    overflow: hidden;
    transition: opacity 0.5s ease;
}

.shutter-container {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
}

/* PANEL SHUTTER (70:30) */
.shutter-panel {
    position: relative;
    height: 100%;
    transition: transform 1.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: 2;
    overflow: hidden;
}

.shutter-panel.left { 
    width: 70%; 
    /* Background image tetap */
}

.shutter-panel.right { 
    width: 30%; 
    
    /* --- THEME CHANGE: UBAH KE PINK --- */
    /* Sebelumnya Merah Gelap, sekarang kita ubah ke Pink (Main BG) */
    /* Agar serasi dengan halaman dalam */
    background-image: url('../assets/images/bg-welcome-kiri.webp');
    
    /* Agar gambar memenuhi seluruh area panel kanan dari atas ke bawah */
    background-size: cover; 
    background-position: center;
    background-repeat: no-repeat;
    
    /* Garis pemisah Merah Pudar */
    border-left: 2px solid var(--button-primary-bg);
    
    /* Shadow agar panel kanan terlihat menumpuk di atas kiri */
    box-shadow: -5px 0 20px rgba(0,0,0,0.1);
}

/* Efek Membelah */
.welcome.swiped .shutter-panel.left { transform: translateX(-101%); }
.welcome.swiped .shutter-panel.right { transform: translateX(101%); }

/* Sembunyikan konten saat swipe */
.welcome.swiped .main-titles-v7,
.welcome.swiped .guest-glass-box,
.welcome.swiped .bottom-right-action-v7 {
    opacity: 0 !important;
    transition: opacity 0.3s ease;
}

.welcome-bg-image {
    width: 150%;
    height: 100%;
    background-size: cover;
    background-position: center;
    position: absolute;
    filter: brightness(0.7); /* Foto digelapkan sedikit */
    animation: passiveZoom 20s infinite alternate linear;
}

@keyframes passiveZoom {
    from { transform: scale(1); }
    to { transform: scale(1.1); }
}

/* TENGAH KANAN: JUDUL (POSISI DI ATAS PANEL PINK) */
.main-titles-v7 {
    position: absolute;
    top: 45%;
    right: 5%; /* Posisi di panel kanan */
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    z-index: 10;
    opacity: 0; 
}

.wedding-label-v7-vertical {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 1rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 600;
    
    /* --- THEME CHANGE: TEXT --- */
    /* Karena background panel sekarang Pink, Teks jadi Merah */
    color: var(--heading-text-color); 
    
    opacity: 0.9;
    border-left: 1px solid var(--heading-text-color); 
    
    padding-left: 5px;
}

.bride-name-v7 {
    font-family: var(--sacramento);
    font-size: 3.5rem;
    
    /* --- THEME CHANGE: TEXT --- */
    /* Nama Pengantin jadi Merah Carmine */
    color: var(--heading-text-color); 
    
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    line-height: 1;
    
    /* Shadow halus pink/putih agar pop-up */
    text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.5);
}

/* KIRI BAWAH: NAMA TAMU (DI ATAS FOTO GELAP) */
/* Bagian ini TETAP TERANG karena backgroundnya foto gelap */
.guest-glass-box {
    position: absolute;
    bottom: 3%;
    left: 3%;
    z-index: 10;
    padding: 15px 20px;
    
    background: rgba(255, 255, 255, 0.15); /* Glass lebih terang dikit */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    
    border: 1px solid rgba(255, 255, 255, 0.4); 
    color: #ffffff; /* Teks tetap putih agar terbaca di foto */
    
    border-radius: 12px;
    opacity: 0;
    width: 65%;
    text-align: center;
}

.guest-glass-box span {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* KANAN BAWAH: TOMBOL SWIPE (DI PANEL PINK) */
.bottom-right-action-v7 {
    position: absolute;
    bottom: 5%;
    right: 8%;
    z-index: 30;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 15px;
}

#swipe-cue {
    /* 1. UKURAN: Diperbesar sedikit agar mudah dilihat & disentuh */
    width: 65px; 
    height: 65px;
    
    /* 2. BENTUK: Tetap Lingkaran Sempurna */
    border-radius: 50%;
    
    /* 3. WARNA: Menggunakan Japanese Carmine (Solid) agar KONTRAS dengan background gelap */
    background-color: #A92D39; 
    
    /* Border Emas agar tetap senada dengan tema mewah */
    border: 2px solid var(--accent-color);
    
    /* Layout Ikon */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 50;
    
    /* Bayangan Glow agar tombol terlihat 'hidup' */
    box-shadow: 0 0 20px rgba(169, 45, 57, 0.6);
    
    /* Animasi Berdenyut (Wajib agar mata user tertuju kesini) */
    animation: pulseCircle 2s infinite;
    
    transition: all 0.3s ease;
}

/* Pastikan tidak ada teks */
#swipe-cue::after {
    content: none;
}

/* Styling Ikon Panah di dalam */
#swipe-cue i {
    font-size: 1.8rem; /* Ikon diperbesar */
    color: #fff; /* Warna Putih agar sangat kontras di atas Merah */
    /* Jika ingin ikon Emas: ganti jadi var(--accent-color) */
}

/* Efek saat disentuh/hover */
#swipe-cue:hover {
    transform: scale(1.1);
    background-color: #8a232d; /* Merah lebih gelap */
    box-shadow: 0 0 30px rgba(169, 45, 57, 0.9);
}

#swipe-cue i { font-size: 1.5rem; }

/* ANIMASI MUNCUL */
.welcome-ready .main-titles-v7 {
    animation: slideInFadeTitles 0.8s ease-out forwards;
}

.welcome-ready .guest-glass-box {
    animation: slideInFade 0.8s ease-out forwards;
}

@keyframes slideInFade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInFadeTitles {
    from { opacity: 0; transform: translateY(-40%); }
    to { opacity: 1; transform: translateY(-50%); }
}

.welcome.hide { display: none; }