/* =============================================
   KIWI APEX — Animations & Effects
   ============================================= */

/* ── Gradient Text ── */
.gradient-text {
  background: linear-gradient(135deg, var(--accent) 0%, #ff8c42 50%, var(--accent2) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Glowing Border ── */
.glow-border {
  border: 1px solid transparent;
  background: linear-gradient(var(--dark2), var(--dark2)) padding-box,
              linear-gradient(135deg, var(--accent), var(--accent2)) border-box;
}

/* ── Shimmer Effect ── */
.shimmer {
  position: relative; overflow: hidden;
}
.shimmer::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: shimmer-move 3s infinite;
}
@keyframes shimmer-move {
  0% { left: -100%; }
  100% { left: 150%; }
}

/* ── Float animation ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.float { animation: float 4s ease-in-out infinite; }

/* ── Spin ── */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Pulse ── */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* ── Hero text entrance ── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-tag { animation: heroFadeUp 0.7s 0.2s both; }
.hero-title { animation: heroFadeUp 0.7s 0.4s both; }
.hero-subtitle { animation: heroFadeUp 0.7s 0.55s both; }
.hero-buttons { animation: heroFadeUp 0.7s 0.7s both; }

/* ── Line draw ── */
@keyframes line-draw {
  from { width: 0; }
  to { width: 60px; }
}
.divider { animation: line-draw 0.8s 0.5s both; }

/* ── Card hover tilt ── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

/* ── Number Counter ── */
.count-up { display: inline-block; }

/* ── Stagger delay helpers ── */
.delay-1 { transition-delay: 0.1s !important; }
.delay-2 { transition-delay: 0.2s !important; }
.delay-3 { transition-delay: 0.3s !important; }
.delay-4 { transition-delay: 0.4s !important; }
.delay-5 { transition-delay: 0.5s !important; }
.delay-6 { transition-delay: 0.6s !important; }

/* ── Section stripe decoration ── */
.section-stripe {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.4;
}

/* ── Speed lines bg decoration ── */
.speed-lines {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0.04;
}
.speed-lines::before,
.speed-lines::after {
  content: '';
  position: absolute;
  top: 50%; left: -10%; width: 120%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.speed-lines::before { transform: rotate(-8deg) translateY(-40px); }
.speed-lines::after { transform: rotate(-8deg) translateY(40px); }

/* ── Particle dots bg ── */
@keyframes particle-rise {
  0% { transform: translateY(0) scale(1); opacity: 0.6; }
  100% { transform: translateY(-200px) scale(0); opacity: 0; }
}
.particle {
  position: absolute; border-radius: 50%;
  background: var(--accent); pointer-events: none;
  animation: particle-rise 4s ease-in infinite;
}

/* ── Neon line ── */
.neon-line {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent2) 70%, transparent 100%);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* ── Hover image zoom wrapper ── */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 0.6s cubic-bezier(0.4,0,0.2,1); }
.img-zoom:hover img { transform: scale(1.08); }

/* ── Gradient overlay card ── */
.card-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.9) 0%, transparent 100%);
  padding: 20px;
  transform: translateY(4px); transition: transform 0.4s;
}
.img-zoom:hover .card-overlay { transform: translateY(0); }

/* ── Tab transitions ── */
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeIn 0.4s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; } }

/* ── Page loader ── */
.page-loader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--black);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 24px;
  transition: opacity 0.6s, visibility 0.6s;
}
.page-loader.done { opacity: 0; visibility: hidden; }
.loader-logo {
  font-family: var(--font-display); font-size: 2.5rem;
  letter-spacing: 0.1em; color: var(--white);
}
.loader-logo span { color: var(--accent); }
.loader-bar {
  width: 200px; height: 2px;
  background: var(--dark3); border-radius: 2px; overflow: hidden;
}
.loader-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  animation: load-progress 1.5s ease forwards;
}
@keyframes load-progress {
  from { width: 0; }
  to { width: 100%; }
}

/* ── Responsive Image Fallback ── */
.img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--dark2) 0%, var(--dark3) 100%);
  display: flex; align-items: center; justify-content: center;
}