/* generated by scripts/olympusV8/build.py — edit scripts/olympusV8/cloud-loading.css */
/* The Olympus loading screen, in the v8 opening's language: the blurred cloud sea (the demo's #appBg,
   clouds.webp from scripts/olympusV8/clouds.mjs) drifting slowly, the mark breathing over the word.
   Plain CSS on purpose: index.html shows it before any script runs, the app's loading states reuse it.
   Template for scripts/olympusV8/build.py (it fills /olympus-v8/fonts/206ef64771d3.woff2) — edit here, not the generated copy. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 500;font-display:swap;src:url(/olympus-v8/fonts/206ef64771d3.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.olympus-cloudload{position:fixed;inset:0;z-index:99999;overflow:hidden;display:flex;align-items:center;justify-content:center;
  background:#f1f4f1;font-family:'DM Sans',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
.olympus-cloudload.inline{position:absolute;z-index:1}
/* The app's own loading states (React) sit one layer under the boot screen: while the boot screen is up it
   stays on top and its animation never restarts; if it has faded, the same picture is underneath. */
.olympus-cloudload.ocl-app{z-index:99998}
.olympus-cloudload.ocl-app .ocl-word{animation:none}
/* the boot screen hands over to the first page by fading (bootScreen.ts), never by vanishing */
.olympus-cloudload{transition:opacity .52s cubic-bezier(.22,1,.36,1)}
.olympus-cloudload.ocl-out{opacity:0;pointer-events:none}
/* one tile wider than the screen, so the drift (exactly one tile) never runs out of clouds and loops seamlessly */
.olympus-cloudload::before{content:"";position:absolute;top:-60px;bottom:-60px;left:-60px;width:calc(100% + 120px + max(2070px,230vw));
  background:url(/olympus-v8/img/clouds.webp) 0 0/max(2070px,230vw) auto repeat;will-change:transform;
  filter:blur(8px) saturate(.55);animation:olyCloudDrift 70s linear infinite}
.olympus-cloudload::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 46%,rgba(250,252,250,.72),rgba(250,252,250,0) 70%)}
.olympus-cloudload .ocl-word{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:14px;color:#233b3a;
  animation:olyCloudIn .9s cubic-bezier(.22,1,.36,1) both}
.olympus-cloudload .ocl-mark{position:relative;display:grid;place-items:center;width:84px;height:84px}
.olympus-cloudload .ocl-mark svg{width:46px;height:46px;animation:olyCloudBreathe 2.4s ease-in-out infinite}
/* the orbit: a faint ring and one bright arc travelling round it — the loading you can see */
.olympus-cloudload .ocl-mark::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(35,59,58,.12)}
.olympus-cloudload .ocl-mark::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(35,59,58,0) 0deg,rgba(35,59,58,0) 250deg,rgba(35,59,58,.85) 350deg,rgba(35,59,58,0) 360deg);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
  animation:olyCloudOrbit 1.4s linear infinite}
/* a hairline under the word with a light running along it */
.olympus-cloudload .ocl-bar{position:relative;width:148px;height:2px;margin-top:6px;border-radius:2px;overflow:hidden;background:rgba(35,59,58,.1)}
.olympus-cloudload .ocl-bar::after{content:"";position:absolute;top:0;bottom:0;left:0;width:42%;border-radius:2px;
  background:linear-gradient(90deg,rgba(35,59,58,0),rgba(35,59,58,.75),rgba(35,59,58,0));animation:olyCloudRun 1.6s cubic-bezier(.65,0,.35,1) infinite}
.olympus-cloudload .ocl-word b{font-weight:400;font-size:46px;letter-spacing:-.01em;line-height:1;text-shadow:0 1px 24px rgba(250,252,250,.9)}
.olympus-cloudload .ocl-word small{font-size:13px;color:#4a5e5c;letter-spacing:.02em;text-shadow:0 1px 12px rgba(250,252,250,.9)}
.olympus-cloudload.inline .ocl-mark{width:64px;height:64px}
.olympus-cloudload.inline .ocl-mark svg{width:34px;height:34px}
.olympus-cloudload.inline .ocl-word b{font-size:32px}
@keyframes olyCloudOrbit{to{transform:rotate(360deg)}}
@keyframes olyCloudRun{from{transform:translateX(-110%)}to{transform:translateX(250%)}}
@keyframes olyCloudDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(calc(-1 * max(2070px,230vw)),0,0)}}
@keyframes olyCloudBreathe{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1)}}
@keyframes olyCloudIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.olympus-cloudload::before,.olympus-cloudload .ocl-mark svg{animation:none}.olympus-cloudload .ocl-mark::after{animation-duration:3s}}