/* =============================================================================
   PO NIRWASITA TRANS - Sistem Animasi Terpusat
   File: assets/css/nwt-animations.css
   Versi: v3.1 (CSS Native, Zero Dependencies, POSIX-Safe)
   Deskripsi: Fade-in, slide-up, stagger, counter, NProgress bar
============================================================================= */

/* --------------------------------------------------------------------------
   PAGE LOADER PROGRESS BAR (NProgress Style, Garis Merah di Atas Layar)
-------------------------------------------------------------------------- */
#nwt-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #dc2626, #ef4444, #f87171);
    z-index: 9999;
    border-radius: 0 2px 2px 0;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
    opacity: 0;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.5);
    pointer-events: none;
}

#nwt-progress-bar.nwt-loading {
    opacity: 1;
}

#nwt-progress-bar.nwt-done {
    width: 100% !important;
    opacity: 0;
    transition: width 0.2s ease, opacity 0.4s ease 0.2s;
}

/* --------------------------------------------------------------------------
   KEYFRAMES UTAMA
-------------------------------------------------------------------------- */
@keyframes nwtFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes nwtSlideLeft {
    from { opacity: 0; transform: translateX(28px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes nwtSlideRight {
    from { opacity: 0; transform: translateX(-28px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes nwtScaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes nwtPulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
    50% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.12); }
}

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

@keyframes nwtShimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* --------------------------------------------------------------------------
   KELAS ANIMASI DASAR (SEBELUM MASUK VIEWPORT - TERSEMBUNYI)
-------------------------------------------------------------------------- */
.nwt-animate {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.nwt-animate-fade {
    opacity: 0;
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity;
}

.nwt-animate-left {
    opacity: 0;
    transform: translateX(28px);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.nwt-animate-right {
    opacity: 0;
    transform: translateX(-28px);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.nwt-animate-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* --------------------------------------------------------------------------
   STATUS AKTIF (MASUK VIEWPORT - TERLIHAT)
-------------------------------------------------------------------------- */
.nwt-animate.nwt-visible,
.nwt-animate-fade.nwt-visible {
    opacity: 1;
    transform: translateY(0);
}

.nwt-animate-left.nwt-visible {
    opacity: 1;
    transform: translateX(0);
}

.nwt-animate-right.nwt-visible {
    opacity: 1;
    transform: translateX(0);
}

.nwt-animate-scale.nwt-visible {
    opacity: 1;
    transform: scale(1);
}

.nwt-animate-fade.nwt-visible {
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   STAGGER DELAY KELAS (0 sampai 12 item, delay 60ms per item)
-------------------------------------------------------------------------- */
.nwt-stagger-1  { transition-delay: 0.06s; }
.nwt-stagger-2  { transition-delay: 0.12s; }
.nwt-stagger-3  { transition-delay: 0.18s; }
.nwt-stagger-4  { transition-delay: 0.24s; }
.nwt-stagger-5  { transition-delay: 0.30s; }
.nwt-stagger-6  { transition-delay: 0.36s; }
.nwt-stagger-7  { transition-delay: 0.42s; }
.nwt-stagger-8  { transition-delay: 0.48s; }
.nwt-stagger-9  { transition-delay: 0.54s; }
.nwt-stagger-10 { transition-delay: 0.60s; }
.nwt-stagger-11 { transition-delay: 0.66s; }
.nwt-stagger-12 { transition-delay: 0.72s; }

/* --------------------------------------------------------------------------
   COUNTER ANGKA ANIMASI
-------------------------------------------------------------------------- */
.nwt-counter {
    display: inline-block;
    animation: nwtCounterUp 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --------------------------------------------------------------------------
   HERO ENTRANCE (untuk elemen Hero Section yang langsung terlihat)
-------------------------------------------------------------------------- */
.nwt-hero-title {
    animation: nwtSlideUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}

.nwt-hero-subtitle {
    animation: nwtSlideUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

.nwt-hero-search {
    animation: nwtSlideUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both;
}

.nwt-hero-stats {
    animation: nwtFadeIn 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.50s both;
}

/* --------------------------------------------------------------------------
   SHIMMER LOADING SKELETON
-------------------------------------------------------------------------- */
.nwt-skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: nwtShimmer 1.5s infinite;
    border-radius: 8px;
}

/* --------------------------------------------------------------------------
   PULSE GLOW (untuk status badge atau elemen aktif)
-------------------------------------------------------------------------- */
.nwt-pulse-glow {
    animation: nwtPulseGlow 2s infinite;
}

/* --------------------------------------------------------------------------
   INTERAKSI TAKTIL TOMBOL (Masuk, Booking, & CTA)
   Efek klik mikro scale(0.95), ripple wave memancar, transisi halus
-------------------------------------------------------------------------- */
.btn-nwt-tactile {
    position: relative;
    overflow: hidden;
    transition: transform 0.12s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease, background-color 0.15s ease;
    will-change: transform;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn-nwt-tactile:hover {
    transform: translateY(-1px);
}

.btn-nwt-tactile:active,
.btn-nwt-tactile.nwt-pressed {
    transform: scale(0.95) !important;
}

/* Gelombang ripple klik */
.nwt-ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: scale(0);
    animation: nwtRippleAnimation 0.55s ease-out forwards;
    pointer-events: none;
}

.btn-nwt-tactile-dark .nwt-ripple-wave,
.btn-nwt-tactile-outline .nwt-ripple-wave {
    background: rgba(220, 38, 38, 0.25);
}

@keyframes nwtRippleAnimation {
    0% {
        transform: scale(0);
        opacity: 0.9;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   MEDIA QUERY: RESPEK PREFERENSI PENGGUNA (ACCESSIBILITY)
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .nwt-animate,
    .nwt-animate-fade,
    .nwt-animate-left,
    .nwt-animate-right,
    .nwt-animate-scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .nwt-hero-title,
    .nwt-hero-subtitle,
    .nwt-hero-search,
    .nwt-hero-stats {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .btn-nwt-tactile:hover,
    .btn-nwt-tactile:active,
    .btn-nwt-tactile.nwt-pressed {
        transform: none !important;
    }

    .nwt-ripple-wave {
        display: none !important;
    }

    #nwt-progress-bar {
        display: none;
    }
}