/* Custom gradients, animations, and grain noise texture */

/* View Transition API */
@view-transition {
  navigation: auto;
}

/* Base style resets and styles */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.02em;
}

/* Grain texture overlay */
.grainy-bg::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0.035;
  /* subtle noise */
  pointer-events: none;
  z-index: 9999;
  background-repeat: repeat;
  background-size: 300px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.dark .grainy-bg::before {
  opacity: 0.055;
  /* slightly more noise contrast in dark mode */
}

/* Radial Glows matching resend.com style */
.radial-glow-header {
  background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0) 50%);
}

.dark .radial-glow-header {
  background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.04) 0%, rgba(0, 0, 0, 0) 60%);
}

.radial-glow-hero {
  background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.09) 0%, rgba(139, 92, 246, 0) 50%);
}

.dark .radial-glow-hero {
  background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.04) 0%, rgba(0, 0, 0, 0) 60%);
}

/* Custom CSS Fade-in Page Transitions */
@keyframes pageSlideUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-transition-content {
  animation: pageSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom styles for accordion transition */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
  opacity: 0;
}

.accordion-content.open {
  max-height: 500px;
  /* arbitrary height to fit FAQ answer */
  opacity: 1;
}

/* Hide scrollbar but keep functionality */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Subtle modern grid line styling for sections */
.grid-lines {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(128, 128, 128, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(128, 128, 128, 0.05) 1px, transparent 1px);
}

.dark .grid-lines {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
}