@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Performance: skip rendering off-screen sections until needed ──────────── */
/* Applied to page sections that are well below the fold.                       */
/* contain-intrinsic-size prevents layout shift when the section is skipped.    */
.below-fold-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 600px;
}

/* Taller sections (case studies, about timelines, FAQ lists) */
.below-fold-section-tall {
  content-visibility: auto;
  contain-intrinsic-size: 0 900px;
}

/* Ensure images don't cause layout shift by reserving space */
img {
  max-width: 100%;
  height: auto;
}

/* ── CLS prevention: reserve space for canvas-based hero backgrounds ──────── */
/* Prevents the page from jumping when the canvas mounts after hydration.       */
.particle-hero-shell {
  min-height: 80vh;
  contain: layout style;
}

/* ── Font display: prevent invisible text during font swap ───────────────── */
@font-face {
  font-display: swap;
}

@layer base {
  :root {
    /* Core Colors */
    --background: 213 52% 8%;
    --foreground: 0 0% 96%;
    --card: 213 52% 8%;
    --card-foreground: 0 0% 96%;
    --popover: 213 52% 8%;
    --popover-foreground: 0 0% 96%;
    --primary: 199 89% 48%;
    --primary-foreground: 0 0% 100%;
    --secondary: 229 89% 48%;
    --secondary-foreground: 0 0% 100%;
    --muted: 214 41% 3%;
    --muted-foreground: 0 0% 96%;
    --accent: 19 89% 48%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 200 75% 98%;
    --input: 200 75% 98%;
    --ring: 199 89% 48%;

    /* Extended Colors */
    --chart-1: 199 89% 78%;
    --chart-2: 199 88% 63%;
    --chart-3: 199 89% 48%;
    --chart-4: 199 88% 34%;
    --chart-5: 199 89% 18%;

    /* Sidebar Colors */
    --sidebar: 214 41% 3%;
    --sidebar-foreground: 0 0% 96%;
    --sidebar-primary: 199 89% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 19 89% 48%;
    --sidebar-accent-foreground: 0 0% 100%;
    --sidebar-border: 200 75% 98%;
    --sidebar-ring: 199 89% 48%;

    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-serif: ui-serif, Georgia, "Times New Roman", serif;
    --font-mono: ui-monospace, "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;

    /* Border Radius */
    --radius: 0.5rem;

    /* Shadows */
    --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
    --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
    --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
    --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
    --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-sans;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
  }
}

/* Custom utility classes */
@layer utilities {
  .animate-in {
    animation-duration: 0.2s;
    animation-fill-mode: both;
  }

  .fade-in {
    animation-name: fadeIn;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Liquid Glass Effect */
  .glass-effect {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(138, 43, 226, 0.2),
                0 0 20px 0 rgba(138, 43, 226, 0.15),
                inset 0 0 20px 0 rgba(255, 255, 255, 0.05);
  }

  .glass-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .glass-hover:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(138, 43, 226, 0.4);
    box-shadow: 0 8px 32px 0 rgba(138, 43, 226, 0.4),
                0 0 30px 0 rgba(138, 43, 226, 0.3),
                inset 0 0 30px 0 rgba(255, 255, 255, 0.08);
    transform: translateY(-2px);
  }

  /* Glow Effect */
  .glow-purple {
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.5),
                0 0 40px rgba(138, 43, 226, 0.3),
                0 0 60px rgba(138, 43, 226, 0.2);
  }

  .glow-purple-hover:hover {
    box-shadow: 0 0 30px rgba(138, 43, 226, 0.7),
                0 0 60px rgba(138, 43, 226, 0.5),
                0 0 90px rgba(138, 43, 226, 0.3);
  }

  /* Animations */
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-float-delay {
    animation: float 6s ease-in-out infinite;
    animation-delay: 1s;
  }

  .animate-slide-up {
    animation: slideUp 0.6s ease-out;
  }

  .animate-slide-in-left {
    animation: slideInLeft 0.6s ease-out;
  }

  .animate-slide-in-right {
    animation: slideInRight 0.6s ease-out;
  }

  .animate-scale-in {
    animation: scaleIn 0.5s ease-out;
  }

  .animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out;
  }

  .animate-pulse-glow {
    animation: pulseGlow 2s ease-in-out infinite;
  }

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

  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes pulseGlow {
    0%, 100% {
      box-shadow: 0 0 20px rgba(138, 43, 226, 0.4),
                  0 0 40px rgba(138, 43, 226, 0.2);
    }
    50% {
      box-shadow: 0 0 30px rgba(138, 43, 226, 0.6),
                  0 0 60px rgba(138, 43, 226, 0.4);
    }
  }

  @keyframes slowZoom {
    0% {
      transform: scale(1);
    }
    100% {
      transform: scale(1.1);
    }
  }

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

  @keyframes scroll {
    0% {
      transform: translateY(0);
      opacity: 1;
    }
    100% {
      transform: translateY(12px);
      opacity: 0;
    }
  }

  .animate-slow-zoom {
    animation: slowZoom 20s ease-in-out infinite alternate;
  }

  .animate-gradient {
    background-size: 200% 200%;
    animation: gradient 3s ease infinite;
  }

  .animate-scroll {
    animation: scroll 2s ease-in-out infinite;
  }

  /* New Advanced Animations */
  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-20px);
    }
  }

  @keyframes slideInFromLeft {
    0% {
      opacity: 0;
      transform: translateX(-100px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInFromRight {
    0% {
      opacity: 0;
      transform: translateX(100px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInFromBottom {
    0% {
      opacity: 0;
      transform: translateY(100px);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes rotateIn {
    0% {
      opacity: 0;
      transform: rotate(-180deg) scale(0.5);
    }
    100% {
      opacity: 1;
      transform: rotate(0deg) scale(1);
    }
  }

  @keyframes flipIn {
    0% {
      opacity: 0;
      transform: perspective(400px) rotateY(90deg);
    }
    100% {
      opacity: 1;
      transform: perspective(400px) rotateY(0deg);
    }
  }

  @keyframes zoomIn {
    0% {
      opacity: 0;
      transform: scale(0.3);
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
  }

  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.05);
      opacity: 0.8;
    }
  }

  @keyframes shimmer {
    0% {
      background-position: -1000px 0;
    }
    100% {
      background-position: 1000px 0;
    }
  }

  @keyframes wave {
    0%, 100% {
      transform: rotate(0deg);
    }
    25% {
      transform: rotate(20deg);
    }
    75% {
      transform: rotate(-20deg);
    }
  }

  @keyframes heartbeat {
    0%, 100% {
      transform: scale(1);
    }
    10%, 30% {
      transform: scale(1.1);
    }
    20%, 40% {
      transform: scale(1);
    }
  }

  @keyframes glow {
    0%, 100% {
      box-shadow: 0 0 5px hsl(var(--primary)),
                  0 0 10px hsl(var(--primary)),
                  0 0 15px hsl(var(--primary));
    }
    50% {
      box-shadow: 0 0 10px hsl(var(--primary)),
                  0 0 20px hsl(var(--primary)),
                  0 0 30px hsl(var(--primary)),
                  0 0 40px hsl(var(--primary));
    }
  }

  @keyframes typewriter {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }

  /* Animation Utility Classes */
  .animate-float {
    animation: float 3s ease-in-out infinite;
  }

  .animate-slide-in-left {
    animation: slideInFromLeft 0.6s ease-out;
  }

  .animate-slide-in-right {
    animation: slideInFromRight 0.6s ease-out;
  }

  .animate-slide-in-bottom {
    animation: slideInFromBottom 0.6s ease-out;
  }

  .animate-rotate-in {
    animation: rotateIn 0.8s ease-out;
  }

  .animate-flip-in {
    animation: flipIn 0.6s ease-out;
  }

  .animate-zoom-in {
    animation: zoomIn 0.5s ease-out;
  }

  .animate-pulse {
    animation: pulse 2s ease-in-out infinite;
  }

  .animate-shimmer {
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
  }

  .animate-wave {
    animation: wave 2s ease-in-out infinite;
    transform-origin: 70% 70%;
  }

  .animate-heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
  }

  .animate-glow {
    animation: glow 2s ease-in-out infinite;
  }

  /* Hover Effects */
  .hover-float:hover {
    animation: float 1s ease-in-out infinite;
  }

  .hover-grow {
    transition: transform 0.3s ease;
  }

  .hover-grow:hover {
    transform: scale(1.1);
  }

  .hover-shrink {
    transition: transform 0.3s ease;
  }

  .hover-shrink:hover {
    transform: scale(0.95);
  }

  .hover-tilt {
    transition: transform 0.3s ease;
  }

  .hover-tilt:hover {
    transform: perspective(1000px) rotateX(10deg) rotateY(10deg);
  }

  .hover-glow-intense {
    transition: filter 0.3s ease, transform 0.3s ease;
  }

  .hover-glow-intense:hover {
    filter: drop-shadow(0 0 20px hsl(var(--primary)));
    transform: scale(1.05);
  }

  .hover-slide-up {
    transition: transform 0.3s ease;
  }

  .hover-slide-up:hover {
    transform: translateY(-10px);
  }

  .hover-rotate {
    transition: transform 0.3s ease;
  }

  .hover-rotate:hover {
    transform: rotate(360deg);
  }

  .hover-bounce {
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  .hover-bounce:hover {
    transform: translateY(-5px);
  }

  /* Stagger animation delays */
  .stagger-1 { animation-delay: 0.1s; }
  .stagger-2 { animation-delay: 0.2s; }
  .stagger-3 { animation-delay: 0.3s; }
  .stagger-4 { animation-delay: 0.4s; }
  .stagger-5 { animation-delay: 0.5s; }
  .stagger-6 { animation-delay: 0.6s; }
  .stagger-7 { animation-delay: 0.7s; }
  .stagger-8 { animation-delay: 0.8s; }

  /* Advanced Animations */
  .animate-bounce-slow {
    animation: bounceSlow 3s ease-in-out infinite;
  }

  .animate-spin-slow {
    animation: spinSlow 8s linear infinite;
  }

  .animate-gradient {
    animation: gradientShift 8s ease infinite;
    background-size: 200% 200%;
  }

  .animate-shimmer {
    animation: shimmer 2s ease-in-out infinite;
  }

  .animate-wiggle {
    animation: wiggle 1s ease-in-out;
  }

  .animate-flip-in {
    animation: flipIn 0.6s ease-out;
  }

  .animate-zoom-in {
    animation: zoomIn 0.5s ease-out;
  }

  .animate-slide-down {
    animation: slideDown 0.6s ease-out;
  }

  .animate-rotate-in {
    animation: rotateIn 0.8s ease-out;
  }

  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(138, 43, 226, 0.4);
  }

  .hover-glow-intense {
    transition: all 0.3s ease;
  }

  .hover-glow-intense:hover {
    filter: brightness(1.2) drop-shadow(0 0 20px rgba(138, 43, 226, 0.8));
  }

  .hover-scale {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hover-scale:hover {
    transform: scale(1.05);
  }

  .hover-rotate {
    transition: transform 0.3s ease;
  }

  .hover-rotate:hover {
    transform: rotate(5deg) scale(1.05);
  }

  @keyframes bounceSlow {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-15px);
    }
  }

  @keyframes spinSlow {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

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

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

  @keyframes wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
  }

  @keyframes flipIn {
    from {
      opacity: 0;
      transform: perspective(400px) rotateY(90deg);
    }
    to {
      opacity: 1;
      transform: perspective(400px) rotateY(0deg);
    }
  }

  @keyframes zoomIn {
    from {
      opacity: 0;
      transform: scale(0.5);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes rotateIn {
    from {
      opacity: 0;
      transform: rotate(-180deg) scale(0.5);
    }
    to {
      opacity: 1;
      transform: rotate(0deg) scale(1);
    }
  }

  /* Particle effect background */
  .particles-bg {
    position: relative;
    overflow: hidden;
  }

  .particles-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
      radial-gradient(circle at 20% 30%, rgba(138, 43, 226, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(138, 43, 226, 0.15) 0%, transparent 50%),
      radial-gradient(circle at 40% 80%, rgba(138, 43, 226, 0.08) 0%, transparent 50%);
    animation: particleFloat 20s ease-in-out infinite;
    pointer-events: none;
  }

  @keyframes particleFloat {
    0%, 100% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(30px, -30px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
  }
}

/* Scroll Animations */
.scroll-fade-in {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.scroll-fade-in.visible {
  opacity: 1;
}

.scroll-slide-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-slide-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-slide-left {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-slide-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.scroll-slide-right {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-slide-right.visible {
  opacity: 1;
  transform: translateX(0);
}

.scroll-scale-in {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-scale-in.visible {
  opacity: 1;
  transform: scale(1);
}

.scroll-rotate-in {
  opacity: 0;
  transform: rotate(-5deg) scale(0.95);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-rotate-in.visible {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* Staggered scroll animations */
.scroll-stagger-1 {
  transition-delay: 0ms;
}
.scroll-stagger-2 {
  transition-delay: 100ms;
}
.scroll-stagger-3 {
  transition-delay: 200ms;
}
.scroll-stagger-4 {
  transition-delay: 300ms;
}
.scroll-stagger-5 {
  transition-delay: 400ms;
}
.scroll-stagger-6 {
  transition-delay: 500ms;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Immediately show scroll animations */
  .scroll-fade-in,
  .scroll-slide-up,
  .scroll-slide-left,
  .scroll-slide-right,
  .scroll-scale-in,
  .scroll-rotate-in {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Unless told otherwise, keep it for smooth scrolling */
html {
  scroll-behavior: smooth;
}

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

/* Particle Hero Animations */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.animation-delay-200 {
  animation-delay: 0.2s;
  opacity: 0;
}

.animation-delay-400 {
  animation-delay: 0.4s;
  opacity: 0;
}

.animation-delay-600 {
  animation-delay: 0.6s;
  opacity: 0;
}

.animation-delay-800 {
  animation-delay: 0.8s;
  opacity: 0;
}