/* Scène animée du bandeau : réparation → démarrage → départ à gauche → retour et stationnement. Boucle 16 s. */
.hero .hero-scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: hidden; }
.hero-scene * { transform-box: view-box; }
.hero-scene .hs-drive { animation: hsDrive 16s infinite; }
.hero-scene .hs-lift { animation: hsLift 16s infinite; }
.hero-scene .hs-shake { animation: hsShake 16s infinite; }
.hero-scene .hs-wheel { transform-box: fill-box; transform-origin: center; animation: hsWheel 16s infinite; }
.hero-scene .hs-lights { animation: hsLights 16s infinite; }
.hero-scene .hs-streaks { opacity: 0; animation: hsStreaks 16s infinite; }
.hero-scene .hs-jack { animation: hsJack 16s infinite; }
.hero-scene .hs-puff circle { transform-box: fill-box; transform-origin: center; opacity: 0; animation: hsPuff 16s infinite; }
.hero-scene .hs-tech { animation: hsCrew 16s infinite; animation-delay: var(--d); }
.hero-scene .hs-arm { animation: hsArm .7s ease-in-out infinite alternate; }
.hero-scene .hs-tech.b .hs-arm { animation-duration: .45s; }
.hero-scene .hs-arm.still { animation: hsTablet 2.4s ease-in-out infinite; }
.hero-scene .hs-screen { animation: hsScreen 1.2s steps(2) infinite; }
.hero-scene .hs-sparks { animation: hsWork 16s infinite; }
.hero-scene .hs-sparks circle { opacity: 0; animation: hsSpark .6s ease-out infinite; }
.hero-scene .hs-check { transform-box: fill-box; transform-origin: center; opacity: 0; animation: hsCheck 16s infinite; }

/* voiture : 0-44 % garée, 44-54 % départ à gauche (accélération), hors champ, 70-84 % retour par la droite (freinage) */
@keyframes hsDrive {
  0%, 44% { transform: translateX(0); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, .95, .45); }
  53.5% { transform: translateX(-1480px); opacity: 1; }
  54%, 69.5% { transform: translateX(1100px); opacity: 0; }
  70% { transform: translateX(1100px); opacity: 1; animation-timing-function: cubic-bezier(.12, .7, .3, 1); }
  84% { transform: translateX(-10px); animation-timing-function: ease-in-out; }
  87%, 100% { transform: translateX(0); opacity: 1; }
}
@keyframes hsLift { 0%, 34% { transform: translateY(-7px); } 37%, 100% { transform: translateY(0); } }
@keyframes hsJack { 0%, 34% { opacity: 1; transform: translateY(-2px); } 37% { opacity: 0; transform: translateY(6px); } 90% { opacity: 0; transform: translateY(6px); } 96%, 100% { opacity: 1; transform: translateY(-2px); } }
@keyframes hsShake {
  0%, 40% { transform: translate(0, 0) rotate(0); }
  40.6% { transform: translate(0, -1.6px); } 41.2% { transform: translate(0, 1px); } 41.8% { transform: translate(0, -1.2px); }
  42.4% { transform: translate(0, .8px); } 43% { transform: translate(0, -.8px); } 43.6%, 44% { transform: translate(0, 0); }
  46% { transform: translate(0, 1.5px); } 48%, 84% { transform: translate(0, 0); }
  85.5% { transform: translate(0, 2px); } 87%, 100% { transform: translate(0, 0); }
}
@keyframes hsWheel {
  0%, 44% { transform: rotate(0); animation-timing-function: cubic-bezier(.55, 0, .95, .45); }
  54%, 70% { transform: rotate(2520deg); animation-timing-function: cubic-bezier(.12, .7, .3, 1); }
  84%, 100% { transform: rotate(4320deg); }
}
@keyframes hsLights { 0%, 40% { opacity: 0; } 40.8% { opacity: 1; } 41.6% { opacity: .2; } 42.4%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }
@keyframes hsStreaks { 0%, 46% { opacity: 0; } 49%, 53% { opacity: 1; } 54%, 70% { opacity: 0; } 72% { opacity: .8; } 80%, 100% { opacity: 0; } }
@keyframes hsPuff {
  0%, 40% { opacity: 0; transform: translate(0, 0) scale(.4); }
  42% { opacity: .9; transform: translate(10px, -2px) scale(1); }
  46% { opacity: 0; transform: translate(60px, -12px) scale(2.4); }
  100% { opacity: 0; }
}
/* équipe : travaille 0-34 %, s'écarte, revient une fois la voiture garée */
@keyframes hsCrew {
  0%, 33% { opacity: 1; transform: translateX(0); }
  38% { opacity: 0; transform: translateX(var(--out)); }
  91% { opacity: 0; transform: translateX(var(--out)); }
  97%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes hsArm { from { transform: rotate(-32deg); } to { transform: rotate(12deg); } }
@keyframes hsTablet { 0%, 100% { transform: rotate(-38deg); } 50% { transform: rotate(-30deg); } }
@keyframes hsScreen { 50% { fill: #9ed0ff; } }
@keyframes hsWork { 0%, 32% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes hsSpark { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--sx), var(--sy)); } }
@keyframes hsCheck {
  0%, 34% { opacity: 0; transform: scale(.2); }
  36.5% { opacity: 1; transform: scale(1.25); } 38% { opacity: 1; transform: scale(1); }
  42% { opacity: 1; transform: scale(1); } 44%, 100% { opacity: 0; transform: scale(.6); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene *, .hero-scene .hs-drive { animation: none !important; }
  .hero-scene .hs-crew, .hero-scene .hs-streaks, .hero-scene .hs-jack { display: none; }
}

/* ---- Logo GME animé ---- */
.alogo { position: relative; display: inline-block; aspect-ratio: 1400 / 725; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .65)); isolation: isolate; }
.alogo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.alogo .al-white { animation: alIn .9s cubic-bezier(.2, .8, .2, 1) both; }
.alogo .al-red { transform-origin: 50% 30%; animation: alDrop .9s cubic-bezier(.3, 1.6, .5, 1) .35s both, alRev 16s linear 1.3s infinite; }
/* faisceau façon phare : tourne lentement derrière le logo, le rétro-éclaire par intermittence */
.alogo .al-beam { position: absolute; inset: -55% -20%; pointer-events: none; z-index: 0; opacity: .5; mix-blend-mode: screen;
  background: conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, 0) 0deg, rgba(255, 246, 230, .05) 6deg, rgba(255, 246, 230, .55) 11deg, rgba(255, 246, 230, .05) 16deg, rgba(255, 255, 255, 0) 24deg, rgba(255, 255, 255, 0) 360deg);
  filter: blur(3px); animation: alBeam 9s linear infinite; }
.alogo .al-glow { position: absolute; left: 30%; right: 30%; top: -8%; height: 70%; border-radius: 50%; z-index: 0;
  background: radial-gradient(ellipse at center, rgba(255, 40, 48, .75), rgba(255, 40, 48, 0) 68%); filter: blur(6px); opacity: .25;
  animation: alGlow 16s linear 1.3s infinite; pointer-events: none; }
/* fumée cinématique : quelques volutes floues qui dérivent doucement derrière le logo */
.alogo .al-smoke { position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; mix-blend-mode: screen; filter: blur(14px);
  background: radial-gradient(circle at 50% 50%, rgba(230, 234, 240, .5), rgba(230, 234, 240, 0) 70%); }
.alogo .al-smoke-1 { left: 8%; bottom: -20%; width: 46%; height: 90%; opacity: 0; animation: alSmoke1 13s ease-in-out infinite; }
.alogo .al-smoke-2 { right: 4%; bottom: -30%; width: 40%; height: 80%; opacity: 0; animation: alSmoke2 17s ease-in-out 4s infinite; }
.alogo .al-sheen { position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.95) 50%, rgba(255,255,255,0) 58%) no-repeat; background-size: 300% 100%; background-position: 150% 0;
  -webkit-mask: url(../assets/logo-full-white.png) center / contain no-repeat; mask: url(../assets/logo-full-white.png) center / contain no-repeat;
  mix-blend-mode: screen; animation: alSheen 16s ease-in-out 1.3s infinite; }
.alogo:hover .al-red { animation: alHop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes alIn { from { opacity: 0; transform: translateY(10px) scale(.96); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes alDrop { 0% { opacity: 0; transform: translateY(-60%) scale(1.25) rotate(-6deg); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
/* synchronisé avec la scène : le chevron s'allume au démarrage (≈ 40-46 %) et à l'arrivée (≈ 84-87 %) — sans se déplacer */
@keyframes alRev {
  0%, 39% { filter: none; }
  40.5% { filter: brightness(1.5) drop-shadow(0 0 10px rgba(255, 60, 60, .9)); }
  42% { filter: brightness(1.2); } 43.5% { filter: brightness(1.4) drop-shadow(0 0 8px rgba(255, 60, 60, .8)); }
  47%, 83% { filter: none; }
  85% { filter: brightness(1.3); } 87.5%, 100% { filter: none; }
}
@keyframes alGlow { 0%, 39% { opacity: .25; } 41% { opacity: 1; } 47% { opacity: .35; } 84% { opacity: .35; } 86% { opacity: .9; } 90%, 100% { opacity: .25; } }
@keyframes alBeam { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes alSmoke1 {
  0% { opacity: 0; transform: translate(0, 0) scale(.85) rotate(0deg); }
  15% { opacity: .22; } 50% { opacity: .3; transform: translate(6%, -30%) scale(1.15) rotate(8deg); }
  85% { opacity: .12; } 100% { opacity: 0; transform: translate(12%, -55%) scale(1.3) rotate(14deg); }
}
@keyframes alSmoke2 {
  0% { opacity: 0; transform: translate(0, 0) scale(.9) rotate(0deg); }
  20% { opacity: .18; } 55% { opacity: .26; transform: translate(-8%, -35%) scale(1.2) rotate(-10deg); }
  88% { opacity: .1; } 100% { opacity: 0; transform: translate(-14%, -60%) scale(1.35) rotate(-16deg); }
}
@keyframes alSheen { 0%, 2% { background-position: 150% 0; } 10% { background-position: -50% 0; } 10.1%, 52% { background-position: 150% 0; } 60%, 100% { background-position: -50% 0; } }
@keyframes alHop { 50% { transform: translateY(-10%) scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .alogo * { animation: none !important; } .alogo .al-beam, .alogo .al-smoke { display: none; } }