/* Base comum dos conceitos de portfólio. Cada site define as próprias cores e fontes. */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
body { margin: 0; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* imagens com parallax ficam maiores que a moldura para ter para onde andar */
.px { overflow: hidden; }
.px > img { width: 100%; height: 118%; object-fit: cover; }

/* estados iniciais só com JS e movimento liberado */
.js [data-rise] { opacity: 0; transform: translateY(40px); }
.js [data-lines] .l { display: block; overflow: hidden; padding-bottom: 0.06em; }
.js [data-lines] .l > span { display: inline-block; transform: translateY(105%); }
.js [data-clip] { clip-path: inset(100% 0 0 0); }

.marquee { overflow: hidden; }
.marquee__track { display: flex; width: max-content; animation: kit-marquee var(--speed, 30s) linear infinite; }
.marquee--rev .marquee__track { animation-direction: reverse; }
@keyframes kit-marquee { to { transform: translateX(-50%); } }

/* selo fixo: deixa claro que a marca é fictícia */
.concept {
  position: fixed; z-index: 90; left: 50%; bottom: 16px; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 7px 7px 16px; border-radius: 999px;
  background: rgb(10 12 15 / 0.78); color: #c9d1d9;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgb(255 255 255 / 0.1);
  font: 400 12px/1 ui-monospace, "Geist Mono", monospace; white-space: nowrap;
}
.concept a { padding: 7px 12px; border-radius: 999px; background: #29e0f5; color: #03181c; font-weight: 600; }
.concept a.concept__wa { margin-left: -4px; background: #25d366; color: #052e16; }
@media (max-width: 520px) { .concept span { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .js [data-rise], .js [data-lines] .l > span { opacity: 1; transform: none; }
  .js [data-clip] { clip-path: none; }
  .marquee__track { animation: none; }
}