/* ═══════════════════════════════════════════════════════
   GARAGE F-C SAINT-FRANÇOIS — animations.css
   ═══════════════════════════════════════════════════════ */

/* ─── PAGE TRANSITION ─── */
.page-fade {
  animation: pageFadeIn .4s ease forwards;
}
@keyframes pageFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── COUNTER ANIMATION ─── */
.counter { display: inline-block; }

/* ─── STAGGER CHILDREN ─── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(24px);
}
.stagger-children.triggered > *:nth-child(1) { animation: staggerIn .5s .0s ease forwards; }
.stagger-children.triggered > *:nth-child(2) { animation: staggerIn .5s .1s ease forwards; }
.stagger-children.triggered > *:nth-child(3) { animation: staggerIn .5s .2s ease forwards; }
.stagger-children.triggered > *:nth-child(4) { animation: staggerIn .5s .3s ease forwards; }
.stagger-children.triggered > *:nth-child(5) { animation: staggerIn .5s .4s ease forwards; }
.stagger-children.triggered > *:nth-child(6) { animation: staggerIn .5s .5s ease forwards; }
.stagger-children.triggered > *:nth-child(7) { animation: staggerIn .5s .6s ease forwards; }
.stagger-children.triggered > *:nth-child(8) { animation: staggerIn .5s .7s ease forwards; }

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

/* ─── RED LINE DRAW ─── */
.line-draw {
  position: relative;
  overflow: hidden;
}
.line-draw::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--c-red);
  transition: width .6s cubic-bezier(0.16, 1, 0.3, 1);
}
.line-draw.triggered::after { width: 100%; }

/* ─── HOVER LIFT ─── */
.hover-lift {
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}

/* ─── SHIMMER SKELETON ─── */
.shimmer {
  background: linear-gradient(90deg,
    var(--c-dark-2) 25%,
    var(--c-dark-3) 50%,
    var(--c-dark-2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ─── MARQUEE / TICKER PAUSE ON HOVER ─── */
.ticker-track { animation-play-state: running; }
.ticker-band:hover .ticker-track { animation-play-state: paused; }

/* ─── FOCUS STYLES (accessibility) ─── */
:focus-visible {
  outline: 2px solid var(--c-red);
  outline-offset: 3px;
}