/* ============================================
   DIAGONAL RIPPLE BACKGROUND
   - Two emitters aligned along a 45° diagonal
   - Solid outline rings that grow outward
   - No fading or distortion, only uniform scaling
   - Respects prefers-reduced-motion
   ============================================ */

/* Variables */
:root {
  --ripple-color: rgba(255, 140, 0, 0.55);
  --ripple-line-width: 2px;
  --ripple-max-scale: 3.5; /* refined for smooth expansion */
  --ripple-duration: 10s; /* slower, more relaxing */
  --ripple-ring-count: 5;
  --ripple-stagger: calc(var(--ripple-duration) / var(--ripple-ring-count));
}

/* Container */
.ripple-bg {
  position: relative;
  min-height: 100%;
}

/* Content above emitters */
.ripple-bg > *:not(.ripple-emitter) { position: relative; z-index: 1; }

/* Emitters behind content */
.ripple-emitter {
  position: fixed;
  width: 22vmin; /* smaller base circle */
  height: 22vmin;
  pointer-events: none;
  z-index: 0;
  opacity: 0.85;
  transition: opacity 600ms ease-in-out;
}

/* Ensure header remains above all ripple emitters and content */
header.fixed,
header.sticky {
  z-index: 9999 !important;
}

.ripple-emitter--alpha { top: 18%; left: 18%; transform: translate(-50%, -50%); }
.ripple-emitter--beta { top: 82%; left: 82%; transform: translate(-50%, -50%); }

/* Rings */
.ripple-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 100%;
  border: var(--ripple-line-width) solid var(--ripple-color);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.1);
  animation: ripple-expand var(--ripple-duration) cubic-bezier(0.33, 0, 0.2, 1) infinite;
  will-change: transform;
  mix-blend-mode: screen;
}

.ripple-ring:nth-child(1) { animation-delay: 0s; }
.ripple-ring:nth-child(2) { animation-delay: calc(-1 * var(--ripple-stagger)); }
.ripple-ring:nth-child(3) { animation-delay: calc(-2 * var(--ripple-stagger)); }
.ripple-ring:nth-child(4) { animation-delay: calc(-3 * var(--ripple-stagger)); }
.ripple-ring:nth-child(5) { animation-delay: calc(-4 * var(--ripple-stagger)); }

@keyframes ripple-expand {
  0% { 
    transform: translate(-50%, -50%) scale(0.1);
    opacity: 0;
  }
  8% {
    opacity: 0.9;
  }
  85% {
    opacity: 0.7;
  }
  100% { 
    transform: translate(-50%, -50%) scale(var(--ripple-max-scale));
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ripple-ring {
    animation: none;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

/* ============================================
   MOBILE HEADER OPTIMIZATION
   - Smaller navigation buttons on mobile
   - Reduced spacing and font sizes
   ============================================ */

@media (max-width: 768px) {
  /* Make header navigation links smaller */
  header nav {
    gap: 0.5rem !important;
    font-size: 0.75rem !important;
  }
  
  header nav a {
    padding: 0.25rem 0.5rem;
  }
  
  /* Reduce header padding on mobile */
  header .max-w-7xl {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
  
  /* Make logo/brand name smaller on mobile */
  header .text-2xl {
    font-size: 1.25rem !important;
  }
  
  header .text-3xl {
    font-size: 1.5rem !important;
  }

  /* Fix section layouts on mobile */
  section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Fix button groups on mobile - stack them vertically */
  .flex.gap-3 {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .flex.gap-3 a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Fix buttons with padding to be more compact on mobile */
  .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Make headings smaller on mobile */
  h1.text-4xl,
  h1.md\:text-5xl {
    font-size: 1.75rem !important;
    line-height: 2rem !important;
  }

  h2.text-3xl,
  h2.md\:text-4xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }

  h3.text-2xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }

  /* Fix text sizes on mobile */
  .text-lg {
    font-size: 1rem !important;
  }

  .text-xl {
    font-size: 1.125rem !important;
  }

  /* Reduce padding on sections */
  .py-20 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .py-16 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* Fix contact form grid on mobile */
  form.grid {
    grid-template-columns: 1fr !important;
  }

  form.md\:grid-cols-2 > * {
    grid-column: span 1 !important;
  }

  /* Fix footer grid on mobile */
  footer .grid {
    grid-template-columns: 1fr !important;
  }

  /* Fix space between items in navigation */
  .space-x-6 > * + * {
    margin-left: 0.5rem !important;
  }

  /* Make rounded buttons more compact */
  .rounded-full {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}