/* Custom animations layer - focuses on tasteful, performant effects. */

@media (prefers-reduced-motion: no-preference) {
  /* Animated gradient text for hero title */
  .hero-title {
    background: linear-gradient(90deg, #ffffff, #b3d4ff, #22d3ee, #ffffff);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradient-pan 12s ease infinite;
  }

  @keyframes gradient-pan {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }

  /* Slow ambient motion for hero blob */
  .hero-blob { animation: blob-sway 22s ease-in-out infinite; transform-origin: 60% 40%; }
  @keyframes blob-sway {
    0% { transform: rotate(0deg) scale(1); opacity: .8; }
    50% { transform: rotate(3deg) scale(1.03); opacity: .9; }
    100% { transform: rotate(0deg) scale(1); opacity: .8; }
  }

  /* Subtle animated border glow for cards */
  .card {
    position: relative;
    overflow: hidden;
  }
  .card::after {
    content: "";
    position: absolute; inset: -2px;
    background: conic-gradient(from 0deg, rgba(34,211,238,.0), rgba(34,211,238,.25), rgba(37,110,255,.3), rgba(34,211,238,.0));
    filter: blur(10px);
    opacity: 0;
    transition: opacity .3s ease;
    animation: border-rotate 10s linear infinite;
    pointer-events: none;
  }
  .card:hover::after { opacity: .5; }
  @keyframes border-rotate { to { transform: rotate(360deg); } }

  /* Shimmer pass on primary buttons (on hover) */
  .btn-primary { position: relative; overflow: hidden; }
  .btn-primary::after {
    content: "";
    position: absolute; inset: -20% -40%;
    background: linear-gradient(75deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 60%);
    transform: translateX(-120%);
  }
  .btn-primary:hover::after { animation: sheen 900ms ease; }
  @keyframes sheen { to { transform: translateX(120%); } }

  /* Underline grow for navigation and footer links */
  .nav-menu a, .footer-links a {
    position: relative;
  }
  .nav-menu a::after, .footer-links a::after {
    content: ""; position: absolute; left: .8rem; right: .8rem; bottom: .4rem; height: 2px;
    background: currentColor; opacity: 0; transform: scaleX(.25);
    transition: transform .25s ease, opacity .25s ease;
    transform-origin: left;
  }
  .nav-menu a:hover::after, .footer-links a:hover::after { opacity: .65; transform: scaleX(1); }

  /* Floating icons in hero card */
  .hero-card-row .icon { display: inline-block; animation: floaty 4.5s ease-in-out infinite; }
  .hero-card-row:nth-child(2) .icon { animation-delay: .2s; }
  .hero-card-row:nth-child(3) .icon { animation-delay: .4s; }
  .hero-card-row:nth-child(4) .icon { animation-delay: .6s; }
  @keyframes floaty { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } }

  /* Soft pulse on stats when they become visible */
  .reveal.is-visible .stat { animation: stat-pop .6s cubic-bezier(.2,.7,.2,1) both; }
  .reveal.is-visible .stat:nth-child(2) { animation-delay: .05s; }
  .reveal.is-visible .stat:nth-child(3) { animation-delay: .1s; }
  @keyframes stat-pop { 0% { transform: translateY(8px) scale(.98); opacity: .0; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-title, .hero-blob, .card::after, .btn-primary::after, .hero-card-row .icon, .reveal.is-visible .stat {
    animation: none !important;
    transition: none !important;
  }
}