/* ==========================================================================
   STUDIO RANEEM — HERO 3D  (accueil uniquement)
   ========================================================================== */

/* Le wrapper donne la course de scroll ; l'intérieur reste collé à l'écran.
   AUDIT : le prototype utilise 250vh, soit ~2,5 écrans de défilement avant
   le premier contenu réel. On descend à 190vh desktop / 130vh mobile —
   la chorégraphie complète (3 mots + flare) tient dans cette course, seuls
   les temps morts disparaissent. */
.sr-hero {
  position: relative; height: 230vh; background: var(--sr-bg-deep);
}
/* Ralenti volontaire du scroll : la course de p (0→1) s'étale sur la hauteur du
   wrapper. Plus c'est haut, plus l'animation défile lentement. Desktop 230vh
   (légèrement plus lent que 190). Mobile 280vh (nettement plus lent que 130) —
   le doigt parcourt plus de distance pour la même progression. */
@media (max-width: 920px) { .sr-hero { height: 280vh; } }

/* Deux conditions doivent être réunies pour que le pin fonctionne.

   1. Aucun ancêtre en overflow:hidden — sinon le collage se fait par rapport
      à ce conteneur, qui ne défile pas.
   2. LA CHAÎNE DE HAUTEUR DOIT TRAVERSER LES ENVELOPPES DIVI.
      C'est le piège réel, et il est invisible : un élément sticky est
      contraint par la boîte de son PARENT, pas par la section.
      Divi empile section > row > column > module > code_inner. Si ces
      enveloppes se contentent de la hauteur de leur contenu (100vh), le pin
      dispose de 0 px de course : il colle pendant zéro pixel, puis défile
      normalement — et la hauteur restante de la section apparaît comme un
      grand vide sous le hero.
      On force donc les 190vh jusqu'au parent direct du pin. */
.sr-hero,
.sr-hero .et_pb_row,
.sr-hero .et_pb_column,
.sr-hero .et_pb_module,
.sr-hero .et_pb_code_inner { overflow: visible !important; }

.sr-hero > .et_pb_row,
.sr-hero .et_pb_column,
.sr-hero .et_pb_module,
.sr-hero .et_pb_code,
.sr-hero .et_pb_code_inner {
  height: 100% !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sr-hero__pin {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden;
}

.sr-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

.sr-hero__glow {
  position: absolute; left: 50%; top: 53%; transform: translate(-50%,-50%);
  width: min(66vw, 880px); aspect-ratio: 1;
  background: radial-gradient(circle, rgba(28,126,128,.17) 0%, transparent 62%);
  filter: blur(26px); pointer-events: none; z-index: 1; opacity: .5;
}

/* Vignette + assombrissement haut : c'est elle qui donne la profondeur cinéma. */
.sr-hero__vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(ellipse at 50% 52%, transparent 38%, rgba(14,14,16,.92) 100%),
    linear-gradient(rgba(14,14,16,.65), transparent 18%);
}

.sr-hero__flare {
  position: absolute; left: 50%; top: 50%;
  width: 120vmax; height: 120vmax;
  transform: translate3d(-50%,-50%,0) scale(.25);
  background: radial-gradient(circle, rgba(41,182,186,.55) 0%, rgba(41,182,186,.12) 30%, transparent 60%);
  opacity: 0; pointer-events: none; z-index: 3;
}

/* Les 3 mots traversés au scroll */
.sr-hero__word {
  position: absolute; left: 50%; top: 50%;
  transform: translate3d(-50%,-50%,0); z-index: 3;
  font-family: var(--sr-font-display); font-weight: 600;
  font-size: clamp(44px, 9vw, 120px); letter-spacing: -.01em;
  color: var(--sr-text); opacity: 0; visibility: hidden;
  pointer-events: none; white-space: nowrap;
}

.sr-hero__content {
  position: relative; z-index: 4; height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; padding: 0 20px;
  will-change: transform, opacity;
}

.sr-hero__eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--sr-font-mono); font-size: clamp(9.5px, 1.1vw, 12px);
  letter-spacing: .3em; color: var(--sr-text-2);
}
.sr-hero__eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--sr-teal-glow); animation: sr-pulseDot 1.8s ease-in-out infinite; }

/* « STUDIO » — petit, au-dessus du grand « RANEEM. » (lockup de marque). */
.sr-hero__kicker {
  margin: clamp(16px, 2.2vw, 28px) 0 0;
  font-family: var(--sr-font-display); font-weight: 600;
  font-size: clamp(19px, 3vw, 42px); letter-spacing: .16em;
  line-height: 1; color: var(--sr-text);
}
.sr-hero__kicker + .sr-hero__title { margin-top: clamp(2px, .6vw, 8px); }

/* H1 — le JS le découpe en lettres masquées. */
.sr-hero__title {
  margin: 20px 0 0;
  font-family: var(--sr-font-display); font-weight: 700;
  /* « Studio Raneem. » tient sur UNE ligne : taille réduite + nowrap (au lieu
     du --sr-h1 géant qui n'affichait qu'un mot). */
  font-size: clamp(30px, 8vw, 94px); line-height: var(--sr-lh-h1);
  letter-spacing: var(--sr-ls-h1); color: var(--sr-text);
  display: flex; justify-content: center; white-space: nowrap; position: relative;
}
.sr-hero__mask { display: inline-block; overflow: hidden; padding-bottom: .05em; }
.sr-hero__ltr  { display: inline-block; }

.sr-hero__sub {
  margin: 26px 0 0; font-size: clamp(17px, 2vw, 22px);
  color: var(--sr-text-2); max-width: 560px;
}
.sr-hero__sub b { color: var(--sr-text); font-weight: 400; }

.sr-hero__actions { margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Repères techniques bas d'écran */
.sr-hero__meta {
  position: absolute; bottom: 26px; z-index: 5;
  font-family: var(--sr-font-mono); font-size: 10px; letter-spacing: .18em;
  color: var(--sr-text-3-aa);
}
.sr-hero__meta--l { left: var(--sr-gutter); }
.sr-hero__meta--r { right: var(--sr-gutter); display: flex; align-items: center; gap: 8px; color: var(--sr-text-2); }
.sr-hero__meta--r i { width: 7px; height: 7px; border-radius: 50%; background: var(--sr-teal-glow); animation: sr-pulseDot 1.6s ease-in-out infinite; }
@media (max-width: 920px) { .sr-hero__meta { display: none; } }

.sr-hero__cue {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.sr-hero__cue span {
  font-family: var(--sr-font-mono); font-size: 10px; letter-spacing: .26em; color: var(--sr-text-2);
}
.sr-hero__cue i {
  width: 1px; height: 42px;
  background: linear-gradient(var(--sr-teal-glow), transparent);
  animation: sr-cueLine 1.9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .sr-hero { height: auto; }
  .sr-hero__pin { position: static; height: auto; min-height: 100vh; }
  .sr-hero__word, .sr-hero__flare { display: none; }
  .sr-hero__ltr { transform: none !important; }
}