/* Native replacements for the two Webflow interactions (IX2) this site used. */

/* Home hero: fade in on page load. 80px on tablet/desktop; the shared
   stylesheet's smaller phone sizes still apply below 768px. */
@media (min-width: 768px) {
  .home-hero {
    font-size: 80px;
  }
}

.home-hero {
  font-weight: 700;
  animation: hero-fade-in 500ms ease-in both;
}

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

/* Header: transparent at the top of the page, white once scrolling starts.
   header-scroll.js toggles .is-scrolled. */
.top-navbar {
  transition:
    background-color 100ms ease-in,
    border-bottom-color 100ms ease-in;
}

.top-navbar.is-scrolled {
  background-color: var(--colors--white);
  border-bottom-color: var(--colors--light-gray);
}

/* Storyboard carousel (Student work). Give it a fixed footprint (full width,
   reserved image ratio) so it doesn't depend on lazy-loaded images. Webflow
   measures the slider once at load: a collapsed slider yields one page and
   stacks every slide, and a shrink-wrapped one shifts with the breakpoint. */
.slider-storyboards {
  align-self: stretch;
  width: 100%;
}

/* From 1440px the shared stylesheet lets the content column shrink to its
   widest child, which used to be this slider's image once it loaded. Hold the
   column at its 1280px max from the start. */
@media (min-width: 1440px) {
  .slider-storyboards {
    min-width: 1280px;
  }
}

.slider-storyboards .w-slide {
  height: auto;
  aspect-ratio: 2172 / 972;
}

.slider-storyboards .w-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 8px pagination dots. */
.slider-storyboards .w-slider-dot {
  width: 8px;
  height: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .home-hero {
    animation: none;
  }

  .top-navbar {
    transition: none;
  }
}