/* ===========================================================
   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. */
.morph-runway{
  height:55vh;
  pointer-events:none;
}

@media (min-width:768px){
  .morph-runway{height:100vh;}
}

/* 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;
}

.morph:hover .morph__face--front{border-color:rgba(212,64,42,.45);}

/* ---------- 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%;}