/* ============================================================
   DataSmart — Capa de movimiento
   Basada en React Bits (BlurText, DotGrid, LogoLoop,
   SpotlightCard, StarBorder, Magnet) portados a CSS/JS puro.
   ============================================================ */
@property --m-a{syntax:"<angle>";initial-value:0deg;inherits:false}
:root{--m-ease:cubic-bezier(.22,.61,.36,1);--m-dur:.9s}

/* ---------- Fondo del hero: grilla de puntos (DotGrid) ---------- */
.hero-canvas.m-dots{opacity:1;-webkit-mask-image:radial-gradient(ellipse 85% 75% at 50% 35%,#000 35%,transparent 100%);mask-image:radial-gradient(ellipse 85% 75% at 50% 35%,#000 35%,transparent 100%)}

/* ---------- Título del hero: palabras que entran desenfocadas (BlurText) ---------- */
.m-word{display:inline-block;opacity:0;filter:blur(12px);transform:translateY(.3em);transition:opacity var(--m-dur) var(--m-ease),filter var(--m-dur) var(--m-ease),transform var(--m-dur) var(--m-ease);transition-delay:calc(var(--i,0) * 80ms)}
.m-rise{opacity:0;transform:translateY(16px);transition:opacity .9s var(--m-ease),transform .9s var(--m-ease);transition-delay:var(--d,0s)}
.m-in .m-word,.m-in .m-rise,.m-in.m-rise{opacity:1;filter:none;transform:none}
html.motion .hero .reveal{opacity:1;transform:none;filter:none}

/* ---------- Aparición de secciones al hacer scroll (AnimatedContent) ---------- */
html.motion .reveal{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity 1s var(--m-ease),transform 1s var(--m-ease),filter 1s var(--m-ease)}
html.motion .reveal.visible{opacity:1;transform:none;filter:none}

/* ---------- Tarjetas con luz que sigue al mouse (SpotlightCard) ---------- */
.m-spot{position:relative;isolation:isolate}
.m-spot::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;transition:opacity .4s var(--m-ease);background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(56,189,248,.11),transparent 65%)}
.m-spot:hover::before{opacity:1}

/* ---------- Cinta de sectores en bucle (LogoLoop) ---------- */
.chips.m-loop{display:block;max-width:none;overflow:hidden;padding:14px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.m-loop-track{display:flex;width:max-content;animation:m-loop var(--loop-dur,40s) linear infinite}
.m-loop:hover .m-loop-track{animation-play-state:paused}
.m-loop-track span{flex:0 0 auto;margin-right:12px;cursor:default;transition:transform .35s var(--m-ease),box-shadow .35s var(--m-ease),border-color .35s,color .35s}
.m-loop-track span:hover{transform:scale(1.08);color:var(--text);border-color:rgba(56,189,248,.55);box-shadow:0 0 0 1px rgba(56,189,248,.2),0 0 26px -4px rgba(56,189,248,.5)}
@keyframes m-loop{to{transform:translateX(-50%)}}

/* ---------- Botón principal: luz que recorre el borde (StarBorder) ---------- */
.m-star{position:relative;isolation:isolate}
.m-star::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--m-a),transparent 0 68%,rgba(255,255,255,.95) 80%,transparent 92%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:m-spin 3.6s linear infinite}
@keyframes m-spin{to{--m-a:360deg}}

/* ---------- Botones con atracción magnética (Magnet) ---------- */
.m-magnet{transition:transform .45s var(--m-ease),box-shadow .2s,background .2s,border-color .2s,color .2s}

@media (prefers-reduced-motion: reduce){
  .m-word,.m-rise{opacity:1;filter:none;transform:none;transition:none}
  .m-star::after{animation:none;opacity:0}
}