/* Underline — identidade visual (sobrepõe as variáveis do tema em styles.css) */
:root {
  --brand-amber: #F2A900;
  --brand-amber-deep: #FFC20E;
  --brand-marker: #6B4E0A;
  --brand-ink: #FAF7F0;
  --font-display: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif;

  --primary: #F2A900;
  --accent: #F2A900;
  --ring: #F2A900;
  --primary-foreground: #1A1A18;
  --accent-foreground: #1A1A18;
  --background: #1A1A18;
  --foreground: #FAF7F0;
  --card: #262522;
  --card-foreground: #FAF7F0;
  --secondary: #21201D;
  --secondary-foreground: #FAF7F0;
  --muted: #312F2B;
  --muted-foreground: #B8B2A6;
  --border: rgb(250 247 240 / .11);
}

h1, h2, h3, .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* O marca-texto: faixa inclinada sob uma palavra-chave (uma por título) */
.u-mark {
  position: relative;
  z-index: 0;
  display: inline-block;
  background: none;
  color: inherit;
}
.u-mark::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.08em;
  right: -0.08em;
  bottom: 0.02em;
  height: 0.38em;
  background: var(--brand-marker);
  transform: rotate(-1.5deg);
  transform-origin: left bottom;
}

/* Logotipo no cabeçalho e rodapé */
.brand-word {
  position: relative;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  color: var(--brand-ink);
}
.brand-word::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.12em;
  right: -0.12em;
  bottom: 0.05em;
  height: 0.4em;
  background: var(--brand-marker);
  transform: rotate(-2deg);
}

/* ---------- Hero 3D ---------- */
.hero-3d { position: relative; height: 340px; }
@media (min-width: 1024px) { .hero-3d { height: 540px; } }
.hero-3d-fallback { display: none; position: absolute; inset: 0; margin: auto; width: min(60%, 320px); height: auto; }
.hero-3d--fallback .hero-3d-fallback { display: block; }
.hero-3d-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 40;
}

/* Número do serviço acende quando a peça 3D pousa nele */
.service-num { transition: color .45s ease, transform .45s ease; }
.service-card.is-landed .service-num { color: var(--brand-amber); }

/* ---------- Movimento ---------- */
header { transition: box-shadow .3s ease, background-color .3s ease; }
header.is-scrolled { box-shadow: 0 10px 30px rgb(0 0 0 / .35); }

@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.motion .hero-in { animation: hero-rise .8s cubic-bezier(.2,.7,.2,1) both; }

.motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.motion .reveal.is-in { opacity: 1; transform: none; }

.service-card { transition: opacity .7s ease, transform .5s cubic-bezier(.2,.7,.2,1), border-color .3s ease; }
.service-card:hover { transform: translateY(-4px); }

.motion .u-mark::after { transform: rotate(-1.5deg) scaleX(0); transition: transform .8s cubic-bezier(.65,0,.35,1); }
.motion .u-mark.is-drawn::after { transform: rotate(-1.5deg) scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}