Add 3D plane fly-by intro that reveals the CTA on landing

Hero animation: a 3D airliner enters from the lower-left climbing,
crosses the viewport at near-1:1 scale around 50% of the timeline,
then exits top-right and shrinks. CTA stays hidden during the flyby
and fades in once the plane has cleared the frame; the gold pulse
halo is delayed to start with the reveal.

The plane asset is microsoft/fluentui-emoji's Airplane/3D, MIT.
Total intro is ~3.9s before the CTA is interactable; reduced-motion
short-circuits the whole sequence and shows the button immediately.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

css/parallax.css

@@ -115,6 +115,41 @@ html, body {
     linear-gradient(180deg, rgba(5, 5, 24, 0.25) 0%, rgba(5, 5, 24, 0.5) 100%);
 }
 
+/* ── HERO PLANE — vol traversant qui révèle le CTA ──────────────────────
+   L'avion vient du bas-gauche en grimpant (vol décollage), traverse
+   l'écran en passant au centre, puis sort en haut-droite. Pendant ce
+   temps, le bouton reste caché. À la sortie de l'avion, le bouton
+   apparaît en fade. */
+.hero-plane {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 360px;
+  height: auto;
+  z-index: 20;
+  pointer-events: none;
+  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45));
+  transform-origin: 50% 50%;
+  animation: plane-flyby 3.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) 0.3s forwards;
+}
+
+@keyframes plane-flyby {
+  0% {
+    transform: translate(-160vw, 50vh) rotate(-15deg) scale(0.45);
+    opacity: 0;
+  }
+  12% { opacity: 1; }
+  50% {
+    transform: translate(-50%, -50%) rotate(-8deg) scale(1.0);
+    opacity: 1;
+  }
+  88% { opacity: 1; }
+  100% {
+    transform: translate(120vw, -120vh) rotate(-22deg) scale(0.65);
+    opacity: 0;
+  }
+}
+
 /* ── BOUTON CTA centré ──────────────────────────────────────────────────── */
 .cta-btn {
   position: absolute;
@@ -126,6 +161,9 @@ html, body {
     calc(-50% + var(--my) * 8px)
   );
   z-index: 10;
+  /* Caché jusqu'à la sortie de l'avion, puis fade in */
+  opacity: 0;
+  animation: cta-reveal 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 3.2s forwards;
   display: inline-flex;
   align-items: center;
   gap: 16px;
@@ -182,7 +220,8 @@ html, body {
   inset: -3px;
   border-radius: 50px;
   border: 2px solid rgba(197, 165, 90, 0.55);
-  animation: ctaPulse 2.8s ease-out infinite;
+  /* Démarre le halo après la révélation du bouton (3.2s + 0.7s) */
+  animation: ctaPulse 2.8s ease-out 3.9s infinite;
   pointer-events: none;
 }
 @keyframes ctaPulse {
@@ -190,6 +229,11 @@ html, body {
   100% { transform: scale(1.18); opacity: 0;   }
 }
 
+@keyframes cta-reveal {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
 /* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
 @media (max-width: 768px) {
   .parallax-header { padding: 14px 18px; }
@@ -201,8 +245,12 @@ html, body {
     padding: 16px 36px;
     font-size: 0.98rem;
   }
+
+  .hero-plane { width: 220px; }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .cta-btn::after { animation: none; }
+  .hero-plane    { display: none; }
+  .cta-btn       { opacity: 1; animation: none; }
 }

index.html

@@ -36,6 +36,9 @@
 
     <div class="layer layer-tint"></div>
 
+    <!-- Avion qui traverse l'écran à l'arrivée — masque/révèle le CTA -->
+    <img class="hero-plane" src="assets/plane.png" alt="" aria-hidden="true">
+
     <a href="accueil.html" class="cta-btn">
       <span class="cta-btn-shine"></span>
       <span data-i18n="intro.ctaBtn">Accéder au site</span>