/* Team Photo Studio — the opening screen (2026-09).
   The studio is one large page that boots entirely in the browser: fonts, the
   people saved in this browser, their masks and their thumbnails. That takes a
   moment, and the frame used to sit blank and grey meanwhile. Instead it now
   draws its own chrome as a skeleton and, on the stage, a portrait being cut
   out — the thing the module does, in the module's own colours.
   One file, used by templates/team_photos.html (the page opened on its own)
   and by the portal frame in templates/index.html, so the two never drift. */
.tps-load{
  position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;overflow:hidden;
  background:#F4F5F7;color:#9A9DA6;
  font:400 13px/1.45 'Lato',system-ui,-apple-system,'Segoe UI',sans-serif;
  opacity:1;transition:opacity .45s ease;
}
.tps-load.tps-fixed{position:fixed}
.tps-load.tps-out{opacity:0;pointer-events:none}
.tps-load i{display:block}   /* the grey blocks; the spans keep their own display */

/* ---------- top bar: the real one, greyed ---------- */
.tps-top{height:68px;flex:none;display:flex;align-items:center;gap:14px;padding:0 16px 0 18px;background:#fff;border-bottom:1px solid #E4E6EA}
.tps-mark{width:38px;height:38px;border-radius:10px;background:#fff;color:#FD0024;border:1px solid #E4E6E7;
  display:grid;place-items:center;flex:none;box-shadow:0 1px 2px rgba(7,9,22,.06),0 4px 10px -6px rgba(7,9,22,.18)}
.tps-mark svg{width:17px;height:17px;fill:currentColor;display:block}
.tps-ttl{display:flex;flex-direction:column;justify-content:center;line-height:1.15;gap:2px}
.tps-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#B4B7BF}
.tps-name{font-weight:900;font-size:21px;letter-spacing:-.01em;color:#070916}
.tps-seg{display:flex;gap:3px;background:#F4F5F7;border:1px solid #E4E6EA;border-radius:10px;padding:3px}
.tps-seg i{width:54px;height:24px;border-radius:7px;background:#E7E9ED}
.tps-seg i:first-child{background:#fff;box-shadow:0 1px 2px rgba(7,9,22,.10)}
.tps-top-r{margin-left:auto;display:flex;align-items:center;gap:8px}
.tps-pill{height:36px;border-radius:10px;background:#EDEFF2;border:1px solid #E7E9ED}
.tps-pill.w1{width:96px}.tps-pill.w2{width:110px}
.tps-pill.red{width:104px;background:#FBD8DD;border-color:#FBD8DD}

/* ---------- three columns, like the studio ---------- */
.tps-body{flex:1;min-height:0;display:grid;grid-template-columns:252px minmax(0,1fr) 344px}
.tps-rail,.tps-insp{background:#fff;min-height:0;overflow:hidden}
.tps-rail{border-right:1px solid #E4E6EA;padding:14px 12px}
.tps-insp{border-left:1px solid #E4E6EA;padding:16px 16px}
.tps-lbl{height:9px;width:74px;border-radius:5px;background:#E7E9ED;margin:0 4px 14px}
.tps-row{display:flex;align-items:center;gap:10px;padding:7px 6px}
.tps-av{width:34px;height:34px;border-radius:9px;background:#EDEFF2;flex:none}
.tps-lines{flex:1;display:flex;flex-direction:column;gap:6px}
.tps-lines i{height:8px;border-radius:4px;background:#EDEFF2}
.tps-lines i:first-child{width:62%}
.tps-lines i:last-child{width:42%;background:#F1F2F5}
.tps-sw{display:grid;grid-template-columns:repeat(7,1fr);gap:9px;margin:0 0 18px}
.tps-sw i{aspect-ratio:1;border-radius:50%;background:#EDEFF2}
.tps-sl{margin:0 0 16px}
.tps-sl i{height:4px;border-radius:2px;background:#E9EBEF}
.tps-sl i:first-child{height:8px;width:88px;border-radius:4px;background:#EDEFF2;margin-bottom:10px}

/* the shimmer that runs over every grey block, very faint */
.tps-lbl,.tps-av,.tps-lines i,.tps-sw i,.tps-sl i,.tps-seg i,.tps-pill{
  background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.85) 50%,transparent 70%);
  background-size:220% 100%;background-repeat:no-repeat;animation:tps-sheen 2.6s ease-in-out infinite}
.tps-row:nth-child(3) .tps-av,.tps-row:nth-child(3) .tps-lines i{animation-delay:.12s}
.tps-row:nth-child(4) .tps-av,.tps-row:nth-child(4) .tps-lines i{animation-delay:.24s}
.tps-row:nth-child(5) .tps-av,.tps-row:nth-child(5) .tps-lines i{animation-delay:.36s}
.tps-sl:nth-of-type(2) i{animation-delay:.18s}
@keyframes tps-sheen{0%{background-position:150% 0}55%,100%{background-position:-50% 0}}

/* ---------- the stage: a portrait being cut out ---------- */
.tps-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  background:#E9ECF0;padding:24px;min-height:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(7,9,22,.055) 1px, transparent 0);background-size:16px 16px}
.tps-card{position:relative;width:min(300px,46vh);aspect-ratio:4/5;border-radius:6px;overflow:hidden;
  background:#FFEE99;box-shadow:0 1px 2px rgba(7,9,22,.06),0 24px 48px -26px rgba(7,9,22,.45);
  animation:tps-ground 13.8s ease-in-out infinite}
/* three team colours, one per pass of the cut line: the ground only changes
   while the card is empty (13.8s = 3 x the 4.6s below) */
@keyframes tps-ground{
  0%,28%{background:#FFEE99}
  33.4%,61.6%{background:#CFE6F7}
  66.7%,95%{background:#D8EEDF}
  100%{background:#FFEE99}
}
.tps-fig{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the silhouette: the portrait that appears once the line has gone round it */
.tps-sil{fill:url(#tps-skin);opacity:0;animation:tps-fill 4.6s ease-in-out infinite}
/* the sticker edge the studio draws, and over it the cut line being traced */
.tps-edge{fill:none;stroke:#fff;stroke-width:13;stroke-linejoin:round;opacity:0;animation:tps-fill 4.6s ease-in-out infinite}
.tps-cut{fill:none;stroke:rgba(7,9,22,.55);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  --tps-len:1180;   /* the real path length, measured once by tps_loader.js */
  animation:tps-trace 4.6s cubic-bezier(.4,.02,.2,1) infinite}
@keyframes tps-trace{
  0%{stroke-dasharray:0 var(--tps-len);opacity:0}
  5%{opacity:1}
  50%,64%{stroke-dasharray:var(--tps-len) 0;opacity:1}
  80%,100%{stroke-dasharray:var(--tps-len) 0;opacity:0}
}
@keyframes tps-fill{0%,42%{opacity:0}62%,88%{opacity:1}100%{opacity:0}}
/* one slow pass of light over the card */
.tps-sweep{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(104deg,transparent 38%,rgba(255,255,255,.55) 50%,transparent 62%);
  background-size:260% 100%;background-repeat:no-repeat;animation:tps-sheen 4.6s ease-in-out infinite}

/* ---------- caption ---------- */
.tps-cap{margin-top:22px;display:flex;align-items:center;gap:7px;color:#6E717A;font-weight:700;font-size:13px}
.tps-cap b{font-weight:700}
.tps-dots{display:flex;gap:3px;align-items:flex-end;padding-bottom:3px}
.tps-dots i{width:3px;height:3px;border-radius:50%;background:#A7AAB3;animation:tps-dot 1.4s ease-in-out infinite}
.tps-dots i:nth-child(2){animation-delay:.16s}
.tps-dots i:nth-child(3){animation-delay:.32s}
@keyframes tps-dot{0%,100%{opacity:.25;transform:translateY(0)}45%{opacity:1;transform:translateY(-2px)}}
.tps-sub{margin-top:7px;font-size:12px;color:#A0A3AC}
.tps-bar{margin-top:14px;width:132px;height:3px;border-radius:2px;background:#DCDFE5;overflow:hidden}
.tps-bar i{width:38%;height:100%;border-radius:2px;background:#FD0024;opacity:.85;animation:tps-slide 1.8s ease-in-out infinite}
@keyframes tps-slide{0%{transform:translateX(-105%)}100%{transform:translateX(275%)}}

/* ---------- narrow frames ----------
   Measured on the screen itself, not the window: in the portal it sits in a
   frame the sidebar has already narrowed. The steps follow the studio's own
   (1180px, then 980px, where the rail moves above the stage). */
.tps-load{container-type:inline-size}
@container (max-width:1180px){
  .tps-body{grid-template-columns:220px minmax(0,1fr) 310px}
}
@container (max-width:980px){
  .tps-body{grid-template-columns:minmax(0,1fr)}
  .tps-rail,.tps-insp{display:none}
  .tps-pill.w1,.tps-pill.w2{display:none}
}
@container (max-width:620px){
  .tps-name{font-size:18px}
  .tps-seg{display:none}
}

/* ---------- the quiet version ---------- */
@media (prefers-reduced-motion:reduce){
  .tps-load *{animation:none!important}
  .tps-sil,.tps-edge{opacity:1}
  .tps-cut{stroke-dasharray:none;opacity:.9}
  .tps-sweep{display:none}
  .tps-bar i{width:100%;opacity:.35}
}