/* =====================================================================
   ANIMATIONS.CSS — VERSI 3D INTERAKTIF (PT. Megah Restu Bumi)
   ===================================================================== */

/* =====================================================================
   1. 3D FLOAT (Elemen Melayang Hero Section)
   Elemen tidak hanya naik-turun, tapi berputar secara 3D (Pitch & Yaw)
   ===================================================================== */
@keyframes floatElement3D {
    0% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
    50% { transform: translateY(-15px) rotateX(10deg) rotateY(-8deg) drop-shadow(0 25px 25px rgba(0,0,0,0.15)); }
    100% { transform: translateY(0) rotateX(0deg) rotateY(0deg); }
}
.animate-float { 
    animation: floatElement3D 6s ease-in-out infinite; 
    transform-style: preserve-3d;
    perspective: 1000px;
}

/* =====================================================================
   2. 3D CARD TILT & PARALLAX (Keunggulan & Katalog Produk)
   Kartu akan terangkat, miring 3D, dan isinya seolah maju ke depan layar
   ===================================================================== */
.card-tilt { 
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s ease; 
    transform-style: preserve-3d; 
    perspective: 1200px;
    will-change: transform;
}
.card-tilt:hover { 
    transform: rotateX(8deg) rotateY(-8deg) translateY(-10px) scale3d(1.02, 1.02, 1.02); 
    box-shadow: -20px 20px 30px rgba(11, 95, 255, 0.12);
    z-index: 10;
}
/* Efek Parallax: Elemen di dalam card (teks/ikon/gambar) maju ke depan saat di-hover */
.card-tilt > * {
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.card-tilt:hover > * {
    transform: translateZ(40px); /* Teks dan ikon seakan keluar dari layar */
}

/* =====================================================================
   3. 3D IMAGE ZOOM (Galeri Pabrik & Hero Image)
   ===================================================================== */
.img-hover-zoom { 
    overflow: hidden; 
    perspective: 1000px;
    transform-style: preserve-3d;
}
.img-hover-zoom img { 
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease; 
    transform-origin: center center;
}
.img-hover-zoom:hover img { 
    /* Gambar membesar dan maju mendekati pengguna (Z-axis) */
    transform: scale3d(1.1, 1.1, 1.1) rotateZ(1deg) translateZ(30px); 
}

/* =====================================================================
   4. 3D BUTTONS (Tombol Utama CTA)
   Tombol akan menonjol saat di-hover dan tertekan ke dalam saat diklik
   ===================================================================== */
.btn-ripple, .btn-shimmer {
    transform-style: preserve-3d;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    perspective: 800px;
}
.btn-ripple:hover, .btn-shimmer:hover {
    transform: translateY(-5px) translateZ(15px); /* Maju ke depan */
    box-shadow: 0 15px 25px -5px rgba(11, 95, 255, 0.4);
}
.btn-ripple:active, .btn-shimmer:active {
    transform: translateY(2px) translateZ(-5px); /* Tertekan ke dalam */
    box-shadow: 0 5px 10px rgba(11, 95, 255, 0.3);
}

/* =====================================================================
   5. EFEK TEKS 3D (Gunakan class .text-3d pada heading yang diinginkan)
   ===================================================================== */
.text-3d {
    text-shadow: 
        0 1px 0px #e0e0e0,
        0 2px 0px #d4d4d4,
        0 3px 0px #cccccc,
        0 4px 0px #c2c2c2,
        0 5px 0px #b5b5b5,
        0 10px 15px rgba(0, 0, 0, 0.15);
    transform: translateZ(20px);
}

/* =====================================================================
   BAGIAN DI BAWAH INI ADALAH ANIMASI DASAR & DEKORATIF 
   (Dipertahankan agar website tetap berfungsi normal)
   ===================================================================== */

/* Entrance Animations */
@keyframes fadeInUp    { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: translateY(0); } }
@keyframes imgClipReveal {
    from { clip-path: inset(100% 0 0 0); transform: scale(1.08); }
    to   { clip-path: inset(0 0 0 0); transform: scale(1); }
}
.anim-fade-up { animation: fadeInUp 0.7s cubic-bezier(0.16,1,0.3,1) both; }
.img-reveal { animation: imgClipReveal 0.9s cubic-bezier(0.16,1,0.3,1) both; }

/* Stagger Children */
.stagger-children > * { opacity: 0; animation: fadeInUp 0.6s cubic-bezier(0.16,1,0.3,1) both; }
.stagger-children > *:nth-child(1) { animation-delay: 0s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.3s; }

/* Glow & Shimmer Decor */
@keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(11, 95, 255, 0.35); }
    50% { box-shadow: 0 0 0 10px rgba(11, 95, 255, 0); }
}
.btn-glow { animation: glowPulse 2.6s ease-out infinite; }

.btn-shimmer { position: relative; overflow: hidden; }
.btn-shimmer::before {
    content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg); transition: left 0.65s ease;
}
.btn-shimmer:hover::before { left: 130%; }

/* =====================================================================
   KARTU BIRU ELEGAN & KILATAN PUTIH (SHINE EFFECT)
   ===================================================================== */
.card-blue-shine {
    position: relative;
    overflow: hidden;
    /* Warna biru elegan (biru tuwa menyang biru padhang) */
    background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%) !important; 
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Efek kilatan putih sing mlaku */
.card-blue-shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-25deg);
    animation: kilatanPutih 4s infinite; /* Kilatan muncul saben 4 detik */
    z-index: 0;
    pointer-events: none;
}

@keyframes kilatanPutih {
    0% { left: -150%; }
    20% { left: 200%; }
    100% { left: 200%; } /* Jeda sedela sakdurunge kilatan metu maneh */
}

/* Wiggle Icon */
@keyframes iconWiggle {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-10deg); }
    40% { transform: rotate(8deg); }
    60% { transform: rotate(-6deg); }
    80% { transform: rotate(4deg); }
}
.icon-wiggle:hover { animation: iconWiggle 0.6s ease-in-out; }

/* Blueprint & Blob Backgrounds */
@keyframes blueprintPan { 0% { background-position: 0 0; } 100% { background-position: 80px 80px; } }
.bg-blueprint-animated { animation: blueprintPan 14s linear infinite; }

@keyframes blobMorph {
    0%, 100% { border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; transform: translate(0,0) scale(1); }
    50% { border-radius: 60% 40% 40% 60% / 55% 60% 40% 45%; transform: translate(12px,-10px) scale(1.04); }
}
.blob-decor { animation: blobMorph 10s ease-in-out infinite; }

/* Underline Link Hover */
.link-underline { position: relative; }
.link-underline::after {
    content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px;
    background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s cubic-bezier(0.16,1,0.3,1);
}
.link-underline:hover::after { transform: scaleX(1); }

/* Badge Ring Pulse */
@keyframes ringPulse {
    0%   { box-shadow: 0 0 0 0 rgba(11, 95, 255, 0.45); }
    100% { box-shadow: 0 0 0 12px rgba(11, 95, 255, 0); }
}
.badge-ring::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; animation: ringPulse 1.8s ease-out infinite;
}

/* Aksesibilitas: Matikan animasi untuk preferensi reduced-motion */
@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; transform: none !important; }
}