/*
  Scroll-driven fade-in for cards
  --------------------------------
  Edit the CSS variables below to adjust timing/easing globally.
*/

:root{
  /* Card image (.card-img-top) fade */
  --mms-card-img-fade-duration: 450ms;
  --mms-card-img-fade-ease: cubic-bezier(.8,.8,.2,1);
  --mms-card-img-fade-delay: 0ms;

  /* Card title/copy (.card-title) fade */
  --mms-card-title-fade-duration: 600ms;
  --mms-card-title-fade-ease: cubic-bezier(.8,.8,.2,1);
  --mms-card-title-fade-delay: 0ms;
}

/* Safari timing overrides (Safari tends to start video playback later). */
html.is-safari{
  --mms-card-img-fade-delay: 0ms;
  --mms-card-title-fade-delay: 0ms;
}


/* Only hide before reveal when JS is enabled. */
html.js .mms-reveal.mms-reveal--pre{opacity:0}
html.js .mms-reveal.mms-reveal--visible{opacity:1}





html.js .mms-reveal--img{
  transition: opacity var(--mms-card-img-fade-duration) var(--mms-card-img-fade-ease) var(--mms-card-img-fade-delay);
  will-change: opacity;
}

html.js .mms-reveal--title{
  transition: opacity var(--mms-card-title-fade-duration) var(--mms-card-title-fade-ease) var(--mms-card-title-fade-delay);
  will-change: opacity;
}

@media (prefers-reduced-motion: reduce){
  html.js .mms-reveal{opacity:1 !important}
  html.js .mms-reveal--img,
  html.js .mms-reveal--title{transition:none !important}
}

/* Video intro overlay (sync with image fade-in) */
.mms-intro-wrap{
  position: relative;
  display: block;
}

/* Thumbnail sits below the intro animation overlay */
.mms-intro-wrap .card-img-top{
  position: relative;
  z-index: 1;
}

.mms-card-intro-video{
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  z-index: 4;
  transform: scale(1.02);

  opacity: 0;
  visibility: hidden;
}

.mms-card-intro-video.is-playing{
  opacity: 1;
  visibility: visible;
}

/* Ensure rollover (gleam) layers remain perfectly aligned after wrapping .card-img-top */
.mms-intro-wrap{
  width: 100%;
}
.mms-intro-wrap > .card-img-top{
  position: relative; /* anchor absolute rollover layers */
  display: block;     /* match pre-wrap behavior */
}
.mms-intro-wrap > .card-img-top > img{
  display: block;     /* remove inline gaps */
}

/* ------------------------------------------------------------
   Preloader thumbnails panel (shows card images loading)
   ------------------------------------------------------------ */
#site-preloader .mms-preload-thumbs{
  position: static;
  width: min(520px, 92vw);
  margin: 22px auto 0;
  pointer-events: none;
  text-align: center;
}

#site-preloader .mms-preload-thumbs__title{
  font-size: 12px;
  letter-spacing: .08em;
  opacity: .7;
  margin-bottom: 10px;
  text-transform: uppercase;
}

#site-preloader .mms-preload-thumbs__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

#site-preloader .mms-preload-thumb{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 300ms ease, transform 300ms ease;
  filter: saturate(.95) contrast(.98);
}

#site-preloader .mms-preload-thumb.is-loaded{
  opacity: 1;
  transform: translateY(0);
}

/* Keep the preloader clean on small screens */
@media (max-width: 767px){
  /* On iPhone, show a lightweight horizontal strip instead of hiding thumbnails */
  #site-preloader .mms-preload-thumbs{
    width: min(92vw, 520px);
    margin: 18px auto 0;
  }
  #site-preloader .mms-preload-thumbs__grid{
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 120px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: start;
    padding-bottom: 6px;
  }
}