.index-hero {
  --hero-bg: #e4e4e4;
  --hero-header-offset: 108px;
  --hero-stage-width: 1920px;
  --hero-stage-height: 1080px;
  --hero-copy-duration: 950ms;
  --hero-copy-opacity-duration: 700ms;
  --hero-copy-top-initial: 308px;
  --hero-copy-top-moved: 680px;
  --hero-copy-padding-inline-initial: 16px 16px;
  --hero-copy-padding-inline-moved: 42px 30px;
  --hero-copy-intro-translate-y: 28px;
  --hero-title-font-size: 72px;
  --hero-title-font-size-moved: 56px;
  --hero-rule-margin-top: 18px;
  --hero-rule-margin-top-moved: 12px;
  --hero-rule-width: 1728px;
  --hero-rule-width-moved: 1395px;
  --hero-rule-height: 10px;
  --hero-sub-margin-top: 24px;
  --hero-sub-margin-top-moved: 18px;
  --hero-sub-font-size: 54px;
  --hero-sub-font-size-moved: 40px;
  --hero-mask-duration: 800ms;
  --hero-mask-width: 1920px;
  --hero-mask-top: -180px;
  --hero-mask-aspect-width: 1920;
  --hero-mask-aspect-height: 1260;
  --hero-mask-initial-scale: 0.985;
  --hero-mask-shadow: 0 14px 20px rgba(84, 54, 49, 0.05);
  --hero-slide-fade-duration: 220ms;
  --hero-slide-drift-duration: 6700ms;
  --hero-trace-reveal-first-duration: 680ms;
  --hero-trace-reveal-second-duration: 1320ms;
  --hero-trace-reveal-second-delay: 680ms;
  --hero-trace-hide-first-duration: 520ms;
  --hero-trace-hide-second-duration: 1080ms;
  --hero-trace-hide-second-delay: 520ms;
  --hero-trace-first-visible: 0.22;
  --hero-trace-stroke-width: 330px;
  --hero-trace-static-fill-duration: 100ms;
  --hero-stage-scale: 1;
  --hero-stage-height-scaled: 1080px;
  --hero-stage-shell-height: 1080px;
  --hero-stage-offset-y: 0px;
  position: relative;
  min-height: calc(var(--hero-stage-shell-height) + var(--hero-header-offset));
  margin-top: calc(-1 * var(--hero-header-offset));
  padding-top: var(--hero-header-offset);
  overflow: clip;
  isolation: isolate;
  font-family: var(--tomato-heading-font);
  background:
    radial-gradient(circle at 78% 14%, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0) 28%),
    radial-gradient(circle at 12% 78%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 24%),
    linear-gradient(180deg, var(--hero-bg) 0%, var(--hero-bg) 100%);
}

.index-hero__viewport-shell {
  position: relative;
  width: 100%;
  height: var(--hero-stage-shell-height);
}

.index-hero__viewport {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--hero-stage-width);
  height: var(--hero-stage-height);
  transform: translate3d(-50%, var(--hero-stage-offset-y), 0) scale(var(--hero-stage-scale));
  transform-origin: top center;
}

.index-hero__stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.index-hero__mask-wrap {
  position: absolute;
  left: 50%;
  top: var(--hero-mask-top);
  width: var(--hero-mask-width);
  aspect-ratio: var(--hero-mask-aspect-width) / var(--hero-mask-aspect-height);
  transform: translateX(-50%);
}

.index-hero__content {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.index-hero__copy {
  position: absolute;
  top: var(--hero-copy-top-initial);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--hero-copy-padding-inline-initial);
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transform-origin: center center;
  text-align: center;
  transition:
    opacity var(--hero-copy-opacity-duration) ease,
    top var(--hero-copy-duration) cubic-bezier(0.22, 1, 0.36, 1),
    padding-inline var(--hero-copy-duration) cubic-bezier(0.22, 1, 0.36, 1),
    transform var(--hero-copy-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.js .index-hero.is-intro .index-hero__copy {
  opacity: 0;
  transform: translate3d(0, var(--hero-copy-intro-translate-y), 0);
}

.js .index-hero.is-copy-visible .index-hero__copy {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.index-hero.is-copy-moving .index-hero__copy {
  top: var(--hero-copy-top-moved);
  align-items: flex-end;
  padding-inline: var(--hero-copy-padding-inline-moved);
  opacity: 1;
  transform: translate3d(0, 0, 0);
  text-align: right;
}

.index-hero__title {
  margin: 0;
  width: fit-content;
  max-width: 100%;
  font-size: var(--hero-title-font-size);
  line-height: 1.52;
  letter-spacing: 0.1em;
  color: #2f2f2f;
  white-space: nowrap;
  transition:
    font-size var(--hero-copy-duration) cubic-bezier(0.22, 1, 0.36, 1),
    letter-spacing var(--hero-copy-duration) ease;
}

.index-hero.is-copy-moving .index-hero__title {
  font-size: var(--hero-title-font-size-moved);
  letter-spacing: 0.1em;
}

.index-hero__rule {
  margin: var(--hero-rule-margin-top) 0 0;
  width: var(--hero-rule-width);
  height: var(--hero-rule-height);
  background: #df6f54;
  transition:
    margin-top var(--hero-copy-duration) cubic-bezier(0.22, 1, 0.36, 1),
    width var(--hero-copy-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.index-hero.is-copy-moving .index-hero__rule {
  margin-top: var(--hero-rule-margin-top-moved);
  width: var(--hero-rule-width-moved);
}

.index-hero__sub {
  margin: var(--hero-sub-margin-top) 0 0;
  width: fit-content;
  max-width: 100%;
  font-size: var(--hero-sub-font-size);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: 0.24em;
  color: #2f2f2f;
  transition:
    margin-top var(--hero-copy-duration) cubic-bezier(0.22, 1, 0.36, 1),
    font-size var(--hero-copy-duration) cubic-bezier(0.22, 1, 0.36, 1),
    letter-spacing var(--hero-copy-duration) ease;
}

.index-hero.is-copy-moving .index-hero__sub {
  margin-top: var(--hero-sub-margin-top-moved);
  font-size: var(--hero-sub-font-size-moved);
  letter-spacing: 0.2em;
}

.index-hero__mask-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  -webkit-mask-image: var(--hero-mask-url);
  -webkit-mask-position: center top;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: var(--hero-mask-url);
  mask-position: center top;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  filter: drop-shadow(var(--hero-mask-shadow));
  transform: translate3d(0, 0, 0) scale(var(--hero-mask-initial-scale));
  transition:
    opacity var(--hero-mask-duration) ease,
    transform var(--hero-mask-duration) cubic-bezier(0.22, 1, 0.36, 1);
}

.index-hero__mask-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.index-hero__slide-overlay--gradient {
  opacity: 1;
}

.index-hero__slide-overlay--glow {
  fill: #e17055;
  opacity: 0.24;
}

.index-hero__trace-static-fill {
  transition: fill var(--hero-trace-static-fill-duration) ease;
}

.index-hero.is-trace-static .index-hero__trace-static-fill {
  fill: #ffffff;
}

.index-hero__trace {
  fill: none;
  stroke: #ffffff;
  stroke-dasharray: 0 1;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.index-hero__trace--first {
  stroke-width: var(--hero-trace-stroke-width);
}

.index-hero__trace--second {
  stroke-width: var(--hero-trace-stroke-width);
}

.index-hero__slide {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center center;
  transform: translate(var(--hero-slide-x, 0), var(--hero-slide-y, 0)) scale(var(--hero-slide-scale, 1.04));
  transition: opacity var(--hero-slide-fade-duration) ease;
  will-change: opacity, transform;
}

.index-hero__slide.is-active {
  opacity: 1;
}

.index-hero__slide-video-wrap {
  width: 100%;
  height: 100%;
}

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

.index-hero.is-mask-visible .index-hero__mask-stage {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.index-hero.is-slideshow-running .index-hero__slide.is-active {
  animation: index-hero-slide-drift var(--hero-slide-drift-duration) ease-in-out both;
}

@keyframes index-hero-slide-drift {
  from {
    transform: translate(var(--hero-slide-x, 0), var(--hero-slide-y, 0)) scale(var(--hero-slide-scale, 1.04));
  }

  to {
    transform: translate(var(--hero-slide-x, 0), var(--hero-slide-y, 0)) scale(var(--hero-slide-scale, 1.04));
  }
}