/* Explain: Layout utilities and responsive design with animated background effects. - */
.site-shell {
    position: relative;
    isolation: isolate;
}

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

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

.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);
}

/* Animations */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up {
    transform: translateY(40px);
}
.zoom-in {
    transform: scale(0.95);
}
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translate(0) scale(1);
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Interactive Glow Backgrounds */
.bg-glow-orb {
    position: absolute;
    filter: blur(80px);
    opacity: 0.15;
    pointer-events: none;
    z-index: 0;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: morph-blob 12s ease-in-out infinite alternate, float-soft 10s ease-in-out infinite alternate;
}
@keyframes morph-blob {
    0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: rotate(0deg) scale(0.9); }
    34% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; transform: rotate(120deg) scale(1.1); }
    67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; transform: rotate(240deg) scale(0.95); }
    100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: rotate(360deg) scale(1.05); }
}
@keyframes pulse-glow {
    0% { transform: scale(0.9); opacity: 0.15; }
    100% { transform: scale(1.4); opacity: 0.35; }
}

/* Global Blobs */
@keyframes global-blob {
    0% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
    33% { transform: translate(50px, -50px) scale(1.1) rotate(10deg); }
    66% { transform: translate(-30px, 30px) scale(0.9) rotate(-10deg); }
    100% { transform: translate(0px, 0px) scale(1) rotate(0deg); }
}
.animate-global-blob {
    animation: global-blob 15s infinite alternate;
}
.animation-delay-2000 {
    animation-delay: 2s;
}
.animation-delay-4000 {
    animation-delay: 4s;
}

@keyframes float-soft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
.animate-float-soft {
    animation: float-soft 5s ease-in-out infinite;
}

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

@keyframes bg-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.animate-bg-shift {
    background-size: 200% 200%;
    animation: bg-shift 12s ease infinite;
}
.orb-primary {
    background-color: var(--primary-color);
}
.orb-dark {
    background-color: #2a2a2a;
}

@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;
    }
}