/* Section */
.hero-home {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 90svh;
  overflow: hidden;

  /* Fade out toward bottom */
  mask-image: linear-gradient(to top, transparent, var(--secondary-ultra-light) 25%);
}

/* Foreground container */
.hero-home__container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--space-l);
  position: relative;
  z-index: 1;
}

/* Heading */
.hero-home__heading {
  color: var(--white);
  text-align: left;
  font-size: calc(1.5 * var(--h1));
  max-width: var(--width-80);
  hyphens: auto;
  hyphenate-limit-chars: auto 3;
  hyphenate-limit-lines: 4;
}

/* Play/pause toggle button */
.hero-home__btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  column-gap: var(--space-s);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.hero-home__btn:is(:hover, :focus) .hero-home__btn-icon {
  transform: scale(1.06);
}

.hero-home__btn:is(:hover, :focus) .hero-home__btn-info {
  transform: translateX(5px);
}

/* Video control icon */
.hero-home__btn-icon {
  color: var(--accent);
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

/* Button label text */
.hero-home__btn-info {
  color: var(--white);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  transition: transform 0.3s ease;
}

/* Play/pause state switching via [data-is-paused] on the button */
.toggle-video-button[data-is-paused] > .pause-video,
.toggle-video-button[data-is-playing] > .play-video {
  display: none;
}

.toggle-video-button[data-is-paused] > .play-video,
.toggle-video-button[data-is-playing] > .pause-video {
  display: flex;
}

/* Default: video is playing, show pause control */
.toggle-video-button > .pause-video {
  display: flex;
}

.toggle-video-button > .play-video {
  display: none;
}

/* Video control wrapper (icon + label row) */
.video-control-wrapper {
  align-self: center;
  display: flex;
  align-items: center;
  column-gap: var(--space-s);
}

/* Background layer: absolutely covers the section */
.hero-home__media-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
  z-index: -1;
  padding: var(--space-m);
}

/* Inner background image/video wrapper */
.hero-home .hero-background-image {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Video element fills its container */
.hero-home__bg-video {
  width: 100%;
  height: 100%;
  isolation: isolate;
  z-index: -1;

  /* Dark overlay gradient on top of video */
  background: linear-gradient(
    to bottom,
    var(--black-trans-60, rgba(0, 0, 0, 0.6)) 80%,
    var(--secondary-ultra-light) 100%
  );
}

.hero-home__bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}