/* =========================================================================
   Lumin'área · A luz do site (veio da proposta de 29/09, entrou no oficial em 05/10), 29/09/2026, segunda versão
   A Carol viu a primeira e decidiu: o layout que a Cinara aprovou NÃO muda.
   Nenhuma caixa some, nenhum cartão perde o fundo, nada desalinha, nenhum
   título muda de tamanho, nenhum botão muda de forma, nenhuma cor de fundo
   muda. O que este arquivo faz é só movimento por cima do que já existe, e
   todo movimento termina exatamente no desenho aprovado.
   Tirar este arquivo devolve o site ao que era. Tudo desliga para quem pediu
   menos movimento no aparelho.
   ========================================================================= */

:root{
  --lento:cubic-bezier(.22,.61,.36,1);
  /* o filtro que o site aprovado já usa nas fotos, e é onde a luz termina */
  --foto-aprovada:saturate(.85) contrast(1.02) sepia(.08);
  /* a foto antes da luz chegar: o mesmo filtro, só que ainda na penumbra */
  --foto-penumbra:saturate(.35) contrast(1.02) sepia(.55) brightness(.66);
}

/* ---------- 1 · A ABERTURA: a foto deriva devagar, e a caixa fica ---------- */
html #abertura .parallax-foto img{
  animation:rasc-deriva 26s var(--lento) infinite alternate;
  transform-origin:62% 40%;
  will-change:transform;
}
@keyframes rasc-deriva{from{transform:scale(1.07)}to{transform:scale(1)}}

/* ---------- 2 · A PALAVRA ACESA: a luz passa por ela uma vez ---------- */
html .rasc-varre{
  background:linear-gradient(100deg,var(--luz) 0%,var(--luz) 40%,#FFF6C8 50%,var(--luz) 60%,var(--luz) 100%);
  background-size:260% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:background-position 2.6s var(--lento) .4s;
}
html .entrou .rasc-varre,html .rasc-varre.entrou{background-position:0 0}

/* ---------- 3 · O RÓTULO: o fio amarelo cresce quando a seção chega ----------
   Cresce por escala, e não por largura: o fio termina com os mesmos 20px do
   desenho aprovado, e o texto do rótulo não anda nem um pixel. */
html .rasc-fio .tick{transform:scaleX(0);transform-origin:left center;transition:transform 1.4s var(--lento) .3s}
html .rasc-fio.entrou .tick{transform:none}

/* ---------- 4 · OS CINCO COMPROMISSOS: cada ícone se desenha num traço ---------- */
html .tarja-pilares .icone *{
  stroke-dasharray:var(--traco,120);
  stroke-dashoffset:var(--traco,120);
  transition:stroke-dashoffset 2.4s var(--lento);
}
html .tarja-pilares li:nth-child(2) .icone *{transition-delay:.18s}
html .tarja-pilares li:nth-child(3) .icone *{transition-delay:.36s}
html .tarja-pilares li:nth-child(4) .icone *{transition-delay:.54s}
html .tarja-pilares li:nth-child(5) .icone *{transition-delay:.72s}
html .tarja-pilares.entrou .icone *{stroke-dashoffset:0}

/* ---------- 5 · AS FOTOS ACENDEM: da penumbra para a cor, como a luz entrando ---------- */
html .rasc-foto img{transition:filter 2.2s var(--lento),transform 2.4s var(--lento)}
html .rasc-foto:not(.entrou) img{filter:var(--foto-penumbra)}

/* ---------- 6 · O CARTÃO: um brilho de luz atravessa uma vez quando chega ---------- */
html .rasc-brilho{position:relative;overflow:hidden}
html .rasc-brilho::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:55%;
  pointer-events:none;z-index:3;
  background:linear-gradient(100deg,rgba(255,246,210,0) 0%,rgba(255,246,210,.38) 50%,rgba(255,246,210,0) 100%);
  transform:translateX(-120%) skewX(-12deg);
}
html .rasc-brilho.entrou::after{animation:rasc-brilho 2.6s var(--lento) .5s 1 both}
@keyframes rasc-brilho{from{transform:translateX(-120%) skewX(-12deg)}to{transform:translateX(260%) skewX(-12deg)}}

/* ---------- 7 · O BOTÃO: uma luz corre por dentro no mouse, e ele não muda ----------
   O botão continua com a mesma forma, o mesmo fundo e o mesmo fio amarelo
   embaixo que já tinha. O que entra é só um reflexo que atravessa. */
html .btn-linha::before,
html .btn-solido::before{
  content:"";position:absolute;top:0;bottom:0;left:0;width:45%;
  pointer-events:none;
  background:linear-gradient(100deg,rgba(255,246,210,0),rgba(255,246,210,.42),rgba(255,246,210,0));
  transform:translateX(-130%);
}
html .btn-linha:hover::before,
html .btn-solido:hover::before{animation:rasc-reflexo 1.3s var(--lento) 1}
@keyframes rasc-reflexo{from{transform:translateX(-130%)}to{transform:translateX(330%)}}

/* ---------- 8 · A LUZ QUE SEGUE O MOUSE, aprovada por ela, bem mais baixa ---------- */
.rasc-halo{
  position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;
  border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(240,203,0,.07) 0%,rgba(240,203,0,.025) 40%,transparent 70%);
  mix-blend-mode:multiply;
  opacity:0;transition:opacity 1.2s var(--lento);
  will-change:transform;
}
.rasc-halo.vivo{opacity:1}

/* ---------- 9 · AS FOTOS: flutuam de leve e aproximam devagar no mouse ---------- */
html .casa-foto{will-change:transform}
html .casa-foto img,
html .entrada figure img,
html .historia-foto img{transition:transform 2.4s var(--lento),filter 2.2s var(--lento)}
@media (hover:hover){
  html .casa-foto:hover img,
  html .entrada:hover figure img,
  html .historia-foto:hover img{transform:scale(1.04)}
}

/* ---------- respeito a quem pediu menos movimento ---------- */
@media (prefers-reduced-motion:reduce){
  html #abertura .parallax-foto img{animation:none}
  .rasc-halo{display:none}
  html .rasc-varre{transition:none;background-position:0 0}
  html .rasc-fio .tick{transform:none;transition:none}
  html .tarja-pilares .icone *{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  html .rasc-foto:not(.entrou) img{filter:var(--foto-aprovada)}
  html .rasc-foto img{transition:none}
  html .rasc-brilho::after,html .btn-linha::before,html .btn-solido::before{display:none}
  html .casa-foto:hover img,html .entrada:hover figure img,html .historia-foto:hover img{transform:none}
}
@media (hover:none){.rasc-halo{display:none}}

/* no celular fica só o que é leve: a foto da abertura não deriva sem parar */
@media (hover:none){
  html #abertura .parallax-foto img{animation:none}
}