/* 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;
    /* Own stacking context, so the green cube's z-index below never reaches the page. */
    isolation: isolate;
}

.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;
    /* Exact master geometry (astramuse r8-idents/mark.svg, 1200x1032 canvas): each cube is
       428x496 with its top vertex at (600,18) blue, (824,266) purple, (600,522) green,
       (376,266) red. The 3D fold render lands on these numbers, so the hand-off is exact. */
    width: 35.6667%;
    height: 48.062%;
    opacity: 0.3;
    transform-origin: 50% 50%;
    animation: sky-pulse var(--sky-dur) linear infinite;
}

.sky-loader__cube--top    { left: 32.1667%; top: 1.7442%;  animation-delay: 0s; }
.sky-loader__cube--right  { left: 50.8333%; top: 25.7752%; animation-delay: calc(var(--sky-dur) * -0.75); }
.sky-loader__cube--bottom { left: 32.1667%; top: 50.5814%; animation-delay: calc(var(--sky-dur) * -0.5); z-index: 1; }
.sky-loader__cube--left   { left: 13.5%;    top: 25.7752%; animation-delay: calc(var(--sky-dur) * -0.25); }
/* Paint order follows the master: green (bottom) sits in front of red and purple. */

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

/* Centred loading block for plain-JS placeholders (window.skyLoaderHTML in base.html)
   and panel templates: the mark in the middle of the space the content will fill. */
.sk-loading { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px 16px; width: 100%; box-sizing: border-box; }