/* Explain: App-specific layout utilities for containers, padding, and backgrounds. */
.container-uboor {
    width: 100%;
    max-width: 1240px;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

.section-pad {
    padding-block: 4.5rem;
}

@media (min-width: 768px) {
    .section-pad {
        padding-block: 7rem;
    }
}

/* ---------- Colour bands ---------- */
.navy-band {
    position: relative;
    overflow: hidden;
    background-color: #0A1729;
    background-image:
        radial-gradient(1200px 620px at 12% -12%, rgba(198, 164, 106, .18), transparent 62%),
        radial-gradient(900px 520px at 92% 0%, rgba(46, 110, 190, .2), transparent 58%),
        linear-gradient(135deg, #0A1729 0%, #10233F 55%, #17304F 100%);
}

.navy-soft-band {
    background: var(--primary-soft);
}

.surface-band {
    background: var(--surface-color);
}

/* ---------- Decorative accents ---------- */
.gold-rule {
    height: 2px;
    width: 64px;
    border-radius: 9999px;
    background-image: linear-gradient(90deg, var(--secondary-color), var(--gold-soft));
}

.mesh-glow {
    position: absolute;
    border-radius: 9999px;
    filter: blur(90px);
    opacity: .5;
    pointer-events: none;
    animation: meshFloat 15s ease-in-out infinite alternate;
}

.glow-orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(70px);
    opacity: .45;
    pointer-events: none;
    animation: orbFloat 13s ease-in-out infinite alternate;
}

.grid-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
    background-size: 58px 58px;
    -webkit-mask-image: radial-gradient(ellipse at 30% 30%, #000 0%, transparent 72%);
    mask-image: radial-gradient(ellipse at 30% 30%, #000 0%, transparent 72%);
}

.hero-parallax {
    will-change: transform;
}

/* ---------- Scroll progress ---------- */
.scroll-progress {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    height: 3px;
    width: 0;
    z-index: 100;
    border-radius: 0 9999px 9999px 0;
    background-image: linear-gradient(90deg, var(--secondary-color), var(--gold-soft));
    transition: width .12s linear;
}

/* ---------- Keyframes ---------- */
@keyframes meshFloat {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(2.5rem, 1.5rem, 0) scale(1.08); }
}

@keyframes orbFloat {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-2rem, 2rem, 0) scale(1.18); }
}

@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

@keyframes shine {
    0% { transform: translateX(-160%) skewX(-20deg); }
    100% { transform: translateX(240%) skewX(-20deg); }
}

.float-y {
    animation: floatY 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .mesh-glow,
    .glow-orb,
    .float-y {
        animation: none;
    }

    .scroll-progress {
        transition: none;
    }
}

@media (min-width: 1024px) {
    .lg-sticky-panel {
        position: sticky;
        top: 7rem;
    }
}