﻿#studio-preloader { display: none; }
html[data-booting] { overflow: hidden; }
html[data-booting] #studio-preloader {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  overflow: hidden; isolation: isolate; background: #101a14; color: #f3f4ec;
  font-family: Raleway, sans-serif;
  transition: opacity 240ms var(--ease-out, cubic-bezier(.23, 1, .32, 1));
}
html[data-booting="leaving"] #studio-preloader { opacity: 0; pointer-events: none; }
.preloader-lens { position: absolute; width: min(86vw, 68vh, 620px); height: auto; color: #fbbd16; opacity: .65; }
.preloader-lens-track { stroke: #b6c1af; stroke-opacity: .16; stroke-width: .7; }
.preloader-orbit-outer, .preloader-orbit-inner { transform-origin: 300px 300px; }
.preloader-orbit-outer { animation: studio-orbit 18s linear infinite; }
.preloader-orbit-inner { color: #b6c1af; animation: studio-orbit 26s linear infinite reverse; }
.preloader-studio { position: relative; width: min(70vw, 320px); text-align: center; }
.preloader-symbol { display: grid; place-items: center; margin: 0 auto 24px; animation: studio-mark 700ms var(--ease-out, cubic-bezier(.23, 1, .32, 1)) both; }
.preloader-symbol img { display: block; width: clamp(94px, 12vw, 140px); height: auto; }
.preloader-name { margin: 0; font-size: clamp(25px, 4vw, 36px); line-height: 1.1; letter-spacing: -.045em; font-weight: 650; }
.preloader-coop { margin: 12px 0 30px; font-size: 10px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #fbbd16; }
.preloader-name, .preloader-coop { animation: studio-word 500ms 100ms var(--ease-out, cubic-bezier(.23, 1, .32, 1)) both; }
.preloader-progress { height: 1px; width: 112px; margin: auto; background: #354535; overflow: hidden; }
.preloader-progress::after { content: ''; display: block; height: 100%; width: 100%; background: #fbbd16; animation: studio-load 1.5s linear infinite; }
#preloader-status { margin: 18px 0 0; font-size: 10px; line-height: 1.6; letter-spacing: .08em; color: #b6c1af; }
.preloader-credit { position: absolute; bottom: max(30px, env(safe-area-inset-bottom)); left: clamp(24px, 5vw, 72px); margin: 0; font-size: 9px; line-height: 44px; letter-spacing: .16em; text-transform: uppercase; color: #b6c1af; }
#preloader-skip { position: absolute; right: clamp(24px, 5vw, 72px); bottom: max(30px, env(safe-area-inset-bottom)); min-height: 44px; border: 0; background: transparent; color: #f3f4ec; padding: 12px 0; cursor: pointer; font: inherit; font-size: 11px; text-underline-offset: 6px; text-decoration: underline; transition: color 160ms ease; }
#preloader-skip:focus-visible { outline: 2px solid #fbbd16; outline-offset: 6px; }
@media (hover: hover) and (pointer: fine) { #preloader-skip:hover { color: #fbbd16; } }
@media (max-width: 480px) { .preloader-credit { display: none; } #preloader-skip { right: 50%; transform: translateX(50%); white-space: nowrap; } }
@keyframes studio-orbit { to { transform: rotate(360deg); } }
@keyframes studio-mark { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@keyframes studio-word { from { opacity: 0; transform: translateY(20%); } to { opacity: 1; transform: translateY(0); } }
@keyframes studio-load { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@media (prefers-reduced-motion: reduce) {
  .preloader-orbit-outer, .preloader-orbit-inner, .preloader-symbol, .preloader-name, .preloader-coop, .preloader-progress::after { animation: none; }
}
