/* =================================================================
   Water Animation System — BerenangCuy / OmniAquatic
   File  : water-animations.css
   Author: Antigravity AI Architect
   Tanggal: 2026-06-23
   Versi : 1.0.0

   DEPENDENCY: style.css (dimuat sebelum file ini)
   Tailwind CDN (dimuat sebelum file ini)
   TIDAK BOLEH dimodifikasi tanpa memahami konflik dengan style.css
   ================================================================= */


/* ==========================================================================
   1. CSS CUSTOM PROPERTIES — Design Tokens Animasi Air
   ========================================================================== */
:root {
    /* --- Palet Warna Air --- */
    --water-primary: #00B4D8;
    --water-secondary: #0096C7;
    --water-light: #48CAE4;
    --water-pale: #ADE8F4;
    --water-frost: #CDFAFF;
    --water-white: #ffffff;
    --water-deep: #023E8A;

    /* --- Easing Favorit --- */
    --water-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);       /* bouncing water drop */
    --water-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1.0);      /* fade out natural */
    --water-ripple: cubic-bezier(0.25, 0.46, 0.45, 0.94);     /* ripple expand */
    --water-smooth: cubic-bezier(0.16, 1, 0.3, 1);            /* smooth entrance */

    /* --- Durasi --- */
    --water-dur-micro: 400ms;
    --water-dur-short: 600ms;
    --water-dur-medium: 800ms;
    --water-dur-long: 1200ms;

    /* --- Canvas Overlay --- */
    --water-canvas-z: -15;
}


/* ==========================================================================
   2. CANVAS OVERLAY — Fixed Canvas untuk Particle Engine
   ========================================================================== */
#water-fx-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: var(--water-canvas-z);
    pointer-events: none;
    background-color: transparent;
    will-change: transform;
}


/* ==========================================================================
   3. KEYFRAMES — Animasi Inti Bertema Air
   ========================================================================== */

/* --- Entrance: naik dari bawah + fade in (untuk elemen non-AOS) --- */
@keyframes water-reveal {
    0% {
        opacity: 0;
        transform: translateY(40px);
        filter: blur(4px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0px);
    }
}

/* --- Drop bounce: ikon "jatuh seperti tetes air" lalu memantul --- */
@keyframes water-drop-bounce {
    0% {
        opacity: 0;
        transform: translateY(-50px) scale(0.6);
    }
    50% {
        opacity: 1;
        transform: translateY(8px) scale(1.05);
    }
    70% {
        transform: translateY(-4px) scale(0.98);
    }
    85% {
        transform: translateY(2px) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* --- Wave: gelombang SVG naik-turun (untuk section divider) --- */
@keyframes water-wave-float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* --- Wave kedua (offset timing untuk dual-layer wave) --- */
@keyframes water-wave-float-reverse {
    0%, 100% {
        transform: translateY(-6px);
    }
    50% {
        transform: translateY(4px);
    }
}

/* --- Shimmer: kilauan air pada gallery image hover --- */
@keyframes water-shimmer-sweep {
    0% {
        transform: translateX(-100%) rotate(12deg);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: translateX(200%) rotate(12deg);
        opacity: 0;
    }
}

/* --- Droplet fall: tetesan jatuh satu per satu (CSS decorative) --- */
@keyframes water-droplet-fall {
    0% {
        transform: translateY(-20px) scale(0.5);
        opacity: 0;
    }
    15% {
        opacity: 0.7;
    }
    80% {
        opacity: 0.4;
    }
    100% {
        transform: translateY(100vh) scale(0.3);
        opacity: 0;
    }
}

/* --- Ripple expand: lingkaran riak meluas dari pusat --- */
@keyframes water-ripple-expand {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

/* --- Button ripple: efek riak dari titik klik pada CTA --- */
@keyframes water-btn-ripple {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

/* --- Pulse ring: lingkaran denyut pada stats counter --- */
@keyframes water-pulse-ring {
    0% {
        transform: scale(0.85);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.15);
        opacity: 0;
    }
    100% {
        transform: scale(0.85);
        opacity: 0;
    }
}

/* --- Slide in kiri (testimoni ganjil) --- */
@keyframes water-slide-left {
    0% {
        opacity: 0;
        transform: translateX(-60px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* --- Slide in kanan (testimoni genap) --- */
@keyframes water-slide-right {
    0% {
        opacity: 0;
        transform: translateX(60px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


/* ==========================================================================
   4. ENTRANCE ANIMATIONS — .water-reveal System
   
   Hanya untuk elemen TANPA data-aos attribute.
   JS akan menambah class .water-visible saat IntersectionObserver trigger.
   ========================================================================== */

/* Pre-state: tersembunyi, menunggu scroll trigger */
.water-reveal {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(4px);
    transition:
        opacity var(--water-dur-medium) var(--water-smooth),
        transform var(--water-dur-medium) var(--water-smooth),
        filter var(--water-dur-medium) var(--water-smooth);
}

/* Saat terlihat di viewport — dipicu oleh JS IntersectionObserver */
.water-reveal.water-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
}

/* --- Drop bounce entrance (untuk feature icons) --- */
.water-drop-entrance {
    opacity: 0;
    transform: translateY(-50px) scale(0.6);
}

.water-drop-entrance.water-visible {
    animation: water-drop-bounce var(--water-dur-long) var(--water-bounce) forwards;
}


/* ==========================================================================
   5. STAGGER SYSTEM — Delay berurutan untuk cards/list items
   
   Parent mendapat data-water-stagger="150" (ms).
   JS menghitung dan menerapkan --water-stagger-delay pada setiap child.
   ========================================================================== */
.water-stagger-child {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity var(--water-dur-medium) var(--water-smooth),
        transform var(--water-dur-medium) var(--water-smooth);
    transition-delay: var(--water-stagger-delay, 0ms);
}

.water-stagger-child.water-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================================================
   6. TESTIMONI — Slide alternating kiri/kanan
   ========================================================================== */
.water-testi-slide {
    opacity: 0;
    transition:
        opacity var(--water-dur-medium) var(--water-smooth),
        transform var(--water-dur-medium) var(--water-smooth);
}

/* Ganjil: dari kiri */
.water-testi-slide:nth-child(odd) {
    transform: translateX(-50px);
}

/* Genap: dari kanan */
.water-testi-slide:nth-child(even) {
    transform: translateX(50px);
}

.water-testi-slide.water-visible {
    opacity: 1;
    transform: translateX(0);
}


/* ==========================================================================
   7. BUTTON WATER RIPPLE — CTA Hover Effect
   
   Menggunakan ::after pseudo-element sebagai ripple circle.
   Ripple dipicu dari titik kursor saat hover via CSS custom properties
   --ripple-x dan --ripple-y yang diset oleh JS.
   ========================================================================== */
.btn-water-ripple {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* Membuat stacking context baru agar ripple tidak bocor */
}

.btn-water-ripple::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(0, 180, 216, 0.35) 0%,
        rgba(0, 180, 216, 0.15) 40%,
        transparent 70%
    );
    left: var(--ripple-x, 50%);
    top: var(--ripple-y, 50%);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.6s var(--water-ripple), opacity 0.6s var(--water-ease-out);
    pointer-events: none;
    z-index: 0;
}

.btn-water-ripple:hover::before {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 1;
}

/* Pastikan teks tombol di atas ripple */
.btn-water-ripple > * {
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   8. GALLERY WATER SHIMMER — Hover Overlay pada Gallery Items
   
   Efek kilauan cahaya air yang menyapu diagonal saat hover.
   ========================================================================== */
.water-gallery-item {
    position: relative;
    overflow: hidden;
}

.water-gallery-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(0, 180, 216, 0.08) 40%,
        rgba(173, 232, 244, 0.18) 50%,
        rgba(0, 180, 216, 0.08) 60%,
        transparent 80%
    );
    transform: rotate(0deg);
    pointer-events: none;
    z-index: 2;
    transition: none;
    opacity: 0;
}

.water-gallery-item:hover::after {
    animation: water-shimmer-sweep 1.1s var(--water-smooth) forwards;
    opacity: 1;
}

/* Subtle blue tint overlay saat hover */
.water-gallery-item .aspect-\[4\/3\]::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        transparent 50%,
        rgba(0, 150, 199, 0.06) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.water-gallery-item:hover .aspect-\[4\/3\]::after {
    opacity: 1;
}


/* ==========================================================================
   9. WAVE SECTION DIVIDERS — Animated SVG Waves antara sections
   
   Dual-layer wave yang bergerak berlawanan arah untuk efek "air hidup".
   ========================================================================== */
.water-wave-divider {
    position: relative;
    width: 100%;
    height: 50px;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}

.water-wave-divider svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Layer pertama: gelombang utama */
.water-wave-divider .wave-layer-1 {
    animation: water-wave-float 4s ease-in-out infinite;
    opacity: 0.6;
}

/* Layer kedua: gelombang pendukung (offset) */
.water-wave-divider .wave-layer-2 {
    animation: water-wave-float-reverse 5s ease-in-out infinite;
    opacity: 0.3;
}


/* ==========================================================================
   10. STATS COUNTER VISUAL POLISH
   
   Tambahan visual untuk section stats yang counternya sudah ada via JS.
   ========================================================================== */

/* Glow effect pada angka counter saat sudah ter-animate */
[data-counter][data-animated="true"] {
    text-shadow:
        0 0 20px rgba(0, 180, 216, 0.3),
        0 0 40px rgba(0, 180, 216, 0.1);
    transition: text-shadow 1s ease;
}

/* Decorative ring pulse di belakang angka (hanya visual) */
.water-stat-pulse {
    position: relative;
}

.water-stat-pulse::before {
    content: '';
    position: absolute;
    inset: -15px;
    border-radius: 50%;
    border: 2px solid rgba(0, 180, 216, 0.2);
    animation: water-pulse-ring 3s var(--water-ease-out) infinite;
    pointer-events: none;
}


/* ==========================================================================
   11. HERO SECTION WATER EFFECTS — Additional visual layers
   ========================================================================== */

/* Ambient ripple glow di bawah hero saat load */
#section-hero .water-hero-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 120px;
    background: radial-gradient(
        ellipse at 50% 100%,
        rgba(0, 180, 216, 0.12) 0%,
        rgba(0, 150, 199, 0.06) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 15;
    opacity: 0;
    transition: opacity 1.5s ease;
}

#section-hero .water-hero-glow.water-visible {
    opacity: 1;
}


/* ==========================================================================
   12. SECTION-SPECIFIC WATER MARKERS — Visual hints untuk canvas triggers
   
   Elemen section dengan data-water-fx mendapat subtle visual cue.
   Canvas particle effects akan di-render oleh JS.
   ========================================================================== */

/* Subtle bottom glow untuk sections yang memiliki water fx */
[data-water-fx]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 180, 216, 0.15) 30%,
        rgba(0, 180, 216, 0.25) 50%,
        rgba(0, 180, 216, 0.15) 70%,
        transparent
    );
    border-radius: 2px;
    pointer-events: none;
    z-index: 10;
}


/* ==========================================================================
   13. RESPONSIVE — Disable efek berat pada mobile (<768px)
   ========================================================================== */
@media (max-width: 767px) {
    /* Canvas particle engine di-hide (JS juga disable) */
    #water-fx-canvas {
        display: none !important;
    }

    /* Entrance animations tetap jalan tapi tanpa blur (berat di GPU mobile) */
    .water-reveal {
        filter: none;
        transform: translateY(25px);
    }

    .water-reveal.water-visible {
        filter: none;
    }

    /* Drop bounce disederhanakan */
    .water-drop-entrance.water-visible {
        animation: none;
        opacity: 1;
        transform: translateY(0) scale(1);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    /* Testimoni slide distance dikurangi */
    .water-testi-slide:nth-child(odd) {
        transform: translateX(-25px);
    }
    .water-testi-slide:nth-child(even) {
        transform: translateX(25px);
    }

    /* Gallery shimmer di-disable (overlay berat di mobile) */
    .water-gallery-item::after {
        display: none;
    }

    /* Wave divider diperkecil */
    .water-wave-divider {
        height: 30px;
    }

    /* Section water marker di-hide */
    [data-water-fx]::after {
        display: none;
    }

    /* Stat pulse ring di-hide */
    .water-stat-pulse::before {
        display: none;
    }

    /* Hero glow diperkecil */
    #section-hero .water-hero-glow {
        height: 60px;
    }
}

/* Tablet breakpoint — efek menengah */
@media (min-width: 768px) and (max-width: 1023px) {
    .water-reveal {
        filter: blur(2px);
        transform: translateY(30px);
    }

    .water-wave-divider {
        height: 40px;
    }
}


/* ==========================================================================
   14. PREFERS-REDUCED-MOTION — Hormati preferensi aksesibilitas pengguna
   
   Semua animasi water effects di-disable total.
   Elemen tetap terlihat (opacity: 1) tapi tanpa gerakan.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    /* Matikan semua @keyframes water */
    .water-reveal,
    .water-drop-entrance,
    .water-stagger-child,
    .water-testi-slide {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        animation: none !important;
        transition: none !important;
    }

    /* Canvas hidden */
    #water-fx-canvas {
        display: none !important;
    }

    /* Button ripple off */
    .btn-water-ripple::before {
        display: none;
    }

    /* Gallery shimmer off */
    .water-gallery-item::after {
        display: none;
    }

    /* Wave dividers static */
    .water-wave-divider .wave-layer-1,
    .water-wave-divider .wave-layer-2 {
        animation: none !important;
    }

    /* Stat pulse off */
    .water-stat-pulse::before {
        animation: none !important;
    }

    /* Hero glow langsung visible tanpa transisi */
    #section-hero .water-hero-glow {
        opacity: 1;
        transition: none;
    }

    /* Section markers off */
    [data-water-fx]::after {
        display: none;
    }
}


/* ==========================================================================
   15. GRACEFUL DEGRADATION — Fallback saat JS gagal load
   
   Tanpa JS, class .water-visible tidak pernah ditambahkan.
   Gunakan .no-js fallback agar konten tetap terlihat.
   ========================================================================== */

/* Jika html tidak punya class js-loaded (ditambahkan oleh water-animations.js),
   tampilkan semua elemen water-reveal secara langsung */
html:not(.water-js-loaded) .water-reveal,
html:not(.water-js-loaded) .water-drop-entrance,
html:not(.water-js-loaded) .water-stagger-child,
html:not(.water-js-loaded) .water-testi-slide {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
}