/* ===== Cinematic loader. Replaces the old loading-screen.css entirely.
   Original classes kept: ls-screen, ls-glow, ls-content, ls-line(--1/--2), ls-rule.
   Everything new is prefixed jx-cine-. ===== */
html.ls-skip .ls-screen{display:none!important}
html.jx-cine-lock,html.jx-cine-lock body{overflow:hidden}

.ls-screen{
  --jx-cine-bg:#05080c; --jx-cine-bar:#000; --jx-cine-ink:#eef2f6;
  --jx-cine-hot:#c9711a; --jx-cine-cool:#7c5cff; --jx-cine-green:#2ecc8f; --jx-cine-h:11vh;
  position:fixed; inset:0; z-index:99999; color:var(--jx-cine-ink);
  font-family:'Space Grotesk','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
.ls-screen *{box-sizing:border-box}

/* split halves = the background */
.jx-cine-half{position:absolute; left:0; right:0; height:50.1%; background:var(--jx-cine-bg); transition:transform 1.25s cubic-bezier(.76,0,.18,1); will-change:transform}
.jx-cine-half--top{top:0} .jx-cine-half--bottom{bottom:0}
.ls-screen.is-open .jx-cine-half--top{transform:translateY(-101%)}
.ls-screen.is-open .jx-cine-half--bottom{transform:translateY(101%)}

/* letterbox bars */
.jx-cine-bar{position:absolute; left:0; right:0; height:var(--jx-cine-h); background:var(--jx-cine-bar); display:flex; align-items:center; justify-content:space-between; padding:0 clamp(18px,4vw,56px)}
.jx-cine-bar--top{top:0; border-bottom:1px solid rgba(124,92,255,.28); animation:jx-cine-barT 1.1s .1s cubic-bezier(.2,.8,.2,1) both}
.jx-cine-bar--bottom{bottom:0; justify-content:center; border-top:1px solid rgba(124,92,255,.28); animation:jx-cine-barB 1.1s .1s cubic-bezier(.2,.8,.2,1) both}
@keyframes jx-cine-barT{from{transform:translateY(-100%)}}
@keyframes jx-cine-barB{from{transform:translateY(100%)}}
@keyframes jx-cine-in{from{opacity:0; filter:blur(8px)}}
.jx-cine-rec{display:flex; align-items:center; gap:12px; font-size:clamp(14px,1.5vw,18px); font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:.06em; animation:jx-cine-in .8s 1s both}
.jx-cine-rec i{width:11px; height:11px; border-radius:50%; background:#ff3b30; box-shadow:0 0 14px #ff3b30; animation:jx-cine-blink 1.2s steps(2,jump-none) infinite}
@keyframes jx-cine-blink{50%{opacity:.15}}
.jx-cine-logo{width:clamp(130px,16vw,220px); height:auto; display:block; mix-blend-mode:screen; animation:jx-cine-in 1s 1.1s both}
.jx-cine-credit{font-size:clamp(16px,1.7vw,22px); font-weight:700; letter-spacing:.12em; animation:jx-cine-in 1s 1.3s both}

/* glow + atmosphere */
.ls-glow{position:absolute; left:50%; top:50%; width:72vmax; height:44vmax; pointer-events:none; transition:opacity .6s;
  background:radial-gradient(ellipse,rgba(201,113,26,.17),rgba(124,92,255,.1) 40%,transparent 70%);
  transform:translate(-50%,-50%); animation:jx-cine-breathe 5s ease-in-out infinite alternate}
@keyframes jx-cine-breathe{to{transform:translate(-50%,-50%) scale(1.14)}}
.jx-cine-atmos{position:absolute; inset:0; overflow:hidden; pointer-events:none; transition:opacity .7s}
.ls-screen.is-exit .jx-cine-atmos,.ls-screen.is-exit .ls-glow{opacity:0}
.jx-cine-orb{position:absolute; border-radius:50%; filter:blur(90px); opacity:.34; animation:jx-cine-drift 14s ease-in-out infinite alternate}
.jx-cine-orb--a{width:46vmax; height:46vmax; left:-14vmax; top:-10vmax; background:#4a34c4}
.jx-cine-orb--b{width:38vmax; height:38vmax; right:-12vmax; bottom:-12vmax; background:#8a4d0e; animation-delay:-5s}
.jx-cine-orb--c{width:26vmax; height:26vmax; left:38%; top:34%; background:#0f6b4a; opacity:.2; animation-delay:-9s}
@keyframes jx-cine-drift{to{transform:translate3d(8vmax,5vmax,0) scale(1.15)}}
.jx-cine-vig{position:absolute; inset:0; background:radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.78) 100%)}
.jx-cine-grain{position:absolute; inset:-50%; opacity:.11; mix-blend-mode:overlay; animation:jx-cine-grain .9s steps(6) infinite;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@keyframes jx-cine-grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-5%,-2%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}}
.jx-cine-corner{position:absolute; width:clamp(18px,2.4vw,30px); height:clamp(18px,2.4vw,30px); border:0 solid rgba(238,242,246,.55); animation:jx-cine-in 1s 1.4s both}
.jx-cine-corner--tl{left:clamp(18px,4vw,56px); top:calc(var(--jx-cine-h) + 22px); border-width:2px 0 0 2px}
.jx-cine-corner--tr{right:clamp(18px,4vw,56px); top:calc(var(--jx-cine-h) + 22px); border-width:2px 2px 0 0}
.jx-cine-corner--bl{left:clamp(18px,4vw,56px); bottom:calc(var(--jx-cine-h) + 22px); border-width:0 0 2px 2px}
.jx-cine-corner--br{right:clamp(18px,4vw,56px); bottom:calc(var(--jx-cine-h) + 22px); border-width:0 2px 2px 0}

/* stage + text */
.jx-cine-stage{position:absolute; inset:0; display:grid; place-items:center; padding:var(--jx-cine-h) clamp(20px,5vw,60px); transition:opacity .5s, transform .6s cubic-bezier(.6,0,.2,1)}
.ls-screen.is-exit .jx-cine-stage{opacity:0; transform:scale(1.06)}
.ls-content{width:min(1100px,100%); display:flex; flex-direction:column; align-items:center; gap:clamp(34px,6vh,64px); text-align:center}
.jx-cine-lines{position:relative; display:flex; flex-direction:column; align-items:center; gap:clamp(10px,2vh,22px)}
.jx-cine-lines.is-flipped{flex-direction:column-reverse}
.ls-line{margin:0; display:flex; align-items:center; justify-content:center; gap:clamp(12px,2.4vw,30px); color:rgba(238,242,246,.24);
  font-weight:700; letter-spacing:-.025em; line-height:1.04; transition:color .9s ease, text-shadow .9s ease}
.ls-line--1{font-size:clamp(2.5rem,7.4vw,6.4rem)}
.ls-line--2{font-size:clamp(1.7rem,4.6vw,4rem)}
.ls-line.is-hot{color:var(--jx-cine-hot); text-shadow:0 0 48px rgba(201,113,26,.5)}
.jx-cine-txt{position:relative; display:inline-block; animation:jx-cine-rise 1.1s cubic-bezier(.2,.8,.2,1) both}
.ls-line--1 .jx-cine-txt{animation-delay:1.3s} .ls-line--2 .jx-cine-txt{animation-delay:1.6s}
@keyframes jx-cine-rise{from{opacity:0; transform:translateY(46px); filter:blur(14px)}}
.jx-cine-txt::after{content:""; position:absolute; left:0; right:0; bottom:-.12em; height:.07em; border-radius:2px; background:linear-gradient(90deg,var(--jx-cine-hot),var(--jx-cine-cool)); transform:scaleX(0); transform-origin:left; transition:transform .9s cubic-bezier(.7,0,.2,1)}
.ls-line.is-hot .jx-cine-txt::after{transform:scaleX(1)}
.jx-cine-dash{display:block; width:clamp(26px,6vw,96px); height:3px; background:currentColor; border-radius:2px; animation:jx-cine-in 1s 1.9s both}
.jx-cine-flare{position:absolute; left:-18%; right:-18%; top:50%; height:2px; margin-top:-1px; pointer-events:none; opacity:0;
  background:linear-gradient(90deg,transparent,rgba(124,92,255,.9) 30%,#fff 50%,rgba(201,113,26,.9) 70%,transparent); filter:drop-shadow(0 0 14px rgba(124,92,255,.9))}

/* loading line (ls-rule) */
.jx-cine-load{width:min(640px,86vw); animation:jx-cine-in 1s 2s both}
.ls-rule{display:block; position:relative; height:5px; background:repeating-linear-gradient(90deg,rgba(238,242,246,.2) 0 10px,transparent 10px 18px)}
.jx-cine-fill{position:absolute; left:0; top:0; bottom:0; width:0; background:repeating-linear-gradient(90deg,var(--jx-cine-hot) 0 10px,transparent 10px 18px); filter:drop-shadow(0 0 7px rgba(201,113,26,.9))}
.jx-cine-fill::after{content:""; position:absolute; right:-3px; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:#fff; box-shadow:0 0 16px 4px rgba(201,113,26,.9)}
.jx-cine-meta{display:flex; align-items:baseline; justify-content:space-between; margin-top:16px}
.jx-cine-label{font-size:clamp(15px,1.6vw,19px); font-weight:500; opacity:.7}
.jx-cine-pct{font-size:clamp(2.2rem,5vw,4rem); font-weight:700; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.jx-cine-pct b{font-weight:500; color:var(--jx-cine-hot); font-size:.55em; margin-left:2px}

/* ready state: the line and % turn green at 100% */
.jx-cine-pct b{transition:color .4s}
.ls-screen.is-ready .jx-cine-fill{background:repeating-linear-gradient(90deg,var(--jx-cine-green) 0 10px,transparent 10px 18px); filter:drop-shadow(0 0 7px rgba(46,204,143,.9))}
.ls-screen.is-ready .jx-cine-fill::after{box-shadow:0 0 16px 4px rgba(46,204,143,.9)}
.ls-screen.is-ready .jx-cine-pct b{color:var(--jx-cine-green)}

/* exit seam */
.jx-cine-seam{position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px; opacity:0; transform:scaleX(0); pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--jx-cine-cool),#fff 50%,var(--jx-cine-hot),transparent); box-shadow:0 0 40px 10px rgba(124,92,255,.55); transition:transform .6s cubic-bezier(.6,0,.2,1), opacity .3s}
.ls-screen.is-exit .jx-cine-seam{opacity:1; transform:scaleX(1)}
.ls-screen.is-open .jx-cine-seam{opacity:0; transform:scale(1.2,14); transition:transform 1s ease-out, opacity 1s ease-out}

.ls-screen.is-quick *{animation-delay:0s!important; animation-duration:.45s!important}
@media (prefers-reduced-motion:reduce){
  .ls-screen *{animation:none!important; transition-duration:.01s!important}
  .jx-cine-grain,.jx-cine-orb{display:none}
}

/* starfield: dimmer behind the text so the lines stay readable */
.jx-cine-stars{position:absolute; inset:0; width:100%; height:100%; animation:jx-cine-starin 2.4s .3s both;
  -webkit-mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.4) 0,#000 72%); mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.4) 0,#000 72%)}
@keyframes jx-cine-starin{from{opacity:0}}

/* failsafe: if the script ever fails to load, the overlay lets go of the page on its own */
.ls-screen{animation:jx-cine-failsafe .4s 18s forwards}
@keyframes jx-cine-failsafe{to{opacity:0; visibility:hidden; pointer-events:none}}