/* Squad preloader for the -v2 service pages (from squad-preloading-all.html). */
/* Layout: one centred column (emblem, name, role, progress) on a dark field; four corner labels frame it.
   Accent + avatar plate colours are set per squad from the script. */
#ta-preload{
  --tap-bg:#0B0C0D; --tap-bg2:#17191B;
  --tap-accent:#FF6A3D; --tap-accent-rgb:255,106,61;
  --tap-plate1:#1E5257; --tap-plate2:#0F2427;
  --tap-teal:#2BC4CF; --tap-white:#F3EFEA; --tap-mute:#7F8B8D;
  --tap-sans:"Sora","Avenir Next","Segoe UI",system-ui,sans-serif;
  --tap-mono:"JetBrains Mono","SFMono-Regular",Menlo,Consolas,monospace;
  --tap-s:clamp(150px,27vmin,250px);
  --r:0px; --cx:50%; --cy:50%;
  position:fixed;inset:0;z-index:99999;overflow:hidden;
  display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 42%,var(--tap-bg2) 0%,var(--tap-bg) 58%,#060707 100%);
  color:var(--tap-white);font-family:var(--tap-sans);
  -webkit-font-smoothing:antialiased;
}
#ta-preload[hidden]{display:none}
#ta-preload *{box-sizing:border-box;margin:0}
#ta-preload.tap-exiting{
  -webkit-mask-image:radial-gradient(circle at var(--cx) var(--cy),transparent var(--r),#000 calc(var(--r) + .5px));
          mask-image:radial-gradient(circle at var(--cx) var(--cy),transparent var(--r),#000 calc(var(--r) + .5px));
}
html.tap-lock,html.tap-lock body{overflow:hidden}

/* background layers */
#ta-preload .tap-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#ta-preload .tap-grid{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(rgba(243,239,234,.075) 1px,transparent 1.4px) 0 0/28px 28px;
  -webkit-mask-image:radial-gradient(circle at 50% 44%,#000 0,transparent 62%);
          mask-image:radial-gradient(circle at 50% 44%,#000 0,transparent 62%)}
#ta-preload .tap-grain{position:absolute;inset:-50%;pointer-events:none;opacity:.06;animation:tap-grain .6s steps(4) infinite}
@keyframes tap-grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}

/* corner labels */
#ta-preload .tap-meta{position:absolute;font:500 10.5px/1 var(--tap-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--tap-mute);opacity:0;display:flex;align-items:center;gap:10px;white-space:nowrap}
#ta-preload .tap-meta.tl{top:calc(22px + env(safe-area-inset-top,0px));left:calc(24px + env(safe-area-inset-left,0px));color:var(--tap-white)}
#ta-preload .tap-meta.tl::before{content:"";width:7px;height:7px;background:var(--tap-accent);box-shadow:0 0 10px var(--tap-accent)}
#ta-preload .tap-meta.tr{top:calc(22px + env(safe-area-inset-top,0px));right:calc(24px + env(safe-area-inset-right,0px))}
#ta-preload .tap-meta.bl{bottom:calc(22px + env(safe-area-inset-bottom,0px));left:calc(24px + env(safe-area-inset-left,0px))}
#ta-preload .tap-meta.br{bottom:calc(22px + env(safe-area-inset-bottom,0px));right:calc(24px + env(safe-area-inset-right,0px));text-transform:none;letter-spacing:.12em}

/* centre column */
#ta-preload .tap-core{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding-inline:16px;
  /* push the column down so the rings + text sit as one block in the middle of the screen */
  margin-top:calc(var(--tap-s) * .66)}
#ta-preload .tap-emblem{position:relative;width:var(--tap-s);height:var(--tap-s);margin-bottom:clamp(22px,4.2vmin,40px)}
#ta-preload .tap-hud{position:absolute;left:50%;top:50%;width:230%;height:230%;margin:-115% 0 0 -115%;opacity:0;pointer-events:none;overflow:visible}
#ta-preload .tap-hud .tap-rot1{transform-box:fill-box;transform-origin:center;animation:tap-spin 60s linear infinite}
#ta-preload .tap-hud .tap-rot2{transform-box:fill-box;transform-origin:center;animation:tap-spin 90s linear infinite reverse}
#ta-preload .tap-dial{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#ta-preload .tap-dial .tap-ticks{transform-box:view-box;transform-origin:center;animation:tap-spin 40s linear infinite}
#ta-preload .tap-dial line{opacity:0}
#ta-preload .tap-dial .tap-track{opacity:0}
#ta-preload .tap-avatar{position:absolute;left:20%;top:20%;width:60%;height:60%;border-radius:50%;overflow:hidden;opacity:0;
  background:radial-gradient(circle at 50% 38%,var(--tap-plate1) 0%,var(--tap-plate2) 62%,#0A0B0B 100%);
  box-shadow:0 0 0 1px rgba(43,196,207,.25),0 18px 50px -12px rgba(0,0,0,.8)}
#ta-preload .tap-avatar img{display:block;width:100%;height:100%;object-fit:cover}
#ta-preload .tap-scan{position:absolute;left:0;right:0;top:0;height:28%;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(43,196,207,.55) 70%,rgba(243,239,234,.9) 72%,transparent 74%)}
#ta-preload .tap-orbit{position:absolute;left:14%;top:14%;width:72%;height:72%;opacity:0;animation:tap-spin 1.6s linear infinite}
#ta-preload .tap-orbit i{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 62%,rgba(var(--tap-accent-rgb),.05) 66%,rgba(var(--tap-accent-rgb),.9) 98%,#fff 100%);
  -webkit-mask-image:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));
          mask-image:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px))}
#ta-preload .tap-orbit b{position:absolute;left:50%;top:0;width:6px;height:6px;margin:-2px 0 0 -3px;border-radius:50%;background:#fff;
  box-shadow:0 0 6px 2px var(--tap-accent),0 0 18px 4px rgba(var(--tap-accent-rgb),.6)}
#ta-preload .tap-wave{position:absolute;left:14%;top:14%;width:72%;height:72%;border-radius:50%;border:1.5px solid var(--tap-accent);opacity:0;pointer-events:none}
#ta-preload .tap-spark{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff;opacity:0;
  box-shadow:0 0 12px 4px var(--tap-accent),0 0 40px 10px rgba(var(--tap-accent-rgb),.5)}
#ta-preload .tap-flare{position:absolute;left:50%;top:50%;width:320%;height:1px;margin:0 0 0 -160%;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(43,196,207,.6) 30%,#fff 50%,rgba(43,196,207,.6) 70%,transparent)}

#ta-preload .tap-name{display:flex;justify-content:center;font:700 clamp(22px,3.7vmin,36px)/1 var(--tap-sans);letter-spacing:.24em;padding-left:.24em;color:var(--tap-accent);
  text-shadow:0 0 18px rgba(var(--tap-accent-rgb),.45);opacity:0}
#ta-preload .tap-name span{display:inline-block;text-align:center;opacity:0}
#ta-preload .tap-name span.tap-g{color:var(--tap-teal);text-shadow:0 0 12px rgba(43,196,207,.6)}
#ta-preload .tap-role{margin-top:clamp(10px,1.6vmin,14px);font:600 clamp(11px,1.6vmin,13px)/1 var(--tap-sans);letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;color:rgba(243,239,234,.82);opacity:0}

#ta-preload .tap-power{margin-top:clamp(12px,2vmin,18px);max-width:min(440px,84vw);font:400 clamp(13px,1.8vmin,15px)/1.45 var(--tap-sans);color:rgba(243,239,234,.62);text-wrap:balance;opacity:0}
#ta-preload .tap-power:empty{display:none}
#ta-preload .tap-power::before,#ta-preload .tap-power::after{color:var(--tap-accent);font-weight:600}
#ta-preload .tap-power::before{content:"\201C"}
#ta-preload .tap-power::after{content:"\201D"}
#ta-preload .tap-status{width:min(300px,72vw);margin-top:clamp(24px,4.2vmin,38px);opacity:0}
#ta-preload .tap-bar{position:relative;height:1px;background:rgba(243,239,234,.12)}
#ta-preload .tap-bar i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,rgba(43,196,207,.7),var(--tap-accent))}
#ta-preload .tap-bar b{position:absolute;top:-2px;left:0;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px var(--tap-accent)}
#ta-preload .tap-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:12px;font:500 11px/1.2 var(--tap-mono);letter-spacing:.06em}
#ta-preload .tap-msg{color:var(--tap-mute);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#ta-preload .tap-pct{color:var(--tap-white);font-variant-numeric:tabular-nums;flex:none}
#ta-preload .tap-pct small{font-size:inherit;color:var(--tap-mute);margin-left:2px}
#ta-preload .tap-pct.tap-done{color:var(--tap-accent)}

#ta-preload .tap-iris{position:absolute;left:0;top:0;border-radius:50%;border:1.5px solid var(--tap-accent);opacity:0;pointer-events:none;z-index:3;
  box-shadow:0 0 26px 6px rgba(var(--tap-accent-rgb),.45),0 0 90px 18px rgba(43,196,207,.14)}

@keyframes tap-spin{to{transform:rotate(360deg)}}

/* reduced motion: show the finished frame, no choreography */
#ta-preload.tap-static .tap-grid,#ta-preload.tap-static .tap-meta,#ta-preload.tap-static .tap-hud,#ta-preload.tap-static .tap-avatar,
#ta-preload.tap-static .tap-orbit,#ta-preload.tap-static .tap-name,#ta-preload.tap-static .tap-name span,#ta-preload.tap-static .tap-role,
#ta-preload.tap-static .tap-status,#ta-preload.tap-static .tap-power,#ta-preload.tap-static .tap-dial .tap-track{opacity:1}
#ta-preload.tap-static .tap-dial line{opacity:.35}
@media (prefers-reduced-motion:reduce){#ta-preload *{animation:none!important}}
@media (max-width:520px){#ta-preload .tap-meta.tr,#ta-preload .tap-meta.br{display:none}}