﻿/* ═══════════════════════════════
   GatexBD — Animations CSS
═══════════════════════════════ */

@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes scrollPulse {
  0%,100% { opacity: 0.3; transform: scaleY(0.5); transform-origin: top; }
  50%      { opacity: 1; transform: scaleY(1); }
}
@keyframes scrollLogos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes goldGlow {
  0%,100% { box-shadow: 0 0 15px rgba(201,149,42,0.2); }
  50%      { box-shadow: 0 0 35px rgba(201,149,42,0.5); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes leafFloat {
  0%,100% { transform: translateY(0) rotate(0deg); }
  33%      { transform: translateY(-12px) rotate(5deg); }
  66%      { transform: translateY(-6px) rotate(-3deg); }
}
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes borderGlow {
  0%,100% { border-color: rgba(201,149,42,0.18); }
  50%      { border-color: rgba(201,149,42,0.55); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* ── Utility animation classes ── */
.anim-fade-up    { animation: fadeInUp 0.7s ease both; }
.anim-fade-left  { animation: fadeInLeft 0.7s ease both; }
.anim-fade-right { animation: fadeInRight 0.7s ease both; }
.anim-gold-glow  { animation: goldGlow 3s ease infinite; }
.anim-leaf       { animation: leafFloat 4s ease infinite; }
.anim-pulse      { animation: pulse 2s ease infinite; }
.anim-delay-1    { animation-delay: 0.1s; }
.anim-delay-2    { animation-delay: 0.2s; }
.anim-delay-3    { animation-delay: 0.3s; }
.anim-delay-4    { animation-delay: 0.4s; }
.anim-delay-5    { animation-delay: 0.5s; }
.anim-delay-6    { animation-delay: 0.6s; }

/* ── Loading shimmer skeleton ── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, rgba(255,255,255,0.05) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* ── Page transition loader ── */
#page-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg-dark);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.4s ease;
}
#page-loader.hidden { opacity: 0; pointer-events: none; }
.loader-logo {
  font-family: var(--font-head);
  font-size: 1.8rem; font-weight: 800; color: var(--primary);
  animation: pulse 1s ease infinite;
}
.loader-bar {
  position: absolute; bottom: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  animation: loaderProgress 0.8s ease forwards;
}
@keyframes loaderProgress {
  from { width: 0; }
  to   { width: 100%; }
}
