/* ============================================================
   Camada de movimento · Dra. Claryssa Nascimento · motion v2
   Zero dependencia. Zero markup novo. Zero deslocamento de layout.
   Estados iniciais so existem quando html.mx-on (JS vivo) ->
   se o JS falhar, o site continua 100% legivel.
   ============================================================ */

@view-transition { navigation: auto; }

:root{
  --mx-e:cubic-bezier(.16,1,.3,1);
  --mx-e2:cubic-bezier(.22,.61,.36,1);
  --mx-acc:217,189,164;
  --mx-cream:242,236,228;
}

/* ---------- 1. REVELACAO POR SCROLL ---------- */
html.mx-on [data-mx]{
  transition:opacity .9s var(--mx-e) var(--mx-d,0s),
             transform .9s var(--mx-e) var(--mx-d,0s),
             filter .9s var(--mx-e) var(--mx-d,0s),
             clip-path 1.1s var(--mx-e) var(--mx-d,0s);
}
html.mx-on [data-mx="title"]{opacity:0;transform:translate3d(0,24px,0);filter:blur(7px)}
html.mx-on [data-mx="up"]{opacity:0;transform:translate3d(0,28px,0)}
html.mx-on [data-mx="up-sm"]{opacity:0;transform:translate3d(0,15px,0)}
html.mx-on [data-mx="left"]{opacity:0;transform:translate3d(-24px,0,0)}
html.mx-on [data-mx="pop"]{opacity:0;transform:translate3d(0,14px,0) scale(.962)}
html.mx-on [data-mx="clip"]{opacity:.001;clip-path:inset(12% 7% 12% 7%)}
html.mx-on [data-mx="clip"] img{transform:scale(1.09);transition:transform 1.5s var(--mx-e) var(--mx-d,0s)}

html.mx-on [data-mx].mx-in{opacity:1;transform:none;filter:none;clip-path:inset(0)}
html.mx-on [data-mx].mx-in img{transform:none}

/* ---------- 2. PARALLAX DE IMAGEM (sem furo nas bordas) ---------- */
html.mx-on .mx-px{overflow:hidden}
html.mx-on .mx-px>img,html.mx-on .mx-px>picture>img{will-change:transform}

/* ---------- 3. CABECALHO VIVO ---------- */
html.mx-on header{
  position:sticky;top:0;z-index:60;
  transition:transform .5s var(--mx-e2),background-color .5s ease,
             box-shadow .5s ease,border-color .5s ease,padding .5s var(--mx-e2);
}
html.mx-on header.mx-stuck{
  background:rgba(23,22,26,.78);
  -webkit-backdrop-filter:saturate(150%) blur(16px);
  backdrop-filter:saturate(150%) blur(16px);
  border-bottom-color:rgba(var(--mx-acc),.20);
  box-shadow:0 22px 46px -34px rgba(0,0,0,.95);
}
html.mx-on header.mx-hide{transform:translate3d(0,-105%,0)}

/* ---------- 4. BARRA DE PROGRESSO DE LEITURA ---------- */
.mx-prog{
  position:fixed;left:0;top:0;width:100%;height:2px;z-index:99;pointer-events:none;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(var(--mx-acc),0),rgba(var(--mx-acc),.55) 30%,rgba(var(--mx-acc),.95));
}

/* ---------- 5. MICROINTERACAO DE TOQUE E BOTAO ---------- */
html.mx-on a,html.mx-on button{transition:transform .3s var(--mx-e2),opacity .3s var(--mx-e2),color .3s ease,border-color .3s ease,background-color .3s ease}
html.mx-on a:active,html.mx-on button:active{transform:scale(.972)}
html.mx-on .mx-btn{position:relative;overflow:hidden;isolation:isolate}
html.mx-on .mx-btn::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(105deg,transparent 32%,rgba(var(--mx-cream),.17) 49%,transparent 66%);
  transform:translate3d(-130%,0,0);transition:transform 1s var(--mx-e2);
}
html.mx-on .mx-btn:hover::after,html.mx-on .mx-btn:focus-visible::after{transform:translate3d(130%,0,0)}
@keyframes mxPulso{0%,100%{box-shadow:0 0 0 0 rgba(var(--mx-acc),0)}50%{box-shadow:0 0 0 7px rgba(var(--mx-acc),.075)}}
html.mx-on .mx-cta{animation:mxPulso 3.8s ease-in-out infinite}
html.mx-on .mx-cta:hover{animation-play-state:paused}

/* sublinhado que varre no link de texto */
html.mx-on .mx-link{position:relative}
html.mx-on .mx-link::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:rgba(var(--mx-acc),.85);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .5s var(--mx-e);
}
html.mx-on .mx-link:hover::after,html.mx-on .mx-link:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}

/* ---------- 6. BRILHO AMBIENTE QUE SEGUE O PONTEIRO (desktop) ---------- */
.mx-glow{
  position:fixed;left:0;top:0;width:560px;height:560px;margin:-280px 0 0 -280px;
  border-radius:50%;pointer-events:none;z-index:0;opacity:0;
  transition:opacity .7s ease;
  background:radial-gradient(circle,rgba(var(--mx-acc),.085),rgba(var(--mx-acc),0) 64%);
}
html.mx-on .mx-glow.mx-glow-on{opacity:1}

/* ---------- 7. CENA 3D DO HEROI: amplitude visivel + ritmo humano ---------- */
html.mx-on .c3d__camada--principal{animation-duration:7.5s!important}
html.mx-on .c3d__camada--fundo{animation-duration:9.5s!important}
html.mx-on .c3d__camada--apoio{animation-duration:8.5s!important}
html.mx-on .c3d__camada{transition:transform .9s var(--mx-e)!important}

@keyframes c3dFlutuaA{
  from{transform:translate3d(calc(var(--px)*20px),calc(var(--py)*15px + 15px),64px) rotateZ(-.45deg)}
  to  {transform:translate3d(calc(var(--px)*20px),calc(var(--py)*15px - 17px),88px) rotateZ(.55deg)}}
@keyframes c3dFlutuaB{
  from{transform:translate3d(calc(var(--px)*-34px),calc(var(--py)*-22px - 14px),-84px) rotateY(12.5deg) rotateZ(.5deg)}
  to  {transform:translate3d(calc(var(--px)*-34px),calc(var(--py)*-22px + 18px),-66px) rotateY(7.5deg) rotateZ(-.4deg)}}
@keyframes c3dFlutuaC{
  from{transform:translate3d(calc(var(--px)*30px + 6px),calc(var(--py)*20px + 12px),-52px) rotateY(-11deg)}
  to  {transform:translate3d(calc(var(--px)*30px - 4px),calc(var(--py)*20px - 15px),-38px) rotateY(-6.5deg)}}

/* brilho do palco respira junto */
@keyframes mxRespira{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:.9;transform:scale(1.07)}}
html.mx-on .c3d__brilho{animation:mxRespira 9s ease-in-out infinite}

/* ---------- 8. FOCO VISIVEL (acessibilidade nao regride) ---------- */
html.mx-on :focus-visible{outline:2px solid rgba(var(--mx-acc),.9);outline-offset:3px;border-radius:3px}

/* ---------- 9. RESPEITO TOTAL A QUEM PEDE MENOS MOVIMENTO ---------- */
@media (prefers-reduced-motion:reduce){
  .mx-prog,.mx-glow{display:none!important}
  html [data-mx]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  html .c3d__camada,html .c3d__brilho{animation:none!important}
}