/* =====================================================================
   SAMKZ · BASE (tokens, tipografia, cursor, componentes compartilhados)
   ===================================================================== */

/* =====================================================================
   FONTES (hospedadas no site, só caracteres latinos → ~54 KB no total)
   ===================================================================== */
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/chakra-petch-medium.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/chakra-petch-semibold.woff2") format("woff2"); }
@font-face { font-family: "Chakra Petch"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/chakra-petch-bold.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/inter-var.woff2") format("woff2"); }

:root {
  color-scheme: dark;

  /* Superfícies */
  --bg:        #0B0E13;
  --bg-2:      #11151C;
  --bg-3:      #181D26;
  --line:      rgba(255, 255, 255, .08);
  --line-2:    rgba(255, 255, 255, .16);

  /* Texto (cinzas levemente puxados para o vermelho) */
  --text:      #F4F2F2;
  --text-2:    #B9B3B4;
  --muted:     #8C8587;

  /* Marca */
  --red:       #FF0808;
  --red-2:     #E0141A;
  --red-deep:  #7A0202;
  --red-glow:  rgba(255, 8, 8, .45);
  --red-soft:  rgba(255, 8, 8, .10);

  /* Plataformas (validadas para daltonismo sobre --bg-2) */
  --c-instagram: #A66BF2;
  --c-kick:      #3CAF12;
  --c-youtube:   #C82B2B;

  /* Tipografia */
  --f-display: "Chakra Petch", "Rajdhani", "Arial Narrow", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Escala */
  --fs-xs: .72rem;
  --fs-sm: .86rem;
  --fs-md: 1rem;
  --fs-lg: 1.2rem;
  --fs-xl: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  --fs-2xl: clamp(2rem, 1.2rem + 3vw, 3.6rem);
  --fs-hero: clamp(4.2rem, 1rem + 13vw, 11.5rem);

  /* Chanfro padrão */
  --cut: 18px;
  --cut-sm: 10px;

  --gutter: clamp(16px, 4vw, 40px);
  --maxw: 1240px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--f-body);
  font-size: var(--fs-md);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; }

.num { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -999px; top: 8px; z-index: 100;
  background: var(--red); color: #fff; padding: 8px 14px; font-weight: 700;
}
.skip:focus { left: 8px; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Eyebrow (rótulo em vermelho, espaçado, com listras) ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-display);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--red);
}
.eyebrow::before {
  content: "";
  width: 26px; height: 10px;
  background: repeating-linear-gradient(-60deg, var(--red) 0 3px, transparent 3px 7px);
  flex: none;
}

/* ---------- Painel HUD com cantos chanfrados ---------- */
/* O fundo do próprio painel vira a "borda"; o ::before (1px menor) é o miolo.
   Assim a linha fina acompanha também as diagonais do chanfro. */
.hud {
  position: relative;
  isolation: isolate;
  background: var(--line-2);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.hud::before {
  content: "";
  position: absolute; inset: 1px;
  z-index: -1;
  background: linear-gradient(160deg, var(--bg-3), var(--bg-2) 60%);
  clip-path: polygon(calc(var(--cut) - .4px) 0, 100% 0, 100% calc(100% - var(--cut) + .4px), calc(100% - var(--cut) + .4px) 100%, 0 100%, 0 calc(var(--cut) - .4px));
  pointer-events: none;
}
.hud--accent::after {
  content: "";
  position: absolute; left: 0; top: var(--cut);
  width: 2px; height: 42px;
  background: var(--red);
  box-shadow: 0 0 14px var(--red-glow);
}

/* ---------- Botões ---------- */
.btn {
  --b-cut: 12px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  padding: 0 28px;
  font-family: var(--f-display);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  clip-path: polygon(var(--b-cut) 0, 100% 0, 100% calc(100% - var(--b-cut)), calc(100% - var(--b-cut)) 100%, 0 100%, 0 var(--b-cut));
  transition: background-position .5s var(--ease), color .2s, transform .2s var(--ease);
}
.btn--red {
  color: #fff;
  background-image: linear-gradient(90deg, var(--red) 0%, var(--red-deep) 50%, var(--red) 100%);
  background-size: 200% auto;
}
.btn--red:hover { background-position: right center; }
.btn--ghost {
  color: var(--text);
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.btn--ghost:hover { background: rgba(255,255,255,.09); }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- Chips (filtros) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  --b-cut: 7px;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px;
  padding: 0 16px;
  font-family: var(--f-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-2);
  background: rgba(255,255,255,.035);
  border: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: pointer;
  clip-path: polygon(var(--b-cut) 0, 100% 0, 100% calc(100% - var(--b-cut)), calc(100% - var(--b-cut)) 100%, 0 100%, 0 var(--b-cut));
  transition: background .2s, color .2s, box-shadow .2s;
}
.chip:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.chip[aria-pressed="true"],
.chip[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(90deg, var(--red), var(--red-deep));
  box-shadow: none;
}
.chip[disabled] { opacity: .35; cursor: not-allowed; }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---------- Listras diagonais decorativas (assinatura ///) ---------- */
.stripes {
  display: inline-block;
  width: 88px; height: 22px;
  background: repeating-linear-gradient(-60deg, var(--red) 0 9px, transparent 9px 18px);
}

/* ---------- Texto só com contorno ---------- */
.outline-text {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.14);
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: .85;
  user-select: none;
  pointer-events: none;
}

/* ---------- Cursor customizado (só em mouse/trackpad) ---------- */
.cursor-dot, .cursor-ring {
  position: fixed; left: 0; top: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  will-change: transform;
}
.cursor-dot {
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  background: var(--red);
  box-shadow: 0 0 10px var(--red-glow);
}
.cursor-ring {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--red);
  background: rgba(255, 8, 8, .10);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: width .25s var(--ease), height .25s var(--ease), margin .25s var(--ease), background .25s, opacity .25s;
}
html.has-cursor .cursor-dot,
html.has-cursor .cursor-ring { opacity: 1; }
html.has-cursor.cursor-hover .cursor-ring {
  width: 58px; height: 58px; margin: -29px 0 0 -29px;
  background: rgba(255, 8, 8, .16);
}
html.has-cursor.cursor-hover .cursor-dot { opacity: 0; }
html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor label { cursor: none; }
html.has-cursor input, html.has-cursor textarea { cursor: text; }

/* ---------- Fumaça (canvas) ---------- */
.smoke {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}

/* ---------- Revelar ao rolar (conteúdo sempre visível sem JS) ---------- */
.reveal { transition: transform .8s var(--ease), opacity .8s var(--ease); }
html.js .reveal:not(.is-in) { opacity: .001; transform: translateY(24px); }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal:not(.is-in) { opacity: 1; transform: none; }
}

/* ---------- Ícones ---------- */
.ico { width: 20px; height: 20px; flex: none; }

/* ---------- Botão/painel de vidro escuro com borda vermelha chanfrada ----------
   O ::before desenha só o contorno (anel) com clip-path, então a borda
   acompanha também as diagonais. O próprio elemento faz o blur do fundo. */
.glass {
  --cut: 14px;
  --edge: rgba(255, 8, 8, .75);
  position: relative;
  isolation: isolate;
  background:
    linear-gradient(90deg, rgba(255, 8, 8, .22) 0%, rgba(255, 8, 8, .06) 38%, rgba(12, 14, 19, .0) 70%),
    rgba(10, 12, 16, .58);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
          backdrop-filter: blur(16px) saturate(140%);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: background .35s var(--ease), transform .25s var(--ease);
}
.glass::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, var(--edge), rgba(255, 8, 8, .35) 60%, var(--edge));
  clip-path: polygon(
    var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut), var(--cut) 0,
    calc(var(--cut) + .41px) 1px, 1px calc(var(--cut) + .41px), 1px calc(100% - 1px),
    calc(100% - var(--cut) - .41px) calc(100% - 1px), calc(100% - 1px) calc(100% - var(--cut) - .41px),
    calc(100% - 1px) 1px, calc(var(--cut) + .41px) 1px
  );
}
.glass:hover {
  background:
    linear-gradient(90deg, rgba(255, 8, 8, .38) 0%, rgba(255, 8, 8, .12) 45%, rgba(12, 14, 19, .0) 80%),
    rgba(10, 12, 16, .5);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: linear-gradient(90deg, rgba(255, 8, 8, .22), rgba(12, 14, 19, .96) 60%), #0E1117; }
}

/* ---------- Lenis (smooth scroll no desktop) ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* <picture> transparente para o layout: a foto continua sendo filha direta do container */
.hero__media picture, .lk-hero__media picture { display: contents; }