/* =========================================
   BIZLOKAL — SLIDE-IN ANIMATION SYSTEM
   File: includes/animations.css
   Tambahkan di setiap halaman via head.php
========================================= */

/* ---- KEYFRAMES ---- */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-80px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(80px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideInUp {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideInDown {
  from { opacity: 0; transform: translateY(-60px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeScaleIn {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeftFade {
  from { opacity: 0; transform: translateX(-50px) rotate(-2deg); }
  to   { opacity: 1; transform: translateX(0) rotate(0deg); }
}
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 10px rgba(0,210,255,0.3); }
  50%      { box-shadow: 0 0 30px rgba(0,210,255,0.7), 0 0 60px rgba(0,210,255,0.3); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes neonFlicker {
  0%,19%,21%,23%,25%,54%,56%,100% { text-shadow: 0 0 10px var(--led-neon-azure), 0 0 20px var(--led-neon-azure), 0 0 40px var(--led-neon-azure); }
  20%,24%,55% { text-shadow: none; }
}
@keyframes floatY {
  0%,100% { transform: translateY(0px); }
  50%     { transform: translateY(-12px); }
}

/* ---- UTILITY CLASSES ---- */
.slide-in-left    { animation: slideInLeft  0.7s cubic-bezier(0.22,1,0.36,1) both; }
.slide-in-right   { animation: slideInRight 0.7s cubic-bezier(0.22,1,0.36,1) both; }
.slide-in-up      { animation: slideInUp    0.7s cubic-bezier(0.22,1,0.36,1) both; }
.slide-in-down    { animation: slideInDown  0.6s cubic-bezier(0.22,1,0.36,1) both; }
.fade-scale-in    { animation: fadeScaleIn  0.6s cubic-bezier(0.22,1,0.36,1) both; }
.float-anim       { animation: floatY 3.5s ease-in-out infinite; }
.glow-pulse       { animation: glowPulse 2.5s ease-in-out infinite; }
.neon-flicker     { animation: neonFlicker 4s linear infinite; }

/* Delays */
.delay-1  { animation-delay: 0.1s; }
.delay-2  { animation-delay: 0.2s; }
.delay-3  { animation-delay: 0.3s; }
.delay-4  { animation-delay: 0.45s; }
.delay-5  { animation-delay: 0.6s; }
.delay-6  { animation-delay: 0.75s; }
.delay-7  { animation-delay: 0.9s; }
.delay-8  { animation-delay: 1.05s; }

/* ---- SCROLL-REVEAL OBSERVER ---- */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.reveal.reveal-left  { transform: translateX(-60px); }
.reveal.reveal-right { transform: translateX(60px); }
.reveal.reveal-scale { transform: scale(0.9); }
.reveal.visible {
  opacity: 1;
  transform: none;
}

/* ---- PAGE TRANSITION OVERLAY ---- */
#page-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--led-blue-bg);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}
#page-loader.hidden { opacity: 0; visibility: hidden; }
.loader-brand {
  font-family: 'Orbitron', sans-serif;
  font-size: 2rem; font-weight: 900;
  color: var(--led-neon-azure);
  text-shadow: 0 0 20px var(--led-neon-azure);
  animation: neonFlicker 1.2s linear infinite;
}
.loader-bar {
  width: 200px; height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  margin-top: 20px;
  overflow: hidden;
}
.loader-bar::after {
  content: '';
  display: block;
  height: 100%;
  width: 40%;
  background: var(--led-neon-azure);
  border-radius: 10px;
  box-shadow: 0 0 10px var(--led-neon-azure);
  animation: loaderMove 1s ease-in-out infinite;
}
@keyframes loaderMove {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(600%); }
}

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

/* ---- NAVBAR SLIDE DOWN ---- */
.navbar { animation: slideInDown 0.5s ease both; }

/* ---- STAGGER CHILDREN ---- */
.stagger-children > * {
  opacity: 0;
  animation: slideInUp 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
.stagger-children > *:nth-child(1) { animation-delay: 0.1s; }
.stagger-children > *:nth-child(2) { animation-delay: 0.2s; }
.stagger-children > *:nth-child(3) { animation-delay: 0.3s; }
.stagger-children > *:nth-child(4) { animation-delay: 0.4s; }
.stagger-children > *:nth-child(5) { animation-delay: 0.5s; }
.stagger-children > *:nth-child(6) { animation-delay: 0.6s; }
.stagger-children > *:nth-child(n+7) { animation-delay: 0.7s; }

/* ---- HOVER LIFT ---- */
.hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hover-lift:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.12); }

/* ---- SCROLL PROGRESS BAR ---- */
#scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 2000;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--led-neon-azure), #7c3aed, var(--led-neon-azure));
  background-size: 200%;
  animation: shimmer 2s linear infinite;
  transition: width 0.1s linear;
}

/* =========================================
   BIZLOKAL — ANIMASI TAMBAHAN (6 PACK)
   1. Particle Float
   2. Glow Pulse Button
   3. Skeleton Shimmer (enhanced)
   4. Animated Counter (via JS)
   5. Scroll Reveal Enhanced (via JS)
   6. Magnetic Hover Card
========================================= */

/* ---- 1. FLOATING DOTS — Pure CSS, Zero DOM Conflict ---- */
@keyframes floatDot {
  0%   { transform: translateY(0) scale(1);   opacity: 0; }
  15%  { opacity: 0.6; }
  85%  { opacity: 0.3; }
  100% { transform: translateY(-120px) scale(0.4); opacity: 0; }
}
.biz-hero-particle { position: relative; overflow: hidden; }
.biz-dots-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.biz-dots-layer span {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: #00d2ff;
  animation: floatDot linear infinite;
  opacity: 0;
}
/* 20 titik dengan posisi & timing berbeda */
.biz-dots-layer span:nth-child(1)  { left:5%;   width:5px;  height:5px;  animation-duration:4s;   animation-delay:0s;   }
.biz-dots-layer span:nth-child(2)  { left:12%;  width:8px;  height:8px;  animation-duration:6s;   animation-delay:1s;   }
.biz-dots-layer span:nth-child(3)  { left:20%;  width:4px;  height:4px;  animation-duration:5s;   animation-delay:2s;   background:#38bdf8; }
.biz-dots-layer span:nth-child(4)  { left:28%;  width:7px;  height:7px;  animation-duration:7s;   animation-delay:0.5s; }
.biz-dots-layer span:nth-child(5)  { left:35%;  width:3px;  height:3px;  animation-duration:4.5s; animation-delay:3s;   background:#7dd3fc; }
.biz-dots-layer span:nth-child(6)  { left:43%;  width:6px;  height:6px;  animation-duration:5.5s; animation-delay:1.5s; }
.biz-dots-layer span:nth-child(7)  { left:50%;  width:4px;  height:4px;  animation-duration:3.5s; animation-delay:2.5s; background:#38bdf8; }
.biz-dots-layer span:nth-child(8)  { left:58%;  width:9px;  height:9px;  animation-duration:6.5s; animation-delay:0.8s; }
.biz-dots-layer span:nth-child(9)  { left:65%;  width:5px;  height:5px;  animation-duration:4.8s; animation-delay:3.5s; background:#7dd3fc; }
.biz-dots-layer span:nth-child(10) { left:72%;  width:3px;  height:3px;  animation-duration:5.2s; animation-delay:1.2s; }
.biz-dots-layer span:nth-child(11) { left:78%;  width:7px;  height:7px;  animation-duration:4.2s; animation-delay:2.8s; background:#00d2ff; }
.biz-dots-layer span:nth-child(12) { left:85%;  width:5px;  height:5px;  animation-duration:6.8s; animation-delay:0.3s; }
.biz-dots-layer span:nth-child(13) { left:90%;  width:4px;  height:4px;  animation-duration:3.8s; animation-delay:4s;   background:#38bdf8; }
.biz-dots-layer span:nth-child(14) { left:8%;   width:6px;  height:6px;  animation-duration:5.8s; animation-delay:1.8s; }
.biz-dots-layer span:nth-child(15) { left:18%;  width:3px;  height:3px;  animation-duration:4.3s; animation-delay:3.2s; background:#7dd3fc; }
.biz-dots-layer span:nth-child(16) { left:32%;  width:8px;  height:8px;  animation-duration:7.2s; animation-delay:0.6s; }
.biz-dots-layer span:nth-child(17) { left:47%;  width:4px;  height:4px;  animation-duration:5.6s; animation-delay:2.2s; background:#00d2ff; }
.biz-dots-layer span:nth-child(18) { left:62%;  width:6px;  height:6px;  animation-duration:4.6s; animation-delay:1.4s; }
.biz-dots-layer span:nth-child(19) { left:75%;  width:5px;  height:5px;  animation-duration:6.2s; animation-delay:3.8s; background:#38bdf8; }
.biz-dots-layer span:nth-child(20) { left:95%;  width:7px;  height:7px;  animation-duration:5.4s; animation-delay:0.9s; }

/* ---- 2. GLOW PULSE BUTTON ---- */
.btn-glow-pulse {
  animation: btnGlowPulse 2.2s ease-in-out infinite;
}
@keyframes btnGlowPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,210,255,0.55); }
  50%     { box-shadow: 0 0 0 16px rgba(0,210,255,0); }
}

/* ---- 3. SKELETON SHIMMER ENHANCED ---- */
.skeleton {
  background: linear-gradient(90deg,
    rgba(186,230,253,0.6) 25%,
    rgba(224,242,254,0.9) 50%,
    rgba(186,230,253,0.6) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s infinite linear;
  border-radius: 12px;
}
@keyframes skeletonShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-card {
  background: white;
  border-radius: 20px;
  padding: 16px;
  border: 1.5px solid #bae6fd;
}
.skeleton-img   { height: 160px; margin-bottom: 12px; }
.skeleton-title { height: 18px; width: 70%; margin-bottom: 8px; }
.skeleton-text  { height: 13px; width: 50%; margin-bottom: 6px; }
.skeleton-btn   { height: 38px; width: 100%; margin-top: 10px; border-radius: 10px; }

/* ---- 4. COUNTER (style pendukung) ---- */
[data-target] {
  display: inline-block;
  transition: color 0.3s;
}

/* ---- 5. SCROLL REVEAL ENHANCED ---- */
.reveal-fade {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1);
}
.reveal-fade.reveal-left-e  { transform: translateX(-50px); }
.reveal-fade.reveal-right-e { transform: translateX(50px); }
.reveal-fade.reveal-scale-e { transform: scale(0.92); }
.reveal-fade.is-visible {
  opacity: 1;
  transform: none;
}
.reveal-fade.delay-r1 { transition-delay: 0.1s; }
.reveal-fade.delay-r2 { transition-delay: 0.2s; }
.reveal-fade.delay-r3 { transition-delay: 0.3s; }
.reveal-fade.delay-r4 { transition-delay: 0.4s; }
.reveal-fade.delay-r5 { transition-delay: 0.5s; }
.reveal-fade.delay-r6 { transition-delay: 0.6s; }

/* ---- 6. MAGNETIC HOVER CARD ---- */
.magnetic-card {
  transition:
    transform 0.28s cubic-bezier(0.25,0.8,0.25,1),
    box-shadow 0.28s ease,
    border-color 0.28s ease;
  cursor: pointer;
  will-change: transform;
}
.magnetic-card:hover {
  transform: translateY(-10px) scale(1.025);
  box-shadow: 0 18px 40px rgba(0,210,255,0.22), 0 4px 16px rgba(0,0,0,0.08);
  border-color: var(--azure-primary) !important;
}

/* Ripple effect on click */
.magnetic-card {
  position: relative;
  overflow: hidden;
}
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(0,210,255,0.25);
  transform: scale(0);
  animation: rippleAnim 0.6s linear;
  pointer-events: none;
}
@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}