/* Vitrine com scanner (home, "Explore os modelos"): faixa 3D curva de modelos que passa por um feixe de luz.
   Antes do feixe o modelo aparece em matriz de pontos (desenho técnico, gerado do próprio recorte pelo
   scan-carousel.js); depois, na foto real. Ideia visual inspirada no bloco "hero-7" do React Bits Pro, código próprio.
   Sem JS (.scan sem .is-on): lista horizontal rolável, sem feixe. Com movimento reduzido, a faixa fica parada. */
.fh-scan { overflow: hidden; }
.scan { --scan-w: 300px; --scan-top: 22px; position: relative; height: calc(var(--scan-w) * .75 + 110px);
  perspective: 1300px; perspective-origin: 50% 40%; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.scan.is-on { cursor: grab; }
.scan.is-drag { cursor: grabbing; }
.scan-track { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; transform-style: preserve-3d; }
.scan-item { position: absolute; top: var(--scan-top); left: 0; width: var(--scan-w); transform-style: preserve-3d; will-change: transform; }
.scan-card { display: block; color: inherit; text-decoration: none; border-radius: 16px; -webkit-user-drag: none; }
.scan-card img { -webkit-user-drag: none; }
.scan-media { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 18%, rgba(36, 182, 205, .14), transparent 62%), linear-gradient(165deg, #10304d, #071524 78%);
  box-shadow: 0 0 0 1px rgba(143, 227, 240, .14), 0 26px 52px -30px rgba(0, 0, 0, .95);
  transition: box-shadow .35s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
.scan-img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: 8%; }
/* foto de estúdio (fundo branco): o branco fica só do lado já escaneado */
.scan-card.is-photo .scan-img { padding: 4%; background: #fff; }
.scan-dots { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%;
  background-image: linear-gradient(rgba(143, 227, 240, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 227, 240, .07) 1px, transparent 1px);
  background-size: 18px 18px; }
.scan-cap { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; padding: 0 4px; }
.scan-cap strong { font: 600 15px/1.25 var(--f-head); color: #f3f8fc; letter-spacing: -.01em; }
.scan-cap small { font: 500 12px/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: #93abbf; }
.scan-card:hover .scan-media, .scan-card:focus-visible .scan-media {
  transform: translateY(-6px) scale(1.035);
  box-shadow: 0 0 0 1px rgba(143, 227, 240, .55), 0 0 38px -6px rgba(36, 182, 205, .6), 0 30px 56px -30px rgba(0, 0, 0, .95); }
.scan-card:hover .scan-cap strong { color: #8fe3f0; }
.scan-card:focus-visible { outline: 2px solid #6fe0f0; outline-offset: 6px; }

/* controles da vitrine (anterior, próximo, pausa) ao lado da frase do cabeçalho; só aparecem com a faixa montada pelo JS
   (.scan.is-on). Mesmo desenho do botão redondo dos cartões de categoria (.fh-cat-go). */
.scan-side { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.scan-side p { margin: 0; }
.scan-ctrl { display: none; gap: 8px; }
.fh-scan:has(.scan.is-on) .scan-ctrl { display: flex; }
.scan-btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; border: 1px solid rgba(143, 227, 240, .3);
  background: rgba(8, 24, 40, .7); color: #fff; cursor: pointer; transition: background-color .2s, border-color .2s, box-shadow .2s; }
.scan-btn .ic, .scan-btn svg { width: 18px; height: 18px; }
.scan-btn--pause svg { fill: currentColor; }
.scan-btn:hover { background: #1565a8; border-color: #24b6cd; box-shadow: 0 6px 18px -6px rgba(36, 182, 205, .8); }
.scan-btn[aria-pressed="true"] { border-color: #c9a65e; color: #e7d3a4; }
.scan-btn:focus-visible { outline: 2px solid #6fe0f0; outline-offset: 2px; }
@media (pointer: coarse), (max-width: 1024px) { .scan-btn { width: 44px; height: 44px; } }

/* feixe e faíscas */
.scan-beam { position: absolute; left: 50%; top: calc(var(--scan-top) - 26px); width: 180px; margin-left: -90px;
  height: calc(var(--scan-w) * .75 + 52px); pointer-events: none; z-index: 5; }
.scan:not(.is-on) .scan-beam { display: none; }
.scan-beam-core { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgba(143, 227, 240, .95) 14%, #fff 50%, rgba(143, 227, 240, .95) 86%, transparent);
  box-shadow: 0 0 10px 2px rgba(111, 224, 240, .9), 0 0 34px 8px rgba(36, 182, 205, .45), 0 0 90px 24px rgba(36, 182, 205, .16);
  animation: scan-pulse 2.6s ease-in-out infinite; }
.scan.is-hover .scan-beam-core { box-shadow: 0 0 12px 3px rgba(143, 227, 240, 1), 0 0 44px 12px rgba(36, 182, 205, .55), 0 0 110px 30px rgba(36, 182, 205, .2); }
@keyframes scan-pulse { 50% { opacity: .8; } }
.scan-sparks { position: absolute; inset: 0; width: 100%; height: 100%; }

/* sem JS: lista rolável */
.scan:not(.is-on) { height: auto; perspective: none; -webkit-mask-image: none; mask-image: none; }
.scan:not(.is-on) .scan-track { position: static; display: flex; gap: 20px; overflow-x: auto; padding: 10px max(18px, calc(50% - 600px)) 24px;
  scroll-snap-type: x mandatory; scrollbar-width: thin; }
.scan:not(.is-on) .scan-item { position: static; flex: 0 0 var(--scan-w); scroll-snap-align: center; will-change: auto; }

html:is(.fx-tab-hidden, .fx-paused) .scan-beam-core { animation-play-state: paused; }
@media (max-width: 720px) { .scan { --scan-w: 220px; --scan-top: 16px; } .scan-cap strong { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) {
  .scan-beam-core { animation: none; }
  .scan-media, .scan-card:hover .scan-media { transition: none; transform: none; }
}
@media print { .scan-beam { display: none; } }