/* =========================================================================
   Lumin'área · A luz do site (veio da proposta de 29/09, entrou no oficial em 05/10) das PÁGINAS INTERNAS, 29/09/2026
   A regra da Carol: o layout que a Cinara aprovou não muda. Nenhuma caixa,
   tamanho, alinhamento, botão ou cor de fundo. O que entra aqui é só
   movimento, com uma assinatura de luz, porque a casa é a luz. Todo
   movimento termina exatamente no desenho aprovado, e tudo desliga para
   quem pediu menos movimento no aparelho.

   A família, que vale em todas as internas:
     · a foto da abertura deriva devagar, e um feixe de luz atravessa
     · o texto da abertura chega em camadas, e o fio amarelo do rótulo cresce
     · a palavra acesa ganha uma passada de luz
     · as fotos acendem, da penumbra para a cor
     · as listas entram uma a uma
   E cada página tem um gesto só dela, marcado abaixo com o nome da página.
   ========================================================================= */

#pagina{
  --lento:cubic-bezier(.22,.61,.36,1);
  --ri-passo:90ms;
}

/* ---------- A ABERTURA: a foto deriva, o feixe atravessa ---------- */
#pagina .capa picture img{
  animation:ri-deriva 28s var(--lento) infinite alternate;
  transform-origin:60% 45%;
  will-change:transform;
}
@keyframes ri-deriva{from{transform:scale(1.06)}to{transform:scale(1)}}

/* o texto fica por cima do feixe, sem mudar de lugar */
#pagina .capa .capa-texto{z-index:2}
#pagina .capa:not(.capa-limpa)::after{
  content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:34%;
  z-index:1;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(255,236,170,0) 0%,rgba(255,236,170,.10) 38%,
    rgba(255,246,214,.19) 50%,rgba(255,236,170,.10) 62%,rgba(255,236,170,0) 100%);
  mix-blend-mode:screen;
  opacity:0;
  transform:translateX(-110%) rotate(var(--ri-angulo,14deg));
  animation:ri-feixe var(--ri-feixe,17s) var(--lento) .8s infinite;
}
@keyframes ri-feixe{
  0%{opacity:0;transform:translateX(-110%) rotate(var(--ri-angulo,14deg))}
  8%{opacity:1}
  52%{opacity:1;transform:translateX(320%) rotate(var(--ri-angulo,14deg))}
  58%,100%{opacity:0;transform:translateX(320%) rotate(var(--ri-angulo,14deg))}
}

/* o texto da abertura chega em camadas: rótulo, título, apoio, ação */
#pagina .capa.ri-capa .capa-texto > *{
  opacity:0;transform:translateY(14px);
  transition:opacity 1.3s var(--lento),transform 1.6s var(--lento);
}
#pagina .capa.ri-capa.ri-vem .capa-texto > *{opacity:1;transform:none}
#pagina .capa.ri-capa .capa-texto > :nth-child(1){transition-delay:.1s}
#pagina .capa.ri-capa .capa-texto > :nth-child(2){transition-delay:.28s}
#pagina .capa.ri-capa .capa-texto > :nth-child(3){transition-delay:.55s}
#pagina .capa.ri-capa .capa-texto > :nth-child(4){transition-delay:.7s}
#pagina .capa.ri-capa .capa-texto > :nth-child(5){transition-delay:.85s}
#pagina .capa.ri-capa .capa-texto > :nth-child(n+6){transition-delay:1s}

/* ---------- AS FOTOS ACENDEM, da penumbra para a cor ----------
   A foto termina no mesmo filtro que o site aprovado já usa nela. */
#pagina .ri-foto img{transition:filter 2.2s var(--lento) var(--ri-atraso,0s),transform 2.4s var(--lento)}
#pagina .ri-foto:not(.ri-acesa) img{filter:saturate(.35) contrast(1.02) sepia(.55) brightness(.66)}

/* ---------- AS LISTAS ENTRAM UMA A UMA ---------- */
#pagina .ri-espera > li{
  opacity:0;transform:translateY(10px);
  transition:opacity 1s var(--lento) calc(var(--i,0) * var(--ri-passo)),
             transform 1.2s var(--lento) calc(var(--i,0) * var(--ri-passo));
}
#pagina .ri-espera.ri-entrou > li{opacity:1;transform:none}

/* o brilho que atravessa cada cartão sai em sequência, um depois do outro */
#pagina .rasc-brilho.entrou::after{animation-delay:calc(.5s + var(--i,0) * .32s)}

/* ---------- O PERCURSO: cada passo se acende no fio de cima ----------
   Nos quatro passos de Bendita Pausa, Bem-dita Fala! e Para Empresas. O fio
   de luz se desenha sobre o fio de cor que já existe, e depois se apaga,
   deixando o cartão exatamente como era. */
#pagina .ri-percurso > li{position:relative}
#pagina .ri-percurso > li::after{
  content:"";position:absolute;left:-1px;right:-1px;top:-3px;height:3px;
  background:var(--luz);pointer-events:none;
  transform:scaleX(0);transform-origin:left center;opacity:0;
}
#pagina .ri-percurso.ri-entrou > li::after{
  animation:ri-passo-acende 3.2s var(--lento) calc(.4s + var(--i,0) * var(--ri-degrau,.55s)) 1 both;
}
@keyframes ri-passo-acende{
  0%{transform:scaleX(0);opacity:1}
  45%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(1);opacity:0}
}

/* ==========================================================================
   OS GESTOS DE CADA PÁGINA
   ========================================================================== */

/* ---- A CASA · a casa acende cômodo a cômodo ----
   As palavras da abertura chegam uma a uma, e as fotos da galeria acendem
   em sequência, como quem vai ligando a luz de cada ambiente. */
#pagina .capa.ri-capa .palavras-casa li{
  opacity:0;transition:opacity 1.2s var(--lento);
}
#pagina .capa.ri-capa.ri-vem .palavras-casa li{opacity:1}
#pagina .capa.ri-capa .palavras-casa li:nth-child(1){transition-delay:.9s}
#pagina .capa.ri-capa .palavras-casa li:nth-child(2){transition-delay:1.1s}
#pagina .capa.ri-capa .palavras-casa li:nth-child(3){transition-delay:1.3s}
#pagina .capa.ri-capa .palavras-casa li:nth-child(4){transition-delay:1.5s}
#pagina .capa.ri-capa .palavras-casa li:nth-child(5){transition-delay:1.7s}

/* as fotos respiram dentro da moldura ao rolar, sem a moldura sair do lugar */
#pagina .ri-respira img{transform:translate3d(0,var(--ri-y,0px),0) scale(1.05)}

/* ---- EXPERIÊNCIAS · as três portas acendem uma a uma ---- */
#pagina[data-ri-rota="experiencias-lumi"]{--ri-feixe:15s}

/* ---- SELF MENTORING · a luz percorre a margem das listas ----
   Um ponto de luz desce pela margem de cor de cada lista quando ela chega,
   e some no fim. A margem continua a mesma. */
#pagina[data-ri-rota="self-mentoring"] .sinais-empresa.ri-espera{position:relative}
#pagina[data-ri-rota="self-mentoring"] .sinais-empresa.ri-espera::after{
  content:"";position:absolute;left:-2px;top:0;width:2px;height:72px;
  background:linear-gradient(180deg,rgba(240,203,0,0),var(--luz) 50%,rgba(240,203,0,0));
  pointer-events:none;opacity:0;
}
#pagina[data-ri-rota="self-mentoring"] .sinais-empresa.ri-entrou::after{
  animation:ri-percorre 3.4s var(--lento) .2s 1 both;
}
@keyframes ri-percorre{
  0%{top:0;opacity:0}
  12%{opacity:1}
  85%{opacity:1}
  100%{top:calc(100% - 72px);opacity:0}
}

/* ---- MEDIT_AÇÃO · um ponto de luz por vez ----
   A lista entra mais devagar, no ritmo de quem respira, e cada losango
   acende por um instante quando o item chega, voltando depois à cor dele. */
#pagina[data-ri-rota="medit-acao"]{--ri-passo:170ms;--ri-feixe:20s}
#pagina[data-ri-rota="medit-acao"] .sinais-empresa.ri-entrou > li::before{
  animation:ri-ponto 2s var(--lento) calc(.35s + var(--i,0) * var(--ri-passo)) 1 both;
}
@keyframes ri-ponto{
  0%{border-color:var(--terra);background-color:rgba(240,203,0,0);box-shadow:0 0 0 rgba(240,203,0,0)}
  35%{border-color:var(--luz);background-color:rgba(240,203,0,.55);box-shadow:0 0 12px rgba(240,203,0,.55)}
  100%{border-color:var(--terra);background-color:rgba(240,203,0,0);box-shadow:0 0 0 rgba(240,203,0,0)}
}

/* ---- BENDITA PAUSA · o percurso se acende com uma pausa entre os passos ----
   O feixe da abertura também anda mais devagar e descansa mais. */
#pagina[data-ri-rota="bendita-pausa"]{--ri-degrau:.95s;--ri-feixe:22s;--ri-angulo:10deg}

/* ---- BEM-DITA FALA! · a fala ganha nitidez ----
   As frases em destaque chegam fora de foco e assentam, como uma fala que
   vai ficando clara. Terminam exatamente como eram. */
#pagina[data-ri-rota="bem-dita-fala"] .ri-nitidez{
  filter:blur(5px);opacity:.25;
  transition:filter 1.8s var(--lento) .15s,opacity 1.4s var(--lento) .15s;
}
#pagina[data-ri-rota="bem-dita-fala"] .ri-nitidez.ri-entrou{filter:none;opacity:1}

/* ---- PARA EMPRESAS · cada frente se abre com um fio de luz ----
   A régua de cima de cada uma das três formas de trabalhar ganha um fio de
   luz que corre de ponta a ponta e se apaga. */
#pagina .forma-empresa.ri-frente{position:relative}
#pagina .forma-empresa.ri-frente::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;
  background:var(--luz);pointer-events:none;
  transform:scaleX(0);transform-origin:left center;opacity:0;
}
#pagina .forma-empresa.ri-frente.ri-entrou::before{animation:ri-passo-acende 3.4s var(--lento) .3s 1 both}

/* ---- VIVÊNCIAS PARA PARCEIROS · as condições se riscam uma a uma ----
   O traço de cada condição cresce da esquerda quando ela chega. */
#pagina .condicoes .ri-espera > li::before,
#pagina .condicoes ul.ri-espera > li::before{
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.1s var(--lento) calc(.25s + var(--i,0) * 140ms);
}
#pagina .condicoes .ri-espera.ri-entrou > li::before{transform:none}

/* ---- A PÁGINA DO ENCONTRO · a foto acende e o fio do pé se desenha ---- */
#pagina .bolinha.ri-foto::after{
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.8s var(--lento) calc(var(--ri-atraso,0s) + .9s);
}
#pagina .bolinha.ri-foto.ri-acesa::after{transform:none}

/* ---------- respeito a quem pediu menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  #pagina .capa picture img{animation:none}
  #pagina .capa::after{display:none}
  #pagina .capa.ri-capa .capa-texto > *,
  #pagina .capa.ri-capa .palavras-casa li,
  #pagina .ri-espera > li{opacity:1;transform:none;transition:none}
  #pagina .ri-foto img{transition:none}
  #pagina .ri-respira img{transform:none}
  #pagina .ri-percurso > li::after,
  #pagina .forma-empresa.ri-frente::before,
  #pagina .sinais-empresa::after{display:none}
  #pagina .sinais-empresa > li::before{animation:none}
  #pagina .ri-nitidez{filter:none;opacity:1;transition:none}
  #pagina .condicoes li::before,#pagina .bolinha::after{transform:none;transition:none}
}

/* no celular fica só o que é leve: a foto da abertura não deriva sem parar,
   e o feixe de luz atravessa uma vez só, quando a página abre */
@media (hover:none){
  #pagina .capa picture img{animation:none}
  #pagina .capa:not(.capa-limpa)::after{animation-iteration-count:1}
}