.home-page {
  min-height: 680px;
  height: calc(100svh - var(--home-player-height));
}
.home-content-stack {
  position: absolute;
  left: 6.5%;
  bottom: 69px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 60%;
  z-index: 1;
}
.home-page .hero-content,
.home-page .scene-picker {
  position: static;
}
.home-scene-area {
  display: contents;
}
html:not(:lang(zh)):not(:lang(ja)):not(:lang(ko)) .home-page .hero-content {
  max-width: none;
}
@media (min-width: 1600px) {
  .home-content-stack {
    left: 9%;
  }
}
@media (max-width: 1180px) {
  .home-content-stack {
    left: 6%;
  }
}
@media (max-width: 950px) {
  .home-content-stack {
    bottom: 79px;
  }
}
.home-page .hero-note {
  margin-top: 24px;
}
.soul-point-entry {
  position: absolute;
  right: 6.5%;
  bottom: 69px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 48px;
  color: #b894ab;
  border-radius: 50%;
}
.soul-entry-stone {
  position: relative;
  display: block;
  width: 25px;
  height: 41px;
  opacity: 0.5;
  transition: opacity 0.6s ease;
}
.soul-entry-stone img {
  display: block;
  width: 100%;
  height: 100%;
}
.soul-point-entry.has-new-posts .soul-entry-stone {
  opacity: 1;
}
.soul-point-entry:focus-visible {
  outline: 1px solid rgba(184, 148, 171, 0.7);
  outline-offset: 3px;
}
.soul-gem-flow {
  position: absolute;
  left: 13%;
  top: 23%;
  width: 74%;
  height: 61%;
  overflow: hidden;
  clip-path: polygon(
    50% 0,
    75% 20%,
    92% 44%,
    100% 68%,
    94% 83%,
    75% 96%,
    50% 100%,
    25% 96%,
    6% 83%,
    0 68%,
    8% 44%,
    25% 20%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}
.soul-gem-flow::before {
  content: '';
  position: absolute;
  inset: -30% -120%;
  background: linear-gradient(
    115deg,
    transparent 36%,
    rgba(255, 233, 246, 0.12) 44%,
    rgba(255, 246, 251, 0.55) 50%,
    rgba(255, 208, 235, 0.18) 57%,
    transparent 65%
  );
  transform: translateX(-35%);
}
.soul-point-entry.has-new-posts .soul-gem-flow {
  opacity: 0.65;
}
.soul-point-entry.has-new-posts .soul-gem-flow::before {
  animation: soul-inner-flow 6s ease-in-out infinite;
}
@keyframes soul-inner-flow {
  0%,
  15% {
    transform: translateX(-35%);
  }
  75%,
  100% {
    transform: translateX(35%);
  }
}
@media (min-width: 1600px) {
  .soul-point-entry {
    right: 9%;
  }
}
@media (max-width: 700px) {
  :root {
    --home-viewport-height: 100dvh;
  }
  body.is-home {
    display: flex;
    flex-direction: column;
    min-height: var(--home-viewport-height);
  }
  body.is-home #main {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  body.is-home #player {
    flex-shrink: 0;
  }
  .home-page {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: auto;
    min-height: 0;
    padding: max(104px, calc((var(--home-viewport-height) - var(--home-player-height)) * 0.185))
      7.5% 43px;
  }
  .home-page .home-content-stack {
    position: static;
    flex-shrink: 0;
    width: 100%;
    max-width: none;
    margin-top: auto;
    gap: 24px;
  }
  .home-page .hero-content {
    position: static;
    flex-shrink: 0;
    width: 100%;
    margin-bottom: 0;
  }
  .home-page .scene-picker {
    position: static;
    flex-shrink: 0;
    width: 100%;
  }
  .home-page .scene-picker-heading span:last-child {
    display: none;
  }
  .home-scene-area {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
  }
  .home-page .soul-point-entry {
    position: static;
    flex-shrink: 0;
  }
  .home-page .home-footer {
    right: 7%;
  }
  .home-page .hero-note {
    margin-top: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .soul-point-entry.has-new-posts .soul-gem-flow::before {
    animation: none;
    transform: none;
  }
}