/* =====================================================================
   Manual da Cultura Familiar — animações da página inicial / criar conta
   Preloader, entradas suaves, brilho que segue o mouse.
   Obs.: por decisão do projeto, estas animações ficam SEMPRE ativas
   (não usamos prefers-reduced-motion aqui de propósito).
   ===================================================================== */

/* ---- Pré-carregamento --------------------------------------------- */
.preloader{
  position:fixed; inset:0; z-index:9999;
  display:grid; place-items:center;
  background:
    radial-gradient(1000px 520px at 100% -10%, #fdf6ea 0%, transparent 60%),
    radial-gradient(760px 440px at -10% 110%, #f3ead9 0%, transparent 55%),
    var(--cream);
  transition:opacity .6s ease, visibility .6s ease;
}
.preloader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.preloader-inner{ display:flex; flex-direction:column; align-items:center; gap:1.1rem; }
.preloader-logo{
  width:112px; height:auto; opacity:.95;
  animation:pl-breathe 2.2s ease-in-out infinite;
  filter:drop-shadow(0 12px 26px rgba(120,90,50,.18));
}
@keyframes pl-breathe{
  0%,100%{ transform:scale(.94); opacity:.72; }
  50%{ transform:scale(1.02); opacity:1; }
}
/* linha/"trepadeira" que preenche enquanto carrega */
.preloader-vine{
  position:relative; display:block; width:150px; height:2px;
  background:var(--line-2); border-radius:999px; overflow:hidden;
}
.preloader-vine > span{
  position:absolute; inset:0; width:40%;
  background:linear-gradient(90deg, transparent, var(--caramel), var(--caramel-d));
  border-radius:999px; animation:pl-slide 1.15s ease-in-out infinite;
}
@keyframes pl-slide{
  0%{ transform:translateX(-120%); }
  100%{ transform:translateX(320%); }
}
/* Evita "pulo" de conteúdo enquanto o preloader está na tela */
body.has-preloader{ overflow:hidden; }
body.is-ready.has-preloader{ overflow:visible; }

/* ---- Brilho que segue o mouse ------------------------------------- */
.cursor-glow{
  position:fixed; top:0; left:0; z-index:0; width:520px; height:520px;
  margin:-260px 0 0 -260px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(201,154,107,.28) 0%, rgba(201,154,107,.10) 38%, transparent 68%);
  mix-blend-mode:multiply; opacity:0;
  transform:translate3d(-100px,-100px,0);
  transition:opacity .5s ease;
  will-change:transform;
}
.cursor-glow.on{ opacity:1; }
/* Sem mouse (celular/tablet) não faz sentido o brilho seguidor */
@media (hover:none){ .cursor-glow{ display:none; } }

/* ---- Entradas suaves ---------------------------------------------
   Animação pura de CSS no carregamento (não depende de JS): se o script
   falhar, o conteúdo ainda aparece. O atraso base deixa o preloader
   começar a sumir antes do texto entrar. */
.reveal{
  animation:reveal-up .9s cubic-bezier(.2,.7,.25,1) both;
  animation-delay:calc(.35s + var(--i, 0) * .12s);
}
@keyframes reveal-up{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}

/* Revelam ao rolar (features) via IntersectionObserver */
.reveal-scroll{ opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.25,1); }
.reveal-scroll.in{ opacity:1; transform:translateY(0); }

/* ---- Detalhes vivos do hero --------------------------------------- */
.hero{ position:relative; z-index:1; }

/* emblema flutua de leve e a moldura tem um leve gradiente em movimento */
.hero-art{ animation:art-rise 1s cubic-bezier(.2,.7,.25,1) both; }
.hero-emblem img{ animation:emblem-float 6s ease-in-out infinite; }
@keyframes emblem-float{
  0%,100%{ transform:translateY(0) rotate(-.4deg); }
  50%{ transform:translateY(-10px) rotate(.4deg); }
}
@keyframes art-rise{
  from{ opacity:0; transform:translateY(26px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
/* brilho suave que passa pela moldura do hero */
.hero-art::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 66%);
  transform:translateX(-120%); animation:art-sheen 6.5s ease-in-out 1.2s infinite;
}
@keyframes art-sheen{
  0%{ transform:translateX(-120%); }
  22%,100%{ transform:translateX(120%); }
}

/* botão primário com brilho ao passar o mouse */
.btn-primary{ position:relative; overflow:hidden; }
.btn-primary::after{
  content:""; position:absolute; top:0; left:0; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform:translateX(-160%) skewX(-16deg);
  transition:transform .7s ease;
}
.btn-primary:hover::after{ transform:translateX(220%) skewX(-16deg); }

/* number das features com um "respiro" no hover do cartão */
.feature{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.feature:hover{ transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:var(--line-2); }

/* ---- Cartão de criar conta: entrada + foco ------------------------ */
.auth-card{ animation:card-in .8s cubic-bezier(.2,.7,.25,1) both; }
@keyframes card-in{
  from{ opacity:0; transform:translateY(20px) scale(.985); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.auth-card .brand img{ animation:emblem-float 6s ease-in-out infinite; }