/* Page arrival. Every page fades and settles in instead of snapping; tools show a short "studio is loading" screen.
   Pure CSS where possible so a slow or failed script can never leave a page invisible. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:site-leave .22s ease-in both}
::view-transition-new(root){animation:site-arrive .38s cubic-bezier(.2,.75,.25,1) both}
@keyframes site-leave{to{opacity:0}}
@keyframes site-arrive{from{opacity:0}}
@keyframes site-enter-body{from{opacity:0}}
@keyframes site-enter-item{from{opacity:0;translate:0 12px}}
@media(prefers-reduced-motion:no-preference){
  body:not([data-studio]){animation:site-enter-body .42s ease-out backwards}
  /* The "rundown": the page's main blocks arrive one after another, top to bottom. Fill is `backwards`
     so no transform stays behind after the entrance (sticky and fixed children keep working). */
  body:not([data-studio]) main>*{animation:site-enter-item .6s cubic-bezier(.2,.75,.25,1) backwards}
  body:not([data-studio]) main>*:nth-child(1){animation-delay:.06s}
  body:not([data-studio]) main>*:nth-child(2){animation-delay:.13s}
  body:not([data-studio]) main>*:nth-child(3){animation-delay:.2s}
  body:not([data-studio]) main>*:nth-child(4){animation-delay:.27s}
  body:not([data-studio]) main>*:nth-child(5){animation-delay:.33s}
  body:not([data-studio]) main>*:nth-child(6){animation-delay:.38s}
  body:not([data-studio]) main>*:nth-child(n+7){animation-delay:.42s}
  body:not([data-studio]) main>*:nth-child(n+12){animation:none}
}
/* Studio loading screen. Drawn by CSS from the first frame, so there is nothing to jump; the script only
   decides when it is time to fade it away. */
body[data-studio]{--studio-bg:#0f1013;--studio-ink:#efe8f1;--studio-muted:#9d95a6;--studio-accent:#efc7e3}
body[data-studio]::before,body[data-studio]::after{position:fixed;inset:0;z-index:2147483000;pointer-events:none;transition:opacity .6s cubic-bezier(.2,.75,.25,1),visibility 0s linear .6s}
body[data-studio]::before{content:attr(data-studio);display:grid;place-content:center;padding-top:206px;box-sizing:border-box;background:var(--studio-bg) url("/assets/brand/spinz-cz-logo-dark.svg") center calc(50% - 46px)/148px auto no-repeat;color:var(--studio-muted);font:400 11.5px/1.5 "Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:.4px;text-transform:uppercase}
body[data-studio]::after{content:"Your studio is loading";display:grid;place-content:center;padding-top:64px;box-sizing:border-box;color:var(--studio-ink);font:500 15px/1.4 "Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;letter-spacing:-.1px;background:linear-gradient(90deg,transparent 0,var(--studio-accent) 35%,var(--studio-accent) 65%,transparent 100%) no-repeat -160px calc(50% + 74px)/160px 2px,linear-gradient(#ffffff14,#ffffff14) no-repeat center calc(50% + 74px)/160px 2px;animation:studio-bar 1.4s cubic-bezier(.45,0,.35,1) infinite,studio-breathe 2.6s ease-in-out infinite}
@keyframes studio-bar{from{background-position:calc(50% - 160px) calc(50% + 74px),center calc(50% + 74px)}to{background-position:calc(50% + 160px) calc(50% + 74px),center calc(50% + 74px)}}
@keyframes studio-breathe{0%,100%{opacity:1}50%{opacity:.78}}
body[data-studio].studio-ready::before,body[data-studio].studio-ready::after{opacity:0;visibility:hidden;animation:none}
@media(prefers-reduced-motion:reduce){body[data-studio]::before,body[data-studio]::after{transition:opacity .2s,visibility 0s linear .2s;animation:none}}
@media(max-width:600px){body[data-studio]::before{background-size:120px auto;padding-top:190px}body[data-studio]::after{padding-top:60px;font-size:14px}}