/* =========================================================
   MusicOn + Songster — Design tokens e base compartilhada
   Tipografia: Figtree (interface) + Instrument Serif (destaque)
   Direção de cor e ritmo inspirados no portfólio Prestes Design.
   ========================================================= */

:root {
  /* Marca */
  --amber-400: #FFC879;
  --amber-500: #FFB753;
  --amber-600: #E89A35;
  --orange-500: #EC632C;   /* laranja dos destaques */
  --orange-600: #C9531F;

  /* Neutros quentes */
  --night-900: #121211;    /* fundo base escuro, levemente quente */
  --night-800: #181817;
  --night-700: #1E1E1C;
  --night-600: #2B2B28;
  --cream-100: #F2F3E4;    /* texto claro, nunca branco puro */
  --cream-200: #D9DACB;
  --mute-400: #A3A398;
  --mute-500: #75756C;

  --ink-900: #1E1E1C;
  --ink-800: #1E1E1C;
  --ink-500: #4A4A52;
  --ink-400: #6E6E79;
  --ink-300: #A8A8B3;
  --ink-200: #D4D4DB;
  --paper-100: #F2F3E4;
  --paper-50: #FFFFFF;
  --white: #FFFFFF;

  /* Songster */
  --graphite-900: #0D1014;
  --graphite-800: #131720;
  --graphite-700: #1B212B;

  /* Tipografia */
  --font-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --marrom: #813B1B;
  --grad-dinamico: linear-gradient(100deg, #EC632C, #FFB753);
  --grad-elegante: linear-gradient(100deg, #813B1B, #FFAC38);
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;

  /* Espaçamento */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sp-9: 96px;  --sp-10: 128px;

  /* Outros */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --container: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

/* ---------- Tipografia ---------- */
h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

.t-lead { font-size: clamp(1rem, .96rem + .2vw, 1.0625rem); line-height: 1.65; }

/* manual MusicOn: Cormorant Garamond só em destaque pontual, com o degradê Dinâmico */
.hl {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.1em;
  letter-spacing: -.01em;
  color: var(--amber-500);
  background: var(--grad-dinamico);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .08em .06em; margin: 0 -.05em;
}
body.theme-light .hl { background: linear-gradient(100deg, var(--marrom), var(--orange-500)); -webkit-background-clip: text; background-clip: text; }
.hl--amber { color: var(--amber-500); }
.hl--ink { color: var(--ink-900); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 768px)  { .container { padding-inline: 40px; } }
@media (min-width: 1280px) { .container { padding-inline: 56px; } }

/* ---------- Etiqueta em pílula ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 16px 7px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(242,243,228,.16);
  background: rgba(242,243,228,.04);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cream-200);
}
.pill::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--orange-500);
  flex: 0 0 auto;
}
@media (max-width: 560px) {
  .pill { font-size: 10px; letter-spacing: .1em; padding: 6px 13px 6px 11px; gap: 7px; }
  .pill::before { width: 6px; height: 6px; }
}
.pill--light {
  border-color: rgba(10,10,11,.12);
  background: rgba(10,10,11,.03);
  color: var(--ink-500);
}

/* olho simples, sem traço decorativo */
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* ---------- Botões ---------- */
.btn {
  --btn-bg: var(--amber-500);
  --btn-fg: #1E1E1C;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .3s var(--ease-out), background .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.btn:hover { transform: translateY(-1px); background: var(--amber-400); }
.btn:focus-visible { outline: 2px solid var(--amber-400); outline-offset: 3px; }

/* botão creme do portfólio, com disco e seta */
.btn--cream { --btn-bg: var(--cream-100); --btn-fg: #1E1E1C; padding: 8px 8px 8px 24px; }
.btn--cream:hover { background: #fff; }
.btn__disc {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #1E1E1C;
  color: var(--cream-100);
  display: grid; place-items: center;
  flex: 0 0 auto;
  transition: transform .4s var(--ease-out);
}
.btn__disc svg { width: 15px; height: 15px; }
.btn--cream:hover .btn__disc { transform: rotate(-45deg); }

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: var(--cream-100);
  box-shadow: inset 0 0 0 1px rgba(242,243,228,.22);
}
.btn--ghost-light:hover { background: rgba(242,243,228,.07); box-shadow: inset 0 0 0 1px rgba(242,243,228,.45); }

.btn--ghost-dark {
  --btn-bg: transparent;
  --btn-fg: var(--ink-800);
  box-shadow: inset 0 0 0 1px var(--ink-200);
}
.btn--ghost-dark:hover { background: rgba(0,0,0,.035); box-shadow: inset 0 0 0 1px var(--ink-400); }

.btn--dark { --btn-bg: var(--ink-900); --btn-fg: #fff; }
.btn--dark:hover { background: var(--night-700); }

.btn--sm { padding: 10px 19px; font-size: 14px; }

/* ---------- Header ---------- */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  padding-block: 20px;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.035em; font-size: 19px; }
.brand__mark {
  display: block;
  width: 32px; height: 32px;
  flex: 0 0 auto;
  border-radius: 9px;
  overflow: hidden;
}
.brand__mark img { width: 100%; height: 100%; object-fit: cover; }
.brand__logo { display: block; height: 30px; width: auto; }

.nav { display: none; gap: var(--sp-6); font-size: 14.5px; font-weight: 500; }
@media (min-width: 1100px) { .nav { display: flex; } }
.nav a { opacity: .74; transition: opacity .25s, color .25s; }
.nav a:hover { opacity: 1; color: var(--orange-500); }

/* ---------- Fundo: grade sutil + brilho ---------- */
.bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(242,243,228,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,243,228,.045) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(130% 95% at 50% 32%, #000 4%, transparent 68%);
  pointer-events: none;
}
.bg-glow {
  position: absolute;
  width: min(900px, 80vw); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236,99,44,.15) 0%, rgba(255,183,83,.06) 38%, transparent 66%);
  pointer-events: none;
  animation: glowBreathe 11s var(--ease) infinite alternate;
}
@keyframes glowBreathe {
  from { transform: scale(1); opacity: .9; }
  to   { transform: scale(1.1); opacity: 1; }
}

/* ---------- Revelação palavra a palavra ---------- */
.reveal-words .w { display: inline-block; overflow: hidden; vertical-align: top; }
.reveal-words .w > span {
  display: inline-block;
  transform: translateY(104%);
  transition: transform .85s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 55ms + var(--base, 0ms));
}
.is-ready .reveal-words .w > span,
.reveal-words.is-in .w > span { transform: none; }

/* ---------- Entrada genérica ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

[data-hero] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .75s var(--ease-out) var(--d,0ms), transform .75s var(--ease-out) var(--d,0ms);
}
.is-ready [data-hero] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  [data-reveal], [data-hero] { opacity: 1; transform: none; }
  .reveal-words .w > span { transform: none; }
}

/* ---------- Selo circular girando ---------- */
.badge-spin {
  position: relative;
  width: 104px; height: 104px;
  display: grid; place-items: center;
}
.badge-spin svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 18s linear infinite; }
.badge-spin text { font-size: 9.6px; letter-spacing: .22em; fill: var(--cream-200); font-weight: 600; }
.badge-spin i {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--orange-500);
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .badge-spin svg { animation: none; } }

/* ---------- Etiqueta do protótipo ---------- */
.proto-note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .04em;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  position: fixed;
  left: 14px; bottom: 14px;
  z-index: 100;
  background: rgba(0,0,0,.7);
  color: rgba(255,255,255,.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  pointer-events: none;
}