@font-face {
  font-family: 'Orbix';
  src: url('../assets/fonts/Orbix-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Giphurs';
  src: url('../assets/fonts/Giphurs-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Giphurs';
  src: url('../assets/fonts/Giphurs-Bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

.font-orbix {
  font-family: 'Orbix', sans-serif;
}

.font-giphurs {
  font-family: 'Giphurs', sans-serif;
}

/* Outline text effect */
.text-outline {
  -webkit-text-stroke: 1px #475569; /* Slate-600 */
  color: transparent;
}

.text-outline-white {
    -webkit-text-stroke: 1px #a8c6a0; /* Light Greenish Grey matching design */
    color: transparent;
}

.text-outline-green {
    -webkit-text-stroke: 1px #86efac; /* Green-300 */
    color: transparent;
}

/* Background image for hero */
.hero-bg {
  /* This class is currently unused as background is set via inline style in Hero.js using ASSETS config */
  background-size: cover;
  background-position: center;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #2d4a33;
  border-radius: 4px;
  border: 1px solid #d4af37;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #3e6647;
}

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

.animate-fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

.gm-action {
  color: #7a2f00;
  font-weight: 600;
}

.gm-quote {
  color: #0b3a4a;
  font-weight: 600;
}

.music-toggle {
  position: relative;
}

.music-slash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 70%;
  background: #e5c07b;
  border-radius: 999px;
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
  box-shadow: 0 0 6px rgba(229, 192, 123, 0.6);
}

.music-toggle.music-off .music-icon {
  opacity: 0.35;
  filter: grayscale(1);
}

.music-toggle.music-off .music-slash {
  opacity: 1;
}

@keyframes regen-spin {
  to { transform: rotate(360deg); }
}

.regenerate-btn.is-rotating img {
  animation: regen-spin 1s linear infinite;
}