/* ============================================================
   LOPHANE PROJECT — Animations CSS
   ============================================================ */

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.08); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes borderPulse {
  0%   { box-shadow: 0 0 0 0 rgba(30,58,138,.4); }
  70%  { box-shadow: 0 0 0 10px rgba(30,58,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(30,58,138,0); }
}

/* ── Hero Animations ───────────────────────────────────────── */
.hero-badge  { animation: fadeInDown .7s ease .2s both; }
.hero-title  { animation: fadeInUp   .8s ease .3s both; }
.hero-desc   { animation: fadeInUp   .8s ease .5s both; }
.hero-actions{ animation: fadeInUp   .8s ease .7s both; }

/* ── Stagger children ──────────────────────────────────────── */
.stagger > *:nth-child(1) { animation-delay: .1s; }
.stagger > *:nth-child(2) { animation-delay: .2s; }
.stagger > *:nth-child(3) { animation-delay: .3s; }
.stagger > *:nth-child(4) { animation-delay: .4s; }
.stagger > *:nth-child(5) { animation-delay: .5s; }
.stagger > *:nth-child(6) { animation-delay: .6s; }

/* ── Utility animation classes ─────────────────────────────── */
.animate-fade-in   { animation: fadeIn    .6s ease both; }
.animate-fade-up   { animation: fadeInUp  .7s ease both; }
.animate-fade-left { animation: fadeInLeft .7s ease both; }
.animate-fade-right{ animation: fadeInRight .7s ease both; }
.animate-scale-in  { animation: scaleIn   .6s ease both; }
.animate-float     { animation: float 4s ease-in-out infinite; }
.animate-pulse     { animation: pulse 2s ease-in-out infinite; }

/* ── Skeleton Loader ───────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 50%, var(--gray-100) 75%);
  background-size: 400px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

/* ── Hover effects ─────────────────────────────────────────── */
.hover-lift { transition: transform .3s ease, box-shadow .3s ease; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

.hover-scale { transition: transform .3s ease; }
.hover-scale:hover { transform: scale(1.03); }

/* ── Reveal on scroll (custom) ─────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Number Counter ────────────────────────────────────────── */
.counter-number {
  display: inline-block;
  transition: all .1s ease;
}

/* ── Progress Bar ──────────────────────────────────────────── */
.progress-bar {
  background: var(--gray-100);
  border-radius: var(--radius-pill);
  height: 8px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: var(--radius-pill);
  width: 0;
  transition: width 1.5s ease;
}

/* ── Notification Toast ────────────────────────────────────── */
.toast-container {
  position: fixed;
  top: 90px; right: 24px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.toast {
  background: var(--white);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: var(--shadow-xl);
  border-left: 4px solid var(--primary);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 280px;
  max-width: 380px;
  animation: slideInRight .4s ease;
  font-size: 0.875rem;
  font-family: var(--font);
}
.toast.success { border-color: var(--success); }
.toast.error   { border-color: var(--danger); }
.toast i { font-size: 1.2rem; }
.toast.success i { color: var(--success); }
.toast.error   i { color: var(--danger); }
.toast-close {
  margin-left: auto;
  cursor: pointer;
  color: var(--gray-400);
  font-size: 0.875rem;
  padding: 4px;
  flex-shrink: 0;
}
.toast-close:hover { color: var(--dark); }
.toast.fade-out { animation: fadeIn .4s ease reverse; }

/* ── Ripple effect on buttons ──────────────────────────────── */
.btn { position: relative; overflow: hidden; }
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  transform: scale(0);
  animation: rippleEffect .6s linear;
  pointer-events: none;
}
@keyframes rippleEffect {
  to { transform: scale(4); opacity: 0; }
}

/* ── Image zoom on hover ───────────────────────────────────── */
.img-zoom { overflow: hidden; border-radius: var(--radius-lg); }
.img-zoom img { transition: transform .5s ease; }
.img-zoom:hover img { transform: scale(1.06); }

/* ── Pulsing ring (CTA focus) ──────────────────────────────── */
.pulse-ring {
  position: relative;
  display: inline-flex;
}
.pulse-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 3px solid var(--primary);
  animation: borderPulse 2s ease infinite;
}

/* ── Section divider wave ──────────────────────────────────── */
.wave-divider {
  position: relative;
  height: 60px;
  overflow: hidden;
}
.wave-divider svg {
  position: absolute;
  bottom: 0;
  width: 100%;
}

/* ── Particles bg ──────────────────────────────────────────── */
.particles-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.particle {
  position: absolute;
  width: 6px; height: 6px;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
  animation: float 6s ease-in-out infinite;
}
.particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s;   animation-duration: 5s; }
.particle:nth-child(2) { top: 60%; left: 25%; animation-delay: 1s;   animation-duration: 7s; }
.particle:nth-child(3) { top: 40%; left: 60%; animation-delay: 2s;   animation-duration: 4s; }
.particle:nth-child(4) { top: 70%; left: 75%; animation-delay: .5s;  animation-duration: 6s; }
.particle:nth-child(5) { top: 15%; left: 85%; animation-delay: 1.5s; animation-duration: 8s; }
.particle:nth-child(6) { top: 80%; left: 40%; animation-delay: 3s;   animation-duration: 5s; }

/* ── AOS custom overrides ──────────────────────────────────── */
[data-aos] { backface-visibility: hidden; }