/* Explain: Layout utilities, background effects, and animation for page sections. */
.section-pad {
    padding-top: clamp(5.5rem, 10vw, 9rem);
    padding-bottom: clamp(5.5rem, 10vw, 9rem);
}

.hero-split {
    background:
        linear-gradient(115deg, rgba(242, 233, 219, 0.5) 0%, rgba(253, 251, 247, 0.3) 40%, rgba(193, 154, 91, 0.08) 100%);
}

.orb {
    position: absolute;
    border-radius: 999px;
    filter: blur(60px);
    opacity: 0.85;
    pointer-events: none;
    z-index: -1;
}

.orb-gold {
    width: 30rem;
    height: 30rem;
    inset-inline-end: 5%;
    top: 5%;
    background: rgba(193, 154, 91, 0.12);
}

.orb-bronze {
    width: 26rem;
    height: 26rem;
    inset-inline-start: 2%;
    bottom: 5%;
    background: rgba(153, 122, 72, 0.08);
}

.contact-section {
    background:
        radial-gradient(circle at 8% 16%, rgba(193, 154, 91, 0.08), transparent 24rem),
        linear-gradient(180deg, rgba(242, 233, 219, 0.4), rgba(253, 251, 247, 0.4));
}

@keyframes sparkle-fade {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.3); }
}

.anim-sparkle {
    animation: sparkle-fade 4s infinite ease-in-out;
    transform-origin: center;
}

.anim-sparkle-1 { animation-delay: 0s; }
.anim-sparkle-2 { animation-delay: 1.2s; }
.anim-sparkle-3 { animation-delay: 2.4s; }