/* Veja como fica na sua piscina (6.3): piscina 3D em CSS, filtros, fileira de estampas e botão */

.viz__grade { display: grid; gap: 16px; }

/* o desenho da piscina foi feito para uma cena de 351 × 300 px; --u é 1 px desse desenho no tamanho real da cena
   (celular: largura do palco, até 351 por causa dos 300 de altura; desktop: cena quadrada de até 560) */
.viz__palco { position: relative; container-type: inline-size; --u: 1px; }
@supports (width: 1cqw) {
  .viz__palco { --u: calc(min(100cqw, 351px) / 351); }
  @media (min-width: 768px) { .viz__palco { --u: calc(min(100cqw, 560px) / 351); } }
}

.viz__cena {
  position: relative; height: 300px; overflow: hidden;
  border-radius: 22px; background: #e7e1d5;
  perspective: calc(720 * var(--u)); perspective-origin: 50% 28%;
}
.viz__cena::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 95% at 50% 42%, transparent 58%, rgba(0, 30, 60, .16));
}

/* câmera: inclina com o mouse (--rx/--ry vêm do js); piscina: plano do chão deitado a 56° */
.viz__camera {
  position: absolute; left: 50%; top: 57%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .7s var(--ease);
}
.viz__piscina {
  --c: calc(260 * var(--u)); --l: calc(230 * var(--u)); --p: calc(66 * var(--u));
  position: absolute; left: calc(var(--c) / -2); top: calc(var(--l) / -2);
  width: var(--c); height: var(--l);
  transform-style: preserve-3d; transform: rotateX(56deg);
}

/* fundo e 3 paredes: ::before e ::after são duas camadas de textura (a sombra da face vai junto) para trocar em fade */
.viz__face { position: absolute; left: 0; top: 0; overflow: hidden; background: #0b5a8c; }
.viz__face::before, .viz__face::after {
  content: ""; position: absolute; inset: 0;
  background: var(--sombra), var(--textura-a) center / calc(84 * var(--u));
}
/* camada da troca, não é estado de entrada: a textura sempre aparece pela de baixo; com reduzir movimento a troca é instantânea */
.viz__face::after { background-image: var(--sombra), var(--textura-b); opacity: 0; transition: opacity .45s ease; }
.viz__piscina--b .viz__face::after { opacity: 1; }

.viz__fundo {
  --sombra: linear-gradient(180deg, rgba(0, 30, 70, .42), rgba(0, 30, 70, .04) 78%);
  width: var(--c); height: var(--l); transform: translateZ(calc(-1 * var(--p)));
}
.viz__parede-tras {
  --sombra: linear-gradient(180deg, rgba(0, 0, 0, .4), rgba(0, 25, 60, .16) 16%, rgba(0, 25, 60, .4));
  width: var(--c); height: var(--p); transform-origin: 50% 0; transform: rotateX(-90deg);
}
.viz__parede-esq {
  --sombra: linear-gradient(90deg, rgba(0, 0, 0, .45), rgba(0, 25, 60, .32) 16%, rgba(0, 25, 60, .55));
  width: var(--p); height: var(--l); transform-origin: 0 50%; transform: rotateY(90deg);
}
.viz__parede-dir {
  --sombra: linear-gradient(270deg, rgba(0, 0, 0, .45), rgba(0, 25, 60, .32) 16%, rgba(0, 25, 60, .55));
  left: auto; right: 0; width: var(--p); height: var(--l); transform-origin: 100% 50%; transform: rotateY(-90deg);
}

/* luz no fundo: o ruído é uma imagem parada (o feTurbulence é desenhado uma vez); só a camada anda, com transform */
.viz__caustica {
  position: absolute; inset: -220px; z-index: 1; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.022' numOctaves='1' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1 0 0 0 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 0 0 0 0 0 0 0 .35 1 .35 0 0 0 0 0 0 0 0 0 0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E") 0 0 / 220px;
  opacity: .34;
}
.viz__caustica + .viz__caustica { background-size: 170px; opacity: .24; }

/* água translúcida um pouco abaixo da borda, com um reflexo */
.viz__agua {
  position: absolute; inset: 0; overflow: hidden;
  transform: translateZ(calc(-9 * var(--u)));
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(2, 210, 248, .2) 38%, rgba(36, 227, 198, .18));
}
.viz__agua::before {
  content: ""; position: absolute; inset: -40% -60%;
  background:
    linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .2) 49%, transparent 56%),
    linear-gradient(115deg, transparent 62%, rgba(255, 255, 255, .12) 66%, transparent 70%);
}

/* piso em volta, com um furo do tamanho da piscina, e a borda (::after) */
.viz__deck {
  --t: calc(52 * var(--u));
  position: absolute; left: calc(-330 * var(--u)); top: calc(-340 * var(--u));
  width: calc(900 * var(--u)); height: calc(900 * var(--u));
  background:
    radial-gradient(closest-side at 50% 48%, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)),
    linear-gradient(90deg, rgba(110, 90, 60, .16) 1.5px, transparent 1.5px) calc(316 * var(--u)) calc(326 * var(--u)) / var(--t) var(--t),
    linear-gradient(rgba(110, 90, 60, .16) 1.5px, transparent 1.5px) calc(316 * var(--u)) calc(326 * var(--u)) / var(--t) var(--t),
    #e9e3d7;
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, 36.67% 37.78%, 36.67% 63.33%, 65.56% 63.33%, 65.56% 37.78%, 36.67% 37.78%);
}
.viz__deck::after {
  content: ""; position: absolute;
  left: calc(316 * var(--u)); top: calc(326 * var(--u)); width: calc(288 * var(--u)); height: calc(258 * var(--u));
  border: calc(14 * var(--u)) solid #f8f6f1; border-radius: calc(8 * var(--u));
  box-shadow: 0 5px 12px rgba(80, 60, 30, .2);
}

.viz__legenda {
  position: absolute; left: 12px; top: 12px;
  padding: 7px 12px 8px; border-radius: 14px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 14px rgba(0, 30, 70, .14);
}
.viz__rotulo { display: block; color: var(--texto-suave); font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
/* o nome novo sobe de baixo e o velho (cópia criada pelo js) sai por cima, dentro desta caixa */
.viz__nome-caixa { position: relative; overflow: hidden; }
.viz__nome, .viz__nome-velho { color: var(--marinho); font-size: 1.0625rem; font-weight: 800; line-height: 1.25; white-space: nowrap; }
.viz__nome-velho { position: absolute; left: 0; top: 0; }

.viz__filtros {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 4px; border-radius: var(--raio);
  background: var(--fundo-claro);
}
/* indicador que desliza até o filtro escolhido (--i vem do js) */
.viz__filtros::before {
  content: ""; position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 8px) / 4);
  border-radius: 10px; background: var(--marinho);
  box-shadow: 0 4px 10px rgba(0, 48, 107, .25);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform .38s var(--ease);
}
.viz__filtros button {
  position: relative;
  min-height: 44px; border: 0; border-radius: 10px;
  background: transparent; color: var(--marinho);
  font-size: .9375rem; font-weight: 600;
  transition: transform .15s var(--ease);
}
.viz__filtros button[aria-pressed="true"] { color: var(--branco); }

.viz__lista {
  position: relative;
  display: flex; gap: 4px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--margem)); padding: 6px var(--margem);
  scroll-padding-inline: var(--margem);
  scrollbar-width: none;
}
.viz__lista::-webkit-scrollbar { display: none; }
.viz__lista:empty { display: none; }
.viz__lista li { flex: none; scroll-snap-align: start; }
.viz__lista button {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 82px; margin-inline: auto; padding: 6px 2px 4px;
  border: 0; border-radius: var(--raio); background: none;
  color: var(--texto-suave); font-size: .75rem; line-height: 1.2; text-align: center;
  transition: transform .15s var(--ease);
}
.viz__lista button:active { transform: scale(.97); }
.viz__lista button[aria-pressed="true"] { color: var(--marinho); font-weight: 800; }
.viz__amostra {
  position: relative; width: 58px; height: 58px; border-radius: 50%;
  box-shadow: 0 3px 8px rgba(0, 48, 107, .18);
  transition: transform .2s var(--ease);
}
.viz__amostra img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
[aria-pressed="true"] > .viz__amostra { transform: scale(1.04); }
[aria-pressed="true"] > .viz__amostra::after {
  content: ""; position: absolute; inset: -5px;
  border: 2.5px solid var(--marinho); border-radius: 50%;
}

.viz__aviso { color: var(--texto-suave); font-size: .8125rem; text-align: center; }

/* movimento: loops e estados escondidos só existem aqui; com "reduzir movimento" tudo fica parado */
@media (prefers-reduced-motion: no-preference) {
  .viz__piscina { animation: viz-deriva 18s ease-in-out infinite alternate; }
  .viz__caustica { animation: viz-caustica-a 17s linear infinite; }
  .viz__caustica + .viz__caustica { animation: viz-caustica-b 12s linear infinite; }
  .viz__agua::before { animation: viz-reflexo 9s ease-in-out infinite alternate; }

  /* fora da tela, os loops param (classe posta por js/visualizador.js) */
  .viz--pausada .viz__piscina,
  .viz--pausada .viz__caustica,
  .viz--pausada .viz__agua::before { animation-play-state: paused; }

  /* ondinha do toque, animada pelo js */
  .viz__onda {
    position: absolute; inset: 0; margin: auto;
    width: calc(150 * var(--u)); height: calc(150 * var(--u));
    border: 2px solid rgba(255, 255, 255, .9); border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 255, 255, .45), inset 0 0 10px rgba(255, 255, 255, .35);
    opacity: 0;
  }

  [aria-pressed="true"] > .viz__amostra::after { animation: viz-anel .3s var(--ease); }

  @keyframes viz-deriva {
    from { transform: rotateX(56deg) rotateZ(-4deg); }
    to { transform: rotateX(56deg) rotateZ(4deg); }
  }
  @keyframes viz-caustica-a { to { transform: translate(220px, 220px); } }
  @keyframes viz-caustica-b { to { transform: translate(-170px, 170px); } }
  @keyframes viz-reflexo {
    from { transform: translateX(-16%); }
    to { transform: translateX(16%); }
  }
  @keyframes viz-anel { from { opacity: 0; transform: scale(.8); } }
}

@media (min-width: 768px) {
  .viz__grade {
    grid-template-columns: 1.15fr 1fr;
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas: "palco cab" "palco filtros" "palco lista" "palco cta" "palco aviso";
    column-gap: 48px; row-gap: 20px;
  }
  .viz__cab { grid-area: cab; }
  .viz__palco { grid-area: palco; align-self: start; }
  .viz__cena { height: auto; aspect-ratio: 1; max-height: 560px; }
  .viz__filtros { grid-area: filtros; }
  .viz__lista {
    grid-area: lista;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    max-height: 320px; overflow: hidden auto;
    margin: 0; padding: 6px;
    scroll-snap-type: none;
  }
  .viz__cta { grid-area: cta; }
  .viz__aviso { grid-area: aviso; text-align: left; }
}