/* =========================================================
   Explore Digital — animations
   Règle d'or : sans JavaScript ou avec « réduire les animations »
   activé, tout le contenu reste visible et immobile.
   Sommaire :
   1. Apparition du premier écran  2. Mots qui défilent
   3. Vidéo et pastilles  4. Bandeau qui défile
   5. Apparition au défilement  6. Survols  7. Halo du curseur
   8. Mouvements réduits
   ========================================================= */

/* ---------- 1. Apparition du premier écran (CSS seul) ---------- */
/* Glissement sans fondu : un élément presque transparent au premier affichage n'est pas retenu
   par Chrome comme « plus grand élément affiché » (LCP), et PageSpeed afficherait NO_LCP. */
@keyframes rise {
  from { transform: translateY(26px); }
  to   { transform: none; }
}
.hero-in { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > .hero-in:nth-child(1) { animation-delay: .05s; }
.hero-copy > .hero-in:nth-child(2) { animation-delay: .15s; }
.hero-copy > .hero-in:nth-child(3) { animation-delay: .3s; }
.hero-copy > .hero-in:nth-child(4) { animation-delay: .4s; }
.hero-copy > .hero-in:nth-child(5) { animation-delay: .5s; }
.hero-copy > .hero-in:nth-child(6) { animation-delay: .6s; }
.hero .visual.hero-in { animation-delay: .35s; animation-duration: 1.1s; }

/* ---------- 2. Mots qui défilent (5 mots, 2,4 s chacun) ---------- */
@keyframes word {
  0%   { opacity: 0; transform: translateY(55%); filter: blur(4px); }
  4%   { opacity: 1; transform: none; filter: none; }
  18%  { opacity: 1; transform: none; filter: none; }
  22%  { opacity: 0; transform: translateY(-55%); filter: blur(4px); }
  100% { opacity: 0; transform: translateY(-55%); }
}
.rotator-words > span { animation: word 12s ease-in-out infinite both; }
.rotator-words > span:nth-child(2) { animation-delay: 2.4s; }
.rotator-words > span:nth-child(3) { animation-delay: 4.8s; }
.rotator-words > span:nth-child(4) { animation-delay: 7.2s; }
.rotator-words > span:nth-child(5) { animation-delay: 9.6s; }

/* ---------- 3. Vidéo (contour lumineux qui tourne) et pastilles flottantes ---------- */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes spin-angle { to { --angle: 360deg; } }
.media-glow { border: 0; }
.media-glow::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  padding: 1.5px;
  background: conic-gradient(from var(--angle), rgba(57, 213, 232, .2) 0deg, rgba(57, 213, 232, .2) 220deg, #39d5e8 290deg, rgba(57, 213, 232, .2) 340deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: spin-angle 6s linear infinite;
}

@keyframes float {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -12px, 0); }
}
.chip { animation: float 3.6s ease-in-out infinite alternate; }
.chip-2 { animation-duration: 4.4s; animation-delay: -1.2s; }
.chip-3 { animation-duration: 5s; animation-delay: -2.4s; }

/* Bouton principal : reflet lumineux qui passe régulièrement */
@keyframes shine {
  0%, 70% { transform: translateX(-120%) skewX(-20deg); }
  100%    { transform: translateX(220%) skewX(-20deg); }
}
.btn-glow { overflow: hidden; box-shadow: 0 10px 34px -10px rgba(57, 213, 232, .65); }
.btn-glow::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: shine 4.5s ease-in-out infinite;
  pointer-events: none;
}

/* ---------- 4. Bandeau qui défile (pause au survol) ---------- */
@keyframes marquee { to { transform: translateX(-100%); } }
.marquee-track { animation: marquee 38s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------- 5. Apparition au défilement ----------
   animations.js ajoute .reveal-hidden uniquement aux blocs situés plus bas que l'écran,
   puis .is-visible quand ils arrivent. */
/* Sélecteur renforcé ([data-reveal]) pour l'emporter sur les transitions des cartes */
[data-reveal].reveal-hidden {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
}
[data-reveal].reveal-hidden.is-visible { opacity: 1; transform: none; }

/* Ligne de la méthode et anneau du portrait */
.timeline::after { transition: transform .2s linear; }
.portrait-ring { animation: spin-angle 7s linear infinite; }

/* ---------- 6. Survols ---------- */
.btn { transition: background .2s ease, transform .2s ease, box-shadow .2s ease; }
.btn:hover { transform: translateY(-2px); }
.navlinks a::after { transition: transform .3s ease; }
.service, .quote { transition: border-color .3s ease, transform .5s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.service::before, .quote::before { transition: opacity .4s ease; }
.service-media img { transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .5s ease; }
.service:hover .service-media img { transform: scale(1.07); opacity: 1; }
.service-link .i { transition: transform .25s ease; }
.service-link:hover .i { transform: translateX(4px); }
.work-open img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.work-open:hover img { transform: scale(1.045); }
.work-open::after { transition: opacity .35s ease; }
.prof { transition: background .35s ease, border-color .35s ease, transform .35s ease; }
.prof:hover { transform: translateY(-4px); }
.prof strong, .prof > span:last-child, .prof-icon { transition: color .35s ease, background .35s ease; }
.site-header { transition: background .3s ease, border-color .3s ease; }

/* Galerie : apparition lors d'un changement de filtre */
@keyframes pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.work.is-shown { animation: pop .45s ease both; }

/* Visionneuse */
@keyframes zoom-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.lightbox[open] img { animation: zoom-in .35s ease both; }

/* ---------- 7. Halo qui suit le curseur (ordinateur uniquement) ---------- */
.cursor-glow {
  position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;
  width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(57, 213, 232, .09), transparent 62%);
  opacity: 0; transition: opacity .5s ease;
}
.cursor-glow.is-on { opacity: 1; }

/* ---------- 8. Mouvements réduits (réglage d'accessibilité du visiteur) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  [data-reveal].reveal-hidden { opacity: 1; transform: none; }
  .rotator-words > span:first-child { opacity: 1; }
  .btn-glow::before, .cursor-glow, .hero-canvas { display: none; }
  .btn:hover { transform: none; }
}