/* v3 · movimento e marca (brandbook oficial v1.0). Tudo desliga com prefers-reduced-motion. */
:root{--pink:#FF006E;--pink-deep:#C8005A;--ease:cubic-bezier(.2,.7,.2,1)}

/* Assinatura: COMUNIDADE / Viver no Japão */
.brand>span{display:flex;flex-direction:column;line-height:1}
.brand>span small{font-size:10px!important;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#6b6b68!important;margin:0 0 5px}
.brand>span strong{font-weight:800;letter-spacing:-.025em}
.brand img{transition:transform .5s var(--ease)}
.brand:hover img{transform:rotate(-8deg) scale(1.06)}
.footer strong{flex-direction:column;align-items:flex-start!important;gap:0!important}
.footer strong small{display:block;font-size:11px;font-weight:600;letter-spacing:.16em;opacity:.7;margin-bottom:6px}

/* Barra de progresso de leitura */
.scroll-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:var(--pink);transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:1000;pointer-events:none}

/* Header compacto ao rolar */
.header{transition:min-height .35s var(--ease),padding .35s var(--ease),box-shadow .35s var(--ease)}
.header.is-scrolled{box-shadow:0 0 0 100vmax #fff,0 10px 30px -18px rgba(0,0,0,.35)}

/* Botões e links */
.button{transition:background-color .25s,transform .25s var(--ease),box-shadow .25s}
.button:hover{background:var(--pink-deep)!important;transform:translateY(-2px);box-shadow:0 12px 28px -12px rgba(255,0,110,.55)}
.button:active{transform:translateY(0)}
.button svg,.button .arrow{transition:transform .25s var(--ease)}
.button:hover svg,.button:hover .arrow{transform:translate(3px,-3px)}
.text-link,.app-help a{background:linear-gradient(var(--pink),var(--pink)) 0 100%/0 2px no-repeat;transition:background-size .35s var(--ease)}
.text-link:hover,.app-help a:hover{background-size:100% 2px}
.section-marker b{display:inline-block;transition:transform .35s var(--ease),color .35s}
.section:hover .section-marker b,section:hover>.section-marker b{transform:translateX(6px);color:var(--pink)}

/* Cartões: sobe um pouco e a imagem aproxima */
.module summary,.master-examples li,.quote-card,.tribe-card,.audience-grid article,.vlog-grid article,.life-grid article,.how-grid article,.tool-benefits article{transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.module summary img,.master-examples li img,.vlog-grid article img,.audience-grid article img{transition:transform .8s var(--ease),filter .5s}
.module summary{overflow:hidden}
.module:hover summary,.master-examples li:hover,.quote-card:hover,.tribe-card:hover,.vlog-grid article:hover,.how-grid article:hover,.tool-benefits article:hover{transform:translateY(-6px)}
.module:hover summary img,.master-examples li:hover img,.vlog-grid article:hover img,.audience-grid article:hover img{transform:scale(1.04)}
.master-examples li,.vlog-grid article .youtube-frame{overflow:hidden}
.module:hover summary img{box-shadow:0 18px 40px -20px rgba(255,0,110,.6)}

/* Faixa rosa em movimento */
.manifesto.marquee{overflow:hidden}
.manifesto.marquee .wrap{display:flex!important;flex-direction:row;flex-wrap:nowrap;align-items:center;width:max-content!important;max-width:none;min-height:0;padding:34px 0!important;gap:0!important;margin:0;animation:vnj-marquee 38s linear infinite}
.manifesto.marquee:hover .wrap{animation-play-state:paused}
.manifesto.marquee .wrap>*{white-space:nowrap;padding:0 28px;margin:0;display:block;font-size:clamp(18px,1.8vw,24px)!important;font-weight:900!important;letter-spacing:-.01em!important;text-transform:uppercase;line-height:1}
.manifesto.marquee .wrap>*::after{content:"";display:inline-block;vertical-align:middle;width:7px;height:7px;border-radius:50%;background:#fff;margin-left:56px;opacity:.85}
@keyframes vnj-marquee{to{transform:translateX(-50%)}}

/* Entrada no scroll */
.m-in{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 80ms)}
.m-in.m-shown{opacity:1;transform:none}
.section-marker{position:relative}
.section-marker.m-line::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:currentColor;opacity:.35;transform:scaleX(0);transform-origin:0 50%;transition:transform 1.2s var(--ease)}
.section-marker.m-line.m-shown::before{transform:scaleX(1)}

/* Manchetes: palavras sobem em sequência */
.m-words .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em;margin-bottom:-.06em}
.m-words .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s var(--ease);transition-delay:calc(var(--i,0) * 55ms)}
.m-words.m-shown .w>span{transform:none}

/* Luz rosa que acompanha o cursor no card da oferta */
.offer-card{position:relative;overflow:hidden;isolation:isolate}
.offer-card::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(255,0,110,.16),transparent 60%);opacity:0;transition:opacity .4s}
.offer-card:hover::before{opacity:1}

/* Parallax leve nas fotos do Japão */
.japan-card img,.japan-card video{will-change:transform}

@media (hover:none){.module:hover summary,.master-examples li:hover,.quote-card:hover,.tribe-card:hover,.vlog-grid article:hover,.how-grid article:hover,.tool-benefits article:hover{transform:none}}
@media (prefers-reduced-motion:reduce){
  .m-in,.m-words .w>span{opacity:1!important;transform:none!important}
  .section-marker.m-line::before{transform:none}
  .manifesto.marquee .wrap{animation:none;flex-wrap:wrap;width:auto}
  .scroll-progress{display:none}
}

/* Oferta: o rosa entra como luz, não como tinta */
.offer-section{background:radial-gradient(900px 520px at 88% 42%,rgba(255,0,110,.14),transparent 62%),#111}
.offer-card{border-color:#3b3b3b;box-shadow:0 30px 80px -40px rgba(255,0,110,.35)}