/*
 * 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. */
.pipeline {
    margin: 0;
    width: 100%;
    max-width: 520px;
    justify-self: center;
}

.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;
}

/* 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. */
.ai-switch {
    position: absolute;
    left: 28.4%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1.15);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 4px;
    border: 0;
    background: transparent;
    font-family: var(--font-mono);
    cursor: pointer;
}

.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: 6px;
}

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

.ai-switch__state {
    font-size: 12px;
    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: 36px;
    height: 64px;
    border-radius: 18px;
    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;
}

/* 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: 4px;
    top: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    transform: translateY(28px);
    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: 20px;
    font-weight: 600;
    fill: var(--color-text);
}

.station__sub {
    font-size: 13px;
    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);
    }
}

/* 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));
    }
}