/* Explain: Component styles for badges, cards, and dynamic UI elements. */
.eyebrow {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.soft-orb {
    position: absolute;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cream-color) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--primary-color) 42%, transparent);
    box-shadow: inset 0 0 2rem color-mix(in srgb, var(--primary-color) 18%, transparent);
    animation: orbDrift 7s ease-in-out infinite;
}

.soft-orb:nth-child(2n) {
    animation-delay: -2s;
}

.soft-orb:nth-child(3n) {
    animation-delay: -4s;
}

.pulse-icon {
    animation: iconPulse 2.6s ease-in-out infinite;
    transform-origin: center;
}

.icon-badge {
    display: inline-flex;
    height: 3.25rem;
    width: 3.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: color-mix(in srgb, var(--secondary-color) 56%, var(--cream-color));
    color: var(--charcoal-color);
}

.ivory-panel {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
    border-radius: 2.5rem;
    background: color-mix(in srgb, var(--surface-color) 86%, transparent);
    box-shadow: var(--shadow-soft);
    backdrop-filter: blur(14px);
}

@keyframes orbDrift {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(0.8rem, -1rem, 0) scale(1.06);
    }
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.12);
    }
}