/* ============================================================
   MOTION — scroll dinâmico (hero, manifesto, serviços horizontais,
   projetos 3D, faixa fotográfica, pontos de navegação).
   Todo o movimento é desligado com prefers-reduced-motion e as
   secções "fixas" só existem em ecrãs largos (≥ 900px).
   ============================================================ */

/* ---- progresso e pontos ---- */
.scroll-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px;
  background: var(--clay);
  transform: scaleX(0); transform-origin: left;
  z-index: 60; pointer-events: none;
}
.dots {
  position: fixed; right: 18px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: none; flex-direction: column; gap: 14px;
}
.dots a {
  position: relative; display: block; width: 10px; height: 10px; border-radius: 50%;
  border: 1px solid var(--stone); background: transparent;
  transition: all var(--dur-base) var(--ease-out);
}
.dots a::after {
  content: attr(data-label);
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  font: 400 11px/1 var(--font-mono); letter-spacing: 1px; text-transform: uppercase;
  color: var(--on-dark); background: var(--surface-elevated);
  padding: 6px 10px; white-space: nowrap; opacity: 0; pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.dots a:hover::after, .dots a:focus-visible::after { opacity: 1; }
.dots a.is-active { background: var(--clay); border-color: var(--clay); transform: scale(1.35); }
@media (min-width: 1200px) { .dots { display: flex; } }

.reveal { transition-delay: var(--d, 0ms); }

/* ---- hero ---- */
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(520px circle at var(--mx, 72%) var(--my, 30%), rgba(var(--clay-rgb), 0.14), transparent 70%);
}
.hero-ready .hero-line { animation: none; opacity: 1; }
.hero-line, .hero-decor__bracket, .hero-bottom { will-change: transform; }
.hero-scroll {
  position: absolute; right: var(--container-pad); bottom: 56px; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font: 400 11px/1 var(--font-mono); letter-spacing: 2px; text-transform: uppercase;
  color: var(--stone); writing-mode: vertical-rl;
}
.hero-scroll i { width: 1px; height: 56px; background: linear-gradient(var(--clay), transparent); animation: heroScroll 2s ease-in-out infinite; transform-origin: top; }
@keyframes heroScroll { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (max-width: 900px) { .hero-scroll { display: none; } }

/* ---- manifesto: palavras que acendem ---- */
.manifesto { padding: clamp(100px, 24vh, 240px) 0; }
.manifesto__text {
  font: 700 clamp(34px, 6vw, 84px)/1.04 var(--font-display);
  letter-spacing: -0.03em; color: var(--on-dark); max-width: 24ch;
}
.manifesto .w { opacity: 0.16; transition: opacity 120ms linear; }
.manifesto .w.hl { color: var(--clay); }

/* ---- serviços: scroll horizontal fixado ---- */
.hscroll { position: relative; }
.hscroll__pin { padding: var(--space-section) 0 var(--space-block); }
.hs-track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 0 var(--container-pad) 16px; scrollbar-width: none;
}
.hs-track::-webkit-scrollbar { display: none; }
.hs-intro { flex: 0 0 min(86vw, 460px); scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.hs-hint { font: 400 12px/1.4 var(--font-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--stone); margin-top: 16px; }
.hs-track .solution-card {
  flex: 0 0 min(80vw, 400px); scroll-snap-align: start;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 380px;
}
.hs-track { counter-reset: svc; }
.hs-track .solution-card { counter-increment: svc; }
.hs-track .solution-card::before {
  content: '0' counter(svc);
  position: absolute; top: -14px; right: 14px;
  font: 700 clamp(120px, 16vw, 200px)/1 var(--font-display); letter-spacing: -0.06em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(var(--clay-rgb), 0.35);
  pointer-events: none; transition: -webkit-text-stroke-color var(--dur-base) var(--ease-out);
}
.hs-track .solution-card:hover::before { -webkit-text-stroke-color: rgba(var(--clay-rgb), 0.8); }
.hs-track .solution-card__icon { margin-bottom: auto; }
.hscroll__bar { display: none; }

@media (min-width: 900px) {
  .hscroll.is-pinned .hscroll__pin {
    position: sticky; top: 0; height: 100vh; padding: 70px 0 0;
    display: flex; flex-direction: column; justify-content: center; overflow: hidden;
  }
  .hscroll.is-pinned .hs-track {
    overflow: visible; scroll-snap-type: none; width: max-content; will-change: transform;
    padding: 0 max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
    gap: 28px;
  }
  .hscroll.is-pinned .hs-intro { flex-basis: min(42vw, 520px); }
  .hscroll.is-pinned .solution-card { flex-basis: min(32vw, 430px); min-height: min(58vh, 460px); }
  .hscroll.is-pinned .hscroll__bar {
    display: block; position: absolute; left: var(--container-pad); right: var(--container-pad); bottom: 28px;
    height: 2px; background: var(--hairline-dark);
  }
  .hscroll__bar i { display: block; height: 100%; background: var(--clay); transform: scaleX(0); transform-origin: left; }
}

/* ---- sobre: título fixo + foco no texto ---- */
.about-labeled__item { transition: opacity 200ms linear; }
@media (min-width: 900px) {
  .about-grid > div:first-child { position: sticky; top: 120px; align-self: start; }
  .about-labeled { gap: 56px; }
  .about-labeled__text { font-size: 21px; }
}

/* ---- projetos em destaque: fixo, muda com o scroll, mockups em 3D ---- */
.featured-sec { padding: 0; }
.featured-pin { padding: var(--space-section) 0; }
.featured-divider { position: relative; overflow: hidden; height: 2px; }
.featured-divider i { position: absolute; inset: 0; background: var(--clay); transform: scaleX(0); transform-origin: left; }
.pj-enter { transition: opacity 0.55s var(--ease-out), transform 0.7s var(--ease-out); }
.pj-enter-start { opacity: 0; transform: translateY(26px); }
.pj-enter-end { opacity: 1; transform: none; }

.featured-stage { --q: 0; }
@media (min-width: 900px) {
  .featured-sec.is-pinned .featured-pin {
    position: sticky; top: 0; height: 100vh;
    display: flex; align-items: center; padding: 76px 0 28px;
  }
  .featured-sec.is-pinned .featured-pin > .container { width: 100%; }
  .featured-sec.is-pinned .featured-header { margin-bottom: 28px; }
  .featured-sec.is-pinned .featured-dots { margin-top: 24px; }
  .featured-sec.is-pinned .mockup-duo {
    transform: perspective(1500px) rotateY(calc(-9deg + var(--q) * 13deg)) rotateX(2deg);
    will-change: transform;
  }
  .featured-sec.is-pinned .mockup-phone { transform: translateY(calc(30px - var(--q) * 56px)); }
  .featured-sec.is-pinned .featured-arrow--prev { left: -8px; }
  .featured-sec.is-pinned .featured-arrow--next { right: -8px; }
}

/* ---- toolkit: faixa de texto e entrada escalonada ---- */
.stackband { overflow: hidden; display: flex; flex-direction: column; gap: 2vh; margin-bottom: 64px; }
.stackband__row {
  white-space: nowrap; will-change: transform;
  font: 700 clamp(54px, 11vw, 160px)/0.95 var(--font-display); letter-spacing: -0.03em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.26);
}
.stackband__row--solid { color: rgba(var(--clay-rgb), 0.22); -webkit-text-stroke: 0; }
.toolkit-item {
  opacity: 0; transform: translateX(-14px);
  transition: opacity 0.5s var(--ease-out) calc(var(--i, 0) * 70ms), transform 0.6s var(--ease-out) calc(var(--i, 0) * 70ms);
}
.toolkit-group.in .toolkit-item { opacity: 1; transform: none; }
.toolkit-item:hover .toolkit-item__icon { opacity: 1; }

/* ---- faixa fotográfica ---- */
.band-photo { position: relative; height: clamp(520px, 92vh, 860px); overflow: hidden; display: flex; align-items: center; background: #000; }
.band-photo__img { position: absolute; inset: 0; overflow: hidden; }
.plx { position: absolute; inset: -18% 0; will-change: transform; }
.plx img { width: 100%; height: 100%; object-fit: cover; }
.band-photo__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.78), rgba(0,0,0,0.22) 42%, rgba(0,0,0,0.85)); }
.band-photo__rows { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 9vh 0; pointer-events: none; }
.band-photo__row {
  white-space: nowrap; will-change: transform;
  font: 700 clamp(70px, 15vw, 230px)/0.9 var(--font-display); letter-spacing: -0.04em; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.5);
}
.band-photo__row--solid { color: rgba(var(--clay-rgb), 0.5); -webkit-text-stroke: 0; }
.band-photo__caption {
  position: relative; z-index: 2;
  margin-left: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  font: 700 clamp(34px, 6vw, 84px)/0.98 var(--font-display); letter-spacing: -0.03em; text-transform: uppercase;
  color: var(--on-dark); text-shadow: 0 2px 40px rgba(0, 0, 0, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .manifesto .w { opacity: 1; }
  .hero-scroll i { animation: none; }
  .toolkit-item { opacity: 1; transform: none; transition: none; }
  .band-photo__row, .stackband__row { transform: none !important; }
}

/* com o scroll a escolher o projeto, as setas laterais sobram (os pontos continuam) */
@media (min-width: 900px) {
  .featured-sec.is-pinned .featured-arrow { display: none; }
}

/* telemóvel: o "snap" respeita a margem lateral */
.hs-track { scroll-padding-inline: var(--container-pad); }

/* o telemóvel mostra a zona esquerda da captura (onde está o título), não o centro */
.mockup-phone__screen img { object-position: left top; }
.mockup-laptop__screen img { object-position: top left; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }