/* ==========================================================================
   MINDS2WORK — EFFECTS.CSS  (movimento, atmosfera, profundidade)
   Tudo aqui é progressivo: sem JS ou com "reduzir movimento" o site continua
   100% legível. Classe .js no <html> habilita os estados iniciais de reveal.
   ========================================================================== */

/* ---------- Transição entre páginas (View Transitions API, onde houver suporte) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .28s var(--ease-in-out) both}
::view-transition-new(root){animation:vt-in .5s var(--ease-out) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}

/* ---------- Keyframes ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-rev{to{transform:rotate(-360deg)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%,100%{box-shadow:0 0 0 .7rem rgba(37,211,102,0)}}
@keyframes ring{0%{transform:scale(1);opacity:.9}80%,100%{transform:scale(1.65);opacity:0}}
@keyframes marquee{to{transform:translateX(-100%)}}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes float-a{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(6%,8%,0) scale(1.12)}}
@keyframes float-b{0%,100%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-9%,-6%,0) scale(.92)}}
@keyframes float-c{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-5%,10%,0) scale(1.1)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes shimmer{to{background-position:200% 0}}
@keyframes beam{to{--ang:360deg}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse-glow{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- Atmosfera: aurora + grade + grão ---------- */
.aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:-2}
.aurora__blob{position:absolute;border-radius:50%;filter:blur(90px);will-change:transform;mix-blend-mode:screen}
.aurora__blob--a{width:46vmax;height:46vmax;left:-12vmax;top:-18vmax;background:radial-gradient(circle,rgba(37,99,235,.62),transparent 65%);animation:float-a 22s ease-in-out infinite}
.aurora__blob--b{width:40vmax;height:40vmax;right:-14vmax;top:4vmax;background:radial-gradient(circle,rgba(106,77,244,.5),transparent 65%);animation:float-b 28s ease-in-out infinite}
.aurora__blob--c{width:34vmax;height:34vmax;left:28%;bottom:-22vmax;background:radial-gradient(circle,rgba(59,123,243,.38),transparent 65%);animation:float-c 32s ease-in-out infinite}
.aurora--soft .aurora__blob{opacity:.55}
.bg-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(147,184,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(147,184,255,.07) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 35%,#000 20%,transparent 78%);mask-image:radial-gradient(70% 70% at 50% 35%,#000 20%,transparent 78%)}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.9}
.vignette{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,transparent 60%,var(--bg) 100%)}
body::after{ /* grão de filme — dá textura premium e evita banding nos gradientes */
  content:"";position:fixed;inset:0;z-index:var(--z-toast);pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Glow que segue o cursor (apenas ponteiro fino) */
.cursor-glow{position:fixed;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;pointer-events:none;z-index:var(--z-sticky);opacity:0;
  background:radial-gradient(circle,rgba(59,123,243,.13),rgba(106,77,244,.05) 40%,transparent 68%);mix-blend-mode:screen;transition:opacity .6s;will-change:transform}
.cursor-glow.is-on{opacity:1}
@media (hover:none),(pointer:coarse){.cursor-glow{display:none}}

/* ---------- Reveal on scroll ---------- */
.js [data-reveal]{opacity:0;transform:translate3d(0,var(--enter-y),0);filter:blur(5px);
  transition:opacity var(--dur-reveal) var(--ease-out),transform var(--dur-reveal) var(--ease-out),filter var(--dur-reveal) var(--ease-out);
  transition-delay:calc(var(--i,0)*var(--stagger));will-change:opacity,transform}
.js [data-reveal="fade"]{transform:none}
.js [data-reveal="left"]{transform:translate3d(calc(var(--enter-y)*-1.6),0,0)}
.js [data-reveal="right"]{transform:translate3d(calc(var(--enter-y)*1.6),0,0)}
.js [data-reveal="scale"]{transform:scale(.94)}
.js [data-reveal="wipe"]{opacity:1;filter:none;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.3s var(--ease-in-out)}
.js [data-reveal].is-in{opacity:1;transform:none;filter:none;will-change:auto}
.js [data-reveal="wipe"].is-in{clip-path:inset(0 0 0 0)}

/* Headline por palavras (máscara) */
.sw{display:inline-block;overflow:hidden;vertical-align:top;padding:.08em .04em .14em;margin:-.08em -.04em -.14em}
.swi{display:inline-block}
.js [data-split] .swi{transform:translate3d(0,112%,0) rotate(3deg);transform-origin:0 100%;transition:transform 1.1s var(--ease-out);transition-delay:calc(var(--i)*55ms + var(--split-delay,0ms))}
.js [data-split].is-in .swi{transform:none}

/* ---------- Texto cintilante ---------- */
.shimmer{background:linear-gradient(100deg,#8FB4FF 0%,#fff 25%,#8F78FF 50%,#fff 75%,#8FB4FF 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:shimmer 7s linear infinite}

/* ---------- Borda "beam" (CTA premium) ---------- */
.beam{position:relative}
.beam::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0 62%,#5F95FA 80%,#B5A3FF 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:beam 7s linear infinite}

/* ---------- Magnético ---------- */
[data-magnetic]{translate:var(--tx,0px) var(--ty,0px);transition:translate .5s var(--ease-out),transform .3s var(--ease-out),box-shadow .3s,background-color .3s}
[data-magnetic].is-moving{transition:translate .12s linear,transform .3s var(--ease-out),box-shadow .3s,background-color .3s}

/* ---------- Parallax suave por mouse no hero ---------- */
.hero__visual{transform:translate3d(calc(var(--px,0)*14px),calc(var(--py,0)*14px),0);transition:transform .9s var(--ease-out)}
.orbit .orbit__core-glow{animation:pulse-glow 4.5s ease-in-out infinite}

/* ---------- Linhas SVG que se desenham ---------- */
.draw{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
.is-in .draw,.draw.is-in{animation:draw 2.2s var(--ease-in-out) forwards}

/* ---------- Divisor luminoso ---------- */
.hr-glow{height:1px;border:0;background:var(--grad-hairline);margin-block:var(--sp-12);opacity:.8}

/* ---------- Fundo do footer / CTA ---------- */
.cta .aurora__blob--a{left:-18vmax;top:auto;bottom:-24vmax}
.cta .aurora__blob--b{right:-16vmax;top:-10vmax}

/* ---------- Movimento reduzido: tudo estático e visível ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .js [data-reveal],.js [data-split] .swi{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  .marquee__track{animation:none;flex-wrap:wrap;justify-content:center}
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee__track[aria-hidden="true"]{display:none}
  .manifesto__text .w{opacity:1}
  .cursor-glow,.hero__canvas{display:none}
  .scroll-cue i{animation:none;transform:none}
}