/* ============================================================================
   Cosmeek — Hero (Figma 190:415)
   Le logo sert de masque à une encre orange : une lumière suit le curseur et
   laisse une rémanence. Des visuels projet tombent sur son passage, le CTA
   se décompose en ASCII au survol, la bande de logos tourne.
   Tout est préfixé `hero` : la navigation et les autres sections gardent
   leurs propres composants.
   ========================================================================= */

.hero {
  --hero-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --hero-ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  /* Ressort léger, ~4 % de dépassement. */
  --hero-spring: var(--e-spring);

  position: relative;
  block-size: 100svh;
  min-block-size: 620px;
  overflow: clip;
  isolation: isolate;
  background: var(--c-brown);
  color: var(--c-cream);
  /* Le hero est une surface de clic : chaque clic y dépose une goutte d'encre
     et un visuel. Sans ça, cliquer deux fois de suite sélectionne le titre.
     Le texte reste dans le document, donc lisible et indexable. */
  -webkit-user-select: none;
  user-select: none;
}

/* ── Le logo ────────────────────────────────────────────────────────────
   Boîte au rapport exact du tracé (926,604 × 961), centrée, un peu plus haute
   que l'écran : l'encre et le contour partagent le même cadre. */
.hero__shape {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  block-size: calc(100% * 961 / 900);
  aspect-ratio: 926.604 / 961;
  translate: -50% -50%;
  z-index: 0;
  pointer-events: none;
}

.hero__ink,
.hero__outline {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  display: block;
}

.hero__outline {
  opacity: 0.7;
}

/* ── Visuels qui tombent ────────────────────────────────────────────────
   Créés par js/hero-drops.js, recyclés d'un passage à l'autre. */
.hero__drops {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-drop {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  margin: 0;
  opacity: 0;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.hero-drop img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  border-radius: 2px;
  will-change: transform;
}

/* ── Titre, accroche et CTA ─────────────────────────────────────────────── */
.hero__content {
  position: absolute;
  inset-inline-start: var(--gutter);
  inset-block-end: 128px;
  z-index: 2;
  inline-size: min(800px, calc(100% - 2 * var(--gutter)));
  display: flex;
  flex-direction: column;
  gap: 40px;
  pointer-events: none;
}

.hero__content .hero-cta {
  pointer-events: auto;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}

.hero__title {
  margin: 0;
  color: var(--c-cream);
  font-size: clamp(40px, 30.75px + 2.47vw, 56px);
  font-variation-settings: "wght" var(--fw-bold), "opsz" var(--opsz-display);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-box: trim-both cap alphabetic;
}

.hero__lead {
  margin: 0;
  max-inline-size: 440px;
  font-size: 15px;
  line-height: 1.2;
  color: var(--c-ink-inv-2);
  text-wrap: pretty;
}

/* ── CTA : avatar + bouton ──────────────────────────────────────────────── */
.hero-cta {
  /* Largeur du contenu : sans ça le conteneur flex en colonne l'étire sur toute
     la ligne, et le survol reste actif à droite du bouton. */
  align-self: flex-start;
  display: flex;
  gap: 4px;
  align-items: flex-start;
}

.hero-cta__avatar {
  position: relative;
  inline-size: 45px;
  block-size: 45px;
  flex: none;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-orange);
  transition: transform 0.5s var(--hero-ease-out);
}

.hero-cta:hover .hero-cta__avatar::after,
.hero-cta:focus-within .hero-cta__avatar::after {
  opacity: 0;
}

.hero-cta__photo {
  position: absolute;
  inset: 0;
  background: #e6e6e6;
  transition: transform 0.5s var(--hero-ease-out);
}

.hero-cta__photo img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hero-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: 45px;
  padding-inline: 24px;
  background: var(--c-orange);
  color: var(--c-white);
  font-family: var(--ff-mono);
  font-weight: 300;
  font-size: 14px;
  line-height: 0.9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  transition:
    color 0.25s var(--hero-ease-out),
    transform 0.45s var(--hero-ease-out);
}

/* Fond blanc du survol : calque en opacité (compositeur) au lieu d'un
   `background-color` repeint, qui clignotait sous la charge du hero. */
.hero-cta__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-white);
  opacity: 0;
  transition: opacity 0.25s var(--hero-ease-out);
}

/* Au survol (maquette « hover dark bg ») : l'écart de 4 px se referme, le
   bouton passe au blanc en texte encre, et la teinte orange du
   portrait s'efface (js/cta-shader.js). */
@media (hover: hover) {
  .hero-cta:hover .hero-cta__btn::before,
  .hero-cta:focus-within .hero-cta__btn::before {
    opacity: 1;
  }

  .hero-cta:hover .hero-cta__btn,
  .hero-cta:focus-within .hero-cta__btn {
    color: #2a2423;
    transform: translateX(-2px);
    transition:
      color 0.25s var(--hero-ease-out),
      transform 0.7s var(--hero-spring);
  }

  .hero-cta:hover .hero-cta__avatar,
  .hero-cta:focus-within .hero-cta__avatar {
    transform: translateX(2px);
    transition: transform 0.7s var(--hero-spring);
  }

  .hero-cta:hover .hero-cta__photo {
    transform: scale(1.1);
    transition: transform 0.9s var(--hero-spring);
  }
}

.hero-cta:active .hero-cta__btn::before {
  opacity: 1;
}

.hero-cta:active .hero-cta__btn {
  color: #2a2423;
  transform: translateX(-2px) scale(0.97);
  transition-duration: 0.12s;
}

.hero-cta:active .hero-cta__avatar {
  transform: translateX(2px) scale(0.96);
  transition-duration: 0.12s;
}

/* ── Bande de logos ─────────────────────────────────────────────────────
   Pleine largeur, cinq cases séparées par un filet. Chaque case change de
   logo à son tour : le sortant est poussé vers le haut, l'entrant arrive du bas. */
.hero-logos {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 3;
  block-size: 64px;
  display: flex;
  background: var(--c-brown-light);
  border-block-start: 1px solid var(--c-border-inv);
}

.hero-logos__cell {
  position: relative;
  flex: 1 1 0;
  min-inline-size: 0;
  overflow: hidden;
  border-inline-end: 1px solid var(--c-border-inv);
}

.hero-logos__cell:last-child {
  border-inline-end: 0;
}

.hero-logos__slot {
  position: absolute;
  inset: 0;
  transition:
    opacity 0.4s var(--hero-ease-out),
    transform 0.45s var(--hero-ease-out);
}

.hero-logos__item {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  max-inline-size: calc(100% - 32px);
  block-size: auto;
  transform: translate(-50%, -50%);
  transition:
    transform 0.9s var(--hero-ease-out),
    opacity 0.7s var(--hero-ease-out);
}

.hero-logos__item.is-below {
  transform: translate(-50%, calc(-50% + 22px));
  opacity: 0;
  transition: none;
}

.hero-logos__item.is-leaving {
  /* Pas de fondu : le sortant est poussé hors de la case (qui rogne) par
     l'entrant, avec la même durée et la même courbe que lui. */
  transform: translate(-50%, calc(-50% - 64px));
}

@media (hover: hover) {
  .hero-logos:hover .hero-logos__slot {
    opacity: 0.35;
  }

  .hero-logos .hero-logos__cell:hover .hero-logos__slot {
    opacity: 1;
    transform: scale(1.06);
    transition:
      opacity 0.4s var(--hero-ease-out),
      transform 0.7s var(--hero-spring);
  }
}

/* ── Adaptation ─────────────────────────────────────────────────────────── */
@media (width < 900px) {
  .hero-logos__cell:nth-child(n + 4) {
    display: none;
  }

  .hero-logos__cell:nth-child(3) {
    border-inline-end: 0;
  }
}

@media (width < 560px) {
  .hero__content {
    inset-block-end: 104px;
    gap: 32px;
  }

  .hero__title {
    text-wrap: balance;
  }

  .hero-logos__cell:nth-child(n + 3) {
    display: none;
  }

  .hero-logos__cell:nth-child(2) {
    border-inline-end: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logos__item,
  .hero-logos__item.is-leaving {
    transition: opacity 0.5s linear;
  }

  .hero-logos__item.is-below,
  .hero-logos__item.is-leaving {
    transform: translate(-50%, -50%);
  }

  .hero-logos__item.is-leaving {
    opacity: 0;
  }
}