/* Six approved image scenes; compositor-friendly cinematic motion. */
.loading.session-loading{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;overflow:hidden;background:#0b111a;color:#f1f6ff;gap:22px;padding:32px;box-sizing:border-box}
.session-loading .session-loading-center{position:relative;z-index:2;display:grid;justify-items:center;gap:26px;width:min(320px,80vw);padding:48px 24px;text-align:center;border-radius:40px;background:radial-gradient(ellipse,#0b111af5 20%,#0b111a90 58%,transparent 74%)}
.session-loading .session-loading-center p{margin:0;color:#eef5ff;font-size:15px;letter-spacing:.045em;text-shadow:0 2px 12px #000}
.session-loading .loading-brand{position:relative;display:grid;place-items:center;width:112px;height:112px}
.session-loading .loading-brand img{position:relative;width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 0 20px #55daff50)}
.session-loading .loading-ring{position:absolute;inset:0;border:1px solid #9ddfff28;border-top:2px solid #5ee6f7;border-right:2px solid #d674ea;border-radius:50%;animation:session-spin 2.4s linear infinite;box-shadow:0 0 36px #50cfff12}
.session-loading .session-meter{width:100%;height:5px;overflow:hidden;border-radius:99px;background:#a5c3ff21;box-shadow:0 0 0 1px #8dcfff15}
.session-loading .session-meter::before{content:"";display:block;width:44%;height:100%;border-radius:inherit;background:linear-gradient(90deg,transparent,#57e3ef 32%,#dc77eb 75%,transparent);animation:session-progress 2.2s ease-in-out infinite}
/* These are the six approved images, not procedural substitutes. */
.session-atmosphere{position:absolute;z-index:-1;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 12% 10%,#12325480,transparent 55%),radial-gradient(ellipse at 90% 85%,#53227260,transparent 55%)}
.session-reference-stage{position:absolute;left:50%;top:50%;width:max(100vw,200vh);width:max(100vw,200svh);transform:translate(-50%,-50%)}
.session-reference-image{display:block;width:100%;height:auto;transform-origin:center;animation:session-reference-drift 24s cubic-bezier(.45,0,.55,1) -5s infinite;will-change:transform;
/* Mask only the logo/text already baked into the reference. The real UI stays fixed.
   Percentages are relative to the image itself, including when the viewport crops it. */
-webkit-mask-image:radial-gradient(ellipse 12% 20% at 50% 50%,transparent 70%,#000 100%);
mask-image:radial-gradient(ellipse 12% 20% at 50% 50%,transparent 70%,#000 100%)}
[data-scene="aurora"] .session-reference-image{animation-name:session-reference-aurora;animation-duration:26s}
[data-scene="waves"] .session-reference-image{animation-name:session-reference-waves;animation-duration:22s}
[data-scene="particles"] .session-reference-image{animation-name:session-reference-orbit;animation-duration:32s}
[data-scene="editorial"] .session-reference-image{animation-name:session-reference-grid;animation-duration:28s}
[data-scene="pages"] .session-reference-image{animation-name:session-reference-pages;animation-duration:24s}
[data-scene="knowledge"] .session-reference-image{animation-name:session-reference-knowledge;animation-duration:30s}
/* Independent foreground light gives depth without duplicating the artwork.
   Closed paths avoid a cut at the loop; negative phases start already in motion. */
.session-atmosphere::before{content:"";position:absolute;inset:-12%;background:radial-gradient(ellipse at 22% 28%,#b3efff24,transparent 28%),radial-gradient(ellipse at 78% 72%,#f4b3e41a,transparent 26%);mix-blend-mode:screen;animation:session-foreground 17s cubic-bezier(.45,0,.55,1) -4s infinite;pointer-events:none}
.session-atmosphere::after{content:"";position:absolute;inset:-16%;background:linear-gradient(115deg,transparent 24%,#73dfff0b 36%,#b4edff18 40%,transparent 49%),radial-gradient(ellipse at 85% 20%,#df83ee1c,transparent 42%);mix-blend-mode:screen;animation:session-reference-light 23s cubic-bezier(.45,0,.55,1) -8s infinite;pointer-events:none}
@keyframes session-spin{to{transform:rotate(360deg)}}
@keyframes session-progress{from{transform:translateX(-110%)}to{transform:translateX(340%)}}
/* Slow dolly, lateral tracking and small arcs, each composed for its image. */
@keyframes session-reference-drift{
  0%,100%{transform:translate3d(-1%,.5%,0) scale(1.08)}
  35%{transform:translate3d(.8%,-.6%,0) scale(1.14)}
  70%{transform:translate3d(1.2%,.3%,0) scale(1.11)}
}
@keyframes session-reference-aurora{
  0%,100%{transform:translate3d(-1.5%,.8%,0) scale(1.1) rotate(-.5deg)}
  35%{transform:translate3d(.6%,-.8%,0) scale(1.17) rotate(.2deg)}
  70%{transform:translate3d(1.5%,.3%,0) scale(1.13) rotate(.6deg)}
}
@keyframes session-reference-waves{
  0%,100%{transform:translate3d(-1.7%,.5%,0) scale(1.11) rotate(-.6deg)}
  35%{transform:translate3d(.3%,-.6%,0) scale(1.16) rotate(.3deg)}
  70%{transform:translate3d(1.7%,.5%,0) scale(1.12) rotate(.7deg)}
}
@keyframes session-reference-orbit{
  0%,100%{transform:translate3d(-.8%,.5%,0) scale(1.1) rotate(-1deg)}
  33%{transform:translate3d(.7%,-.8%,0) scale(1.17) rotate(.2deg)}
  66%{transform:translate3d(.8%,.7%,0) scale(1.13) rotate(1deg)}
}
@keyframes session-reference-grid{
  0%,100%{transform:translate3d(-.8%,.5%,0) scale(1.055)}
  40%{transform:translate3d(.5%,-.7%,0) scale(1.11)}
  75%{transform:translate3d(.8%,.3%,0) scale(1.08)}
}
@keyframes session-reference-pages{
  0%,100%{transform:translate3d(-.7%,1%,0) scale(1.08) rotate(-.35deg)}
  35%{transform:translate3d(.5%,-1%,0) scale(1.16) rotate(.3deg)}
  70%{transform:translate3d(1%,.3%,0) scale(1.12) rotate(.5deg)}
}
@keyframes session-reference-knowledge{
  0%,100%{transform:translate3d(1%,.5%,0) scale(1.08) rotate(.3deg)}
  35%{transform:translate3d(-.6%,-.7%,0) scale(1.15) rotate(-.3deg)}
  70%{transform:translate3d(-1%,.6%,0) scale(1.11) rotate(-.5deg)}
}
@keyframes session-foreground{
  0%,100%{transform:translate3d(2%,-1%,0) scale(1);opacity:.35}
  40%{transform:translate3d(-2%,1.5%,0) scale(1.06);opacity:.7}
  75%{transform:translate3d(-1%,-1%,0) scale(1.02);opacity:.45}
}
@keyframes session-reference-light{
  0%,100%{transform:translate3d(-4%,1%,0) rotate(-3deg);opacity:.35}
  40%{transform:translate3d(4%,-2%,0) rotate(3deg);opacity:.75}
  75%{transform:translate3d(1%,2%,0) rotate(1deg);opacity:.5}
}
/* Preserve the side artwork on tall displays rather than cropping to an empty center. */
@media(max-aspect-ratio:1/1){.session-reference-stage{width:160vw}.session-loading .session-loading-center{width:min(260px,72vw);padding:32px 16px}.session-loading .loading-brand{width:88px;height:88px}.session-loading .loading-brand img{width:56px;height:56px}.session-loading .session-loading-center p{font-size:14px}.session-reference-image{-webkit-mask-image:radial-gradient(ellipse 18% 32% at 50% 50%,transparent 65%,#000 100%);mask-image:radial-gradient(ellipse 18% 32% at 50% 50%,transparent 65%,#000 100%)}}
@media(prefers-reduced-motion:reduce){.session-loading *,.session-loading *::before,.session-loading *::after{animation:none!important;will-change:auto}.session-loading .session-meter::before{width:100%;opacity:.65}}
@media(forced-colors:active){.session-atmosphere{display:none}.session-loading .session-meter{border:1px solid CanvasText}.session-loading .session-meter::before{background:Highlight}.session-loading .session-loading-center p{color:CanvasText}}