/* Homepage hero: full-bleed background video with a dark scrim for text
   legibility, and a centered single-column text layout. */

.hero-loop {
  min-height: 100vh;
  margin-top: -77px;
  padding: 120px 0 40px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-black), var(--color-charcoal-light));
  color: #fff;
}

.hero-loop .hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 900px;
}

.hero-loop .hero-lead {
  max-width: 680px;
}

.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-video-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(26, 26, 26, 0.55) 0%,
    rgba(26, 26, 26, 0.75) 60%,
    rgba(26, 26, 26, 0.9) 100%
  );
}

.hero-loop p,
.hero-loop .text-muted {
  color: var(--color-text-on-dark-muted);
}

.hero-loop h1 {
  color: #fff;
}

/* Hero title: each line is clipped by its wrapper and slides up into view
   on load, staggered slightly per line. */
.hero-title .line-reveal {
  display: block;
  overflow: hidden;
}

.hero-title .line-inner {
  display: block;
  transform: translateY(110%);
  animation: line-up 1300ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-title .line-reveal:nth-child(1) .line-inner { animation-delay: 250ms; }
.hero-title .line-reveal:nth-child(2) .line-inner { animation-delay: 480ms; }

@keyframes line-up {
  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title .line-inner {
    animation: none;
    transform: translateY(0);
  }
}

@media (max-width: 860px) {
  /* Skip loading/decoding the (large, 4K) background video on small
     viewports — falls back to the plain dark gradient above. */
  .hero-video-bg,
  .hero-video-scrim {
    display: none;
  }

  /* Sized so the two phrases wrap to exactly 3 lines total, instead of
     the awkward 4-line wrap ("Transform Ideas" / "Into" / "Scalable
     Digital" / "Products") the default clamp() produces here. */
  .hero-title {
    font-size: 2.1rem;
  }
}

@media (max-width: 340px) {
  /* Narrow phones (e.g. 320px iPhone SE) still break the 3-line wrap at
     2.1rem — drop the size further to keep "Transform Ideas Into" on
     one line. */
  .hero-title {
    font-size: 1.7rem;
  }
}