/* Desktop-only animation and visual effects */
@media (min-width: 769px) {
  .hero-text-shadow {
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
  }

  .scroll-container {
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  }

  .bg-noise {
    background-image: url(../media/google-bg.webp);
  }

  .glass-nav {
    background: rgba(10, 12, 14, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .status-card {
    background: rgba(30, 35, 41, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px border-white/10;
  }

  /* Cursor Glow */
  .cursor-glow {
    position: fixed;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(
      circle,
      rgba(148, 172, 184, 0.2) 0%,
      rgba(148, 172, 184, 0.05) 40%,
      transparent 70%
    );
    pointer-events: none;
    transition: transform 0.1s cubic-bezier(0.2, 0, 0.2, 1), opacity 0.4s;
    z-index: 99999;
    opacity: 0;
    backdrop-filter: contrast(1.2) brightness(1.15) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 100px rgba(148, 172, 184, 0.1);
  }

  .cursor-glow.active {
    opacity: 1;
  }

  /* Scroll Reveal */
  .reveal-on-scroll {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Premium Card */
  .premium-card {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    perspective: 1000px;
    animation: card-breathe 4s ease-in-out infinite;
  }

  .premium-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(148, 172, 184, 0.15), 0 0 60px rgba(148, 172, 184, 0.08);
  }

  .premium-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, transparent 40%, rgba(148, 172, 184, 0.3) 50%, transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s;
  }

  .premium-card:hover::before {
    opacity: 1;
  }

  @keyframes card-breathe {
    0%,
    100% {
      box-shadow: 0 4px 20px rgba(148, 172, 184, 0.05);
    }
    50% {
      box-shadow: 0 8px 30px rgba(148, 172, 184, 0.12);
    }
  }

  /* Process Icons + Line */
  .process-icon {
    position: relative;
    animation: icon-float 3s ease-in-out infinite;
  }

  .process-icon::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(148, 172, 184, 0.3);
    animation: pulse-ring 2s ease-out infinite;
  }

  .process-line {
    position: absolute;
    top: 50%;
    left: 100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(148, 172, 184, 0.3), transparent);
    z-index: -1;
    transform: translateY(-50%);
  }

  .process-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 100%;
    background: #94acb8;
    box-shadow: 0 0 10px #94acb8;
    animation: pulse-line 3s infinite linear;
  }

  @keyframes pulse-line {
    0% {
      left: 0;
      opacity: 0;
    }
    20% {
      opacity: 1;
    }
    80% {
      opacity: 1;
    }
    100% {
      left: 100%;
      opacity: 0;
    }
  }

  @keyframes pulse-ring {
    0% {
      transform: scale(1);
      opacity: 0.6;
    }
    100% {
      transform: scale(1.3);
      opacity: 0;
    }
  }

  @keyframes icon-float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }

  /* Ambient Particles */
  .ambient-particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
  }

  .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(148, 172, 184, 0.4);
    border-radius: 50%;
    animation: float-particle 15s infinite ease-in-out;
  }

  .particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 12s; }
  .particle:nth-child(2) { left: 25%; animation-delay: 2s; animation-duration: 18s; }
  .particle:nth-child(3) { left: 40%; animation-delay: 4s; animation-duration: 14s; }
  .particle:nth-child(4) { left: 55%; animation-delay: 1s; animation-duration: 20s; }
  .particle:nth-child(5) { left: 70%; animation-delay: 3s; animation-duration: 16s; }
  .particle:nth-child(6) { left: 85%; animation-delay: 5s; animation-duration: 13s; }
  .particle:nth-child(7) { left: 15%; animation-delay: 6s; animation-duration: 17s; }
  .particle:nth-child(8) { left: 60%; animation-delay: 7s; animation-duration: 19s; }

  @keyframes float-particle {
    0%,
    100% {
      transform: translateY(100vh) scale(0);
      opacity: 0;
    }
    10% {
      opacity: 1;
      transform: translateY(80vh) scale(1);
    }
    90% {
      opacity: 1;
      transform: translateY(10vh) scale(1);
    }
    100% {
      opacity: 0;
      transform: translateY(-5vh) scale(0);
    }
  }

  /* Hero Gradient Animation */
  .hero-gradient-bg {
    background: linear-gradient(135deg, #0a0c0e 0%, #1a1f25 50%, #0a0c0e 100%);
    background-size: 200% 200%;
    animation: gradient-shift 8s ease infinite;
  }

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

  /* Glow Border Animation */
  .glow-border {
    position: relative;
  }

  .glow-border::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(148, 172, 184, 0.3), transparent);
    background-size: 200% 100%;
    animation: border-glow-sweep 3s linear infinite;
    z-index: -1;
    opacity: 0.5;
  }

  @keyframes border-glow-sweep {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }

  /* Marquee */
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  .animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
  }

  /* Text Glow */
  .premium-gradient-text {
    background: linear-gradient(135deg, #fff 0%, #94acb8 50%, #fff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% auto;
    animation: textShine 5s linear infinite;
  }

  @keyframes textShine {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
  }

  .shadow-accent-glow {
    box-shadow: 0 0 30px rgba(0, 113, 227, 0.2);
  }

  .shadow-glow {
    box-shadow: 0 0 20px rgba(148, 172, 184, 0.15);
  }
}