/* ========================================
   BIZOMAX TILES — Animations
   ======================================== */

/* ── Loading Screen Animation ── */
@keyframes tileAssemble {
  0% { transform: translate(var(--tx), var(--ty)); opacity: 0; }
  50% { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(0, 0); opacity: 1; }
}
.loading-tile:nth-child(1) { --tx: -60px; --ty: -60px; animation: tileAssemble 1s 0s forwards; }
.loading-tile:nth-child(2) { --tx: 60px; --ty: -60px; animation: tileAssemble 1s 0.1s forwards; }
.loading-tile:nth-child(3) { --tx: -60px; --ty: 60px; animation: tileAssemble 1s 0.2s forwards; }
.loading-tile:nth-child(4) { --tx: 60px; --ty: 60px; animation: tileAssemble 1s 0.3s forwards; }

@keyframes logoFade { from { opacity: 0; } to { opacity: 1; } }
.loading-logo { animation: logoFade 0.5s 0.8s forwards; }

/* ── Hero ── */
@keyframes heroZoom {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}
.hero-zoom-container {
  position: absolute; inset: 0; animation: heroZoom 12s ease-in-out infinite alternate;
}

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

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-12px); }
}

/* Particles */
@keyframes floatUp {
  0% { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100px) rotate(360deg); opacity: 0; }
}

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

/* ── WhatsApp Pulse ── */
@keyframes pulseRing {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

/* ── Popup ── */
@keyframes popupIn {
  from { transform: scale(0.9) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes popupOut {
  from { transform: scale(1) translateY(0); opacity: 1; }
  to { transform: scale(0.9) translateY(20px); opacity: 0; }
}

/* ── Shake ── */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-8px); }
  20%, 40%, 60%, 80% { transform: translateX(8px); }
}

/* ── GSAP Helper Classes ── */
/* No CSS opacity:0 — set by JS only so content is visible if GSAP fails */

/* ── Floating tiles in admin login ── */
@keyframes floatTile {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(5deg); }
}

/* ── Gold sweep transition ── */
@keyframes goldSweep {
  from { width: 0; }
  to { width: 100%; }
}

/* ── Admin stat card pulse ── */
@keyframes statPulse {
  0%, 100% { box-shadow: 0 4px 15px rgba(0,0,0,0.08); }
  50% { box-shadow: 0 8px 30px rgba(201,168,76,0.15); }
}

/* ── Smooth scroll animation for process line ── */
@keyframes drawLine {
  from { height: 0; }
  to { height: 100%; }
}

/* ── Carousel spin (defined here for reference, also in carousel3d.css) ── */
@keyframes spinCarousel {
  from { transform: translateX(-50%) rotateY(0deg); }
  to   { transform: translateX(-50%) rotateY(360deg); }
}