:root {
  --intro-scale: 1;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0d0f0a;
}

.intro-active [data-scene],
.intro-active .persistent-people {
  visibility: hidden !important;
}

.scroll-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: #0d0f0a url("./figma-to-html8/images/v25_98.png") center / cover no-repeat;
  opacity: 1;
  transition: opacity 0.85s ease;
}

.scroll-intro.is-leaving {
  opacity: 0;
  pointer-events: none;
}

.scroll-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1368px;
  height: 772px;
  transform: translate(-50%, -50%) scale(var(--intro-scale));
  transform-origin: center;
}

.scroll-picture {
  position: absolute;
  left: 50%;
  top: 174px;
  width: 0;
  height: 415px;
  overflow: hidden;
  transform: translateX(-50%);
  animation: scroll-open 5s cubic-bezier(.45, 0, .55, 1) 1s forwards paused;
}

.scroll-picture-art {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1201px;
  height: 415px;
  transform: translateX(-50%);
  background: url("./figma-to-html8/images/v25_99.png") center / 100% 100% no-repeat;
}

.scroll-rod {
  position: absolute;
  top: 149px;
  width: 40px;
  height: 461px;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: .86;
  will-change: left;
}

.scroll-rod-left {
  left: 649px;
  background-image: url("./figma-to-html8/images/v25_101.png");
  animation: rod-left 5s cubic-bezier(.45, 0, .55, 1) 1s forwards paused;
}

.scroll-rod-right {
  left: 682px;
  background-image: url("./figma-to-html8/images/v25_100.png");
  animation: rod-right 5s cubic-bezier(.45, 0, .55, 1) 1s forwards paused;
}

.scroll-title {
  --title-scale: 1;
  position: absolute;
  left: 444px;
  top: 312px;
  width: 486px;
  height: 152px;
  opacity: 0;
  transform-origin: center;
  animation: title-in 1.5s ease-out 5.7s forwards paused;
}

.scroll-title span,
.scroll-enter span {
  position: absolute;
  display: block;
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.scroll-title-main {
  left: 0;
  top: 0;
  width: 486px;
  height: 92px;
  background-image: url("./figma-to-html8/images/v25_110.png");
}

.scroll-title-en {
  left: 47px;
  top: 97px;
  width: 393px;
  height: 17px;
  background-image: url("./figma-to-html8/images/v25_109.png");
}

.scroll-title-sub {
  left: 134px;
  top: 121px;
  width: 219px;
  height: 31px;
  background-image: url("./figma-to-html8/images/v25_108.png");
  opacity: .7;
}

.scroll-enter {
  position: absolute;
  left: 600px;
  top: 566px;
  width: 209px;
  height: 146px;
  margin: 0;
  padding: 0;
  border: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  animation: button-in 1.1s ease-out 6.7s forwards paused;
}

.scroll-intro.is-ready .scroll-picture,
.scroll-intro.is-ready .scroll-rod,
.scroll-intro.is-ready .scroll-title,
.scroll-intro.is-ready .scroll-enter {
  animation-play-state: running;
}

.scroll-enter-glow {
  inset: 0;
  width: 209px;
  height: 146px;
  background-image: url("./figma-to-html9/images/v25_121.png");
  opacity: 0;
  transition: opacity .4s ease;
}

.scroll-enter-frame {
  left: 20px;
  top: 44px;
  width: 168px;
  height: 64px;
  background-image: url("./figma-to-html8/images/v25_104.png");
  opacity: .62;
  transition: opacity .3s ease, filter .3s ease;
}

.scroll-enter-text {
  left: 46px;
  top: 61px;
  width: 117px;
  height: 27px;
  background-image: url("./figma-to-html8/images/v25_106.png");
}

.scroll-enter:hover .scroll-enter-glow,
.scroll-enter:focus-visible .scroll-enter-glow {
  opacity: 1;
}

.scroll-enter:hover .scroll-enter-frame,
.scroll-enter:focus-visible .scroll-enter-frame {
  opacity: 1;
  filter: brightness(1.15);
}

.scroll-enter:focus-visible {
  outline: 1px solid rgba(230, 199, 126, .8);
  outline-offset: -30px;
}

@keyframes scroll-open {
  from { width: 0; }
  to { width: 1201px; }
}

@keyframes rod-left {
  from { left: 649px; }
  to { left: 81px; }
}

@keyframes rod-right {
  from { left: 682px; }
  to { left: 1242px; }
}

@keyframes title-in {
  from { opacity: 0; transform: translateY(8px) scale(var(--title-scale)); }
  to { opacity: 1; transform: translateY(0) scale(var(--title-scale)); }
}

@keyframes button-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  .scroll-title {
    --title-scale: .68;
  }
}