/* ============================================================
   MANIFESTO LAB — Layout (nav, preloader, cursor, footer)
   ============================================================ */

/* ---- Navegação ---- */
.topbar {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  padding-block: clamp(1rem, 1.6vw, 1.5rem);
  mix-blend-mode: difference; /* inverte sobre dark/light automaticamente */
  transition: transform 0.5s var(--ease-out);
}
.topbar.is-hidden { transform: translateY(-110%); }

.topbar-inner { display: flex; align-items: center; justify-content: space-between; }

.logo-text {
  font-family: var(--font-text);
  font-size: 0.82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.28em; color: #fff;
}

.brand { color: #fff; }

/* ---- Monograma M/L ---- */
.monogram {
  display: inline-flex; align-items: stretch; gap: 0;
  font-family: var(--font-display); font-weight: 500; line-height: 0.82;
  color: currentColor; vertical-align: middle;
}
.monogram .m { font-size: 1em; letter-spacing: -0.02em; }
.monogram .bar { width: 1px; background: currentColor; opacity: 0.85; margin-inline: 0.18em; }
.monogram .l { font-size: 0.72em; align-self: flex-end; letter-spacing: 0.04em; }
.monogram--lg { font-size: clamp(2.6rem, 6vw, 4.5rem); }
.monogram--sm { font-size: 1.5rem; }

.nav-links { display: flex; gap: clamp(1.2rem, 2.4vw, 2.6rem); list-style: none; }
.nav-links a {
  position: relative; color: #fff;
  font-size: 0.7rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -4px;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease-out);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 680px) { .nav-links { display: none; } }

/* ---- Preloader ---- */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--c-black); color: var(--c-white);
  display: flex; align-items: center; justify-content: center;
}
.preloader__word {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(2rem, 8vw, 6rem); font-weight: 400;
  display: flex; gap: 0.04em; overflow: hidden;
}
.preloader__word span { display: inline-block; transform: translateY(110%); }
.preloader__count {
  position: absolute; bottom: clamp(1.5rem, 4vw, 3rem); right: var(--container-pad);
  font-family: var(--font-text); font-size: 0.8rem; letter-spacing: 0.2em;
  opacity: 0.7; font-variant-numeric: tabular-nums;
}
.preloader__bar {
  position: absolute; bottom: 0; left: 0; height: 1px; width: 100%;
  background: rgba(var(--rgb-white), 0.5); transform: scaleX(0); transform-origin: left;
}

/* ---- Cursor magnético ---- */
.cursor {
  position: fixed; top: 0; left: 0; z-index: 10000; pointer-events: none;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--c-white); mix-blend-mode: difference;
  transform: translate(-50%, -50%);
  transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out), opacity 0.3s;
}
.cursor.is-hover { width: 64px; height: 64px; background: var(--c-white); }
.cursor.is-hidden { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } body { cursor: auto; } }
@media (hover: hover) and (pointer: fine) { body { cursor: none; } a, button, .swatch { cursor: none; } }

/* ---- Marquee ---- */
.marquee { overflow: hidden; white-space: nowrap; border-block: 1px solid var(--line); padding-block: clamp(1.2rem, 3vw, 2.4rem); }
.marquee__track { display: inline-flex; gap: 3rem; will-change: transform; }
.marquee__track span {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(2rem, 6vw, 5rem); opacity: 0.9;
}
.marquee__track .sep { font-style: normal; opacity: 0.35; }

/* ---- Footer ---- */
.footer { padding-block: var(--space-xl) var(--space-lg); }
.footer__meta {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm);
  margin-top: var(--space-xl); padding-top: var(--space-md);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small); letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.55;
}

/* ---- Botões ---- */
.btn {
  --btn-fg: var(--fg);
  position: relative; display: inline-flex; align-items: center; gap: 0.7em;
  padding: 1rem 2.2rem; border: 1px solid var(--btn-fg); border-radius: 100px;
  font-family: var(--font-text); font-size: 0.72rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.2em; color: var(--btn-fg);
  overflow: hidden; isolation: isolate; transition: color 0.5s var(--ease-out);
  will-change: transform;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-fg);
  transform: translateY(101%); transition: transform 0.5s var(--ease-out);
}
.btn:hover { color: var(--bg); }
.btn:hover::before { transform: translateY(0); }
.btn .btn__label { display: inline-block; }