/* animations.css — keyframes and ambient backgrounds */

/* Hero gradient mesh — filter is STATIC; only transform animates (compositor-only) */
.mesh-bg {
  position: absolute; inset: -10%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 18% 22%, rgba(255,200,87,0.55), transparent 60%),
    radial-gradient(36% 46% at 82% 30%, rgba(239,71,111,0.45), transparent 65%),
    radial-gradient(46% 60% at 70% 80%, rgba(139,92,246,0.40), transparent 60%),
    radial-gradient(36% 50% at 22% 78%, rgba(59,130,246,0.30), transparent 60%);
  filter: blur(32px) saturate(120%);
  animation: meshDrift 22s ease-in-out infinite alternate;
  will-change: transform;
  transform: translateZ(0);
}
@keyframes meshDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(1.6%, -0.8%, 0) scale(1.04); }
  100% { transform: translate3d(-0.8%, 1.6%, 0) scale(1.02); }
}

/* Subtle grid */
.grid-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(31,45,110,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31,45,110,0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 80%);
          mask-image: radial-gradient(ellipse 70% 80% at 50% 30%, #000 30%, transparent 80%);
  opacity: 0.7;
}

/* Floating shapes (used in hero) */
.float-shape {
  position: absolute; pointer-events: none; opacity: 0.85;
  animation: floatY 7s ease-in-out infinite alternate;
}
.float-shape.delay-1 { animation-delay: -1.2s; animation-duration: 8s; }
.float-shape.delay-2 { animation-delay: -2.6s; animation-duration: 9s; }
.float-shape.delay-3 { animation-delay: -3.4s; animation-duration: 10s; }
@keyframes floatY {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(0, -22px, 0) rotate(8deg); }
}

/* Headline letter stagger */
.headline-stagger { display: inline-block; }
.headline-stagger .word { display: inline-block; white-space: nowrap; }
.headline-stagger .char {
  display: inline-block;
  opacity: 0; transform: translateY(0.6em);
  animation: charIn 0.6s var(--ease-out) forwards;
}
@keyframes charIn { to { opacity: 1; transform: none; } }

/* Marquee gradient mask */
.fade-edge-x {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* SVG path draw */
.path-draw {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset 1.6s var(--ease-out);
}
.path-draw.in { stroke-dashoffset: 0; }

/* Tilt prep */
[data-tilt] { transform-style: preserve-3d; transition: transform 240ms var(--ease-out); will-change: transform; }

/* Micro-pulse */
.pulse {
  display: inline-grid; place-items: center; position: relative;
}
.pulse::before {
  content: ""; position: absolute; inset: -4px; border-radius: inherit;
  border: 2px solid currentColor; opacity: 0.6;
  animation: pulseRing 1.8s ease-out infinite;
}
@keyframes pulseRing {
  0% { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* Number ticker (CSS-only, via custom prop animation) */
@property --tick {
  syntax: "<integer>"; inherits: false; initial-value: 0;
}

/* Tag color cycle (used in chip cloud) */
.chip.cycle {
  animation: chipHue 12s linear infinite;
}
@keyframes chipHue {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}