/* Asian Dragon Background Elements */

/* Large Dragon Silhouette */
.dragon-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.05;
}

.dragon-background::before {
  content: '';
  position: absolute;
  top: 10%;
  left: -10%;
  width: 120%;
  height: 80%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cpath d='M100 400 Q200 200 400 350 Q600 500 800 250 Q1000 400 1200 300' fill='none' stroke='rgba(255,215,0,0.1)' stroke-width='8'/%3E%3Cpath d='M150 420 Q250 220 450 370 Q650 520 850 270 Q1050 420 1200 320' fill='none' stroke='rgba(220,20,60,0.08)' stroke-width='6'/%3E%3Cg transform='translate(200,350)'%3E%3Ccircle r='20' fill='rgba(255,215,0,0.15)'/%3E%3Cpath d='M-15 -10 L15 -10 L20 0 L15 10 L-15 10 L-20 0 Z' fill='rgba(220,20,60,0.1)'/%3E%3C/g%3E%3Cg transform='translate(450,370)'%3E%3Ccircle r='18' fill='rgba(255,215,0,0.12)'/%3E%3Cpath d='M-12 -8 L12 -8 L16 0 L12 8 L-12 8 L-16 0 Z' fill='rgba(220,20,60,0.08)'/%3E%3C/g%3E%3Cg transform='translate(850,270)'%3E%3Ccircle r='22' fill='rgba(255,215,0,0.18)'/%3E%3Cpath d='M-18 -12 L18 -12 L22 0 L18 12 L-18 12 L-22 0 Z' fill='rgba(220,20,60,0.12)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  animation: dragonSlither 30s ease-in-out infinite;
}

.dragon-background::after {
  content: '';
  position: absolute;
  bottom: 10%;
  right: -10%;
  width: 120%;
  height: 80%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800'%3E%3Cpath d='M1200 400 Q1100 600 900 450 Q700 300 500 550 Q300 400 100 500' fill='none' stroke='rgba(255,215,0,0.08)' stroke-width='6'/%3E%3Cpath d='M1150 420 Q1050 620 850 470 Q650 320 450 570 Q250 420 50 520' fill='none' stroke='rgba(220,20,60,0.06)' stroke-width='4'/%3E%3Cg transform='translate(900,450)'%3E%3Ccircle r='16' fill='rgba(255,215,0,0.1)'/%3E%3Cpath d='M-12 -8 L12 -8 L16 0 L12 8 L-12 8 L-16 0 Z' fill='rgba(220,20,60,0.06)'/%3E%3C/g%3E%3Cg transform='translate(500,550)'%3E%3Ccircle r='14' fill='rgba(255,215,0,0.08)'/%3E%3Cpath d='M-10 -6 L10 -6 L14 0 L10 6 L-10 6 L-14 0 Z' fill='rgba(220,20,60,0.04)'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  animation: dragonSlither 25s ease-in-out infinite reverse;
  transform: scaleX(-1);
}

@keyframes dragonSlither {
  0%, 100% {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 0.05;
  }
  25% {
    transform: translateX(2%) translateY(-1%) scale(1.02);
    opacity: 0.08;
  }
  50% {
    transform: translateX(-1%) translateY(1%) scale(0.98);
    opacity: 0.06;
  }
  75% {
    transform: translateX(1%) translateY(-0.5%) scale(1.01);
    opacity: 0.07;
  }
}

/* Dragon Scale Patterns */
.dragon-scales {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    radial-gradient(ellipse 8px 6px at 20px 20px, rgba(255,215,0,0.03), transparent),
    radial-gradient(ellipse 6px 4px at 40px 40px, rgba(220,20,60,0.02), transparent),
    radial-gradient(ellipse 10px 8px at 80px 30px, rgba(255,215,0,0.04), transparent),
    radial-gradient(ellipse 7px 5px at 100px 60px, rgba(220,20,60,0.025), transparent);
  background-size: 120px 80px;
  background-repeat: repeat;
  pointer-events: none;
  z-index: -3;
  animation: scaleShimmer 15s ease-in-out infinite;
}

@keyframes scaleShimmer {
  0%, 100% {
    opacity: 0.3;
    transform: translateX(0);
  }
  50% {
    opacity: 0.6;
    transform: translateX(10px);
  }
}

/* Dragon Eyes that follow the wheel */
.dragon-eyes {
  position: fixed;
  top: 20%;
  left: 5%;
  width: 60px;
  height: 30px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

.dragon-eyes::before,
.dragon-eyes::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,215,0,0.8), rgba(220,20,60,0.4));
  box-shadow:
    0 0 15px rgba(255,215,0,0.5),
    inset 0 0 8px rgba(0,0,0,0.3);
  animation: dragonBlink 8s ease-in-out infinite;
}

.dragon-eyes::before {
  left: 0;
}

.dragon-eyes::after {
  right: 0;
  animation-delay: 0.5s;
}

.dragon-eyes-right {
  position: fixed;
  top: 60%;
  right: 5%;
  width: 60px;
  height: 30px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
}

.dragon-eyes-right::before,
.dragon-eyes-right::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 70% 30%, rgba(255,215,0,0.6), rgba(220,20,60,0.3));
  box-shadow:
    0 0 12px rgba(255,215,0,0.3),
    inset 0 0 6px rgba(0,0,0,0.2);
  animation: dragonBlink 10s ease-in-out infinite;
}

.dragon-eyes-right::before {
  left: 0;
  animation-delay: 2s;
}

.dragon-eyes-right::after {
  right: 0;
  animation-delay: 2.5s;
}

@keyframes dragonBlink {
  0%, 90%, 100% {
    transform: scaleY(1);
    opacity: 0.6;
  }
  95% {
    transform: scaleY(0.1);
    opacity: 0.8;
  }
}

/* Chinese Dragon Smoke/Breath Effect */
.dragon-breath {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse 200px 100px at 15% 30%, rgba(255,215,0,0.02), transparent),
    radial-gradient(ellipse 150px 80px at 85% 70%, rgba(220,20,60,0.015), transparent),
    radial-gradient(ellipse 180px 90px at 25% 80%, rgba(255,215,0,0.018), transparent),
    radial-gradient(ellipse 120px 60px at 75% 25%, rgba(220,20,60,0.012), transparent);
  pointer-events: none;
  z-index: -2;
  animation: breathFlow 20s ease-in-out infinite;
}

@keyframes breathFlow {
  0%, 100% {
    transform: rotate(0deg) scale(1);
    opacity: 0.3;
  }
  25% {
    transform: rotate(1deg) scale(1.1);
    opacity: 0.5;
  }
  50% {
    transform: rotate(-0.5deg) scale(0.9);
    opacity: 0.4;
  }
  75% {
    transform: rotate(0.5deg) scale(1.05);
    opacity: 0.45;
  }
}