/* Preloader Styles matching React implementation */

:root {
  --cream-bg: #f9f8f6;
  --black-bg: #1a1a1a;
  --track-bg: #dedac8;
  --track-fill: #555348;
  --text-color: #1a1a1a;
  --subtext-color: #555348;
}

.preloader-container {
  position: fixed;
  inset: 0;
  z-index: 9999; /* HIGHEST Z-INDEX */
  overflow: hidden;
  pointer-events: none;
  font-family: "Figtree", sans-serif; /* Fallback to sans-serif */
}

/* LAYER 1: The Black Logo Screen (Underneath) */
.black-layer {
  position: absolute;
  inset: 0;
  background-color: var(--black-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.8s ease-in-out;
  z-index: 10;
}

.black-layer.exit {
  opacity: 0;
}

.logo-reveal-container {
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 0.8s ease-out,
    transform 0.8s ease-out;
}

.logo-reveal-container.visible {
  opacity: 1;
  transform: scale(1);
}

.black-layer.exit .logo-reveal-container.visible {
  transform: scale(1.1);
}

.preloader-logo {
  width: 320px; /* 80 for md in tailwind */
  max-width: 80vw;
  height: auto;
}

/* LAYER 2: The Cream Loading Screen (On Top) */
.cream-layer {
  position: absolute;
  inset: 0;
  background-color: var(--cream-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: auto; /* Catch clicks while loading */
  z-index: 20;
  transform: translateY(0);
  transition: transform 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}

.cream-layer.reveal {
  transform: translateY(-100%);
}

.loading-content {
  width: 100%;
  max-width: 448px; /* max-w-md */
  padding: 0 32px; /* px-8 */
  position: relative;
}

/* Walking Sheep Styling */
.sheep-track-container {
  position: relative;
  margin-bottom: 32px; /* mb-8 */
}

.sheep-wrapper {
  position: absolute;
  bottom: 0;
  width: 96px; /* w-24 */
  height: 80px; /* h-20 */
  transform: translateX(-50%);
  transition: left 0.1s linear; /* Smooth movement */
}

.sheep-bobbing {
  width: 100%;
  height: 100%;
  animation: sheep-bob 0.4s ease-in-out infinite;
}

@keyframes sheep-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.sheep-svg-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.sheep-part {
  position: absolute;
}

.sheep-part svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Track Line Styling */
.track-line {
  width: 100%;
  height: 2px;
  background-color: var(--track-bg);
  margin-top: 80px; /* mt-20 */
  position: relative;
}

.progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: var(--track-fill);
  width: 0%;
  transition: width 0.1s linear;
}

/* Percentage Styling */
.percentage-container {
  text-align: center;
}

.percentage-number {
  font-family: serif; /* font-serif */
  font-size: 60px; /* text-6xl */
  color: var(--text-color);
  display: block;
}

.gathering-text {
  font-size: 12px; /* text-xs */
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.2em; /* tracking-[0.2em] */
  color: var(--subtext-color);
  margin-top: 8px; /* mt-2 */
  display: block;
}

/* Prevent scroll while preloading */
body.preloader-active {
  overflow: hidden;
}