.home-page .menu-button {
    animation: none;
}

.home-page.stage-intro-pending .title,
.home-page.stage-intro-playing .title {
    color: #f4fbff;
    opacity: 1;
    filter:
        drop-shadow(0 0.14rem 0.16rem rgba(0, 5, 10, 0.82))
        drop-shadow(0 0.38rem 0.72rem rgba(0, 5, 10, 0.56));
    text-shadow: none;
    transform: translate(-50%, var(--title-floor-correction));
}

.home-page.stage-intro-pending .title-character,
.home-page.stage-intro-playing .title-character,
.home-page.stage-intro-pending .reflection-title .title-character,
.home-page.stage-intro-playing .reflection-title .title-character {
    opacity: 0;
    filter: blur(0.2em);
    transform: scale(0.92);
    transform-origin: 50% 65%;
    transition: opacity 260ms ease-out, filter 260ms ease-out, transform 260ms ease-out;
    will-change: filter, opacity, transform;
}

.home-page.stage-intro-playing .title-character.is-revealed,
.home-page.stage-intro-playing .reflection-title .title-character.is-revealed,
.home-page.stage-intro-complete .title-character.is-revealed,
.home-page.stage-intro-complete .reflection-title .title-character.is-revealed {
    opacity: 1;
    filter: none;
    transform: scale(1);
}

.home-page.stage-intro-pending .reflection-title,
.home-page.stage-intro-playing .reflection-title {
    color: rgba(244, 251, 255, 0.7);
    opacity: 0.38;
    transform: translate(-50%, calc(0px - var(--title-floor-correction))) scaleY(-1);
    transition: opacity 420ms ease;
}

.home-page.stage-intro-playing.stage-title-backlit .title,
.home-page.stage-intro-complete.stage-backlight-live .title {
    color: #f4fbff;
    opacity: 1;
    filter:
        drop-shadow(0 0.14rem 0.16rem rgba(0, 5, 10, 0.82))
        drop-shadow(0 0.38rem 0.72rem rgba(0, 5, 10, 0.56));
    text-shadow: none;
}

.home-page.stage-intro-playing.stage-title-backlit .reflection-title,
.home-page.stage-intro-complete.stage-backlight-live .reflection-title {
    color: rgba(244, 251, 255, 0.7);
    opacity: 0.38;
    text-shadow: none;
}

.home-page.stage-intro-pending .title-character.is-word-initial,
.home-page.stage-intro-playing .title-character.is-word-initial,
.home-page.stage-intro-complete .title-character.is-word-initial {
    color: #ff5365;
}

.home-page.stage-intro-pending .reflection-title .title-character.is-word-initial,
.home-page.stage-intro-playing .reflection-title .title-character.is-word-initial,
.home-page.stage-intro-complete .reflection-title .title-character.is-word-initial {
    color: rgba(255, 83, 101, 0.72);
}

.home-page .title .title-character {
    color: #f4fbff;
    background-image: linear-gradient(
        to bottom,
        #ffffff 0%,
        #ffffff 52%,
        #fbfdfe 72%,
        #f2f6f8 85.5%,
        #343d42 87.5%,
        #080c0f 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.home-page .title .title-character.is-word-initial {
    color: #ff5365;
    background-image: linear-gradient(
        to bottom,
        #ff5365 0%,
        #ff5365 52%,
        #fa4b5f 72%,
        #e94356 85.5%,
        #5d0d1b 87.5%,
        #170105 100%
    );
}

.home-page.stage-intro-pending .bar {
    opacity: 0;
}

.bar-container.is-intro-rest,
.reflection-container .bar-container.is-intro-rest {
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
}

.home-page.stage-intro-pending .stage-lights,
.home-page.stage-intro-playing .stage-lights,
.home-page.stage-intro-complete.stage-backlight-live .stage-lights {
    z-index: 2;
}

.home-page.stage-intro-pending .stage-light,
.home-page.stage-intro-playing .stage-light,
.home-page.stage-intro-complete.stage-backlight-live .stage-light {
    --intro-beam-max-distance: clamp(18rem, 48svh, 32rem);
    --intro-beam-max-width: clamp(3.6rem, 9vw, 8.2rem);
    --beam-length-scale: 0.025;
    --beam-opacity: 0;
    --source-glare-opacity: 0;
    --source-glare-scale: 0.16;
    --source-glare-shift-x: 0px;
    --source-glare-shift-y: 0px;
    width: var(--intro-beam-max-width);
    height: var(--intro-beam-max-distance);
    opacity: 0;
    background: radial-gradient(
        ellipse at 50% 0.18rem,
        rgba(248, 254, 255, 0.96) 0 0.16rem,
        rgba(133, 218, 243, 0.52) 0.24rem,
        rgba(23, 112, 143, 0.18) 0.48rem,
        transparent 0.82rem
    );
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: 100% 1.25rem;
    transform: translateX(-50%) rotate(0deg);
    animation: none;
    transition: opacity 260ms ease-out;
    will-change: opacity, transform;
}

.home-page.stage-intro-pending .stage-light::before,
.home-page.stage-intro-playing .stage-light::before,
.home-page.stage-intro-complete.stage-backlight-live .stage-light::before {
    width: clamp(1.125rem, 4.25vw, 3.25rem);
    height: clamp(1.125rem, 4.25vw, 3.25rem);
    top: 0;
    z-index: 1;
    opacity: var(--source-glare-opacity);
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.98) 7%,
        rgba(250, 253, 255, 0.78) 19%,
        rgba(235, 246, 250, 0.42) 38%,
        rgba(201, 230, 240, 0.14) 58%,
        transparent 76%
    );
    box-shadow: none;
    transform:
        translate3d(-50%, -50%, 0)
        translate3d(var(--source-glare-shift-x), var(--source-glare-shift-y), 0)
        scale(var(--source-glare-scale));
    transform-origin: 50% 50%;
    transition: none;
    will-change: opacity, transform;
}

.home-page.stage-intro-pending .stage-light::after,
.home-page.stage-intro-playing .stage-light::after,
.home-page.stage-intro-complete.stage-backlight-live .stage-light::after {
    width: 100%;
    height: 100%;
    top: 0.18rem;
    left: 0;
    z-index: 0;
    opacity: var(--beam-opacity);
    background: radial-gradient(
        ellipse at 50% 1.5%,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.92) 8%,
        rgba(245, 251, 253, 0.24) 17%,
        rgba(225, 240, 246, 0.08) 36%,
        rgba(181, 219, 233, 0.022) 58%,
        transparent 82%
    );
    -webkit-clip-path: polygon(42% 0, 58% 0, 98% 100%, 2% 100%);
    clip-path: polygon(42% 0, 58% 0, 98% 100%, 2% 100%);
    transform: scale3d(var(--beam-length-scale), var(--beam-length-scale), 1);
    transform-origin: 50% 0;
    transition: none;
    will-change: opacity, transform;
}

.home-page.stage-intro-playing .stage-light.is-intro-lit {
    --source-glare-opacity: 0.94;
    --source-glare-scale: 1;
    opacity: 1;
}

.home-page.stage-intro-playing .stage-light.is-aiming,
.home-page.stage-intro-playing .stage-light.is-aimed,
.home-page.stage-intro-complete.stage-backlight-live .stage-light {
    opacity: 1;
    background: radial-gradient(
        ellipse at 50% 0.18rem,
        rgba(248, 254, 255, 0.98) 0 0.18rem,
        rgba(133, 218, 243, 0.6) 0.28rem,
        rgba(23, 112, 143, 0.2) 0.52rem,
        transparent 0.86rem
    );
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: 100% 1.25rem;
    animation: none;
}

.stage-floor-spots {
    --stage-floor-boundary-y: 100%;
    position: absolute;
    inset: 0 0 auto 0;
    height: var(--stage-floor-boundary-y);
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.stage-floor-spot {
    width: clamp(3.5rem, 16vw, 9rem);
    height: clamp(0.9rem, 2.8vw, 1.9rem);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(
        ellipse,
        rgba(255, 255, 255, 0.98) 0%,
        rgba(246, 253, 255, 0.86) 18%,
        rgba(193, 226, 238, 0.4) 48%,
        rgba(135, 202, 225, 0.12) 64%,
        transparent 80%
    );
    filter: blur(clamp(2px, 0.42vw, 5px));
    mix-blend-mode: screen;
    transform: translate3d(-200vw, -200vh, 0) scale3d(0.2, 0.2, 1);
    transform-origin: 50% 50%;
    transition: none;
    will-change: opacity, transform;
}

.home-page.stage-intro-playing .stage-floor-spot.is-floor-tracking {
    filter: blur(clamp(2px, 0.46vw, 5px));
}

.home-page.stage-intro-playing .stage-floor-spot.is-floor-settled,
.home-page.stage-intro-complete.stage-backlight-live .stage-floor-spot {
    filter: blur(clamp(3px, 0.62vw, 7px));
}

.home-page.stage-intro-pending .moving-head,
.home-page.stage-intro-pending .stage-strobe,
.home-page.stage-intro-playing .moving-head:not(.is-intro-live),
.home-page.stage-intro-playing:not(.stage-rig-live) .stage-strobe {
    opacity: 0 !important;
    animation: none;
}

.home-page.stage-intro-pending .menu-button,
.home-page.stage-intro-playing .menu-button {
    opacity: 0;
    transform: translate3d(0, 50px, 0);
    pointer-events: none;
    animation: none;
    will-change: opacity, transform;
}

.home-page.stage-intro-playing.stage-buttons-enter .menu-button {
    pointer-events: auto;
    animation: stage-menu-button-arrival 600ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.home-page.stage-intro-playing.stage-buttons-enter .menu-button:nth-child(2) {
    animation-delay: 150ms;
}

.home-page.stage-intro-playing.stage-buttons-enter .menu-button:nth-child(3) {
    animation-delay: 300ms;
}

.home-page.stage-intro-playing.stage-buttons-enter .menu-button:nth-child(4) {
    animation-delay: 450ms;
}

@keyframes stage-menu-button-arrival {
    from {
        opacity: 0;
        transform: translate3d(0, 50px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.home-page.stage-intro-pending .quote-carousel,
.home-page.stage-intro-playing .quote-carousel {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    pointer-events: none;
    animation: none;
    will-change: opacity, transform;
}

.home-page.stage-intro-playing.stage-carousel-enter .quote-carousel {
    pointer-events: auto;
    animation: stage-carousel-arrival 880ms ease-in-out both;
}

@keyframes stage-carousel-arrival {
    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.home-page.stage-intro-paused .title,
.home-page.stage-intro-paused .reflection-title,
.home-page.stage-intro-paused .moving-head,
.home-page.stage-intro-paused .stage-light,
.home-page.stage-intro-paused .stage-floor-spot,
.home-page.stage-intro-paused .stage-strobe,
.home-page.stage-intro-paused .menu-button,
.home-page.stage-intro-paused .quote-carousel {
    animation-play-state: paused !important;
}