/* ==========================================================================
   pescaria.css — cena da vara que fisga DUAS fotos (par de pescaria.js)

   O container agora é um OVERLAY de tela inteira: `position:absolute;
   inset:0` dentro de uma cena sticky de 100svh que a página monta (e cujo
   overflow clip corta o punho da vara, que fica além da borda direita).
   Tudo o que se move é movido pelo JS (transform + atributo `d`); este
   ficheiro posiciona, pinta e expõe os botões de ajuste.

   Botões de ajuste (custom properties, em % do container, no .pescaria):
     --pescaria-f1-x / --pescaria-f1-y   pino de POUSO da foto 1
     --pescaria-f2-x / --pescaria-f2-y   pino de POUSO da foto 2
     --pescaria-foto-w                   largura das molduras
   O JS lê os quatro primeiros a cada resize; a largura é CSS puro. Os
   pousos não devem sobrepor as fotos (f1 alto-esquerda da metade direita,
   f2 mais abaixo à direita) — o JS só garante que nenhum pouso fique acima
   da ponta da vara.
   ========================================================================== */

.pescaria {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* O overlay não pode roubar clique da cena por baixo; as fotos reativam. */
  pointer-events: none;

  --pescaria-f1-x: 54%;
  --pescaria-f1-y: 34%;
  --pescaria-f2-x: 79%;
  --pescaria-f2-y: 55%;
  --pescaria-foto-w: 24%;
}

/* --- A vara ---------------------------------------------------------------
   Grande (62% da largura) e ancorada com o CABO para FORA da borda direita:
   o punho some fora da tela e o molinete fica visível rente à borda. A
   entrada e a flexão da ponta são um transform no <g> interno
   (.pescaria-vara-g), escrito pelo JS em unidades da viewBox — o elemento
   SVG em si nunca se move, e é por isso que o JS pode medi-lo uma vez por
   resize e confiar na medida a cada quadro. */
.pescaria-vara {
  position: absolute;
  top: -5%;
  right: -14%;
  width: 62%;
  /* Igual à razão da viewBox (300x120). Se mudar lá, mude aqui: é o que
     mantém o mapeamento viewBox->pixel uniforme e o giro da flexão sem
     distorção. */
  aspect-ratio: 300 / 120;
  z-index: 4;
  pointer-events: none;
}

/* --- A linha e o anzol ----------------------------------------------------
   Overlay que cobre o container inteiro. Os dois <path> são redesenhados
   por quadro pelo JS. `overflow: visible` deixa a linha seguir a ponta
   enquanto a vara ainda está entrando pelo canto. */
.pescaria-linha {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
  /* A única camada que repinta a cada quadro — promovida uma vez. */
  will-change: transform;
}

.pescaria-fio {
  fill: none;
  stroke: #e9e2d2;
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: 0.9;
}

.pescaria-anzol {
  fill: none;
  stroke: #ffb45e;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- As fotos emolduradas --------------------------------------------------
   Moldura de foto impressa: cartão creme com rodapé mais alto (8px 8px
   24px). Cada uma pendura pelo PRÓPRIO pino no topo — o transform-origin em
   50% 0 é o que faz o balanço do JS girar em torno do pino, não do centro:
   desenho e física dizem a mesma coisa. Quando a linha larga a f1 e vai
   buscar a f2, a f1 continua pendurada no pino dela, imóvel no lugar. */
.pescaria-foto {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--pescaria-foto-w);
  margin: 0;
  background: #f4efe6;
  padding: 8px 8px 24px;
  border-radius: 3px;
  transform-origin: 50% 0;
  /* Escondidas até o JS posicionar o primeiro quadro — sem JS ficariam as
     duas empilhadas no canto superior esquerdo do overlay. */
  visibility: hidden;
  /* As fotos podem receber o rato (o resto do overlay é pointer-events
     none, para não roubar clique da cena por baixo). */
  pointer-events: auto;
  /* Sem will-change: o transform muda a cada quadro e o navegador promove a
     camada sozinho; o hint fixo fazia o Chrome saltar a rasterização da
     foto quando ela está toda abaixo da dobra. */
  z-index: 2;
  /* Sombra curta de propósito: peça pendurada balança, e sombra comprida
     descola do objeto no giro. Uma camada de contato e uma de queda curta. */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.55),
    0 14px 26px -16px rgba(0, 0, 0, 0.8);
}

.pescaria-foto img {
  display: block;
  width: 100%;
  /* Proporção fixa no CSS para o layout NÃO depender do carregamento da
     imagem — o JS mede a altura da moldura no init e confia nela. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* O pino: a argola onde a linha prende e o anzol se enfia. Centro do anel
   exatamente no topo da moldura (top:-6px em 12px de altura), que é também
   o transform-origin — o pivô do pêndulo é o pino, literalmente. */
.pescaria-pino {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  border: 2px solid #ffb45e;
  background: #171310;
  box-shadow: 0 0 10px rgba(255, 180, 94, 0.35);
  z-index: 1;
}

/* Sem media query de prefers-reduced-motion aqui: não há transição nem
   animação em CSS. Quem decide não animar é o pescaria.js, que nesse caso
   desenha a cena UMA vez no estado final (as duas fotos pousadas, linha
   curta e reta na f2). */