/*//////////////////////////////////////////////////////////////////
////////////////////////ANIMATIONS DISCRÈTES//////////////////////////
//////////////////////////////////////////////////////////////////*/
/* Micro-interactions légères pour l'ensemble du site : à charger en
   dernier (après les feuilles de style propres à chaque page) pour
   pouvoir affiner leurs transitions sans les dupliquer. */

html{
  scroll-behavior: smooth;
}

/* fondu d'entrée très léger au chargement de chaque page */
body{
  animation: pageFadeIn .5s ease both;
}

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

/* logo, bouton "en voir +", icônes : transitions douces communes */
.logo-header,
#bouton,
.icon-footer,
.icon,
.icon-e .icon,
.mor-menu-item img.icon{
  transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;
}

.logo-header:hover{
  transform: scale(1.04);
}

#bouton{
  transition: transform .2s ease, box-shadow .2s ease;
}

#bouton:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(18, 17, 41, .08);
}

.icon-footer:hover{
  transform: translateY(-3px);
  opacity: .75;
}

/* lignes de listes (projets / illustrations) : léger décalage au survol */
.project,
.illustration{
  transition: transform .25s ease;
}

.project:hover,
.illustration:hover,
.project:focus-within,
.illustration:focus-within{
  transform: translateX(6px);
}

.project:hover .icon,
.illustration:hover .icon,
.project:focus-within .icon,
.illustration:focus-within .icon{
  transform: scale(1.08);
}

/* grille d'icônes exploration : léger zoom au survol */
.exploration{
  transition: transform .2s ease;
}

.exploration:hover,
.exploration:focus-within{
  transform: scale(1.05);
}

/* burger : légère rotation à l'ouverture */
.burger{
  transition: transform .3s ease;
}

.burger.active{
  transform: rotate(90deg);
}

/* icônes du menu burger : apparition douce, très légèrement décalée */
.menu-burger.active .menu-images a{
  animation: menuItemIn .35s ease both;
}

.menu-burger.active .menu-images a:nth-child(1){ animation-delay: .02s; }
.menu-burger.active .menu-images a:nth-child(2){ animation-delay: .08s; }
.menu-burger.active .menu-images a:nth-child(3){ animation-delay: .14s; }

@keyframes menuItemIn{
  from{ opacity: 0; transform: translateY(-6px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* encadrés de prévisualisation (survol des listes) : fondu naturel plutôt qu'une apparition brute */
.overlay.active .box{
  animation: boxFadeIn .3s ease both;
}

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

/* menu d'icônes des pages projet (ys, madfest, fuema...) */
.mor-menu-item{
  transition: transform .2s ease;
}

.mor-menu-item:hover{
  transform: translateY(-2px);
}

/* apparition douce des grands blocs de contenu au fil du scroll */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--i, 0) * 70ms);
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* on respecte les préférences d'accessibilité : on réduit ou supprime les mouvements */
@media (prefers-reduced-motion: reduce){
  html{
    scroll-behavior: auto;
  }

  body,
  .menu-burger.active .menu-images a,
  .overlay.active .box,
  .reveal{
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}