/* ============================================================
   INDO POMPA — animations.css
   Scroll Reveals, Page Transitions, Micro-interactions
   ============================================================ */

/* ─── Scroll Reveal Base States ─── */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}

[data-reveal="up"]    { transform: translateY(40px); }
[data-reveal="down"]  { transform: translateY(-30px); }
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(0.88); }
[data-reveal="fade"]  { transform: none; }

[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Stagger delays for child elements */
[data-reveal-group] > *:nth-child(1) { transition-delay: 0.05s; }
[data-reveal-group] > *:nth-child(2) { transition-delay: 0.15s; }
[data-reveal-group] > *:nth-child(3) { transition-delay: 0.25s; }
[data-reveal-group] > *:nth-child(4) { transition-delay: 0.35s; }
[data-reveal-group] > *:nth-child(5) { transition-delay: 0.45s; }
[data-reveal-group] > *:nth-child(6) { transition-delay: 0.55s; }

/* ─── Page Load Transition ─── */
.page-transition {
  animation: page-enter 0.5s ease forwards;
}

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── Hero Water Background ─── */
.hero-water {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.wave-1, .wave-2, .wave-3 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: 100px;
  opacity: 0.08;
}

.wave-1 {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='white' d='M0,50 C240,0 480,100 720,50 C960,0 1200,100 1440,50 L1440,100 L0,100 Z'/%3E%3C/svg%3E") repeat-x;
  background-size: 720px 100px;
  animation: wave-anim 8s linear infinite;
}

.wave-2 {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100'%3E%3Cpath fill='white' d='M0,70 C360,10 720,90 1080,70 C1260,60 1380,40 1440,50 L1440,100 L0,100 Z'/%3E%3C/svg%3E") repeat-x;
  background-size: 900px 100px;
  animation: wave-anim 12s linear infinite reverse;
  opacity: 0.05;
}

.wave-3 {
  height: 60px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='white' d='M0,30 C180,0 360,60 540,30 C720,0 900,60 1080,30 C1260,0 1380,30 1440,20 L1440,60 L0,60 Z'/%3E%3C/svg%3E") repeat-x;
  background-size: 540px 60px;
  animation: wave-anim 6s linear infinite;
  opacity: 0.04;
}

@keyframes wave-anim {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── Hero Particles / Bubbles ─── */
.bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bubble {
  position: absolute;
  bottom: -20px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.08);
  animation: bubble-rise linear infinite;
}

.bubble:nth-child(1)  { width: 12px; height: 12px; left: 10%; animation-duration: 8s; animation-delay: 0s; }
.bubble:nth-child(2)  { width: 8px;  height: 8px;  left: 20%; animation-duration: 10s; animation-delay: 2s; }
.bubble:nth-child(3)  { width: 16px; height: 16px; left: 35%; animation-duration: 12s; animation-delay: 1s; }
.bubble:nth-child(4)  { width: 6px;  height: 6px;  left: 50%; animation-duration: 9s;  animation-delay: 3s; }
.bubble:nth-child(5)  { width: 10px; height: 10px; left: 65%; animation-duration: 11s; animation-delay: 0.5s; }
.bubble:nth-child(6)  { width: 14px; height: 14px; left: 75%; animation-duration: 7s;  animation-delay: 4s; }
.bubble:nth-child(7)  { width: 8px;  height: 8px;  left: 85%; animation-duration: 13s; animation-delay: 1.5s; }
.bubble:nth-child(8)  { width: 18px; height: 18px; left: 92%; animation-duration: 10s; animation-delay: 2.5s; }

@keyframes bubble-rise {
  0%   { transform: translateY(0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 0.6; }
  100% { transform: translateY(-110vh) scale(0.6); opacity: 0; }
}

/* ─── Glow Ring (decorative) ─── */
.glow-ring {
  position: absolute;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255,255,255,0.1);
  animation: ring-pulse 4s ease-in-out infinite;
}

.glow-ring-1 { width: 300px; height: 300px; top: -100px; right: -80px; animation-delay: 0s; }
.glow-ring-2 { width: 500px; height: 500px; top: -200px; right: -180px; animation-delay: 1.5s; opacity: 0.5; }

@keyframes ring-pulse {
  0%, 100% { transform: scale(1); opacity: 0.1; }
  50%       { transform: scale(1.05); opacity: 0.2; }
}

/* ─── Counter Animation ─── */
.counter-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ─── Skeleton Loading ─── */
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}

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

/* ─── Hover Lift ─── */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* ─── Number Count-Up ─── */
@keyframes count-up-glow {
  0%   { color: var(--blue-light); }
  100% { color: var(--white); }
}

/* ─── Notification Toast ─── */
.toast-container {
  position: fixed;
  bottom: 110px;
  right: 28px;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  background: var(--blue-dark);
  color: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  font-size: var(--text-sm);
  font-weight: 500;
  min-width: 240px;
  pointer-events: auto;
  animation: toast-in 0.35s cubic-bezier(0.34,1.56,0.64,1) forwards;
  border-left: 4px solid var(--blue-primary);
}

.toast.toast-success { border-left-color: #10B981; }
.toast.toast-danger  { border-left-color: var(--red-primary); }

.toast-icon { font-size: 1.2rem; }

@keyframes toast-in {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes toast-out {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}

.toast.hiding { animation: toast-out 0.3s ease forwards; }

/* ─── Calculator Gauge Animation ─── */
.calc-gauge {
  position: relative;
  width: 120px;
  height: 60px;
  margin: 0 auto;
}

.calc-gauge svg {
  width: 100%;
  height: 100%;
}

.gauge-needle {
  transform-origin: 50% 100%;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Typewriter cursor ─── */
.typewriter::after {
  content: '|';
  animation: blink 0.7s step-end infinite;
  color: var(--blue-light);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}