/* ============================================
   ScoreJam AI - Landing Page Styles
   ============================================ */

/* Base Styles */
body {
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
}

html {
  scroll-behavior: smooth;
}

/* ============================================
   Animations
   ============================================ */

@keyframes pulse-slow {
  0%,
  100% {
    opacity: 0.1;
    transform: scale(1);
  }
  50% {
    opacity: 0.15;
    transform: scale(1.1);
  }
}

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

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

.animate-pulse-slow-delay-2 {
  animation: pulse-slow 8s ease-in-out infinite;
  animation-delay: 4s;
}

@keyframes water-shimmer {
  0%,
  100% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  50% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

@keyframes light-ray-drift {
  0% {
    transform: rotate(5deg);
  }
  12.5% {
    transform: rotate(5.5deg);
  }
  25% {
    transform: rotate(6.5deg);
  }
  37.5% {
    transform: rotate(7.5deg);
  }
  50% {
    transform: rotate(8deg);
  }
  62.5% {
    transform: rotate(7.5deg);
  }
  75% {
    transform: rotate(6.5deg);
  }
  87.5% {
    transform: rotate(5.5deg);
  }
  100% {
    transform: rotate(5deg);
  }
}

@keyframes scroll-logos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ============================================
   CTA Button - Deep Water Style
   ============================================ */

.cta-button {
  background: linear-gradient(
    135deg,
    rgba(30, 58, 138, 0.9) 0%,
    rgba(17, 24, 39, 0.95) 50%,
    rgba(15, 23, 42, 0.9) 100%
  );
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow:
    0 8px 32px rgba(30, 58, 138, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.cta-button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(148, 163, 184, 0.1) 50%, transparent 70%);
  transform: rotate(45deg);
  animation: water-shimmer 3s ease-in-out infinite;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 12px 48px rgba(30, 58, 138, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3);
  border-color: rgba(148, 163, 184, 0.5);
}

/* ============================================
   Water Effects
   ============================================ */

.water-distortion {
  transition: none;
  will-change: filter;
}

.grid-pattern {
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.02) 1px, transparent 0);
  background-size: 40px 40px;
}

#water-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  mix-blend-mode: screen;
  opacity: 0.6;
}

/* ============================================
   Audio Control Button
   ============================================ */

.audio-control {
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 100;
  width: 56px;
  height: 56px;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.audio-control:hover {
  transform: scale(1.15);
}

.audio-control svg {
  width: 28px;
  height: 28px;
  color: rgba(203, 213, 225, 0.7);
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.audio-control:hover svg {
  color: rgba(203, 213, 225, 1);
}

.audio-control.muted svg {
  color: rgba(148, 163, 184, 0.5);
}

.audio-control.muted:hover svg {
  color: rgba(148, 163, 184, 0.8);
}

/* ============================================
   Responsive Styles
   ============================================ */

/* Tablets */
@media (max-width: 1024px) {
  .min-h-screen h1 {
    font-size: 4rem !important;
    line-height: 1.1 !important;
  }

  .min-h-screen .text-xl {
    font-size: 1.25rem !important;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .min-h-screen {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .min-h-screen h1 {
    font-size: 3rem !important;
    line-height: 1.1 !important;
    margin-bottom: 1.5rem !important;
  }

  .min-h-screen .text-xl,
  .min-h-screen .text-2xl {
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
    margin-bottom: 1rem !important;
  }

  .min-h-screen .max-w-5xl,
  .min-h-screen .max-w-3xl {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .min-h-screen .flex.gap-12 {
    gap: 2rem !important;
    flex-wrap: wrap;
  }

  .min-h-screen .flex.gap-12 > div {
    flex: 1 1 auto;
  }

  .min-h-screen .text-2xl.font-bold {
    font-size: 1.5rem !important;
  }

  .cta-button {
    padding: 1rem 2rem !important;
    font-size: 1rem !important;
  }

  section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .grid.md\:grid-cols-2,
  .grid.md\:grid-cols-3 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  h2 {
    font-size: 2rem !important;
    line-height: 2.5rem !important;
  }

  h3 {
    font-size: 1.25rem !important;
  }

  .bg-white\/5,
  .bg-gradient-to-br {
    padding: 24px !important;
  }

  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* Small Mobile */
@media (max-width: 640px) {
  .min-h-screen h1 {
    font-size: 2.5rem !important;
    line-height: 1.1 !important;
  }

  .min-h-screen .text-xl,
  .min-h-screen .text-2xl {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }

  .min-h-screen .flex.gap-12 {
    flex-direction: column;
    gap: 1.5rem !important;
  }

  .min-h-screen .w-px {
    display: none;
  }

  .cta-button {
    padding: 0.875rem 1.5rem !important;
    font-size: 0.9375rem !important;
  }

  section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  h2 {
    font-size: 1.75rem !important;
    line-height: 2.25rem !important;
  }

  .text-xl {
    font-size: 1rem !important;
    line-height: 1.5rem !important;
  }

  .bg-white\/5,
  .bg-gradient-to-br {
    padding: 20px !important;
  }
}

/* Extra Small Screens */
@media (max-width: 480px) {
  .min-h-screen h1 {
    font-size: 2rem !important;
  }

  .min-h-screen .inline-flex.items-center.gap-2 {
    font-size: 0.75rem !important;
    padding: 0.375rem 0.75rem !important;
  }

  .min-h-screen .inline-flex.items-center.gap-2 svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }
}

/* ============================================
   Logo Carousel - Infinite Scroll
   ============================================ */

.logo-carousel-container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.logo-carousel {
  display: flex;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.logo-track {
  display: flex;
  align-items: center;
  gap: 4rem;
  animation: scroll-logos 30s linear 0s infinite reverse none running;
  will-change: transform;
}

.logo-item {
  height: 24px;
  width: auto;
  opacity: 0.5;
  transition: opacity 0.3s ease;
  flex-shrink: 0;
  filter: brightness(0) invert(1);
}

.logo-item:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* ============================================
   Hero Content Animation
   ============================================ */

.hero-content {
  animation: hero-fade-in 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-badge {
  animation: hero-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.1s backwards;
}

.hero-title {
  animation: hero-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s backwards;
}

.hero-subtitle {
  animation: hero-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s backwards;
}

.hero-cta {
  animation: hero-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s backwards;
}

.hero-trusted {
  animation: hero-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s backwards;
}

.hero-stat-1 {
  animation: hero-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s backwards;
}

.hero-stat-divider-1 {
  animation: hero-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.55s backwards;
}

.hero-stat-2 {
  animation: hero-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s backwards;
}

.hero-stat-divider-2 {
  animation: hero-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.65s backwards;
}

.hero-stat-3 {
  animation: hero-fade-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.7s backwards;
}

@keyframes hero-fade-in {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   Problem Section Animation
   ============================================ */

.problem-section {
  /* Trigger animations when section enters viewport */
}

.problem-title {
  opacity: 0;
  animation: fade-in-down 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-play-state: paused;
}

.problem-section.animate .problem-title {
  animation-play-state: running;
}

.problem-description {
  opacity: 0;
  animation: fade-in-down 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
  animation-play-state: paused;
}

.problem-section.animate .problem-description {
  animation-play-state: running;
}

.problem-card-1 {
  opacity: 0;
  animation: fade-in-from-left 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
  animation-play-state: paused;
}

.problem-section.animate .problem-card-1 {
  animation-play-state: running;
}

.problem-card-2 {
  opacity: 0;
  animation: fade-in-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
  animation-play-state: paused;
}

.problem-section.animate .problem-card-2 {
  animation-play-state: running;
}

.problem-card-3 {
  opacity: 0;
  animation: fade-in-from-left 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
  animation-play-state: paused;
}

.problem-section.animate .problem-card-3 {
  animation-play-state: running;
}

.problem-card-4 {
  opacity: 0;
  animation: fade-in-from-right 1s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
  animation-play-state: paused;
}

.problem-section.animate .problem-card-4 {
  animation-play-state: running;
}

@keyframes fade-in-down {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in-from-left {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-in-from-right {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ============================================
   Solution Section Animation
   ============================================ */

.solution-title {
  opacity: 0;
  animation: fade-in-down 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-play-state: paused;
}

.solution-section.animate .solution-title {
  animation-play-state: running;
}

.solution-description {
  opacity: 0;
  animation: fade-in-down 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
  animation-play-state: paused;
}

.solution-section.animate .solution-description {
  animation-play-state: running;
}

.solution-block-1 {
  opacity: 0;
  animation: fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
  animation-play-state: paused;
}

.solution-section.animate .solution-block-1 {
  animation-play-state: running;
}

.solution-block-2 {
  opacity: 0;
  animation: fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
  animation-play-state: paused;
}

.solution-section.animate .solution-block-2 {
  animation-play-state: running;
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   Pillars Section Animation
   ============================================ */

.pillars-title {
  opacity: 0;
  animation: fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-play-state: paused;
}

.pillars-section.animate .pillars-title {
  animation-play-state: running;
}

.pillars-description {
  opacity: 0;
  animation: fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
  animation-play-state: paused;
}

.pillars-section.animate .pillars-description {
  animation-play-state: running;
}

/* Cards appear in a staggered, non-sequential order */
.pillar-card-1 {
  opacity: 0;
  animation: fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
  animation-play-state: paused;
}

.pillars-section.animate .pillar-card-1 {
  animation-play-state: running;
}

.pillar-card-2 {
  opacity: 0;
  animation: fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
  animation-play-state: paused;
}

.pillars-section.animate .pillar-card-2 {
  animation-play-state: running;
}

.pillar-card-3 {
  opacity: 0;
  animation: fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
  animation-play-state: paused;
}

.pillars-section.animate .pillar-card-3 {
  animation-play-state: running;
}

.pillar-card-4 {
  opacity: 0;
  animation: fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards;
  animation-play-state: paused;
}

.pillars-section.animate .pillar-card-4 {
  animation-play-state: running;
}

.pillar-card-5 {
  opacity: 0;
  animation: fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.8s forwards;
  animation-play-state: paused;
}

.pillars-section.animate .pillar-card-5 {
  animation-play-state: running;
}

.pillar-card-6 {
  opacity: 0;
  animation: fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards;
  animation-play-state: paused;
}

.pillars-section.animate .pillar-card-6 {
  animation-play-state: running;
}

/* ============================================
   Light Rays Effect
   ============================================ */

#light-rays {
  z-index: 1;
}

.light-ray {
  position: absolute;
  top: 0;
  left: var(--start-x);
  width: 120px;
  height: 100vh;
  background: linear-gradient(
    180deg,
    rgba(220, 235, 255, 0.12) 0%,
    rgba(200, 225, 250, 0.1) 20%,
    rgba(180, 210, 240, 0.08) 40%,
    rgba(160, 195, 230, 0.06) 60%,
    rgba(140, 180, 220, 0.04) 80%,
    rgba(120, 165, 210, 0) 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 20%,
    rgba(0, 0, 0, 0.6) 50%,
    rgba(0, 0, 0, 0.3) 80%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 0, 0, 0.3) 20%,
    rgba(0, 0, 0, 0.6) 50%,
    rgba(0, 0, 0, 0.3) 80%,
    transparent 100%
  );
  mix-blend-mode: screen;
  filter: blur(2px);
  animation: light-ray-drift var(--duration) cubic-bezier(0.42, 0, 0.58, 1) infinite;
  animation-delay: var(--delay);
  will-change: transform;
  transform-origin: top center;
  backface-visibility: hidden;
  perspective: 1000px;
}