/* =====================================================================
 * About: one team on the road from first call to support
 * (template-parts/stages/team.php). Loaded on that page only.
 *
 * .tm-floor is the ground, 640 by 700, tilted back 56 degrees: x runs
 * across, y from the back (0) to the front (700), translateZ is height.
 * The road is drawn twice, a dark base on the floor and a lit top 7px
 * above it, so it reads as a raised road. Platforms are four stacked
 * discs. Labels, chips and the walkers undo the tilt (.tm-bb) so they
 * stand up and face the visitor. The three walkers follow the road with
 * offset-path; the stops (--g1..--g4) and the fill line (--d1..--d4) come
 * from team.php, and each walker trails the lead by its own --lag.
 * Never put opacity, filter or overflow on a box that holds 3D children.
 * ===================================================================== */
.stage-team .stage-3d{width:620px;height:520px}
.tm-floor{--fz:0deg;position:absolute;left:-10px;top:-90px;width:640px;height:700px;transform-style:preserve-3d;transform:rotateX(56deg) rotateZ(var(--fz));animation:tm-rise 1.2s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes tm-rise{from{transform:translate3d(0,40px,-120px) rotateX(56deg) rotateZ(var(--fz))}}
.tm-floor i{display:block;font-style:normal}
@keyframes tm-in{from{opacity:0}}

/* ---------- Ground and road ---------- */
.tm-grid{position:absolute;inset:-40px;background-image:linear-gradient(rgba(140,180,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(140,180,255,.13) 1px,transparent 1px);background-size:40px 40px;
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent);mask-image:radial-gradient(closest-side,#000 30%,transparent);animation:tm-in 1s ease-out backwards}
.tm-svg{position:absolute;left:0;top:0;width:640px;height:700px;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round;animation:tm-in .9s ease-out .15s backwards}
.tm-lane{transform:translateZ(1px)}
.tm-lane path{stroke:rgba(160,180,220,.32);stroke-width:2;stroke-dasharray:7 10}
.tm-base path{stroke:#070C17;stroke-width:46}
.tm-top{transform:translateZ(7px)}
.tm-top .e{stroke:rgba(90,160,255,.5);stroke-width:42}
.tm-top .s{stroke:#101A2D;stroke-width:38}
.tm-top .c{stroke:rgba(234,241,255,.2);stroke-width:1.5;stroke-dasharray:10 12}
/* The line that fills in behind the team. */
.tm-top .pr{stroke:#7DB7FF;stroke-width:5;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 5px rgba(90,160,255,.9))}
.js .tm-top .pr:not(.on){stroke-dashoffset:1}
.tm-top .pr.on{animation:tm-fill 6800ms linear both}

/* ---------- Platforms ---------- */
.tm-pad{position:absolute;width:72px;height:72px;transform-style:preserve-3d;pointer-events:auto}
.tm-pad>i{position:absolute;inset:0;border-radius:50%;animation:tm-in .8s ease-out .3s backwards;transition:background .45s,border-color .45s,box-shadow .45s,opacity .35s}
.tm-pad .d0{transform:translateZ(8px);background:#0A1222;border:1px solid rgba(90,160,255,.4)}
.tm-pad .d1{transform:translateZ(11px);background:#0C1527;border:1px solid rgba(90,160,255,.45)}
.tm-pad .d2{transform:translateZ(14px);background:#0E182C;border:1px solid rgba(90,160,255,.5)}
.tm-pad .d3{transform:translateZ(17px);border:1.5px solid #5AA0FF;background:radial-gradient(circle at 50% 42%,#3D6FC4,#18305E 62%,#0F1D3A);box-shadow:0 0 26px rgba(90,160,255,.65),inset 0 0 16px rgba(160,205,255,.4)}
.tm-pad .d3::after{content:"";position:absolute;inset:26%;border-radius:50%;border:1.5px solid rgba(220,236,255,.75)}
.tm-pad .tm-glow{inset:-46px;transform:translateZ(2px);background:radial-gradient(closest-side,rgba(90,160,255,.45),rgba(90,160,255,.1) 60%,transparent)}
.tm-pad .tm-ring{inset:-4px;transform:translateZ(17px);border:2px solid #9CCBFF;opacity:0}
.tm-pad.on .tm-ring{animation:tm-ripple 1.3s cubic-bezier(.2,.7,.2,1) both}
@keyframes tm-ripple{from{opacity:1;transform:translateZ(17px) scale(.7)}to{opacity:0;transform:translateZ(17px) scale(2.4)}}
/* Not reached yet: dark, with a faint rim. */
.js .tm-pad:not(.on) .d3{border-color:rgba(90,160,255,.45);background:radial-gradient(circle at 50% 42%,#1A2A47,#0F182B 70%);box-shadow:inset 0 0 12px rgba(90,160,255,.18)}
.js .tm-pad:not(.on) .d3::after{border-color:rgba(160,190,240,.28)}
.js .tm-pad:not(.on) .tm-glow{opacity:0}
.tm-pad.hot .d3{border-color:#fff;box-shadow:0 0 34px rgba(150,200,255,.9),inset 0 0 18px rgba(200,225,255,.5)}

/* ---------- Standing up: labels, chips, the team ---------- */
.tm-bb{position:absolute;left:0;top:0;width:0;height:0;transform-origin:0 0;transform:translate3d(var(--bx),var(--by),var(--bz,18px)) rotateZ(calc(-1 * var(--fz))) rotateX(-56deg)}
.tm-tag{pointer-events:auto}
.tm-tc{position:absolute;right:32px;top:14px;width:156px;padding:9px 11px 10px;border-radius:11px;
  background:linear-gradient(180deg,rgba(22,30,48,.93),rgba(11,15,25,.95));border:1px solid rgba(140,180,255,.16);
  box-shadow:0 24px 40px -24px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.07);color:#EAF1FF;font:500 12px/1.3 var(--f-body);
  animation:tm-in .7s ease-out .5s backwards;transition:border-color .3s,background .3s,opacity .3s}
.tm-tk{display:flex;align-items:center;gap:7px;font:500 9.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#8FBEFF;white-space:nowrap}
.tm-tk em{font-style:normal;color:rgba(234,241,255,.38)}
.tm-sw{display:grid;margin-top:6px}
.tm-sw>*{grid-area:1/1;min-width:0;transition:opacity .3s,transform .35s,max-height .35s}
.tm-st{display:flex;align-items:center;gap:6px;font:600 12.5px/1.25 var(--f-body);color:#fff;white-space:nowrap}
.tm-st::after{content:"";flex:none;width:14px;height:14px;margin-left:auto;border-radius:50%;background:#1F9D63 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center/9px;transition:opacity .3s}
.js .tm-tag:not(.on) .tm-st{color:rgba(234,241,255,.6)}
.js .tm-tag:not(.on) .tm-st::after{opacity:0}
.tm-ds{font-size:11.5px;line-height:1.3;color:rgba(234,241,255,.9);opacity:0;transform:translateY(4px);max-height:15px;overflow:hidden}
.tm-tag.hot .tm-tc{border-color:rgba(90,160,255,.6);background:linear-gradient(180deg,rgba(28,38,60,.97),rgba(13,18,30,.97))}
.tm-tag.hot .tm-st{opacity:0;transform:translateY(-4px)}
.tm-tag.hot .tm-ds{opacity:1;transform:none;max-height:32px}
.stage-3d.hovering .tm-tag:not(.hot) .tm-tc{opacity:.45}

/* The usual way: the same steps, each one a hand to another stranger. */
.tm-x span{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:99px;white-space:nowrap;
  font:500 11px/1 var(--f-body);color:rgba(234,241,255,.5);background:rgba(10,14,24,.88);border:1px dashed rgba(160,180,220,.3);transition:color .4s,border-color .4s,background .4s}
.tm-x i{width:13px;height:13px;border-radius:50%;flex:none;background:rgba(255,74,79,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A8D' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") no-repeat center/8px;opacity:0;transition:opacity .4s}
.tm-x s{text-decoration:none;position:relative}
.tm-x s::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:1.5px;margin-top:-.75px;background:#FF6B70;transform-origin:0 50%;transform:scaleX(0);transition:transform .5s cubic-bezier(.6,0,.2,1)}
.tm-x.on span{color:rgba(255,170,172,.75);border-color:rgba(255,74,79,.35);background:rgba(30,10,14,.85)}
.tm-x.on i{opacity:1}
.tm-x.on s::after{transform:none}
html:not(.js) .tm-x s::after{transform:none}
.tm-usual span{position:absolute;left:0;top:0;transform:translate(-50%,-50%);font:500 9.5px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(170,190,225,.5);white-space:nowrap}

/* The team: three people, by role only, walking the road in single file.
   Each walker is one chip standing on the road; the lead sets the pace and
   the other two follow --lag behind along the same path. */
.tm-walker{position:absolute;left:0;top:0;offset-anchor:50% 100%;offset-rotate:0deg;offset-distance:calc(100% - var(--lag));transform-origin:50% 100%;transform:translateZ(12px) rotateZ(calc(-1 * var(--fz))) rotateX(-56deg);pointer-events:none}
.js .tm-walker:not(.on){opacity:0}
.tm-walker.on{animation:tm-walk 6800ms linear both}
.tm-who{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:99px;white-space:nowrap;background:rgba(9,14,26,.94);
  border:1px solid rgba(var(--rc),.6);box-shadow:0 12px 20px -10px rgba(0,0,0,.95),0 0 16px -4px rgba(var(--rc),.6);--rc:90,160,255}
.tm-who.r2{--rc:165,139,255}
.tm-who.r3{--rc:62,213,152}
.tm-who b{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;background:rgba(var(--rc),.28);box-shadow:inset 0 0 0 1.5px rgba(var(--rc),1)}
.tm-who svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
.tm-who small{font:600 10px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:#fff}

/* Support is where the road ends and the team is still there: it lights green. */
.tm-pad[data-m="m5"].on .d3{border-color:#3ED598;background:radial-gradient(circle at 50% 42%,#2E8F68,#145039 62%,#0C2C21);box-shadow:0 0 30px rgba(62,213,152,.7),inset 0 0 16px rgba(180,255,220,.35)}
.tm-pad[data-m="m5"] .tm-glow{background:radial-gradient(closest-side,rgba(62,213,152,.45),rgba(62,213,152,.1) 60%,transparent)}
.tm-tag[data-m="m5"].on .tm-tc{border-color:rgba(62,213,152,.55);background:linear-gradient(180deg,rgba(16,38,30,.95),rgba(9,20,16,.96))}
.tm-tag[data-m="m5"] .tm-tk{color:#6EE7B7}

/* ---------- Replay ---------- */
.tm-run{position:absolute;right:18px;top:20px;transform:translateZ(60px);pointer-events:auto;cursor:pointer;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:99px;
  font:600 12px/1 var(--f-body);color:#EAF1FF;background:rgba(14,20,34,.9);border:1px solid rgba(140,180,255,.28);box-shadow:0 14px 28px -16px rgba(0,0,0,.9);transition:border-color .25s,background .25s}
.tm-run:hover{border-color:rgba(140,180,255,.65);background:rgba(24,34,56,.95)}
.tm-run i{width:13px;height:13px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CC4FF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 1 0-2.3 5.7'/%3E%3Cpath d='M20 4v7h-7'/%3E%3C/svg%3E") no-repeat center/contain}

/* ---------- The walk ----------
   Start 300 ms; the lead is on platform 1 at 500 and leaves at 1500;
   platform 2 at 2300, leaves 3100; 3 at 3900, leaves 4700; 4 at 5500,
   leaves 6300; 5 at 7100. The percentages are of the 6800 ms walk. */
@keyframes tm-walk{
  0%{offset-distance:calc(var(--g1) - var(--lag));opacity:0}
  2.94%{offset-distance:calc(var(--g1) - var(--lag));opacity:1}
  17.65%{offset-distance:calc(var(--g1) - var(--lag));opacity:1;animation-timing-function:cubic-bezier(.45,0,.3,1)}
  29.41%{offset-distance:calc(var(--g2) - var(--lag));animation-timing-function:linear}
  41.18%{offset-distance:calc(var(--g2) - var(--lag));animation-timing-function:cubic-bezier(.45,0,.3,1)}
  52.94%{offset-distance:calc(var(--g3) - var(--lag));animation-timing-function:linear}
  64.71%{offset-distance:calc(var(--g3) - var(--lag));animation-timing-function:cubic-bezier(.45,0,.3,1)}
  76.47%{offset-distance:calc(var(--g4) - var(--lag));animation-timing-function:linear}
  88.24%{offset-distance:calc(var(--g4) - var(--lag));animation-timing-function:cubic-bezier(.45,0,.3,1)}
  100%{offset-distance:calc(100% - var(--lag));opacity:1}
}
@keyframes tm-fill{
  0%,17.65%{stroke-dashoffset:var(--d1);animation-timing-function:cubic-bezier(.45,0,.3,1)}
  29.41%{stroke-dashoffset:var(--d2);animation-timing-function:linear}
  41.18%{stroke-dashoffset:var(--d2);animation-timing-function:cubic-bezier(.45,0,.3,1)}
  52.94%{stroke-dashoffset:var(--d3);animation-timing-function:linear}
  64.71%{stroke-dashoffset:var(--d3);animation-timing-function:cubic-bezier(.45,0,.3,1)}
  76.47%{stroke-dashoffset:var(--d4);animation-timing-function:linear}
  88.24%{stroke-dashoffset:var(--d4);animation-timing-function:cubic-bezier(.45,0,.3,1)}
  100%{stroke-dashoffset:0}
}

/* ---------- Tablets and phones ----------
   Under 600px the floor turns 24 degrees about its own up axis, so the road
   runs more front to back: labels stack on the left, the usual way on the
   right, and the whole scene is narrow enough to show larger, with larger
   type. Labels and walkers undo the turn (--fz), so they still face front. */
@media (max-width:899px){
  .stage-team .stage-3d{scale:.72}
}
@media (max-width:599px){
  .stage-team .stage-3d{scale:var(--tms,.72)}
  .tm-floor{--fz:24deg;left:30px;top:-112px}
  .tm-tc{width:164px;right:60px;top:0;transform:translateY(-50%)}
  .tm-tk{font-size:11px}
  .tm-st{font-size:13.5px}
  .tm-x span{font-size:13px}
  .tm-usual span{font-size:11px}
  .tm-who{gap:5px;padding-right:8px}
  .tm-who small{font-size:10.5px;letter-spacing:.03em}
  .tm-run{right:64px;top:auto;bottom:40px}
}
@media (max-width:380px){
  .stage-team .stage-3d{--tms:.65}
}
@media (max-width:340px){
  .stage-team .stage-3d{--tms:.56}
}

@media (prefers-reduced-motion:reduce){
  .tm-floor,.tm-grid,.tm-svg,.tm-pad>i,.tm-tc,.tm-ring{animation:none}
  .tm-walker,.tm-walker.on{animation:none;opacity:1;offset-distance:calc(100% - var(--lag))}
  .tm-top .pr,.tm-top .pr.on{animation:none;stroke-dashoffset:0}
  .tm-x s::after,.tm-sw>*{transition:none}
}