/* ========================================================================
 *  Agentkin animations — final clean version (no chip)
 * ====================================================================== */

/* Hero canvas */
.hero, header.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before, header.hero::before {
  content: ""; position: absolute; inset: -10%; z-index: -2;
  background:
    radial-gradient(ellipse 70% 50% at 50% 60%, rgba(0,100,222,.16) 0%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 50%, rgba(46,122,230,.10) 0%, transparent 70%);
  animation: heroBreathe 8s ease-in-out infinite;
  filter: blur(40px);
}
.hero::after, header.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle 800px at 0% 50%, rgba(0,100,222,.05), transparent 50%),
    radial-gradient(circle 800px at 100% 50%, rgba(46,122,230,.05), transparent 50%);
  animation: heroSweep 12s ease-in-out infinite alternate;
}
@keyframes heroBreathe { 0%,100% { opacity:.8; transform:scale(1); } 50% { opacity:1; transform:scale(1.08); } }
@keyframes heroSweep { 0% { transform:translateX(-2%) scale(1); opacity:.9; } 100% { transform:translateX(2%) scale(1.04); opacity:1; } }

/* Word-by-word hero text reveal */
.hero h1 .word, header.hero h1 .word {
  display: inline-block; opacity: 0; filter: blur(14px);
  transform: translateY(.5em) scale(.96);
  animation: wordReveal .9s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: calc(var(--i, 0) * 110ms + 200ms);
}
@keyframes wordReveal { to { opacity:1; filter:blur(0); transform:none; } }

.hero .lede, header.hero .lede,
.hero .lede-center, header.hero .lede-center {
  opacity: 0; animation: fadeUp 1s cubic-bezier(.22,1,.36,1) forwards; animation-delay: 1.1s;
}
.hero .lede + div, header.hero .lede + div,
.hero .lede-center + div, header.hero .lede-center + div {
  opacity: 0; animation: fadeUp 1s cubic-bezier(.22,1,.36,1) forwards; animation-delay: 1.35s;
}
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:none; } }

/* Floating accent icons at hero edges */
.hero-icons { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.hero-icons span {
  position: absolute; width: 38px; height: 38px; border-radius: 10px;
  background: rgba(0,100,222,.04); border: 1px solid rgba(0,100,222,.18);
  backdrop-filter: blur(8px); display: grid; place-items: center;
  color: rgba(0,100,222,.5); font-size: 1rem;
  animation: floatDrift 7s ease-in-out infinite;
}
.hero-icons span:nth-child(1) { top: 18%; left: 8%;  animation-delay: 0s; }
.hero-icons span:nth-child(2) { top: 32%; left: 14%; animation-delay: -1.5s; }
.hero-icons span:nth-child(3) { top: 22%; right: 9%; animation-delay: -3s; }
.hero-icons span:nth-child(4) { top: 38%; right: 15%; animation-delay: -4.5s; }
@keyframes floatDrift {
  0%,100% { transform: translateY(0) rotate(0); }
  33%     { transform: translateY(-8px) rotate(2deg); }
  66%     { transform: translateY(6px) rotate(-2deg); }
}

/* Lens flare section dividers */
section { position: relative; isolation: isolate; }
section.flare::before {
  content: ""; position: absolute; top: -200px; left: 0; right: 0; height: 400px;
  z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(46,122,230,.08), transparent 60%);
  filter: blur(60px);
}

/* Card hover lift */
.card, [class*="case-card"], [class*="industry-card"] {
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), border-color .2s !important;
}
.card:hover, [class*="case-card"]:hover, [class*="industry-card"]:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,100,222,.18), 0 4px 12px rgba(15,23,42,.06);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;
  }
  .hero h1 .word { opacity: 1; filter: none; transform: none; }
  .hero .lede, .hero .lede-center { opacity: 1; }
}