/* -----------------------------------
   PAGE-SPECIFIC: Home
----------------------------------- */
.page-home {
  background: #000;
}

.page-home .sceneBox.center {
  align-items: center !important;
}

/* -----------------------------------
   LAYOUT: Global
----------------------------------- */
header, footer {
  color: #fff;
  z-index: 999;
}

.grid-col-1 {
  grid-column: span 2;
}

/* -----------------------------------
   TYPOGRAPHY: Hero Text
----------------------------------- */
.hero-text h1 {
  font-size: clamp(2rem, 15vw, 16rem);
  color: #fff;
  line-height: 0.8em;
  font-weight: 300;
  visibility: hidden; /* default hidden for animation */
}

.hero-text h1.visible {
  visibility: visible;
}

.hero-text h1 span {
  opacity: 0;
  display: inline-block;
  animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

/* -----------------------------------
   ANIMATION: Course Blocks
----------------------------------- */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.courseBlock {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 2s ease-out 2s forwards;
}

/* -----------------------------------
   ANIMATION: Video/Image Blur
----------------------------------- */
@keyframes unblur {
  from { filter: blur(20px); }
  to   { filter: blur(0); }
}

.videoBox img {
  filter: blur(20px);
  animation: unblur 4s ease-out forwards;
}