/* ==========================================================================
   Zaparty & Friends — landing do evento
   Medidas extraídas do Figma (ZAPARTY / ZAPARTY & FRIENDS).
   Desktop = frame 1440x1024 · Mobile = frame 393x2070.
   A unidade --u traduz 1px do Figma em 1 unidade de tela, escalando junto.
   ========================================================================== */

:root {
  --u: clamp(0.86px, 100vw / 393, 1.22px);

  --branco: #fff;
  --preto: #0c0c0c;
  --azul-profundo: #041927;

  --sans: "new-science", "Zalando Sans", system-ui, sans-serif;
  --mono: "new-science-mono", ui-monospace, "SF Mono", Menlo, monospace;
  --texto: "Zalando Sans", system-ui, sans-serif;
  --expandida: "Zalando Sans Expanded", "Zalando Sans", system-ui, sans-serif;

  --poster-w: calc(355.71 * var(--u));
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  position: relative;
  margin: 0;
  background: var(--preto);
  color: var(--branco);
  font-family: var(--texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }

p { margin: 0; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: calc(90 * var(--u)) 0 calc(48 * var(--u));
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
    237.8deg,
    rgb(200, 224, 238) 8.83%,
    rgb(156, 186, 204) 24.39%,
    rgb(84, 122, 145) 38.37%,
    rgb(4, 33, 49) 54.56%,
    rgb(3, 14, 25) 74.88%
  );
}

/* Textura de persiana: preto-e-branco, espelhada na vertical, em blend
   luminosity sobre o gradiente. É de onde vem o caráter do fundo.
   Cobre a área inteira (cover) em vez de usar o tamanho fixo do frame,
   senão sobra fundo liso nas laterais em telas largas. */
.hero__texture {
  position: absolute;
  inset: 0;
  inset: auto;
  top: 50%;
  left: calc(50% + 50vw);
  width: 220.4vw;
  height: 391.9vw;
  transform: translate(-50%, -50%) scaleY(-1);
  background: url("../assets/textura.webp") center / cover no-repeat;
  opacity: 0.53;
  mix-blend-mode: luminosity;
}

/* Véu que segura o contraste do texto branco sobre a parte clara do gradiente. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(4, 25, 39, 0.74) 0%,
    rgba(4, 25, 39, 0.56) 18%,
    rgba(4, 25, 39, 0.34) 28%,
    rgba(4, 25, 39, 0.12) 36%,
    rgba(4, 25, 39, 0) 43%
  );
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: calc(300 * var(--u));
  background: linear-gradient(to top, var(--preto) 8%, rgba(12, 12, 12, 0.82) 30%, rgba(12, 12, 12, 0.4) 62%, rgba(12, 12, 12, 0) 100%);
  pointer-events: none;
  z-index: 2;
}

.hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(99.6 * var(--u));
}

/* ---------- coluna de texto ---------- */

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc(349.32 * var(--u));
  text-align: center;
}

/* Ritmo vertical medido no Figma, bloco a bloco. */
.hero__copy .headline { margin-top: calc(45.21 * var(--u)); }
.hero__copy .lede { margin-top: calc(20.27 * var(--u)); }
.hero__copy .speakers { margin-top: calc(38.22 * var(--u)); }
.hero__copy .meta { margin-top: calc(38.22 * var(--u)); }
.hero__copy .cta { margin-top: calc(38.22 * var(--u)); }

.mark {
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(34.14 * var(--u));
  letter-spacing: calc(1.02 * var(--u));
  text-transform: uppercase;
  line-height: 1;
}

.mark__amp { font-weight: 300; }

.headline {
  margin: 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(37.41 * var(--u));
  letter-spacing: calc(-0.75 * var(--u));
  line-height: 1.2;
  text-wrap: balance;
}

.lede {
  width: calc(254.66 * var(--u));
  font-size: calc(15.59 * var(--u));
  letter-spacing: calc(-0.31 * var(--u));
  line-height: 1.22;
  text-wrap: pretty;
}

.speakers {
  display: flex;
  justify-content: center;
  gap: calc(33.52 * var(--u));
  font-family: var(--mono);
  font-weight: 400;
  font-size: calc(17.57 * var(--u));
  letter-spacing: calc(-1.05 * var(--u));
  text-transform: uppercase;
  line-height: 1;
}

.speaker { white-space: nowrap; }
.speaker__last { font-weight: 600; }

.meta {
  font-family: var(--mono);
  font-weight: 300;
  font-size: calc(10.48 * var(--u));
  letter-spacing: calc(2.52 * var(--u));
  text-transform: uppercase;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
}

/* ---------- aviso de escassez ---------- */

.escassez {
  display: inline-flex;
  align-items: center;
  gap: calc(9 * var(--u));
  margin-top: calc(30 * var(--u));
  padding: calc(9 * var(--u)) calc(16 * var(--u));
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(4, 25, 39, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--mono);
  font-weight: 400;
  font-size: calc(11.2 * var(--u));
  letter-spacing: calc(1.6 * var(--u));
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.escassez__ponto {
  width: calc(7 * var(--u));
  height: calc(7 * var(--u));
  border-radius: 50%;
  background: #ff5a4d;
  box-shadow: 0 0 0 0 rgba(255, 90, 77, 0.65);
  animation: pulso 2.4s ease-out infinite;
}

@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(255, 90, 77, 0.6); }
  70%  { box-shadow: 0 0 0 calc(7 * var(--u)) rgba(255, 90, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 90, 77, 0); }
}

/* ---------- CTA ---------- */

.cta {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: calc(317.59 * var(--u));
  height: calc(67.85 * var(--u));
  border-radius: 999px;
  background: var(--branco);
  color: #000;
  font-family: var(--mono);
  font-weight: 500;
  font-size: calc(22.29 * var(--u));
  letter-spacing: calc(-1.34 * var(--u));
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.25s ease, background-color 0.25s ease;
}

.cta:hover {
  background: #f2f2f2;
  transform: translateY(-2px);
  box-shadow: 0 calc(10 * var(--u)) calc(34 * var(--u)) rgba(2, 12, 20, 0.38);
}

/* Reflexo que atravessa o botão de tempos em tempos, para puxar o olho
   sem piscar nem mudar de cor. */
.cta::after {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -70%;
  width: 45%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(214, 232, 242, 0.55) 42%,
    rgba(150, 190, 214, 0.62) 50%,
    rgba(214, 232, 242, 0.55) 58%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-18deg);
  animation: brilho 5.5s ease-in-out 1.6s infinite;
  pointer-events: none;
}

@keyframes brilho {
  0%, 62% { left: -70%; }
  88%, 100% { left: 125%; }
}

.cta__texto { position: relative; z-index: 1; }

.cta:active { transform: translateY(0); }

.cta:focus-visible {
  outline: 3px solid var(--branco);
  outline-offset: 4px;
}

/* No mobile a ação acompanha o scroll assim que o botão principal sai de vista.
   No desktop a página cabe numa tela e um segundo botão seria ruído. */
.cta--flutuante {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 30;
  /* Menor que o principal: nos instantes em que os dois aparecem juntos,
     fica claro qual é o atalho. */
  width: calc(268 * var(--u));
  height: calc(56 * var(--u));
  font-size: calc(19 * var(--u));
  transform: translate(-50%, 150%);
  box-shadow: 0 calc(12 * var(--u)) calc(38 * var(--u)) rgba(2, 12, 20, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.3s ease;
}

.cta--flutuante.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

/* Estacionado no fim do hero: para de acompanhar o scroll e deixa o rodapé
   passar por cima sem nunca cobrir a assinatura da marca. */
.cta--flutuante.is-estacionado {
  position: absolute;
  bottom: auto;
}

/* ---------- pôster + foto ---------- */

.hero__visual {
  position: relative;
  width: calc(355.71 * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* A foto tem altura natural, sem recorte: o enquadramento vem do tamanho e
   da posição. Os fatores saem da escala das pessoas dentro do arquivo, para
   a cabeça cair no mesmo ponto da janela do pôster que no Figma. */
.hero__photo {
  position: absolute;
  top: calc(var(--poster-w) * 0.1421);
  left: calc(var(--poster-w) * -0.0284);
  width: calc(var(--poster-w) * 1.1063);
  max-width: none;
  height: auto;
  z-index: 0;
  /* A base dissolve em vez de cortar reto. O fade só começa em 80% porque a
     janela do pôster termina em 77% da altura da foto: antes disso ele
     desbotaria a imagem dentro do card. */
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, 0.45) 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 80%, rgba(0, 0, 0, 0.45) 92%, transparent 100%);
}

/* A moldura é branca com um furo, e a foto passa por trás dela.
   Quatro barras posicionadas em % reproduzem o recorte do Figma
   e continuam exatas em qualquer largura. */
.poster {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 686.58 / 766.33;
}

.poster__bar {
  position: absolute;
  background: var(--branco);
}

.poster__bar--top {
  top: 0;
  left: 0;
  right: 0;
  height: 15.988%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1.1%;
}

.poster__bar--bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 8.238%;
  display: flex;
  align-items: center;
}

.poster__bar--left { top: 0; bottom: 0; left: 0; width: 5.646%; }
.poster__bar--right { top: 0; bottom: 0; right: 0; width: 5.642%; }

.poster__title {
  font-family: var(--sans);
  font-weight: 500;
  font-size: calc(27.92 * var(--u));
  letter-spacing: calc(0.84 * var(--u));
  text-transform: uppercase;
  color: #000;
  line-height: 1;
  white-space: nowrap;
}

.poster__footer {
  display: flex;
  justify-content: space-between;
  width: 88.11%;
  margin: 0 auto;
  font-family: var(--mono);
  font-weight: 400;
  font-size: calc(14.81 * var(--u));
  letter-spacing: calc(-0.89 * var(--u));
  text-transform: uppercase;
  color: #000;
  line-height: 1;
}

.address span { display: block; }
.address br { display: none; }

.address {
  position: relative;
  z-index: 1;
  margin-top: calc(35 * var(--u));
  width: calc(230 * var(--u));
  font-family: var(--mono);
  font-weight: 400;
  font-size: calc(15.79 * var(--u));
  letter-spacing: calc(-0.95 * var(--u));
  text-transform: uppercase;
  text-align: center;
  line-height: 1.25;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  overflow: hidden;
  background: var(--preto);
  /* O rodapé termina no meio do ZA: o corte é proposital, é assinatura de
     marca, não elemento a ser mostrado por inteiro. */
  padding: calc(119.7 * var(--u)) 0 calc(232 * var(--u));
}

/* Detalhe de marca, não elemento de leitura: fica discreto e sangra pela
   direita, sempre na mesma relação com a borda. */
.footer__watermark {
  position: absolute;
  top: calc(379 * var(--u));
  left: 50%;
  transform: translateX(-50%);
  width: calc(684.08 * var(--u));
  max-width: none;
  height: auto;
  opacity: 0.25;
  pointer-events: none;
}

.footer__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(37 * var(--u));
  width: calc(264.45 * var(--u));
  margin: 0 auto;
  text-align: center;
}

.footer__label {
  width: calc(264.45 * var(--u));
  font-family: var(--mono);
  font-weight: 400;
  font-size: calc(15.79 * var(--u));
  letter-spacing: calc(-0.95 * var(--u));
  text-transform: uppercase;
  line-height: 1;
}

.footer__brand { width: calc(264.45 * var(--u)); }

.footer__logo { width: 100%; height: auto; }

/* As quebras são controladas: o nome da marca nunca parte no meio. */
.footer__direitos span { display: block; }

.footer__direitos {
  /* Mais largo que o bloco da assinatura: o flex centraliza, e a linha da
     marca cabe inteira sem quebrar. */
  width: calc(345 * var(--u));
  margin-top: calc(30 * var(--u));
  font-family: var(--mono);
  font-weight: 400;
  font-size: calc(10.4 * var(--u));
  letter-spacing: calc(0.3 * var(--u));
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

.footer__sub {
  margin-top: calc(8.9 * var(--u));
  font-family: var(--expandida);
  font-weight: 500;
  font-size: calc(17.5 * var(--u));
  letter-spacing: calc(3.5 * var(--u));
  text-transform: uppercase;
  text-indent: calc(3.5 * var(--u));
  line-height: 1;
}

/* ==========================================================================
   TABLET — mantém o empilhado do mobile, escalado para ocupar a tela
   ========================================================================== */

@media (min-width: 600px) and (max-width: 1099.98px) {
  :root { --u: clamp(1.22px, 100vw / 520, 1.75px); }
}

/* ==========================================================================
   DESKTOP — frame 1440x1024
   Só entra onde as duas colunas cabem inteiras: 1440 * 0.764 = 1100.
   ========================================================================== */

@media (min-width: 1100px) {
  :root {
    /* Ancorada na largura e na altura: o hero cabe inteiro na dobra
       em qualquer proporção de tela. */
    --u: clamp(0.7px, min(100vw / 1440, 100svh / 1024), 1.12px);
    --poster-w: calc(686.58 * var(--u));
  }

  .hero {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: 0;
  }

  .hero::after { height: calc(150 * var(--u)); }

  .hero__bg {
    background-image: linear-gradient(
      192.37deg,
      rgb(200, 224, 238) 9.02%,
      rgb(156, 186, 204) 27.92%,
      rgb(84, 122, 145) 44.89%,
      rgb(4, 33, 49) 64.55%,
      rgb(3, 14, 25) 89.24%
    );
  }

  .hero__texture {
    top: calc(50% + 48.03vw);
    left: 50%;
    width: 102.2vw;
    height: 181.6vw;
  }

  /* Véu concentrado atrás da coluna de texto: segura o contraste à esquerda
     sem apagar o brilho do gradiente do lado do pôster. */
  .hero__scrim {
    background: radial-gradient(
      125% 105% at 8% 42%,
      rgba(4, 25, 39, 0.66) 0%,
      rgba(4, 25, 39, 0.44) 30%,
      rgba(4, 25, 39, 0.18) 48%,
      rgba(4, 25, 39, 0) 66%
    );
  }

  .hero__inner {
    display: grid;
    grid-template-columns: calc(448.16 * var(--u)) 1fr;
    align-items: center;
    gap: calc(90 * var(--u));
    width: calc(1440 * var(--u));
    max-width: 100%;
    margin: 0 auto;
    padding-left: calc(118.78 * var(--u));
  }

  .hero__copy {
    align-items: flex-start;
    width: calc(448.16 * var(--u));
    text-align: left;
  }

  .hero__copy .headline { margin-top: calc(58 * var(--u)); }
  .hero__copy .lede { margin-top: calc(26 * var(--u)); }
  .hero__copy .speakers { margin-top: calc(67.13 * var(--u)); }
  .hero__copy .meta { margin-top: calc(38.42 * var(--u)); }
  .hero__copy .cta { margin-top: calc(39.96 * var(--u)); }

  .mark {
    font-size: calc(43.8 * var(--u));
    letter-spacing: calc(1.31 * var(--u));
  }

  .headline {
    font-size: calc(48 * var(--u));
    letter-spacing: calc(-0.96 * var(--u));
  }

  .lede {
    width: 100%;
    font-size: calc(20 * var(--u));
    letter-spacing: calc(-0.4 * var(--u));
    line-height: 1.2;
  }

  .speakers {
    justify-content: flex-start;
    gap: calc(43 * var(--u));
    font-size: calc(22.54 * var(--u));
    letter-spacing: calc(-1.35 * var(--u));
  }

  .meta {
    font-size: calc(13.45 * var(--u));
    letter-spacing: calc(3.23 * var(--u));
  }

  .cta {
    width: calc(407.45 * var(--u));
    height: calc(87.05 * var(--u));
    font-size: calc(28.59 * var(--u));
    letter-spacing: calc(-1.72 * var(--u));
  }

  .hero__visual {
    width: calc(686.58 * var(--u));
    justify-self: start;
    align-self: center;
  }

  .hero__photo {
    top: calc(var(--poster-w) * 0.1529);
    left: calc(var(--poster-w) * -0.0926);
    width: calc(var(--poster-w) * 1.156);
  }

  .poster__title {
    font-size: calc(53.88 * var(--u));
    letter-spacing: calc(1.62 * var(--u));
  }

  .poster__footer { font-size: calc(28.59 * var(--u)); letter-spacing: calc(-1.72 * var(--u)); }

  .address {
    margin-top: calc(28 * var(--u));
    width: calc(400 * var(--u));
    font-size: calc(15.79 * var(--u));
  }

  .address span { display: inline; }
  .address br { display: inline; }

  .cta--flutuante { display: none; }

  .footer {
    padding: calc(93.58 * var(--u)) 0 calc(110 * var(--u));
  }

  /* Mesma largura e mesma margem do .hero__inner: a assinatura fica na
     mesma vertical da headline em qualquer largura de tela. */
  .footer__inner {
    align-items: flex-start;
    width: calc(1440 * var(--u));
    max-width: 100%;
    margin: 0 auto;
    padding-left: calc(118.78 * var(--u));
    text-align: left;
  }

  .footer__watermark {
    top: 0;
    left: auto;
    right: calc(-30 * var(--u));
    width: calc(825.54 * var(--u));
    transform: none;
  }
}

/* Telas largas: o frame para de crescer e fica centrado. */
@media (min-width: 1700px) {
  .hero__inner { padding-left: calc(118.78 * var(--u)); }
}


/* ==========================================================================
   ANIMAÇÃO DE ENTRADA
   O hero anima direto no carregamento, sem esperar observador: ele está acima
   da dobra e qualquer atraso empurraria o LCP. Só o rodapé entra por scroll.
   Nada disso roda sem a classe .js, então o conteúdo nunca some se o script
   falhar.
   ========================================================================== */

.js .hero__copy > * {
  opacity: 0;
  animation: sobe 0.8s cubic-bezier(0.22, 0.7, 0.28, 1) forwards;
}

.js .hero__visual {
  opacity: 0;
  animation: aparece 0.9s cubic-bezier(0.22, 0.7, 0.28, 1) 0.1s forwards;
}

@keyframes sobe {
  from { opacity: 0; transform: translateY(calc(18 * var(--u))); }
  to   { opacity: 1; transform: none; }
}

@keyframes aparece {
  from { opacity: 0; transform: translateY(calc(22 * var(--u))) scale(0.99); }
  to   { opacity: 1; transform: none; }
}

/* O escalonamento é o que dá a sensação de a página se montar, não piscar. */
.js .hero__copy > *:nth-child(1) { animation-delay: 0.02s; }
.js .hero__copy > *:nth-child(2) { animation-delay: 0.08s; }
.js .hero__copy > *:nth-child(3) { animation-delay: 0.16s; }
.js .hero__copy > *:nth-child(4) { animation-delay: 0.24s; }
.js .hero__copy > *:nth-child(5) { animation-delay: 0.31s; }
.js .hero__copy > *:nth-child(6) { animation-delay: 0.38s; }
.js .hero__copy > *:nth-child(7) { animation-delay: 0.45s; }

/* Rodapé: entra quando aparece no scroll. */
.js [data-anima="entra"] > * {
  opacity: 0;
  transform: translateY(calc(16 * var(--u)));
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.7, 0.28, 1);
}

.js [data-anima="entra"].is-dentro > * {
  opacity: 1;
  transform: none;
}

.js [data-anima="entra"].is-dentro > *:nth-child(2) { transition-delay: 0.12s; }

/* A textura respira devagar, o suficiente para o fundo não parecer parado. */
.hero__texture {
  animation: respira 26s ease-in-out infinite alternate;
}

@keyframes respira {
  from { transform: translate(-50%, -50%) scaleY(-1) scale(1); }
  to   { transform: translate(-50%, -50%) scaleY(-1) scale(1.045); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .js .hero__copy > *,
  .js .hero__visual,
  .js [data-anima="entra"] > * {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero__texture { animation: none; }
  .cta::after { display: none; }
}