/* ============================================================
   READY TO ROCK — Hero FPV scroll-driven (intégration V4)
   Styles scopés .rtr-* — purement additif, ne touche à rien de V4.
   ============================================================ */

/* Placeholder du player Wistia Project Titan avant définition */
  wistia-player[media-id='cw0x4c70y9']:not(:defined) {
    background: center / contain no-repeat url('https://fast.wistia.com/embed/medias/cw0x4c70y9/swatch');
    display: block;
    filter: blur(5px);
    padding-top: 56.25%;
  }

.rtr-hero, .rtr-hero *,
.rtr-demo, .rtr-demo * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body.rtr-scroll-locked {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  overscroll-behavior: none;
}


/* ============ HERO ============ */
.rtr-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: #04090c;
  font-family: 'Quicksand', system-ui, -apple-system, sans-serif;
  color: #ffffff;
  isolation: isolate;
}

/* ============ Layers révélés quand les portes s'écartent ============ *
 * Ordre z-index : bg (0) → overlay (1) → stage Project Titan (2) → portes (5)
 * Pendant le scrub FPV ces layers sont masqués par les portes (qui couvrent
 * 100% du viewport). À la fin, les portes glissent et révèlent la vidéo
 * Project Titan centrée sur un fond montagne assombri. */

.rtr-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  background-color: #04090c;
  animation: rtrKenBurns 24s ease-in-out infinite alternate;
}

@keyframes rtrKenBurns {
  0%   { transform: scale(1.04); }
  100% { transform: scale(1.12); }
}

.rtr-hero__bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(135deg,
      rgba(0, 61, 90, 0.45) 0%,
      rgba(2, 43, 61, 0.65) 50%,
      rgba(9, 9, 9, 0.85) 100%);
  pointer-events: none;
}

/* Stage Project Titan : vidéo Wistia, taille réduite ~5% par rapport
   à la version d'origine (82vw → 78vw, 1180px → 1120px). Encadrée
   gold subtil, respiration scale légère. */
.rtr-hero__stage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: min(78vw, 1120px);
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(249, 176, 0, 0.35),
    0 0 80px rgba(0, 61, 90, 0.55),
    0 30px 90px rgba(0, 0, 0, 0.6);
  background: #04090c;
  animation: rtrStageBreathe 6s ease-in-out infinite;
}

@keyframes rtrStageBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);     }
  50%      { transform: translate(-50%, -50%) scale(1.012); }
}

.rtr-hero__stage wistia-player {
  width: 100%;
  height: 100%;
  display: block;
}

/* Bandeau "Bienvenue — Regardez la vidéo" collé en haut du player.
   Position absolue À L'INTÉRIEUR du stage, ~5 mm du bord supérieur.
   pointer-events: none → le clic passe à Wistia. Se masque on play. */
.rtr-hero__welcome {
  position: absolute;
  top: clamp(14px, 1.8vh, 22px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 9px 20px;
  background: rgba(4, 9, 12, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #ffffff;
  font-family: 'Jura', system-ui, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(0.7rem, 1vw, 0.88rem);
  letter-spacing: 0.26em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  user-select: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.rtr-hero__welcome.is-hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
}
.rtr-hero__welcome-tag {
  color: #ffffff;
  font-weight: 800;
}
.rtr-hero__welcome-text {
  opacity: 0.88;
  font-weight: 600;
}
.rtr-hero__welcome-arrow {
  display: inline-block;
  font-size: 0.95em;
  color: #ffffff;
  opacity: 0.85;
  animation: rtrWelcomeArrow 1.6s ease-in-out infinite;
}
@keyframes rtrWelcomeArrow {
  0%, 100% { transform: translateY(0);   opacity: 0.85; }
  50%      { transform: translateY(4px); opacity: 0.4;  }
}

/* ============ PORTES ============
   Chaque porte a UN CANVAS qui montre SA MOITIÉ de la frame courante.
   Le titre / logo / signature restent sur la porte et glissent avec elle.

   IMPORTANT — anti-flash au chargement : la porte est OPAQUE dès le départ
   (fond sombre + poster de la 1re frame de la crête). Tant que le canvas
   n'a pas dessiné sa 1re image, on voit la crête (poster) et JAMAIS la
   vidéo Project Titan qui est derrière. La vidéo n'est révélée qu'à
   l'ouverture des portes, quand celles-ci glissent hors champ. */
.rtr-door {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
  z-index: 5;
  will-change: transform;
  background-color: #04090c;           /* base opaque : jamais la vidéo derrière avant le 1er dessin */
  background-repeat: no-repeat;
}
/* Poster = 1re frame du vol. Chaque porte affiche SA moitié (200% = pleine
   largeur du hero), alignée au seam, en attendant que le canvas prenne le relais. */
.rtr-door--left  {
  left: 0;
  background-image: url('../fpv/frames/frame-0000.jpg');
  background-size: 200% 100%;
  background-position: left top;
}
.rtr-door--right {
  left: 50%;
  background-image: url('../fpv/frames/frame-0000.jpg');
  background-size: 200% 100%;
  background-position: right top;
}

.rtr-door__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Titre découpé par mots, comme dans l'original. Quand les portes sont
   fermées, le titre apparaît centré au-dessus de la vidéo. */
.rtr-door__title {
  position: absolute;
  top: 50%;
  font-family: 'Barlow', system-ui, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  color: #ffffff;
  font-size: clamp(1.7rem, 5.4vw, 4.6rem);
  line-height: 1.08;
  letter-spacing: 0.005em;
  text-shadow:
    0 2px 24px rgba(0, 0, 0, 0.65),
    0 0 60px rgba(0, 0, 0, 0.45);
  margin: 0;
  white-space: nowrap;
  transform: translateY(-50%);
  z-index: 2;
}
.rtr-door--left .rtr-door__title {
  right: 0;
  text-align: right;
}
.rtr-door--right .rtr-door__title {
  left: 0;
  text-align: left;
}
.rtr-door__title .rtr-accent {
  color: #f9b000;
  display: block;
}

.rtr-door__logo {
  position: absolute;
  top: clamp(32px, 5.5vh, 70px);
  left: clamp(28px, 4vw, 64px);
  width: clamp(80px, 9vw, 130px);
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.7));
  z-index: 2;
}

.rtr-door__signature {
  position: absolute;
  bottom: clamp(90px, 13vh, 160px);
  right: clamp(28px, 4vw, 64px);
  width: clamp(180px, 22vw, 320px);
  height: auto;
  opacity: 0.95;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.7));
  z-index: 2;
}

/* ============ HINT ============ */
.rtr-hero__hint {
  position: absolute;
  bottom: clamp(24px, 4vh, 48px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: 'Jura', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.42em;
  color: #f9b000;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
  will-change: opacity;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

.rtr-hero__arrow {
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}
.rtr-hero__arrow--down { animation: rtrArrowDown 1.6s ease-in-out infinite; }

@keyframes rtrArrowDown {
  0%, 100% { transform: translateY(0);   opacity: 1;   }
  50%      { transform: translateY(6px); opacity: 0.55; }
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  .rtr-hero__hint, .rtr-hero__arrow--down { animation: none !important; }
  .rtr-door--left  { transform: translateX(-100%); }
  .rtr-door--right { transform: translateX(100%);  }
  .rtr-hero__hint { display: none; }
}

/* ===== Intégration V4 : la hero FPV passe AU-DESSUS du header fixe (z-index:50)
   pendant quelle occupe le viewport. Le header réapparaît dès quon scrolle
   dans le site (il reste position:fixed, inchangé). ===== */
.rtr-hero { z-index: 100000; }