/* ==========================================================================
   AZIMUTH — micro-interactions
   Règles : ease-out fort, < 300 ms pour l'interface, uniquement transform /
   opacity, survols réservés aux écrans à souris, respect de reduced-motion.
   ========================================================================== */

:root{
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
}

@keyframes az-fade-up{
  from{ opacity:0; transform:translateY(10px); }
}

/* ---------- Entrée de page (évite l'apparition brutale du contenu) ---------- */
@keyframes az-page-in{
  from{ opacity:0; transform:translateY(6px); }
}
main{ animation:az-page-in 260ms var(--ease-out) both; }

/* ---------- Accessibilité clavier ---------- */
a:focus-visible,
button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ---------- Header : soulignement qui se dessine, logo vivant ---------- */
.az-nav a{
  background:linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
  background-origin:border-box;
  transition:color .2s ease, background-size 240ms var(--ease-out);
}
.az-logo svg{ transition:transform 240ms var(--ease-out); }

@media (hover:hover) and (pointer:fine){
  .az-nav a:hover{ background-size:100% 1px; }
  .az-logo:hover svg{ transform:scale(1.14); }
}

/* ---------- Accueil : le triangle avance vers l'action ---------- */
.az-home-tri{ transition:transform 260ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .az-home-section:hover .az-home-tri{ transform:translateX(5px); }
}

/* ---------- Boutons pressables ---------- */
.az-chip{
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform 160ms var(--ease-out);
}
.az-chip:active{ transform:scale(0.96); }

.az-contact-submit{
  transition:background .15s ease, transform 160ms var(--ease-out);
}
.az-contact-submit:active{ transform:scale(0.97); }

.az-project-play-btn{
  transition:transform 200ms var(--ease-out), background-color 200ms ease;
}
.az-project-play-btn:active{ transform:scale(0.94); }
@media (hover:hover) and (pointer:fine){
  .az-project-play-btn:hover{ transform:scale(1.06); background-color:rgba(242,242,242,.14); }
  .az-project-play-btn:hover:active{ transform:scale(0.94); }
}

.az-player-btn{ transition:color .2s ease, transform 160ms var(--ease-out); }
.az-player-btn:active{ transform:scale(0.9); }

.az-waypoint-controls button:active{ background:rgba(150,185,240,.2); }

/* ---------- Grille Projets : apparition en cascade + contenu qui glisse ---------- */
@keyframes az-tile-in{
  from{ opacity:0; transform:translateY(18px) scale(0.985); }
}
.az-projects-main{ animation:none; }
.az-tile{
  animation:az-tile-in 560ms var(--ease-out) both;
  animation-delay:calc(60ms + var(--i, 0) * 60ms);
}
.az-tile-cover{ opacity:0; transition:opacity 600ms ease; }
.az-tile-cover.loaded{ opacity:1; }
.az-tile-cat, .az-tile-bottom{
  transform:translateY(8px);
  transition:transform 150ms ease-out;
}
.az-tile:hover .az-tile-cat,
.az-tile:hover .az-tile-bottom{
  transform:translateY(0);
  transition:transform 300ms var(--ease-out);
}
.az-tile:hover .az-tile-bottom{ transition-delay:40ms; }
@media (hover:none){
  .az-tile-cat, .az-tile-bottom{ transform:none; }
}

/* ---------- Page projet : révélation au défilement ---------- */
.az-reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity 800ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay:calc(var(--d, 0) * 110ms);
}
.az-project-gallery > .az-reveal{ transform:translateY(32px) scale(0.985); }
.az-reveal.in{ opacity:1; transform:none; }
.az-project-gallery-media{ opacity:0; transition:opacity 800ms ease; }
.az-project-gallery-media.loaded{ opacity:1; }

.az-arrow{ display:inline-block; transition:transform 240ms var(--ease-out); }
@media (hover:hover) and (pointer:fine){
  .az-project-nav a.prev:hover .az-arrow{ transform:translateX(-6px); }
  .az-project-nav a.next:hover .az-arrow{ transform:translateX(6px); }
  .az-pin-card-link:hover .az-arrow{ transform:translateX(4px); }
}

/* ---------- Waypoint : épingles ---------- */
.az-pin-dot{ transition:transform 160ms var(--ease-out), background-color .15s ease; }
.az-pin.selected .az-pin-dot{ transform:scale(1.2); }
.az-pin.hl .az-pin-dot{ transform:scale(1.3); }
@media (hover:hover) and (pointer:fine){
  .az-pin:hover .az-pin-dot{ transform:scale(1.3); }
}

/* ---------- Contact ---------- */
.az-contact-field{ transition:color .2s ease; }
.az-contact-field:focus-within{ color:var(--accent); }
.az-contact-field input,
.az-contact-field textarea{ transition:border-color .2s ease; }
.az-contact-sent{ animation:az-fade-up 360ms var(--ease-out) both; }

/* ---------- Mouvement réduit : on garde les changements, on retire le mouvement ---------- */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-delay:0ms !important;
    transition-duration:.01ms !important;
    transition-delay:0ms !important;
  }
}