/* Hero / section bottom transitions — shared across Rise and Forge */

.hero--has-bottom-transition {
    position: relative;
}

.bottom-transition {
    --bt-height: 64px;
    --bt-fill: var(--surface-bg-page, #ffffff);
    --bt-opacity: 1;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: clamp(24px, 8vw, var(--bt-height));
    pointer-events: none;
    z-index: 2;
    color: var(--bt-fill);
    opacity: var(--bt-opacity);
    overflow: hidden;
}

.bottom-transition--statistics_bar {
    position: static;
    height: auto;
    opacity: 1;
    color: inherit;
    pointer-events: auto;
}

.bottom-transition--flip {
    transform: scaleX(-1);
}

.bottom-transition--invert {
    transform: scaleY(-1);
}

.bottom-transition--flip.bottom-transition--invert {
    transform: scale(-1, -1);
}

/* Overlap pulls the next homepage section up so the transition sits on top of it.
   Do not add matching padding-bottom on the hero — that cancels the pull. */
.hero.hero--bt-overlap {
    --bt-overlap-pull: clamp(24px, 8vw, var(--bt-height, 64px));
    margin-bottom: calc(-1 * var(--bt-overlap-pull));
    overflow: visible;
    z-index: 2;
    isolation: isolate;
}

.hero.hero--bt-overlap.has-video-background {
    overflow-x: hidden;
    overflow-y: visible;
}

/* Eat the next section's top padding so content tucks under the transition */
.main-content > .hero.hero--bt-overlap + section.section,
.main-content > .hero.hero--bt-overlap + section:not(.hero),
.hero.hero--bt-overlap + section.section,
.hero.hero--bt-overlap + section:not(.hero) {
    position: relative;
    z-index: 0;
    padding-top: 1.25rem;
}

.hero.hero--bt-overlap + .homepage-block,
.hero.hero--bt-overlap + .site-block,
.hero.hero--bt-overlap + .hero-stat-bar {
    position: relative;
    z-index: 0;
}

.hero.hero--bt-overlap .bottom-transition--overlap {
    /* Straddle the section boundary — shape extends into the next section */
    height: calc(var(--bt-overlap-pull) * 1.35);
    bottom: calc(var(--bt-overlap-pull) * -0.35);
    z-index: 5;
}

.bottom-transition--overlap {
    z-index: 5;
}

.bottom-transition--statistics_bar.bottom-transition--overlap {
    margin-bottom: calc(-1 * clamp(1.5rem, 4vw, 3rem));
    position: relative;
    z-index: 2;
}

.bottom-transition--statistics_bar.bottom-transition--overlap + section,
.bottom-transition--statistics_bar.bottom-transition--overlap + .homepage-block,
.bottom-transition--statistics_bar.bottom-transition--overlap + .site-block {
    position: relative;
    z-index: 0;
}

.bottom-transition__svg {
    display: block;
    width: 100%;
    height: 100%;
}

.bottom-transition__css {
    width: 100%;
    height: 100%;
}

.bottom-transition__css--slanted {
    background: var(--bt-fill);
    clip-path: polygon(0 100%, 0 0, 100% 100%, 100% 100%);
}

@supports not (clip-path: polygon(0 0)) {
    .bottom-transition__css--slanted {
        clip-path: none;
        background: linear-gradient(to bottom, transparent, var(--bt-fill));
    }
}

.bottom-transition__css--gradient-fade {
    background: linear-gradient(to bottom, transparent, var(--bt-fill));
}

.bottom-transition__css--glow-fade {
    background: radial-gradient(ellipse 120% 80% at 50% 100%, var(--bt-fill) 0%, transparent 72%);
}

.bottom-transition__css--dot-fade {
    background: var(--bt-fill);
    -webkit-mask-image: radial-gradient(circle at center, #000 1.5px, transparent 2px);
    mask-image: radial-gradient(circle at center, #000 1.5px, transparent 2px);
    -webkit-mask-size: 12px 12px;
    mask-size: 12px 12px;
    -webkit-mask-position: 0 100%;
    mask-position: 0 100%;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-composite: source-over;
    mask-composite: add;
    opacity: calc(var(--bt-opacity) * 0.85);
}

@supports not (mask-image: radial-gradient(circle, #000 1px, transparent 1px)) {
    .bottom-transition__css--dot-fade {
        -webkit-mask-image: none;
        mask-image: none;
        background: linear-gradient(to bottom, transparent, var(--bt-fill));
    }
}

.bottom-transition__css--grid-fade {
    background:
        linear-gradient(to bottom, transparent 0%, var(--bt-fill) 100%),
        repeating-linear-gradient(0deg, transparent, transparent 11px, color-mix(in srgb, var(--bt-fill) 25%, transparent) 11px, color-mix(in srgb, var(--bt-fill) 25%, transparent) 12px),
        repeating-linear-gradient(90deg, transparent, transparent 11px, color-mix(in srgb, var(--bt-fill) 25%, transparent) 11px, color-mix(in srgb, var(--bt-fill) 25%, transparent) 12px);
    background-size: 100% 100%, 12px 12px, 12px 12px;
}

@supports not (color-mix(in srgb, #000 25%, transparent)) {
    .bottom-transition__css--grid-fade {
        background: linear-gradient(to bottom, transparent, var(--bt-fill));
    }
}

.bottom-transition__css--glass-edge {
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--bt-fill) 55%, transparent));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

@supports not (backdrop-filter: blur(8px)) {
    .bottom-transition__css--glass-edge {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: linear-gradient(to bottom, transparent, var(--bt-fill));
    }
}

.bottom-transition--animate .bottom-transition__layer--back,
.bottom-transition--animate .bottom-transition__shape {
    animation: bt-wave-drift 8s ease-in-out infinite alternate;
}

.bottom-transition--animate.bottom-transition--soft_wave .bottom-transition__shape,
.bottom-transition--animate.bottom-transition--layered_waves .bottom-transition__layer--front {
    animation: bt-wave-drift 6s ease-in-out infinite alternate;
}

.bottom-transition--animate.bottom-transition--glow_fade .bottom-transition__css--glow-fade {
    animation: bt-glow-pulse 5s ease-in-out infinite;
}

@keyframes bt-wave-drift {
    0% { transform: translateX(0); }
    100% { transform: translateX(-2%); }
}

@keyframes bt-glow-pulse {
    0%, 100% { opacity: calc(var(--bt-opacity) * 0.7); }
    50% { opacity: var(--bt-opacity); }
}

@media (prefers-reduced-motion: reduce) {
    .bottom-transition--animate .bottom-transition__layer,
    .bottom-transition--animate .bottom-transition__shape,
    .bottom-transition--animate .bottom-transition__css {
        animation: none !important;
    }
}