/* Frontend (views) custom CSS */

/* Gradient background utility used in hero sections */
.gradient-bg {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 50%, #075985 100%);
}

/* Gradient text utility */
.text-gradient {
  background: linear-gradient(135deg, #0284c7, #1e293b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Subtle SVG dot pattern background */
.hero-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ---- Interactive Animations ---- */
@media (prefers-reduced-motion: no-preference) {
  /* Scroll reveal baseline */
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms ease, transform 600ms ease;
    will-change: opacity, transform;
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Subtle hover lift for cards/blocks */
  .hover-lift {
    transition: transform 250ms ease, box-shadow 250ms ease;
  }
  .hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  }

  /* Shimmer underline for links */
  .link-underline {
    position: relative;
  }
  .link-underline::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 0; height: 2px;
    background: currentColor;
    transition: width 220ms ease;
  }
  .link-underline:hover::after { width: 100%; }

  /* Floating animation for decorative elements */
  @keyframes float {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
  }
  .animate-float { animation: float 6s ease-in-out infinite; }
}

/* Utility delays for chaining reveals */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }