/* 1. Court lines draw in */
.loader-lines{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:4vh 0 8vh;overflow:visible;
  background:radial-gradient(ellipse 90% 70% at 50% 42%,#151a33 0%,#0d1020 46%,#0b0c10 100%)
}
.loader-lines.is-done{transform:scale(1.03);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.field{position:relative;width:min(78vw,640px);height:min(70vh,680px);flex:0 0 auto}
.court-persp{width:100%;height:100%;perspective:1200px;display:grid;place-items:center}
.court{width:min(100%,560px);height:100%;transform:rotateX(58deg) scale(1.08);transform-origin:center 58%;will-change:transform}
.turf{fill:#173524;opacity:0}
.loader-lines.is-running .turf{animation:turfIn .8s var(--ease) .35s forwards}
@keyframes turfIn{to{opacity:.72}}
.line{fill:none;stroke:#f4f4ef;stroke-width:1.3;stroke-linejoin:miter;stroke-linecap:square;stroke-dasharray:1;stroke-dashoffset:1}
.line.net{stroke:var(--yellow);stroke-width:1.7}
.loader-lines.is-running .line.outer{animation:draw 1.05s var(--ease) .05s forwards}
.loader-lines.is-running .line.svc{animation:draw .7s var(--ease) .55s forwards}
.loader-lines.is-running .line.mid{animation:draw .55s var(--ease) .95s forwards}
.loader-lines.is-running .line.net{animation:draw .4s var(--ease) 1.2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.mark{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) scale(.88);opacity:0;width:min(40vw,230px);z-index:2;will-change:opacity,transform;pointer-events:none}
.loader-lines.is-running .mark{animation:lock .65s var(--ease) 1.4s forwards}
@keyframes lock{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
 .mark img{width:100%;height:auto}
.pct-row{width:min(64vw,380px);display:flex;align-items:center;gap:14px;z-index:3;margin-top:6px;flex:0 0 auto}
.pct-row .rule{flex:1;height:1px;background:rgba(244,244,239,.2);overflow:hidden}
.pct-row .rule>i{display:block;height:100%;width:100%;background:var(--yellow);transform:scaleX(0);transform-origin:left;will-change:transform}
.loader-lines.is-running .pct-row .rule>i{transform:scaleX(var(--p,0))}
.pct-row [data-pct]{font:800 italic clamp(22px,3.2vw,34px)/1 var(--display);color:var(--yellow);letter-spacing:.08em;min-width:4.2ch;text-align:right}

@media (orientation:landscape) and (max-height:500px){
  .loader-lines{padding:3vh 0 6vh;justify-content:flex-end}
  .field{width:min(50vw,520px);height:min(68vh,360px)}
  .court{transform:rotateX(50deg) scale(1)}
  .mark{width:min(22vw,160px);top:50%}
  .pct-row{margin-top:4px}
}
@media (max-width:600px){
  .loader-lines{padding:6vh 0 10vh}
  .field{width:min(88vw,420px);height:min(56vh,560px)}
  .mark{width:min(52vw,210px);top:50%}
  .pct-row{width:min(78vw,340px);margin-top:8px}
}
@media (prefers-reduced-motion:reduce){
  .loader-lines.is-running .line{stroke-dashoffset:0;animation:none}
  .loader-lines.is-running .mark,.loader-lines.is-reduced .mark{opacity:1;transform:translate(-50%,-50%) scale(1);animation:none}
  .loader-lines.is-running .turf{opacity:.72;animation:none}
}