@charset "utf-8";

/* Campaign tokens: change the palette once; override text/background per section. */
:root
{
    --campaign-ink: #101923;
    --campaign-teal: #4498b2;
    --campaign-light-green: #3bb049;
    --campaign-dark-green: #028d70;
    --campaign-light-blue: #007cfe;
    --campaign-dark-blue: #005ad3;
    --campaign-light-yellow: #fdbf0c;
    --campaign-dark-yellow: #fe8502;
    --campaign-light-pink: #fc1d85;
    --campaign-dark-pink: #862eb5;
    --campaign-sky: #c6effd;
    --campaign-sky-bottom: #d5f4fd;
    --bs-body-font-family: "Source Sans 3", sans-serif;
    --bs-body-color: var(--campaign-ink);
}

/* Bootstrap has no 900-weight utility; retain the requested campaign typography. */
h1, h2, .display-1, .display-3, .campaign-subtitle
{
    font-weight: 900;
}

:focus-visible
{
    outline: 3px solid currentColor;
    outline-offset: 5px;
}

.campaign-header
{
    background: var(--campaign-sky);
}

/* Header link text uses its section's starting gradient colour; Home uses
 * the subtitle colour. Keyboard focus receives the same treatment.
 */
.campaign-header .nav-link:hover,
.campaign-header .nav-link:focus-visible
{
    color: var(--section-start, var(--campaign-teal));
}

.intro-section
{
    min-height: 100vh;
    min-height: 100svh;
    background: linear-gradient(var(--campaign-sky), var(--campaign-sky-bottom));
}

.campaign-subtitle
{
    color: var(--campaign-teal);
}

/* Repeat the logo palette across digit spans; commas inherit pink without advancing the sequence. */
#domain-count > [aria-hidden] > span:nth-of-type(4n + 1)
{
    color: var(--campaign-light-blue);
}
#domain-count > [aria-hidden] > span:nth-of-type(4n + 2)
{
    color: var(--campaign-light-yellow);
}
#domain-count > [aria-hidden]
{
    color: var(--campaign-light-pink);
}
#domain-count > [aria-hidden] > span:nth-of-type(4n)
{
    color: var(--campaign-light-green);
}

.campaign-section
{
    color: var(--section-text, var(--campaign-ink));
    background: linear-gradient(var(--section-angle, 135deg), var(--section-start), var(--section-end));
}

.theme-green
{
    --section-start: var(--campaign-light-green);
    --section-end: var(--campaign-dark-green);
}

.theme-blue
{
    --section-start: var(--campaign-light-blue);
    --section-end: var(--campaign-dark-blue);
    --section-text: var(--bs-white);
    --section-angle: 155deg;
}

.theme-yellow
{
    --section-start: var(--campaign-light-yellow);
    --section-end: var(--campaign-dark-yellow);
    --section-angle: 115deg;
}

.theme-pink
{
    --section-start: var(--campaign-light-pink);
    --section-end: var(--campaign-dark-pink);
    --section-text: var(--bs-white);
    --section-angle: 145deg;
}

/* Purpose: drift SVG clouds left to right at slightly different speeds.
 * Input: Bootstrap-positioned clouds and their --cloud-duration values.
 * Output: transform-only motion, completing each pass in 130–170 seconds.
 * Edge: each loop resets beyond the clipped intro edges; the negative delay
 * starts clouds at their intended positions. Assumption: intro spans the viewport.
 */
.intro-cloud
{
    animation: cloud-drift var(--cloud-duration, 150s) linear infinite;
    animation-delay: calc(var(--cloud-duration, 150s) * -0.5);
}

/* Purpose: pulse the sun SVG. Input: its column-sized image.
 * Output: a smooth 14% scale change over six seconds in each direction.
 * Edge: layout dimensions stay unchanged; the transform hint lets browsers
 * prepare a composited layer for the filtered SVG before animation begins.
 * Assumption: the decorative layer has enough space for the small expansion.
 */
.intro-sun
{
    will-change: transform;
    animation: sun-pulse 3s ease-in-out infinite alternate;
}

@keyframes cloud-drift
{
    from
    {
        transform: translateX(-100vw);
    }
    to
    {
        transform: translateX(100vw);
    }
}
@keyframes sun-pulse
{
    from
    {
        transform: scale(1);
    }
    to
    {
        transform: scale(1.22);
    }
}