/* Landing page specific styles */

/* Animations */
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

/* Static gradient background */
.bg-radial-gradient {
  background: radial-gradient(circle at center, rgba(255,140,0,0.06), transparent 70%);
}

/* Dark mode gradient background */
.dark .bg-radial-gradient {
  background: radial-gradient(circle at center, rgba(6, 182, 212, 0.15), transparent 70%);
}

/* Simplified delta symbol - less distracting, better performance */
.css-delta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  pointer-events: none;
  /* Outer triangle (clockwise), then seam to inner triangle (counter-clockwise) */
  clip-path: polygon(
    0% 100%, 
    50% 0%, 
    100% 100%, 
    0% 100%, 
    25% 80%, 
    75% 80%, 
    50% 30%, 
    25% 80%
  );
}

.delta-1 {
  width: 160vmax;
  height: 160vmax;
  background-color: rgba(255, 140, 0, 0.04);
  transition: background-color 1s ease;
  animation:
    fade-in-opacity 2s ease-out forwards,
    float-triangle-1 40s ease-in-out infinite alternate 1s;
}

.delta-2 {
  width: 150vmax;
  height: 150vmax;
  background-color: rgba(255, 120, 20, 0.03);
  transition: background-color 1s ease;
  animation:
    fade-in-opacity 2s ease-out 0.5s forwards,
    float-triangle-2 45s ease-in-out infinite alternate 1s;
}

@keyframes fade-in-opacity {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Dark mode alternative colors */
.dark .delta-1 {
  background-color: rgba(6, 182, 212, 0.08); /* More subtle cyan */
}

.dark .delta-2 {
  background-color: rgba(14, 165, 233, 0.06); /* More subtle sky */
}

/* Progressive enhancement - disable animation for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .css-delta {
    animation: none;
    opacity: 1;
  }
  .delta-1 {
    background-color: rgba(255, 140, 0, 0.04);
  }
  .delta-2 {
    background-color: rgba(255, 120, 20, 0.03);
  }
  .dark .delta-1 {
    background-color: rgba(6, 182, 212, 0.08);
  }
  .dark .delta-2 {
    background-color: rgba(14, 165, 233, 0.06);
  }
}

/* Smooth floating animations for the triangles */
@keyframes float-triangle-1 {
  0% { transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1); }
  33% { transform: translate3d(-48%, -52%, 0) rotate(15deg) scale(1.02); }
  66% { transform: translate3d(-52%, -48%, 0) rotate(-5deg) scale(0.98); }
  100% { transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1); }
}

@keyframes float-triangle-2 {
  0% { transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1); }
  33% { transform: translate3d(-52%, -48%, 0) rotate(-15deg) scale(0.98); }
  66% { transform: translate3d(-48%, -52%, 0) rotate(5deg) scale(1.02); }
  100% { transform: translate3d(-50%, -50%, 0) rotate(0deg) scale(1); }
}

/* Ensure background animations are never affected by content scaling */
.css-delta,
.bg-radial-gradient {
  position: fixed !important;
  will-change: transform, opacity !important;
  transform-style: preserve-3d !important;
  isolation: isolate !important;
}

/* FAQ accordion isolation to prevent affecting background */
[data-controller="accordion"] {
  isolation: isolate;
  transform-style: flat;
}
/* Ultra-smooth ambient drift animation for background blobs */
@keyframes ambient-drift {
  0% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.3; }
  33% { transform: translate(3%, -5%) scale(1.1) rotate(2deg); opacity: 0.5; }
  66% { transform: translate(-2%, 3%) scale(0.9) rotate(-1deg); opacity: 0.4; }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 0.3; }
}

.animate-ambient-drift {
  animation: ambient-drift 20s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

@media (max-width: 768px) {
  .animate-ambient-drift {
    animation: none;
    opacity: 0.35;
    will-change: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-ambient-drift {
    animation: none;
    opacity: 0.5;
  }
}