/*
 * Styles for the home page hero image: the funnel figure, the AI switch, the icons, the rail and the bug explosion.
 * Loaded on the home page only.
 */

/* Pipeline (prototype 3). Colours come from the site variables, so both modes work. */
/* The pipeline fills its grid column. Its SVG scales with the column, and the AI switch scales with it (see --u below). */
.pipeline {
    margin: 0;
    width: 100%;
    min-width: 0;
    justify-self: center;
    /* Fast clicks on the funnel must not select its text, which would highlight the image. */
    -webkit-user-select: none;
    user-select: none;
}

.pipeline__svg {
    display: block;
    width: 100%;
    height: auto;
}

.pipeline figcaption {
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-muted);
    text-align: center;
}

.pipeline__stage {
    position: relative;
    container-type: inline-size;
}

/* AI toggle, between stations 01 and 03. "AI" names the control, On and Off mark its two states, and the knob
   sits at the top when the toggle is on. Colours come from the site variables, so both modes work. */
/* --u is one unit that scales with the pipeline: 1px at the old 520px width, so the switch keeps its proportions at every size. */
.ai-switch {
    --u: 1px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0, -50%) scale(1.15);
    transform-origin: left center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: calc(10 * var(--u));
    min-width: 44px;
    min-height: 44px;
    padding: calc(4 * var(--u));
    border: 0;
    background: transparent;
    font-family: var(--font-mono);
    cursor: pointer;
}

@supports (width: 1cqi) {
    .ai-switch {
        --u: calc(100cqi / 520);
    }
}

.ai-switch:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.ai-switch__control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(6 * var(--u));
}

.ai-switch__knob-text {
    font-family: var(--font-sans);
    font-size: calc(11 * var(--u));
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-accent);
}

.ai-switch__state {
    font-size: calc(12 * var(--u));
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-muted);
    transition: color 0.3s ease;
}

.ai-switch[aria-checked="true"] .ai-switch__state--on,
.ai-switch[aria-checked="false"] .ai-switch__state--off {
    color: var(--color-accent);
}

.ai-switch__track {
    position: relative;
    display: block;
    width: calc(36 * var(--u));
    height: calc(64 * var(--u));
    border-radius: calc(18 * var(--u));
    background: color-mix(in srgb, var(--color-muted) 22%, var(--color-page));
    box-shadow: inset 0 0 0 1px var(--color-border-strong), inset 0 2px 4px rgba(0, 0, 0, 0.12);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* In dark mode the knob stays white, so the AI label is darker to keep it readable. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ai-switch__knob-text {
        color: #0b1420;
    }
}

:root[data-theme="dark"] .ai-switch__knob-text {
    color: #0b1420;
}

/* Dark mode keeps the lighter surface colour, so the darker light-mode track only applies in light mode. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .ai-switch__track {
        background: var(--color-surface);
    }
}

:root[data-theme="dark"] .ai-switch__track {
    background: var(--color-surface);
}

.ai-switch[aria-checked="true"] .ai-switch__track {
    background: var(--color-accent);
    box-shadow: inset 0 0 0 1px var(--color-accent);
}

.ai-switch__knob {
    position: absolute;
    left: calc(4 * var(--u));
    top: calc(4 * var(--u));
    width: calc(28 * var(--u));
    height: calc(28 * var(--u));
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    transform: translateY(calc(28 * var(--u)));
    transition: transform 0.3s cubic-bezier(0.3, 0, 0.2, 1);
}

.ai-switch[aria-checked="true"] .ai-switch__knob {
    transform: translateY(0);
}

.pipeline__glow {
    stroke: var(--color-accent);
    stroke-opacity: 0.2;
}

.pipeline__packet {
    fill: var(--color-accent);
}

.pipeline__packet--second {
    fill: var(--color-muted);
}

.station__num {
    font-family: var(--font-mono);
    font-size: 16px;
    fill: var(--color-text);
}

/* Station marks are inline SVG. Their colours come from these variables, so they follow the theme. */
.mark-accent {
    fill: var(--color-accent);
}

.mark-muted {
    fill: var(--color-muted);
}

.station__label {
    font-size: 25px;
    font-weight: 600;
    fill: var(--color-text);
}

.station__sub {
    font-size: 16.25px;
    fill: var(--color-muted);
}

/* Lucide icons are outline icons, drawn with a stroke in the accent colour. */
.intake__lucide {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The bug is the lead item in the funnel: a glow, and a wobble with a light pulse. */
.intake__bug {
    filter: drop-shadow(0 0 4px var(--color-accent)) drop-shadow(0 0 8px var(--color-accent));
}

@media (prefers-reduced-motion: no-preference) {
    .intake__bug {
        transform-box: fill-box;
        transform-origin: center;
        animation: intake-bug-wobble 0.9s ease-in-out infinite;
    }
}

@keyframes intake-bug-wobble {
    0%,
    100% {
        transform: rotate(-8deg) scale(1);
    }
    50% {
        transform: rotate(8deg) scale(1.15);
    }
}

/* When the AI switch is turned on, the icons swell in stroke weight once over two seconds (class added by the script). */
@media (prefers-reduced-motion: no-preference) {
    .pipeline__svg.is-pulsing .intake__lucide {
        animation: intake-pulse 2s ease-in-out;
    }
}

@keyframes intake-pulse {
    0%,
    100% {
        stroke-width: 2;
    }
    50% {
        stroke-width: 3.5;
    }
}

/* Data items that fly into station 01. Their colours follow the theme. */
.intake__stroke {
    fill: none;
    stroke: var(--color-accent);
    stroke-width: 1.6;
}

.intake__file {
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    fill: var(--color-accent);
}

@media (prefers-reduced-motion: no-preference) {
    .station .station__mark {
        animation: station-pulse 3.2s ease-in-out infinite;
    }

    .station:nth-of-type(2) .station__mark {
        animation-delay: 1s;
    }

    .station:nth-of-type(3) .station__mark {
        animation-delay: 2s;
    }
}

@keyframes station-pulse {
    0%,
    100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* Bug explosion above the funnel, when the AI switch is on */
.xp-flash {
    fill: #fff;
    transform-box: view-box;
    transform-origin: 0 0;
    animation: xp-flash 450ms ease-out forwards;
}

.xp-dot {
    fill: var(--color-accent);
    transform-box: view-box;
    transform-origin: 0 0;
    animation: xp-dot 450ms ease-out forwards;
}

@keyframes xp-flash {
    0% {
        opacity: 1;
        transform: scale(0.2);
    }
    40% {
        opacity: 1;
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(1.8);
    }
}

@keyframes xp-dot {
    0% {
        opacity: 1;
        transform: translate(0, 0);
    }
    100% {
        opacity: 0;
        transform: translate(var(--dx), var(--dy));
    }
}

/* The head and its AI chip, in the upper right of the funnel. It faces left. Decorative only. */
.pipeline__head {
    position: absolute;
    right: 0;
    top: 0;
    width: 26%;
    pointer-events: none;
}
.pipeline__head svg { display: block; width: 100%; height: auto; transform: scaleX(-1); }
/* Hidden until the AI switch is on (the script adds .is-ai-on to the figure). */
.pipeline__head { opacity: 0; transition: opacity 0.4s ease; }
.pipeline.is-ai-on .pipeline__head { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pipeline__head { transition: none; } }
.pipeline__head .chip-label { transform: scaleX(-1); transform-box: fill-box; transform-origin: center; }
.pipeline__head-skin { fill: var(--color-surface); stroke: var(--color-text); stroke-width: 2.5; stroke-linejoin: round; }
.pipeline__head .chip-body { fill: var(--color-page); stroke: var(--color-text); stroke-width: 2; }
.pipeline__head .chip-core { fill: var(--color-surface); stroke: var(--color-accent); stroke-width: 1.5; }
.pipeline__head .chip-pin { fill: none; stroke: var(--color-text); stroke-width: 2; stroke-linecap: round; }
.pipeline__head .chip-label { font: 700 9px var(--font-sans); fill: var(--color-text); }

/* The beam from the AI chip to a bug it zaps. */
.chip-beam {
    stroke: var(--color-accent);
    stroke-width: 2.5;
    stroke-linecap: round;
    pointer-events: none;
}