/* ============================================================
   Aiven Automations — Enhanced Animations
   ============================================================ */

/* ── Scroll progress bar ─────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #00B3C0, #5FD1DB);
  z-index: 999;
  transition: width 0.08s linear;
  box-shadow: 0 0 8px rgba(0,179,192,0.5);
}

/* ── Word-reveal hero headline ───────────────────────────── */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.hero-word.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Section label shimmer ───────────────────────────────── */
@keyframes label-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.section-label {
  background: linear-gradient(
    90deg,
    var(--color-primary) 0%,
    #5FD1DB 40%,
    var(--color-primary) 60%,
    var(--color-primary) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: label-shimmer 4s linear infinite;
}
/* Keep the ::before hairline visible */
.section-label::before {
  -webkit-text-fill-color: initial;
  background: var(--color-primary);
  -webkit-background-clip: initial;
  background-clip: initial;
}

/* ── Button shimmer / shine ──────────────────────────────── */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: -50%; left: -75%;
  width: 50%; height: 200%;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.28) 50%,
    transparent 60%
  );
  animation: btn-shine 3.5s ease-in-out infinite;
}
@keyframes btn-shine {
  0%   { left: -75%; }
  40%  { left: 125%; }
  100% { left: 125%; }
}

/* ── Magnetic button wrapper ─────────────────────────────── */
.btn-magnetic {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── Card 3D tilt (applied via JS) ──────────────────────── */
.tilt-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  transform-style: preserve-3d;
}

/* ── Animated underline on nav links ────────────────────── */
.nav-link::before {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%; right: 50%;
  height: 1px;
  background: var(--color-primary);
  transition: left 0.25s ease, right 0.25s ease;
}
.nav-link:hover::before {
  left: 16px;
  right: 0;
}
.nav-link.is-active::before { display: none; } /* .is-active already has ::after */

/* ── Pulse dot on brand mark ─────────────────────────────── */
@keyframes brand-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}
.nav-brand svg circle:first-child {
  animation: brand-pulse 3s ease-in-out infinite;
}

/* ── Flow node sequential pulse ─────────────────────────── */
@keyframes flow-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,179,192,0); border-color: rgba(0,179,192,0.35); }
  50%       { box-shadow: 0 0 18px 4px rgba(0,179,192,0.18); border-color: rgba(0,179,192,0.7); }
}
.flow-node:nth-child(1)  { animation: flow-glow 3.0s ease-in-out 0.0s infinite; }
.flow-node:nth-child(3)  { animation: flow-glow 3.0s ease-in-out 0.6s infinite; }
.flow-node:nth-child(5)  { animation: flow-glow 3.0s ease-in-out 1.2s infinite; }
.flow-node:nth-child(7)  { animation: flow-glow 3.0s ease-in-out 1.8s infinite; }
.flow-node:nth-child(9)  { animation: flow-glow 3.0s ease-in-out 2.4s infinite; }

/* ── Animated aqua border on featured package ───────────── */
@keyframes border-run {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}
.package.featured {
  background-image: none !important;
  position: relative;
}
.package.featured::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, #00B3C0, #5FD1DB, #00838C, #00B3C0);
  background-size: 200% 100%;
  animation: border-run 3s linear infinite;
  z-index: -1;
  opacity: 0.85;
}

/* ── Floating stats counter highlight ───────────────────── */
@keyframes stat-pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.case-outcome {
  animation: stat-pop 4s ease-in-out infinite;
}
.case-outcome:nth-child(2) { animation-delay: 1.3s; }
.case-outcome:nth-child(3) { animation-delay: 2.6s; }

/* ── Pain card icon glow on hover ───────────────────────── */
.pain-card:hover .pain-card-icon {
  filter: drop-shadow(0 0 8px rgba(0,179,192,0.5));
  transition: filter 0.3s ease;
}

/* ── Timeline connector shimmer ─────────────────────────── */
@keyframes timeline-travel {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}
.timeline::before {
  background: linear-gradient(
    to bottom,
    rgba(0,179,192,0) 0%,
    rgba(0,179,192,0.8) 15%,
    rgba(95,209,219,0.9) 50%,
    rgba(0,179,192,0.8) 85%,
    rgba(0,179,192,0)  100%
  );
  background-size: 100% 200%;
  animation: timeline-travel 4s linear infinite;
}

/* ── Nav brand hover animation ───────────────────────────── */
.nav-brand {
  transition: transform 0.25s ease;
}
.nav-brand:hover {
  transform: translateX(2px);
}

/* ── Hero CTA row fade-stagger ──────────────────────────── */
.hero-ctas .btn {
  transition: transform 0.22s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.22s ease;
}
.hero-ctas .btn:hover {
  transform: translateY(-2px);
}

/* ── Home step card left-border slide ───────────────────── */
.home-step-card {
  border-left: 2px solid transparent;
  transition: border-color 0.3s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.home-step-card:hover {
  border-left-color: var(--color-primary);
  transform: translateX(4px);
}

/* ── Auto-card icon bubble pop ──────────────────────────── */
.auto-card:hover .icon-bubble,
.home-what-card:hover .icon-bubble {
  transform: scale(1.12);
  transition: transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.icon-bubble {
  transition: transform 0.25s ease;
}

/* ── Footer link hover glow ─────────────────────────────── */
.footer-links a {
  position: relative;
}
.footer-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0%; height: 1px;
  background: var(--color-primary);
  transition: width 0.2s ease;
}
.footer-links a:hover::after {
  width: 100%;
}

/* ── Halftone orb gentle float ───────────────────────────── */
@keyframes orb-float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-8px) rotate(0.5deg); }
  66%       { transform: translateY(4px) rotate(-0.3deg); }
}
.hero-visual svg {
  animation: orb-float 8s ease-in-out infinite;
}

/* ── Background blob extra depth pulse ──────────────────── */
@keyframes blob-breathe {
  0%, 100% { opacity: var(--blob-o, 0.85); }
  50%       { opacity: calc(var(--blob-o, 0.85) * 1.15); }
}
.bg-blob.b3 { --blob-o: 0.85; animation: drift3 44s ease-in-out infinite alternate, blob-breathe 10s ease-in-out infinite; }

/* ── Cursor blink on hero subtitle ──────────────────────── */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.cursor-blink {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--color-primary);
  vertical-align: text-bottom;
  margin-left: 3px;
  animation: cursor-blink 1.1s step-end infinite;
}

/* ── Grain overlay enhancement ──────────────────────────── */
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2%, -1%); }
  40%  { transform: translate(1%, 2%); }
  60%  { transform: translate(-1%, 1%); }
  80%  { transform: translate(2%, -2%); }
  100% { transform: translate(0, 0); }
}
.bg-stage::after {
  animation: grain-shift 0.9s steps(1) infinite;
}

/* ── Scope card hover glow ───────────────────────────────── */
.scope-card {
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.scope-card:hover {
  border-color: rgba(0,179,192,0.38) !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,179,192,0.08);
}

/* ── Reduce motion override ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}