/* ============================================================================
   MAXIMIZE — camada de SCROLL: profundidade, trilho lateral e transições
   ----------------------------------------------------------------------------
   Esta camada existe para dar ao scroll a mesma disciplina que o resto do
   sistema: nada aqui é "efeito por efeito". Cada dispositivo carrega sentido.

     · PARALLAX      — profundidade. O que está longe move menos.
     · RAIL          — troca de seção LATERAL. Onde o conteúdo é uma SÉRIE
                       (47 alavancas, 7 planos, passos de instalação), o eixo
                       vira horizontal, porque série se lê em trilho.
     · CURTAIN       — a virada entre capítulos.
     · SCENE         — cena fixa que se monta enquanto a página rola.
     · COUNTER-ROTATE— a gratícula deriva contra o scroll, como um instrumento
                       que continua medindo enquanto você desce.

   Regra da camada: só `transform`, `opacity`, `clip-path` e `filter`. Tudo
   morre sob prefers-reduced-motion, e nenhum conteúdo depende disto para
   existir ou ser alcançável.
   ========================================================================== */

/* ============================================================================
   1. PARALLAX — profundidade por diferença de velocidade
   ========================================================================== */

@keyframes plxFar {
  from { transform: translate3d(0, 14%, 0); }
  to   { transform: translate3d(0, -14%, 0); }
}
@keyframes plxMid {
  from { transform: translate3d(0, 8%, 0); }
  to   { transform: translate3d(0, -8%, 0); }
}
@keyframes plxNear {
  from { transform: translate3d(0, 4%, 0); }
  to   { transform: translate3d(0, -4%, 0); }
}
@keyframes plxDrift {
  from { transform: translate3d(-3%, 10%, 0) scale(1.12); }
  to   { transform: translate3d(3%, -10%, 0) scale(1.12); }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.has-sda .plx-far,
    html.has-sda .plx-mid,
    html.has-sda .plx-near,
    html.has-sda .plx-drift {
      animation: plxFar linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
      will-change: transform;
    }
    html.has-sda .plx-mid { animation-name: plxMid; }
    html.has-sda .plx-near { animation-name: plxNear; }
    html.has-sda .plx-drift { animation-name: plxDrift; }
  }
}

/* Camada de profundidade: o recipiente recorta, o filho excede e se move. */
.depth {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.depth > .depth-layer {
  position: absolute;
  inset: -18% -6%;
  z-index: 0;
  pointer-events: none;
}
.depth > .depth-body {
  position: relative;
  z-index: 1;
}

/* gratícula que deriva contra o scroll — o instrumento segue medindo */
@keyframes graticuleDrift {
  from { transform: translate3d(0, -34px, 0); }
  to   { transform: translate3d(0, 34px, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.has-sda .graticule-drift::before {
      animation: graticuleDrift linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* ============================================================================
   2. RAIL — a troca de seção LATERAL
   ----------------------------------------------------------------------------
   Sem JS: um trilho rolável na horizontal, com barra de rolagem e teclado —
   perfeitamente usável. Com JS: a seção prende na tela e o trilho corre na
   horizontal conforme a página rola verticalmente.
   ========================================================================== */

.rail {
  position: relative;
}
.rail-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-block: var(--space-6);
}
.rail-track {
  display: flex;
  gap: var(--space-5);
  width: max-content;
  padding-inline: var(--space-5);
  align-items: stretch;
}
.rail-item {
  flex: 0 0 auto;
  width: min(84vw, 400px);
  scroll-snap-align: center;
}
.rail-item--wide {
  width: min(92vw, 620px);
}

/* --- modo preso: só quando o JS confirma que consegue conduzir --- */
html.rail-pinned .rail {
  /* a altura é definida em linha pelo JS: quanto scroll o trilho consome */
  overflow: clip;
}
html.rail-pinned .rail-viewport {
  position: sticky;
  top: var(--header-h);
  height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  overflow: hidden;
  scroll-snap-type: none;
  padding-block: 0;
}
html.rail-pinned .rail-track {
  will-change: transform;
  padding-inline: max(var(--space-5), calc((100vw - var(--container-max)) / 2 + var(--space-5)));
}
/* Os cartões não crescem para ocupar a tela: uma série densa se lê melhor em
   fichas compactas do que em painéis vazios de meio metro de altura. */
html.rail-pinned .rail-track {
  align-items: center;
}
html.rail-pinned .rail-item {
  height: min(46svh, 380px);
}
/* O painel de abertura carrega título, leitura e ação: ele é mais alto que as
   fichas por conteúdo, não por capricho. */
html.rail-pinned .rail-item--wide {
  height: min(68svh, 560px);
}

/* Rótulo persistente do trilho: quem entra no meio da passagem precisa saber
   o que está percorrendo — sem isto a seção perde o próprio nome ao rolar. */
.rail-tag {
  position: absolute;
  top: var(--space-6);
  left: 50%;
  translate: -50% 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  pointer-events: none;
  white-space: nowrap;
}
.rail-tag b {
  color: var(--accent);
  font-weight: 400;
}
html:not(.rail-pinned) .rail-tag {
  display: none;
}

/* cabeçalho fixo do trilho: fica parado enquanto a série corre por baixo */
.rail-head {
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.rail-head > * {
  pointer-events: auto;
}

/* Medidor de progresso: vive DENTRO da área fixa, não da seção alta — preso ao
   fundo de uma seção de 4000px ele nunca apareceria durante a passagem. */
.rail-meter {
  position: absolute;
  left: max(var(--space-6), calc((100vw - var(--container-max)) / 2 + var(--space-5)));
  right: max(var(--space-6), calc((100vw - var(--container-max)) / 2 + var(--space-5)));
  bottom: var(--space-7);
  height: 2px;
  background: rgba(130, 195, 215, 0.12);
  z-index: 4;
  pointer-events: none;
}
.rail-meter > i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
  box-shadow: 0 0 12px var(--accent-glow);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}
html:not(.rail-pinned) .rail-meter {
  display: none;
}

/* --- a alavanca: o cartão que corre no trilho --- */
.lever {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  background: linear-gradient(180deg, var(--n-850), var(--n-900));
  border: 1px solid var(--border-default);
  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  );
  transition: border-color 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}
.lever:hover {
  border-color: var(--border-accent);
}
.lever-id {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--accent);
}
.lever-id span {
  /* denominador do contador — informação, não enfeite. --text-dim dá 3,5:1. */
  color: var(--text-muted);
}
.lever h3 {
  font-size: var(--text-md);
  letter-spacing: -0.02em;
}
/* :not(.lever-id) é obrigatório: `.lever p` também casaria com o identificador,
   dando flex:1 a ele (o buraco vertical no topo do cartão) e sobrescrevendo
   sua cor de acento por especificidade. */
.lever > p:not(.lever-id) {
  color: var(--text-muted);
  font-size: var(--text-sm);
  line-height: var(--lh-body);
  flex: 1;
}
.lever .chip {
  align-self: flex-start;
}
.lever--rest {
  background: linear-gradient(180deg, rgba(34, 224, 232, 0.07), var(--n-900));
  border-color: var(--border-accent);
}

/* ============================================================================
   3. COSTURA ENTRE BANDAS
   ----------------------------------------------------------------------------
   A cortina (.curtain) e o assentar (.settle/.zoom-settle) sairam desta camada:
   sao efeitos COM ESTADO FINAL e agora vivem no motor de observador, em
   instrument-motion.css. Ver a regra de arquitetura no topo daquele arquivo.
   ========================================================================== */

/* costura entre bandas: uma linha de fósforo que acende na junção */
.seam {
  position: relative;
}
/* Geometria da costura mora aqui; o ACENDER dela e conduzido pelo observador
   em instrument-motion.css. A opacidade nao e declarada neste arquivo de
   proposito: como ele carrega depois, venceria a transicao de la e a linha
   nasceria sempre acesa. */
.seam::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  width: min(760px, 82%);
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  z-index: 2;
}

/* ============================================================================
   4. SCENE — cena fixa que se monta enquanto a página rola
   ----------------------------------------------------------------------------
   A seção fica presa; dentro dela, os passos trocam. É o dispositivo certo
   para "uma coisa em vários estados" — o que um instrumento faz o tempo todo.
   ========================================================================== */

.scene {
  position: relative;
}
.scene-stage {
  position: sticky;
  top: var(--header-h);
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  overflow: hidden;
}
.scene-steps {
  position: relative;
  z-index: 2;
}
.scene-step {
  min-height: 70svh;
  display: flex;
  align-items: center;
}
/* Sem JS todos os passos são legíveis em sequência; com JS o passo ativo
   ganha destaque e os outros recuam. */
html.js .scene-step {
  opacity: 0.28;
  filter: blur(1.5px);
  transition: opacity 0.5s var(--ease-out), filter 0.5s var(--ease-out);
}
html.js .scene-step.is-active {
  opacity: 1;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  html.js .scene-step {
    opacity: 1;
    filter: none;
  }
}

/* ============================================================================
   5. ESCALA E ROTAÇÃO POR SCROLL — para peças de assinatura
   ========================================================================== */


/* texto que se revela palavra a palavra conforme entra */
.read-in > span {
  display: inline;
}

/* faixa lateral que desliza em contramão do scroll (usada em bandas largas) */
@keyframes slideCounter {
  from { transform: translate3d(-6%, 0, 0); }
  to   { transform: translate3d(6%, 0, 0); }
}
@keyframes slideWith {
  from { transform: translate3d(6%, 0, 0); }
  to   { transform: translate3d(-6%, 0, 0); }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    html.has-sda .slide-counter {
      animation: slideCounter linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    html.has-sda .slide-with {
      animation: slideWith linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
  }
}

/* ============================================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .plx-far,
  .plx-mid,
  .plx-near,
  .plx-drift,
  .zoom-settle,
  .curtain,
  .slide-counter,
  .slide-with,
  .graticule-drift::before,
  .read-in > span,
  .seam::before {
    animation: none !important;
  }
  html.rail-pinned .rail {
    height: auto !important;
    overflow: visible;
  }
  html.rail-pinned .rail-viewport {
    position: static;
    height: auto;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block: var(--space-6);
  }
  html.rail-pinned .rail-track {
    transform: none !important;
  }
  .scene-stage {
    position: static;
    min-height: 0;
  }
}