/* Explain: Flowing page layout utilities and responsive offsets */
.site-shell {
    position: relative;
    isolation: isolate;
}

.section-flow {
    position: relative;
    padding: 5.5rem 1.25rem;
}

.flow-container {
    width: min(100%, 72rem);
    margin-inline: auto;
}

.side-nav-panel {
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.layered-hero {
    min-height: min(820px, 100vh);
}

.hero-image-a {
    border-radius: 44% 56% 48% 52% / 58% 42% 58% 42%;
}

.hero-image-b {
    border-radius: 58% 42% 57% 43% / 42% 56% 44% 58%;
}

.hero-image-c {
    border-radius: 62% 38% 50% 50% / 46% 54% 46% 54%;
}

.blob-card-shift-up {
    transform: translateY(-1.25rem) rotate(-1.5deg);
}

.blob-card-shift-down {
    transform: translateY(1.25rem) rotate(1.2deg);
}

@media (min-width: 768px) {
    .with-side-nav {
        padding-left: 12rem;
    }

    .section-flow {
        padding-block: 7.5rem;
    }
}

@media (max-width: 767px) {
    .layered-hero {
        min-height: auto;
    }

    .blob-card-shift-up,
    .blob-card-shift-down {
        transform: none;
    }
}

.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

.float-slow {
    animation: floatSlow 6s ease-in-out infinite;
}
.float-slower {
    animation: floatSlow 8s ease-in-out infinite reverse;
}
@keyframes floatSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}