/* Explain: Colourful shared component styles and decorative accents */
.site-header {
    position: sticky;
}

.marquee-wrapper {
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
}

.marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-scroll 40s linear infinite;
}

@keyframes marquee-scroll {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

.site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--coral-color), var(--accent-color), var(--lavender-color));
}

.kg-soft-page {
    background:
        radial-gradient(circle at top left, rgba(254, 243, 199, 0.95) 0, transparent 34%),
        radial-gradient(circle at top right, rgba(204, 251, 241, 0.8) 0, transparent 30%),
        linear-gradient(180deg, var(--surface-color) 0%, var(--background-color) 100%);
}

.kg-warm-section {
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 228, 223, 0.8) 0, transparent 28%),
        radial-gradient(circle at 90% 10%, rgba(224, 242, 254, 0.75) 0, transparent 26%),
        linear-gradient(135deg, var(--surface-warm), var(--surface-color));
}

.kg-footer-gradient {
    background:
        linear-gradient(135deg, rgba(254, 243, 199, 0.9), rgba(204, 251, 241, 0.65)),
        var(--surface-color);
}

.kg-card-accent {
    position: relative;
    overflow: hidden;
}

.kg-card-accent::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color), var(--coral-color), var(--accent-color));
    z-index: 1;
}

.kg-colour-chip {
    box-shadow: 0 14px 35px rgba(202, 138, 4, 0.14);
}