/* ============================================================
   COMPONENTS.CSS — Componentes reutilizáveis
   ------------------------------------------------------------
   Aqui vivem peças visuais que aparecem em mais de uma seção:
   o cursor customizado, os botões (gold / outline / nav),
   os títulos pequenos de seção (eyebrow / sec-title) e a
   classe utilitária ".rv" usada para animações de revelar
   ao scrollar (controlada por reveal.js).
   ============================================================ */


/* ------------------------------------------------------------
   1) CURSOR CUSTOMIZADO
   #cur é o container fixo com dois círculos:
     .d  (dot)  — segue o mouse instantaneamente (dourado)
     .r  (ring) — anel maior com easing (atualizado em loop em cursor.js)
   ------------------------------------------------------------ */
#cur {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
}
#cur .d {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--gold2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
#cur .r {
  position: absolute;
  width: 32px;
  height: 32px;
  border: 1px solid var(--gold2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: .15s ease;
  opacity: .5;
}


/* ------------------------------------------------------------
   2) BOTÕES PRIMÁRIOS DA HERO E CTA
   .btn-gold    — sólido dourado, ação primária ("Ver Portfólio")
   .btn-outline — vazado branco, ação secundária ("Ver Loja", "WhatsApp")
   ------------------------------------------------------------ */
.btn-gold {
  font-family: 'Space Mono', monospace;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: var(--gold);
  color: var(--black);
  padding: 16px 38px;
  border: none;
  cursor: none;
  font-weight: 700;
  transition: all .22s;
  text-decoration: none;
  display: inline-block;
}
.btn-gold:hover {
  background: var(--goldlight);
}

.btn-outline {
  font-family: 'Space Mono', monospace;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: transparent;
  color: var(--white);
  padding: 16px 38px;
  border: 1px solid rgba(255,255,255,.2);
  cursor: none;
  transition: all .22s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.btn-outline:hover {
  border-color: var(--gold);
  color: var(--gold);
}


/* ------------------------------------------------------------
   3) TIPOGRAFIA DE SEÇÃO
   Pequeno texto-marcador (eyebrow) + título grande estilo
   editorial (Bebas Neue) que aparece no topo de cada section.
   ------------------------------------------------------------ */
.sec-eyebrow {
  font-family: 'Space Mono', monospace;
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.sec-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(3.2rem, 6vw, 6.5rem);
  line-height: .92;
  color: var(--white);
  margin-bottom: 72px;
}
.sec-title em {
  color: var(--gold2);
  font-style: normal;
}


/* ------------------------------------------------------------
   4) REVEAL ON SCROLL
   Classe utilitária aplicada em qualquer elemento que deve
   aparecer suavemente quando entrar no viewport. O JavaScript
   (reveal.js) usa IntersectionObserver para adicionar ".on".
   As variantes rv1 / rv2 / rv3 atrasam o efeito em cascata.
   ------------------------------------------------------------ */
.rv {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .85s ease, transform .85s ease;
}
.rv.on {
  opacity: 1;
  transform: translateY(0);
}
.rv1 { transition-delay: .1s; }
.rv2 { transition-delay: .2s; }
.rv3 { transition-delay: .3s; }