/* ══ 03/11 · NOSSOS TRABALHOS NO CELULAR (goal do dono: "a experiência do
   mobile tem que ser tão perfeita quanto a do desktop"). no desktop o poço
   3D mostra um trabalho por vez, numa placa de monitor, com o nome embaixo
   e os vizinhos espiando girados. no celular o grid de 2 colunas tocava
   cinco filmes juntos e tinha cara de plano B. aqui o MESMO grid vira um
   carrossel de arrastar com a mesma gramática: o monitor do centro toca,
   os vizinhos giram pro lado e apagam (a fila continua), e o nome com o
   traço na cor do trabalho fica embaixo. a classe .is-carousel só entra
   pelo trabalhos-celular.js; sem JS fica o grid de antes. ══ */
@media (max-width: 760px) {
  .cast .uni-grid.is-carousel {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 3vw;
    width: 100vw;
    max-width: none;
    /* o respiro em cima e embaixo é do brilho e da sombra do monitor:
       com overflow-y hidden, padding curto cortava os dois numa linha reta */
    margin: calc(clamp(1.2rem, 3.5vh, 2rem) - 30px) calc(50% - 50vw) -14px;
    padding: 40px 15vw 34px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    perspective: none;
  }
  .cast .uni-grid.is-carousel::-webkit-scrollbar { display: none; }

  /* o card deixa de ser placa de vidro: quem vira peça é o monitor */
  .cosmos .uni-grid.is-carousel > .uni-card {
    flex: 0 0 70vw;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: calc(1 - var(--cax, 0) * .55);
    /* o vizinho gira pro centro, encolhe e chega 9vw pra dentro: é o
       pedaço dele na borda que diz que a fila continua */
    transform: translateX(calc(var(--cx, 0) * -9vw)) perspective(900px) rotateY(calc(var(--cx, 0) * -24deg)) scale(calc(1 - var(--cax, 0) * .13));
    transform-origin: 50% 40%;
    transition: none;
    will-change: transform, opacity;
  }
  .cosmos .uni-grid.is-carousel > .uni-card::before { display: none; }
  .cosmos .uni-grid.is-carousel > .uni-card:hover { transform: translateX(calc(var(--cx, 0) * -9vw)) perspective(900px) rotateY(calc(var(--cx, 0) * -24deg)) scale(calc(1 - var(--cax, 0) * .13)); box-shadow: none; }

  /* o monitor: aro de grafite com fio polido, tela afundada */
  .cosmos .uni-grid.is-carousel .uni-fig {
    aspect-ratio: 4 / 5;
    padding: 7px;
    border-radius: 22px;
    background: linear-gradient(158deg, #4b505b 0%, #1d2026 16%, #121318 52%, #1a1c22 84%, #3d414b 100%);
    box-shadow:
      inset 1.5px 1.5px 0 rgba(255,255,255,.34),
      inset -1.2px -1.2px 0 rgba(0,0,0,.75),
      inset 0 0 0 1px rgba(255,255,255,.06),
      0 26px 54px rgba(0,0,0,.62);
    transition: box-shadow .5s ease;
  }
  .cosmos .uni-grid.is-carousel .uni-card.is-on .uni-fig {
    box-shadow:
      inset 1.5px 1.5px 0 rgba(255,255,255,.34),
      inset -1.2px -1.2px 0 rgba(0,0,0,.75),
      inset 0 0 0 1px rgba(255,255,255,.06),
      0 26px 54px rgba(0,0,0,.62),
      0 0 34px -12px var(--mat, var(--laser));
  }
  .cosmos .uni-grid.is-carousel .uni-fig :is(img, video) {
    border-radius: 15px;
    object-position: 50% 40%;
    background: #05060e;
  }
  .cosmos .uni-grid.is-carousel .uni-feat .uni-fig :is(img, video) { object-position: 46% 38%; }
  .cosmos .uni-grid.is-carousel .uni-fig::before { inset: 7px; border-radius: 15px; }
  .cosmos .uni-grid.is-carousel .uni-fig::after {
    content: "";
    position: absolute;
    inset: 7px;
    z-index: 2;
    border-radius: 15px;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.85), inset 0 0 22px rgba(0,0,0,.5);
  }
  .cosmos .uni-grid.is-carousel .uni-flag { top: 20px; left: 18px; }

  /* o nome embaixo, como o HUD do poço */
  /* o nome é só do monitor do centro: o do vizinho some antes de espiar */
  .cosmos .uni-grid.is-carousel .uni-info { margin-top: 1.05rem; padding: 0; text-align: center; opacity: calc(1 - var(--cax, 0) * 1.8); }
  .cosmos .uni-grid.is-carousel .uni-info h3 { display: block; font-size: 1.6rem; line-height: 1.05; }
  .cosmos .uni-grid.is-carousel .uni-info h3::after {
    content: "";
    display: block;
    width: 52px; height: 3px;
    margin: .55rem auto 0;
    border-radius: 2px;
    background: var(--mat, var(--laser));
    box-shadow: 0 0 12px var(--mat, var(--laser));
  }
  .cosmos .uni-grid.is-carousel .uni-mat,
  .cosmos .uni-grid.is-carousel .uni-desc { display: none; }
  .cosmos .uni-grid.is-carousel .uni-tags { margin-top: .5rem; font-size: .7rem; }

  /* a sua marca: o monitor que ainda está vazio */
  .cosmos .uni-grid.is-carousel > .uni-ghost {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    gap: .7rem;
    padding: 1.4rem 1rem;
    border-radius: 22px;
    border: 1.5px dashed rgba(240,240,240,.32);
    background: rgba(255,255,255,.02);
  }
  .cosmos .uni-grid.is-carousel > .uni-ghost .uni-q { font-size: 3.4rem; }
  .cosmos .uni-grid.is-carousel > .uni-ghost h3 { font-size: 1.6rem; }

  /* os pontinhos: onde você está na fila, e atalho pra pular */
  .uni-dots { display: flex; justify-content: center; margin-top: .4rem; }
  .uni-dots button {
    position: relative;
    width: 40px; height: 40px;
    padding: 0; border: 0; background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .uni-dots button::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: 12px; height: 3px;
    border-radius: 2px;
    background: rgba(240,240,240,.28);
    transform: translate(-50%, -50%);
    transition: width .3s ease, background-color .3s ease, box-shadow .3s ease;
  }
  .uni-dots button[aria-current="true"]::before {
    width: 26px;
    background: var(--mat, var(--laser));
    box-shadow: 0 0 10px var(--mat, var(--laser));
  }
  .uni-dots button:focus-visible { outline: 2px solid var(--laser); outline-offset: -6px; border-radius: 8px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .cosmos .uni-grid.is-carousel > .uni-card,
  .cosmos .uni-grid.is-carousel > .uni-card:hover { transform: none; opacity: 1; }
}