/* General animation for content fading in */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.5s ease-in-out forwards;
}

/* Specific styles for the FengShui Compass */
.compass-text {
    font-family: sans-serif;
    font-size: 5px;
    fill: #cbd5e1; /* slate-300 */
    text-anchor: middle;
    dominant-baseline: middle;
}

.compass-text-main {
    font-size: 6px;
    font-weight: bold;
    fill: #fde047; /* yellow-300 */
}

/* Ensure the video is contained and has a dark fallback */
.ar-video {
    background-color: #111827; /* gray-900 */
}

.animate-fade-in-down {
  animation: fadeInDown 0.4s ease-out forwards;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* I Ching Coin Animation */
@keyframes flip-y {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(1080deg); /* 3 full spins for a dynamic effect */
  }
}