/* ============================================================
   main.css — base, topbar, hero (arte), seções por cor,
   tipografia serif×grotesk, grafismo (aurora, grão, marquee).
   ============================================================ */

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  background: var(--bg);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-grotesk);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-grotesk);
  color: var(--ink);
  background: var(--bg);
  font-weight: var(--weight-regular);
  overflow-x: hidden;
}

a { color: var(--accent-bright); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
::selection { background: var(--accent); color: #fff; }

:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: 6px; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ============================================================
   Grão global sutil (textura premium)
   ============================================================ */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--grain);
  opacity: 0.05;
  mix-blend-mode: overlay;
}

/* ============================================================
   Topbar
   ============================================================ */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  height: var(--topbar-height);
  background: rgba(12, 11, 15, 0.55);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: var(--hairline) solid transparent;
  transition: background var(--duration-fast) var(--ease-apple),
    border-color var(--duration-fast) var(--ease-apple);
}
.topbar.is-scrolled {
  background: rgba(12, 11, 15, 0.8);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.topbar__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.topbar__brand { display: flex; align-items: center; gap: var(--space-3); }
.monogram {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(140deg, var(--accent-bright), var(--accent-deep));
  color: #fff; font-family: var(--font-serif); font-style: italic;
  font-size: 1rem; box-shadow: var(--glow-accent);
}
.topbar__name { font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--ink); letter-spacing: var(--tracking-grotesk); }
.topbar__actions { display: flex; align-items: center; gap: var(--space-3); }

.lang-toggle { display: inline-flex; align-items: center; background: rgba(255,255,255,0.07); border-radius: var(--radius-pill); padding: 2px; }
.lang-toggle__btn {
  padding: 5px 12px; font-size: 0.8rem; font-weight: var(--weight-medium);
  color: var(--ink-dim); border-radius: var(--radius-pill);
  transition: color var(--duration-fast) var(--ease-apple), background var(--duration-fast) var(--ease-apple);
}
.lang-toggle__btn[aria-pressed="true"] { color: #0c0b0f; background: var(--ink); }
.lang-toggle__btn:hover { color: var(--ink); }

/* ============================================================
   Hero — arte: aurora animada + grão + nome digitado em serif
   ============================================================ */
.hero {
  position: relative;
  min-height: calc(100vh - var(--topbar-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-section) var(--space-20);
  overflow: hidden;
  isolation: isolate;
}
/* Aurora: blobs de cor que respiram lentamente */
.hero__aurora {
  position: absolute; inset: -20% -10% -10%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(40% 50% at 18% 28%, rgba(124, 92, 255, 0.55), transparent 60%),
    radial-gradient(38% 46% at 82% 22%, rgba(54, 224, 196, 0.28), transparent 60%),
    radial-gradient(50% 55% at 65% 88%, rgba(91, 62, 224, 0.5), transparent 62%);
  filter: blur(28px) saturate(130%);
  animation: aurora 18s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2%, -3%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.03); }
}
.hero::after { /* vinheta pra firmar o texto */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 30%, transparent 30%, rgba(12,11,15,0.55) 100%);
}
@media (prefers-reduced-motion: reduce) { .hero__aurora { animation: none; } }

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-eyebrow); color: var(--ink-dim);
  letter-spacing: var(--tracking-eyebrow);
  border: var(--hairline) solid rgba(255,255,255,0.16);
  padding: 6px 14px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.04);
}
.hero__eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }

.hero__name {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin-top: var(--space-6);
  background: linear-gradient(96deg, #fff 12%, var(--accent-bright) 60%, var(--accent-2) 105%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  max-width: 16ch;
}
/* cursor de digitação */
.type-caret {
  display: inline-block; width: 0.5ch; margin-left: 0.04em;
  background: var(--accent-bright); color: transparent;
  -webkit-text-fill-color: transparent;
  animation: caret 1s steps(1) infinite;
  border-radius: 2px;
}
@keyframes caret { 0%,49% { opacity: 1; } 50%,100% { opacity: 0; } }
.is-typing-done .type-caret { animation: caret 1.1s steps(1) infinite; }

.hero__promise {
  margin-top: var(--space-8);
  font-size: var(--text-hero-promise);
  color: var(--ink-dim);
  line-height: var(--leading-relaxed);
  max-width: 46ch;
}
.hero__promise .line-2 { color: var(--ink-faint); }
.hero__role {
  margin-top: var(--space-5);
  font-size: var(--text-subhead);
  color: var(--ink);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-grotesk);
}
.hero__role .accent { color: var(--accent-bright); }
.hero__availability { margin-top: var(--space-6); color: var(--ink-dim); font-size: var(--text-small); line-height: var(--leading-relaxed); }
.hero__availability span { display: block; }
.hero__ctas { margin-top: var(--space-10); display: flex; flex-wrap: wrap; gap: var(--space-4); }

.hero__scroll-cue {
  position: absolute; left: 50%; bottom: var(--space-8); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  color: var(--ink-faint); font-size: 0.75rem; letter-spacing: var(--tracking-eyebrow);
}
.hero__scroll-cue .chev { width: 18px; height: 18px; animation: cue 2s ease-in-out infinite; }
@keyframes cue { 0%,100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hero__scroll-cue .chev { animation: none; } }

/* ============================================================
   Marquee (faixa em movimento — grafismo)
   ============================================================ */
.marquee {
  position: relative;
  overflow: hidden;
  padding-block: var(--space-5);
  border-block: var(--hairline) solid var(--t-line);
  background: var(--section-bg);
  white-space: nowrap;
}
.marquee__track {
  display: inline-flex; gap: var(--space-8); align-items: center;
  animation: marquee 28s linear infinite;
  will-change: transform;
}
.marquee__track span {
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
  color: var(--ink-dim);
}
.marquee__track .sep { color: var(--accent-bright); font-style: normal; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ============================================================
   Seções
   ============================================================ */
main { counter-reset: section; position: relative; z-index: 2; }

.section {
  position: relative;
  counter-increment: section;
  padding-block: var(--space-section);
  background: var(--section-bg);
  color: var(--t-primary);
  overflow: hidden;
}
/* grão por cima de seções escuras */
.section:not(.theme-cream)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--grain); opacity: 0.04; mix-blend-mode: overlay;
}
.section .container { position: relative; z-index: 1; }

/* número decorativo gigante de fundo (grafismo) */
.section__bignum {
  position: absolute; top: clamp(-1rem, -1vw, 0); right: var(--space-6);
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(8rem, 22vw, 20rem); line-height: 1;
  color: var(--t-primary); opacity: 0.05; z-index: 0; pointer-events: none;
  user-select: none;
}

.section__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-size: var(--text-eyebrow); color: var(--accent-bright);
  letter-spacing: var(--tracking-eyebrow); margin-bottom: var(--space-5);
}
.section__eyebrow::before {
  content: counter(section, decimal-leading-zero);
  font-family: var(--font-grotesk); color: var(--t-tertiary);
}
.section__eyebrow .bar { width: 28px; height: 1px; background: var(--accent); }

.section__header {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--text-h2);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-10);
  color: var(--t-primary);
}
.section__header em { font-style: italic; color: var(--accent-bright); }
.section__rule { display: none; }

/* ---- Sobre ---- */
.about__grid { display: grid; grid-template-columns: 320px 1fr; gap: clamp(var(--space-10), 5vw, var(--space-20)); align-items: start; }
.about__identity { font-family: var(--font-serif); font-size: var(--text-statement); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--t-primary); }
.about__family { margin-top: var(--space-3); color: var(--t-tertiary); font-size: var(--text-small); }
.about__narrative p { margin-top: var(--space-6); font-size: var(--text-lead); line-height: var(--leading-relaxed); color: var(--t-secondary); max-width: 56ch; }
.about__narrative p:first-child { margin-top: var(--space-8); color: var(--t-primary); }
.about__meta { margin-top: var(--space-10); padding-top: var(--space-8); border-top: var(--hairline) solid var(--t-line); display: grid; gap: var(--space-4); }
.about__meta-row { display: flex; gap: var(--space-4); font-size: var(--text-small); }
.about__meta-label { color: var(--accent-bright); min-width: 150px; font-weight: var(--weight-medium); }
.about__meta-value { color: var(--t-secondary); }

/* ---- O que faço ---- */
.what__headline { font-family: var(--font-serif); font-style: italic; font-size: var(--text-statement); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); max-width: 22ch; margin-bottom: var(--space-12); color: var(--t-primary); }
.what__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-12); }
.what__block { max-width: 60ch; }
.what__block-label { font-size: var(--text-eyebrow); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); color: var(--accent-bright); margin-bottom: var(--space-4); }
.what__block-text { font-size: var(--text-lead); line-height: var(--leading-relaxed); color: var(--t-secondary); }

/* ---- IA ---- */
.ai__manifesto { font-family: var(--font-serif); font-style: italic; font-size: var(--text-statement); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-16); max-width: 24ch; color: var(--t-primary); }

/* ---- Footer ---- */
.footer { padding-block: var(--space-16); border-top: var(--hairline) solid var(--t-line); color: var(--t-tertiary); font-size: var(--text-small); background: var(--bg); }
.footer p + p { margin-top: var(--space-3); }
.footer a { color: var(--accent-bright); }

/* ============================================================
   Reveal ao scroll
   ============================================================ */
.reveal { opacity: 0; transform: translateY(30px) scale(0.985); transition: opacity var(--duration-reveal) var(--ease-out-expo), transform var(--duration-reveal) var(--ease-out-expo); will-change: opacity, transform; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.reveal[data-delay="1"] { transition-delay: 80ms; }
.reveal[data-delay="2"] { transition-delay: 160ms; }
.reveal[data-delay="3"] { transition-delay: 240ms; }
.reveal[data-delay="4"] { transition-delay: 320ms; }

/* ============================================================
   Responsivo
   ============================================================ */
@media (max-width: 820px) { .about__grid { grid-template-columns: 1fr; gap: var(--space-10); } }
@media (max-width: 768px) { .topbar__name { display: none; } .about__meta-row { flex-direction: column; gap: 2px; } .about__meta-label { min-width: 0; } }
@media (max-width: 480px) { .container { padding-inline: var(--space-5); } .hero__ctas { flex-direction: column; align-items: stretch; } .hero__scroll-cue { display: none; } }