/* Custom CSS for QuestLog TTRPG Landing Page */

/* Base Styles */
:root {
  --void: #0a0a0f;
  --void-light: #12121a;
  --purple-primary: #7c3aed;
  --purple-bright: #a855f7;
  --purple-soft: #c084fc;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
}

/* Glass Card Effect */
.glass-card {
  background: rgba(18, 18, 26, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(124, 58, 237, 0.15);
}

.glass {
  background: rgba(18, 18, 26, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes float-slow {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

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

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(124, 58, 237, 0.6);
  }
}

/* Animation Classes */
.animate-float {
  animation: float 4s ease-in-out infinite;
}

.animate-float-slow {
  animation: float-slow 6s ease-in-out infinite;
}

.animate-scroll-left {
  animation: scroll-left 30s linear infinite;
}

.animate-fade-in-up {
  animation: fade-in-up 1s ease-out forwards;
}

.animation-delay-300 {
  animation-delay: 300ms;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--void);
}

::-webkit-scrollbar-thumb {
  background: var(--purple-primary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--purple-bright);
}

/* Selection */
::selection {
  background: rgba(124, 58, 237, 0.4);
  color: var(--text-primary);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Navbar scroll effect */
#navbar.scrolled {
  background: rgba(18, 18, 26, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 30px rgba(124, 58, 237, 0.1);
}

/* FAQ Accordion */
.faq-chevron {
  transition: transform 0.3s ease;
}

.faq-chevron.rotate-180 {
  transform: rotate(180deg);
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Focus styles */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--purple-primary);
  outline-offset: 2px;
}

/* Hero image blend effect - fades edges into background */
.hero-image-blend {
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 50%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, black 50%, transparent 100%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}