From 422690c1949baa90e155e88be4d6a71bb98891da Mon Sep 17 00:00:00 2001
From: MVA Global Fret <mvaglobalfret@gmail.com>
Date: Tue, 5 May 2026 22:21:30 +0200
Subject: [PATCH] =?UTF-8?q?Intro:=20bouton=20'Acc=C3=A9der=20au=20site'=20?=
 =?UTF-8?q?visible=20imm=C3=A9diatement,=20sans=20animation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Retire l'état caché (scale 0.05 / opacity 0 / offset -27vh)
- Retire les transitions de révélation (transform/opacity 2.2s)
- Retire l'animation de pulse halo (.cta-btn::after)
- Retire le déclenchement JS via la classe .revealed (l'avion qui croise le centre n'a plus d'effet sur le bouton)

Le bouton est désormais centré au milieu du viewport dès le chargement,
toujours cliquable. Hover conserve le scale 1.04 + shine effect.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 css/parallax.css  | 52 ++++-------------------------------------------
 js/intro-scene.js | 14 +------------
 2 files changed, 5 insertions(+), 61 deletions(-)

diff --git a/css/parallax.css b/css/parallax.css
index 16bb837..5c521e5 100644
--- a/css/parallax.css
+++ b/css/parallax.css
@@ -118,22 +118,12 @@ html, body {
 .layer-three { display: block; z-index: 2; }
 
 /* ── BOUTON CTA centré ────────────────────────────────────────────────────
-   État caché : positionné là où l'avion est au centre de sa course
-   (~27% au-dessus du centre du viewport), à scale ≈ 0. Quand le JS
-   ajoute la classe `.revealed` (au moment où l'avion atteint p ≥ 0.5),
-   les variables CSS basculent et le bouton « sort » de l'avion en
-   grossissant jusqu'à sa taille finale au centre. */
+   Visible immédiatement au chargement, parfaitement centré, sans animation. */
 .cta-btn {
-  --cta-y: -27vh;     /* offset vertical : 0 = centré */
-  --cta-scale: 0.05;
-  --cta-opacity: 0;
-
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%, calc(-50% + var(--cta-y))) scale(var(--cta-scale));
-  opacity: var(--cta-opacity);
-  pointer-events: none;
+  transform: translate(-50%, -50%);
   z-index: 10;
   display: inline-flex;
   align-items: center;
@@ -151,30 +141,13 @@ html, body {
   white-space: nowrap;
   box-shadow:
     0 20px 60px rgba(197, 165, 90, 0.55),
-    0 0 0 0 rgba(197, 165, 90, 0.4),
     inset 0 1px 0 rgba(255, 255, 255, 0.45);
-  transition:
-    transform 2.2s cubic-bezier(0.34, 1.4, 0.64, 1),
-    opacity 0.9s ease 0.1s,
-    box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
-.cta-btn.revealed {
-  --cta-y: 0vh;
-  --cta-scale: 1;
-  --cta-opacity: 1;
-  pointer-events: auto;
-}
-
-/* Hover seulement après la révélation, avec une transition rapide */
-.cta-btn.revealed:hover {
-  --cta-scale: 1.04;
-  transition:
-    transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
-    box-shadow 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
+.cta-btn:hover {
+  transform: translate(-50%, -50%) scale(1.04);
   box-shadow:
     0 28px 75px rgba(197, 165, 90, 0.7),
-    0 0 0 12px rgba(197, 165, 90, 0.12),
     inset 0 1px 0 rgba(255, 255, 255, 0.55);
 }
 
@@ -195,23 +168,6 @@ html, body {
 }
 .cta-btn:hover i { transform: translateX(8px); }
 
-.cta-btn::after {
-  content: '';
-  position: absolute;
-  inset: -3px;
-  border-radius: 50px;
-  border: 2px solid rgba(197, 165, 90, 0.55);
-  animation: none;   /* halo dormant tant que le bouton n'est pas révélé */
-  pointer-events: none;
-}
-.cta-btn.revealed::after {
-  animation: ctaPulse 2.8s ease-out 1s infinite;   /* démarre après l'arrivée du bouton */
-}
-@keyframes ctaPulse {
-  0%   { transform: scale(1);    opacity: 0.7; }
-  100% { transform: scale(1.18); opacity: 0;   }
-}
-
 /* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
 @media (max-width: 768px) {
   .parallax-header { padding: 14px 18px; }
diff --git a/js/intro-scene.js b/js/intro-scene.js
index 5e6c83c..b19d2a9 100644
--- a/js/intro-scene.js
+++ b/js/intro-scene.js
@@ -281,12 +281,7 @@ window.addEventListener('touchcancel', endTouch, { passive: true });
 
 const root = document.documentElement;
 
-/* ── Révélation du CTA ─────────────────────────────────────────────────
-   Quand l'avion arrive au centre de l'écran (p ≥ 0.5), on bascule la
-   classe `.revealed` sur le bouton. La CSS gère l'animation (translate
-   du haut vers le centre + scale 0.05 → 1, ~1.2 s). */
-const ctaBtn = document.querySelector('.cta-btn');
-let ctaRevealed = false;
+/* Le bouton CTA est désormais visible et centré dès le chargement. */
 
 /* ── Render loop ───────────────────────────────────────────────────────── */
 const clock = new THREE.Clock();
@@ -328,13 +323,6 @@ function tick() {
   }
   updateParcels(dt, t);
 
-  /* Au moment où l'avion atteint le centre, on déclenche la sortie du
-     CTA (l'animation CSS s'en occupe ensuite). One-shot. */
-  if (!ctaRevealed && p >= 0.5) {
-    ctaRevealed = true;
-    ctaBtn?.classList.add('revealed');
-  }
-
   /* Avec nez à -X et up = +Y :
      - rotation.z = PITCH (négatif = nez en l'air)
      - rotation.x = ROLL