/* ======================== */
/* Reset e base tipográfica */
/* ======================== */

* {
  box-sizing: border-box;            /* inclui padding/border no cálculo de width/height */
}

html,
body {
  margin: 0;                         /* remove margens padrão */
  padding: 0;                        /* remove padding padrão */
  height: 100%;                      /* garante 100% de altura para ocupar a tela */
  background: #05070d;               /* fundo escuro (noite/galáxia) */
  color: #eaf2ff;                    /* cor padrão do texto (quase branco) */
  font-family:                       /* stack de fontes do sistema para desempenho */
    system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial;
  overflow: hidden;                  /* evita rolagem — cena é full screen */
}

/* ===================== */
/* Camadas de renderização */
/* ===================== */

#webgl,
#squares {
  position: fixed;                   /* fixa os canvases na janela */
  inset: 0;                          /* cola nas bordas (top/right/bottom/left = 0) */
  width: 100vw;                      /* ocupa largura total da viewport */
  height: 100vh;                     /* ocupa altura total da viewport */
  display: block;                    /* remove espaços fantasmas de canvas inline */
}

#webgl {
  z-index: 0;                        /* WebGL fica no fundo */
}

#squares {
  z-index: 6;                        /* overlay por cima do WebGL */
  pointer-events: none;              /* não intercepta cliques; passam para trás */
}

/* ===================== */
/* Barra de controles UI */
/* ===================== */

#controls {
  position: fixed;                   /* flutua sobre a cena */
  top: 14px;
  right: 14px;
  z-index: 10;                       /* acima do overlay de quadradinhos */
  display: flex;                     /* layout flexível */
  align-items: center;
  gap: 10px;                         /* espaçamento entre botões/contêineres */
  flex-wrap: wrap;                   /* quebra linha se faltar espaço */
}

#controls button {
  cursor: pointer;                   /* cursor de clique */
  display: inline-flex;              /* ícone + texto lado a lado */
  align-items: center;
  gap: 8px;                          /* espaço entre ícone e texto */
  border: 0;                         /* sem borda sólida */
  border-radius: 14px;               /* cantos arredondados */
  padding: 12px 16px;                /* área clicável confortável */
  font-size: 15px;
  font-weight: 800;                  /* texto forte/legível */
  color: #fff;                       /* texto branco */
  background:                        /* vidro brilhante (glassmorphism) */
    linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .06));
  box-shadow:
    0 6px 24px rgba(0, 0, 0, .35),   /* sombra externa (elevação) */
    inset 0 1px 0 rgba(255, 255, 255, .2); /* brilho interno (borda superior) */
  backdrop-filter: blur(8px);        /* desfoque do fundo (efeito vidro) */
}

#controls .ico {
  font-size: 18px;                   /* ícones um pouco maiores que o texto */
}

#controls button[aria-pressed="false"] {
  opacity: .92;                      /* sutil feedback visual de estado */
}

/* ===================== */
/* Barra de mídia (tempo/seek/volume) */
/* ===================== */

#mediaBar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  margin-left: 8px;                  /* separa da fileira de botões */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
  box-shadow:
    0 6px 24px rgba(0, 0, 0, .30),
    inset 0 1px 0 rgba(255, 255, 255, .15);
  backdrop-filter: blur(8px);        /* mesmo estilo de vidro */
}

#mediaBar #time {
  font: 700 12px/1 system-ui;        /* tempo em fonte pequena e bold */
  opacity: .95;                      /* leve transparência */
}

#mediaBar input[type="range"] {
  -webkit-appearance: none;          /* remove estilo nativo (WebKit) */
  appearance: none;                  /* remove estilo nativo (padrão) */
  height: 8px;                       /* altura da trilha */
  border-radius: 999px;              /* trilha arredondada */
  background: #4b5563;               /* cor base da trilha */
  outline: none;                     /* sem contorno ao focar */
}

/* larguras dos sliders */
#seek {
  width: min(34vw, 360px);           /* seek proporcional, com limite máximo */
}

#vol {
  width: 120px;                      /* volume menor e fixo */
}

/* polegar (thumb) WebKit */
#mediaBar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00e1ff;               /* ciano brilhante */
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .15);
  cursor: pointer;
}

/* polegar (thumb) Firefox */
#mediaBar input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #00e1ff;
  border: 0;
  cursor: pointer;
}

/* trilha do seek com preenchimento (tocando) e buffer */
#seek {
  background:
    /* parte reproduzida (à esquerda) */
    linear-gradient(to right, #00e1ff var(--played, 0%), #4b5563 var(--played, 0%)) no-repeat,
    /* parte carregada/bufferizada por cima da trilha */
    linear-gradient(to right, #9ca3af var(--buffered, 0%), transparent var(--buffered, 0%)) no-repeat,
    /* cor base de fallback */
    #4b5563;
  background-size: 100% 100%, 100% 100%, 100% 100%;
}

/* wrapper do volume (ícone + slider) */
.vol-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vol-wrap .vol-ico {
  font-size: 14px;                   /* ícone de volume menorzinho */
}

/* ===================== */
/* Trilha lateral direita */
/* ===================== */

#right-rail {
  position: fixed;
  right: 2vw;                        /* afastado da borda, responsivo */
  bottom: 4vh;
  z-index: 8;                        /* acima do vídeo e grid, abaixo dos controles */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;                         /* espaço entre dancer e botão SEI */
  pointer-events: none;              /* não intercepta cliques (exceto filhos que reativam) */
}

/* Personagem dançarino (GIF “recortado” via máscara) */
#dancer {
  width: min(26vmin, 260px);         /* responsivo: 26% do menor lado, máx 260px */
  aspect-ratio: 3 / 4;               /* mantém proporção */
  pointer-events: none;              /* só enfeite, sem cliques */
  position: relative;
  right: 0;
  background: url("./assets/dancer.gif") center / contain no-repeat;
  -webkit-mask-image: url("./assets/dancer.gif"); /* usa o GIF como máscara luminosa */
  mask-image: url("./assets/dancer.gif");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}

/* Fallback se o navegador não suporta mask-image */
@supports not (mask-image: url("")) {
  #dancer {
    background: none;                /* remove imagem de fundo */
  }

  #dancer::before {
    content: "";
    position: absolute;
    inset: 0;                        /* ocupa 100% do #dancer */
    background: url("./assets/dancer.gif") center / contain no-repeat;
    mix-blend-mode: screen;          /* clareia sobre o fundo escuro */
    filter: brightness(1.05) contrast(1.1); /* dá vida ao GIF */
    pointer-events: none;
  }
}

/* ===================== */
/* Botão CTA do SEI */
/* ===================== */

#btnSEI {
  pointer-events: auto;              /* reativa cliques dentro do right-rail */
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;             /* remove sublinhado do link */
  color: #04101e;                    /* texto escuro sobre fundo claro */
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, #c7cbd0 0%, #d6e4ae 100%); /* degradê suave */
  box-shadow: 0 14px 34px rgba(0, 180, 255, .38);               /* brilho azulado */
  border: 1px solid rgba(255, 255, 255, .35);                   /* borda clarinha */
}

#btnSEI .sei-mark {
  height: 60px;                      /* altura fixa do brasão/logo */
  width: auto;                       /* mantém proporção */
}

#btnSEI .sei-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;                 /* texto compacto */
}

#btnSEI strong {
  font-size: 20px;
  font-weight: 900;                  /* título do CTA bem forte */
}

#btnSEI small {
  font-size: 14px;
  opacity: .95;                      /* subtítulo levemente translúcido */
}

/* ===================== */
/* Acessibilidade (focus) */
/* ===================== */

:focus-visible {
  outline: 2px dashed #00e1ff;       /* contorno visível ao navegar por teclado */
  outline-offset: 4px;               /* afastamento do contorno para não colar no elemento */
}