/* Dobra de manifesto: a foto abre conforme a página rola.
   Porte do ScrollExpand para CSS + JS puro.

   Todas as cores saem de variáveis que o PHP escreve no próprio elemento a
   partir do painel — fundo, véu, desfoque e estilo do fundo. Sem nada fixo
   aqui dentro, a dobra acompanha o que for mudado no gerenciador. */

.mf{
  --mf-fundo:var(--dark);
  --mf-veu:var(--dark);
  --mf-veu-forca:.62;
  --mf-desfoque-max:14px;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  background:var(--mf-fundo);
}

.mf__palco{
  position:relative;
  width:100%;
  height:min(76vh,640px);
  display:grid;
  place-items:center;
}
.mf__quadro{
  position:relative;
  /* a largura e a altura vêm do JS conforme a rolagem */
  width:var(--mf-larg,26%);
  height:var(--mf-alt,58%);
  overflow:hidden;
  border-radius:var(--mf-raio,20px);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.75);
  will-change:width,height;
}
.mf__quadro img{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  object-fit:cover;
  /* fechada, a foto é textura atrás do texto; aberta, vira cena */
  filter:blur(var(--mf-desfoque,14px)) saturate(.92);
  transform:scale(var(--mf-zoom,1.22));
  will-change:filter,transform;
}
/* o véu que garante a leitura, na cor escolhida no painel */
.mf__quadro:after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--mf-veu) calc(var(--mf-veu-forca) * 55%),transparent),
    color-mix(in srgb,var(--mf-veu) calc(var(--mf-veu-forca) * 100%),transparent));
}

.mf__texto{
  position:absolute;
  inset:0;
  z-index:3;
  display:grid;
  place-content:center;
  padding:0 26px;
  text-align:center;
  pointer-events:none;
}
.mf__texto .micro-label{display:block;margin-bottom:14px;color:var(--warm)}
.mf__texto h2{
  margin:0;
  font:200 clamp(40px,6.4vw,104px)/.92 var(--serif);
  letter-spacing:-.035em;
  color:#fff;
  text-wrap:balance;
}
.mf__texto h2 em{font-style:italic}
.mf__texto p{
  margin:20px auto 0;
  max-width:46ch;
  font-size:15px;
  line-height:1.7;
  color:rgba(255,255,255,.84);
}
.mf__dica{
  position:absolute;
  left:50%;bottom:20px;
  transform:translateX(-50%);
  z-index:4;
  margin:0;
  color:rgba(255,255,255,.55);
  font:700 9.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;
  transition:opacity .4s;
}
.mf.abriu .mf__dica{opacity:0}

/* ── fundos ─────────────────────────────────────────────────
   Maré é o padrão: o degradê inteiro desliza de canto a canto.
   Custa um background-position animado e nada mais. */
.mf--mare{
  background:linear-gradient(125deg,
    var(--mf-fundo) 0%,
    color-mix(in srgb,var(--lav-dark) 70%,var(--mf-fundo)) 26%,
    color-mix(in srgb,var(--rust-light) 26%,var(--mf-fundo)) 50%,
    color-mix(in srgb,var(--warm) 16%,var(--mf-fundo)) 74%,
    var(--mf-fundo) 100%);
  background-size:320% 320%;
  animation:mf-mare 26s ease-in-out infinite alternate;
}
@keyframes mf-mare{
  from{background-position:0% 42%}
  to{background-position:100% 58%}
}

.mf--aurora:before,.mf--aurora:after{
  content:"";
  position:absolute;z-index:0;
  border-radius:50%;
  filter:blur(90px);
  pointer-events:none;
}
.mf--aurora:before{
  width:60vw;height:60vw;top:-22%;left:-14%;
  background:radial-gradient(circle,var(--cool),transparent 68%);
  opacity:.26;
  animation:mf-vaga 19s ease-in-out infinite alternate;
}
.mf--aurora:after{
  width:52vw;height:52vw;right:-16%;bottom:-24%;
  background:radial-gradient(circle,var(--warm),transparent 66%);
  opacity:.2;
  animation:mf-vaga 23s ease-in-out infinite alternate-reverse;
}
@keyframes mf-vaga{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(8%,6%,0) scale(1.18)}
}

.mf--grade:before{
  content:"";
  position:absolute;inset:-2px;z-index:0;
  background:
    repeating-linear-gradient(90deg,transparent 0 46px,
      color-mix(in srgb,var(--warm) 13%,transparent) 46px 47px),
    repeating-linear-gradient(0deg,transparent 0 46px,
      color-mix(in srgb,var(--warm) 13%,transparent) 46px 47px);
  mask-image:radial-gradient(120% 90% at 50% 45%,#000 18%,transparent 74%);
  animation:mf-respira 14s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes mf-respira{
  from{opacity:.5;transform:scale(1)}
  to{opacity:.95;transform:scale(1.07)}
}

@media (max-width:800px){
  .mf__palco{height:min(66vh,520px)}
  .mf__texto p{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
  .mf--mare,.mf--aurora:before,.mf--aurora:after,.mf--grade:before{animation:none}
}