/* ---------------------------------------------------------------------------
   animations.css — restrained idle motion and screen transitions.

   Everything in here is opt-out: `prefers-reduced-motion: reduce` removes
   ambient movement and shortens transitions to a cross-fade.
   --------------------------------------------------------------------------- */

@keyframes wg-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -7px, 0);
  }
}

@keyframes wg-drift {
  from {
    transform: translate3d(-14%, 0, 0);
  }
  to {
    transform: translate3d(14%, 0, 0);
  }
}

@keyframes wg-fade-up {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes wg-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes wg-pop {
  0% {
    transform: scale(0.86);
  }
  62% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes wg-sheen {
  0% {
    transform: translateX(-120%) skewX(-18deg);
  }
  100% {
    transform: translateX(320%) skewX(-18deg);
  }
}

/* --- Screen entrance ----------------------------------------------------- */

.screen {
  animation: wg-fade-in 200ms var(--ease-out) both;
}

/* Only the screen header and the scrolling content animate in. The floating
   dock and bottom navigation are positioned with their own transforms, which
   a transform animation would trample. */
.screen[data-enter='forward'] > .screen-header {
  animation: wg-fade-up 340ms var(--ease-out) both;
}

/* Stagger the first few blocks of a screen so it assembles rather than snaps. */
.stagger > * {
  animation: wg-fade-up 420ms var(--ease-out) both;
}

.stagger > *:nth-child(1) {
  animation-delay: 20ms;
}
.stagger > *:nth-child(2) {
  animation-delay: 70ms;
}
.stagger > *:nth-child(3) {
  animation-delay: 120ms;
}
.stagger > *:nth-child(4) {
  animation-delay: 170ms;
}
.stagger > *:nth-child(5) {
  animation-delay: 215ms;
}
.stagger > *:nth-child(6) {
  animation-delay: 255ms;
}
.stagger > *:nth-child(n + 7) {
  animation-delay: 290ms;
}

/* --- Ambient decoration -------------------------------------------------- */

.float-slow {
  animation: wg-float 7.5s ease-in-out infinite;
}

.float-slower {
  animation: wg-float 10.5s ease-in-out infinite;
}

.pop-in {
  animation: wg-pop 420ms var(--spring-ease) both;
}

/* Clay clouds drifting behind the welcome diorama. */
.cloud {
  position: absolute;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg, #fffdf7 0%, #f3ece0 100%);
  box-shadow:
    0 10px 20px -12px rgba(58, 68, 44, 0.4),
    inset 0 2px 0 rgba(255, 255, 255, 0.9);
  opacity: 0.92;
  pointer-events: none;
}

.cloud::before,
.cloud::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: inherit;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.9);
}

.cloud::before {
  width: 58%;
  height: 150%;
  left: 8%;
  bottom: 26%;
}

.cloud::after {
  width: 42%;
  height: 118%;
  right: 9%;
  bottom: 30%;
}

.cloud--a {
  animation: wg-drift 26s ease-in-out infinite alternate;
}

.cloud--b {
  animation: wg-drift 34s ease-in-out infinite alternate-reverse;
}

/* XP bar sheen — a single slow pass, not a loop, so it stays calm. */
.progress__sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
  animation: wg-sheen 2.6s var(--ease-out) 700ms 1 both;
  pointer-events: none;
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .screen {
    animation: wg-fade-in 1ms linear both;
  }

  .float-slow,
  .float-slower,
  .cloud--a,
  .cloud--b,
  .progress__sheen {
    animation: none !important;
  }

  .progress__sheen {
    display: none;
  }
}