/* ==========================================================================
   VR Celebrations — Animations
   File: assets/css/animations.css
   Scroll-reveal classes are activated by app.js via IntersectionObserver.
   ========================================================================== */

/* --------------------------------------------------------------------
   Scroll reveal
   Usage: add .reveal (+ optional modifier) to any element.
   app.js adds .is-revealed when the element enters the viewport.
   -------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.reveal--left  { transform: translateX(-32px); }
.reveal--right { transform: translateX(32px); }
.reveal--scale { transform: scale(0.94); }

.reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* Stagger children: apply .reveal-group to the parent */
.reveal-group > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 600ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.reveal-group.is-revealed > * {
  opacity: 1;
  transform: none;
}

.reveal-group.is-revealed > :nth-child(1)  { transition-delay: 0ms; }
.reveal-group.is-revealed > :nth-child(2)  { transition-delay: 70ms; }
.reveal-group.is-revealed > :nth-child(3)  { transition-delay: 140ms; }
.reveal-group.is-revealed > :nth-child(4)  { transition-delay: 210ms; }
.reveal-group.is-revealed > :nth-child(5)  { transition-delay: 280ms; }
.reveal-group.is-revealed > :nth-child(6)  { transition-delay: 350ms; }
.reveal-group.is-revealed > :nth-child(7)  { transition-delay: 420ms; }
.reveal-group.is-revealed > :nth-child(8)  { transition-delay: 490ms; }
.reveal-group.is-revealed > :nth-child(9)  { transition-delay: 560ms; }
.reveal-group.is-revealed > :nth-child(10) { transition-delay: 630ms; }

/* --------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------- */

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

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade-in-down {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: none; }
}

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: none; }
}

@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* Hero entrance */
.anim-hero-copy {
  animation: fade-in-up 800ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.anim-hero-media {
  animation: scale-in 900ms 150ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.anim-float {
  animation: float-gentle 5s ease-in-out infinite;
}

/* --------------------------------------------------------------------
   Skeleton loading
   -------------------------------------------------------------------- */

.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  color: transparent;
}

.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

/* Lazy-loaded images fade in once loaded (app.js adds .is-loaded) */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 500ms ease;
}

img[loading="lazy"].is-loaded {
  opacity: 1;
}