/* The existing service cards, condensed for the homepage introduction. */
.video-stack--hero {
  --hero-card-width: 280px;
  --hero-card-height: 82px;
  --hero-card-gap: 10px;
  --stack-ease: cubic-bezier(.22, 1, .36, 1);
  --soft-ease: ease;
  position: absolute;
  right: calc(var(--hero-gutter) + 100px);
  bottom: 90px;
  display: block;
  width: var(--hero-card-width);
  height: var(--hero-card-height);
  margin: 0;
  isolation: isolate;
  color: var(--color-white);
  pointer-events: auto;
}

.video-stack--hero,
.video-stack--hero * { box-sizing: border-box; }

.video-stack--hero:is(:hover, :focus-within) {
  height: calc(var(--hero-card-height) * 3 + var(--hero-card-gap) * 2);
}

.video-stack--hero .video-layer {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 0;
  transform-origin: center bottom;
  transition: transform .6s var(--stack-ease);
}

.video-stack--hero .video-layer:nth-child(1) {
  z-index: 1;
  transform: translateY(-16px) scale(.92);
}

.video-stack--hero .video-layer:nth-child(2) {
  z-index: 2;
  transform: translateY(-8px) scale(.96);
}

.video-stack--hero .video-layer:nth-child(3) {
  z-index: 3;
  transform: none;
}

/* Rear content stays hidden in the closed stack, independently of the
   backdrop layer being rebuilt when the hero leaves and re-enters view. */
.video-stack--hero .video-layer:not(:last-child) :is(.video-image, .video-copy) {
  opacity: 0;
  transition: opacity .16s ease;
}

.video-stack--hero:is(:hover, :focus-within) .video-layer:not(:last-child) :is(.video-image, .video-copy) {
  opacity: 1;
  transition-delay: .18s;
}

.video-stack--hero:is(:hover, :focus-within) .video-layer:nth-child(1) {
  transform: translateY(calc((var(--hero-card-height) + var(--hero-card-gap)) * -2));
}

.video-stack--hero:is(:hover, :focus-within) .video-layer:nth-child(2) {
  transform: translateY(calc((var(--hero-card-height) + var(--hero-card-gap)) * -1));
}

.video-stack--hero .video-card {
  width: 100%;
  height: var(--hero-card-height);
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--color-white) 30%, transparent);
  border-radius: var(--radius-hero-card);
  color: var(--color-white);
  background: var(--color-hero-card-surface);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  transition: background .25s ease;
}

.video-stack--hero .video-card:is(:hover, :focus-visible) {
  background: var(--color-hero-card-surface-hover);
}

.video-stack--hero .video-card:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.video-stack--hero .video-image {
  width: 68px;
  height: 100%;
  border-radius: var(--radius-hero-card-media);
}

.video-stack--hero .video-copy {
  min-width: 0;
  padding: 5px 3px 4px 12px;
  color: var(--color-white);
}

.video-stack--hero .video-title {
  color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  transition: color .25s ease;
}

.video-stack--hero .video-card:is(:hover, :focus-visible) .video-title {
  color: var(--color-primary);
}

.video-stack--hero .duration {
  color: var(--color-white);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .03em;
  opacity: .75;
}

/* A single-row rail keeps all services reachable without covering the headline. */
@media (max-width: 1399px), (max-height: 720px) {
  .video-stack--hero {
    --hero-card-width: 246px;
    --hero-card-height: 76px;
  }

  .video-stack--hero,
  .video-stack--hero:is(:hover, :focus-within) {
    display: flex;
    flex-flow: row;
    justify-content: flex-start;
    align-items: stretch;
    gap: 10px;
    width: var(--hero-card-width);
    height: var(--hero-card-height);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    touch-action: pan-x pan-y;
  }

  .video-stack--hero::-webkit-scrollbar { display: none; }

  .video-stack--hero .video-layer:nth-child(n),
  .video-stack--hero:is(:hover, :focus-within) .video-layer {
    position: relative;
    flex: 0 0 100%;
    transform: none;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transition: none;
  }

  .video-stack--hero .video-layer:not(:last-child) :is(.video-image, .video-copy) {
    opacity: 1;
    transition: none;
  }

  .video-stack--hero .video-image { width: 62px; }
  .video-stack--hero .video-copy { padding-left: 10px; }
  .video-stack--hero .video-title { font-size: 13px; }
  .video-stack--hero .duration { font-size: 7px; }
  .video-stack--hero .video-card:focus-visible { outline-offset: -3px; }
}

@media (max-width: 767px) {
  .video-stack--hero {
    --hero-card-width: min(246px, calc(100vw - var(--hero-gutter) * 2 - 64px));
    right: calc(var(--hero-gutter) + 64px);
    bottom: 134px;
  }
}

@media (min-width: 768px) and (max-height: 720px) {
  .video-stack--hero { bottom: 24px; }
}

@media (max-width: 767px) and (max-height: 600px) {
  .video-stack--hero {
    --hero-card-height: 68px;
    bottom: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .video-stack--hero .video-layer,
  .video-stack--hero .video-card,
  .video-stack--hero .video-layer:not(:last-child) :is(.video-image, .video-copy),
  .video-stack--hero .video-title { transition: none; }
}