/* Custom CSS for Pandido Casino */

/* Base Styles */
* {
  scroll-behavior: smooth;
}

body {
  font-family: "Arial", sans-serif;
  line-height: 1.6;
}

/* Northern Lights Animation */
.northern-lights {
  background: linear-gradient(
    45deg,
    rgba(0, 255, 136, 0.1) 0%,
    rgba(0, 136, 255, 0.1) 25%,
    rgba(136, 0, 255, 0.1) 50%,
    rgba(0, 255, 136, 0.1) 75%,
    rgba(0, 136, 255, 0.1) 100%
  );
  background-size: 400% 400%;
  animation: aurora 8s ease-in-out infinite;
}

@keyframes aurora {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

/* Floating Elements */
.floating-card,
.floating-chip,
.floating-dice,
.floating-star {
  animation: float 6s ease-in-out infinite;
}

.floating-chip {
  animation-delay: -2s;
}

.floating-dice {
  animation-delay: -4s;
}

.floating-star {
  animation-delay: -1s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-20px) rotate(5deg);
  }
  50% {
    transform: translateY(-10px) rotate(-5deg);
  }
  75% {
    transform: translateY(-15px) rotate(3deg);
  }
}

/* 3D Text Effect */
.text-3d-effect {
  text-shadow: 0 1px 0 #00ff88, 0 2px 0 #00cc6a, 0 3px 0 #009944, 0 4px 0 #006622, 0 5px 5px rgba(0, 0, 0, 0.5);
  transform: perspective(500px) rotateX(15deg);
}

/* Hero Title Animation */
.hero-title {
  animation: heroGlow 3s ease-in-out infinite alternate;
}

@keyframes heroGlow {
  from {
    filter: drop-shadow(0 0 20px rgba(0, 255, 136, 0.5));
  }
  to {
    filter: drop-shadow(0 0 40px rgba(0, 136, 255, 0.8));
  }
}

/* Hero Image */
.hero-image-container {
  position: relative;
  animation: imageFloat 4s ease-in-out infinite;
}

.hero-image {
  transition: transform 0.3s ease;
}

.hero-image:hover {
  transform: scale(1.05) rotate(2deg);
}

@keyframes imageFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Bonus Box */
.bonus-box {
  animation: bonusGlow 2s ease-in-out infinite alternate;
  position: relative;
  overflow: hidden;
}

.bonus-box::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.1), transparent);
  animation: spotlight 3s linear infinite;
}

@keyframes bonusGlow {
  from {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
  }
  to {
    box-shadow: 0 0 40px rgba(255, 215, 0, 0.6);
  }
}

@keyframes spotlight {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* CTA Buttons */
.cta-button-primary {
  @apply px-8 py-4 bg-gradient-to-r from-aurora-green to-aurora-blue text-white font-bold rounded-xl shadow-lg transition-all duration-300 transform hover:scale-105 hover:shadow-2xl;
  position: relative;
  overflow: hidden;
}

.cta-button-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.cta-button-primary:hover::before {
  left: 100%;
}

.cta-button-secondary {
  @apply px-8 py-4 bg-transparent border-2 border-aurora-green text-aurora-green font-bold rounded-xl transition-all duration-300 transform hover:scale-105 hover:bg-aurora-green hover:text-black;
}

.cta-button-small {
  @apply px-6 py-2 bg-gradient-to-r from-aurora-green to-aurora-blue text-white font-semibold rounded-lg transition-all duration-300 transform hover:scale-105;
}

/* Navigation */
.nav-link {
  @apply text-white hover:text-aurora-green transition-colors duration-300 relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, #00ff88, #0088ff);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Section Titles */
.section-title {
  @apply text-3xl md:text-4xl font-bold bg-gradient-to-r from-aurora-green via-aurora-blue to-aurora-purple bg-clip-text text-transparent mb-8;
  text-shadow: 0 0 30px rgba(0, 255, 136, 0.3);
}

/* Step Cards */
.step-card {
  @apply bg-gradient-to-b from-panda-black/50 to-finland-blue/30 p-6 rounded-xl border border-aurora-green/30 transition-all duration-300 transform hover:scale-105 hover:border-aurora-green/60;
}

.step-icon {
  @apply w-16 h-16 mx-auto mb-4 flex items-center justify-center bg-gradient-to-r from-aurora-green/20 to-aurora-blue/20 rounded-full;
  animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Game Cards */
.game-card {
  @apply relative overflow-hidden rounded-xl transition-all duration-300 transform hover:scale-105 cursor-pointer;
  aspect-ratio: 2 / 3;
}

.game-image {
  @apply w-full h-full object-cover;
}

.game-overlay {
  @apply absolute inset-0 bg-gradient-to-t from-black/80 to-transparent flex flex-col justify-end p-4 text-white opacity-0 transition-opacity duration-300;
}

.game-card:hover .game-overlay {
  opacity: 1;
}

/* Content Cards */
.content-card {
  @apply bg-gradient-to-b from-panda-black/50 to-finland-blue/30 p-8 rounded-xl border border-aurora-green/30 mb-8;
}

/* Provider Cards */
.provider-card {
  @apply bg-gradient-to-r from-aurora-green/20 to-aurora-blue/20 p-4 rounded-lg text-center font-semibold border border-aurora-green/30 transition-all duration-300 hover:border-aurora-green/60 hover:bg-aurora-green/10;
}

/* Promo Cards */
.promo-card {
  @apply bg-gradient-to-b from-panda-black/50 to-finland-blue/30 p-6 rounded-xl border border-aurora-green/30 text-center transition-all duration-300 transform hover:scale-105 hover:border-aurora-green/60;
}

/* Support Cards */
.support-card {
  @apply bg-gradient-to-b from-panda-black/50 to-finland-blue/30 p-6 rounded-xl border border-aurora-blue/30 transition-all duration-300 transform hover:scale-105 hover:border-aurora-blue/60;
}

/* FAQ Items */
.faq-item {
  @apply bg-gradient-to-r from-panda-black/50 to-finland-blue/30 rounded-xl border border-aurora-green/30 overflow-hidden;
}

.faq-question {
  @apply p-6 cursor-pointer flex justify-between items-center hover:bg-aurora-green/10 transition-colors duration-300;
}

.faq-answer {
  @apply px-6 pb-6 hidden;
}

.faq-item.active .faq-answer {
  display: block;
  animation: slideDown 0.3s ease-out;
}

.faq-item.active .faq-question i {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
  }
  to {
    opacity: 1;
    max-height: 200px;
  }
}

/* Parallax Effects */
.parallax-slow {
  animation: parallaxSlow 20s linear infinite;
}

.parallax-fast {
  animation: parallaxFast 15s linear infinite;
}

@keyframes parallaxSlow {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(-50px) rotate(360deg);
  }
}

@keyframes parallaxFast {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(-100px) rotate(-360deg);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
  }

  .text-3d-effect {
    transform: perspective(300px) rotateX(10deg);
  }

  .section-title {
    font-size: 2rem;
  }

  .bonus-box {
    padding: 1rem;
  }

  .cta-button-primary,
  .cta-button-secondary {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }
}

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

::-webkit-scrollbar-track {
  background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #00ff88, #0088ff);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #00cc6a, #0066cc);
}

/* Loading Animation */
.loading {
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Entrance Animations */
.fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glow Effects */
.glow-green {
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.3);
}

.glow-blue {
  box-shadow: 0 0 20px rgba(0, 136, 255, 0.3);
}

.glow-gold {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

/* Table Styling */
table {
  @apply w-full border-collapse;
}

table th {
  @apply bg-gradient-to-r from-aurora-green/20 to-aurora-blue/20;
}

table tr:hover {
  @apply bg-aurora-green/5;
}

/* Prose Styling for Content Pages */
.prose h1 {
  @apply text-aurora-green;
}

.prose h2 {
  @apply text-aurora-blue;
}

.prose h3 {
  @apply text-casino-gold;
}

.prose a {
  @apply text-aurora-green hover:text-aurora-blue transition-colors;
}

.prose blockquote {
  @apply border-l-4 border-aurora-green bg-aurora-green/10 p-4 rounded-r-lg;
}

.prose code {
  @apply bg-panda-black/50 px-2 py-1 rounded text-aurora-green;
}

/* Print Styles */
@media print {
  .floating-card,
  .floating-chip,
  .floating-dice,
  .floating-star,
  .northern-lights {
    display: none;
  }

  body {
    background: white !important;
    color: black !important;
  }
}