/* ================================
   TEXT SHADOWS
================================= */

.text-shadow-sm {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.25);
}

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.text-shadow-md {
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.35);
}

.text-shadow-lg {
  text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
}

.text-shadow-xl {
  text-shadow: 6px 6px 16px rgba(0, 0, 0, 0.45);
}

.text-shadow-2xl {
  text-shadow: 8px 8px 22px rgba(0, 0, 0, 0.5);
}

.text-shadow-3xl {
  text-shadow: 12px 12px 28px rgba(0, 0, 0, 0.55);
}

/* Glow effects */
.text-glow {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.text-glow-strong {
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.85);
}

/* ================================
   DROP SHADOWS (OUTER)
   — Works on images, divs, icons, etc.
================================= */

.drop-shadow-sm {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.drop-shadow {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}

.drop-shadow-md {
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.drop-shadow-lg {
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.35));
}

.drop-shadow-xl {
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.4));
}

.drop-shadow-2xl {
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45));
}

.drop-shadow-3xl {
  filter: drop-shadow(0 18px 32px rgba(0, 0, 0, 0.5));
}

.drop-shadow-4xl {
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55));
}

/* Softer shadow */
.drop-shadow-soft {
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.25));
}

/* Strong dark shadow */
.drop-shadow-dark {
  filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.7));
}

/* Helper for custom colors (override using style="--shadow-color: ...") */
.drop-shadow-colored {
  filter: drop-shadow(0 8px 20px var(--shadow-color, rgba(0, 0, 0, 0.35)));
}

/* ================================
   INSET SHADOWS (INNER)
   — Great for framed images, panels, cards
================================= */

.inset-shadow-sm {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.inset-shadow {
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.25);
}

.inset-shadow-md {
  box-shadow: inset 0 6px 12px rgba(0, 0, 0, 0.3);
}

.inset-shadow-lg {
  box-shadow: inset 0 8px 16px rgba(0, 0, 0, 0.35);
}

.inset-shadow-xl {
  box-shadow: inset 0 12px 24px rgba(0, 0, 0, 0.4);
}

.inset-shadow-2xl {
  box-shadow: inset 0 16px 32px rgba(0, 0, 0, 0.45);
}

.inset-shadow-3xl {
  box-shadow: inset 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Inner glow */
.inset-glow {
  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.6);
}

.inset-glow-strong {
  box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.9);
}

/* ==========================================
   HERO BACKGROUND SLIDESHOW + ANIMATION
========================================== */

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

/* Single background image */
.hero-image {
  position: absolute;
  inset: 0;
  width: 110%;
  height: 110%;
  object-fit: cover;

  /* Dim the image */
  filter: brightness(0.55); /* adjust darkness here */

  /* Smooth floating motion */
  animation: heroFloat 18s ease-in-out infinite alternate;
}

/* Keyframes for slow movement */
@keyframes heroFloat {
  0% {
    transform: translate(-3%, -3%) scale(1.05);
  }
  50% {
    transform: translate(3%, 1%) scale(1.07);
  }
  100% {
    transform: translate(-2%, 2%) scale(1.05);
  }
}

.compass {
  animation: wander 8s ease-in-out infinite;
  transform-origin: center center;
}

@keyframes wander {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(18deg);
  }
  50% {
    transform: rotate(30deg);
  }
  75% {
    transform: rotate(12deg);
  }
  100% {
    transform: rotate(0deg);
  }
}