/* ==================================================
   hlukh-animations.css
   restrained motion system for content-heavy pages
   ================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------
   Keyframes
   -------------------------------------------------- */

@keyframes rise-fade {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes drift-left {
  from {
    opacity: 0;
    transform: translate3d(26px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes drift-right {
  from {
    opacity: 0;
    transform: translate3d(-26px, 0, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes soft-pop {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes sheen-pass {
  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(120%);
  }
}

@keyframes bar-fill {
  from {
    width: 0;
  }
}

/* --------------------------------------------------
   Scroll reveal helper
   -------------------------------------------------- */

.fade-in {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition:
    opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in.visible {
  opacity: 1;
  transform: none;
}

.fade-in.visible .post-card:nth-child(1),
.fade-in.visible .card:nth-child(1),
.fade-in.visible .support-card:nth-child(1) { transition-delay: 0.04s; }
.fade-in.visible .post-card:nth-child(2),
.fade-in.visible .card:nth-child(2),
.fade-in.visible .support-card:nth-child(2) { transition-delay: 0.10s; }
.fade-in.visible .post-card:nth-child(3),
.fade-in.visible .card:nth-child(3),
.fade-in.visible .support-card:nth-child(3) { transition-delay: 0.16s; }
.fade-in.visible .post-card:nth-child(4),
.fade-in.visible .card:nth-child(4),
.fade-in.visible .support-card:nth-child(4) { transition-delay: 0.22s; }
.fade-in.visible .post-card:nth-child(5),
.fade-in.visible .card:nth-child(5),
.fade-in.visible .support-card:nth-child(5) { transition-delay: 0.28s; }
.fade-in.visible .post-card:nth-child(6),
.fade-in.visible .card:nth-child(6),
.fade-in.visible .support-card:nth-child(6) { transition-delay: 0.34s; }

/* --------------------------------------------------
   Shared micro-interactions
   -------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
  .btn,
  .btn-ghost,
  a.button,
  button[type="submit"] {
    transition:
      transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.18s cubic-bezier(0.22, 1, 0.36, 1),
      background-color 0.18s ease,
      color 0.18s ease,
      border-color 0.18s ease !important;
  }

  .btn:hover,
  .btn-ghost:hover,
  a.button:hover,
  button[type="submit"]:hover {
    transform: translateY(-2px);
  }

  .btn:hover,
  a.button:hover {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14) !important;
  }

  .btn-ghost:hover,
  button[type="submit"]:hover {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1) !important;
  }

  .card,
  .post-card,
  .blog-card,
  .support-card,
  .agents-flow-card,
  .agents-principles-card,
  .contact-card {
    transition:
      transform 0.22s ease,
      box-shadow 0.22s ease,
      border-color 0.22s ease !important;
  }

  .card:hover,
  .post-card:hover,
  .blog-card:hover,
  .support-card:hover,
  .agents-flow-card:hover,
  .agents-principles-card:hover,
  .contact-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1) !important;
  }

  .partner-badges a {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  }

  .partner-badges a:hover {
    transform: translateY(-2px) scale(1.03) !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.09) !important;
  }
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.14) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

footer a {
  position: relative;
  text-decoration: none;
}

footer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.26s ease;
}

footer a:hover::after {
  width: 100%;
}

/* --------------------------------------------------
   Blog and content grids
   -------------------------------------------------- */

.post-grid .post-card,
.support-grid .support-card {
  animation: rise-fade 0.54s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.post-grid .post-card:nth-child(1),
.support-grid .support-card:nth-child(1) { animation-delay: 0.04s; }
.post-grid .post-card:nth-child(2),
.support-grid .support-card:nth-child(2) { animation-delay: 0.10s; }
.post-grid .post-card:nth-child(3),
.support-grid .support-card:nth-child(3) { animation-delay: 0.16s; }
.post-grid .post-card:nth-child(4),
.support-grid .support-card:nth-child(4) { animation-delay: 0.22s; }
.post-grid .post-card:nth-child(5),
.support-grid .support-card:nth-child(5) { animation-delay: 0.28s; }
.post-grid .post-card:nth-child(6),
.support-grid .support-card:nth-child(6) { animation-delay: 0.34s; }
.post-grid .post-card:nth-child(7) { animation-delay: 0.40s; }
.post-grid .post-card:nth-child(8) { animation-delay: 0.46s; }

.post-tag {
  transition: transform 0.18s ease, background-color 0.18s ease;
}

@media (hover: hover) and (pointer: fine) {
  .post-card:hover .post-tag,
  .blog-card:hover .post-tag {
    transform: scale(1.04);
  }
}

/* --------------------------------------------------
   Agents page
   -------------------------------------------------- */

.agents-page .agents-hero-copy {
  animation: drift-right 0.72s 0.06s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.agents-page .agents-hero-panel {
  animation: drift-left 0.72s 0.16s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.agents-page .agents-kicker {
  position: relative;
  overflow: hidden;
}

.agents-page .agents-kicker::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 24%, rgba(255, 255, 255, 0.55) 50%, transparent 76%);
  transform: translateX(-120%);
  animation: sheen-pass 1.2s 0.65s cubic-bezier(0.22, 1, 0.36, 1) 1 both;
  pointer-events: none;
}

.agents-page .agents-hero-pills span {
  animation: soft-pop 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.agents-page .agents-hero-pills span:nth-child(1) { animation-delay: 0.24s; }
.agents-page .agents-hero-pills span:nth-child(2) { animation-delay: 0.30s; }
.agents-page .agents-hero-pills span:nth-child(3) { animation-delay: 0.36s; }
.agents-page .agents-hero-pills span:nth-child(4) { animation-delay: 0.42s; }
.agents-page .agents-hero-pills span:nth-child(5) { animation-delay: 0.48s; }
.agents-page .agents-hero-pills span:nth-child(6) { animation-delay: 0.54s; }

.agents-page .agents-hero-step {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  animation: rise-fade 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.agents-page .agents-hero-step:nth-child(1) { animation-delay: 0.28s; }
.agents-page .agents-hero-step:nth-child(2) { animation-delay: 0.38s; }
.agents-page .agents-hero-step:nth-child(3) { animation-delay: 0.48s; }

.agents-page .agents-step-num {
  animation: soft-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.agents-page .agents-hero-step:nth-child(1) .agents-step-num { animation-delay: 0.32s; }
.agents-page .agents-hero-step:nth-child(2) .agents-step-num { animation-delay: 0.42s; }
.agents-page .agents-hero-step:nth-child(3) .agents-step-num { animation-delay: 0.52s; }

.agents-page .agents-intro-grid .card {
  animation: rise-fade 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.agents-page .agents-intro-grid .card:nth-child(1) { animation-delay: 0.08s; }
.agents-page .agents-intro-grid .card:nth-child(2) { animation-delay: 0.16s; }
.agents-page .agents-intro-grid .card:nth-child(3) { animation-delay: 0.24s; }
.agents-page .agents-intro-grid .card:nth-child(4) { animation-delay: 0.32s; }

.agents-page .agents-mini-list li {
  animation: drift-right 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.agents-page .agents-mini-list li:nth-child(1) { animation-delay: 0.08s; }
.agents-page .agents-mini-list li:nth-child(2) { animation-delay: 0.14s; }
.agents-page .agents-mini-list li:nth-child(3) { animation-delay: 0.20s; }
.agents-page .agents-mini-list li:nth-child(4) { animation-delay: 0.26s; }
.agents-page .agents-mini-list li:nth-child(5) { animation-delay: 0.32s; }

/* --------------------------------------------------
   Security page
   -------------------------------------------------- */

.headline {
  animation: rise-fade 0.58s 0.08s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.security-check-forms {
  animation: rise-fade 0.62s 0.14s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bar {
  animation: bar-fill 1.05s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.row:nth-child(1) .bar { animation-delay: 0.08s; }
.row:nth-child(2) .bar { animation-delay: 0.16s; }
.row:nth-child(3) .bar { animation-delay: 0.24s; }
.row:nth-child(4) .bar { animation-delay: 0.32s; }
.row:nth-child(5) .bar { animation-delay: 0.40s; }
.row:nth-child(6) .bar { animation-delay: 0.48s; }

.result {
  animation: soft-pop 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* --------------------------------------------------
   Subtle CTA entrance
   -------------------------------------------------- */

@keyframes cta-settle {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.floating-cta {
  animation: cta-settle 0.5s 1s cubic-bezier(0.22, 1, 0.36, 1) both;
}