/*
 * Estilos de la landing de Avi. Tailwind se carga por CDN (browser build) desde el layout;
 * aqui viven solo tokens, keyframes y utilidades que Tailwind no cubre.
 */

:root {
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  overflow-x: hidden;
  background-color: #111830;
  background-image:
    radial-gradient(ellipse 80% 100% at 100% 50%, rgba(41, 82, 165, 0.75), transparent 65%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(15, 22, 60, 0.90), transparent 60%);
}

/* Fondo hero con grano sutil encima del degradado del body */
.avi-bg {
  background-color: transparent;
}

.avi-noise::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* Malla decorativa punteada */
.avi-grid {
  background-image:
    linear-gradient(rgba(139, 152, 247, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 152, 247, 0.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(closest-side, black, transparent);
}

/* Texto con degradado editorial */
.text-gradient {
  background: linear-gradient(100deg, #ffffff 0%, #cdd6ff 45%, #8b98f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- Reveal al hacer scroll --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity 0.7s var(--ease-out-soft),
    transform 0.7s var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.94); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Flotacion suave de los mockups del hero */
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes float-slower {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}
@keyframes float-slow-b {
  0%, 100% { transform: translateY(-4px); }
  50%      { transform: translateY(7px); }
}
@keyframes float-slow-c {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
.animate-float   { animation: float-slow   6s   ease-in-out infinite; }
.animate-float-2 { animation: float-slower 7.5s ease-in-out infinite; }
.animate-float-3 { animation: float-slow-b 8s   ease-in-out infinite; }
.animate-float-4 { animation: float-slow-c 9.5s ease-in-out infinite; }

/* Pulso del punto "en linea" */
@keyframes ping-soft {
  0%   { box-shadow: 0 0 0 0 rgba(47, 212, 196, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(47, 212, 196, 0); }
  100% { box-shadow: 0 0 0 0 rgba(47, 212, 196, 0); }
}
.pulse-dot { animation: ping-soft 2.4s infinite; }

/* Subrayado animado de enlaces del nav */
.link-underline {
  position: relative;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-out-soft);
}
.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Linea conectiva punteada animada (ecosistema) */
@keyframes dash-move {
  to { stroke-dashoffset: -24; }
}
.dash-flow {
  stroke-dasharray: 6 8;
  animation: dash-move 1.2s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .animate-float, .animate-float-2, .animate-float-3, .animate-float-4, .pulse-dot, .dash-flow { animation: none; }
}

/* Scrollbar invisible en columnas kanban */
[data-kanban-target="column"] {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE / Edge legacy */
}
[data-kanban-target="column"]::-webkit-scrollbar {
  display: none;                /* Chrome / Safari */
}