/* ============================================
   KILOGRAPH — animations-claude.css
   Toutes les @keyframes et classes d'animation
   ============================================ */

/* ---- Keyframes généraux ---- */
@keyframes fadeUp {
  to { opacity: 1; transform: none; }
}

/* ---- Hero homepage ---- */
@keyframes heroZoom {
  from { transform: scale(1.08); opacity: 0.6; }
  to   { transform: scale(1.0);  opacity: 1; }
}

@keyframes titleUp {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: none; }
}

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* ---- Ticker ---- */
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Classes utilitaires d'animation ---- */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  animation: fadeUp 0.7s ease forwards;
}
@keyframes fadeUp { to { opacity: 1; transform: none; } }
.fade-up:nth-child(1) { animation-delay: 0.1s; }
.fade-up:nth-child(2) { animation-delay: 0.2s; }
.fade-up:nth-child(3) { animation-delay: 0.3s; }
.fade-up:nth-child(4) { animation-delay: 0.4s; }
.fade-up:nth-child(5) { animation-delay: 0.5s; }
.fade-up:nth-child(6) { animation-delay: 0.6s; }
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.25s; }
.delay-3 { animation-delay: 0.4s; }

/* ---- Hero homepage — zoom lent sur l'image ---- */
.hero-kilo-bg img {
  animation: heroZoom 12s ease-out forwards;
}

.hero-kilo-title {
  animation: titleUp 1s 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
.hero-kilo-sub {
  animation: titleUp 0.8s 0.7s ease both;
}
.hero-kilo-aside {
  animation: asideIn 0.8s 0.8s ease both;
}
.hero-kilo-scroll {
  animation: fadeIn 1s 1.5s ease both;
}
.scroll-line {
  animation: scrollPulse 2s ease-in-out infinite;
}

/* ---- Page À propos — fade-up ---- */
.hero-text .fade-up:nth-child(1) { animation-delay: 0.1s; }
.hero-text .fade-up:nth-child(2) { animation-delay: 0.2s; }
.hero-text .fade-up:nth-child(3) { animation-delay: 0.3s; }

/* ---- @media prefers-reduced-motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-kilo-bg img { animation: none; }
  .hero-kilo-title, .hero-kilo-sub, .hero-kilo-aside,
  .hero-kilo-scroll, .scroll-line { animation: none; opacity: 1; transform: none; }
  .fade-up { animation: none; opacity: 1; transform: none; }
}

/* ============================================
   PAGE À PROPOS — animations scroll reveal
   ============================================ */

/* Hero h1 — déjà géré par .fade-up */

/* Story section — ligne apparaît depuis la gauche */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: none; }
}

/* Valeur items — pop depuis le bas avec scale léger */
@keyframes popUp {
  from { opacity: 0; transform: translateY(32px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* Blockquote — fade + légère rotation */
@keyframes quoteIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}

/* Ville-tags — apparition en cascade */
@keyframes tagPop {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Stat numbers — compteur feel */
@keyframes statIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Classes reveal scroll (appliquées par JS) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal-left.visible {
  opacity: 1;
  transform: none;
}
.reveal-scale {
  opacity: 0;
  transform: scale(0.95) translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}

/* ============================================
   PAGE PORTFOLIO — animations
   ============================================ */

/* Masonry items — staggered géré par JS (voir portfolio script) */
/* .masonry-item { animation: masonryIn 0.55s ease both; } */

/* Overlay du masonry — slide depuis le bas */
.item-overlay {
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* Filter buttons — active state pulse */
@keyframes filterPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}
.filter-btn.active {
  animation: filterPulse 0.25s ease;
}

/* Lightbox — ouverture */
@keyframes lbOpen {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lbPanelIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: none; }
}
#lightbox-bg.open {
  animation: lbOpen 0.25s ease forwards;
}
#lightbox-bg.open .lb-panel {
  animation: lbPanelIn 0.3s 0.1s ease both;
}

/* Hero portfolio — h1 */
.hero-portfolio h1 {
  animation: titleUp 0.9s 0.2s cubic-bezier(0.16,1,0.3,1) both;
}
.hero-portfolio .hero-right {
  animation: asideIn 0.7s 0.4s ease both;
}

/* @media prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-scale { transition: none; opacity: 1; transform: none; }
  .masonry-item { animation: none; }
  .hero-portfolio h1, .hero-portfolio .hero-right { animation: none; opacity: 1; transform: none; }
  #lightbox-bg.open, #lightbox-bg.open .lb-panel { animation: none; }
}