/* ==========================================================================
   NAFA TEKNOLOGI - ANIMATIONS & TRANSITIONS
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pinned Pivot Floating Keyframes (Anchor Dot Stays 100% Locked)
   -------------------------------------------------------------------------- */
@keyframes gentlePivotLeftA {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
  }
  50% {
    transform: translateY(-50%) rotate(0.45deg);
  }
}

@keyframes gentlePivotLeftB {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
  }
  50% {
    transform: translateY(-50%) rotate(-0.4deg);
  }
}

@keyframes gentlePivotRightA {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
  }
  50% {
    transform: translateY(-50%) rotate(-0.45deg);
  }
}

@keyframes gentlePivotRightB {
  0%, 100% {
    transform: translateY(-50%) rotate(0deg);
  }
  50% {
    transform: translateY(-50%) rotate(0.4deg);
  }
}

/* Intro Word Animation */
@keyframes introWordEnter {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* 8 Shapes Entrance (Strictly horizontal glide, zero vertical shift) */
.canvas-node {
  opacity: 0;
  pointer-events: none;
}

.canvas-node.is-floating {
  opacity: 1;
  pointer-events: auto;
}

@keyframes nodeEnterLeft {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

@keyframes nodeEnterRight {
  0% {
    opacity: 0;
    transform: translateY(-50%) translateX(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

.canvas-node.node-entering-left {
  animation: nodeEnterLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.canvas-node.node-entering-right {
  animation: nodeEnterRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Card Float Classes (Pinned to Anchor Dots) */
.canvas-node.is-floating.float-card-1 { animation: gentlePivotLeftA 6.0s ease-in-out infinite; }
.canvas-node.is-floating.float-card-2 { animation: gentlePivotLeftB 6.8s ease-in-out infinite 0.8s; }
.canvas-node.is-floating.float-card-3 { animation: gentlePivotLeftA 7.2s ease-in-out infinite 1.6s; }
.canvas-node.is-floating.float-card-4 { animation: gentlePivotLeftB 6.5s ease-in-out infinite 2.4s; }
.canvas-node.is-floating.float-card-5 { animation: gentlePivotRightA 6.2s ease-in-out infinite 0.4s; }
.canvas-node.is-floating.float-card-6 { animation: gentlePivotRightB 7.0s ease-in-out infinite 1.2s; }
.canvas-node.is-floating.float-card-7 { animation: gentlePivotRightA 6.6s ease-in-out infinite 2.0s; }
.canvas-node.is-floating.float-card-8 { animation: gentlePivotRightB 6.9s ease-in-out infinite 2.8s; }

/* Circuit SVG */
.canvas-circuits {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.canvas-circuits.is-visible {
  opacity: 1;
}

.canvas-circuits path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.canvas-circuits.is-visible path {
  stroke-dashoffset: 0;
}

/* Mobile chips */
.mobile-node-chip {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.35, 0.64, 1), background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.mobile-node-chip.chip-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Filosofi Cards Floating */
@keyframes gentleFloatStaticA {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes gentleFloatStaticB {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.float-filosofi-1 { animation: gentleFloatStaticA 7.5s ease-in-out infinite; }
.float-filosofi-2 { animation: gentleFloatStaticB 7.5s ease-in-out infinite 1.2s; }

/* --------------------------------------------------------------------------
   Radar Ping Animation for Vector Map
   -------------------------------------------------------------------------- */
@keyframes radarPing {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  80%, 100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

.animate-ping {
  animation: radarPing 2.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* --------------------------------------------------------------------------
   Live Pulse Dot
   -------------------------------------------------------------------------- */
@keyframes pulseDot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.15);
  }
}

.live-pulse {
  animation: pulseDot 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Transitions
   -------------------------------------------------------------------------- */
.fade-in {
  animation: fadeIn 0.25s ease-out forwards;
}

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