/* Skyonomy brand loader — the four pulsing cubes from the official loading icon.
   Markup: .sky-loader > 4x .sky-loader__cube (top/right/bottom/left), each with
   __face--body, __face--cap, __face--sheen children. Size the root with a width;
   height follows via aspect-ratio. Add .sky-loader--slow for the 4s idle variant. */

.sky-loader {
    position: relative;
    display: inline-block;
    aspect-ratio: 300 / 258;
}

.sky-loader {
    /* Knobs: --sky-dur is the pulse tempo (delays scale with it — same phase
       offsets as the official icon: 0 / -75% / -50% / -25% of a cycle);
       --sky-idle is the resting opacity between pulses. */
    --sky-dur: 1.6s;
    --sky-idle: 0.3;
}

.sky-loader__cube {
    position: absolute;
    width: 36%;
    height: 48.45%;
    opacity: 0.3;
    transform-origin: 50% 50%;
    animation: sky-pulse var(--sky-dur) linear infinite;
}

.sky-loader__cube--top    { left: 32%;    top: 1.55%;  animation-delay: 0s; }
.sky-loader__cube--right  { left: 50.67%; top: 25.58%; animation-delay: calc(var(--sky-dur) * -0.75); }
.sky-loader__cube--bottom { left: 32%;    top: 49.6%;  animation-delay: calc(var(--sky-dur) * -0.5); }
.sky-loader__cube--left   { left: 13.33%; top: 25.58%; animation-delay: calc(var(--sky-dur) * -0.25); }

.sky-loader__face { position: absolute; inset: 0; }
.sky-loader__face--body { clip-path: polygon(50% 50%, 100% 25%, 100% 75%, 50% 100%); }
.sky-loader__face--cap  { clip-path: polygon(50% 0%, 100% 25%, 50% 50%, 0% 25%); }
.sky-loader__face--sheen {
    mix-blend-mode: screen;
    opacity: 0.5;
    background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 45%);
    clip-path: polygon(50% 0%, 100% 25%, 50% 50%, 0% 25%);
}

.sky-loader__cube--top    .sky-loader__face--body { background: #2196EC; }
.sky-loader__cube--top    .sky-loader__face--cap  { background: #40CBF6; }
.sky-loader__cube--right  .sky-loader__face--body { background: #8B3CEA; }
.sky-loader__cube--right  .sky-loader__face--cap  { background: #B766F8; }
.sky-loader__cube--bottom .sky-loader__face--body { background: #14A44D; }
.sky-loader__cube--bottom .sky-loader__face--cap  { background: #34E27E; }
.sky-loader__cube--left   .sky-loader__face--body { background: #E31F53; }
.sky-loader__cube--left   .sky-loader__face--cap  { background: #FF5670; }

.sky-loader--slow { --sky-dur: 5s; }

/* On dark surfaces the 0.3 idle all but disappears — brighter resting state. */
.sky-loader--bright { --sky-idle: 0.85; }
/* The rail's brand mark rests at full strength (Chris, 09-21: it looked faded). */
.sky-loader--solid { --sky-idle: 1; }

@keyframes sky-pulse {
    0%, 25%, 100% { opacity: var(--sky-idle, 0.3); transform: scale(1); filter: brightness(1); }
    10%           { opacity: 1;   transform: scale(1.14); filter: brightness(1.25); }
}

/* Reduced motion: the brand pulse survives but gentler — opacity only, no scale,
   half tempo. Killing it entirely made the logo "stop" whenever the OS flipped
   its animation setting (Chris, 2026-08-04) — vestibular safety needs movement
   removed, not the brand's heartbeat. */
@keyframes sky-pulse-gentle {
    0%, 25%, 100% { opacity: var(--sky-idle, 0.3); }
    10%           { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    /* Double the tempo via the knob so the per-cube phase delays scale with it. */
    .sky-loader { --sky-dur: 3.2s; }
    .sky-loader--slow { --sky-dur: 10s; }
    .sky-loader__cube {
        animation-name: sky-pulse-gentle;
        transform: none !important;
        filter: none !important;
    }
}