/* ============================================================
   MOTION — vocabulário portado da landing DarkAgent
   (glow-orbs · divider-beam · BlurText · hf-travel · star-border)
   adaptado do dark roxo/ciano para o claro creme/verde
   ============================================================ */

/* ══ 1. GLOW ORBS — atmosfera ambiente ═════════════════════ */
.glow-orb{position:fixed;border-radius:50%;filter:blur(120px);pointer-events:none;z-index:0}
.glow-orb-1{background:rgba(15,217,107,.16);width:520px;height:520px;top:-12%;left:-8%}
.glow-orb-2{background:rgba(0,255,133,.10);width:620px;height:620px;top:38%;right:-16%}
.glow-orb-3{background:rgba(176,124,0,.07);width:500px;height:500px;bottom:-8%;left:28%}
@media(max-width:768px){
  .glow-orb{filter:blur(60px)}
  .glow-orb-1{width:230px;height:230px;top:-4%;left:0}
  .glow-orb-2{width:230px;height:230px;top:34%;right:0}
  .glow-orb-3{width:200px;height:200px;bottom:0;left:18%}
}

/* ══ 2. DIVIDER BEAM — régua de luz entre seções ═══════════ */
.beam-wrap{display:flex;justify-content:center;padding:6px 0}
.divider-beam{
  display:block;width:min(880px,90%);height:3px;border-radius:3px;
  background:linear-gradient(90deg,transparent 0%,rgba(15,217,107,.10) 18%,rgba(15,217,107,.85) 50%,
             rgba(0,255,133,.70) 62%,rgba(15,217,107,.10) 82%,transparent 100%) 0 0/220% 100%;
  box-shadow:0 0 18px rgba(15,217,107,.45);
  animation:beam-shimmer 5.5s ease-in-out infinite;
}
@keyframes beam-shimmer{0%,100%{opacity:.7;background-position:0 0}50%{opacity:1;background-position:100% 0}}

/* ══ 3. BLUR TEXT — reveal palavra a palavra ═══════════════ */
.blur-text .w{
  display:inline-block;opacity:0;filter:blur(10px);transform:translateY(16px);
  transition:opacity .62s cubic-bezier(.16,.84,.44,1),filter .62s cubic-bezier(.16,.84,.44,1),
             transform .62s cubic-bezier(.16,.84,.44,1);
  will-change:opacity,filter,transform;
}
.blur-text.in .w{opacity:1;filter:blur(0);transform:none}

/* ══ 4. HF-TRAVEL — sweep de luz atravessando ══════════════ */
.sweep{position:relative;overflow:hidden}
.sweep::before{
  content:"";position:absolute;top:0;bottom:0;left:-40%;width:36%;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.38),transparent 68%);
  transform:skewX(-12deg);opacity:0;
}
.sweep:hover::before{opacity:1;animation:hf-travel 1.1s cubic-bezier(.3,0,.2,1)}
@keyframes hf-travel{0%{left:-40%}100%{left:100%}}
/* sweep automático e contínuo no visor do hero */
.sweep-auto::before{opacity:1;animation:hf-travel 4.2s cubic-bezier(.4,0,.3,1) infinite;animation-delay:1.4s}

/* ══ 5. STAR BORDER — borda viva no CTA principal ══════════ */
.star{position:relative;isolation:isolate;overflow:hidden}
.star::after,.star::before{
  content:"";position:absolute;width:46%;height:38%;border-radius:50%;z-index:-1;pointer-events:none;opacity:.4;
}
.star::before{
  top:-11px;left:-25%;background:radial-gradient(circle,rgba(255,255,255,.85),transparent 18%);
  animation:star-movement-top 5s linear infinite alternate;
}
.star::after{
  bottom:-11px;right:-25%;background:radial-gradient(circle,rgba(255,255,255,.85),transparent 18%);
  animation:star-movement-bottom 5s linear infinite alternate;
}
@keyframes star-movement-top{0%{opacity:1;transform:translate(0)}100%{opacity:0;transform:translate(100%)}}
@keyframes star-movement-bottom{0%{opacity:1;transform:translate(0)}100%{opacity:0;transform:translate(-100%)}}

/* ══ 6. PING — anel pulsando no indicador REC ══════════════ */
.ping{position:relative}
.ping::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--rec);
  animation:hf-ping 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes hf-ping{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}

/* ══ 7. TILT — visor acompanha o mouse ═════════════════════ */
.tilt{transform-style:preserve-3d;transition:transform .45s cubic-bezier(.16,.84,.44,1)}
.tilt-on{transition:transform .1s linear}

/* ══ 8. CONTADOR ═══════════════════════════════════════════ */
.count{font-variant-numeric:tabular-nums}

/* ══ 9. LINHA DE PROGRESSO DA LEITURA ══════════════════════ */
.progress{
  position:fixed;top:0;left:0;height:2px;z-index:99;width:0;
  background:linear-gradient(90deg,var(--green),var(--green-bright));
  box-shadow:0 0 10px rgba(15,217,107,.6);transition:width .1s linear;
}

/* ══ respeitar reduced-motion ══════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .divider-beam,.star::before,.star::after,.ping::after,.sweep-auto::before{animation:none}
  .blur-text .w{opacity:1;filter:none;transform:none}
  .tilt{transform:none!important}
}