@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Space Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  
  --color-brand-blue: #004795;
  --color-brand-blue-dark: #002248;
  --color-brand-yellow: #FBB03B;
  --color-brand-yellow-dark: #e09825;
}

/* Base style overrides if needed */
html {
  scroll-behavior: smooth;
}

/* Custom fade transitions for simulator */
.sim-step-pane {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.sim-step-pane.hidden {
  display: none;
  opacity: 0;
  transform: translateX(20px);
}

.sim-step-pane.active {
  display: block;
  opacity: 1;
  transform: translateX(0);
}

/* Custom animations */
@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.animate-pulse-slow {
  animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom modern transitions for Hero slideshow */
.hero-slide {
  transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), filter 0.5s ease;
}

.hero-slide.inactive {
  opacity: 0;
  transform: scale(0.9) rotate(-3deg);
  filter: blur(4px);
  pointer-events: none;
}

.hero-slide.active {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  filter: blur(0);
  pointer-events: auto;
}

/* Custom blending mask for Bento images */
.blend-mask-orange {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 80px);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 80px);
}

@media (min-width: 768px) {
  .blend-mask-orange {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 120px);
    mask-image: linear-gradient(to right, transparent 0%, #000 120px);
  }
}