/* ================================================================
   ZETA ARISE — ANIMATIONS CSS
   ================================================================ */

/* ---- FADE UP ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Utility animation classes */
.anim-fadeUp   { animation: fadeUp   0.8s ease forwards; }
.anim-fadeIn   { animation: fadeIn   0.8s ease forwards; }
.anim-fadeLeft { animation: fadeLeft 0.8s ease forwards; }
.anim-scaleIn  { animation: scaleIn  0.6s ease forwards; }

.delay-1 { animation-delay: 0.1s; opacity: 0; }
.delay-2 { animation-delay: 0.2s; opacity: 0; }
.delay-3 { animation-delay: 0.3s; opacity: 0; }
.delay-4 { animation-delay: 0.4s; opacity: 0; }
.delay-5 { animation-delay: 0.5s; opacity: 0; }

/* ---- SCROLL REVEAL ---- */
.rev {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.rev.visible { opacity: 1; transform: translateY(0); }
.rev.d1 { transition-delay: 0.1s; }
.rev.d2 { transition-delay: 0.2s; }
.rev.d3 { transition-delay: 0.3s; }
.rev.d4 { transition-delay: 0.4s; }
.rev.d5 { transition-delay: 0.5s; }

/* ---- COUNTER ---- */
.count-up { transition: all 0.3s ease; }

/* ---- GRADIENT TEXT SHIFT ---- */
@keyframes gradientShift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.grad-anim {
  background-size: 200% auto;
  animation: gradientShift 3.5s linear infinite;
}

/* ---- ORB FLOAT ---- */
@keyframes orbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  40%      { transform: translate(20px,-20px) scale(1.06); }
  70%      { transform: translate(-15px,15px) scale(0.94); }
}
.orb-float { animation: orbFloat 9s ease-in-out infinite; }

/* ---- PULSE ---- */
@keyframes pulse {
  0%,100% { opacity:1; transform: scale(1); }
  50%      { opacity:0.4; transform: scale(1.6); }
}
.pulse { animation: pulse 2s ease-in-out infinite; }

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

/* ---- PARTICLES ---- */
@keyframes particleFloat {
  0%   { opacity:0; transform: translateY(100vh) rotate(0deg); }
  10%  { opacity:0.5; }
  90%  { opacity:0.2; }
  100% { opacity:0; transform: translateY(-80px) rotate(360deg); }
}

/* ---- SHINE EFFECT ---- */
@keyframes shine {
  0%   { left: -100%; }
  100% { left: 200%; }
}
.shine-btn {
  position: relative;
  overflow: hidden;
}
.shine-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  animation: shine 2.5s ease-in-out infinite;
}

/* ---- TYPING CURSOR ---- */
@keyframes blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}
.cursor { animation: blink 1s ease-in-out infinite; }

/* ---- SPIN ---- */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spin { animation: spin 2s linear infinite; }

/* ---- BORDER GLOW ---- */
@keyframes borderGlow {
  0%,100% { box-shadow: 0 0 12px rgba(201,168,76,0.2); }
  50%      { box-shadow: 0 0 28px rgba(201,168,76,0.5); }
}
.border-glow { animation: borderGlow 2.5s ease-in-out infinite; }

/* ---- SCROLL LINE ---- */
@keyframes scrollLine {
  0%,100% { transform: scaleY(1); opacity: 1; }
  50%      { transform: scaleY(0.5); opacity: 0.4; }
}

/* ---- LOADER FILL ---- */
@keyframes loaderFill {
  from { width: 0; }
  to   { width: 100%; }
}

/* ---- CARD HOVER GLOW ---- */
.hover-glow {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.hover-glow:hover {
  box-shadow: 0 20px 60px rgba(201,168,76,0.15), 0 0 0 1px rgba(201,168,76,0.1);
  transform: translateY(-5px);
}

/* ---- PROGRESS BAR ---- */
.za-progress {
  height: 4px;
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}
.za-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--cyan));
  border-radius: 4px;
  width: 0;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- MARQUEE PAUSE ON HOVER ---- */
.za-marquee-wrap:hover .za-marquee-track {
  animation-play-state: paused;
}

/* ---- SKELETON LOADER ---- */
@keyframes skeleton {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 400% 100%;
  animation: skeleton 1.8s ease infinite;
  border-radius: 6px;
}

/* ---- NOTIFICATION BOUNCE ---- */
@keyframes notifBounce {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}
.notif-bounce { animation: notifBounce 1s ease-in-out infinite; }