/* =========================================================
   GRUPO DODO — /sites
   Arquitetura igual à referência: tudo que é visual é WebGL;
   o DOM fica por cima, invisível, só para interação/acessibilidade.
   ========================================================= */
:root { --size: 390; }
@media (min-width: 650px) { :root { --size: 1500; } }

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

html {
  /* 1rem escala com a largura da tela (mesma técnica da referência) */
  font-size: clamp(5px, 20px, 10 * 100vw / var(--size));
  -webkit-text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
html, body {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  overflow: hidden; overscroll-behavior: none;
  touch-action: none;
}
body {
  background: #000; color: #fff;
  font-family: "Inter Tight", system-ui, sans-serif;
  font-size: 1.4rem; line-height: 1.4; font-weight: 400;
  cursor: grab;
  user-select: none; -webkit-user-select: none;
}
body.is-dragging, body.is-dragging * { cursor: grabbing !important; }
a, button { color: inherit; text-decoration: none; background: none; border: 0; font: inherit; cursor: pointer; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label { font-size: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
@media (max-width: 649px) { .label { font-size: 1.1rem; } }
.dim { opacity: .45; }

/* ---------- WebGL ---------- */
.gl { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.gl canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Cards (DOM invisível, posicionado via JS) ---------- */
.track { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.card {
  position: absolute; top: 0; left: 0;
  pointer-events: auto; cursor: pointer;
  border-radius: 2rem;
  will-change: transform;
}
.card__meta {
  position: absolute; left: 2rem; right: 2rem; bottom: 1.6rem;
  display: flex; align-items: flex-end; justify-content: space-between;
  pointer-events: none;
  mix-blend-mode: difference;
}
.card__title { font-size: 1.8rem; letter-spacing: -.05em; white-space: nowrap; line-height: 1; color: transparent; } /* o visual é WebGL (acompanha a fita); o DOM fica só p/ acessibilidade */
.card__arrow {
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: #fff; color: #000;
  display: grid; place-items: center; font-size: 1.1rem;
  transform: scale(0); transition: transform .5s cubic-bezier(.23, 1, .32, 1);
}
.card.is-hover .card__arrow { transform: scale(1); }
.card--soon .card__arrow { width: auto; padding: 0 .9rem; border-radius: 2rem; font-size: .9rem; font-weight: 500; text-transform: uppercase; letter-spacing: .02em; }
@media (max-width: 649px) {
  .card { border-radius: 1.5rem; }
  .card__meta { left: 1.2rem; right: 1.2rem; bottom: 1rem; }
  .card__title { font-size: 1.6rem; }
  .card__arrow { transform: scale(1); }
}

/* ---------- HUD (4 cantos) ---------- */
.hud {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 4rem 8rem;
  mix-blend-mode: difference;
}
.hud__row { display: flex; justify-content: space-between; align-items: flex-start; }
.hit { pointer-events: auto; position: relative; transition: opacity .3s; }
.hit::before { content: ""; position: absolute; inset: -1.5rem; }
.hit:hover { opacity: .6; }
.hud__counter { font-variant-numeric: tabular-nums; }
@media (max-width: 649px) { .hud { padding: 2.5rem 2rem; } }

/* ---------- Sobre ---------- */
.about {
  position: fixed; inset: 0; z-index: 30;
  display: grid; place-items: center;
  pointer-events: none; text-align: center;
  padding: 0 2rem;
}
.about.is-open { pointer-events: auto; cursor: default; }
.about__inner { max-width: 45rem; }
.about__text { font-size: 1.8rem; line-height: 1.4; letter-spacing: -.02em; }
.about__meta { opacity: .6; margin-top: 3rem; }
.about__links { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem 2rem; margin-top: 3rem; }
.about__links a:hover { opacity: .6; }
.about .line { display: block; overflow: hidden; }
.about .line > span { display: inline-block; }
.about__inner > * { visibility: hidden; }
.about.is-ready .about__inner > * { visibility: visible; }
@media (max-width: 649px) { .about__text { font-size: 1.5rem; } }

/* ---------- Loader ---------- */
.loader {
  position: fixed; inset: 0; z-index: 99;
  background: #000;
  display: grid; place-items: center;
}
.loader__bars { display: flex; gap: .8rem; }
.loader__bars i {
  position: relative; display: block;
  width: 5rem; height: .5rem; border-radius: 2rem;
  background: rgba(255, 255, 255, .15); overflow: hidden;
}
.loader__bars i::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: #fff; transform-origin: left;
  transform: scaleX(var(--p, 0));
  transition: transform .4s cubic-bezier(.23, 1, .32, 1);
}

/* ---------- Sem WebGL: mostra a lista simples ---------- */
.no-gl .sr-only { position: fixed; inset: 0; width: auto; height: auto; clip: auto; white-space: normal; display: grid; place-content: center; text-align: center; gap: 1rem; font-size: 1.6rem; }
.no-gl .sr-only ul { list-style: none; }
.no-gl .sr-only a { text-decoration: underline; }

/* ---------- Durante a transição de página ---------- */
body.is-leaving .hud,
body.is-leaving .card__meta { opacity: 0; transition: opacity .4s; }
body.is-leaving { cursor: default; }

/* ---------- Cursor Customizado ---------- */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 1rem; height: 1rem;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: width 0.3s, height 0.3s, background-color 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #000;
  font-weight: 600;
  text-transform: uppercase;
  opacity: 0;
}
.cursor.is-active {
  opacity: 1;
}
.cursor.is-hover {
  width: 5rem;
  height: 5rem;
  background: #fff;
  mix-blend-mode: normal;
}
.cursor.is-dragging {
  width: 3rem;
  height: 3rem;
}
.cursor span {
  opacity: 0;
  transition: opacity 0.2s;
}
.cursor.is-hover span {
  opacity: 1;
}