/* Rodapés, abertura (2026-09-29). O Gustavo: "rodapés é a única página que ainda
   não teve um carinho especial, poderíamos pensar em algo dinâmico quando abre".
   Foto de obra da loja em duas versões: a de verdade e uma sem o rodapé (parede
   refeita por ferramentas/rodape_faixa.py + rodape_sem.py, com a fresta entre parede e piso). A cena
   começa sem rodapé e, com a rolagem, ele vai sendo colocado da porta até o canto,
   com um brilho correndo na ponta. No celular a câmera acompanha a colocação.
   Motor: assets/js/cena.js (--rd de 0 a 1); script: rodapes-cena.js.

   Posições em % da foto (1600 x 1200): o rodapé vai de x 22,3% (batente) a 76,5%
   (canto) caindo de y 71,4% para 36,2% no meio da faixa, e segue na parede da
   direita até x 85,3% subindo para y 39,5%. */

.rd-cena { position: relative; height: 320vh; background: #2A2521; }
.rd-stage {
  --rd: 0;
  /* até onde o rodapé já foi colocado, em % da largura da foto */
  --c: calc(21 + 67 * clamp(0, calc((var(--rd) - 0.14) / 0.56), 1));
  --volta: clamp(0, calc((var(--rd) - 0.72) / 0.2), 1);
  --fx: 50;
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
}

/* a foto no tamanho dela cobrindo a tela; tudo o que fica dentro acompanha a imagem */
.rd-foto {
  position: absolute; left: 50%; top: 50%;
  width: max(100%, calc(100svh * 4 / 3)); aspect-ratio: 4 / 3;
  transform: translate(calc(var(--fx) * -1%), -50%) scale(calc(1.1 - 0.1 * var(--rd)));
  transform-origin: calc(var(--fx) * 1%) 58%;
  background: url("../img/obras/rodape-obra-sem.webp") center / 100% 100% no-repeat;
  will-change: transform;
}
.rd-com {
  position: absolute; inset: 0;
  background: url("../img/obras/rodape-obra-com.webp") center / 100% 100% no-repeat;
  clip-path: inset(0 calc(100% - var(--c) * 1%) 0 0);
}
/* o brilho na ponta do rodapé que está entrando */
.rd-brilho {
  position: absolute; width: 4px;
  /* do tamanho da faixa do rodapé naquele ponto (a foto tem perspectiva) */
  height: calc(max(6.49 - (var(--c) - 22.27) * 0.067, 3.1) * 1.7%);
  left: calc(var(--c) * 1%);
  top: calc(max(71.42 - (var(--c) - 22.27) * 0.6504, 36.19 + (var(--c) - 76.46) * 0.3976) * 1%);
  transform: translate(-50%, -50%);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(255, 255, 255, 0) 100%);
  box-shadow: 0 0 22px 8px rgba(255, 238, 205, 0.55);
  opacity: clamp(0, min(calc((var(--rd) - 0.15) * 22), calc((0.7 - var(--rd)) * 22)), 1);
  pointer-events: none;
}

/* o ponto que mostra a fresta (antes) e o rodapé (depois) */
.rd-ponto {
  position: absolute; width: 0; height: 0;
  pointer-events: none;
}
.rd-ponto::before {
  content: ""; position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--yellow); box-shadow: 0 0 0 5px rgba(255, 196, 14, 0.3), 0 2px 10px rgba(0, 0, 0, 0.35);
}
.rd-ponto span {
  position: absolute; left: 16px; bottom: 16px; width: max-content; max-width: 30ch;
  padding: 8px 12px; border-radius: 6px;
  background: rgba(24, 28, 40, 0.86); color: #FFFFFF;
  font-size: 0.86rem; line-height: 1.35;
}
.rd-ponto-antes { left: 34%; top: 66.6%; opacity: clamp(0, calc(1 - (var(--rd) - 0.08) * 10), 1); }
.rd-ponto-depois { left: 34%; top: 63.8%; opacity: clamp(0, calc((var(--rd) - 0.8) * 8), 1); }

/* claridade em cima, para o texto escuro ler bem na parede */
.rd-veu {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(246, 241, 232, 0.72) 0%, rgba(246, 241, 232, 0.35) 30%, rgba(246, 241, 232, 0) 48%),
    linear-gradient(90deg, rgba(246, 241, 232, 0.5) 0%, rgba(246, 241, 232, 0) 42%);
}

.rd-txt {
  position: absolute; left: max(24px, calc((100vw - 1200px) / 2 + 24px)); top: clamp(56px, 11vh, 110px);
  width: min(600px, calc(100% - 48px)); color: var(--navy);
}
.rd-kicker {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: #8A5A00; margin-bottom: 12px;
}
.rd-t1, .rd-t2 h2 {
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  font-size: clamp(2rem, 4.6vw, 3.7rem); line-height: 1.03; color: var(--navy);
}
.rd-troca { position: relative; }
.rd-t1 {
  opacity: clamp(0, calc(1 - (var(--rd) - 0.18) * 7), 1);
  transform: translateY(calc(clamp(0, calc(var(--rd) - 0.18), 1) * -90px));
}
.rd-t2 {
  position: absolute; left: 0; top: 0; width: 100%;
  opacity: clamp(0, calc((var(--rd) - 0.72) * 6), 1);
  transform: translateY(calc((1 - clamp(0, calc((var(--rd) - 0.72) * 6), 1)) * 30px));
  pointer-events: none;
}
.rd-t2 p { margin-top: 14px; font-size: 1.08rem; line-height: 1.6; color: #3A4258; max-width: 48ch; }
.rd-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.rd-btn-claro { background: rgba(255, 255, 255, 0.7); color: var(--navy); border: 1.5px solid rgba(40, 50, 75, 0.45); }
.rd-btn-claro:hover { background: #FFFFFF; border-color: var(--navy); }
.rd-stage.rd-fim .rd-t2 { pointer-events: auto; }

.rd-legenda {
  position: absolute; right: max(20px, calc((100vw - 1200px) / 2 + 24px)); bottom: 26px;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85); background: rgba(24, 20, 16, 0.55); padding: 7px 10px; border-radius: 4px;
  opacity: clamp(0, calc((var(--rd) - 0.75) * 5), 1);
}
.rd-cena .ripa-dica { opacity: clamp(0, calc(1 - var(--rd) * 8), 1); }

@media (max-width: 760px) {
  .rd-cena { height: 280vh; }
  /* a câmera segue a colocação e volta para o meio no fim */
  .rd-stage { --fx: calc(clamp(var(--fxmin, 50), var(--c), var(--fxmax, 50)) * (1 - var(--volta)) + 50 * var(--volta)); }
  .rd-txt { top: 64px; }
  .rd-t1, .rd-t2 h2 { font-size: clamp(1.75rem, 8vw, 2.4rem); }
  .rd-t2 p { font-size: 0.98rem; }
  /* no começo a tela mostra só a ponta da porta; no fim, o meio da parede */
  .rd-ponto-antes { left: 26%; top: 72.1%; }
  .rd-ponto-depois { display: none; }   /* no celular o texto do fim já ocupa a parede */
  .rd-ponto span { max-width: 22ch; font-size: 0.8rem; }
  .rd-ponto-antes span { left: auto; right: 16px; }
  .rd-legenda { display: none; }
}

/* ---------- a cena em 3D (rodapes-3d.js, 2026-10-15) ----------
   Com o 3D ligado, a foto de obra e os textos antigos saem; a cena ganha mais rolagem
   (rodapé, rodameio, guarnição, boiserie e a pintura). */
.rd-cena.c3-ativo { height: 460vh; background: #E9E5DD; }
.rd-cena.c3-ativo .rd-stage { background: #E9E5DD; }
.rd-cena.c3-ativo .rd-foto, .rd-cena.c3-ativo .rd-veu, .rd-cena.c3-ativo .rd-txt,
.rd-cena.c3-ativo .rd-legenda, .rd-cena.c3-ativo .ripa-dica { display: none; }
@media (max-width: 720px) { .rd-cena.c3-ativo { height: 400vh; } }