.projects {
  --strip-gap: clamp(0.45rem, 0.8vw, 0.7rem);
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-block: clamp(4.5rem, 6vw, 6rem);
  background: var(--bg);
}

.project-intro {
  width: 80vw;
  max-width: 80vw;
  margin: 0 auto clamp(1.5rem, 3vw, 2.5rem);
  padding-inline: 0;
}

.project-intro-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.project-intro p {
  margin: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.project-motion-toggle {
  padding: 0.2rem 0;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  cursor: pointer;
  transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}

.project-motion-toggle:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.project-intro h2 {
  max-width: 18ch;
  margin: 0;
  text-align: left;
  font-size: clamp(2rem, 2.8vw, 2.85rem);
  font-weight: 850;
  line-height: 0.94;
}

.project-strips {
  display: grid;
  gap: var(--strip-gap);
  width: 100vw;
  margin-inline: auto;
}

.project-strip {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.project-strip::-webkit-scrollbar { display: none; }

.projects.is-marquee-ready .project-strip { overflow: hidden; }

.project-strip-track {
  display: flex;
  width: max-content;
  animation: none 15s linear infinite;
}

.project-strip-offset .project-strip-track {
  animation-direction: reverse;
  animation-delay: -7.5s;
}

.projects.is-marquee-ready .project-strip-track {
  animation-name: project-marquee;
  will-change: transform;
}

.project-strip-group {
  display: flex;
  flex: none;
  gap: var(--strip-gap);
  padding-right: var(--strip-gap);
}

.project-tile,
.project-statement {
  position: relative;
  flex: 0 0 auto;
  width: 258px;
  height: 224px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface-2);
}

.project-tile img,
.project-tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) contrast(1.04) brightness(0.82);
  transform: scale(1.015);
  transition: filter 500ms var(--ease-out), transform 700ms var(--ease-out);
}

/* Mantém olhos, cabelo e chapéus dentro do recorte horizontal. */
.project-tile img { object-position: 50% 36%; }

.project-tile-focus-right img,
.project-tile-focus-right video { object-position: 72% center; }
.project-tile-focus-left img,
.project-tile-focus-left video { object-position: 30% center; }

/* O primeiro plano do aniversário começa muito próximo do topo do quadro. */
.project-tile-focus-upper img,
.project-tile-focus-upper video { object-position: 50% 32%; }

.project-tile-focus-left.project-tile-focus-upper img,
.project-tile-focus-left.project-tile-focus-upper video { object-position: 30% 32%; }

.project-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.84), transparent 58%);
  opacity: 0.78;
  transition: opacity 400ms var(--ease-out);
}

.project-tile-copy {
  position: absolute;
  inset: auto 1rem 0.9rem;
  z-index: 1;
  display: grid;
  gap: 0.1rem;
  color: var(--ink);
}

.project-tile-copy small {
  color: rgba(238, 238, 238, 0.76);
  font-family: var(--font-mono);
  font-size: 0.64rem;
}

.project-tile-copy strong {
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  line-height: 1;
  letter-spacing: -0.03em;
}

.project-tile:hover img,
.project-tile:hover video,
.project-tile:focus-visible img,
.project-tile:focus-visible video {
  filter: saturate(1) contrast(1.02) brightness(0.98);
  transform: scale(1.055);
}

.project-tile:hover::after,
.project-tile:focus-visible::after { opacity: 0.94; }

.project-statement {
  display: flex;
  justify-content: space-between;
  padding: 0.9rem 0.8rem;
  background: var(--accent);
  color: #fff;
}

.project-statement span {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1;
}

.project-statement strong {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: clamp(0.62rem, 0.8vw, 0.75rem);
  line-height: 1.35;
  text-align: right;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.projects.is-pointer-down .project-strip-track,
.projects[data-paused="true"] .project-strip-track,
.projects:not(.is-marquee-active) .project-strip-track {
  animation-play-state: paused;
}

.projects:not(.is-marquee-active) .project-strip-track { will-change: auto; }

/* Mantém a faixa estática apenas durante a navegação por teclado. Um clique
   também dá foco ao card, mas não deve interromper o movimento do carrossel. */
.project-strip:has(.project-tile:focus-visible) {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}

.project-strip:has(.project-tile:focus-visible) .project-strip-track {
  animation: none;
  transform: none;
  will-change: auto;
}

@keyframes project-marquee {
  to { transform: translate3d(var(--marquee-distance, -50%), 0, 0); }
}

@media (max-width: 760px) {
  .projects { min-height: auto; }

  /* Mais 15% menor que a medida desktop, preservando a proporção. */
  .project-tile,
  .project-statement {
    width: 219px;
    height: 202px;
  }

  .project-intro {
    margin-bottom: 1.5rem;
    width: 80vw;
  }

  .project-intro h2 { font-size: 1.3rem; }

  .project-strips { width: 100vw; }

}

@media (prefers-reduced-motion: reduce) {
  .project-motion-toggle { display: none; }

  .project-strip {
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) transparent;
  }

  .project-strip::-webkit-scrollbar { display: initial; }

  .project-strip-track {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}