/* ==========================================================================
   Módulo: hero — todos os seletores começam por .m-hero
   Medidas do Figma por frame (altura / padding-top / título / texto):
     390  → 780 / 100 / 64-68    · 768  → 900 / 120 / 96-100
     1440 → 800 / 120 / 128-136  · 1920 → 960 / 120 / 180-180  · 2560 → 1440 / ~200 / 180-180
   Entre 1440 e 1920 os valores são interpolados (clamp) para manter a proporção.
   ========================================================================== */

/* ---------- mobile (base, Figma 390) ---------- */
.m-hero {
  --hero-min-height: 48.75rem;                  /* 780 */
  --hero-padding-top: 6.25rem;                  /* 100 (inclui o header de 88 por cima) */
  --hero-padding-x: 2rem;                       /* 32 */
  --hero-padding-bottom: 9.625rem;              /* 154 — do fim do texto até a base */
  --hero-content-max: 112rem;                   /* 1792 */
  --hero-title-size: var(--tp-ds-fs-display);   /* 64 / 96 / 128→180 (token) */
  --hero-title-lh: 4.25rem;                     /* 68 */
  --hero-title-max: none;
  --hero-text-max: 18.8rem;                     /* ~301 */
  --hero-text-inset: 0;                         /* recuo do texto à direita */
  --hero-text-align: flex-start;
  --hero-scroll-bottom: 2.5rem;                 /* 40 */
  --hero-media-width: 87.5rem;                  /* 1400 */
  --hero-media-top: 0;
  --hero-media-opacity: 0.3;

  /* motion de carregamento */
  --hero-ease: var(--tp-ds-ease-reveal);
  --hero-word-stagger: 70ms;
  --hero-text-delay: 700ms;                     /* recalculado no JS após o título */

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: var(--hero-min-height);
  padding: var(--hero-padding-top) var(--hero-padding-x) var(--hero-padding-bottom);
  overflow: hidden;
  background-color: var(--tp-ds-bg-black);
  color: var(--tp-ds-body-inverse);
}

/* Fundo (imagem ou vídeo) — "Digital background" do Figma: 30%, lighten, gradiente para preto */
.m-hero__media {
  position: absolute;
  top: var(--hero-media-top);
  left: 50%;
  z-index: -1;
  width: var(--hero-media-width);
  aspect-ratio: 16 / 9;
  opacity: var(--hero-media-opacity);
  mix-blend-mode: lighten;
  transform: translateX(-50%);
  pointer-events: none;
}

.m-hero__media-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgb(0 0 0 / 0) 54.74%, var(--tp-ds-bg-black));
}

.m-hero__inner {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  width: 100%;
  max-width: var(--hero-content-max);
  margin-inline: auto;
}

.m-hero__title {
  max-width: var(--hero-title-max);
  margin: 0;
  font-family: var(--tp-ds-font-family-heading);  /* ExtraLight */
  font-size: var(--hero-title-size);
  font-weight: normal;
  line-height: var(--hero-title-lh);
  letter-spacing: var(--tp-ds-ls-normal);
  color: var(--tp-ds-title-inverse);
}

.m-hero__text {
  align-self: var(--hero-text-align);
  max-width: var(--hero-text-max);
  margin: auto var(--hero-text-inset) 0 0;      /* empurrado para baixo */
  padding-top: var(--tp-ds-space-6);            /* distância mínima do título */
  font-family: var(--tp-ds-font-family-base);   /* Light */
  font-size: var(--tp-ds-fs-body-lg);           /* 24 */
  line-height: var(--tp-ds-lh-body-lg);         /* 32 */
  color: var(--tp-ds-body-inverse);
}

/* Indicador "Scroll to explore" */
.m-hero__scroll {
  position: absolute;
  bottom: var(--hero-scroll-bottom);
  left: 50%;
  width: 2.875rem;                              /* 46 */
  height: 2.875rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  transform: translateX(-50%);
  cursor: pointer;
}

.m-hero__scroll-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.m-hero__scroll-arrow {
  position: absolute;
  top: 0.875rem;                                /* 14 */
  left: 0.9375rem;                              /* 15 */
  width: 0.9475rem;                             /* 15.16 */
  height: 1.0834rem;                            /* 17.34 */
  transform: translateY(4px);                   /* repouso da animação do Figma */
}

/* ---------- Motion de carregamento ----------
   O JS adiciona .is-ready para iniciar a sequência:
   fundo (fade + zoom) → palavras do título (sobem com máscara) → texto → indicador.
   Com JS (html.tp-ds-js) os elementos começam ocultos; se o JS do módulo não rodar,
   um fallback os revela após 2,5s. */
.tp-ds-js .m-hero:not(.is-ready) .m-hero__media {
  opacity: 0;
  animation: m-hero-fallback-media 0s linear 2.5s forwards;
}

.tp-ds-js .m-hero:not(.is-ready) :is(.m-hero__title, .m-hero__text, .m-hero__scroll) {
  opacity: 0;
  animation: m-hero-fallback 0s linear 2.5s forwards;
}

.m-hero.is-ready .m-hero__media {
  animation: m-hero-media-in 1.6s var(--tp-ds-ease-out) both;
}

/* Título dividido em palavras pelo JS */
.m-hero__title-words {
  display: block;
}

.m-hero__word {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.12em;                       /* não cortar descendentes (g, p) */
  margin-bottom: -0.12em;
  vertical-align: top;
}

.m-hero__word-inner {
  display: inline-block;
}

.m-hero.is-ready .m-hero__word-inner {
  animation: m-hero-rise 0.9s var(--hero-ease) both;
  animation-delay: calc(200ms + var(--i, 0) * var(--hero-word-stagger));
}

/* Título sem divisão (fallback) */
.m-hero.is-ready .m-hero__title:not(.is-split) {
  animation: m-hero-fade-up 0.9s var(--hero-ease) 200ms both;
}

.m-hero.is-ready .m-hero__text {
  animation: m-hero-fade-up 0.8s var(--hero-ease) var(--hero-text-delay) both;
}

.m-hero.is-ready .m-hero__scroll {
  animation: m-hero-fade 0.6s var(--tp-ds-ease-standard) calc(var(--hero-text-delay) + 300ms) both;
}

/* Animação da seta (Figma: loop 2s, desce 4→12px e volta) */
.m-hero.is-ready .m-hero__scroll-arrow {
  animation: m-hero-arrow 2s linear calc(var(--hero-text-delay) + 900ms) infinite;
}

@keyframes m-hero-media-in {
  from { opacity: 0; transform: translateX(-50%) scale(1.06); }
  to   { opacity: var(--hero-media-opacity); transform: translateX(-50%) scale(1); }
}

@keyframes m-hero-rise {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

@keyframes m-hero-fade-up {
  from { opacity: 0; transform: translateY(1.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes m-hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes m-hero-arrow {
  0%      { transform: translateY(4px);  animation-timing-function: cubic-bezier(0.62, 0, 0.58, 1); }
  17.017% { transform: translateY(12px); animation-timing-function: cubic-bezier(0.62, 0, 0.58, 1); }
  34.4%,
  100%    { transform: translateY(4px); }
}

@keyframes m-hero-fallback {
  to { opacity: 1; }
}

@keyframes m-hero-fallback-media {
  to { opacity: var(--hero-media-opacity); }
}

@media (prefers-reduced-motion: reduce) {
  .m-hero .m-hero__media,
  .m-hero .m-hero__title,
  .m-hero .m-hero__word-inner,
  .m-hero .m-hero__text,
  .m-hero .m-hero__scroll,
  .m-hero .m-hero__scroll-arrow {
    animation: none !important;
  }

  .tp-ds-js .m-hero :is(.m-hero__title, .m-hero__text, .m-hero__scroll) {
    opacity: 1;
  }

  .tp-ds-js .m-hero .m-hero__media {
    opacity: var(--hero-media-opacity);
  }
}

/* ---------- tablet (Figma 768) ---------- */
@media (min-width: 768px) {
  .m-hero {
    --hero-min-height: 56.25rem;                /* 900 */
    --hero-padding-top: 7.5rem;                 /* 120 */
    --hero-padding-x: 2.5rem;                   /* 40 */
    --hero-padding-bottom: 11.25rem;            /* 180 */
    --hero-title-lh: 6.25rem;                   /* 100 */
    --hero-title-max: 36rem;                    /* quebra "Some sort of / title goes here" como no Figma */
    --hero-text-max: 22rem;                     /* 352 */
    --hero-text-align: flex-end;
    --hero-scroll-bottom: 3rem;                 /* 48 */
    --hero-media-width: 102.5rem;               /* 1640 */
    --hero-media-top: -1.5rem;                  /* -24 */
  }
}

/* ---------- desktop (Figma 1440 → 1920) ---------- */
@media (min-width: 1440px) {
  .m-hero {
    --hero-min-height: max(50rem, 50vw);                               /* 800 @1440 · 960 @1920 */
    --hero-padding-x: 3.75rem;                                         /* 60 */
    --hero-padding-bottom: clamp(9.25rem, 8.54vw + 1.5625rem, 11.8rem); /* 148 → 189 */
    --hero-title-lh: clamp(8.5rem, 9.17vw + 0.25rem, 11.25rem);        /* 136 → 180 */
    --hero-title-max: clamp(62.5rem, 46.67vw + 20.5rem, 76.5rem);      /* 1000 → 1224 */
    --hero-text-max: clamp(22rem, 3.33vw + 19rem, 24.3rem);            /* 352 → 368 (389 @2560) */
    --hero-text-inset: clamp(3.25rem, 28.5vw - 22.375rem, 11.8rem);    /* 52 → 189 (+60 de padding) */
    --hero-scroll-bottom: clamp(3.5rem, 5.83vw - 1.75rem, 5.25rem);    /* 56 → 84 */
    --hero-media-width: max(100rem, 100.3vw);                          /* 1600 @1440 · 1925 @1920 */
    --hero-media-top: -6.94vw;                                         /* -100 @1440 */
  }
}

/* ---------- wide / > 1991 (Figma 2560) ---------- */
@media (min-width: 1990px) {
  .m-hero {
    --hero-min-height: 56.25vw;                 /* 1440 @2560 (16:9) */
    --hero-padding-top: 7.8vw;                  /* ~200 @2560 */
    --hero-padding-bottom: 15.2vw;              /* ~389 @2560 */
    --hero-scroll-bottom: 5.75vw;               /* ~147 @2560 */
    --hero-media-width: 106.3vw;                /* 2722 @2560 */
    --hero-media-top: -6.4vw;                   /* -164 @2560 */
  }
}