/* =========================================
   HERO — Visuel unique sur fond blanc
   ========================================= */

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  width: 100%;
  overflow: visible;
  background: var(--bg);
}

/* Centrage en flex, et non par transform : le transform de l'image est
   réservé à l'animation d'entrée (GSAP le réécrit entièrement, il aurait
   effacé tout positionnement qu'on y aurait mis).
   Le padding-top décale l'image vers le bas sans toucher au transform :
   relevé sur la référence, le haut du visuel est à 21,4% de l'écran contre
   16,9% s'il était centré, d'où ces ~9vh de fausse marge haute. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/* La video remplit tout l'ecran, quel que soit son format : object-fit
   cover recadre ce qui depasse (les cotes sur un telephone en portrait). */
.hero__img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  flex: none;
  will-change: transform, opacity;
}

/* iPhone / Safari : la video doit passer sous la barre d'adresse et la
   barre d'outils (qui sont translucides), sinon des bandes blanches
   apparaissent en haut et en bas. Le cadre video est donc fixe et prend
   la grande hauteur d'ecran (100lvh : barres comprises) ; les textes
   restent dans la zone visible (.hero en 100svh). Fond noir sous la page
   pour que rien de blanc ne transparaisse dans les barres. */
html:has(body[data-page="home"]),
body[data-page="home"] { background: #000; }

/* Safari iPhone ne dessine pas les elements fixes sous ses barres, mais
   il y dessine le contenu normal de la page. La page fait donc la grande
   hauteur d'ecran (barres comprises) et le cadre video y est positionne
   normalement (absolute, pas fixed), sur toute cette hauteur. */
/* Aucun defilement sur la landing : c'est html (la racine) qui bloque le
   defilement, et le geste vertical ne fait rien. Le body, lui, garde la
   grande hauteur d'ecran sans couper ce qui depasse : sinon l'image etait
   coupee au-dessus de la barre d'outils de Safari. */
html:has(body[data-page="home"]) {
  overflow: hidden;
  overscroll-behavior: none;
}
body[data-page="home"] {
  height: 100vh;
  height: 100lvh;
  overflow: visible;
  overscroll-behavior: none;
  touch-action: none;
}

/* Le cadre va du haut de la page jusqu'en bas de la grande hauteur
   d'ecran : il passe sous la barre d'outils de Safari en bas. */
body[data-page="home"] .hero__media {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: 100vh;
  height: 100lvh;
}

/* Telephone : 100lvh est calcule comme si TOUTES les barres de Safari
   etaient repliees (haut + bas). Le cadre etait donc bien plus haut que
   la zone visible : la photo, qui remplit le cadre en hauteur, etait trop
   zoomee et son bas sortait de l'ecran. On n'ajoute plus a la zone
   visible (100svh) qu'une partie de cet ecart, de quoi passer sous la
   barre du bas. Dans WeChat (pas de barre en bas), svh = lvh : rien ne
   change, c'est le cadrage de reference. */
@media (max-width: 900px) {
  body[data-page="home"] .hero__media {
    height: calc(100svh + (100lvh - 100svh) * 0.6);
  }
}

/* Enchainement de clips : deux lecteurs superposes, fondu entre les deux */
.hero-reel { position: relative; }
.hero-reel__v {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
.hero-reel__v.is-on { opacity: 1; }

/* Photo mobile : cadrage. Le cadre ne bouge pas, seule l'image glisse
   dedans. object-position x > 50 % : l'image part vers la gauche (on voit
   plus de sa droite). Pour la remonter, elle est un peu plus haute que le
   cadre (104 %) et depasse au-dessus (-4 %) : elle monte d'autant. Au-dela,
   l'image serait zoomee (elle remplit deja tout l'ecran en hauteur). */
img.hero-reel__v {
  top: -4%;
  height: 104%;
  bottom: auto;
  object-position: 58% 50%;
}

/* Le voile sombre (.hero-scrim) et la vignette servaient à faire ressortir le
   header et le texte blancs sur la vidéo. Sur fond blanc ils ne produiraient
   qu'un halo gris : supprimés avec les vidéos. */

/* Textes du hero — blancs sur la video sombre */
.hero__meta {
  position: absolute;
  z-index: 3;
  color: #fff;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

/* Les deux blocs partagent la même base pour que "designer" s'aligne sur la
   dernière ligne de "Lucas Charpentier" : même font-size et même line-height,
   donc des fonds de boîte alignés donnent des lignes de base alignées. */
.hero__meta--left,
.hero__meta--right {
  bottom: 8vh;
}

.hero__meta--left {
  left: var(--gutter);
}

/* Bouton "Work" : centre, en bas, blanc sur l'image sombre. Sur ordinateur
   il est sur la meme ligne que "Lucas Charpentier" / "designer" ; sur
   telephone un peu au-dessus, pour ne pas les toucher. */
.hero__cta {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 8vh;
  translate: -50% 0;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1.4rem;
  border: 1px solid #fff;
  border-radius: 100px;
  /* Blanc plein par defaut : lisible sur n'importe quelle image */
  background: #fff;
  color: #0a0a0a;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Meme animation que le lien "projet suivant" en bas des pages projet
   (lui-meme calque sur "let's talk") : le mot et la fleche grossissent
   autour d'un meme point (le milieu de l'espace entre eux), la fleche avec
   un leger retard. Survol a la souris, appui au doigt. */
.hero__cta > span,
.hero__cta > svg {
  display: inline-block;
  transition: transform .167s linear;
}
.hero__cta > span { transform-origin: calc(100% + .3rem) 50%; }
.hero__cta > svg  { transform-origin: -.3rem 50%; transition-delay: .033s; }

.hero__cta:hover > span,
.hero__cta:focus-visible > span,
.hero__cta:active > span {
  transform: scale(1.05);
  transition-delay: 0s;
  animation: cta-pop-name .2s linear;
}
.hero__cta:hover > svg,
.hero__cta:focus-visible > svg,
.hero__cta:active > svg {
  transform: scale(1.05);
  transition-delay: 0s;
  animation: cta-pop-arrow .3s linear;
}
.hero__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@keyframes cta-pop-name {
  0%     { transform: scale(1); }
  66.67% { transform: scale(1.06); }
  100%   { transform: scale(1.05); }
}
@keyframes cta-pop-arrow {
  0%     { transform: scale(1); }
  77.78% { transform: scale(1.06); }
  100%   { transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__cta > span,
  .hero__cta > svg { transition: none; animation: none !important; transform: none !important; }
}

@media (max-width: 720px) {
  .hero__cta {
    bottom: calc(8vh + 5rem);
    padding: .8rem 1.6rem;
    font-size: 1rem;
  }
}

.hero__meta--right {
  right: var(--gutter);
  text-align: right;
}

/* .split-line porte overflow:hidden pour la révélation par masquage
   (initScrollReveals), qui est désactivée sur la landing : le hero fait un
   simple fondu + translation. Ici ce masquage ne sert donc à rien et, avec un
   line-height de 1.05, il tronque les jambages — le g de "designer", le p de
   "Charpentier". On le rétablit à visible, uniquement pour le hero. */
.hero__meta .split-line {
  overflow: visible;
}

/* Marquee supprimée */
.hero__marquee { display: none; }