/* ==========================================================================
   USA Children's International Film Festival — Animations & Micro-Interactions
   Awwwards-Grade Motion System & Smooth Scroll Transitions (WhyNotNow Parity)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Lenis Smooth Scroll Engine Rules
   -------------------------------------------------------------------------- */
html.lenis, html.lenis-smooth {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   2. Scroll Reveal System (IntersectionObserver driven)
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s var(--ease-premium),
              transform 0.85s var(--ease-premium);
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal Direction Variations */
[data-reveal="fade"] {
  opacity: 0;
  transform: none;
  transition: opacity 0.8s var(--ease-premium);
}

[data-reveal="fade"].is-visible {
  opacity: 1;
  transform: none;
}

[data-reveal="scale"] {
  opacity: 0;
  transform: scale(0.95) translateY(18px);
  transition: opacity 0.85s var(--ease-premium),
              transform 0.85s var(--ease-premium);
}

[data-reveal="scale"].is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
}

[data-reveal="left"] {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.9s var(--ease-premium),
              transform 0.9s var(--ease-premium);
}

[data-reveal="left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

[data-reveal="right"] {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.9s var(--ease-premium),
              transform 0.9s var(--ease-premium);
}

[data-reveal="right"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* --------------------------------------------------------------------------
   3. Horizontal Split Slide-In Cards (Scroll Driven)
   -------------------------------------------------------------------------- */
.horizontal-scroll-left,
.horizontal-scroll-right,
.horizontal-card-reveal {
  opacity: 0;
  transition: opacity 0.85s var(--ease-premium),
              transform 0.85s var(--ease-premium),
              box-shadow 0.35s var(--ease-premium),
              border-color 0.3s ease;
  will-change: transform, opacity;
}

.horizontal-scroll-left {
  transform: translateX(-35px);
}

.horizontal-scroll-right {
  transform: translateX(35px);
}

.horizontal-card-reveal {
  transform: translateY(28px);
}

.horizontal-scroll-left.is-visible,
.horizontal-scroll-right.is-visible,
.horizontal-card-reveal.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* --------------------------------------------------------------------------
   4. Staggered Cascade Entrances (85ms progressive wave)
   -------------------------------------------------------------------------- */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s var(--ease-premium),
              transform 0.85s var(--ease-premium),
              box-shadow 0.35s var(--ease-premium),
              border-color 0.3s ease;
  transition-delay: calc(var(--stagger-index, 0) * 85ms);
}

[data-stagger].is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Progressive Stagger Item Delays */
[data-stagger] > *:nth-child(1)  { --stagger-index: 1; }
[data-stagger] > *:nth-child(2)  { --stagger-index: 2; }
[data-stagger] > *:nth-child(3)  { --stagger-index: 3; }
[data-stagger] > *:nth-child(4)  { --stagger-index: 4; }
[data-stagger] > *:nth-child(5)  { --stagger-index: 5; }
[data-stagger] > *:nth-child(6)  { --stagger-index: 6; }
[data-stagger] > *:nth-child(7)  { --stagger-index: 7; }
[data-stagger] > *:nth-child(8)  { --stagger-index: 8; }
[data-stagger] > *:nth-child(9)  { --stagger-index: 9; }
[data-stagger] > *:nth-child(10) { --stagger-index: 10; }
[data-stagger] > *:nth-child(11) { --stagger-index: 11; }
[data-stagger] > *:nth-child(12) { --stagger-index: 12; }
[data-stagger] > *:nth-child(13) { --stagger-index: 13; }
[data-stagger] > *:nth-child(14) { --stagger-index: 14; }
[data-stagger] > *:nth-child(15) { --stagger-index: 15; }
[data-stagger] > *:nth-child(16) { --stagger-index: 16; }

/* --------------------------------------------------------------------------
   5. 3D Micro-Hover Lift & Soft Ambient Shadow (All Cards)
   -------------------------------------------------------------------------- */
.home-selection-card-v2,
.home-winner-card-v2,
.home-gallery-card,
.selection-film-card,
.selection-card,
.selection-card-v2,
.winner-card-item,
.winners-statuette-card,
.winner-card,
.winner-entry,
.gallery-card-item,
.gallery-card,
.gallery-item,
.category-card,
.category-row,
.category-full-row,
.journal-card-item,
.journal-featured-card,
.journal-hero-vertical-card,
.journal-card,
.journal-entry,
.journal-article-card,
.about-duo-card,
.about-timeline-item,
.about-block,
.philosophy-row-item,
.philosophy-pillar,
.belief-item,
.card-hover-lift,
.horizontal-scroll-left,
.horizontal-scroll-right {
  transition: transform 0.35s var(--ease-premium),
              box-shadow 0.35s var(--ease-premium),
              border-color 0.3s ease;
}

.home-selection-card-v2:hover,
.home-winner-card-v2:hover,
.home-gallery-card:hover,
.selection-film-card:hover,
.selection-card:hover,
.selection-card-v2:hover,
.winner-card-item:hover,
.winners-statuette-card:hover,
.winner-card:hover,
.winner-entry:hover,
.gallery-card-item:hover,
.gallery-card:hover,
.gallery-item:hover,
.category-card:hover,
.category-row:hover,
.category-full-row:hover,
.journal-card-item:hover,
.journal-featured-card:hover,
.journal-hero-vertical-card:hover,
.journal-card:hover,
.journal-entry:hover,
.journal-article-card:hover,
.about-duo-card:hover,
.about-timeline-item:hover,
.about-block:hover,
.philosophy-row-item:hover,
.philosophy-pillar:hover,
.belief-item:hover,
.card-hover-lift:hover,
.horizontal-scroll-left:hover,
.horizontal-scroll-right:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08), 0 4px 14px rgba(224, 176, 0, 0.12);
  border-color: rgba(224, 176, 0, 0.35);
}

/* --------------------------------------------------------------------------
   6. Inner Image Scale on Hover & Scroll (Smooth Editorial Zoom)
   -------------------------------------------------------------------------- */
.home-selection-poster-wrap-v2,
.home-winner-img-wrap,
.home-gallery-card,
.selection-img-wrap,
.selection-poster-wrap,
.winner-card-img-wrap,
.winner-img-wrap,
.gallery-card-img-wrap,
.gallery-img-wrap,
.journal-card-img-wrap,
.journal-featured-img-wrap,
.journal-hero-vertical-card,
.about-duo-card,
.philosophy-img-wrap,
.img-hover-zoom,
div[style*="overflow:hidden"],
div[style*="overflow: hidden"] {
  overflow: hidden;
}

.home-selection-poster-wrap-v2 img,
.home-winner-img-wrap img,
.home-gallery-card img,
.selection-film-card img,
.selection-img-wrap img,
.selection-card img,
.selection-card-v2 img,
.winner-card-item img,
.winner-card-img-wrap img,
.winner-card img,
.winner-entry img,
.gallery-card-item img,
.gallery-card-img-wrap img,
.gallery-card img,
.gallery-item img,
.journal-card-item img,
.journal-card-img-wrap img,
.journal-featured-img,
.journal-featured-img-wrap img,
.journal-hero-vertical-card img,
.journal-hero-vertical-img,
.journal-card img,
.journal-entry img,
.journal-article-card img,
.about-duo-card img,
.about-duo-img,
.about-block img,
.philosophy-img-wrap img,
.philosophy-img,
.philosophy-pillar img,
.img-hover-zoom img,
.horizontal-scroll-left img,
.horizontal-scroll-right img,
div[style*="overflow: hidden"] > img,
div[style*="overflow:hidden"] > img {
  transition: transform 0.55s var(--ease-premium), filter 0.55s var(--ease-premium);
  will-change: transform;
}

.home-selection-card-v2:hover .home-selection-poster-wrap-v2 img,
.home-winner-card-v2:hover .home-winner-img-wrap img,
.home-gallery-card:hover img,
.selection-film-card:hover .selection-img-wrap img,
.selection-film-card:hover img,
.selection-card:hover img,
.selection-card-v2:hover img,
.winner-card-item:hover .winner-card-img-wrap img,
.winner-card-item:hover img,
.winner-card:hover img,
.winner-entry:hover img,
.gallery-card-item:hover .gallery-card-img-wrap img,
.gallery-card-item:hover img,
.gallery-card:hover img,
.gallery-item:hover img,
.journal-card-item:hover .journal-card-img-wrap img,
.journal-card-item:hover img,
.journal-featured-card:hover .journal-featured-img-wrap img,
.journal-featured-card:hover img,
.journal-hero-vertical-card:hover img,
.journal-card:hover img,
.journal-entry:hover img,
.journal-article-card:hover img,
.about-duo-card:hover img,
.about-block:hover img,
.philosophy-left:hover .philosophy-img-wrap img,
.philosophy-pillar:hover img,
.img-hover-zoom:hover img,
.horizontal-scroll-left:hover img,
.horizontal-scroll-right:hover img,
div[style*="overflow: hidden"]:hover > img,
div[style*="overflow:hidden"]:hover > img {
  transform: scale(1.045);
}

/* --------------------------------------------------------------------------
   7. Smooth Image Scroll Entrance Transition
   -------------------------------------------------------------------------- */
.img-scroll-reveal {
  opacity: 0;
  transform: scale(0.96) translateY(16px);
  transition: opacity 0.75s var(--ease-premium), transform 0.75s var(--ease-premium);
}

.img-scroll-reveal.is-revealed {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* --------------------------------------------------------------------------
   8. Button / Link Slide Micro-Interactions
   -------------------------------------------------------------------------- */
.btn-hover-slide,
.btn-selections-more,
.btn-gallery-view-more,
.category-row,
.home-winner-card-v2 {
  cursor: pointer;
}

.category-row .category-badge,
.btn-selections-more svg,
.btn-gallery-view-more svg {
  transition: transform 0.25s var(--ease-premium), color 0.25s var(--ease-premium);
}

.category-row:hover .category-badge {
  transform: translateX(4px);
  color: var(--color-gold);
}

.btn-selections-more:hover svg,
.btn-gallery-view-more:hover svg {
  transform: translateX(5px);
}

/* --------------------------------------------------------------------------
   9. Page Transition Overlay (Fast and silky)
   -------------------------------------------------------------------------- */
#page-transition {
  display: none !important;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: #0a0a08;
  opacity: 0 !important;
  transition: none;
}

#page-transition.pt-entering {
  opacity: 0 !important;
  pointer-events: none;
}

#page-transition.pt-entered {
  opacity: 0 !important;
  pointer-events: none;
}

#page-transition.pt-leaving {
  opacity: 0 !important;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   10. Reduced Motion Accessibility Support
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal="scale"],
  [data-reveal="left"],
  [data-reveal="right"],
  [data-reveal="fade"],
  [data-stagger] > *,
  .horizontal-scroll-left,
  .horizontal-scroll-right,
  .horizontal-card-reveal,
  .img-scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}