/* ============================================================
   Profundidade em camadas na secao "Comecou aqui" (PREVIEW)
   Receita: 00_Resources/playbooks/layered-depth-playbook.md
   Dois planos, entregues ja separados pelo Jordan (07/09/2026):
     back  = a arte de fundo inteira (parede, grafite, lettering, quadra)
     front = as tres figuras recortadas, com alfa
   Nada e reconstruido: o que aparece atras das figuras quando elas se movem
   e o desenho de verdade, e nao um remendo.
   ============================================================ */

.rails__pic--depth{
  position:relative;
  /* a mascara sai das imagens e sobe pro container: com tres planos, repetir
     o gradiente em cada um deixaria a base com tres dissolvencias somadas */
  -webkit-mask-image:linear-gradient(to bottom, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 62%, rgba(0,0,0,.55) 84%, transparent 100%);
}

.rails__pic--depth .rails__pl{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center top;
  display:block;
  -webkit-mask-image:none; mask-image:none;
  will-change:transform;
  transform:translate3d(0,0,0);
}

/* SO o plano de tras precisa de folga, e ela e pequena porque ele e o que
   menos se move. Os planos do meio e da frente sao recortes com alfa: quando
   se movem, quem aparece atras deles e o proprio fundo, nunca um vazio.
   A folga entra por scale, e NAO aumentando a altura da caixa: mexer na altura
   faz o object-fit:cover recalcular o recorte e desloca o enquadramento que ja
   estava calibrado (medido lado a lado com o original em 07/09/2026). */
.rails__pic--depth .rails__pl--back{ transform-origin:center center; scale:1.12 }
/* 10/09/2026: o Jordan pediu mais movimento. O plano de tras foi de k=0.030
   pra 0.042, e ele SO DESCE, entao precisa de imagem sobrando ACIMA do
   container em pelo menos 4,2% da altura. Com scale 1.07 sobrava 3,5% por
   lado e abriria costura no topo. 1.12 deixa 6% de folga, com margem. */

.rails__pic--depth .rails__pl--back { z-index:0 }
.rails__pic--depth .rails__pl--front{ z-index:2 }

/* Mobile: o movimento CONTINUA ligado (decisao do Jordan, 07/09/2026, contra o
   default da website-design de desligar parallax em <=720px). O que muda aqui e
   so o enquadramento, que o style.css ja calibrava pra tela estreita: sem esta
   regra, o object-position dos planos sobrescreve o do original e a arte entra
   cortada noutro ponto. A amplitude nao precisa de ajuste porque o JS calcula o
   deslocamento em cima da ALTURA da propria secao, que ja e menor no celular. */
@media(max-width:700px){
  .rails__pic--depth .rails__pl{ object-position:47% 28% }
}

/* Quem pediu menos movimento recebe a composicao parada, nunca a imagem quebrada.
   Isto vale em qualquer largura: e acessibilidade, nao preferencia de tela. */
@media(prefers-reduced-motion:reduce){
  .rails__pic--depth .rails__pl{
    transform:none !important;
    scale:1 !important;
    transition:none !important;
  }
}

/* Sem JS a secao continua inteira: os tres planos empilhados em repouso
   remontam exatamente a arte original. */