/* ============================================
   KOMPAS4 — Animations
   Scroll-triggered and UI animations
   ============================================ */

/* ─── Page Transition Overlay ────────────── */
#page-transition {
  position: fixed;
  inset: 0;
  background: var(--navy-900);
  z-index: var(--z-modal);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#page-transition.fade-out {
  opacity: 1;
  pointer-events: all;
}

/* ─── Scroll Animations Base ─────────────── */
[data-animate] {
  opacity: 0;
  transition: opacity 0.65s ease, transform 0.65s ease;
}

[data-animate="fade-up"],
[data-animate] {
  transform: translateY(28px);
}

[data-animate="fade-down"] {
  transform: translateY(-28px);
}

[data-animate="fade-left"] {
  transform: translateX(32px);
}

[data-animate="fade-right"] {
  transform: translateX(-32px);
}

[data-animate="scale"] {
  transform: scale(0.94);
}

[data-animate="none"] {
  transform: none;
}

/* ─── Animated State ─────────────────────── */
[data-animate].is-visible {
  opacity: 1;
  transform: none !important;
}

/* ─── Stagger Children ───────────────────── */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

[data-stagger] > *.is-visible {
  opacity: 1;
  transform: none;
}

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

/* ─── Loading Skeleton ───────────────────── */
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

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

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

/* ─── Marquee / Logo Strip ───────────────── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee-track {
  display: flex;
  animation: marquee 28s linear infinite;
}

.marquee-wrapper {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

/* ─── Pulse Effect ───────────────────────── */
@keyframes pulse-ring {
  0%   { transform: scale(0.95); opacity: 0.8; }
  70%  { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(0.95); opacity: 0; }
}

.pulse-ring {
  position: absolute;
  inset: -6px;
  border: 2px solid var(--blue-400);
  border-radius: inherit;
  animation: pulse-ring 2s ease-out infinite;
}

/* ─── Gradient Shimmer on CTA ────────────── */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ─── Float Animation ────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

.float-anim {
  animation: float 4s ease-in-out infinite;
}

/* ─── Subtle Background Grid ─────────────── */
.bg-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}

/* ─── Gradient Orbs (decorative) ────────── */
.orb {
  position: absolute;
  border-radius: var(--r-full);
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.12;
}

.orb--blue {
  background: var(--blue-500);
}

.orb--navy {
  background: var(--navy-500);
}