/* =====================================================================
   Fasecmo — Animation Utilities
   =====================================================================
   Framer Motion handles most interactive animations. These CSS
   keyframes + utility classes power ambient / structural effects.
   ===================================================================== */

/* Skeleton shimmer */
  .skeleton {
    position: relative;
    overflow: hidden;
    background: var(--surface-raised);
    border-radius: 0.5rem;
  }
  .skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.08),
      transparent
    );
    animation: shimmer 1.8s infinite;
  }
  .dark .skeleton::after {
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.05),
      transparent
    );
  }

  /* Glass surface */
  .glass {
    background: var(--surface-overlay);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
  }

  /* Card hover lift */
  .card-lift {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.3s ease;
  }
  .card-lift:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-card-hover);
  }

  /* Text gradient */
  .text-gradient {
    background: linear-gradient(135deg, var(--primary-400), #06b6d4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Grid background pattern for hero sections */
  .bg-grid {
    background-image:
      linear-gradient(to right, var(--line-subtle) 1px, transparent 1px),
      linear-gradient(to bottom, var(--line-subtle) 1px, transparent 1px);
    background-size: 32px 32px;
  }

  /* Radial glow */
  .bg-radial-glow {
    background: radial-gradient(
      ellipse 60% 50% at 50% -10%,
      rgba(99, 102, 241, 0.18),
      transparent
    );
  }

/* Number ticker */
  .tabular-nums {
    font-variant-numeric: tabular-nums;
  }