/* Painel ripado, abertura nova (2026-09-28). Pedido do Gustavo: "mais convidativo,
   mais dinâmico, que abrace melhor a tela e, principalmente, que pareça mais real".
   A sala desenhada em CSS saiu: a cena agora é uma foto de obra da loja. Começa bem
   perto das ripas, com uma faixa de luz quente passando de lado (o relevo aparece),
   e a câmera se afasta até a parede inteira. Depois, uma faixa de obras reais que
   corre de lado com a rolagem. Motor: assets/js/cena.js; script: ripado-cena.js. */

.rp-cena { position: relative; height: 360vh; background: #0E0C0A; }
.rp-stage {
  --rp: 0;
  --zoom: clamp(0, calc((var(--rp) - 0.12) / 0.6), 1);
  --varre: clamp(0, calc(var(--rp) / 0.42), 1);
  /* o quanto a câmera começa perto: a foto da obra tem 1200 px de largura, então no
     computador passar de ~1,8x já borra; no celular (foto em pé) dá para ir mais perto */
  --z0: 1.8;
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
}
.rp-camera {
  position: absolute; inset: 0;
  transform-origin: 54% 50%;
  transform: scale(calc(var(--z0) - (var(--z0) - 1) * var(--zoom)));
  will-change: transform;
}
/* a foto no tamanho dela, cobrindo a tela: o que fica dentro dela acompanha a imagem */
.rp-foto {
  position: absolute; left: 50%; top: 56%;
  width: max(100%, calc(100svh * 0.75)); aspect-ratio: 3 / 4;
  transform: translate(-50%, -56%);
  background: url("../img/obras/ripado-parede-pendente.webp") center / 100% 100% no-repeat;
}
/* mais escura no começo: camada por cima em vez de filter (o Firefox redesenhava a
   foto inteira a cada quadro com o filtro animado) */
.rp-foto::after {
  content: ""; position: absolute; inset: 0; background: #0E0C0A;
  opacity: calc(0.38 * (1 - var(--zoom)));
}
/* a luz que passa de lado pelas ripas: realça o relevo de verdade da foto */
.rp-luz {
  position: absolute; inset: -10% -40%;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 214, 160, 0.14) 48%, rgba(255, 236, 200, 0.22) 50%, rgba(255, 214, 160, 0.14) 52%, transparent 60%);
  transform: translateX(calc(-55% + 110% * var(--varre)));
  opacity: calc(1 - var(--zoom));
  pointer-events: none;
}
.rp-veu {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12, 10, 8, 0.78) 0%, rgba(12, 10, 8, 0.5) 38%, rgba(12, 10, 8, 0) 66%),
    linear-gradient(0deg, rgba(12, 10, 8, 0.55) 0%, rgba(12, 10, 8, 0) 32%);
}
.rp-txt {
  position: absolute; left: max(24px, calc((100vw - 1200px) / 2 + 24px)); top: 50%;
  transform: translateY(-50%); width: min(560px, calc(100% - 48px)); color: #FFFFFF;
}
.rp-kicker {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--yellow); margin-bottom: 14px;
  opacity: clamp(0, calc(1 - (var(--rp) - 0.3) * 4), 1);
}
.rp-t1, .rp-t2 h2 {
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  font-size: clamp(2.2rem, 5.2vw, 4.2rem); line-height: 1.02; color: #FFFFFF;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}
.rp-t1 {
  opacity: clamp(0, calc(1 - (var(--rp) - 0.32) * 5), 1);
  transform: translateY(calc(clamp(0, calc(var(--rp) - 0.32), 1) * -120px));
}
.rp-t2 {
  position: absolute; left: 0; top: 50%; width: 100%;
  transform: translateY(calc(-50% + (1 - clamp(0, calc((var(--rp) - 0.6) * 5), 1)) * 40px));
  opacity: clamp(0, calc((var(--rp) - 0.6) * 5), 1);
}
.rp-t2 p { margin-top: 16px; font-size: 1.1rem; line-height: 1.6; color: #EDE6DC; max-width: 46ch; }
.rp-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.rp-btn-claro { background: transparent; color: #FFFFFF; border: 1.5px solid rgba(255, 255, 255, 0.6); }
.rp-btn-claro:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, 0.08); }
.rp-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.8); background: rgba(12, 10, 8, 0.5); padding: 7px 10px; border-radius: 4px;
  opacity: clamp(0, calc((var(--rp) - 0.7) * 5), 1);
}
.rp-cena .ripa-dica { opacity: clamp(0, calc(1 - var(--rp) * 8), 1); }

/* obras reais correndo de lado */
.rp-obras { position: relative; height: 300vh; background: #14110E; color: #FFFFFF; }
.rp-obras-stage {
  --gx: 0; --gx-max: 0;
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
  padding-top: 96px; box-sizing: border-box; /* o cabeçalho volta nesta parte */
}
.rp-obras-cabeca .section-eyebrow { color: var(--yellow); opacity: 1; }
.rp-obras-cabeca h2 {
  font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  font-size: clamp(1.9rem, 4vw, 3rem); color: #FFFFFF; margin-top: 6px;
}
.rp-obras-cabeca p { color: #CFC6B8; margin-top: 8px; max-width: 52ch; }
.rp-trilho {
  display: flex; gap: 20px; padding: 0 max(24px, calc((100vw - 1200px) / 2 + 24px));
  transform: translateX(calc(var(--gx) * var(--gx-max) * -1px)); will-change: transform;
}
.rp-obra { position: relative; flex: none; height: min(58vh, 560px); margin: 0; border-radius: 10px; overflow: hidden; }
.rp-obra img { height: 100%; width: auto; display: block; }
.rp-obra figcaption {
  position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 4px;
  background: rgba(12, 10, 8, 0.62); font-size: 0.84rem; color: #FFFFFF;
}

@media (max-aspect-ratio: 1/1) {
  .rp-stage { --z0: 2.6; }
}
@media (max-width: 760px) {
  .rp-cena { height: 300vh; }
  .rp-camera { transform-origin: 50% 46%; }
  .rp-veu { background: linear-gradient(0deg, rgba(12, 10, 8, 0.85) 0%, rgba(12, 10, 8, 0.45) 45%, rgba(12, 10, 8, 0.1) 75%); }
  .rp-txt { top: auto; bottom: 104px; transform: none; }
  .rp-t2 { top: auto; bottom: 0; transform: translateY(calc((1 - clamp(0, calc((var(--rp) - 0.6) * 5), 1)) * 30px)); }
  .rp-t1, .rp-t2 h2 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }
  .rp-t2 p { font-size: 1rem; }
  .rp-legenda { display: none; }
  .rp-obras { height: auto; padding: 64px 0; }
  .rp-obras-stage { position: static; height: auto; }
  .rp-trilho { transform: none; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .rp-obra { height: 62vh; scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .rp-cena { height: 100vh; }
  .rp-obras { height: auto; padding: 64px 0; }
  .rp-obras-stage { position: static; height: auto; }
  .rp-trilho { transform: none; overflow-x: auto; }
}

/* ---------- a cena em 3D (ripado-3d.js, 2026-10-15) ----------
   Com o 3D ligado, a foto de obra e os textos antigos saem; a cena ganha mais rolagem. */
.rp-cena.c3-ativo { height: 440vh; background: #1A1714; }
.rp-cena.c3-ativo .rp-stage { background: #1A1714; }
.rp-cena.c3-ativo .rp-camera, .rp-cena.c3-ativo .rp-veu, .rp-cena.c3-ativo .rp-txt,
.rp-cena.c3-ativo .rp-legenda, .rp-cena.c3-ativo .ripa-dica { display: none; }
@media (max-width: 720px) { .rp-cena.c3-ativo { height: 380vh; } }

/* ---------- cena realista (ripado-real.js, 16/10/2026) ----------
   Foto real de ambiente: a parede lisa recebe as ripas e troca de cor. O 3D (c3-ativo) e a
   foto antiga ficam de reserva: sem a classe "rp-real" na seção, voltam. */
.rp-cena.rr-ativo { background: #14110E; }
.rp-cena.rr-ativo .rp-stage { background: #14110E; }
.rp-cena.rr-ativo .rp-camera, .rp-cena.rr-ativo .rp-veu, .rp-cena.rr-ativo .rp-txt,
.rp-cena.rr-ativo .rp-legenda, .rp-cena.rr-ativo .ripa-dica { display: none; }
.rr-tela { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rr-legenda {
  position: absolute; left: clamp(20px, 6vw, 96px); bottom: clamp(26px, 6vh, 60px); z-index: 5;
  max-width: 620px; color: #fff;
}
.rr-k { margin: 0 0 6px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: #F5C518; }
.rr-t { margin: 0; font-size: clamp(1.8rem, 3.8vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; text-shadow: 0 2px 18px rgba(0,0,0,0.35); }
.rr-s { margin: 8px 0 0; font-size: clamp(0.98rem, 1.4vw, 1.12rem); color: rgba(255,255,255,0.88); }
.rr-s:empty { display: none; }
.rr-entra > p { animation: hf-texto 0.6s ease both; }
.rr-cores { display: none; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.rr-fim .rr-cores { display: flex; }
.rr-cor {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.35); background: rgba(14,12,10,0.55); color: #fff;
  font: inherit; font-size: 0.86rem; font-weight: 700; cursor: pointer; backdrop-filter: blur(4px);
}
.rr-cor i { width: 26px; height: 26px; border-radius: 5px; background-size: 900% auto; background-position: 47% 14%; flex: none; }
.rr-cor[aria-pressed="true"] { border-color: #F5C518; box-shadow: inset 0 0 0 1px #F5C518; }
.rr-nota { display: none; margin: 10px 0 0; font-size: 0.74rem; color: rgba(255,255,255,0.6); }
.rr-fim .rr-nota { display: block; }
@media (max-width: 720px) {
  .rr-legenda { left: 16px; right: 16px; bottom: 74px; }
  .rr-cor { padding: 4px 9px 4px 4px; font-size: 0.78rem; }
  .rr-cor i { width: 22px; height: 22px; }
}