/* ------------------------------------------------------------------
   i-Stream brand layer
   Tokens and mark motion from the i-Stream Brand Manual, revision 1.

   Palette          #8AD83F  #4FBB3C  #1F8A3A  #125C28  ink #17181C
   On ink the ramp lifts one step to #A6E85C / #6ECF4A / #34A63F and
   the wordmark reverses to #F4F4F5 -- never pure white.
   ------------------------------------------------------------------ */

:root {
    /* chevron ramp, paper ground */
    --iw-1: #8AD83F;
    --iw-2: #4FBB3C;
    --iw-3: #1F8A3A;
    /* wordmark */
    --iw-word: #17181C;
}

.dark {
    /* ramp lifted one step so the darkest chevron stays visible on ink */
    --iw-1: #A6E85C;
    --iw-2: #6ECF4A;
    --iw-3: #34A63F;
    --iw-word: #F4F4F5;
}

/* ---- Mark ---------------------------------------------------------
   Geometry is copied verbatim from kit/logo-svg/istream-mark-colour.svg.
   Never rebuild the mark by hand -- these are the supplied coordinates. */

.iw-mark {
    display: block;
}

.iw-word {
    fill: var(--iw-word);
}

/* ---- Motion -------------------------------------------------------
   Manual section 7: chevrons fade in sequence (opacity 1 -> 0.4 -> 1,
   0.16s stagger) while a white reflex sweeps across, over a 2.6s loop.

   NOTE: the manual restricts the loop to loading states and asks headers
   to play once on load. Looping everywhere is a deliberate, owner-approved
   departure from that rule -- revisit if the manual is ever enforced.

   Implemented as CSS rather than the kit's SMIL so that the
   reduced-motion rule below can actually switch it off -- SMIL
   <animate> cannot be disabled from CSS. Values are identical. */

@keyframes iw-chevron {
    0% { opacity: 1; }
    46% { opacity: 0.4; }
    100% { opacity: 1; }
}

@keyframes iw-sheen {
    0% { transform: translateX(0); }
    60% { transform: translateX(180px); }
    100% { transform: translateX(180px); }
}

.iw-animate .iw-c1,
.iw-animate .iw-c2,
.iw-animate .iw-c3 {
    animation: iw-chevron 2.6s linear infinite both;
}

.iw-animate .iw-c2 { animation-delay: 0.16s; }
.iw-animate .iw-c3 { animation-delay: 0.32s; }

.iw-animate .iw-sheen {
    animation: iw-sheen 2.6s linear infinite both;
}

/* Explicit opt-out for any placement that should play once instead. */
.iw-once .iw-c1,
.iw-once .iw-c2,
.iw-once .iw-c3,
.iw-once .iw-sheen {
    animation-iteration-count: 1;
}

/* Manual section 7: all motion stops for users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .iw-animate .iw-c1,
    .iw-animate .iw-c2,
    .iw-animate .iw-c3,
    .iw-animate .iw-sheen {
        animation: none;
    }

    .iw-animate .iw-sheen {
        opacity: 0;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ---- Page furniture ----------------------------------------------- */

html {
    scroll-behavior: smooth;
    /* offset anchor targets so the fixed header does not cover headings */
    scroll-padding-top: 5.5rem;
}

/* Keyboard focus stays visible and on-brand in both grounds. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--iw-2);
    outline-offset: 2px;
    border-radius: 4px;
}