/* ══ Carousel ═══════════════════════════════════════════════
   A row of cards that drift at rest, give under the pointer,
   and can be thrown. Three motions on three nested elements,
   one transform each — see the note in carousel.js for why
   they cannot share a node.

   ── OS TOKENS DO BENCHO, MAPEADOS (22/09/2026) ─────────────
   A folha original lê cinco propriedades que não define:
   --bg, --font-ui, --ink-rgb, --lift e --sway (e o JS lê uma
   sexta, --shadow-rgb, na sombra do card). Nenhuma delas
   existe neste projeto: o site público declara --primary e
   --secondary em public/index.php e nada mais.

   As quatro que são cor/fonte ficam AQUI, no próprio .car, e
   não em :root — o site é multi-tenant e cada pousada pinta o
   seu --primary; um token global novo seria uma variável que
   toda pousada carrega para uma seção que talvez não use.
   Declaradas no bloco, morrem no bloco.

   --lift e --sway não entram aqui de propósito: são a
   amplitude da flutuação, escritas por card pelo JS (o knob
   Float), e os @keyframes já trazem o valor de reserva para o
   caso de o JS não chegar.
   ══════════════════════════════════════════════════════════ */
/* ── o palco, antes de o anel nascer ───────────────────────
   O anel só é montado quando a seção chega à vista, então até
   lá este bloco tem altura zero e a página daria um pulo de
   340px no meio da rolagem. A altura é reservada aqui, e é a
   mesma STAGE_H do carousel.js — os dois números andam juntos,
   e é por isso que este comentário existe. */
.car-palco {
  display: flex;
  justify-content: center;
  min-height: 340px;
}

.car {
  position: relative;
  /* ── o anel não empilha contra a página (22/09/2026) ──────
     `write()` dá a cada slot um z-index de 0 a 100 à mão, porque
     tudo aqui é 2D e nada se ordena sozinho. Esses números são
     de uso INTERNO -- dizem qual card está na frente de qual --
     mas sem um contexto de empilhamento próprio eles disputam
     com o resto do documento, e 100 ganha do lightbox da foto
     ampliada, que é z-index 60: abrir uma foto deixava a roleta
     por cima dela.

     `z-index: 0` sobre o `position: relative` que já estava aqui
     é o que fecha os 0..100 dentro deste bloco. O anel inteiro
     passa a valer 0 para a página, a ordem interna dos cards
     continua exatamente a mesma, e nenhum número do componente
     muda. (No celular isso já acontecia por acidente: o
     `transform: scale` do fim desta folha cria o mesmo contexto.
     Bug de desktop, correção para os dois.) */
  z-index: 0;
  /* a fonte de UI do projeto: o site não declara família
     própria, herda a base do /assets/tailwind.css. `inherit`
     é o mapeamento honesto — o carrossel escreve texto nenhum
     hoje, e no dia em que escrever sairá na letra do site em
     vez de numa segunda escolha tipográfica. */
  --font-ui: inherit;
  /* o chão atrás do anel de foco: a seção "Nossas Fotos" é
     `bg-white`, e é contra ele que os 2px de dentro do foco
     precisam contrastar */
  --bg: #fff;
  /* a tinta do site — gray-800 do Tailwind (#1F2937), a cor de
     texto que o site usa nos parágrafos. Três números crus,
     com vírgula: a folha monta rgba() em cima. */
  --ink-rgb: 31, 41, 55;
  /* a sombra sob o card. Mesma tinta: sombra preta pura sobre
     branco lê como recorte, e as fotos são de sol. */
  --shadow-rgb: 31, 41, 55;
  font-family: var(--font-ui);}

/* ── the frame is only a frame ─────────────────────────────
   No background, no clip, no mask. This was a box that cut
   the cards at its edges, and before that a mask that faded
   them out there, and both were answers to the question of
   what happens to a card when it runs out of block. The cards
   are on a ring now and never reach an edge, so the question
   is gone and so is everything that was answering it.

   Which also means nothing here forces `transform-style:
   flat` any more — overflow and mask both did, and both were
   safe only because the perspective sits two levels down on
   `.car-float`. It no longer has to be. */
.car-track {
  position: absolute;
  inset: 0;
  touch-action: pan-y;
  cursor: grab;}

.car-track[data-held="true"] {
  cursor: grabbing;}

.car-track:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(var(--ink-rgb), 0.4);}

/* the slot holds WHERE on the ring and the card's own resting
   ANGLE, written per frame by the component — so it carries no
   transition of its own, or the easing and the drag would
   re-interpolate against each other and what you would see is
   the transition rather than the finger */
.car-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: center;}

/* ── the drift ──────────────────────────────────────────────
   Keyframes rather than a loop: a rAF per card would be a
   permanent loop for motion nobody is watching, and a wall
   holding several of these blocks would run a dozen. This
   runs on the compositor and pauses itself when the tab
   hides. The period is set per card and deliberately does not
   divide into its neighbours' — that is what stops the row
   breathing in unison.

   The perspective lives HERE, not on the track: on the track
   a card at the edge of the row would tilt toward the middle
   of the stage rather than toward the finger on it. Each card
   is its own object being touched and wants its own vanishing
   point. */
.car-float {
  width: 100%;
  height: 100%;
  perspective: 760px;
  animation: car-bob 5s ease-in-out infinite;}

.car-card {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  /* no transition: the tilt is sprung in the component, and a
     transition on top would be a second opinion about how this
     card settles */}

.car-sheen {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;}

@media (prefers-reduced-motion: reduce) {
  .car-float { animation: none; }
}

@keyframes car-bob {
  0%, 100% {
    transform: translateY(calc(var(--lift, 4px) * -1)) rotate(calc(var(--sway, 1deg) * -1));
  }
  50% {
    transform: translateY(var(--lift, 4px)) rotate(var(--sway, 1deg));
  }}

/* ── o celular (22/09/2026) ─────────────────────────────────
   O palco é 476x340 fixo, e o comentário em carousel.js
   explica por que os dois números não crescem com nada. Numa
   tela de 360px isso é 148px a mais do que existe: a página
   ganharia rolagem horizontal, que num site de pousada é o
   defeito que o hóspede encontra antes de ver a foto.

   A saída é escalar o palco INTEIRO, não remedir o anel: a
   geometria continua a mesma em px e só o resultado é
   desenhado menor, então nenhuma constante do componente
   muda. 0,66 põe o palco em 314px, que cabe em 360 com as
   margens de 16px da seção, e as margens negativas devolvem
   ao documento o espaço que a escala deixou de ocupar (sem
   elas sobrariam 58px de ar em cima e embaixo, e 81px de cada
   lado, porque `transform` não reencolhe a caixa).

   O arrasto não precisa de ajuste: ele mede clientX, que é
   px de tela de verdade, então o dedo gira o anel igual nos
   dois tamanhos. */
@media (max-width: 519px) {
  .car {
    transform: scale(.66);
    margin: -58px -81px;
  }
  /* 340 * 0,66, que é o que o palco passa a ocupar depois das
     margens negativas acima */
  .car-palco { min-height: 224px; }
}