:root{
  --red:#ff1f29;
  --white:#ffffff;
}

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

html, body{ height:100%; }

body{
  font-family: Arial, Helvetica, sans-serif;

  /* fundo com a imagem */
  background:
    linear-gradient(180deg, rgba(255,31,41,0.92) 0%, rgba(255,31,41,0.92) 100%),
    url("assets/bg.png") no-repeat center center;

  background-size: cover;
  background-attachment: fixed;

  color: rgba(255,255,255,0.96);
  min-height:100vh;
  overflow:hidden;
  position:relative;
}

/* mar animado usando a MESMA imagem, só na parte de baixo */
body::after{
  content:"";
  position:absolute;
  left:-10%;
  bottom:0;
  width:220%;
  height:42vh;

  background: url("assets/bg.png") repeat-x bottom;
  background-size: cover;

  opacity:0.28; /* bem sutil, só pra dar vida */
  filter: blur(0.2px);
  animation: seaMove 90s linear infinite;

  pointer-events:none;
  z-index:0;
}

@keyframes seaMove{
  from{ transform: translateX(0); }
  to{ transform: translateX(-35%); }
}

/* =========================
   PALCO PRINCIPAL (MAIS RESPIRO)
========================= */
.hero{
  position:relative;
  min-height:100vh;
  width:100%;
  padding: 12vh 6vw 22vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap: 28px;
  z-index:2;
}

/* LOGO */
.logo{
  width: 240px;
  height:auto;
  margin-bottom: 10px;
}

/* TEXTOS */
.stay{
  letter-spacing:8px;
  font-size:12px;
  opacity:.95;
  text-transform: uppercase;
  margin-top: 6px;
}

h1{
  font-size: clamp(50px, 9vw, 120px);
  font-weight: 900;
  line-height: .95;
  text-transform: uppercase;
  margin-top: 6px;
}

/* CONTADOR */
.timer{
  display:flex;
  gap: 60px;
  align-items:flex-end;
  justify-content:center;
  font-weight: 900;
  margin-top: 10px;
}

.time{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width: 90px;
}

.timer span{
  font-size: clamp(28px, 4.6vw, 64px);
  line-height: 1;
}

.timer small{
  margin-top: 10px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: lowercase;
  opacity: .92;
}

.done{
  font-size: 20px;
  font-weight: 900;
  margin-top: 10px;
}

.hidden{ display:none; }

/* PROGRESSO */
.progressWrap{
  width: min(760px, 88vw);
  margin-top: 30px;
}

.progressBar{
  width:100%;
  height: 6px;
  background: rgba(255,255,255,0.28);
}

#barFill{
  height:100%;
  width:0%;
  background: #ffffff;
  transition: width 0.6s ease;
}

#percent{
  display:block;
  margin-top: 12px;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
  opacity: .95;
}

/* ASSINATURA (10% DO FINAL) */
.assinatura{
  position:absolute;
  left:50%;
  bottom:10%;
  transform:translateX(-50%);
  text-align:center;
  font-size:12px;
  letter-spacing:1px;
  opacity:.92;
  z-index:3;
}

.assinatura a{
  color: rgba(255,255,255,0.96);
  text-decoration:none;
  font-weight: 800;
}

.assinatura a:hover{ opacity:.78; }

/* =========================
   SVG DO MAR + BARCO DISTANTE
========================= */
.sea{
  position:absolute;
  inset: 0;
  pointer-events:none;
  z-index:1; /* acima do ::after, abaixo do conteúdo */
}

/* ondas só no rodapé */
.seaSvg{
  position:absolute;
  bottom:0;
  left:0;
  width:200%;
  height:30vh;
  animation: waveMove 120s linear infinite; /* ainda mais lento */
  opacity: .95;
}

.wave{ fill: rgba(255,255,255,0.055); }
.w2{ fill: rgba(255,255,255,0.03); }

.horizon{
  stroke: rgba(255,255,255,0.12);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

@keyframes waveMove{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* barco pequeno, longe e lento */
.boatFill{ fill: rgba(255,255,255,0.22); }

.boat.far{
  opacity: .9;
  filter: blur(0.25px);
  animation: boatSailFar 95s linear infinite, boatBobFar 7.5s ease-in-out infinite;
  transform-origin: center;
}

@keyframes boatSailFar{
  from { transform: translate(-140px, 190px); }
  to   { transform: translate(1340px, 190px); }
}

@keyframes boatBobFar{
  0%   { transform: translate(-140px, 190px) translateY(0) rotate(-0.25deg); }
  50%  { transform: translate(-140px, 190px) translateY(2px) rotate(0.25deg); }
  100% { transform: translate(-140px, 190px) translateY(0) rotate(-0.25deg); }
}

/* RESPONSIVO */
@media (max-width: 820px){
  .logo{ width: 210px; }
  .timer{ gap: 40px; }
}

@media (max-width: 600px){
  body{ background-attachment: scroll; } /* melhor no mobile */

  .hero{
    padding: 10vh 6vw 24vh;
    gap: 22px;
  }

  .logo{ width: 175px; }

  .timer{ gap: 22px; }
  .time{ min-width: 70px; }

  .progressWrap{ width: 92vw; }
}

@media (max-width: 420px){
  .timer span{ font-size: 34px; }
  .stay{ letter-spacing:6px; }
}