/* Homepage scroll modes — scenes rules are scoped. Legacy wrappers are display:contents. */
.homepage-mode-legacy .hp-scene {
    display: contents;
}

html.homepage-mode-scenes {
    scroll-padding-top: 56px;
}

@media (min-width: 901px) {
    html.homepage-mode-scenes {
        scroll-snap-type: y proximity;
    }
}

@media (max-width: 900px) {
    html.homepage-mode-scenes {
        scroll-snap-type: y proximity;
    }
}

.homepage-mode-scenes .Main {
    scroll-snap-align: start;
    box-sizing: border-box;
}

.homepage-mode-scenes .hp-scene {
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    padding: 28px 0 48px;
    scroll-snap-align: start;
    scroll-margin-top: 56px;
}

.homepage-mode-scenes .hp-scene-tiers,
.homepage-mode-scenes .hp-scene-welcome,
.homepage-mode-scenes .hp-scene-marks,
.homepage-mode-scenes .hp-scene-brand,
.homepage-mode-scenes .hp-scene-rules {
    justify-content: flex-start;
    min-height: 0;
    padding-top: 0;
}

@media (min-width: 901px) {
    .homepage-mode-scenes .hp-scene {
        min-height: 100svh;
        min-height: 100dvh;
    }
    .homepage-mode-scenes .hp-scene-tiers,
    .homepage-mode-scenes .hp-scene-welcome,
    .homepage-mode-scenes .hp-scene-marks,
    .homepage-mode-scenes .hp-scene-brand,
    .homepage-mode-scenes .hp-scene-rules {
        min-height: auto;
    }
}

@media (max-width: 900px) {
    .homepage-mode-scenes .hp-scene {
        min-height: 0;
        padding: 20px 0 28px;
    }
}

.homepage-mode-scenes .hp-scene-in .HDF,
.homepage-mode-scenes .hp-scene-in .HDS,
.homepage-mode-scenes .hp-scene-in .HDT,
.homepage-mode-scenes .hp-scene-in .HHT,
.homepage-mode-scenes .hp-scene-in .HHL,
.homepage-mode-scenes .hp-scene-in .tiers-container,
.homepage-mode-scenes .hp-scene-in .HDL,
.homepage-mode-scenes .hp-scene-in .hp-marks,
.homepage-mode-scenes .hp-scene-in .hp-marks-lead,
.homepage-mode-scenes .hp-scene-in .hp-brand,
.homepage-mode-scenes .hp-scene-in .hp-brand-bar,
.homepage-mode-scenes .hp-scene-in .hp-rules-intro,
.homepage-mode-scenes .hp-scene-in .hp-rules {
    animation: hp-scene-reveal 0.7s ease both;
}

@keyframes hp-scene-reveal {
    from {
        opacity: 0.35;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    html.homepage-mode-scenes {
        scroll-snap-type: none;
        scroll-behavior: auto;
    }
    .homepage-mode-scenes .hp-scene-in .HDF,
    .homepage-mode-scenes .hp-scene-in .HDS,
    .homepage-mode-scenes .hp-scene-in .HDT,
    .homepage-mode-scenes .hp-scene-in .HHT,
    .homepage-mode-scenes .hp-scene-in .HHL,
    .homepage-mode-scenes .hp-scene-in .tiers-container,
    .homepage-mode-scenes .hp-scene-in .HDL,
    .homepage-mode-scenes .hp-scene-in .hp-marks,
    .homepage-mode-scenes .hp-scene-in .hp-marks-lead,
    .homepage-mode-scenes .hp-scene-in .hp-brand,
    .homepage-mode-scenes .hp-scene-in .hp-brand-bar,
    .homepage-mode-scenes .hp-scene-in .hp-rules-intro,
    .homepage-mode-scenes .hp-scene-in .hp-rules {
        animation: none;
    }
}