/* Brand colors */
:root>* {
    --md-primary-fg-color: #009CA6;
    --md-accent-fg-color: #fc4c02;
}

/* Body background with subtle animated gradient - Dark mode */
body[data-md-color-scheme="slate"] {
    background-image: linear-gradient(135deg,
            hsl(184, 60%, 18%) 0%,
            hsl(220, 25%, 15%) 40%,
            hsl(15, 50%, 12%) 100%);
    background-size: 300% 300%;
    background-attachment: fixed;
    animation: balancedGradientShift 18s ease infinite;
}

/* Body background with subtle animated gradient - Light mode */
body[data-md-color-scheme="default"] {
    background-image: linear-gradient(135deg,
            hsl(184, 65%, 85%) 0%,
            hsl(220, 30%, 90%) 40%,
            hsl(15, 50%, 82%) 100%);
    background-size: 300% 300%;
    background-attachment: fixed;
    animation: balancedGradientShift 18s ease infinite;
}

@keyframes balancedGradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* Glass-like header */
[data-md-color-scheme="slate"] .md-header {
    background-color: hsla(0, 0%, 0%, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

[data-md-color-scheme="default"] .md-header {
    background-color: hsla(0, 0%, 100%, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Glass-like footer */
.md-footer-meta {
    background-color: transparent;
}

[data-md-color-scheme="slate"] .md-footer {
    background-color: hsla(0, 0%, 0%, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

[data-md-color-scheme="default"] .md-footer {
    background-color: hsla(0, 0%, 100%, 0.3);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

/* Indent nested navigation sub-items under their parent section */
@media screen and (min-width: 76.25em) {
    .md-sidebar--primary .md-nav__item--nested>.md-nav {
        padding-left: 0.6rem;
    }
}

/* Transparent tables */
.md-typeset table:not([class]) {
    background-color: transparent;
}

.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
    background-color: transparent;
}

.md-typeset table:not([class]) tr:hover {
    background-color: hsla(0, 0%, 50%, 0.1);
}

/* 404 page: centered icon and text */
.md-content__404 {
    text-align: center;
}

.md-content__404-icon {
    width: 8rem;
    margin: 0 auto 1rem;
}

.md-content__404-icon svg {
    width: 100%;
    height: 100%;
    fill: var(--md-primary-fg-color);
}

.md-content__404 h1 {
    font-size: 2.6rem;
}

.md-content__404 p {
    max-width: 28rem;
    margin: 0 auto;
}

/* ---------------------------------------------------------------------------
   404 heading glitch

   The heading must sit still most of the time and come apart only in short
   bursts. Two things create that: the displaced keyframes are placed a
   fraction of a percent apart, so each change reads as an instant cut rather
   than a slide, and the bursts are clustered into a small part of a long
   cycle, leaving the rest of the cycle at rest. The three layers run on
   durations that share no small common multiple, so the bursts they produce
   drift against each other instead of repeating on a fixed beat.
   --------------------------------------------------------------------------- */
h1.md-text-glitch {
    position: relative;
    animation: md-text-glitch-shake 13s steps(1, end) infinite;
}

h1.md-text-glitch::before,
h1.md-text-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
}

h1.md-text-glitch::before {
    color: var(--md-accent-fg-color);
    animation: md-text-glitch-a 11s steps(1, end) infinite;
}

h1.md-text-glitch::after {
    color: var(--md-primary-fg-color);
    animation: md-text-glitch-b 17s steps(1, end) infinite;
}

/* Body shake: two clipped jumps inside one short burst, then quiet. */
@keyframes md-text-glitch-shake {

    0%,
    38.9%,
    39.5%,
    40.3%,
    41.1%,
    73.9%,
    74.6%,
    100% {
        transform: translate(0);
        clip-path: none;
    }

    39%,
    39.4% {
        transform: translate(-4px, 1px);
        clip-path: inset(22% 0 46% 0);
    }

    40.4%,
    41% {
        transform: translate(3px, -2px);
        clip-path: inset(58% 0 14% 0);
    }

    74%,
    74.5% {
        transform: translate(-2px, 1px);
        clip-path: inset(8% 0 68% 0);
    }
}

/* Warm color-split slices. Each burst shows a different horizontal band. */
@keyframes md-text-glitch-a {

    0%,
    31.9%,
    32.6%,
    33.4%,
    34.2%,
    81.9%,
    82.7%,
    100% {
        opacity: 0;
        transform: translate(0);
        clip-path: inset(0 0 100% 0);
    }

    32%,
    32.5% {
        opacity: 0.85;
        transform: translate(-6px, -1px);
        clip-path: inset(14% 0 58% 0);
    }

    33.5%,
    34.1% {
        opacity: 0.85;
        transform: translate(5px, 2px);
        clip-path: inset(62% 0 12% 0);
    }

    82%,
    82.6% {
        opacity: 0.8;
        transform: translate(-4px, 0);
        clip-path: inset(38% 0 34% 0);
    }
}

/* Cool color-split slices, offset from the warm ones. */
@keyframes md-text-glitch-b {

    0%,
    26.9%,
    27.7%,
    64.9%,
    65.6%,
    66.4%,
    67.2%,
    100% {
        opacity: 0;
        transform: translate(0);
        clip-path: inset(0 0 100% 0);
    }

    27%,
    27.6% {
        opacity: 0.85;
        transform: translate(6px, 1px);
        clip-path: inset(30% 0 40% 0);
    }

    65%,
    65.5% {
        opacity: 0.85;
        transform: translate(-5px, -2px);
        clip-path: inset(52% 0 20% 0);
    }

    66.5%,
    67.1% {
        opacity: 0.8;
        transform: translate(4px, 1px);
        clip-path: inset(6% 0 74% 0);
    }
}

/* ---------------------------------------------------------------------------
   404 logo glitch

   The mark is sliced into horizontal strips, each one a full copy of the SVG
   clipped to its own band and stacked on the others, so at rest the stack is
   indistinguishable from the intact logo. Strips are displaced horizontally
   and hue-rotated in single-frame jumps, with a faint chromatic aberration
   drop-shadow to suggest color separation on a failing screen. Each strip
   carries its own displacement, hue, animation and negative delay, which is
   what keeps the slicing from resolving into a visible pattern.
   --------------------------------------------------------------------------- */
.md-content__404-icon.md-logo-glitch {
    position: relative;
    aspect-ratio: 1;
}

.md-logo-glitch__strip {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(var(--strip-top) 0 calc(100% - var(--strip-top) - var(--strip-height)) 0);
    animation-iteration-count: infinite;
    animation-timing-function: steps(1, end);
    will-change: transform, filter;
}

.md-logo-glitch__strip svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: var(--md-primary-fg-color);
}

/* Seven variants differing only in when their two jumps land, so strips
   sharing a variant still separate through their delay and custom values. */
@keyframes md-logo-glitch-1 {

    0%,
    33.3%,
    34.3%,
    66.6%,
    67.6%,
    100% {
        transform: translateX(0);
        filter: hue-rotate(0);
    }

    33.4%,
    34.2% {
        transform: translateX(var(--glitch-x-1));
        filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(2px 0 rgb(0 0 255 / 0.35));
    }

    66.7%,
    67.5% {
        transform: translateX(var(--glitch-x-2));
        filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-2px 0 rgb(255 0 0 / 0.35));
    }
}

@keyframes md-logo-glitch-2 {

    0%,
    17.4%,
    18.4%,
    58.2%,
    59.2%,
    100% {
        transform: translateX(0);
        filter: hue-rotate(0);
    }

    17.5%,
    18.3% {
        transform: translateX(var(--glitch-x-1));
        filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(-3px 1px rgb(255 0 0 / 0.3));
    }

    58.3%,
    59.1% {
        transform: translateX(var(--glitch-x-2));
        filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(2px 0 rgb(0 0 255 / 0.35));
    }
}

@keyframes md-logo-glitch-3 {

    0%,
    24.1%,
    25.1%,
    77.8%,
    78.8%,
    100% {
        transform: translateX(0);
        filter: hue-rotate(0);
    }

    24.2%,
    25% {
        transform: translateX(var(--glitch-x-1));
        filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(3px 0 rgb(0 0 255 / 0.3));
    }

    77.9%,
    78.7% {
        transform: translateX(var(--glitch-x-2));
        filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-2px 1px rgb(255 0 0 / 0.35));
    }
}

@keyframes md-logo-glitch-4 {

    0%,
    41.6%,
    42.6%,
    85.3%,
    86.3%,
    100% {
        transform: translateX(0);
        filter: hue-rotate(0);
    }

    41.7%,
    42.5% {
        transform: translateX(var(--glitch-x-1));
        filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(-2px 0 rgb(0 0 255 / 0.35));
    }

    85.4%,
    86.2% {
        transform: translateX(var(--glitch-x-2));
        filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(3px 1px rgb(255 0 0 / 0.3));
    }
}

@keyframes md-logo-glitch-5 {

    0%,
    12.8%,
    13.8%,
    49.5%,
    50.5%,
    100% {
        transform: translateX(0);
        filter: hue-rotate(0);
    }

    12.9%,
    13.7% {
        transform: translateX(var(--glitch-x-1));
        filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(2px 1px rgb(255 0 0 / 0.3));
    }

    49.6%,
    50.4% {
        transform: translateX(var(--glitch-x-2));
        filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-3px 0 rgb(0 0 255 / 0.35));
    }
}

@keyframes md-logo-glitch-6 {

    0%,
    36.2%,
    37.2%,
    91.1%,
    92.1%,
    100% {
        transform: translateX(0);
        filter: hue-rotate(0);
    }

    36.3%,
    37.1% {
        transform: translateX(var(--glitch-x-1));
        filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(-2px 0 rgb(255 0 0 / 0.35));
    }

    91.2%,
    92% {
        transform: translateX(var(--glitch-x-2));
        filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(2px 1px rgb(0 0 255 / 0.3));
    }
}

@keyframes md-logo-glitch-7 {

    0%,
    7.4%,
    8.4%,
    70.9%,
    71.9%,
    100% {
        transform: translateX(0);
        filter: hue-rotate(0);
    }

    7.5%,
    8.3% {
        transform: translateX(var(--glitch-x-1));
        filter: hue-rotate(var(--glitch-hue-1)) drop-shadow(3px 0 rgb(0 0 255 / 0.3));
    }

    71%,
    71.8% {
        transform: translateX(var(--glitch-x-2));
        filter: hue-rotate(var(--glitch-hue-2)) drop-shadow(-2px 0 rgb(255 0 0 / 0.35));
    }
}

@media (prefers-reduced-motion: reduce) {

    h1.md-text-glitch,
    h1.md-text-glitch::before,
    h1.md-text-glitch::after,
    .md-logo-glitch__strip {
        animation: none;
    }

    h1.md-text-glitch::before,
    h1.md-text-glitch::after {
        display: none;
    }
}