/* ============================================================
   DAidea — camada de movimento
   REGRA DE OURO: todo conteúdo nasce visível no HTML. Os estados
   iniciais de animação só valem depois que o JS marca
   <html class="js-movimento">. Se o JS falhar, nada some da tela.
   ============================================================ */

/* ---------- revelação simples (sobe e aparece) ---------- */
.js-movimento .rv{opacity:0;transform:translateY(22px);will-change:opacity,transform}
.js-movimento .rv.visivel{opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.22,.7,.25,1),transform .7s cubic-bezier(.22,.7,.25,1)}

/* ---------- revelação de título, linha por linha ---------- */
.js-movimento .rv-linha{display:block;overflow:hidden}
.js-movimento .rv-linha > span{display:block;transform:translateY(105%);
  transition:transform .85s cubic-bezier(.22,.7,.25,1)}
.js-movimento .rv-linha.visivel > span{transform:none}

/* ---------- foto que abre como cortina ---------- */
.js-movimento .rv-foto{clip-path:inset(0 0 100% 0)}
.js-movimento .rv-foto.visivel{clip-path:inset(0 0 0 0);
  transition:clip-path 1.05s cubic-bezier(.22,.7,.25,1)}

/* ---------- botão magnético ---------- */
.magnetico{display:inline-flex;transition:transform .35s cubic-bezier(.22,.7,.25,1)}
.magnetico.puxando{transition:transform .12s linear}

/* ---------- cortina de transição entre páginas ----------
   Copiada da Marcussi & Mazoti (TransitionProvider), com a marca da DAidea:
   cortina ÚNICA escura com o LOGO GRANDE no meio.
   Cobrindo : a cortina sobe em 0,50s; o logo entra nos últimos 0,22s.
   Chegando : a página nova nasce coberta com o logo à vista; o logo some
              primeiro (0,24s) e a cortina sai por cima (0,55s).
   Curvas = as do GSAP de lá: power3.inOut, power2.out e power1.in. */
.cortina{
  position:fixed;inset:0;z-index:200;background:var(--verde-fundo);
  transform:translateY(100%);pointer-events:none;
  display:flex;align-items:center;justify-content:center;
}
/* o selo redondo que o Allan preparou (LOGO DAIDEA SFD, 1254 px → WebP 560 px).
   O disco branco é o que deixa a folha escura legível sobre o verde. */
.cortina-logo{
  width:min(46vw,240px);aspect-ratio:1;
  background:center/contain no-repeat;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.28));
  opacity:0;transform:translateY(12px) scale(.92);
}
/* A imagem só é pedida quando a cortina vai aparecer. Antes disso o
   movimento.js já deixou ela no cache (carrega com o navegador ocioso),
   então ela entra na hora — sem pesar na abertura de cada página. */
.cortina.cobrindo .cortina-logo,
html.chegando .cortina-logo{background-image:url(assets/selo-daidea.webp)}

/* saindo da página */
.cortina.cobrindo{
  transform:translateY(0);pointer-events:auto;
  transition:transform .5s cubic-bezier(.76,0,.24,1);
}
.cortina.cobrindo .cortina-logo{
  opacity:1;transform:none;
  transition:opacity .4s cubic-bezier(.215,.61,.355,1) .28s,
             transform .4s cubic-bezier(.215,.61,.355,1) .28s;
}

/* ---- o vão entre uma página e outra ----
   MEDIDO no Brave: entre o último quadro da página velha e o primeiro da nova
   existe um buraco de ~130 ms em que o navegador pinta sozinho a cor de fundo
   que a página VELHA declarou — o creme. Era a "piscada branca".
   Duas defesas, nesta ordem:
   1. @view-transition: o navegador segura o quadro da página velha (cortina +
      selo) até a nova estar pronta e faz a troca por baixo. Não existe vão.
   2. html.saindo: enquanto a cortina cobre, o fundo declarado já vira verde.
      Se a transição de documento não existir (Firefox), o buraco fica VERDE
      em vez de creme — a pessoa não vê nada acontecer. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
/* os dois quadros são a MESMA cortina: o cruzado curto só cobre o instante em
   que o selo da página nova ainda está sendo decodificado */
::view-transition-old(root),::view-transition-new(root){animation-duration:.15s}
html.saindo{background:var(--verde-fundo)}

/* a página nova nasce coberta, com o logo já à vista... */
/* fundo verde no <html> cobre o instante antes do <body> existir */
html.chegando{background:var(--verde-fundo)}
html.chegando .cortina{
  transform:translateY(0);
  /* rede de segurança: se o JS não rodar, a cortina sai sozinha */
  animation:cortina-seguro .55s cubic-bezier(.76,0,.24,1) 3.5s forwards;
}
html.chegando .cortina-logo{opacity:1;transform:none}
@keyframes cortina-seguro{to{transform:translateY(-100%);visibility:hidden}}
/* ...o logo some primeiro e a cortina sai por cima */
html.chegando-pronto .cortina{
  transform:translateY(-100%);
  transition:transform .55s cubic-bezier(.76,0,.24,1) .28s;
}
html.chegando-pronto .cortina-logo{
  opacity:0;transform:translateY(-8px);
  transition:opacity .24s cubic-bezier(.11,0,.5,0) .1s,
             transform .24s cubic-bezier(.11,0,.5,0) .1s;
}

/* ---------- desliga tudo para quem pediu menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  .js-movimento .rv,
  .js-movimento .rv-linha > span,
  .js-movimento .rv-foto{
    opacity:1 !important;transform:none !important;clip-path:none !important;
    transition:none !important;
  }
  .cortina{display:none !important}
}