/* ── Motion design de l'Académie (accueil, bootcamps, mentorat) ─────────────
   Couleurs du site uniquement : cyan #00d4ff, fond nuit #0a0a14, or #f59e0b.
   Tous les états de départ dépendent de html.am-on, posée par academie-motion.js :
   sans JavaScript ou avec « réduire les animations », la page reste telle quelle. */

/* 1. Transition entre les pages : la caméra recule sur l'ancienne page,
      la nouvelle arrive en plan rapproché derrière un rideau qui se lève.
      Navigateurs compatibles uniquement (Chrome, Edge, Safari récents). */
@view-transition { navigation: auto; }
::view-transition-group(root) { animation-duration: .9s; }
::view-transition-old(root) {
  animation: am-cam-recule .9s cubic-bezier(.65,0,.35,1) both;
  transform-origin: 50% 40%;
}
::view-transition-new(root) {
  animation: am-cam-arrive .9s cubic-bezier(.16,1,.3,1) both;
  transform-origin: 50% 30%;
}
@keyframes am-cam-recule {
  to { transform: scale(.88) translateY(-2%); filter: brightness(.35) blur(3px); border-radius: 22px; }
}
@keyframes am-cam-arrive {
  from { transform: scale(1.12); clip-path: inset(100% 0 0 0); filter: brightness(1.4) saturate(.6); }
  45% { filter: brightness(1.15) saturate(.8); }
  to { transform: scale(1); clip-path: inset(0 0 0 0); filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* Le menu ne bouge pas pendant la transition */
nav { view-transition-name: am-nav; }

/* Ligne cyan qui balaie l'écran au moment du rideau */
html.am-on::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 10000;
  background: linear-gradient(90deg, transparent, #00d4ff 30%, #fff 50%, #00d4ff 70%, transparent);
  box-shadow: 0 0 18px 2px rgba(0,212,255,.6);
  transform: translateY(100vh); opacity: 0; pointer-events: none;
}
html.am-on.am-arrivee::before { animation: am-balayage .95s cubic-bezier(.16,1,.3,1) both; }
@keyframes am-balayage {
  0% { transform: translateY(100vh); opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(-4px); opacity: 0; }
}

/* Barre de progression de lecture */
.am-progression {
  position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 9999; pointer-events: none;
  background: linear-gradient(90deg, #00d4ff, rgba(0,212,255,.35));
  transform-origin: 0 50%; transform: scaleX(0);
}

/* 2. Héros : plan large qui se resserre au chargement, puis la caméra plonge au défilement */
.am-on .am-hero { isolation: isolate; }
.am-on .am-hero-media { will-change: transform; transform-origin: 50% 45%; }
.am-on .am-hero-media img, .am-on img.am-hero-media {
  animation: am-dezoom 2.4s cubic-bezier(.16,1,.3,1) both, am-derive 24s ease-in-out 2.4s infinite alternate;
}
@keyframes am-dezoom { from { scale: 1.32; filter: blur(8px) brightness(.5); } to { scale: 1; filter: none; } }
/* Après l'ouverture, la photo continue de respirer très lentement */
@keyframes am-derive { from { scale: 1; } to { scale: 1.07; } }
.am-on .am-cadre-hero { overflow: hidden; }
.am-on img.am-hero-media { transform-origin: 50% 0; animation-name: am-dezoom; }

/* Reflet de lumière qui traverse la photo de temps en temps */
.am-reflet { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(0,212,255,.10) 46%, rgba(255,255,255,.20) 50%, rgba(0,212,255,.10) 54%, transparent 62%);
  background-size: 260% 100%; background-position: 160% 0; animation: am-reflet 10s cubic-bezier(.65,0,.35,1) 2.1s infinite; }
@keyframes am-reflet { 0% { background-position: 160% 0; } 22%, 100% { background-position: -60% 0; } }

/* Ouverture cinéma : deux bandes noires qui s'écartent */
.am-cinema { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.am-cinema::before, .am-cinema::after { content: ""; position: absolute; left: 0; right: 0; height: 50%; background: #0a0a14;
  transition: transform 1.25s cubic-bezier(.76,0,.24,1) .1s; }
.am-cinema::before { top: 0; transform-origin: 50% 0; box-shadow: 0 1px 0 rgba(0,212,255,.5); }
.am-cinema::after { bottom: 0; transform-origin: 50% 100%; box-shadow: 0 -1px 0 rgba(0,212,255,.5); }
.am-pret .am-cinema::before, .am-pret .am-cinema::after { transform: scaleY(0); }

/* Éléments du héros qui montent après le titre */
.am-on .am-monte { opacity: 0; translate: 0 26px; filter: blur(4px);
  transition: opacity .7s ease, translate .9s cubic-bezier(.16,1,.3,1), filter .7s ease; transition-delay: var(--d, 0s); }
.am-on .am-pret .am-monte { opacity: 1; translate: 0 0; filter: none; }
/* Devise : le mot en cyan se souligne */
.am-on .hero-motto-full em { background: linear-gradient(#00d4ff, #00d4ff) 0 100% / 0 2px no-repeat; padding-bottom: 2px;
  transition: background-size 1s cubic-bezier(.65,0,.35,1) 2s; }
.am-on .am-pret .hero-motto-full em { background-size: 100% 2px; }

/* Le titre reste caché le temps d'être découpé (évite un éclair) */
.am-on .hero h1:not(.am-decoupe) { visibility: hidden; }

/* Points lumineux, sur trois plans */
.am-points { z-index: 1; }
.am-plan { position: absolute; inset: -40px; }
.am-point { position: absolute; animation: am-scintille 4s ease-in-out infinite; }
@keyframes am-scintille { 0%, 100% { opacity: .15; } 50% { opacity: .8; } }
.am-on .am-hero-texte { will-change: transform, opacity; }

/* Voile qui s'assombrit quand on quitte le héros */
.am-voile { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(10,10,20,.9) 100%), rgba(10,10,20,.35); }

/* Décor en profondeur pour les héros sans photo (Bootcamps) */
.am-decor { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.am-decor > * { position: absolute; will-change: transform; }
.am-grille {
  left: -20%; right: -20%; bottom: -10%; height: 70%;
  background-image: linear-gradient(rgba(0,212,255,.16) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,212,255,.16) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 85%);
          mask-image: linear-gradient(to top, #000 10%, transparent 85%);
  transform-origin: 50% 100%;
}
.am-halo { border-radius: 50%; filter: blur(60px); }
.am-halo.a { width: 520px; height: 520px; left: -140px; top: -180px; background: rgba(0,212,255,.22); }
.am-halo.b { width: 420px; height: 420px; right: -120px; top: 10%; background: rgba(0,212,255,.12); }
.am-halo.c { width: 300px; height: 300px; left: 40%; bottom: -160px; background: rgba(245,158,11,.10); }
.am-point { width: 3px; height: 3px; border-radius: 50%; background: #00d4ff; box-shadow: 0 0 8px #00d4ff; opacity: .55; }
.am-hero > h1, .am-hero > p, .am-hero > .hero-texte, .am-hero > .hero-photo { position: relative; z-index: 2; }

/* 3. Titre principal : chaque lettre se pose, du flou au net (l'ombre du texte reste entière) */
.am-on .am-mot { display: inline-block; white-space: nowrap; }
.am-on .am-lettre {
  display: inline-block; translate: 0 .55em; rotate: 0 0 1 6deg; opacity: 0; filter: blur(8px);
  transition: translate .95s cubic-bezier(.16,1,.3,1), rotate .95s cubic-bezier(.16,1,.3,1), opacity .5s ease, filter .7s ease;
  transition-delay: calc(var(--i) * 22ms + 250ms);
}
.am-on .am-titre-vu .am-lettre { translate: 0 0; rotate: 0 0 1 0deg; opacity: 1; filter: none; }

/* 4. Titres de section : les mots passent du flou au net, comme une mise au point */
.am-on .am-flou {
  display: inline-block; opacity: 0; filter: blur(10px); translate: 0 .35em;
  transition: opacity .7s ease, filter .8s cubic-bezier(.16,1,.3,1), translate .8s cubic-bezier(.16,1,.3,1);
  transition-delay: calc(var(--i) * 45ms);
}
.am-on .am-titre-vu .am-flou { opacity: 1; filter: blur(0); translate: 0 0; }

/* 5. Chapitres : la caméra avance vers la section qui arrive et recule quand on la quitte */
.am-on .am-chapitre { transform-origin: 50% 0; will-change: scale, translate; }

/* 6. Photos : plan rapproché qui recule jusqu'au cadrage d'origine en entrant dans l'écran */
.am-on .am-cadre { overflow: hidden; }
.am-on .am-cadre > img { will-change: scale; }

/* 7. Cartes : entrée échelonnée, de loin vers le premier plan */
.am-on .am-carte {
  opacity: 0; translate: 0 48px; scale: .94; filter: blur(4px);
  transition: opacity .6s ease, translate .9s cubic-bezier(.16,1,.3,1), scale .9s cubic-bezier(.16,1,.3,1), filter .7s ease;
  transition-delay: calc(var(--i) * 70ms);
}
.am-on .am-carte.am-vu { opacity: 1; translate: 0 0; scale: 1; filter: none; }

@media (max-width: 900px) {
  .am-halo.a { width: 320px; height: 320px; }
  .am-halo.b { width: 260px; height: 260px; }
  .am-grille { background-size: 40px 40px; }
}