/* ==========================================================================
   Efectos — inspirados en Inspira UI (Aurora, Border Beam, Animated Beam,
   Number Ticker, Marquee, Shimmer Button, Flip Words, Animated List) y
   Lunar UI (Spotlight Card, Dot pattern, Text Highlighter, Scroll Reveal,
   Sparkles). Implementados solo con CSS + effects.js.
   Regla de uso: el movimiento acompaña, nunca distrae. Todo se apaga con
   prefers-reduced-motion.
   ========================================================================== */

@property --beam-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ---------- Aurora (fondo del hero) ---------- */
.aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  z-index: 0;
  pointer-events: none;
  filter: blur(60px) saturate(1.2);
  opacity: .55;
}
.aurora i {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: multiply;
  animation: aurora-drift 22s ease-in-out infinite alternate;
}
.aurora i:nth-child(1) { width: 46%; height: 60%; left: 48%; top: 6%; background: color-mix(in srgb, var(--piloto) 70%, transparent); }
.aurora i:nth-child(2) { width: 38%; height: 50%; left: 66%; top: 38%; background: color-mix(in srgb, var(--creador) 45%, transparent); animation-duration: 26s; animation-delay: -6s; }
.aurora i:nth-child(3) { width: 42%; height: 55%; left: 30%; top: 30%; background: color-mix(in srgb, var(--negocio) 35%, transparent); animation-duration: 30s; animation-delay: -12s; }
:root[data-theme="dark"] .aurora i { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .aurora i { mix-blend-mode: screen; } }
@keyframes aurora-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-8%, 6%) scale(1.12); }
  100% { transform: translate(6%, -4%) scale(.95); }
}

/* ---------- Patrón de puntos con desvanecido ---------- */
.dot-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 30% 40%, #000 20%, transparent 75%);
}

/* ---------- Border beam: un destello que recorre el borde ---------- */
.beam-border { position: relative; }
.beam-border::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  z-index: 3;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(from var(--beam-angle), transparent 0 68%, var(--piloto) 78%, var(--creador) 86%, transparent 94%);
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: beam-spin 6s linear infinite;
  pointer-events: none;
}
@keyframes beam-spin { to { --beam-angle: 360deg; } }

/* ---------- Spotlight: luz que sigue al cursor ---------- */
.spotlight:hover {
  background-image: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--piloto) 14%, transparent), transparent 70%);
}

/* ---------- Botón con brillo (shimmer) ---------- */
.btn-shimmer { position: relative; overflow: hidden; isolation: isolate; }
.btn-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .35) 48%, transparent 66%);
  transform: translateX(-120%);
  animation: shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer { 60%, 100% { transform: translateX(120%); } }

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1), filter .7s ease;
}
[data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* ---------- Resaltador de texto ---------- */
.hl {
  padding-inline: .08em;
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--piloto) 60%, transparent) 58%, color-mix(in srgb, var(--piloto) 60%, transparent) 92%, transparent 92%) no-repeat;
  background-size: 0% 100%;
  transition: background-size 1.1s cubic-bezier(.2, .7, .2, 1) .2s;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hl.is-in { background-size: 100% 100%; }

/* ---------- Palabras que rotan ---------- */
.flip {
  display: inline-block;
  color: var(--negocio);
  transition: opacity .3s ease, transform .3s ease, filter .3s ease;
}
.flip.is-out { opacity: 0; transform: translateY(-.25em); filter: blur(6px); }

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee var(--marquee-speed, 60s) linear infinite;
}
.marquee-track > * { margin-right: 16px; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
.marquee.is-reverse .marquee-track { animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Animated beam (negocio → Colaboremos → quien acompaña) ---------- */
.beam-diagram { position: relative; }
.beam-diagram svg.beams { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.beam-line { fill: none; stroke: var(--line-strong); stroke-width: 2; }
.beam-flow {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 36 400;
  animation: beam-flow 2.8s linear infinite;
}
.beam-flow.is-late { animation-delay: -1.4s; }
@keyframes beam-flow { from { stroke-dashoffset: 436; } to { stroke-dashoffset: 0; } }

/* ---------- Ondas (ripple) ---------- */
.ripple { position: absolute; inset: 0; pointer-events: none; }
.ripple i {
  position: absolute;
  inset: 0;
  border: 1.5px solid color-mix(in srgb, var(--piloto) 70%, transparent);
  border-radius: 50%;
  animation: ripple 3.6s ease-out infinite;
}
.ripple i:nth-child(2) { animation-delay: 1.2s; }
.ripple i:nth-child(3) { animation-delay: 2.4s; }
@keyframes ripple { from { transform: scale(1); opacity: .8; } to { transform: scale(2.3); opacity: 0; } }

/* ---------- Lista animada ---------- */
.feed-item.is-new { animation: feed-in .55s cubic-bezier(.2, .8, .2, 1.1); }
@keyframes feed-in { from { opacity: 0; transform: translateY(-14px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- Destellos (sparkles) ---------- */
.sparkles { position: relative; }
.sparkles::before, .sparkles::after {
  content: "";
  position: absolute;
  width: 7px; height: 7px;
  background: var(--piloto);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: twinkle 2.4s ease-in-out infinite;
}
.sparkles::before { top: -4px; right: 14px; }
.sparkles::after { bottom: -3px; left: 22px; width: 5px; height: 5px; animation-delay: 1.2s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* ---------- Micrófono escuchando ---------- */
.is-listening { color: var(--btn-creador-fg) !important; background: var(--btn-creador-bg) !important; border-color: var(--btn-creador-bg) !important; animation: listening 1.2s ease-in-out infinite; }
@keyframes listening { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--creador) 50%, transparent); } 50% { box-shadow: 0 0 0 10px transparent; } }

@media (prefers-reduced-motion: reduce) {
  .aurora i, .beam-border::after, .btn-shimmer::after, .marquee-track, .beam-flow, .ripple i, .sparkles::before, .sparkles::after { animation: none !important; }
  .marquee-track { flex-wrap: wrap; width: auto; row-gap: 16px; }
  .marquee-track > [aria-hidden="true"] { display: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .beam-flow { stroke-dasharray: none; opacity: .5; }
  [data-reveal] { opacity: 1; transform: none; filter: none; }
  .hl { background-size: 100% 100%; }
}