.video-hero {
  contain: layout paint style;
}

.hero-title {
  font-size: clamp(3.8rem, 8.5vw, 8rem);
}

.intro-sub {
  font-size: 0.92rem;
}

.hero-big-sub {
  font-size: clamp(2.1rem, 4.7vw, 3.8rem);
}

.nav-account {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.nav-account-avatar {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0.9;
}

.video-hero video,
.video-hero .video-poster {
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: opacity 240ms ease-out;
  will-change: opacity;
}

.section-cta {
  --cta-start-bg: #f9e9d7;
  --cta-video-bg: #ffeed9;
  --cta-video-bg-soft: #fff1dc;
  --cta-video-bg-deep: #fce8cf;
  background-color: var(--cta-start-bg);
  isolation: isolate;
  transition: background-color 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    var(--cta-video-bg-soft) 0%,
    var(--cta-video-bg) 52%,
    var(--cta-video-bg-deep) 100%
  );
  opacity: 0;
  transition: opacity 1.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-cta.bridge-active {
  background-color: var(--cta-video-bg);
}

.section-cta.bridge-active::after {
  opacity: 0.5;
}

.section-cta.bridge-relocated::after,
.section-cta.bridge-finished::after {
  opacity: 1;
  transition-duration: 1.45s;
}

html.bridge-screen-active .top-nav {
  background: rgba(255, 238, 217, 0.92);
}

.section-cta .sec-content {
  z-index: 2;
}

.section-bridge-video {
  --bridge-feather: 9%;
  position: absolute;
  top: 44%;
  left: 50%;
  z-index: 1;
  display: block;
  width: min(42vh, 34vw, 420px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
  background: var(--cta-video-bg);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 var(--bridge-feather), #000 calc(100% - var(--bridge-feather)), transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 var(--bridge-feather), #000 calc(100% - var(--bridge-feather)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 var(--bridge-feather), #000 calc(100% - var(--bridge-feather)), transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 var(--bridge-feather), #000 calc(100% - var(--bridge-feather)), transparent 100%);
  mask-composite: intersect;
  transition:
    opacity 420ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 980ms cubic-bezier(0.16, 1, 0.3, 1);
  backface-visibility: hidden;
  contain: layout paint style;
  will-change: opacity, transform;
}

.section-cta.bridge-active .section-bridge-video {
  opacity: 0.98;
}

.section-cta.bridge-playing .section-bridge-video {
  opacity: 1;
}

.section-cta.bridge-relocated .section-bridge-video {
  --bridge-feather: 6%;
  transform: translate(-50%, -50%) translate3d(min(20vw, 250px), -9vh, 0) scale(0.76);
}

.hero-video-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  display: block;
  width: 1px;
  height: 1px;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: top left;
  transition: opacity 160ms ease-out;
  will-change: transform, opacity;
}

.hero-video-ghost.visible {
  opacity: 1;
  visibility: visible;
}

.hero-video-transitioning .video-hero,
.hero-video-transitioning .section-bridge-video {
  opacity: 0 !important;
}

.hero-line,
.intro-sub,
.hero-big-sub,
.hero-tagline,
.hero-desc,
.hero-visual,
.cta-sub,
.cta-line,
.cta-btn,
.cards-title,
.cards-sub,
.card,
.cards-footer,
.sec-bottom {
  backface-visibility: hidden;
  will-change: opacity, transform;
}

.scroll-container {
  overscroll-behavior-y: contain;
  scroll-behavior: auto !important;
}

.section-cta .cta-sub {
  display: none !important;
}

.section-cta:not(.bridge-title-ready) .cta-line,
.section-cta:not(.bridge-title-ready) .cta-btn {
  opacity: 0 !important;
  transform: translateY(46px) scale(0.985) !important;
}

.section-cta.bridge-title-ready .cta-line {
  transition-duration: 1.65s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.section-cta.bridge-title-ready .cta-line:first-child {
  transition-delay: 80ms !important;
}

.section-cta.bridge-title-ready .cta-line:last-child {
  transition-delay: 280ms !important;
}

.section-cta.bridge-title-ready .cta-btn {
  transition-duration: 1.1s;
  transition-delay: 780ms !important;
}

.snap-section.hero-phase-climbed.active .hello-line {
  color: #9a8b7a;
  font-size: 0.35em;
  opacity: 0.4;
  transform: translateY(0);
}

.snap-section.hero-phase-climbed.active .intro-sub {
  opacity: 0 !important;
  pointer-events: none;
  position: absolute;
  transform: translateY(-10px) !important;
}

@media (max-width: 768px) {
  .hero-title {
    font-size: clamp(2.45rem, 11.5vw, 3.9rem);
  }

  .intro-sub {
    font-size: 0.85rem;
  }

  .hero-big-sub {
    font-size: clamp(1.25rem, 5vw, 2rem);
  }

  .section-bridge-video {
    top: 36%;
    left: 50%;
    width: min(64vw, 260px);
    opacity: 0;
    transform: translate(-50%, -50%) translate3d(0, 0, 0) scale(1);
  }

  .section-cta.bridge-active .section-bridge-video {
    opacity: 0.8;
  }

  .section-cta.bridge-relocated .section-bridge-video {
    transform: translate(-50%, -50%) translate3d(18vw, -7vh, 0) scale(0.72);
  }
}