/* =====================================================================
   Dobras com comportamento próprio
     .dor       → pilha fixada: uma citação por vez
     .dor-outro → fecho em declaração, com fundo em imagem
     .pilares   → colunas de vidro que sobem do chão, uma a uma
     .curriculo → sanfona dos módulos
   ===================================================================== */

/* =====================================================================
   DOR — pilha fixada
   ===================================================================== */
.dor{padding:0;height:420vh}
/* o palco empilha: foto, título, citações e tracinhos — com respiro no
   topo para não encostar no fim do hero */
.dor .dor-stage{
  position:sticky;top:0;height:100vh;height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:2vh 0 3vh;
}
.dor .dor-stage>.wrap{display:flex;flex-direction:column;align-items:center;width:100%}
/* a foto encosta no título: a margem negativa fecha o vão da base recortada */
/* abertura da dobra: a foto entra GRANDE e encolhe conforme a rolagem
   avança (--dorp 0→1, setado pelo dobras.js). A área das citações cresce
   na mesma proporção, então a pilha inteira sempre cabe em 100svh. */
.dor-foto{
  width:auto;
  height:calc(min(44vh,470px) + (1 - var(--dorp,1)) * 22vh);
  max-width:94vw;
  margin:0 auto -2.4vh;
}
.dor .section-head{margin-bottom:var(--sp-3);text-align:center}
.dor .section-head .lead{font-size:var(--step-0);max-width:58ch}

.dor .dor-items{
  position:relative;width:100%;display:grid;place-items:center;
  height:calc(min(24vh,220px) * var(--dorp,1));
  opacity:var(--dorp,1);
  max-width:900px;margin:0 auto;
}
.dor .dor-item{
  grid-area:1/1;text-align:center;opacity:0;filter:blur(14px);
  transform:translateY(26px) scale(.99);
  transition:opacity .6s var(--ease),filter .6s var(--ease),transform .6s var(--ease);
  pointer-events:none;
}
.dor .dor-item.is-active{opacity:1;filter:none;transform:none}
.dor .dor-item p{
  font-family:'Sora',sans-serif;font-weight:300;font-style:normal;
  font-size:clamp(19px,2.4vw,30px);line-height:1.32;
}
/* revelação palavra a palavra */
.dor .w{
  display:inline-block;opacity:.14;filter:blur(3px);
  transition:opacity .45s var(--ease),filter .45s var(--ease);
}
.dor .dor-item.is-active .w{opacity:1;filter:none}

.dor .dor-ticks{display:flex;gap:10px;justify-content:center;margin-top:var(--sp-3);opacity:var(--dorp,1)}
.dor .dor-ticks i{
  width:34px;height:2px;background:var(--line);
  transition:background-color .4s var(--ease),box-shadow .4s var(--ease);
}
.dor .dor-ticks i.on{background:var(--neon);box-shadow:0 0 10px var(--glow)}

/* =====================================================================
   DECLARAÇÃO — o padrão de frase-manifesto da página
   Rola normal, entra palavra a palavra e vira fumaça ao cruzar o topo.
   --exit vem do JS (0 inteira, 1 dissolvida). Sem transition no
   container: a saída tem que acompanhar o scroll sem atraso.
   ===================================================================== */
.dor-outro{
  position:relative;isolation:isolate;background:var(--bg);
  padding:20vh 0 24vh;text-align:center;margin-top:-4vh;
}
.stmt{
  --exit:0;
  max-width:24ch;margin:0 auto;text-align:center;
  font-family:'Sora',sans-serif;font-weight:300;
  font-size:clamp(20px,2.6vw,32px);line-height:1.4;color:var(--fg);
  opacity:calc(1 - var(--exit));
  filter:blur(calc(var(--exit) * 18px));
  transform:translateY(calc(var(--exit) * -26px));
}
.stmt b{font-weight:500}
.stmt .w{
  display:inline-block;opacity:.1;filter:blur(3px);
  transition:opacity .55s var(--ease),filter .55s var(--ease);
}
.stmt.is-in .w{opacity:1;filter:none}
.dor-close{max-width:30ch}
/* =====================================================================
   PÓS-MÓDULO — Dr. André à esquerda, texto centralizado à direita
   ===================================================================== */
/* SEM isolation: o multiply do fundo precisa enxergar a cor da dobra.
   Isolado, ele mesclava contra o vazio e a arte clara ficava opaca
   justamente na virada para o verde. */
.pos-mod{position:relative;margin-top:var(--sp-3);padding:var(--sp-2) 0 0}
/* a arte do fundo dissolve mais cedo nas pontas: sem isso a borda dela
   marca uma linha contra o resto da dobra clara */
.pos-mod .bg-img{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 80%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 80%,transparent 100%);
}
.pm-grid{
  display:grid;grid-template-columns:.86fr 1fr;gap:clamp(20px,4vw,56px);
  align-items:center;
}
/* foto à esquerda, texto à direita — sem trocar a ordem de leitura */
.pm-foto{
  grid-column:1;grid-row:1;width:100%;height:auto;align-self:end;margin-bottom:-2px;
  transition:opacity .85s var(--ease);
}
.curriculo .stmt{
  grid-column:2;grid-row:1;align-self:center;
  max-width:38ch;margin:0 auto;text-align:center;
  font-size:clamp(19px,2.1vw,26px);
}
/* fora da dobra clara, figura e fundo recuam juntos — sem mescla, o que
   dissolve o bloco na virada é a opacidade */
html:not([data-palette="bone"]) .pm-foto{opacity:.14}
html:not([data-palette="bone"]) .pos-mod .bg-img{opacity:.1}

@media(max-width:820px){
  .pm-grid{grid-template-columns:1fr;justify-items:center}
  .pm-foto{grid-column:1;grid-row:2;max-width:460px}
  .curriculo .stmt{grid-column:1;grid-row:1;max-width:46ch;margin-bottom:var(--sp-4)}
}
/* fecho da Elite: foto entre os dois cards e a frase */
.elite-foto{
  display:block;width:auto;height:min(76vh,780px);max-width:94vw;
  margin:var(--sp-5) auto -5vh;
}
.elite .stmt{max-width:34ch;margin-top:0}
@media(max-width:700px){
  .elite-foto{height:min(48vh,420px);margin-bottom:-3vh}
}

/* =====================================================================
   FUNDO EM IMAGEM — um por dobra
   Uso:  <div class="bg-img" style="background-image:url('...');
                                    --blend:color-dodge;--op:1;--tint:0">
   A imagem entra por background-image no style do elemento — NUNCA por
   custom property: url() dentro de var() resolve relativo ao CSS, e o
   arquivo passa a ser procurado em assets/css/assets/img/... (404 mudo).
   --blend usa os nomes do Photoshop em inglês: color-dodge (Superexposição),
   color-burn (Subexposição), screen, multiply, overlay, soft-light,
   hard-light, luminosity.
   --tint:1 força a imagem a assumir a cor da paleta da dobra.
   Não usar em dobra com vidro: mix-blend-mode desliga o backdrop-filter.
   ===================================================================== */
.bg-img{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  mix-blend-mode:var(--blend,color-dodge);
  opacity:var(--op,.75);
  filter:var(--fx,none);
  transition:opacity .85s var(--ease);
  /* morre nas duas pontas: sem isso a imagem cria aresta contra a vizinha */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 2%,#000 92%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0,#000 2%,#000 92%,transparent 100%);
}
/* véu da cor da dobra: a imagem passa a "ser" verde (ou âmbar na Elite) */
.bg-img::after{
  content:"";position:absolute;inset:0;
  background:var(--neon);
  mix-blend-mode:color;
  opacity:calc(var(--tint,0) * .8);
}

/* =====================================================================
   PILARES — colunas de vidro que crescem do chão, uma a uma
   --g (0→1) é a altura de cada pilar, escrita pelo JS a cada frame.
   ===================================================================== */
.pilares{padding:0;height:250vh}
.pilares .pil-stage{
  position:sticky;top:0;min-height:100vh;min-height:100svh;display:flex;align-items:center;
  isolation:isolate;   /* o vidro precisa do fundo no mesmo contexto */
  padding:calc(var(--sp-7) * .55) 0;
}
/* o shader não roda em telas pequenas: um degradê assume o lugar dele
   para a dobra não ficar chapada */
.bg{
  background:
    radial-gradient(58% 42% at 26% 30%,color-mix(in srgb,var(--glow) 26%,transparent),transparent 70%),
    radial-gradient(52% 38% at 78% 72%,color-mix(in srgb,var(--glow) 18%,transparent),transparent 72%);
}
.pilares .pil-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  /* stretch: todas as colunas assumem a altura da mais alta, senão a base
     acesa de cada uma para numa altura diferente */
  align-items:stretch;position:relative;margin-top:var(--sp-6);
}
.pilares .pil-row::after{
  content:"";position:absolute;left:-4%;right:-4%;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent);
}

.pilares .pil-item{
  position:relative;min-height:min(46vh,380px);
  padding:38px 26px 34px;display:flex;align-items:flex-start;
}
/* VIDRO: o painel desfoca o que está atrás — é o backdrop-filter que faz
   o fundo animado ler como "atrás", e não atravessando a coluna.
   O crescimento é por clip-path (e não scaleY): transform distorceria a
   amostragem do backdrop e o vidro sairia esticado. */
.pilares .pil-item::before{
  content:"";position:absolute;inset:0;z-index:0;
  clip-path:inset(calc((1 - var(--g,0)) * 100%) 0 0 0);
  background:linear-gradient(158deg,
    rgba(255,255,255,.085),
    rgba(255,255,255,.022) 46%,
    color-mix(in srgb,var(--neon) 7%,transparent));
  -webkit-backdrop-filter:blur(16px) saturate(126%);
          backdrop-filter:blur(16px) saturate(126%);
  box-shadow:
    inset 1px 0 0 rgba(255,255,255,.10),
    inset -1px 0 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 34px 70px -46px #000;
  transition:box-shadow .45s var(--ease);
}
.pilares .pil-item:hover::before{
  box-shadow:
    inset 1px 0 0 color-mix(in srgb,var(--neon) 45%,transparent),
    inset -1px 0 0 color-mix(in srgb,var(--neon) 45%,transparent),
    inset 0 -1px 0 rgba(255,255,255,.05),
    0 34px 70px -46px #000;
}
/* filete de topo: acompanha a altura já construída, como um capitel subindo */
.pilares .pil-cap{
  display:block;position:absolute;left:0;right:0;z-index:1;height:1px;
  top:calc((1 - var(--g,0)) * 100%);
  background:linear-gradient(90deg,
    transparent,rgba(255,255,255,.22) 18%,rgba(255,255,255,.22) 82%,transparent);
  opacity:calc(var(--g,0) * 3);
}
/* Luz guiada pelo mouse — confinada à parte já construída.
   SEM mix-blend-mode: o blend isola o grupo de composição do card e o
   navegador descarta o backdrop que o vidro estava desfocando. */
.pilares .pil-item::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  clip-path:inset(calc((1 - var(--g,0)) * 100%) 0 0 0);
  background:radial-gradient(240px 300px at var(--mx,50%) var(--my,50%),
             color-mix(in srgb,var(--neon-hi) 26%,transparent),
             color-mix(in srgb,var(--glow) 14%,transparent) 42%,
             transparent 72%);
  transition:opacity .55s var(--ease);
}
.pilares .pil-item:hover::after{opacity:1}

/* base acesa — chega no fim do crescimento */
.pilares .pil-base{
  display:block;position:absolute;left:0;right:0;bottom:0;height:2px;z-index:2;
  background:var(--neon);box-shadow:0 0 14px var(--glow),0 0 34px var(--glow);
  opacity:calc((var(--g,0) - .78) * 4.6);
}
/* o texto assenta: sobe, desfoca pro foco e ganha opacidade junto do --g */
.pilares .pil-body{
  position:relative;z-index:2;
  opacity:calc((var(--g,0) - .42) * 2.1);
  filter:blur(calc((1 - var(--g,0)) * 7px));
  transform:translateY(calc((1 - var(--g,0)) * 16px));
}
.pilares .pil-item .n{
  font-family:'Sora',sans-serif;font-size:var(--step--2);letter-spacing:.28em;
  text-transform:uppercase;color:var(--fg-dim);margin-bottom:10px;text-shadow:none;
}
.pilares .pil-item h3{font-size:var(--step-2);margin-bottom:12px;color:var(--fg)}
.pilares .pil-item p{color:var(--fg-dim);font-size:var(--step-0);line-height:1.72}

@media(max-width:900px){
  .pilares .pil-row{grid-template-columns:repeat(2,1fr)}
  .pilares .pil-item{min-height:300px}
}
@media(max-width:560px){
  .pilares .pil-row{grid-template-columns:1fr}
  .pilares .pil-item{min-height:auto;padding:32px 24px}
}

/* =====================================================================
   CURRÍCULO — sanfona
   ===================================================================== */
.mx{position:relative}
.mx-item{position:relative;border-bottom:1px solid var(--line)}
.mx-item:first-of-type{border-top:1px solid var(--line)}
.mx-head{
  display:grid;align-items:center;gap:18px;cursor:pointer;
  grid-template-columns:124px 1fr 24px;
  padding:22px 4px;min-height:44px;
  transition:background-color .3s var(--ease),padding-left .3s var(--ease);
}
.mx-head:hover{background:var(--card);padding-left:14px}
.mx-item.is-open>.mx-head{background:var(--card)}
.mx-item.is-open .mx-t{color:var(--neon-hi)}
.mx-n{
  font-family:'Sora',sans-serif;font-size:var(--step--2);letter-spacing:.22em;
  text-transform:uppercase;color:var(--fg-dim);white-space:nowrap;
}
.mx-t{font-family:'Sora',sans-serif;font-weight:500;font-size:var(--step-1);color:var(--fg)}
/* ícone +/− desenhado */
.mx-ico{position:relative;width:16px;height:16px;justify-self:end}
.mx-ico::before,.mx-ico::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--neon);
  transform:translate(-50%,-50%);
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.mx-ico::before{width:14px;height:1px}
.mx-ico::after{width:1px;height:14px}
.mx-item.is-open .mx-ico::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}

.mx-panel{overflow:hidden;height:0;opacity:0;transition:height .5s var(--ease),opacity .4s var(--ease)}
.mx-item.is-open>.mx-panel{opacity:1}
.mx-aulas{margin:0;padding:0 4px 22px 124px}
/* cada aula: número, título e ementa */
.mx-aulas li{
  list-style:none;display:grid;grid-template-columns:34px 1fr;gap:14px;
  padding:14px 0;border-top:1px solid var(--line);
}
.au-n{
  font-family:'Sora',sans-serif;font-size:var(--step--1);font-weight:600;
  color:var(--neon);line-height:1.5;
}
.au-txt b{
  display:inline;font-family:'Sora',sans-serif;font-weight:500;
  font-size:var(--step-0);color:var(--fg);
}
.au-txt p{margin-top:5px;font-size:var(--step--1);color:var(--fg-dim);line-height:1.6}
.au-trilha{
  display:inline-block;margin-left:8px;vertical-align:2px;
  font-family:'Sora',sans-serif;font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
  padding:3px 8px;border-radius:2px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent);
}
.mx-nota{
  margin-top:var(--sp-3);font-size:var(--step--2);color:var(--fg-dim);
  font-style:italic;text-align:right;opacity:.8;
}
@media(max-width:640px){
  .mx-head{grid-template-columns:1fr 20px}
  .mx-n{display:none}
  .mx-aulas{padding-left:0}
}

/* =====================================================================
   Movimento reduzido
   ===================================================================== */
/* =====================================================================
   AJUSTES DE MOBILE
   ===================================================================== */
@media(max-width:860px){
  /* 2 · no celular a ordem muda: título primeiro, foto no meio, citações
     logo abaixo dela. Sem isso a figura empurrava o texto que gira para
     fora da tela. */
  .dor .dor-stage{padding:1vh 0 3vh;justify-content:center}
  .dor .dor-stage>.wrap{display:flex;flex-direction:column}
  .dor .section-head{order:1;margin-bottom:var(--sp-2)}
  .dor-foto{order:2;width:auto;height:min(30vh,270px);max-width:92vw;margin:0 auto -1vh}
  .dor .dor-items{order:3;height:min(26vh,210px);opacity:1}
  .dor .dor-ticks{order:4;opacity:1;margin-top:var(--sp-2)}
  .dor .dor-item p{font-size:clamp(17px,4.2vw,23px)}
  .dor .section-head .h2{font-size:clamp(21px,5.4vw,28px)}
  .dor .section-head .lead{font-size:var(--step--1);max-width:44ch}

  /* 5 · declaração do pós-módulo maior e colada na figura */
  .pm-grid{gap:8px}
  .curriculo .stmt{font-size:clamp(20px,5vw,26px);max-width:24ch;margin-bottom:0}
  .pm-foto{max-width:none;width:100%}
  .pos-mod{margin-top:var(--sp-2)}
}

@media(max-width:700px){
  .elite-foto{height:auto;width:100%;max-width:none;margin-bottom:-4vh}
}

/* =====================================================================
   MOVIMENTO REDUZIDO — a versão estática precisa ser DESENHADA, não
   sobra do que foi desligado. Sem rolagem presa, sem giro, sem varredura:
   as quatro citações viram cartões, os pilares nascem prontos.
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  .dor{height:auto;padding:var(--sp-7) 0}
  .dor .dor-stage{position:static;height:auto;display:block;padding:0}
  .dor .dor-stage>.wrap{display:block}
  .dor-foto{height:auto;width:min(420px,72vw);margin:0 auto var(--sp-4);display:block}
  .dor .section-head{margin-bottom:var(--sp-5)}
  .dor .dor-items{
    height:auto !important;opacity:1;display:grid;gap:16px;max-width:none;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  }
  .dor-foto{order:0}
  .dor .section-head{order:0}
  .dor .dor-item{
    grid-area:auto;opacity:1;filter:none;transform:none;text-align:left;
    background:var(--card);padding:24px 26px;border-radius:3px;
    box-shadow:inset 2px 0 0 var(--neon);
  }
  .dor .dor-item p{font-size:var(--step-1);line-height:1.55}
  .dor .dor-ticks{display:none}
  /* fade suave continua: o que a preferência pede é evitar deslocamento,
     zoom e paralaxe — variação de opacidade é aceita */
  [data-anim]{transform:none !important;filter:none !important;
              opacity:0;transition:opacity .75s var(--ease)}
  .is-in[data-anim]{opacity:1}
  /* as declarações continuam entrando palavra a palavra — é só opacidade,
     sem deslocamento nem desfoque */
  .dor .w{opacity:1;filter:none}
  .stmt .w{opacity:.14;filter:none;transition:opacity .6s var(--ease)}
  .stmt.is-in .w{opacity:1}
  .dor .dor-item{transition:opacity .6s var(--ease),box-shadow .4s var(--ease)}
  .dor .dor-item:hover{box-shadow:inset 3px 0 0 var(--neon-hi)}
  .stmt{--exit:0}
  .pilares{height:auto;padding:var(--sp-7) 0}
  .pilares .pil-stage{position:static;min-height:0;padding:0}
  .pilares .pil-item{--g:1}
  /* a sanfona CONTINUA funcionando: só perde a animação de altura.
     Forçar height:auto abria todos os módulos e o botão parecia morto. */
  .mx-panel{transition:none}
  /* o vídeo do André mostra os controles (ver dobras.js) */
  .aut-video{background:#000}
}