/* ==========================================================================
   Cena 2: projetos num trilho horizontal controlado pela rolagem vertical
   --st (0 a 2): qual projeto está em destaque (com pausas em cada um, ver data-hold).
   --e: a folha sobe e se abre por cima do hero. Cada painel recebe --o (distância ao destaque):
   escala, giro e transparência vêm dele; imagem, texto e celular andam em velocidades diferentes.
   A imagem sempre fica na coluna maior (8fr contra 5fr do texto) e o painel acompanha a altura útil
   do trilho (cqh), para a captura do site aparecer o maior possível em qualquer tela.
   Telas pequenas (lite) e movimento reduzido mantêm a lista vertical, sem trilho.
   ========================================================================== */

.rail-nav {
  display: none; /* só existe no trilho horizontal */
}

/* ---------- Palco fixo + folha que sobe (telas largas) ---------- */

html[data-scenes="pin"] .projects {
  height: calc(100svh * 4.4); /* 1 palco + 2,4 de trilho + 1 de cortina */
  padding-top: 0;
}

html[data-scenes="pin"] .projects__stage {
  --gx: max(var(--gutter), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  container-type: inline-size;
}

html[data-scenes="pin"] .projects__sheet {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* overflow: clip não zera o mínimo: sem isto o trilho alarga a coluna */
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  padding-top: calc(var(--header-h) + 0.5rem);
  padding-bottom: 5.25rem; /* espaço da navegação do trilho */
  overflow: clip;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  border-radius: calc((1 - var(--e, 0)) * 2.25rem) calc((1 - var(--e, 0)) * 2.25rem) 0 0;
  background:
    radial-gradient(ellipse 55% 45% at 82% 0%, rgb(var(--c-violet) / 0.14), transparent 70%),
    var(--c-ink);
  transform-origin: 50% 0;
  scale: calc((0.94 + var(--e, 0) * 0.06) * (1 - var(--x, 0) * 0.08));
  opacity: calc(1 - var(--x, 0) * 0.55);
}

html[data-scenes="pin"] .projects__top {
  display: block;
}

html[data-scenes="pin"] .projects__top .section-head {
  max-width: none;
}

html[data-scenes="pin"] .projects__top .section-title {
  margin-top: 0.75rem;
  max-width: none;
  font-size: clamp(1.5rem, 1rem + 3.4svh, 2.75rem);
}

/* ---------- Trilho ---------- */

html[data-scenes="pin"] .rail {
  --pw: min(100cqw - 2 * var(--gx), 75rem); /* largura de cada painel */
  --gap: clamp(2rem, 6cqw, 6rem);
  position: relative;
  min-height: 0;
  overflow: clip;
  container-type: size; /* cqh = altura útil do trilho, usada para dimensionar o painel da imagem */
}

html[data-scenes="pin"] .cases {
  display: flex;
  gap: var(--gap);
  width: max-content;
  max-width: none;
  height: 100%;
  margin: 0;
  padding-inline: calc((100cqw - var(--pw)) / 2);
  translate: calc(var(--st, 0) * (var(--pw) + var(--gap)) * -1) 0;
}

html[data-scenes="pin"] .cases[data-live],
html[data-scenes="pin"] .projects[data-live="true"] .cases {
  will-change: translate;
}

html[data-scenes="pin"] .case {
  --o: calc(var(--i) - var(--st, 0)); /* 0 no painel em destaque; ±1 nos vizinhos */
  --oa: clamp(0, max(var(--o), var(--o) * -1), 1);
  position: relative;
  flex: none;
  grid-template-columns: minmax(0, 8fr) minmax(0, 5fr);
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(1.5rem, 4cqw, 4rem);
  align-items: center;
  width: var(--pw);
  height: 100%;
  padding-block: 0.75rem;
  border: 0;
  opacity: calc(1 - var(--oa) * 0.7);
  transform: perspective(1800px) translate3d(0, 0, calc(var(--oa) * -180px)) rotateY(calc(var(--o) * -9deg));
}

html[data-scenes="pin"] .case--flip {
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
}

/* numeral gigante atrás do texto (decorativo; o número "de verdade" é o do kicker) */
html[data-scenes="pin"] .case::before {
  content: counter(case, decimal-leading-zero);
  content: counter(case, decimal-leading-zero) / "";
  position: absolute;
  top: 50%;
  right: -1%;
  z-index: -1;
  color: rgb(255 255 255 / 0.04);
  font-size: clamp(11rem, 30cqw, 24rem);
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
  translate: calc(var(--o) * 11cqw) -50%;
  pointer-events: none;
}

html[data-scenes="pin"] .case--flip::before {
  right: auto;
  left: -1%;
}

html[data-scenes="pin"] .case__media {
  justify-self: center;
  /* a largura segue a altura útil do trilho (proporção 1,3:1) sem passar da coluna */
  width: min(100%, calc((100cqh - 1.5rem) * 1.3));
  height: auto;
  max-height: calc(100cqh - 1.5rem);
  aspect-ratio: 1.3 / 1;
  border-color: rgb(var(--c-violet) / calc(0.1 + (1 - var(--oa)) * 0.5));
  box-shadow: 0 46px 90px -46px rgb(var(--c-violet) / calc((1 - var(--oa)) * 0.55));
  transform: translate3d(calc(var(--o) * 7cqw), 0, 0); /* imagem anda mais que o texto */
}

html[data-scenes="pin"] .case__body {
  translate: calc(var(--o) * -3cqw) 0;
}

/* O bloco de texto (selo, título, descrição e ficha) tem de caber na altura do trilho em notebooks
   baixos: os tamanhos acompanham a altura (svh) e, em telas altas, valem os do layout original. */
html[data-scenes="pin"] .case__title {
  margin-top: clamp(0.5rem, 1.4svh, 1rem);
  font-size: max(2rem, min(clamp(2rem, 1.5rem + 2.2vw, 3.25rem), 6.2svh));
}

html[data-scenes="pin"] .case__text {
  margin-top: clamp(0.5rem, 1.9svh, 1.25rem);
  font-size: max(0.875rem, min(var(--fs-base), 2.35svh));
  line-height: 1.5;
}

html[data-scenes="pin"] .spec {
  margin-top: clamp(0.75rem, 2.4svh, 1.75rem);
}

html[data-scenes="pin"] .spec > div {
  padding-block: clamp(0.375rem, 1.1svh, 0.75rem);
}

html[data-scenes="pin"] .case__actions {
  margin-top: clamp(0.75rem, 2.2svh, 1.5rem);
}

/* a cena 3D abre o ângulo conforme o painel chega ao centro (no lugar do --sp da rolagem vertical) */
html[data-scenes="pin"] .case__scene {
  transform: rotateX(calc(var(--rx, 0) * 1deg + 2deg))
    rotateY(calc(var(--ry, 0) * 1deg + var(--o) * -12deg - 6deg));
}

html[data-scenes="pin"] .case--flip .case__scene {
  transform: rotateX(calc(var(--rx, 0) * 1deg + 2deg))
    rotateY(calc(var(--ry, 0) * 1deg + var(--o) * -12deg + 6deg));
}

html[data-scenes="pin"] .case__phone {
  transform: translate3d(calc(var(--px, 0) * 14px + var(--o) * 5cqw), 0, 70px);
}

/* ---------- Navegação e progresso do trilho ---------- */

html[data-scenes="pin"] .rail-nav {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  z-index: 3;
  display: block;
  width: min(100cqw - 2 * var(--gx), 75rem);
  translate: -50% 0;
}

.rail-nav__list {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.rail-nav__link {
  --ra: clamp(0, 1 - max(var(--st, 0) - var(--i), var(--i) - var(--st, 0)), 1); /* 1 quando é o atual */
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  min-height: var(--tap);
  padding-bottom: 0.5rem;
  color: var(--c-paper);
  font-size: var(--fs-sm);
  font-weight: 560;
}

/* os projetos que não são o atual ficam mais fracos, mas nunca abaixo de ~5:1 (é navegação, precisa de leitura) */
.rail-nav__name {
  opacity: calc(0.6 + var(--ra) * 0.4);
}

.rail-nav__n {
  color: rgb(var(--c-violet)); /* o violeta já está perto do mínimo de contraste: não apaga */
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
}

.rail-nav__line {
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--c-line-strong);
}

.rail-nav__line i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgb(var(--c-violet)), var(--c-white));
  box-shadow: 0 0 12px rgb(var(--c-violet) / 0.8);
  transform-origin: left;
  scale: calc(var(--st, 0) / 2) 1;
}

/* ---------- Celular (lite): os painéis rolam na vertical; imagem e texto se afastam um pouco ---------- */

html[data-scenes="lite"] .case__media {
  transform: translate3d(0, calc((0.5 - var(--q, 0.5)) * 2.5rem), 0);
}

html[data-scenes="lite"] .case__phone {
  translate: 0 calc((0.5 - var(--q, 0.5)) * 3.5rem);
}

/* ---------- Telas baixas: o título da seção cabe numa linha e o trilho ganha altura ---------- */

@media (max-height: 46em) {
  html[data-scenes="pin"] .projects__top .section-title {
    max-width: none;
    font-size: clamp(1.5rem, 1rem + 2.6svh, 2.25rem);
  }
}

/* ---------- Telas estreitas (< 75em): o texto ganha largura para não quebrar tanto ---------- */

@media (width < 75em) {
  html[data-scenes="pin"] .case {
    grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  }

  html[data-scenes="pin"] .case--flip {
    grid-template-columns: minmax(0, 6fr) minmax(0, 7fr);
  }
}

/* ---------- Telas muito baixas (≤ 40em): a ficha perde a linha "Local" (já está na descrição) ---------- */

@media (max-height: 40em) {
  html[data-scenes="pin"] .spec [data-minor] {
    display: none;
  }

  html[data-scenes="pin"] .case__title {
    font-size: 1.75rem;
  }

  html[data-scenes="pin"] .case__actions {
    margin-top: 0.5rem;
  }
}