/* ============================================================
   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 ---------- */
/* v2.9 · MODO SUAVE — para quem liga "Reduzir Movimento" no sistema.
   Nada desloca, nada flutua, nada escala. Sobra o que e seguro:
   surgimento por opacidade, barra de leitura e o vidro do cabecalho.
   WCAG 2.3.3 respeitado: zero movimento no plano da tela. */
html.mx-suave [data-mx]{opacity:0;transform:none!important;filter:none!important;clip-path:none!important;
  transition:opacity .55s ease var(--mx-d,0s)}
html.mx-suave [data-mx].mx-in{opacity:1}
html.mx-suave [data-mx="clip"]{opacity:0}
html.mx-suave [data-mx="clip"] img{transform:none!important;transition:none!important}
html.mx-suave .c3d__camada,html.mx-suave .c3d__brilho{animation:none!important;transform:none!important}
html.mx-suave .mx-glow{display:none!important}
html.mx-suave header{transition:background-color .3s ease,backdrop-filter .3s ease,box-shadow .3s ease}
html.mx-suave header.mx-hide{transform:none!important}
html.mx-suave .mx-prog{display:block}

/* Guarda de seguranca: se o motion.js NAO rodar, o navegador ainda respeita
   o pedido do usuario. Escopo em :not(.mx-suave) para nao anular o modo acima. */
@media (prefers-reduced-motion:reduce){
  html:not(.mx-suave) .mx-prog,html:not(.mx-suave) .mx-glow{display:none!important}
  html:not(.mx-suave) [data-mx]{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  html:not(.mx-suave) .c3d__camada,html:not(.mx-suave) .c3d__brilho{animation:none!important}
}

/* ==================================================================
   v3.0 · PRESENCA · o site conversa com quem olha
   1. heroi vira carrossel 3D: as tres fotos se revezam na frente
   2. cabecalho do celular enxuto, com menu de tela cheia
   3. brilhos e respiro que dao vida sem cansar
   ================================================================== */

/* ---------- 10. HEROI: CARROSSEL 3D ---------- */
html.mx-on .c3d__palco{perspective:1500px;perspective-origin:50% 46%}

html.mx-on .c3d__camada{
  left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;
  width:56%!important;margin:0!important;aspect-ratio:2/3;
  animation:none!important;transform-origin:50% 50%;backface-visibility:hidden;
  transition:transform 1.35s cubic-bezier(.22,.9,.26,1),opacity 1.1s ease,
             filter 1.1s ease,box-shadow 1.1s ease!important;
  cursor:pointer}

html.mx-on .c3d__camada[data-slot="0"]{
  transform:translate3d(calc(-50% + var(--px,0)*10px),calc(-50% + var(--py,0)*8px),110px) scale(1.045) rotateY(0deg);
  opacity:1;filter:none;z-index:6;
  border-color:rgba(217,189,164,.5);
  box-shadow:0 30px 70px -22px rgba(0,0,0,.72),0 0 0 1px rgba(217,189,164,.14)}

html.mx-on .c3d__camada[data-slot="1"]{
  transform:translate3d(calc(-50% - 54%  + var(--px,0)*-16px),calc(-50% + 5% + var(--py,0)*-10px),-110px) scale(.775) rotateY(21deg) rotateZ(-1.2deg);
  opacity:.58;filter:brightness(.68) saturate(.9) blur(1.3px);z-index:3;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.6)}

html.mx-on .c3d__camada[data-slot="2"]{
  transform:translate3d(calc(-50% + 54% + var(--px,0)*16px),calc(-50% + 8% + var(--py,0)*10px),-150px) scale(.72) rotateY(-21deg) rotateZ(1.2deg);
  opacity:.48;filter:brightness(.62) saturate(.88) blur(2px);z-index:2;
  box-shadow:0 18px 44px -20px rgba(0,0,0,.6)}

/* respiro interno · nao briga com o transform do slot */
html.mx-on .c3d__camada>picture{display:block;width:100%;height:100%}
html.mx-on .c3d__camada[data-slot="0"]>picture{animation:c3dRespiro 7.5s ease-in-out infinite alternate}
@keyframes c3dRespiro{from{transform:scale(1.005) translateY(-.7%)}to{transform:scale(1.05) translateY(.7%)}}

/* halo que segue a foto da frente */
html.mx-on .c3d__brilho{
  width:78%;height:64%;filter:blur(46px);
  animation:mxRespira 9s ease-in-out infinite;z-index:1}

/* aurora lenta atras do palco · profundidade sem peso */
html.mx-on .c3d__palco::before{
  content:"";position:absolute;inset:-16% -10%;z-index:0;pointer-events:none;border-radius:50%;
  background:radial-gradient(46% 42% at 32% 34%,rgba(217,189,164,.17),transparent 68%),
             radial-gradient(40% 38% at 70% 66%,rgba(198,142,152,.14),transparent 70%);
  filter:blur(30px);animation:c3dAurora 26s ease-in-out infinite alternate}
@keyframes c3dAurora{
  from{transform:translate3d(-3%,-2%,0) scale(1)}
  to  {transform:translate3d(4%,3%,0) scale(1.1)}}

/* toque/clique numa foto de tras traz ela pra frente */
html.mx-on .c3d__camada:focus-visible{outline:2px solid rgba(217,189,164,.95);outline-offset:5px}

/* ---------- 11. CABECALHO DO CELULAR ---------- */
@media (max-width:760px){
  html.mx-on header{position:sticky;top:0;z-index:70;
    background:rgba(22,21,25,.82);backdrop-filter:blur(16px) saturate(1.25);
    -webkit-backdrop-filter:blur(16px) saturate(1.25);
    border-bottom:1px solid rgba(236,226,215,.1)}
  html.mx-on header>div{padding:11px 18px!important;flex-wrap:nowrap!important;gap:12px!important}
  html.mx-on header>div>a>span:first-child{font-size:18px!important;line-height:1.12!important}
  html.mx-on header>div>a>span:nth-child(2){display:none!important}
  html.mx-on header nav{display:none!important}

  html.mx-on .mx-burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:0 10px;flex:0 0 auto;margin-left:auto;
    background:transparent;border:1px solid rgba(236,226,215,.2);border-radius:12px;cursor:pointer}
  html.mx-on .mx-burger span{display:block;height:1.6px;width:100%;border-radius:2px;
    background:rgb(233,225,215);transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .22s ease}
  html.mx-on .mx-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
  html.mx-on .mx-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  html.mx-on .mx-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

  html.mx-on .mx-gaveta{
    position:fixed;inset:0;z-index:65;display:flex;flex-direction:column;
    justify-content:center;gap:6px;padding:96px 30px 40px;
    background:linear-gradient(168deg,rgba(20,19,23,.985),rgba(30,26,30,.985));
    backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
    opacity:0;visibility:hidden;transition:opacity .34s ease,visibility .34s}
  html.mx-on .mx-gaveta.mx-aberta{opacity:1;visibility:visible}
  html.mx-on .mx-gaveta a{
    font-family:"Cormorant Garamond",Georgia,serif;font-size:30px;line-height:1.9;
    color:rgb(240,233,225);text-decoration:none;letter-spacing:.012em;
    opacity:0;transform:translateY(16px);
    transition:opacity .5s ease,transform .5s cubic-bezier(.2,.85,.25,1),color .2s}
  html.mx-on .mx-gaveta.mx-aberta a{opacity:1;transform:none}
  html.mx-on .mx-gaveta a:nth-child(1){transition-delay:.07s}
  html.mx-on .mx-gaveta a:nth-child(2){transition-delay:.13s}
  html.mx-on .mx-gaveta a:nth-child(3){transition-delay:.19s}
  html.mx-on .mx-gaveta a:nth-child(4){transition-delay:.25s}
  html.mx-on .mx-gaveta a.mx-cta-menu{
    margin-top:26px;font-family:inherit;font-size:16.5px;font-weight:600;
    text-align:center;padding:16px 22px;border-radius:999px;
    background:linear-gradient(135deg,rgb(226,197,171),rgb(214,177,158));
    color:rgb(31,27,26);transition-delay:.31s;line-height:1.2;
    box-shadow:0 14px 34px -14px rgba(217,189,164,.6)}
  html.mx-on body.mx-travado{overflow:hidden}
  html.mx-on .c3d__camada{width:62%!important}
}
@media (min-width:761px){html.mx-on .mx-burger,html.mx-on .mx-gaveta{display:none!important}}

/* ---------- 12. MODO SUAVE tambem gira, so que sem deslocar ---------- */
html.mx-suave .c3d__camada{
  transform:translate(-50%,-50%)!important;animation:none!important;
  transition:opacity 1.1s ease,filter 1.1s ease!important}
html.mx-suave .c3d__camada[data-slot="0"]{opacity:1;filter:none;z-index:6}
html.mx-suave .c3d__camada[data-slot="1"]{opacity:0;filter:none;z-index:3}
html.mx-suave .c3d__camada[data-slot="2"]{opacity:0;filter:none;z-index:2}
html.mx-suave .c3d__camada>picture,html.mx-suave .c3d__palco::before{animation:none!important}
html.mx-suave .mx-gaveta a{transform:none!important}

/* ---------- 13. CARROSSEL NO CELULAR: BARALHO EMPILHADO ----------
   Leque aberto so cabe no desktop. Em 390px as fotos de tras viravam
   sobreposicao suja. Aqui elas ficam ATRAS, espiando pelas bordas —
   fica claro que ha mais fotos, e a troca continua obvia. */
@media (max-width:760px){
  html.mx-on .c3d__palco{aspect-ratio:1/1.2;perspective:1100px}
  html.mx-on .c3d__camada{width:60%!important}

  html.mx-on .c3d__camada[data-slot="0"]{
    transform:translate3d(calc(-50% + var(--px,0)*5px),calc(-50% + var(--py,0)*4px),70px) scale(1) rotateY(0deg) rotateZ(0deg);
    opacity:1;filter:brightness(1.05) contrast(1.03);z-index:6}

  html.mx-on .c3d__camada[data-slot="1"]{
    transform:translate3d(calc(-50% - 26%),calc(-50% - 2%),-70px) scale(.88) rotateY(9deg) rotateZ(-2deg);
    opacity:.74;filter:brightness(.82) saturate(.94) blur(.9px);z-index:4}

  html.mx-on .c3d__camada[data-slot="2"]{
    transform:translate3d(calc(-50% + 26%),calc(-50% + 3%),-110px) scale(.81) rotateY(-11deg) rotateZ(2.4deg);
    opacity:.62;filter:brightness(.72) saturate(.9) blur(1.4px);z-index:3}

  html.mx-on .c3d__palco::before{inset:-8% -4%;filter:blur(24px)}
  html.mx-on .c3d__brilho{width:70%;height:58%;filter:blur(36px)}
}
html.mx-suave .c3d__camada[data-slot="0"]{filter:none!important}