/* SEKAILABO' front page: Bauhaus loading screen.
   Shown only when JS is available (html.sl-js) and motion is allowed.
   js/front-motion.js drives progress and the exit; the failsafe hides it if JS never runs. */
.sl-loader { display: none; }
.sl-js .sl-loader { position: fixed; z-index: 1000; inset: 0; display: block; animation: sl-loader-failsafe 0s linear 5s forwards; }
@keyframes sl-loader-failsafe { to { visibility: hidden; pointer-events: none; } }

.sl-loader-stage { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(22px, 3vw, 34px); background-color: var(--sl-paper); background-image: linear-gradient(var(--sl-line) 1px, transparent 1px), linear-gradient(90deg, var(--sl-line) 1px, transparent 1px); background-size: 56px 56px; color: var(--sl-ink); }
.sl-loader-shapes { position: relative; width: clamp(150px, 16vw, 210px); aspect-ratio: 1; }
.sl-loader-shape { position: absolute; display: block; }
.sl-loader-shape--circle { top: 0; left: 0; width: 62%; aspect-ratio: 1; border-radius: 50%; background: var(--sl-yellow); }
.sl-loader-shape--square { right: 0; bottom: 4%; width: 44%; aspect-ratio: 1; background: var(--sl-red); }
.sl-loader-shape--triangle { bottom: 0; left: 10%; width: 50%; aspect-ratio: 1 / .88; background: var(--sl-blue); clip-path: polygon(50% 0, 100% 100%, 0 100%); mix-blend-mode: multiply; }
body.home .sl-loader-word { margin: 0; overflow: hidden; font: 700 clamp(34px, 5.4vw, 72px)/1 "Space Grotesk", sans-serif; letter-spacing: -.06em; }
.sl-loader-word span { color: var(--sl-red); }
.sl-loader-meter { width: clamp(180px, 22vw, 280px); height: 4px; background: rgba(22, 24, 28, .12); }
.sl-loader-meter i { display: block; height: 100%; background: linear-gradient(90deg, var(--sl-red) 0 33.3%, var(--sl-yellow) 33.3% 66.6%, var(--sl-blue) 66.6%); transform: scaleX(0); transform-origin: left; }
body.home .sl-loader-count, body.home .sl-loader-note { position: absolute; bottom: clamp(18px, 3vw, 36px); margin: 0; font: 500 11px "IBM Plex Mono", monospace; letter-spacing: .12em; }
.sl-loader-count { left: clamp(18px, 4vw, 64px); }
.sl-loader-count span { font-size: clamp(26px, 3vw, 40px); font-weight: 600; letter-spacing: -.02em; }
.sl-loader-note { right: clamp(18px, 4vw, 64px); }

.sl-loader-panels { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); pointer-events: none; }
.sl-loader-panels i { display: block; transform: translateY(101%); }
.sl-loader-panels i:nth-child(1) { background: var(--sl-ink); }
.sl-loader-panels i:nth-child(2) { background: var(--sl-red); }
.sl-loader-panels i:nth-child(3) { background: var(--sl-yellow); }
.sl-loader-panels i:nth-child(4) { background: var(--sl-blue); }

@keyframes sl-loader-pop { 0% { opacity: 0; scale: 0; } 70% { opacity: 1; scale: 1.12; } 100% { opacity: 1; scale: 1; } }
@keyframes sl-loader-tick { 0%, 18% { rotate: 0deg; } 32%, 50% { rotate: 90deg; } 64%, 82% { rotate: 180deg; } 96%, 100% { rotate: 270deg; } }
@keyframes sl-loader-orbit { 0%, 100% { translate: 0 0; } 50% { translate: 14% 10%; } }
@keyframes sl-loader-turn { 0%, 30% { rotate: 0deg; } 50%, 80% { rotate: 120deg; } 100% { rotate: 240deg; } }
@keyframes sl-loader-word { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes sl-loader-sweep { 0% { transform: translateY(101%); } 42%, 52% { transform: translateY(0); } 100% { transform: translateY(-101%); } }
@keyframes sl-loader-hide { to { visibility: hidden; } }

.sl-js .sl-loader-shape--circle { animation: sl-loader-pop .7s var(--sl-ease-spring) both, sl-loader-orbit 2.4s ease-in-out .8s infinite; }
.sl-js .sl-loader-shape--square { animation: sl-loader-pop .7s var(--sl-ease-spring) .15s both, sl-loader-tick 2.4s var(--sl-ease-snap) .9s infinite; }
.sl-js .sl-loader-shape--triangle { animation: sl-loader-pop .7s var(--sl-ease-spring) .3s both, sl-loader-turn 2.4s var(--sl-ease-snap) 1s infinite; }
.sl-js .sl-loader-word { animation: sl-loader-word .8s var(--sl-ease-out) .35s both; }

/* Exit: colour columns sweep up over the stage, then lift away to reveal the page */
.sl-loader.is-sl-leaving .sl-loader-panels i { animation: sl-loader-sweep 1.15s var(--sl-ease-snap) both; }
.sl-loader.is-sl-leaving .sl-loader-panels i:nth-child(2) { animation-delay: .06s; }
.sl-loader.is-sl-leaving .sl-loader-panels i:nth-child(3) { animation-delay: .12s; }
.sl-loader.is-sl-leaving .sl-loader-panels i:nth-child(4) { animation-delay: .18s; }
.sl-loader.is-sl-leaving .sl-loader-stage { animation: sl-loader-hide 0s linear .55s forwards; }
.sl-loader.is-sl-leaving { pointer-events: none; }

@media (max-width: 820px) {
  .sl-loader-stage { background-size: 42px 42px; }
  .sl-loader-panels { grid-template-columns: repeat(4, 1fr); }
  .sl-loader-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-js .sl-loader { display: none; }
}