@font-face{
  font-family:'Hany-S';
  src:url(assets/fonts/Hany-S.otf) format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Hany-M';
  src:url(assets/fonts/Hany-M.otf) format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Hany-L';
  src:url(assets/fonts/Hany-L.otf) format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Geist-Mono';
  src:url(assets/fonts/Geist-Mono.otf) format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --pink: #E33C76;
  --ink: #1C1C1C;
  --cream: #F9F9F9;
}

*{ margin:0; padding:0; box-sizing:border-box; }
[hidden]{ display:none !important; }

html,body{
  width:100%;
  /* cor do fim do céu: se sobrar algum espaço (barra do navegador no celular), não aparece preto */
  background:#F29A5C;
}

/* ------------------------------------------------------------
   Palco: ocupa a tela inteira (100vh). O conteúdo fica num "stage"
   com a proporção do layout original (2096x1364) redimensionado
   para caber na tela, centralizado. O vídeo cobre o fundo todo.
   Dentro do stage as medidas usam cqw (1cqw = 1% da largura do stage).
   ------------------------------------------------------------ */
:root{
  /* 1% da largura do stage, para uso fora dele (rodapé) */
  --sw: min(1vw, 1.5367vh);
  --sw: min(1vw, 1.5367dvh);
}

.stage-wrap{
  position:relative;
  width:100%;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image:url(assets/img/bg.jpg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#e7a98f;
}

.stage{
  position:relative;
  z-index:2;
  width:min(100vw, 153.67vh);
  width:min(100vw, 153.67dvh);
  aspect-ratio:2096 / 1364;
  container-type:inline-size;
  font-family:'Geist-Mono', monospace;
  color:#fff;
}

.bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
}

.sky-band{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:radial-gradient(90% 24% at 50% 84%, rgba(160,40,40,0.10), transparent 70%);
}

/* ---------- Título ---------- */
.headline{
  position:absolute;
  z-index:2;
  left:50%;
  transform:translateX(-50%);
  top:17.8%;
  width:45.75cqw;            /* mesma caixa das imagens originais: referência das luzes */
  display:flex;
  flex-direction:column;
  align-items:center;
  font-family:'Hany-M', sans-serif;
  font-weight:400;
  color:var(--pink);
  text-align:center;
  white-space:nowrap;
}
.headline .line1,
.headline .line2{
  display:block;
  line-height:0.9;
  letter-spacing:0;
}
.headline .line1{ font-size:7.35cqw; margin-top:-0.6cqw; }
.headline .line2{ font-size:9.8cqw; margin-top:0.7cqw; }

/* ---------- Glifos que a fonte Hany não tem (desenhados em SVG, na cor do texto) ---------- */
/* asterisco de 6 pontas arredondado, usado em "F****" */
.ast{
  display:inline-block;
  width:0.5em; height:0.5em;
  margin:0 0.02em;
  vertical-align:top;
  position:relative; top:0.03em;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 9V91M14.5 29.5L85.5 70.5M14.5 70.5L85.5 29.5' stroke='%23000' stroke-width='21' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 9V91M14.5 29.5L85.5 70.5M14.5 70.5L85.5 29.5' stroke='%23000' stroke-width='21' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* letra base da Hany + acento desenhado por cima */
.acc{ position:relative; display:inline-block; }
.acc::after{
  content:"";
  position:absolute;
  left:50%;
  background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
}
.acc-cedil::after{           /* cedilha sob o C */
  width:0.3em; height:0.27em;
  bottom:-0.1em;
  transform:translateX(-30%);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M17 4v8c11 0 16 5 16 11 0 8-7 13-16 13-6 0-10-2-13-5' stroke='%23000' stroke-width='10.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M17 4v8c11 0 16 5 16 11 0 8-7 13-16 13-6 0-10-2-13-5' stroke='%23000' stroke-width='10.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}
.acc-til::after{             /* til sobre o A */
  width:0.58em; height:0.21em;
  top:-0.13em;
  transform:translateX(-50%);
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 36'%3E%3Cpath d='M9 26C20 4 38 4 50 18S80 32 91 10' stroke='%23000' stroke-width='15' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 36'%3E%3Cpath d='M9 26C20 4 38 4 50 18S80 32 91 10' stroke='%23000' stroke-width='15' stroke-linecap='round' fill='none'/%3E%3C/svg%3E");
}
/* o efeito .reveal recorta pela caixa do texto: dá folga para os acentos não serem cortados */
.success-title{ padding:0.2em 0 0.15em; margin:-0.2em 0 -0.15em; }

/* ---------- Efeito de revelação (fade varrendo da esquerda p/ direita) ---------- */
.reveal{
  -webkit-mask-image:linear-gradient(90deg, #000 0%, #000 33%, rgba(0,0,0,0) 50%);
          mask-image:linear-gradient(90deg, #000 0%, #000 33%, rgba(0,0,0,0) 50%);
  -webkit-mask-size:300% 100%;
          mask-size:300% 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;
          mask-position:100% 0;
  animation:reveal 2.6s cubic-bezier(.25,.6,.2,1) both;
}
.headline .line1{ animation-delay:.2s; }
.headline .line2{ animation-delay:.7s; }
.success-title{ animation-delay:.1s; }
.success-desc{ animation-delay:.5s; }
@keyframes reveal{
  from{ -webkit-mask-position:100% 0; mask-position:100% 0; }
  to  { -webkit-mask-position:0% 0;   mask-position:0% 0; }
}
@media (prefers-reduced-motion: reduce){
  .reveal{ animation:none; -webkit-mask-image:none; mask-image:none; }
}

.title-light{
  position:absolute;
  z-index:3;
  pointer-events:none;
  mix-blend-mode:screen;
  transform-origin:center;
  animation:title-light-pulse 2.8s ease-in-out infinite;
}
/* posições relativas ao bloco .headline (largura 45.75cqw, left 27.125cqw, top 11.58cqw) */
.title-light.light1{
  top:4.064cqw; left:38.949cqw;
  width:14.201cqw; height:14.479cqw;
  animation-delay:0s;
}
.title-light.light2{
  top:-4.89cqw; left:-4.875cqw;
  width:9.722cqw; height:9.896cqw;
  animation-delay:1.1s;
}
@keyframes title-light-pulse{
  0%   { transform:scale(0.85) rotate(0deg); opacity:0.55; }
  50%  { transform:scale(1.15) rotate(8deg); opacity:1; }
  100% { transform:scale(0.85) rotate(0deg); opacity:0.55; }
}

.countdown{
  position:absolute;
  z-index:2;
  left:34.29%;
  width:29.0%;
  top:43.50%;
  height:14.05%;
  background-image:url(assets/img/countdown-bg.png);
  background-size:100% 100%;
  background-repeat:no-repeat;
  border-radius:1.5cqw;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 1.5cqw 3cqw -1cqw rgba(227,60,118,0.4);
}
.countdown-row{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:0.14cqw;
}
.cd-item{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.cd-num{
  font-family:'Hany-M', sans-serif;
  font-weight:400;
  font-size:3.7037cqw;
  line-height:126.3%;
  letter-spacing:0;
  color:#fff;
  white-space:nowrap;
}
.cd-item .cd-label{
  font-family:'Geist-Mono', monospace;
  font-weight:400;
  font-size:0.6944cqw;
  line-height:126.3%;
  letter-spacing:0;
  color:rgba(255,255,255,0.9);
  text-transform:uppercase;
  margin-top:0.8cqw;
  white-space:nowrap;
}
.cd-colon{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:0.28cqw;
  height:calc(3.7037cqw * 1.263);
  transform:translateY(0.55cqw);
}
.cd-colon span{
  width:0.85cqw; height:0.85cqw;
  border-radius:50%;
  background:#fff;
  display:block;
}

/* ---------- Subtítulo ---------- */
.subhead{
  position:absolute;
  z-index:2;
  left:50%;
  width:34cqw;
  transform:translateX(-50%);
  top:61.90%;
  text-align:center;
  color:#fff;
}
.subhead-title{
  font-family:'Hany-M', sans-serif;
  font-weight:400;
  font-size:2.3cqw;
  line-height:1.02;
  letter-spacing:0;
  text-transform:uppercase;
}
.subhead-desc{
  font-family:'Geist-Mono', monospace;
  font-weight:400;
  font-size:0.88cqw;
  line-height:1.45;
  letter-spacing:0.01em;
  margin:1.25cqw auto 0;
  max-width:23.5cqw;
}

/* ---------- Formulário ---------- */
.form-wrap{
  position:absolute;
  z-index:2;
  left:36.87%;
  width:24.13%;
  top:78.98%;
  height:5.254%;
}

form{
  display:flex;
  align-items:center;
  width:100%;
  height:100%;
  background:#fff;
  border-radius:999px;
  padding:0 0.3cqw 0 1.1cqw;
  box-shadow:0 0.6cqw 1.5cqw -0.5cqw rgba(0,0,0,0.25);
  position:relative;
  z-index:1;
  transition:opacity .2s;
}
.form-wrap.is-loading form{ opacity:.65; }

form input{
  flex:1;
  min-width:0;
  border:none;
  outline:none;
  background:transparent;
  font-family:'Geist-Mono', monospace;
  font-size:0.85cqw;
  letter-spacing:0.04em;
  color:var(--ink);
  text-transform:uppercase;
}
form input::placeholder{ color:#b9b9b9; }
form input[type="email"]{ text-transform:none; }

/* honeypot: fora da tela */
#hpField{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  opacity:0;
  pointer-events:none;
}

form button{
  width:1.9cqw; height:1.9cqw;
  min-width:24px; min-height:24px;
  border-radius:50%;
  border:none;
  background:transparent;
  color:var(--pink);
  font-size:1.1cqw;
  font-weight:700;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
form button svg{ width:62%; height:62%; display:block; transition:transform .2s; }
form button:hover svg{ transform:translateX(12%); }
form button:disabled{ cursor:wait; opacity:.5; }

.form-msg{
  position:absolute;
  left:0; right:0;
  top:115%;
  margin:0;
  text-align:center;
  font-family:'Geist-Mono', monospace;
  font-size:0.7cqw;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:#fff;
  text-shadow:0 0.1cqw 0.4cqw rgba(0,0,0,0.45);
  min-height:1em;
  pointer-events:none;
}
.form-msg.is-error{ color:#FFD1E0; }

/* ---------- Sucesso ---------- */
.success-view{
  position:absolute;
  z-index:2;
  left:50%;
  transform:translateX(-50%);
  top:54.05%;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.success-view{ text-align:center; color:#fff; width:34cqw; }
.success-title{
  font-family:'Hany-M', sans-serif;
  font-weight:400;
  font-size:2.2cqw;
  line-height:1.02;
  letter-spacing:0;
  text-transform:uppercase;
}
.success-desc{
  font-family:'Geist-Mono', monospace;
  font-weight:400;
  font-size:0.88cqw;
  line-height:1.45;
  letter-spacing:0.01em;
  margin-top:1.25cqw;
}
.success-cta{
  display:inline-flex;
  align-items:center;
  gap:0.6cqw;
  margin-top:1.7cqw;
  height:3.4cqw;
  padding:0 1.7cqw 0 1.3cqw;
  border-radius:999px;
  background:#fff;
  color:var(--ink);
  font-family:'Geist-Mono', monospace;
  font-size:0.85cqw;
  letter-spacing:0.04em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 0.6cqw 1.5cqw -0.5cqw rgba(0,0,0,0.25);
  transition:transform .15s;
}
.success-cta:hover{ transform:translateY(-2px); }
.success-cta svg{ width:1.5cqw; height:1.5cqw; color:#25D366; flex:none; }
.success-note{
  margin-top:0.9cqw;
  font-family:'Geist-Mono', monospace;
  font-size:0.75cqw;
  letter-spacing:0.04em;
  text-transform:uppercase;
  opacity:.9;
}
.success-icons{ display:flex; gap:2.02cqw; margin-top:2.68cqw; }
.success-icons a{ width:7.62cqw; height:7.62cqw; display:block; }
.success-icons img{ width:100%; height:100%; display:block; }

/* ---------- Rodapé ---------- */
/* fica no .stage-wrap (borda da tela), medidas em --sw = 1% da largura do stage */
footer{
  position:absolute;
  z-index:3;
  left:0; right:0;
  bottom:0;
  height:7vh;
  height:7dvh;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 calc(3.2 * var(--sw));
}
.logo{ width:calc(6.2 * var(--sw)); height:auto; display:block; }
.socials{ display:flex; gap:calc(0.6 * var(--sw)); }
.socials a{
  width:calc(1.9 * var(--sw)); height:calc(1.9 * var(--sw));
  min-width:26px; min-height:26px;
  border-radius:50%;
  border:calc(0.12 * var(--sw)) solid rgba(255,255,255,0.8);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
}
.socials svg{ width:52%; height:52%; }

/* ============================================================
   MOBILE (até 900px) — layout em coluna, altura da tela
   ============================================================ */
@media (max-width: 900px){
  html,body{ min-height:100%; }

  /* nada pode passar da borda da tela: senão o celular cria rolagem lateral
     e reduz a página inteira para caber (aparece uma faixa embaixo e do lado) */
  html,body{ overflow-x:hidden; }

  .stage-wrap{
    height:auto;
    min-height:100vh;
    min-height:100dvh;
    overflow:hidden;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
  }

  .stage{
    width:100%;
    aspect-ratio:auto;
    flex:1 0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    padding:clamp(24px, 6vh, 48px) 24px 0;
  }

  .bg-video,
  .sky-band{ position:absolute; inset:0; }

  /* Título */
  .headline{
    position:relative;
    left:auto; top:auto;
    transform:none;
    width:auto;
    max-width:100%;
  }
  .headline .line1{ font-size:clamp(42px, 13.2vw, 62px); margin-top:0; }
  .headline .line2{ font-size:clamp(56px, 17.6vw, 80px); margin-top:1vw; }

  /* Luzes: em % do bloco do título */
  .title-light.light1{
    top:38%; left:auto; right:-14%;
    width:31%; height:auto;
  }
  .title-light.light2{
    top:-22%; left:-9%;
    width:21%; height:auto;
  }

  /* Cronômetro */
  .countdown{
    position:relative;
    left:auto; top:auto;
    width:min(88vw, 400px);
    height:auto;
    margin-top:clamp(28px, 7vh, 56px);
    padding:5vw 3vw 4vw;
    border-radius:16px;
    box-shadow:0 12px 28px -10px rgba(227,60,118,0.45);
  }
  .countdown-row{ gap:0.6vw; }
  .cd-num{ font-size:clamp(34px, 11vw, 52px); }
  .cd-item .cd-label{ font-size:clamp(8px, 2.4vw, 11px); margin-top:2vw; }
  .cd-colon{
    height:calc(clamp(34px, 11vw, 52px) * 1.263);
    gap:1vw;
    transform:translateY(1.4vw);
  }
  .cd-colon span{ width:2.2vw; height:2.2vw; max-width:10px; max-height:10px; }

  /* Subtítulo */
  .subhead{
    position:relative;
    left:auto; top:auto;
    transform:none;
    width:min(88vw, 400px);
    margin-top:clamp(24px, 6vh, 48px);
  }
  .subhead-title{ font-size:clamp(20px, 6.2vw, 29px); }
  .subhead-desc{
    font-size:clamp(11px, 3.3vw, 14px);
    max-width:min(80vw, 340px);
    margin-top:12px;
  }

  /* Formulário */
  .form-wrap{
    position:relative;
    left:auto; top:auto;
    width:min(86vw, 380px);
    height:52px;
    margin-top:clamp(20px, 5vh, 40px);
  }
  form{ padding:0 6px 0 18px; box-shadow:0 8px 20px -8px rgba(0,0,0,0.3); }
  form input{ font-size:14px; }
  form button{ width:36px; height:36px; font-size:18px; }
  .form-msg{ font-size:11px; top:calc(100% + 10px); }

  /* Sucesso */
  .success-view{
    position:relative;
    left:auto; top:auto;
    transform:none;
    margin-top:clamp(24px, 6vh, 48px);
  }
  .success-view{ width:min(88vw, 400px); }
  .success-title{ font-size:clamp(20px, 6.2vw, 29px); }
  .success-desc{ font-size:clamp(11px, 3.3vw, 14px); margin-top:12px; }
  .success-cta{ margin-top:22px; height:48px; padding:0 22px 0 16px; gap:10px; font-size:13px; }
  .success-cta svg{ width:22px; height:22px; }
  .success-note{ margin-top:12px; font-size:11px; }
  .success-icons{ gap:6vw; margin-top:8vw; }
  .success-icons a{ width:22vw; height:22vw; max-width:110px; max-height:110px; }

  /* Rodapé */
  footer{
    position:relative;
    z-index:2;
    top:auto; bottom:auto;
    width:100%;
    height:auto;
    padding:clamp(28px, 6vh, 48px) 24px 20px;
  }
  .logo{ width:72px; }
  .socials{ gap:10px; }
  .socials a{ width:34px; height:34px; border-width:1.5px; }
}