/* ============================================================
   Resende GOAT — Landing
   Fidelidade 1:1 ao Figma (frame 1920 x 1080)
   ============================================================ */

/* --- Fonte oficial FWC2026 ---------------------------------
   Coloque o arquivo da fonte em ./fonts/ e ajuste o formato.
   Enquanto não estiver presente, o fallback abaixo é usado. */
@font-face {
  font-family: "FWC2026";
  src: url("fonts/FWC2026.woff2") format("woff2"),
       url("fonts/FWC2026.woff")  format("woff"),
       url("fonts/FWC2026.otf")   format("opentype"),
       url("fonts/FWC2026.ttf")   format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --green: #24f54e;
  --font: "FWC2026", "Arial Black", "Archivo Black", Haettenschweiler, Helvetica, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  overflow-x: hidden;
  max-width: 100%;
}

body {
  background: #000;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Viewport ocupa a tela toda e centraliza o palco */
.viewport {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
  overflow: hidden;
}

/* Palco com as dimensões exatas do Figma; escalado via JS */
.stage {
  position: relative;
  width: 1920px;
  height: 1080px;
  background: #000;
  overflow: hidden;
  transform-origin: center center;
  /* --scale é definido pelo script.js */
  transform: scale(var(--scale, 1));
}

/* Cada elemento posicionado em coordenadas absolutas do Figma */
.stage > img,
.stage > .titulo,
.stage > .cta-100,
.stage > .sombra,
.stage > .cta-container {
  position: absolute;
}

/* 1. Grade de fundo */
.grid-fundo {
  left: 0;
  top: 0;
  width: 1920px;
  height: 1046px;
}

/* 2. Luz / brilho */
.luz {
  left: 636px;
  top: 302px;
  width: 647px;
  height: 763px;
}

/* 3. Logo Brasil (glow verde atrás do jogador) */
.logo-brasil {
  left: 192px;
  top: 0;
  width: 1535px;
  height: 1080px;
}

/* 4. Foto do Resende (nova) */
.foto-resende {
  left: 617px;
  top: 64px;
  width: 679px;
  height: 910px;
  object-fit: cover;
  object-position: top center;
  /* funde o rodapé da foto no preto, escondendo o corte */
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 82%, transparent 99%);
}

/* 5. Título Resende GOAT */
.titulo {
  left: 330px;
  top: 228px;
  font-family: var(--font);
  font-weight: 400;
  font-size: 77.259px;
  line-height: 0.602;
  color: #fff;
  white-space: nowrap;
}
.titulo span { display: block; }
.titulo-l1 { padding-bottom: 0.2em; }
.titulo-l2 { color: var(--green); }

/* 6. Sombra — 3 gradientes empilhados (igual ao Figma) */
.sombra {
  left: 0;
  top: 425px;
  width: 1920px;
  height: 655px;
  pointer-events: none;
}
.sombra span {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
}

/* 7. Texto 100% Grátis */
.cta-100 {
  left: 1194px;
  top: 150px;
  font-family: var(--font);
  font-weight: 400;
  font-size: 53.21px;
  line-height: 0.602;
  color: #fff;
  white-space: nowrap;
}
.cta-100 span { display: block; }
.cta-100-l1 { padding-bottom: 0.2em; }
.cta-100-l2 { color: var(--green); }

/* 8. Bullet 2 (linha conectora) */
.bullet-2 {
  left: 1056.5px;
  top: 256px;
  width: 201.5px;
  height: 89.5px;
}

/* 9. Bullet 01 (linha logo após o GOAT) */
.bullet-01 {
  left: 553px;
  top: 342px;
  width: 164px;
  height: 7px;
}

/* 10. Container CTA -------------------------------------------- */
.cta-container {
  left: 623px;
  top: 677px;
  width: 673px;
  height: 276px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 46px 112px 62px;
  background: rgba(81, 81, 81, 0.05);
  -webkit-backdrop-filter: blur(17.25px);
  backdrop-filter: blur(17.25px);
  border: 1px solid var(--green);
  border-radius: 40px 40px 40px 10px;
  box-shadow: 0 -6px 54.5px 0 rgba(0, 0, 0, 0.5);
}

.cta-titulo {
  width: 386.479px;
  font-family: var(--font);
  font-weight: 400;
  font-size: 54.351px;
  line-height: 0.602;
  text-align: center;
  color: #fff;
}

/* Botão "Entrar Agora!" */
.cta-button {
  position: relative;
  width: 449px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #009f20;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--green) 0%, #098722 100%);
  box-shadow: 0 4px 59.9px 0 rgba(0, 255, 51, 0.3);
  text-decoration: none;
  overflow: hidden;
}
/* Inner shadow do Figma */
.cta-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 7px 21.9px 0 rgba(0, 0, 0, 0.25);
  pointer-events: none;
}

.cta-btn-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #001805;
}
.cta-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}
.cta-btn-text {
  font-family: var(--font);
  font-weight: 400;
  font-size: 35.371px;
  line-height: 0.602;
  letter-spacing: -1.7685px;
  color: #001805;
  white-space: nowrap;
}

/* ============================================================
   VERSÃO MOBILE — palco 430x932, coordenadas exatas do Figma
   (node 191:64)
   ============================================================ */
.viewport-m { display: none; }

@media (max-aspect-ratio: 1/1) {
  .viewport { display: none; }
  .viewport-m {
    display: block;
    position: fixed;
    inset: 0;
    overflow: hidden;
    background: #000;
  }
}

.m-stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: 430px;
  height: 932px;
  /* brilho verde ambiente suave (preenche as laterais, sem corte) */
  background:
    radial-gradient(120% 62% at 50% 30%,
      rgba(36, 245, 78, 0.12) 0%,
      rgba(36, 245, 78, 0.05) 42%,
      rgba(0, 0, 0, 0) 72%),
    #000;
  overflow: hidden;
  transform-origin: top center;
  transform: translateX(-50%) scale(var(--m-scale, 1));
}

.m-stage > img,
.m-stage > .m-titulo,
.m-stage > .m-100,
.m-stage > .m-sombra,
.m-stage > .m-cta { position: absolute; }

/* 1. Grade de fundo */
.m-grid { left: -223px; top: 57.94px; width: 894.789px; height: 894.789px; }

/* 2. Luz */
.m-luz { left: 50.347px; top: 159.94px; width: 342.971px; height: 404.463px; }

/* 3. Logo Brasil (glow verde) — ampliado p/ vazar nas bordas (sem corte) */
.m-brasil { left: -314px; top: -110px; width: 1058px; height: 1157px; }

/* 4. Foto do Resende (nova) */
.m-foto {
  left: 32px;
  top: 31px;
  width: 384px;
  height: 515px;
  object-fit: cover;
  object-position: top center;
  /* funde o rodapé da foto no preto, escondendo o corte */
  -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 84%, transparent 99%);
}

/* 5. Título Resende GOAT */
.m-titulo {
  left: 20px;
  top: 105px;
  font-family: var(--font);
  font-weight: 400;
  font-size: 22px;
  line-height: 0.602;
  color: #fff;
  white-space: nowrap;
}
.m-titulo span { display: block; }
.m-tl1 { padding-bottom: 0.2em; }
.m-tl2 { color: var(--green); }

/* 6. Sombra — 3 gradientes empilhados */
.m-sombra { left: 0; top: 362.94px; width: 430px; height: 569px; pointer-events: none; }
.m-sombra span {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%);
}

/* 7. Texto 100% Grátis (igual ao Figma) */
.m-100 {
  left: 333px;
  top: 94px;
  font-family: var(--font);
  font-weight: 400;
  font-size: 22.578px;
  line-height: 0.602;
  color: #fff;
  white-space: nowrap;
}
.m-100 span { display: block; }
.m-100-l1 { padding-bottom: 0.2em; }
.m-100-l2 { color: var(--green); }

/* 8. Bullet 2 (linha conectora) */
.m-bullet2 { left: 276px; top: 143.02px; width: 88.493px; height: 39.306px; }

/* 9. Bullet 01 (linha logo após o GOAT) */
.m-bullet1 { left: 104px; top: 128px; width: 62.656px; height: 2.674px; }

/* 10. Container CTA */
.m-cta {
  left: 25.52px;
  top: 442.94px;
  width: 378.728px;
  height: 155.318px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18.008px;
  padding: 25.886px 44px 34.89px;
  background: rgba(81, 81, 81, 0.05);
  -webkit-backdrop-filter: blur(9.707px);
  backdrop-filter: blur(9.707px);
  border: 0.563px solid var(--green);
  border-radius: 22.51px 22.51px 22.51px 5.627px;
  box-shadow: 0 -3.376px 30.67px 0 rgba(0, 0, 0, 0.5);
}
.m-cta-titulo {
  width: 217.489px;
  font-family: var(--font);
  font-weight: 400;
  font-size: 30.586px;
  line-height: 0.602;
  text-align: center;
  color: #fff;
}
.m-cta-btn {
  position: relative;
  width: 100%;
  height: 56px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.3px solid #009f20;
  border-radius: 13px;
  background: linear-gradient(180deg, var(--green) 0%, #098722 100%);
  box-shadow: 0 2.251px 33.708px 0 rgba(0, 255, 51, 0.3);
  text-decoration: none;
  overflow: hidden;
}
.m-cta-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 3.939px 12.324px 0 rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.m-cta-btn-in {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #001805;
}
.m-cta-icon { width: 21px; height: 21px; flex-shrink: 0; }
.m-cta-btn-txt {
  font-family: var(--font);
  font-weight: 400;
  font-size: 23px;
  line-height: 0.602;
  letter-spacing: -1.15px;
  color: #001805;
  white-space: nowrap;
}

/* ============================================================
   PARTÍCULAS — canvas suave atrás do conteúdo
   ============================================================ */
.particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ============================================================
   ANIMAÇÕES — entrada escalonada + pulse do botão
   (só rodam quando o usuário não pede menos movimento)
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(42px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes glowIn {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes btnPulseD {
  0%, 100% { transform: scale(1);     box-shadow: 0 4px 59.9px 0 rgba(0, 255, 51, 0.3); }
  50%      { transform: scale(1.03);  box-shadow: 0 4px 82px 9px rgba(0, 255, 51, 0.6); }
}
@keyframes btnPulseM {
  0%, 100% { transform: scale(1);     box-shadow: 0 2.251px 33.708px 0 rgba(0, 255, 51, 0.3); }
  50%      { transform: scale(1.03);  box-shadow: 0 2.251px 46px 5px rgba(0, 255, 51, 0.6); }
}

@media (prefers-reduced-motion: no-preference) {
  /* --- grade --- */
  .grid-fundo, .m-grid { animation: fadeIn 1.1s ease-out both; }
  .particles { animation: fadeIn 1.6s ease-out 0.4s both; }

  /* --- glow / luz --- */
  .luz, .logo-brasil, .m-luz, .m-brasil { animation: glowIn 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }

  /* --- foto --- */
  .foto-resende, .m-foto { animation: fadeUp 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; }

  /* --- sombra --- */
  .sombra, .m-sombra { animation: fadeIn 1.2s ease-out 0.4s both; }

  /* --- título --- */
  .titulo, .m-titulo { animation: fadeLeft 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both; }

  /* --- texto 100% Grátis + bullets --- */
  .cta-100, .bullet-2, .bullet-01,
  .m-100, .m-bullet2, .m-bullet1 { animation: fadeIn 0.8s ease-out 1s both; }

  /* --- card CTA --- */
  .cta-container, .m-cta { animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.05s both; }

  /* --- pulse do botão (começa após a entrada) --- */
  .cta-button { animation: btnPulseD 2.6s ease-in-out 2.1s infinite; }
  .m-cta-btn  { animation: btnPulseM 2.6s ease-in-out 2.1s infinite; }
}