/* =========================================================
   CINEMA PAGE LAYERS
========================================================= */

.cinema-page .site-header {
  position: fixed;

  z-index:
    9999;
}

.cinema-page .site-footer {
  position: relative;

  z-index:
    100;
}


/* =========================================================
   HERO
========================================================= */

#hero-home {
  position: relative;

  top: 0;

  height: 100vh;

  z-index:
    1;
}


/* =========================================================
   CINEMATIC SECTION
========================================================= */

.cinematic-section {
  position: relative;

  margin-top:
    -100vh;

  height:
    200vh;

  z-index:
    2;
}


/* =========================================================
   STICKY LAYER
========================================================= */

.cinematic-sticky {
  position:
    sticky;

  top:
    0;

  height:
    100vh;

}


/* =========================================================
   GLASS OVERLAY
========================================================= */

.cinematic-bg {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(245,245,247,0);

  backdrop-filter:
    blur(0px);

  -webkit-backdrop-filter:
    blur(0px);

  animation:
    cinematicBlur linear forwards;

  animation-timeline:
    view();

  animation-range:
    100vh 180vh;
}


/* =========================================================
   TRACK
========================================================= */

.cinematic-track {
  position:
    relative;

  width:
    100%;

  height:
    100%;
}


/* =========================================================
   BLOCK
========================================================= */

.cinematic-block {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0 48px;

  opacity: 0;

  transform:
    translateY(120px)
    scale(0.96);

  animation:
    cinematicBlock linear forwards;

  animation-timeline:
    scroll();

  animation-range:
    100vh 180vh;
}


/* =========================================================
   TEXT LAYOUT
========================================================= */

.cinematic-text--long {
  max-width:
    24ch;

  text-align:
    center;

  text-wrap:
    balance;
}


/* =========================================================
   TEXT ANIMATION
========================================================= */

@keyframes cinematicBlock {

  0% {
    opacity:
      0;

    transform:
      translateY(120px)
      scale(0.96);
  }

  15% {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }

  85% {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }

  100% {
    opacity:
      0;

    transform:
      translateY(-120px)
      scale(1.04);
  }

}


/* =========================================================
   BLUR ANIMATION
========================================================= */

@keyframes cinematicBlur {

  to {

    background:
      rgba(245,245,247,0.82);

    backdrop-filter:
      blur(120px);

    -webkit-backdrop-filter:
      blur(120px);

  }

}

/* =========================================================
   CONTENT LAYERS
========================================================= */

.platform-showcase,
.why-assets {
  position: relative;

  z-index:
    40;

  background:
    var(--light);
}