/* HUB'ZINHO — "Névoa": papel, tinta e paisagens em pontilhado.
   Serifada suave nos títulos, mono miúda no resto, vidro fosco e pílulas. */

@font-face { font-family: 'Young Serif'; font-weight: 400; font-display: swap; src: url(fonts/YoungSerif-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/InstrumentSerif-Italic.woff2) format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 400; font-display: swap; src: url(fonts/GeistMono-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Geist Mono'; font-weight: 500; font-display: swap; src: url(fonts/GeistMono-Medium.woff2) format('woff2'); }

:root {
  --serif: 'Young Serif', 'Iowan Old Style', Georgia, serif;
  --italic: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --paper: #EDEDEA;
  --paper-2: #E3E3DF;
  --card: #FBFBF9;
  --ink: #0E0E0E;
  --ink-2: #3A3A38;
  --mute: #8A8A86;
  --line: rgba(14, 14, 14, .12);
  --line-2: rgba(14, 14, 14, .22);
  --glass: rgba(255, 255, 255, .34);
  --glass-line: rgba(255, 255, 255, .6);
  --focus: #0E0E0E;
  --danger: #B3261E;
  --ok: #2F6B4F;
  --dusk-1: #5A9EA0; --dusk-2: #9DB4C4; --dusk-3: #D6A9C2; --dusk-4: #F2A68A;

  --r-xl: 28px; --r-lg: 20px; --r-md: 14px; --r-sm: 10px; --pill: 999px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 30px 80px -30px rgba(0, 0, 0, .35), 0 8px 24px -12px rgba(0, 0, 0, .18);
  --ease: cubic-bezier(.2, .7, .1, 1);
  color-scheme: light;
}
:root[data-mood="night"] {
  --paper: #0B0B0B; --paper-2: #141414; --card: #121212; --ink: #EDEDEA; --ink-2: #C4C4C0; --mute: #77776F;
  --line: rgba(237, 237, 234, .12); --line-2: rgba(237, 237, 234, .24);
  --glass: rgba(20, 20, 20, .45); --glass-line: rgba(255, 255, 255, .14); --focus: #EDEDEA;
  --shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 30px 80px -30px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--paper); color: var(--ink);
  font: 400 13px/1.55 var(--mono); letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; touch-action: manipulation;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--ink); color: var(--paper); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---- marca: anel de pixels + nome em serifada ---- */
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mark svg { width: 22px; height: 22px; flex: none; }
.mark b { font: 400 19px/1 var(--serif); letter-spacing: -.02em; }
.mark.big svg { width: 54px; height: 54px; }
.mark.big b { font-size: clamp(40px, 7vw, 74px); }

/* ---- tipografia ---- */
.display { font: 400 clamp(30px, 4.2vw, 52px)/1.02 var(--serif); letter-spacing: -.035em; margin: 0; }
.display em { font: italic 400 1.08em/1 var(--italic); letter-spacing: -.01em; }
.eyebrow { font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.muted { color: var(--mute); }
.small { font-size: 11.5px; }

/* ---- cenas em pontilhado ---- */
.scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.stage { position: fixed; inset: 0; overflow: hidden; background: var(--paper); }
.stage::after { /* grão leve por cima, para a cena não ficar "digital" demais */
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .07;
  background-image: radial-gradient(rgba(0, 0, 0, .9) .6px, transparent .7px); background-size: 3px 3px;
}

/* ---- vidro ---- */
.glass {
  background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-xl);
  -webkit-backdrop-filter: blur(22px) saturate(1.1); backdrop-filter: blur(22px) saturate(1.1);
  box-shadow: var(--shadow);
}
.sheet { background: var(--card); border-radius: calc(var(--r-xl) - 8px); }

/* ---- campos ---- */
.field { display: grid; gap: 8px; }
.field > span { font: 500 11.5px/1 var(--mono); color: var(--ink); }
.field-row { position: relative; display: flex; align-items: center; }
.input {
  width: 100%; height: 40px; padding: 0 16px; border-radius: var(--pill);
  background: transparent; border: 1px solid var(--line-2); outline: none;
  font: 400 13px/1 var(--mono); transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.input::placeholder { color: color-mix(in srgb, var(--mute) 80%, transparent); }
.input:focus { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 8%, transparent); }
.field-row .input { padding-right: 46px; }
.peek { position: absolute; right: 6px; width: 30px; height: 30px; border-radius: var(--pill); border: 0; background: none; color: var(--mute); cursor: pointer; display: grid; place-items: center; }
.peek:hover, .peek.on { color: var(--ink); }
.peek svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ---- botões ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 40px; padding: 0 22px;
  border-radius: var(--pill); border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font: 500 12.5px/1 var(--mono); text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), opacity .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.99); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { border-color: var(--ink); }
.btn[disabled] { opacity: .55; cursor: progress; transform: none; }
.btn.block { width: 100%; }
.link { font: 500 11.5px/1 var(--mono); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; padding: 0; }

.rule { display: flex; align-items: center; gap: 14px; color: var(--mute); font-size: 11px; letter-spacing: .08em; }
.rule::before, .rule::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.error { min-height: 1.3em; margin: 0; color: var(--danger); font-size: 12px; }
.shake { animation: shake .4s var(--ease); }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---- entrada em cena ---- */
.rise { opacity: 0; transform: translateY(14px); animation: rise .9s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; opacity: 1; transform: none; } }