/* =========================================================
   MARCINHO 30 — PAGINA EM CONSTRUCAO
   Edite as cores e medidas aqui em :root que muda o site todo.
   ========================================================= */

:root{
  /* ---- CORES ---- */
  --ink:      #01030e;               /* fundo geral (preto azulado) */
  --bolt:     #3fa9ff;               /* azul eletrico dos raios */
  --bolt-2:   #0b4fd8;               /* azul profundo */
  --gold:     #ffcf3d;               /* dourado dos titulos */
  --amber:    #ff8a12;               /* laranja do degrade */
  --paper:    #e9f1ff;               /* texto claro */
  --mute:     #7f9ac2;               /* texto secundario */
  --line:     rgba(63,169,255,.26);  /* bordas */
  --panel:    rgba(6,14,40,.66);     /* fundo dos cards */

  /* ---- BOTOES ---- */
  --whats:    #25d366;
  --tube:     #ff3b30;

  /* ---- LARGURA MAXIMA ---- */
  --largura:  1140px;
}

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

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

body{
  margin:0;
  min-height:100svh;
  background:var(--ink);
  color:var(--paper);
  font:600 clamp(.95rem,.4vw + .88rem,1.05rem)/1.6 "Barlow Condensed",system-ui,sans-serif;
  overflow-x:hidden;
  /* espaco no fim pro controle de musica nao cobrir o rodape */
  padding-bottom:clamp(5rem,14vw,6.5rem);
}

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

:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:6px}


/* =========================================================
   FUNDO: TEMPESTADE DE RAIOS
   ========================================================= */

.storm{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}

.storm::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(52% 40% at 50% 38%, rgba(23,80,215,.5), transparent 70%),
    radial-gradient(120% 90% at 50% 105%, rgba(3,8,30,.95), var(--ink) 72%);
}

.storm svg{position:absolute;inset:0;width:100%;height:100%}

.storm g{animation:flicker 6s ease-in-out infinite}

@keyframes flicker{
  0%,100%{opacity:.30}
  42%    {opacity:.78}
  58%    {opacity:.42}
}


/* =========================================================
   TIPOGRAFIA DISPLAY (titulos estilo estampa)
   ========================================================= */

.display{
  margin:0;
  font-family:Anton,"Barlow Condensed",sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:.88;
  letter-spacing:.005em;
  transform:skewX(-7deg);              /* inclinacao das estampas */
}

.display > span{display:block}

/* dourado com contorno escuro */
.gold{
  background:linear-gradient(180deg,#fff 6%,#ffe071 42%,var(--amber) 97%);
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  filter:drop-shadow(0 3px 0 #6f2500) drop-shadow(0 0 26px rgba(255,145,25,.45));
}

/* branco com contorno azul */
.ice{
  color:#e6f1ff;
  filter:drop-shadow(0 3px 0 #05306f) drop-shadow(0 0 20px rgba(63,169,255,.65));
}


/* =========================================================
   LAYOUT GERAL
   ========================================================= */

.page{
  position:relative;
  z-index:1;
  width:min(var(--largura),100%);
  margin-inline:auto;
  padding:clamp(1.25rem,4vw,2.5rem) clamp(1rem,4vw,2rem) clamp(2rem,5vw,3rem);
}


/* =========================================================
   TOPO: PERSONAGEM + TEXTO
   ========================================================= */

.hero{
  display:grid;
  gap:clamp(1rem,3vw,2rem);
  align-items:center;
  justify-items:center;
  text-align:center;
}

/* a partir de 860px vira duas colunas, igual a estampa */
@media (min-width:860px){
  .hero{
    grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    text-align:left;
    justify-items:stretch;
  }
  .hero-art{justify-self:center}
}

.hero-art{position:relative;display:grid;justify-items:center;margin:0}

/* sombra azul no chao */
.hero-art::after{
  content:"";
  position:absolute;bottom:1%;left:50%;
  translate:-50% 0;
  width:min(280px,68%);height:18px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(63,169,255,.55),transparent);
}

.hero-art img{
  width:clamp(180px,36vw,340px);
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.7));
}

.hero-copy{display:grid;gap:clamp(.75rem,2vw,1.15rem);justify-items:center}

@media (min-width:860px){
  .hero-copy{justify-items:start}
}

/* etiqueta pequena no topo */
.eyebrow{
  margin:0;
  font:400 clamp(.55rem,1.4vw,.72rem)/1 "Share Tech Mono",monospace;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--bolt);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.55rem 1.1rem;
  background:rgba(5,13,42,.7);
}

/* "Aiiii que delicia cara" */
.shout{font-size:clamp(2.1rem,8.4vw,4.6rem)}
.shout .sm{font-size:.46em;letter-spacing:.07em}

/* logo redondo */
.emblem{
  width:clamp(130px,26vw,220px);
  filter:drop-shadow(0 0 26px rgba(63,169,255,.55));
}

@media (min-width:860px){
  .emblem{margin-block:.25rem}
}

/* "Sala de games / Em construcao" */
.title{font-size:clamp(1.55rem,5.4vw,3rem)}
.title .sm{font-size:.55em;letter-spacing:.1em}

.lede{
  margin:0;
  max-width:46ch;
  color:var(--mute);
  font-weight:500;
  font-size:clamp(1rem,.5vw + .9rem,1.15rem);
}


/* =========================================================
   BARRA DE PROGRESSO
   ========================================================= */

.status{display:grid;gap:.55rem;width:min(520px,100%);justify-items:center}

@media (min-width:860px){
  .status{justify-items:start}
}

.status h2{
  margin:0;
  font:400 clamp(.58rem,1.5vw,.72rem)/1 "Share Tech Mono",monospace;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--bolt);
}

.track{
  width:100%;height:22px;
  border:2px solid var(--line);
  border-radius:5px;
  background:rgba(2,6,22,.9);
  overflow:hidden;
}

/* mude o width para mudar a porcentagem
   (mude tambem aria-valuenow no index.html) */
.fill{
  height:100%;
  width:72%;
  background:linear-gradient(90deg,var(--bolt-2),var(--bolt),var(--gold),var(--amber));
  background-size:230% 100%;
  animation:sweep 3.2s linear infinite;
}

@keyframes sweep{to{background-position:230% 0}}


/* =========================================================
   BOTOES
   ========================================================= */

.cta{display:flex;flex-wrap:wrap;gap:.75rem;width:100%;justify-content:center}

@media (min-width:860px){
  .cta{justify-content:flex-start}
}

.btn{
  flex:1 1 240px;
  max-width:320px;
  min-height:58px;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1.35rem;
  border:2px solid;
  border-radius:10px;
  text-decoration:none;
  font-family:Anton,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:clamp(.92rem,2.2vw,1.1rem);
  transition:background .2s, box-shadow .2s, transform .2s;
}

.btn:hover,.btn:focus-visible{transform:translateY(-2px)}

.btn-wa{border-color:var(--whats);color:#8bffc0;background:rgba(37,211,102,.12)}
.btn-wa:hover{background:rgba(37,211,102,.26);box-shadow:0 0 30px rgba(37,211,102,.35)}

.btn-yt{border-color:var(--tube);color:#ff9a93;background:rgba(255,59,48,.12)}
.btn-yt:hover{background:rgba(255,59,48,.26);box-shadow:0 0 30px rgba(255,59,48,.35)}


/* =========================================================
   SECAO "O QUE VEM AI"
   ========================================================= */

.section{margin-top:clamp(2.5rem,7vw,4.5rem)}

.section > h2{
  margin:0 0 clamp(1rem,3vw,1.5rem);
  text-align:center;
  font-size:clamp(1.5rem,5vw,2.6rem);
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:clamp(.7rem,2vw,1rem);
  list-style:none;
  padding:0;margin:0;
}

.card{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  padding:1.1rem 1.15rem;
  display:grid;gap:.35rem;
  transition:border-color .25s, transform .25s;
}

.card:hover{border-color:var(--gold);transform:translateY(-4px)}

.card .tag{
  font:400 .64rem/1 "Share Tech Mono",monospace;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--bolt);
}

.card h3{
  margin:0;
  font-family:Anton,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:clamp(1.05rem,2.3vw,1.28rem);
  color:var(--gold);
}

.card p{margin:0;color:var(--mute);font-weight:500}


/* =========================================================
   RODAPE
   ========================================================= */

.foot{
  margin-top:clamp(2rem,5vw,3rem);
  text-align:center;
  color:var(--mute);
  font:400 .72rem/1.8 "Share Tech Mono",monospace;
  letter-spacing:.26em;
  text-transform:uppercase;
}


/* =========================================================
   CONTROLE DE MUSICA — barra fixa, sempre a vista
   ========================================================= */

.jukebox{
  position:fixed;
  left:50%;
  bottom:clamp(.75rem,3vw,1.5rem);
  translate:-50% 0;
  z-index:40;
  width:min(420px, calc(100% - 1.5rem));
}

.jukebox-btn{
  width:100%;
  display:flex;align-items:center;gap:.9rem;
  padding:.7rem .95rem;
  border:2px solid var(--gold);
  border-radius:14px;
  background:rgba(4,10,32,.94);
  backdrop-filter:blur(10px);
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.55), 0 0 26px rgba(255,207,61,.22);
  transition:border-color .2s, box-shadow .2s, transform .15s;
}

.jukebox-btn:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,0,0,.6), 0 0 34px rgba(255,207,61,.4)}
.jukebox-btn:active{transform:translateY(0)}

/* --- circulo do icone --- */
.jukebox-icon{
  flex:none;
  position:relative;
  width:52px;height:52px;
  border-radius:50%;
  border:2px solid var(--gold);
  background:rgba(255,207,61,.14);
  display:grid;place-items:center;
}

/* barrinhas de equalizador (aparecem quando esta tocando) */
.eq{display:flex;align-items:flex-end;gap:3px;height:22px}

.eq i{
  display:block;
  width:4px;
  border-radius:2px;
  background:var(--gold);
  animation:bounce .9s ease-in-out infinite;
}
.eq i:nth-child(1){height:40%;animation-delay:0s}
.eq i:nth-child(2){height:85%;animation-delay:.15s}
.eq i:nth-child(3){height:60%;animation-delay:.3s}
.eq i:nth-child(4){height:95%;animation-delay:.45s}

@keyframes bounce{
  0%,100%{transform:scaleY(.35)}
  50%    {transform:scaleY(1)}
}

/* triangulo de play (aparece quando esta pausado) */
.tri{
  position:absolute;
  width:0;height:0;
  border-left:16px solid var(--gold);
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  margin-left:4px;
}

/* --- textos --- */
.jukebox-text{display:grid;gap:.15rem;min-width:0}

.jukebox-song{
  font-family:Anton,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:clamp(.95rem,2.6vw,1.1rem);
  color:var(--gold);
  line-height:1.1;
}

.jukebox-action{
  font:400 clamp(.62rem,2vw,.72rem)/1.3 "Share Tech Mono",monospace;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--mute);
}

/* --- estado TOCANDO: mostra equalizador --- */
.jukebox[data-state="playing"] .tri{display:none}
.jukebox[data-state="playing"] .eq {display:flex}

/* --- estado PAUSADO: mostra triangulo, esfria as cores --- */
.jukebox[data-state="paused"] .eq {display:none}
.jukebox[data-state="paused"] .tri{display:block}

.jukebox[data-state="paused"] .jukebox-btn{
  border-color:var(--bolt);
  box-shadow:0 10px 30px rgba(0,0,0,.55), 0 0 22px rgba(63,169,255,.22);
}
.jukebox[data-state="paused"] .jukebox-icon{
  border-color:var(--bolt);
  background:rgba(63,169,255,.14);
}
.jukebox[data-state="paused"] .tri{border-left-color:var(--bolt)}
.jukebox[data-state="paused"] .jukebox-song{color:var(--bolt)}


/* =========================================================
   PORTAO DE ENTRADA (necessario para o audio tocar)
   ========================================================= */

.gate{
  position:fixed;inset:0;z-index:60;
  display:grid;place-content:center;justify-items:center;gap:1rem;
  padding:2rem;width:100%;
  background:rgba(1,3,14,.95);
  backdrop-filter:blur(8px);
  border:0;
  color:inherit;font:inherit;
  cursor:pointer;
}

.gate[hidden]{display:none}

.gate img{width:clamp(120px,32vw,190px)}

.gate-call{
  font:400 clamp(.72rem,2.4vw,1rem)/1 "Share Tech Mono",monospace;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
  animation:pulse 1.2s steps(1) infinite;
}

.gate-note{
  font:400 clamp(.58rem,1.8vw,.7rem)/1 "Share Tech Mono",monospace;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--mute);
}

@keyframes pulse{50%{opacity:.18}}


/* =========================================================
   ACESSIBILIDADE: quem pediu menos animacao, recebe menos
   ========================================================= */

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .eq i{transform:scaleY(.7)}
}