/* ===========================================================
   MORPH CARD — o card que atravessa a Hero até a seção Sobre
   Frente: selo de vidro. Verso: a foto.
   Posição/escala vêm do JS (scripts/morph.js); aqui fica só o
   visual e a estrutura 3D.
   =========================================================== */
.morph{
  position:fixed;
  top:0;
  left:0;
  transform-origin:0 0;        /* o JS translada e escala a partir do canto */
  z-index:40;                  /* abaixo da pill (50), acima do conteúdo */
  will-change:transform;
  display:block;

}

/* entrada: opacidade + offset (o offset usa a propriedade `translate`,
   que se compõe com o `transform` que o JS reescreve a cada frame) */
.morph.fx.fx--on:not(.fx--done){animation-name:fx-in-card;}

.morph:focus-visible{outline:2px solid var(--red);outline-offset:6px;}

/* Pista de rolagem: preto vazio, só pra alongar o percurso do giro.
   A "velocidade" do giro é graus por pixel de scroll — a única forma
   real de desacelerar é dar mais pixels, não mais tempo.

   HIPÓTESE DO TRAVAMENTO NO CELULAR (a confirmar no aparelho real):
   esta regra dava 55vh pro celular contra 100vh do desktop, sem comentário
   explicando o motivo — e por causa da física acima, isso faz o giro
   inteiro (180°) e o percurso todo acontecerem em ~metade dos pixels no
   celular. É mais grau por pixel de dedo, então qualquer atraso de um
   quadro entre o scroll (que roda no compositor) e o reposicionamento via
   JS do card `fixed` (que roda na thread principal — arquitetura do
   próprio Safari em iOS, não desta página) fica proporcionalmente mais
   visível. Igualando ao desktop, o mesmo giro é esticado por mais pixels
   e o mesmo atraso de um quadro vira uma fração menor do percurso total. */
.morph-runway{
  height:100vh;
  pointer-events:none;
}

/* invisível até o JS medir os slots — evita o card "pular" no 1º frame */
.morph:not(.is-ready){visibility:hidden;}

/* Estado estacionado: o card vira filho do slot e rola nativamente.
   O `visibility:visible` é necessário porque o slot é invisível — e
   visibilidade é herdada, mas um descendente pode reverter. */
.morph.is-parked{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:none;
  /* !important porque declaração de animação vence regra normal na cascata:
     sem ele, o offset da animação de entrada deslocaria o card estacionado
     caso a página carregasse já rolada até aqui */
  translate:none !important;
  visibility:visible;
  will-change:auto;
}

/* camada neutra (o card não pulsa mais) */
.morph__pulse{
  width:100%;
  height:100%;
}

.morph__inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  will-change:transform;
}

.morph__face{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:var(--morph-radius,20px);
  overflow:hidden;
}

/* Card estacionado: some com a face de vidro por completo.
   Quando o card para (mostrando a foto), a face da frente fica girada
   180° pra trás. `backface-visibility` deveria escondê-la, mas a borda
   e o box-shadow dela ainda desenham uma linha de 1px na aresta — visível
   em tela 1× (IPS), onde não há densidade pra dissolver o fio. Zerando a
   opacidade a face some de vez. O !important vence o opacity inline que o
   JS escreve durante a viagem. */
.morph.is-parked .morph__face--front{opacity:0 !important;}

/* ---------- FRENTE: selo de vidro ---------- */
.morph__face--front{
  background:linear-gradient(
    150deg,
    rgba(250,247,243,.14),
    rgba(250,247,243,.05) 46%,
    rgba(250,247,243,.09)
  );
  border:1px solid rgba(250,247,243,.14);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(250,247,243,.22),
    inset 0 -1px 0 rgba(250,247,243,.06),
    0 18px 44px rgba(0,0,0,.55);
  transition:border-color .3s ease;
}

/* o vermelho vem do token (era rgba(212,64,42,.45) cravado na mão, que é
   o --red antigo — ficava fora de qualquer troca de paleta) */
.morph:hover .morph__face--front{border-color:rgb(from var(--red) r g b / .45);}

/* CELULAR: vidro sem backdrop-filter.

   `backdrop-filter` num elemento que se MEXE é a conta mais cara desta
   página: a cada quadro o navegador tem que recortar o que está atrás do
   card, borrar de novo e recompor. Parado isso é pago uma vez; girando e
   atravessando a tela, é pago sessenta vezes por segundo — e era daí que
   vinha boa parte do "lag" do giro no celular.

   Aqui ele sai e o vidro é imitado com o que é de graça: o mesmo gradiente,
   um pouco mais denso, sobre um véu escuro. No fundo quase preto da hero a
   diferença é quase invisível — o borrão só tinha o que fazer nos poucos
   quadros em que o card cruza um texto.

   `hover:none` em vez de largura: quem não tem mouse é telefone ou tablet,
   e são justamente essas GPUs que penam. O desktop fica intacto. */
@media (hover:none){
  .morph__face--front{
    background:
      linear-gradient(
        150deg,
        rgba(250,247,243,.17),
        rgba(250,247,243,.07) 46%,
        rgba(250,247,243,.11)
      ),
      rgba(10,10,10,.55);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* ---------- VERSO: a foto ---------- */
.morph__face--back{
  transform:rotateY(180deg);   /* pré-girado: fica de frente quando o card chega a 180deg */
  background:var(--surface-1); /* fundo enquanto a imagem carrega — nunca vermelho */
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}

.morph__face--back img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 25%;
  /* sem filtro: a foto mantém cor e luz originais */
}

/* ---------- MODO CHAPADO (mobile / reduced-motion) ----------
   Sem giro 3D: as faces trocam por crossfade, então o verso não
   pode continuar pré-girado nem escondido pelo backface. */
.morph.is-flat .morph__face{
  backface-visibility:visible;
  -webkit-backface-visibility:visible;
  transition:opacity .2s linear;
}

.morph.is-flat .morph__face--back{transform:none;}

/* o SVG do selo ocupa a frente inteira */
.morph__face--front .scroll-badge{width:100%;height:100%;}

/* Selo congelado enquanto o card viaja.
   O anel girando e a seta pulsando são animações de transform dentro do
   SVG, e essas o compositor não sabe fazer sozinho: cada quadro delas
   repinta a face da frente. Somado ao giro 3D, é repintura em cima de
   repintura — o que travava a passagem no celular.
   O JS liga `is-moving` assim que o card sai do lugar (scripts/morph.js).
   Nesse instante o selo já está virando de lado, então a pausa não se vê,
   e `paused` guarda o ponto exato: ao voltar pro topo ele continua de onde
   parou, sem pulo. */
.morph.is-moving .scroll-badge__text,
.morph.is-moving .scroll-badge__arrow{
  animation-play-state:paused;
}