/* =========================================================
   Vida v2 — movimento ligado à rolagem.
   As variáveis --in (entrada), --out (saída) e --p (passagem)
   vêm do vida.js a cada quadro; descer avança, subir volta.
   Usa as propriedades translate/rotate/scale separadas para não
   brigar com o transform da inclinação 3D no hover.
   ========================================================= */

/* Intensidade: menor no celular */
:root{--amp:1}
@media (max-width:860px){:root{--amp:.55}}

/* ---------- Capa: ao descer, tudo se afasta; ao subir, volta ---------- */
html.vida-on .hero{--hp:0}
html.vida-on .hero .hero-copy,html.vida-on .hero .hero-summary{translate:0 calc(var(--hp) * -70px * var(--amp));opacity:calc(1 - var(--hp) * 1.2)}
html.vida-on .hero .hero-cutout{scale:calc(1 + var(--hp) * .05)}
html.vida-on .hero .hero-stage .hero-name{scale:calc(1 - var(--hp) * .04);opacity:calc(1 - var(--hp) * .35)}
html.vida-on .hero .hero-light{scale:calc(1 + var(--hp) * .06)}

/* Seta da capa */
.hero-scroll{position:absolute;left:3.2%;bottom:34px;z-index:6;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:#f5f1e714;border:1px solid #f5f1e730;color:var(--paper);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:opacity .5s,transform .5s,background .3s}
.hero-scroll svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:m-bob 1.8s ease-in-out infinite}
.hero-scroll:hover{background:#f5f1e72a}
html.vida-scrolled .hero-scroll{opacity:0;transform:translateY(12px);pointer-events:none}
@keyframes m-bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
@media (max-width:1099px){.hero-scroll{display:none}}

/* ---------- Títulos: palavras sobem em cascata e saem pelo topo ---------- */
.m-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.c-title em .m-w,.c-doctor-name em .m-w,.c-ages-copy h3 em .m-w{padding-bottom:.16em;margin-bottom:-.16em}
html.vida-on .m-title{--in:0;--out:0;translate:0 calc(var(--out) * -24px * var(--amp));opacity:calc(1 - var(--out) * .5)}
html.vida-on .m-title .m-w>span{display:inline-block;
  translate:0 calc((1 - clamp(0, var(--in) * 1.8 - var(--wi) * .06, 1)) * 105%)}

/* ---------- Fotos: sem cortina; só um parallax leve ao rolar ---------- */
html.vida-on .m-photo img{translate:0 calc((var(--p,.5) - .5) * -30px * var(--amp));scale:1.06}

/* ---------- Subida em cascata (cards, listas, painéis) ---------- */
html.vida-on .m-rise{--in:0;translate:0 calc((1 - var(--in)) * 48px * var(--amp));opacity:calc(.5 + var(--in) * .5)}


/* ---------- Entradas laterais ---------- */
html.vida-on .m-slide-l{--in:0;translate:calc((1 - var(--in)) * -50px * var(--amp)) 0;opacity:calc(.2 + var(--in) * .8)}
html.vida-on .m-slide-r{--in:0;translate:calc((1 - var(--in)) * 50px * var(--amp)) 0;opacity:calc(.2 + var(--in) * .8)}

/* ---------- Cartões que flutuam em ritmo próprio ---------- */
html.vida-on .m-drift{--p:.5;translate:0 calc((var(--p) - .5) * -40px * var(--amp))}


/* ---------- Faixa de palavras: agora controlada pelo JS ---------- */
html.vida-on .c-marquee-track{animation:none}

/* ---------- Linha do tempo: etapa ativa conforme a rolagem ---------- */
.c-timeline .c-tl-num{transition:background .5s,color .5s,border-color .5s,scale .5s cubic-bezier(.22,1,.36,1)}
.c-timeline li.is-active .c-tl-num{background:var(--olive);color:var(--beige);border-color:var(--olive);scale:1.12}
.c-timeline li h3{transition:color .5s}
.c-timeline li:not(.is-active) h3{color:#6b705b}

/* ---------- Folhas: giram e flutuam conforme a rolagem ---------- */
.m-leaf{position:absolute;z-index:0;pointer-events:none;width:var(--lw,90px);height:auto;color:var(--lc,#7e8a75);opacity:var(--lo,.22);
  translate:0 calc((var(--p,.5) - .5) * -90px * var(--sp,1) * var(--amp));
  rotate:calc(var(--lr,0deg) + (var(--p,.5) - .5) * 18deg * var(--sp,1));
  animation:m-sway 9s ease-in-out infinite alternate}
.m-leaf path{fill:currentColor}
.m-leaf .m-leaf-stem{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
@keyframes m-sway{from{transform:translate(0,0)}to{transform:translate(12px,-10px)}}
.c-sec>.container,.c-marquee{position:relative;z-index:1}

/* ---------- Cards: inclinação 3D + brilho ---------- */
.vida-tilt{transform-style:preserve-3d;will-change:transform;transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s}
.vida-tilt.vida-tilting{transition:transform .12s linear,box-shadow .6s}
.vida-glare{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;opacity:0;transition:opacity .5s;
  background:radial-gradient(460px circle at var(--gx,50%) var(--gy,50%),#ffffff33,transparent 45%)}
.vida-tilt:hover .vida-glare{opacity:1}
.c-card:hover{box-shadow:0 46px 90px -40px #252c1d99}

/* Botões atraídos pelo cursor + brilho que passa */
.vida-mag{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.button{position:relative;overflow:hidden}
.button::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(100deg,transparent,#ffffff55,transparent);transform:skewX(-18deg);transition:left .8s cubic-bezier(.22,1,.36,1)}
.button:hover::after{left:130%}


/* Reações ao mouse */
.c-manifesto .c-pillars li .c-ico,.c-doctor-list .c-ico,.c-mini .c-ico{transition:transform .5s cubic-bezier(.22,1,.36,1),background .35s,color .35s}
.c-manifesto .c-pillars li:hover .c-ico{transform:translateY(-4px) rotate(-8deg);background:var(--beige);color:var(--olive)}
.c-doctor-list li:hover .c-ico{transform:scale(1.1);background:var(--beige);color:var(--olive);border-color:var(--beige)}
.c-timeline li>div{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.c-timeline li:hover>div{transform:translateX(8px)}
.c-mini li{transition:transform .5s cubic-bezier(.22,1,.36,1),background .35s}
.c-mini li:hover{transform:translateY(-4px);background:#e6dfcf}
.c-ages-photo img,.c-manifesto-photo img,.c-doctor-frame img{transition:transform 1.4s cubic-bezier(.19,1,.22,1)}
.c-ages:hover .c-ages-photo img,.c-manifesto-media:hover .c-manifesto-photo img,.c-doctor-photo:hover .c-doctor-frame img{transform:scale(1.06)}
.c-follow-card,.c-help{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ---------- Mapa embutido ---------- */
.c-map{position:relative;min-height:460px}
.c-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.45) sepia(.15) contrast(.95)}
.c-map-badge{position:absolute;left:18px;bottom:18px;z-index:2;display:flex;align-items:center;gap:14px;padding:12px 20px 12px 12px;border-radius:20px;
  background:#f5f1e7d9;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 20px 40px -24px #252c1d99;color:var(--olive);pointer-events:none}
.c-map-badge .c-map-pin{width:46px;height:46px;box-shadow:none;animation:none}
.c-map-badge .c-map-pin svg{width:22px;height:22px}
.c-map-badge b{display:block;font:500 15px/1.3 var(--sans)}
.c-map-badge span span{font-size:12.5px;color:var(--muted)}

@media (max-width:700px){
  .m-leaf{--lw:70px!important}
  .m-band span{font-size:84px}
  .c-map{min-height:320px}
  .c-map-badge{left:10px;bottom:10px;right:10px}
}
@media (prefers-reduced-motion:reduce){
  .m-leaf,.hero-scroll svg{animation:none!important}
}

/* Medição das posições originais (por um instante, sem movimento) */
html.m-measure .m-title,html.m-measure .m-rise,html.m-measure .m-slide-l,html.m-measure .m-slide-r,
html.m-measure .m-drift,html.m-measure .m-leaf,html.m-measure .m-band,html.m-measure .m-photo{translate:none!important;rotate:none!important;scale:none!important}

/* Itens pequenos de lista: sobem menos e sem girar */
html.vida-on .c-doctor-list li.m-rise,html.vida-on .c-pillars li.m-rise,html.vida-on .c-mini li.m-rise,
html.vida-on .c-timeline li.m-rise,html.vida-on .c-faq-list details.m-rise{translate:0 calc((1 - var(--in)) * 22px * var(--amp))}

/* Letras do "LUDMILLA" (onda que segue o mouse) */
.m-letter{display:inline-block;transform-origin:50% 100%;will-change:transform}
.c-card-art img,.c-ages-photo img,.c-manifesto-photo img{transition:transform .9s cubic-bezier(.19,1,.22,1)}

/* =========================================================
   Suavização v3: só uma subida leve; nada lateral, nada girando
   ========================================================= */
html.vida-on .m-slide-l,html.vida-on .m-slide-r{translate:0 calc((1 - var(--in)) * 30px * var(--amp));opacity:calc(.55 + var(--in) * .45)}
html.vida-on .m-rise{translate:0 calc((1 - var(--in)) * 32px * var(--amp));opacity:calc(.55 + var(--in) * .45)}
html.vida-on .m-drift{translate:none;rotate:none}
html.vida-on .m-title{translate:none;opacity:1}
html.vida-on .m-title .m-w>span{translate:0 calc((1 - clamp(0, var(--in) * 2 - var(--wi) * .05, 1)) * 60%);opacity:calc(clamp(0, var(--in) * 2 - var(--wi) * .05, 1))}
.m-leaf{rotate:var(--lr,0deg);translate:0 calc((var(--p,.5) - .5) * -40px * var(--sp,1) * var(--amp));animation-duration:14s}
html.vida-on .hero .hero-copy,html.vida-on .hero .hero-summary{translate:0 calc(var(--hp) * -40px * var(--amp))}
html.vida-on .hero .hero-cutout,html.vida-on .hero .hero-light{scale:1}
html.vida-on .m-photo img{translate:0 calc((var(--p,.5) - .5) * -18px * var(--amp));scale:1.04}

/* Máscara das palavras com folga: não corta itálico, acentos nem descendentes */
.m-w,.c-title em .m-w,.c-doctor-name em .m-w,.c-ages-copy h3 em .m-w{padding:.12em .16em .2em;margin:-.12em -.16em -.2em}

/* Texto nítido: sem camada 3D fixa (deixava letras borradas com o zoom da página) */
.vida-tilt{will-change:auto;transform-style:flat}
.vida-tilt.vida-tilting{will-change:transform}
.m-letter{will-change:auto}
/* Celular: a capa não esmaece ao rolar (botão ficava acinzentado) */
@media (max-width:700px){html.vida-on .hero .hero-copy,html.vida-on .hero .hero-summary{opacity:1;translate:none}}
.vida-glare{display:none!important}