/* Variable locale à la couche animation : volontairement absente de tokens.css. */
:root { --ease-out: cubic-bezier(0.22, 1, 0.36, 1); }

/* ==========================================================================
   ANIMATIONS AMÉLIORÉES — TCF Canada
   Ajouter ces règles à la fin de style.css
   ========================================================================== */

/* ---------- Entrées échelonnées ---------- */
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(32px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.85); }
  60%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes blurIn {
  from { opacity: 0; filter: blur(8px); transform: translateY(12px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Classe utilitaires d'animation ---------- */
.anim-slide-up    { animation: slideUpFade 0.7s var(--ease-out) both; }
.anim-slide-left  { animation: slideInLeft 0.6s var(--ease-out) both; }
.anim-slide-right { animation: slideInRight 0.6s var(--ease-out) both; }
.anim-pop         { animation: popIn 0.5s var(--ease-out) both; }
.anim-blur        { animation: blurIn 0.6s var(--ease-out) both; }
.anim-count       { animation: countUp 0.5s var(--ease-out) both; }

.delay-1  { animation-delay: 0.08s; }
.delay-2  { animation-delay: 0.16s; }
.delay-3  { animation-delay: 0.24s; }
.delay-4  { animation-delay: 0.32s; }
.delay-5  { animation-delay: 0.40s; }
.delay-6  { animation-delay: 0.48s; }
.delay-7  { animation-delay: 0.56s; }
.delay-8  { animation-delay: 0.64s; }
.delay-9  { animation-delay: 0.72s; }
.delay-10 { animation-delay: 0.80s; }

/* ---------- Hover micro-interactions améliorées ---------- */
.series-card, .tool-card, .plan-card, .stat-card {
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out),
              border-color 0.3s var(--ease-out);
}

.series-card:hover, .tool-card:hover, .plan-card:hover {
  transform: translateY(-6px) scale(1.01);
}

/* ---------- Hero logo animation ---------- */
.hero-logo {
  animation: heroLogoIn 1s var(--ease-out) both;
}

@keyframes heroLogoIn {
  0%   { opacity: 0; transform: translateY(-20px) scale(0.9); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { transform: translateY(0) scale(1); }
}

/* ---------- Nav logo subtle hover ---------- */
.brand-logo {
  transition: transform 0.3s var(--ease-out), filter 0.3s var(--ease-out);
}

.brand:hover .brand-logo {
  transform: scale(1.05);
}

/* ---------- Stat counter animation ---------- */
.stat-card strong {
  animation: countUp 0.6s var(--ease-out) both;
}

/* ---------- Quiz option feedback ---------- */
.option-item {
  transition: background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

.option-item.is-selected {
  animation: popIn 0.35s var(--ease-out);
}

/* ---------- Timer pulse when low ---------- */
@keyframes timerPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.exam-timer.is-low {
  animation: timerPulse 0.8s ease-in-out infinite;
}

/* ---------- Footer link column stagger ---------- */
.foot-col a {
  transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

/* ---------- Destination card image zoom ---------- */
.dest-card .dest-media img {
  transition: transform 0.8s var(--ease-out);
}

.dest-card:hover .dest-media img {
  transform: scale(1.08);
}

/* ---------- Reduced motion override ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
  }
}

.auth-brand .auth-logo { animation: heroLogoIn 0.7s var(--ease-out) both; }