/* Movimento inspirado na Lena Academy: texto que sobe palavra a palavra, brilho que varre,
   luz que segue o cursor, órbitas e ticker. Tudo desliga com "reduzir movimento" do sistema. */

/* Faixa superior */
.motion-ribbon{border-bottom:1px solid rgba(124,58,237,.14);background:linear-gradient(90deg,rgba(238,233,248,.92),rgba(226,215,252,.92) 50%,rgba(238,233,248,.92));overflow:hidden;position:relative}
.motion-ribbon::before,.motion-ribbon::after{content:"";position:absolute;top:0;bottom:0;width:48px;z-index:1;pointer-events:none}
.motion-ribbon::before{left:0;background:linear-gradient(90deg,var(--soft-lilac),transparent)}
.motion-ribbon::after{right:0;background:linear-gradient(-90deg,var(--soft-lilac),transparent)}
.ribbon-track{display:flex;width:max-content}
.ribbon-group{display:flex;align-items:center;flex-shrink:0;gap:36px;padding:10px 18px;font-size:9px;font-weight:700;letter-spacing:1.6px;color:var(--ink-purple);white-space:nowrap}
.ribbon-group>span{display:flex;gap:36px;align-items:center}
.ribbon-group>span::after{content:"✦";font-size:11px;color:var(--violet)}
.ribbon-group[aria-hidden]{display:none}
html[data-motion="running"] .ribbon-group[aria-hidden]{display:flex}
html[data-motion="running"] .ribbon-track:not(.is-driven){animation:ribbon-drift 48s linear infinite}
@keyframes ribbon-drift{to{transform:translateX(-50%)}}

/* Sem JS ou com movimento reduzido: faixa estática */
html:not([data-motion="running"]) .ribbon-group{white-space:normal;flex-wrap:wrap;justify-content:center;gap:8px 20px;padding-inline:20px;font-size:8px}
html:not([data-motion="running"]) .ribbon-group>span{gap:20px}
html:not([data-motion="running"]) .ribbon-track{width:100%}
html:not([data-motion="running"]) .motion-ribbon::before,html:not([data-motion="running"]) .motion-ribbon::after{display:none}

/* Fundo: luz lilás por trás do vidro, com paralaxe de rolagem e cursor */
.aurora{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;will-change:transform}
.aurora i:nth-child(1){width:60vmax;height:60vmax;left:-20vmax;top:-18vmax;background:radial-gradient(circle,rgba(167,139,250,.5),transparent 64%);transform:translate3d(calc(var(--px,0) * 26px),calc(var(--sy,0) * -.07px + var(--py,0) * 18px),0)}
.aurora i:nth-child(2){width:52vmax;height:52vmax;right:-18vmax;top:20vh;background:radial-gradient(circle,rgba(233,213,255,.85),transparent 64%);transform:translate3d(calc(var(--px,0) * -30px),calc(var(--sy,0) * -.12px + var(--py,0) * -14px),0)}
.aurora i:nth-child(3){width:46vmax;height:46vmax;left:18vw;bottom:-22vmax;background:radial-gradient(circle,rgba(251,207,232,.6),transparent 64%);transform:translate3d(calc(var(--px,0) * 20px),calc(var(--sy,0) * -.04px),0)}

/* Palavras que sobem (títulos) */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.16em;margin-bottom:-.16em;padding-right:.04em}
.w>span{display:inline-block}
html[data-motion="running"] .words:not([data-split]){visibility:hidden;animation:force-show 0s 1.6s forwards}
@keyframes force-show{to{visibility:visible}}
html[data-motion="running"] .words[data-split]:not(.in) .w>span{transform:translateY(118%)}
html[data-motion="running"] .words[data-split].in .w>span{animation:word-up 1s var(--ease) both;animation-delay:calc(var(--i) * 70ms)}
@keyframes word-up{from{transform:translateY(118%)}to{transform:none}}

/* Brilho que varre os ícones de vidro e giro do metal */
html[data-motion="running"] .gem::after{animation:gem-glint 6.5s var(--ease) infinite;animation-delay:calc(var(--d,0) * 1s);translate:-130% 0}
@keyframes gem-glint{0%,52%{translate:-130% 0}100%{translate:130% 0}}
html[data-motion="running"] .gem-rim,html[data-motion="running"] .tile--academy::after{animation:rim-spin 9s linear infinite}
html[data-motion="running"] .tile--academy::after{animation-duration:14s}
@keyframes rim-spin{to{--ang:360deg}}

/* Academy */
html[data-motion="running"] .academy-orbit{animation:academy-orbit 70s linear infinite}
html[data-motion="running"] .academy-orbit--reverse{animation-duration:95s;animation-direction:reverse}
@keyframes academy-orbit{to{transform:rotate(360deg)}}
.academy-cta::before{content:"";position:absolute;inset:0 auto 0 0;width:42%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);transform:translateX(-160%) skewX(-18deg);pointer-events:none;z-index:-1}
html[data-motion="running"] .academy-cta::before{animation:academy-sheen 5.5s var(--ease) 1.3s infinite}
@keyframes academy-sheen{0%,8%{transform:translateX(-160%) skewX(-18deg)}42%,100%{transform:translateX(390%) skewX(-18deg)}}

/* Rolagem: cada card ganha foco ao cruzar o centro da tela */
html[data-motion="running"] .tile{--lift:calc(var(--f,0) * -3px)}
html[data-motion="running"] .tile:hover{--lift:-5px}
html[data-motion="running"] .tile::before{opacity:calc(.3 + var(--f,0) * .5)}
html[data-motion="running"] .tile:hover::before{opacity:1}

@media(hover:none){.tile:hover{--lift:0px}.tile:hover .go,.tile:hover .gem{transform:none}}
html[data-motion="reduced"] .tile{transform:none}
html[data-motion="reduced"] .gem::after{display:none}