:root{
  --bg:#000;
  --fg:#f7fbff;
  --cyan:#6de8ff;
  --gold:#ffd27a;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  width:100%;
  min-height:100%;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}
button{font:inherit;-webkit-tap-highlight-color:transparent}

.stage{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  height:100svh;
  height:100dvh;
  overflow:hidden;
  isolation:isolate;
  background:#000;
}

.hero-video{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  background:#000;
  filter:saturate(1.06) contrast(1.08) brightness(.94);
  transform:translateZ(0);
}

.ambient{
  position:absolute;
  inset:-18%;
  z-index:0;
  background:
    radial-gradient(circle at 50% 46%,rgba(0,220,255,.18),transparent 30%),
    radial-gradient(circle at 50% 52%,rgba(255,186,75,.10),transparent 44%),
    #000;
  animation:breathe 7s ease-in-out infinite alternate;
}

.vignette{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.56) 0%,transparent 24%,transparent 64%,rgba(0,0,0,.84) 100%),
    radial-gradient(circle at center,transparent 32%,rgba(0,0,0,.58) 100%);
}

.particles{
  position:absolute;
  inset:0;
  z-index:3;
  opacity:.30;
  pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.90) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(109,232,255,.78) 0 1px,transparent 1.5px);
  background-size:90px 90px,130px 130px;
  background-position:0 0,35px 55px;
  animation:drift 18s linear infinite;
}

.overlay{
  position:absolute;
  inset:0;
  z-index:4;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  align-items:center;
  justify-items:center;
  padding:
    max(16px,env(safe-area-inset-top))
    max(16px,env(safe-area-inset-right))
    max(18px,env(safe-area-inset-bottom))
    max(16px,env(safe-area-inset-left));
  text-align:center;
}

.brand-lockup{
  grid-row:2;
  align-self:center;
  width:min(94vw,1200px);
  opacity:0;
  transform:translateY(12px) scale(.98);
  transition:opacity .8s ease,transform .8s ease;
  text-shadow:0 2px 28px rgba(0,0,0,.95);
}
.brand-lockup.visible{opacity:1;transform:none}

.eyebrow{
  display:block;
  margin-bottom:12px;
  font-size:clamp(.58rem,1vw,.82rem);
  letter-spacing:clamp(.16em,.8vw,.34em);
  color:rgba(255,255,255,.76);
}

h1{
  margin:0 auto;
  width:100%;
  max-width:100%;
  font-size:clamp(2.15rem,8.5vw,8rem);
  line-height:.94;
  letter-spacing:-.025em;
  white-space:nowrap;
  background:linear-gradient(90deg,var(--cyan),#fff,var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 18px rgba(109,232,255,.3));
}

.brand-lockup p{
  margin:16px 0 0;
  font-size:clamp(.68rem,1.6vw,1.08rem);
  letter-spacing:clamp(.09em,.6vw,.17em);
  text-transform:uppercase;
  color:rgba(255,255,255,.84);
}

.enter-wrap{
  grid-row:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
  padding-bottom:max(2px,env(safe-area-inset-bottom));
}

.enter-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:13px;
  min-height:52px;
  max-width:calc(100vw - 32px);
  border:1px solid rgba(255,255,255,.5);
  border-radius:999px;
  padding:14px 22px;
  background:rgba(0,0,0,.52);
  color:#fff;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 0 36px rgba(60,210,255,.17);
  cursor:pointer;
  transition:transform .25s ease,background .25s ease,border-color .25s ease;
  touch-action:manipulation;
}
.enter-button:hover,.enter-button:focus-visible{
  transform:translateY(-2px);
  background:rgba(0,20,28,.72);
  border-color:var(--cyan);
  outline:none;
}
.enter-button:active{transform:scale(.98)}
.enter-button span:first-child{
  font-size:clamp(.66rem,1.4vw,.82rem);
  letter-spacing:.16em;
  white-space:nowrap;
}
.arrow{font-size:1.22rem}

.sound-toggle{
  grid-row:1;
  justify-self:end;
  align-self:start;
  border:0;
  padding:8px 2px;
  background:transparent;
  color:rgba(255,255,255,.82);
  font-size:.7rem;
  letter-spacing:.13em;
  cursor:pointer;
  touch-action:manipulation;
}

.countdown{
  min-height:18px;
  color:rgba(255,255,255,.68);
  font-size:.7rem;
  letter-spacing:.06em;
}
.fade-out{animation:fadeOut .68s ease forwards}
.noscript-link{
  position:absolute;
  left:50%;
  bottom:40px;
  transform:translateX(-50%);
  color:#fff;
}

@keyframes breathe{to{transform:scale(1.08);opacity:.82}}
@keyframes drift{to{background-position:90px 180px,165px 240px}}
@keyframes fadeOut{to{opacity:0;transform:scale(1.012)}}

/* iPhone e celulares em pé: o vídeo 16:9 preenche toda a tela. */
@media (orientation:portrait) and (max-width:900px){
  .hero-video{
    object-fit:cover;
    object-position:50% 50%;
  }
  .vignette{
    background:
      linear-gradient(180deg,rgba(0,0,0,.58) 0%,transparent 24%,transparent 60%,rgba(0,0,0,.90) 100%),
      radial-gradient(circle at center,transparent 26%,rgba(0,0,0,.45) 100%);
  }
  .overlay{
    padding-top:max(12px,env(safe-area-inset-top));
    padding-right:max(14px,env(safe-area-inset-right));
    padding-bottom:max(14px,env(safe-area-inset-bottom));
    padding-left:max(14px,env(safe-area-inset-left));
  }
  .brand-lockup{width:96vw}
  h1{
    font-size:clamp(1.95rem,11.2vw,4.15rem);
    letter-spacing:-.04em;
  }
  .eyebrow{
    margin-bottom:9px;
    font-size:clamp(.54rem,2.25vw,.7rem);
    letter-spacing:.20em;
  }
  .brand-lockup p{
    margin-top:12px;
    font-size:clamp(.58rem,2.35vw,.76rem);
    letter-spacing:.12em;
  }
  .enter-button{
    min-height:48px;
    padding:12px 18px;
  }
  .enter-button span:first-child{
    font-size:.66rem;
    letter-spacing:.13em;
  }
  .sound-toggle{font-size:.64rem}
}

/* iPhone deitado, laptops baixos e navegador com barras abertas. */
@media (max-height:680px){
  .overlay{
    padding-top:max(8px,env(safe-area-inset-top));
    padding-bottom:max(8px,env(safe-area-inset-bottom));
  }
  .brand-lockup{transform:scale(.9)}
  .brand-lockup p{margin-top:8px}
  .eyebrow{margin-bottom:7px}
  .enter-button{min-height:42px;padding:9px 16px}
  .countdown{min-height:14px;font-size:.64rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}