/* Pola Kain人字纹 Background Meja */
.bg-chevron-pattern {
    background: linear-gradient(135deg, #A18D75 25%, transparent 25%) -30px 0,
                linear-gradient(225deg, #A18D75 25%, transparent 25%) -30px 0,
                linear-gradient(45deg, #A18D75 25%, transparent 25%),
                linear-gradient(315deg, #A18D75 25%, #F4EBE1 25%);
    background-size: 60px 30px;
    background-repeat: repeat;
}

/* Pola Titik Matrix Kertas Scrapbook (Sesuai Kedua Gambar) */
.bg-dotted-pattern {
    background-image: radial-gradient(#D8CEB9 1.2px, transparent 1.2px);
    background-size: 24px 24px;
    background-repeat: repeat;
}

/* Kain Kotak-Kotak Hijau Sisi Kanan (Sesuai Gambar 2) */
.bg-grid-green {
    background-color: #B2C9A2;
    background-image: linear-gradient(rgba(255,255,255,.3) 2px, transparent 2px),
                      linear-gradient(90deg, rgba(255,255,255,.3) 2px, transparent 2px);
    background-size: 20px 20px;
}

/* Pola Strip Tepi Amplop Airmail Berulang */
.bg-strip-pattern {
    background: repeating-linear-gradient( -45deg, #B24343, #B24343 8px, #FCFAF5 8px, #FCFAF5 16px, #4E3B29 16px, #4E3B29 24px, #FCFAF5 24px, #FCFAF5 32px );
}

/* 🎬 STAGGERED MOTION PIPELINE TIMELINE SETUP */
.animate-slide-down { animation: enterDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards; }
.animate-nav-drop { animation: navDrop 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.9s forwards; }

@keyframes enterDown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes navDrop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }

/* Transformasi Halus Teks UIUX dari Tengah ke Tepi */
@keyframes uiuxTransform {
    0% { opacity: 0; font-size: 2.4rem; transform: translate(140px, 160px); color: #4E3B29; }
    30% { opacity: 1; font-size: 2.4rem; transform: translate(140px, 160px); color: #4E3B29; }
    65% { opacity: 1; font-size: 2.4rem; transform: translate(140px, 160px); color: #4E3B29; }
    100% { opacity: 1; font-size: 11px; transform: translate(0, 0); color: #967E66; }
}
.animate-uiux-transform { animation: uiuxTransform 2.2s cubic-bezier(0.76, 0, 0.18, 1) forwards; }

/* Kemunculan Bertahap Judul & Filter */
@keyframes titleReveal { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.animate-title-reveal { animation: titleReveal 0.5s cubic-bezier(0.16, 1, 0.3, 1) 1.95s forwards; }

@keyframes filterReveal { from { opacity: 0; } to { opacity: 1; } }
.animate-filter-reveal { animation: filterReveal 0.4s ease-out 2.15s forwards; }

/* Animasi Hamburan Lapisan Kartu-Kartu Pos */
.animate-card-main { animation: cardMainIn 0.75s cubic-bezier(0.25, 1, 0.5, 1) 0.15s forwards; }
.animate-card-back { animation: cardBackIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) 2.0s forwards; }
.animate-card-mid { animation: cardMidIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) 2.1s forwards; }
.animate-card-journey { animation: cardJourneyIn 0.7s cubic-bezier(0.25, 1, 0.5, 1) 2.2s forwards; }
.animate-badge-reveal { animation: badgeIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 2.3s forwards; }
.animate-memo-reveal { animation: memoIn 0.5s ease-out 2.25s forwards; }
.animate-peeking-girl { animation: peekIn 0.6s ease-out 2.0s forwards; }
.animate-tape-in { animation: tapeIn 0.5s ease-out 0.2s forwards; }

/* Animasi Memo Pop-In */
@keyframes memoPop {
    0% { opacity: 0; transform: scale(0.9) translateY(-10px) rotate(2deg); }
    80% { transform: scale(1.05) translateY(2px) rotate(-1deg); }
    100% { opacity: 1; transform: scale(1) translateY(0) rotate(0deg); }
}

.animate-memo-pop {
    animation: memoPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes cardMainIn {
    from { opacity: 0; transform: translateY(50px) rotate(-8deg); }
    to { opacity: 1; transform: translateY(0) rotate(-2deg); }
}
@keyframes cardBackIn { from { opacity: 0; transform: translate(20px, -20px) rotate(0deg); } to { opacity: 1; transform: translate(0,0) rotate(12deg); } }
@keyframes cardMidIn { from { opacity: 0; transform: translate(-15px, 15px) rotate(0deg); } to { opacity: 1; transform: translate(0,0) rotate(-4deg); } }
@keyframes cardJourneyIn {
    from { opacity: 0; transform: translateY(30px) rotate(-4deg); }
    to { opacity: 1; transform: translateY(0) rotate(6deg); }
}
@keyframes badgeIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes memoIn { from { opacity: 0; transform: translateX(15px); } to { opacity: 1; transform: translateX(0) rotate(4deg); } }
@keyframes peekIn { from { opacity: 0; transform: translateY(20px) rotate(0deg); } to { opacity: 1; transform: translateY(0) rotate(-12deg); } }
@keyframes tapeIn {
    from { opacity: 0; transform: translate(30px, 20px) rotate(-5deg); }
    to { opacity: 1; transform: translate(0, 0) rotate(-25deg); }
}

/* 🚪 Transisi Keluar Runtuh */
.exit-collapse {
    transform: translateY(15px) scale(0.98) !important;
    opacity: 0 !important;
    filter: blur(2px);
    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}