/* ============================================
   ANIMATIONS — Scroll Reveals & Parallax
   ============================================ */

/* Base reveal */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children reveal */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 80ms; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 160ms; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 240ms; }
.reveal-stagger.visible > *:nth-child(5) { transition-delay: 320ms; }
.reveal-stagger.visible > *:nth-child(6) { transition-delay: 400ms; }

.reveal-stagger.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Parallax shelf */
.parallax-shelf {
  will-change: transform;
}

/* Device shot hover lift */
.device-shot {
  will-change: transform;
}

/* Smooth scrollbar hide for reels */
.shelf-reel,
.spotlight-screenshots {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.shelf-reel::-webkit-scrollbar,
.spotlight-screenshots::-webkit-scrollbar {
  display: none;
}

/* Focus styles for accessibility */
.device-shot:focus-visible,
.shelf-link:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 200;
  background: var(--accent);
  color: var(--accent-on-accent);
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 700;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Hero carousel & ambient stage motion */
.hero-carousel { position: relative; }

.hero-shot {
  opacity: 0;
  transform: scale(0.975);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.hero-shot.is-active {
  opacity: 1;
  transform: scale(1);
}

.hero-shot[hidden] { display: none !important; }

/* Ambient device floating motion */
@keyframes ambientFloat {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(0);
  }
}

.device-floating {
  animation: ambientFloat 6s ease-in-out infinite;
  will-change: transform;
}

/* Micro-interaction: button icon nudge */
.btn-primary:hover .btn-icon-arrow {
  transform: translateY(3px);
}

.btn-icon-arrow {
  display: inline-block;
  transition: transform 0.2s var(--ease-out);
}

/* Reel nav class aliases — JS injects .prev/.next, CSS files use BEM */
.reel-nav.prev { left: 8px; right: auto; }
.reel-nav.next { right: 8px; left: auto; }

/* Sticky mobile CTA */
.sticky-cta {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-medium);
  border-radius: 16px;
  padding: 10px 10px 10px 16px;
  box-shadow: var(--shadow-lg);
  transform: translateY(120%);
  transition: transform 0.3s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta-text { font-size: var(--text-sm); font-weight: 600; }
@media (min-width: 760px) { .sticky-cta { display: none; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .device-shot,
  .shelf-link,
  .btn-primary,
  .btn-secondary,
  .hero-shot {
    transition: none;
  }

  .device-shot:hover {
    transform: none;
  }

  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}