/* ORBTI — motion. Carrega por último, nas quatro páginas.
   Tudo aqui é enfeite: sem JS, com "reduzir movimento" ou com os efeitos pausados, o conteúdo aparece parado e inteiro. */

:root{interpolate-size:allow-keywords}

@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1}}
@keyframes drop{from{opacity:0;transform:translateY(-110%)}}
@keyframes broadcast{to{background-position-y:calc(var(--stripe) + var(--stripe-gap))}}
@keyframes float{to{transform:translateY(-14px)}}
@keyframes blink{50%{opacity:.25}}
@keyframes pulse-line{50%{transform:scaleY(.55)}}
@keyframes drift{from{transform:scale(1.1) translateY(-4%)}to{transform:scale(1.1) translateY(4%)}}

/* Entrada da página */
.hdr{animation:drop .9s var(--ease) both}
.hero-in>*,.area-hero .crumb,.area-head>div:first-child>*,.area-more{animation:rise .9s var(--ease) both}
.hero-in>:nth-child(2),.area-head>div:first-child>:nth-child(1){animation-delay:.08s}
.hero-in>:nth-child(3),.area-head>div:first-child>:nth-child(2){animation-delay:.16s}
.hero-in>:nth-child(4),.area-head>div:first-child>:nth-child(3){animation-delay:.26s}
.hero-in>:nth-child(5),.area-head>div:first-child>:nth-child(4){animation-delay:.36s}
.area-more{animation-delay:.5s}

/* O exemplo da frente se monta em sequência */
.specimen{animation:rise .9s .2s var(--ease) both}
.specimen>*{animation:rise .7s var(--ease) both}
.specimen>:nth-child(1){animation-delay:.45s}
.specimen>:nth-child(2){animation-delay:.75s}
.specimen>:nth-child(3){animation-delay:1.15s}
.specimen>:nth-child(4){animation-delay:1.55s}
.specimen>:nth-child(5){animation-delay:1.95s}
.map>*{animation:rise .6s var(--ease) both}
.map>:nth-child(1){animation-delay:.9s}
.map>:nth-child(2){animation-delay:1.1s}
.map>:nth-child(3){animation-delay:1.3s}
.map>:nth-child(4){animation-delay:1.5s}
.map>:nth-child(5){animation-delay:1.7s}
.rdl div{animation:rise .6s var(--ease) both}
.rdl div:nth-child(1){animation-delay:1s}
.rdl div:nth-child(2){animation-delay:1.2s}
.rdl div:nth-child(3){animation-delay:1.4s}

/* Movimento contínuo, lento: sóis listrados transmitem, o sol do hero flutua, o sinal pisca */
.spec-sun,.cta-sun,.g-stripes{animation:broadcast 1.6s linear infinite}
.spec-sun{animation:sunrise 1.4s var(--ease) both,broadcast 1.6s linear infinite}
.hero-sun{animation:sunrise 1.6s var(--ease) both,float 7s 1.6s ease-in-out infinite alternate}
.hero-labels .eyebrow i,.area-head .eyebrow i,.chat-status::before{animation:blink 2.4s ease-in-out infinite}
.chat-status::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--signal);margin-right:8px}
.g-trace .signal-line{transform-origin:50% 100%;animation:pulse-line 2.8s ease-in-out infinite}
.thinking .chat-message.pending p{animation:blink 1.2s ease-in-out infinite}

/* Entrada ao rolar: o app.js marca .rv em quem está abaixo da dobra e .in quando entra na tela */
.rv{opacity:0}
.rv.in{animation:rise .9s var(--d,0ms) var(--ease) both}

/* Dúvidas abrem com altura animada */
details::details-content{block-size:0;overflow:clip;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
details[open]::details-content{block-size:auto}

/* Toques de hover */
.method li{transition:background var(--duration-base),color var(--duration-base),transform var(--duration-base) var(--ease)}
.method li:hover{transform:translateY(-6px)}
.controls article,.qgrid article{transition:transform var(--duration-base) var(--ease)}
.controls article:hover,.qgrid article:hover{transform:translateY(-6px)}
.ledger article h3{transition:transform var(--duration-base) var(--ease)}
.ledger article:hover h3{transform:translateX(10px)}
.sheet{transition:transform var(--duration-base) var(--ease)}
.sheet:hover{transform:translateX(10px)}

/* ---------- Segunda camada: muito motion ---------- */
@keyframes turn{to{rotate:360deg}}
@keyframes word{from{opacity:0;transform:translateY(.6em) rotate(5deg)}to{opacity:1}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes pop{from{transform:scale(0)}}
@keyframes nudge{0%,70%,100%{translate:0 0}85%{translate:3px -3px}}
@keyframes par-sun{to{translate:0 -160px}}
@keyframes par-text{to{translate:0 90px;opacity:.15}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes breathe{to{clip-path:inset(0 0 0 14%)}}

/* Manchetes entram palavra a palavra (o app.js separa as palavras) */
.hw .w{display:inline-block;opacity:0}
.hw.in .w{animation:word .9s calc(var(--w) * 70ms) var(--ease) both}

/* Faixas em marquee */
.marquee{overflow:hidden;background:var(--orange);color:var(--espresso);padding:14px 0}
.marquee-track{display:flex;align-items:center;width:max-content;animation:marquee 32s linear infinite}
.marquee span{font:400 26px/1 var(--font-display);text-transform:uppercase;white-space:nowrap}
.marquee i{width:10px;height:10px;border-radius:50%;background:currentColor;margin:0 28px;flex:none}
.marquee.rev{background:none;color:var(--cream);border-block:2px solid var(--line-dark);padding:22px 0;margin-bottom:var(--section-y)}
.marquee.rev .marquee-track{animation-duration:44s;animation-direction:reverse}
.marquee.rev span{font-size:clamp(40px,6vw,84px)}
.marquee.rev i{width:18px;height:18px;background:var(--orange);margin:0 40px}

/* Mais movimento contínuo */
.cta-sun{animation:broadcast 1.6s linear infinite,turn 70s linear infinite}
.spec-sun{animation:sunrise 1.4s var(--ease) both,broadcast 1.6s linear infinite,turn 90s linear infinite}
.method b{animation:broadcast 1.6s linear infinite}
.orbit.spin{animation-duration:16s}
.hero-stripes{animation:sweep 1.4s .25s var(--ease) both,breathe 5s 1.8s ease-in-out infinite alternate}
.button.orange .ic{animation:nudge 3.2s ease-in-out infinite}
.timeline li.rv.in .n{animation:pop .6s calc(var(--d,0ms) + .25s) var(--ease) both}

/* Header some ao descer e volta ao subir */
.site-head{transition:transform .5s var(--ease)}
.site-head.hide{transform:translateY(-130%)}

/* ---------- Ligado à rolagem: o app.js escreve translate / scale / rotate em cada elemento ---------- */
.progress{position:fixed;inset:0 0 auto 0;height:4px;background:var(--signal);transform-origin:0 50%;scale:0 1;z-index:60}
/* Cortina: o hero anda mais devagar e o resto da página passa por cima dele */
:where(main>section:not(:first-child)),.marquee,.site-foot{position:relative;z-index:1}
:where(main>section:not(:first-child)){background-color:var(--color-bg)}
.site-foot{background:var(--espresso)}
.marquee-track.js{animation:none;will-change:transform}
.frame .window{isolation:isolate}
/* A linha do passo a passo se desenha conforme a rolagem */
.timeline::before{clip-path:inset(0 calc((1 - var(--draw,1)) * 100%) 0 0)}
@media(max-width:1000px){.timeline.four::before{clip-path:inset(0 0 calc((1 - var(--draw,1)) * 100%) 0)}}
@media(max-width:700px){.timeline::before{clip-path:inset(0 0 calc((1 - var(--draw,1)) * 100%) 0)}}

/* Efeitos pausados */
.motion-off .w{opacity:1!important;animation:none!important}
.motion-off .progress{display:none}
.motion-off .site-head{transform:none}
.motion-off .hero-stripes{animation:none!important}
.motion-off .rv{opacity:1!important;animation:none!important}
.motion-off .timeline::before{clip-path:none}
.motion-off .window img,.motion-off .hero-sun,.motion-off .spec-sun{animation:none!important}
@media(prefers-reduced-motion:reduce){.rv{opacity:1}}