/* =====================================================================
 * Tailorline stage (template-parts/stages/tailorline.php)
 *
 * A production board leaning back against a wall: .tb-bd is one preserve-3d
 * group (the face, a bottom edge and a right edge, rotateX 16deg about its
 * bottom). Job cards sit on the face in a 5 x 3 grid of slots
 * (translate: column * 108px, row * 64px); the moving ones lift off the board
 * (translateZ) while they change column, and their shadow stays on the board.
 *
 * "Before" looks apply only while the story plays (.js .stage-3d[data-on]),
 * so without script and with reduced motion the board shows the end.
 * ===================================================================== */
/* Phones: the measurement card reaches furthest left, so centre on the content. */
@media (max-width:899px){.stage-tailorline .stage-3d{translate:8px 0}}
.stage-tailorline .g-kandura{--gc:#5AA0FF}
.stage-tailorline .g-abaya{--gc:#B9A6FF}
.stage-tailorline .g-suit{--gc:#3ED598}

/* ---------- The wall: a spotlight, and the board's shadow on it ---------- */
.tb-wall{position:absolute;left:-50px;top:30px;width:720px;height:470px;transform:translateZ(-140px);pointer-events:none;
  background:radial-gradient(40% 36% at 56% 60%,rgba(0,0,0,.6),transparent 72%),radial-gradient(52% 58% at 50% 42%,rgba(47,125,246,.28),rgba(47,125,246,.08) 55%,transparent 76%)}

/* ---------- The board ---------- */
.tb-bd{position:absolute;left:30px;top:106px;width:560px;height:290px;transform-style:preserve-3d;transform-origin:50% 100%;transform:rotateY(-7deg) rotateX(16deg);animation:tb-rise 1.2s var(--ease) both}
@keyframes tb-rise{from{translate:0 64px}}
.tb-face{position:absolute;inset:0;transform-style:preserve-3d;border-radius:7px;color:#EAF1FF;font-family:var(--f-body);
  background:linear-gradient(180deg,#152035,#0C1322 70%,#0A101C);
  box-shadow:inset 0 0 0 1px rgba(160,195,255,.26),inset 0 1px 0 rgba(255,255,255,.14),0 0 90px -34px rgba(47,125,246,.7)}
.tb-face::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.06),transparent 34%)}
.tb-eb{position:absolute;left:0;top:100%;width:100%;height:22px;transform-origin:50% 0;transform:rotateX(-90deg);background:linear-gradient(90deg,#222D44,#3A4966 50%,#222D44)}
.tb-er{position:absolute;left:100%;top:0;width:22px;height:100%;transform-origin:0 50%;transform:rotateY(90deg);background:linear-gradient(180deg,#3A4A70,#1C2639)}

.tb-bh{position:relative;display:flex;align-items:center;gap:9px;height:44px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.tb-logo{flex:none;width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,#2F7DF6,#8FC0FF);box-shadow:0 0 14px -2px rgba(47,125,246,.8)}
.tb-bh b{font:600 14px var(--f-disp);letter-spacing:-.01em;color:#fff}
.tb-bh small{font-size:11.5px;color:rgba(234,241,255,.5)}
.tb-bh em{margin-left:auto;font:500 10px/1 var(--f-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:rgba(234,241,255,.58);padding:5px 9px;border-radius:99px;background:rgba(255,255,255,.05)}

.tb-cols{position:absolute;left:14px;right:14px;top:50px;bottom:14px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.tb-col{border-radius:9px;background:rgba(255,255,255,.028);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.tb-col.hit{animation:tb-hit 1.8s ease-out}
@keyframes tb-hit{0%,15%{background:rgba(47,125,246,.2);box-shadow:inset 0 0 0 1px rgba(120,175,255,.65)}}
.tb-ch{display:flex;align-items:center;justify-content:space-between;gap:6px;height:30px;padding:0 9px;border-bottom:1px solid rgba(255,255,255,.06)}
.tb-ch>i{flex:none;width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.18)}
.tb-col:nth-child(4) .tb-ch>i{background:#FEBC2E;box-shadow:0 0 8px rgba(254,188,46,.7)}
.tb-col:nth-child(5) .tb-ch>i{background:#3ED598;box-shadow:0 0 8px rgba(62,213,152,.7)}

/* Column labels: English, Arabic or Hindi, by scene. */
.tb-lb{display:block;min-width:0;white-space:nowrap;font:600 10px/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:rgba(234,241,255,.7)}
.tb-lb>span{display:none;animation:tb-lang .45s var(--ease)}
.tb-lb>.en,.stage-3d[data-on="ar"] .tb-lb>.ar,.stage-3d[data-on="hi"] .tb-lb>.hi{display:inline-block}
.stage-3d[data-on="ar"] .tb-lb>.en,.stage-3d[data-on="hi"] .tb-lb>.en{display:none}
@keyframes tb-lang{from{opacity:0;transform:translateY(5px)}}
.tb-lb>.ar{font:600 13px/1 'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;letter-spacing:0;text-transform:none;color:#fff}
.tb-lb>.hi{font:600 12.5px/1 'Nirmala UI','Noto Sans Devanagari',sans-serif;letter-spacing:0;text-transform:none;color:#fff}

/* ---------- Job cards ---------- */
.tb-k{position:absolute;left:18px;top:86px;width:92px;height:58px;box-sizing:border-box;padding:8px 9px 0 12px;border-radius:8px;
  translate:calc(var(--c,var(--fc)) * 108px) calc(var(--r,var(--fr)) * 64px);transform:translateZ(5px);
  background:linear-gradient(180deg,#1C273D,#151E31);
  box-shadow:inset 3px 0 0 var(--gc),inset 0 1px 0 rgba(255,255,255,.09),0 3px 0 #070B14,0 10px 16px -8px rgba(0,0,0,.8);
  transition:translate .9s cubic-bezier(.55,0,.25,1),opacity .3s}
.tb-k small{display:block;font:600 9px/1 var(--f-mono);letter-spacing:.04em;color:rgba(234,241,255,.52)}
.tb-k b{display:block;margin-top:4px;font:600 12px/1.1 var(--f-body);color:#fff}
.tb-k span{display:block;margin-top:2px;font-size:9.5px;line-height:1.2;color:rgba(234,241,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Five pips, one per column: filled up to the column the card is in. */
.tb-pp{position:absolute;left:12px;right:9px;bottom:7px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--gc) calc((var(--c,var(--fc)) + 1) * 20%),rgba(255,255,255,.13) 0);
  -webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(20% - 2px),transparent calc(20% - 2px) 20%);mask:repeating-linear-gradient(90deg,#000 0 calc(20% - 2px),transparent calc(20% - 2px) 20%)}
.tb-k.j16,.tb-k.j15,.tb-k.j09,.tb-k.j05,.tb-k.j02{opacity:.7}
.tb-k.k{pointer-events:auto;background:linear-gradient(180deg,#22406F,#18305A);
  box-shadow:inset 3px 0 0 var(--gc),0 0 0 1.5px rgba(120,175,255,.8),0 0 24px -4px rgba(47,125,246,.85),0 3px 0 #08142A,0 12px 18px -8px rgba(0,0,0,.8)}
.tb-k.k small{color:#A9CCFF}
/* The moving cards carry a shadow that stays on the board while they lift. */
.tb-k.k,.tb-k.a,.tb-k.u{transform-style:preserve-3d}
.tb-k.k::after,.tb-k.a::after,.tb-k.u::after{content:"";position:absolute;inset:8px 6px -2px;border-radius:9px;background:rgba(0,0,0,.6);filter:blur(7px);transform:translateZ(-5px);opacity:0;pointer-events:none}

/* Where the moving cards are before each step. */
.js .stage-3d[data-on] .tb-k.k:not(.s1){--c:0;--r:1}
.js .stage-3d[data-on] .tb-k.k.s1:not(.s2){--c:1;--r:1}
.js .stage-3d[data-on] .tb-k.k.s2:not(.s3){--c:2;--r:2}
.js .stage-3d[data-on] .tb-k.k.s3:not(.s4){--c:3;--r:1}
.js .stage-3d[data-on] .tb-k.a:not(.s1){--c:1;--r:1}
.js .stage-3d[data-on] .tb-k.u:not(.s1){--c:3;--r:1}
/* A new loop puts them back without sliding across the board. */
.js .stage-3d[data-on] .tb-k.k:not(.s1),.js .stage-3d[data-on] .tb-k.a:not(.s1),.js .stage-3d[data-on] .tb-k.u:not(.s1){transition-duration:0s;animation:tb-back .5s var(--ease)}
@keyframes tb-back{from{opacity:0}}
/* Each step lifts the card off the board; a new name per step replays it. */
.tb-k.s1{animation:tb-up1 .9s cubic-bezier(.55,0,.25,1)}
.tb-k.s2{animation:tb-up2 .9s cubic-bezier(.55,0,.25,1)}
.tb-k.s3{animation:tb-up3 .9s cubic-bezier(.55,0,.25,1)}
.tb-k.s4{animation:tb-up4 .9s cubic-bezier(.55,0,.25,1)}
.tb-k.s1::after{animation:tb-sh1 .9s cubic-bezier(.55,0,.25,1)}
.tb-k.s2::after{animation:tb-sh2 .9s cubic-bezier(.55,0,.25,1)}
.tb-k.s3::after{animation:tb-sh3 .9s cubic-bezier(.55,0,.25,1)}
.tb-k.s4::after{animation:tb-sh4 .9s cubic-bezier(.55,0,.25,1)}
@keyframes tb-up1{45%{transform:translateZ(52px)}}
@keyframes tb-up2{45%{transform:translateZ(52px)}}
@keyframes tb-up3{45%{transform:translateZ(52px)}}
@keyframes tb-up4{45%{transform:translateZ(52px)}}
@keyframes tb-sh1{45%{transform:translateZ(-52px);opacity:.8}}
@keyframes tb-sh2{45%{transform:translateZ(-52px);opacity:.8}}
@keyframes tb-sh3{45%{transform:translateZ(-52px);opacity:.8}}
@keyframes tb-sh4{45%{transform:translateZ(-52px);opacity:.8}}

/* ---------- Floating panels ---------- */
.stage-tailorline .tb-p>div{animation-duration:8s}
.tb-gl{position:relative;border-radius:16px;background:linear-gradient(180deg,rgba(23,32,52,.95),rgba(10,15,26,.97));border:1px solid rgba(140,180,255,.2);box-shadow:0 44px 76px -40px rgba(0,0,0,.92),inset 0 1px 0 rgba(255,255,255,.08);color:#EAF1FF;font:400 12px/1.35 var(--f-body);transition:opacity .4s,transform .55s var(--ease),border-color .3s,box-shadow .3s}
.tb-gl.hot{border-color:rgba(120,175,255,.6);box-shadow:0 44px 76px -40px rgba(0,0,0,.92),0 0 40px -12px rgba(47,125,246,.8)}
.stage-3d.hovering .tb-k:not(.hot){opacity:.4}
.tb-ph{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tb-ph b{font:600 13.5px var(--f-disp);letter-spacing:-.01em;color:#fff;white-space:nowrap}
.tb-ph small{font:500 9.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(234,241,255,.5);white-space:nowrap}

/* The language picks */
.tb-lang{display:flex;align-items:center;gap:9px;padding:6px 6px 6px 12px;border-radius:14px}
.tb-gi{flex:none;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A9CCFF' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.6 2.6 3.8 5.6 3.8 9s-1.2 6.4-3.8 9c-2.6-2.6-3.8-5.6-3.8-9S9.4 5.6 12 3Z'/%3E%3C/svg%3E") no-repeat center/16px}
.tb-lang>small{font:500 10px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(234,241,255,.62);white-space:nowrap}
.tb-pk{display:flex;gap:3px;padding:3px;border-radius:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07)}
.tb-pick{font:600 11.5px/1 var(--f-mono);letter-spacing:.06em;color:rgba(234,241,255,.62);background:transparent;border:0;border-radius:7px;padding:7px 10px;cursor:pointer;pointer-events:auto;transition:color .25s,background .25s,box-shadow .25s}
.tb-pick:hover{color:#fff}
.tb-pick.cur,.stage-3d:not([data-on]) .tb-pick[data-pick="en"]{color:#fff;background:rgba(47,125,246,.36);box-shadow:inset 0 0 0 1px rgba(120,175,255,.55),0 0 16px -5px rgba(47,125,246,.9)}

/* Measurements, drawn onto the kandura as they are taken */
.tb-meas{width:252px;padding:12px 14px}
.tb-mrow{display:flex;gap:12px;align-items:center;margin-top:10px}
.tb-kan{flex:none;width:80px;height:115px;overflow:visible}
.tb-out{fill:rgba(255,255,255,.05);stroke:rgba(150,200,255,.75);stroke-width:1.4;stroke-linejoin:round}
.tb-seam{stroke:rgba(150,200,255,.35);stroke-dasharray:2 3}
.tb-dim path{fill:none;stroke:#5AA0FF;stroke-width:1.7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;filter:drop-shadow(0 0 3px rgba(90,160,255,.8));transition:stroke-dashoffset .6s var(--ease)}
.js .stage-3d[data-on] .tb-dim:not(.on) path{stroke-dashoffset:1}
.tb-vals{flex:1;min-width:0;display:grid;gap:5px}
.tb-vals p{display:flex;justify-content:space-between;align-items:baseline;margin:0;padding:5px 9px;border-radius:8px;background:rgba(255,255,255,.05);font-size:11.5px;color:rgba(234,241,255,.65)}
.tb-vals b{font:600 13px/1.2 var(--f-mono);color:#fff;transition:opacity .3s}
.js .stage-3d[data-on] .tb-vals p:not(.on) b{opacity:0}
.stage-3d[data-on] .tb-vals p.on{animation:tb-val .9s ease-out}
@keyframes tb-val{from{background:rgba(47,125,246,.3)}}
.tb-vals small{margin-top:1px;font:500 9.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(234,241,255,.45)}

/* The customer's message, when the kandura reaches Fitting */
.tb-wa{display:flex;gap:11px;align-items:flex-start;width:266px;padding:11px 13px}
.js .stage-3d[data-on] .tb-wa:not(.on){opacity:0;transform:translateY(-10px)}
.tb-wai{flex:none;width:32px;height:32px;border-radius:10px;background:#25D366;display:grid;place-items:center;box-shadow:0 0 18px -4px rgba(37,211,102,.85)}
.tb-wai svg{width:18px;height:18px}
.tb-wat{min-width:0}
.tb-wat small{display:flex;gap:6px;font-size:10.5px;color:rgba(234,241,255,.5)}
.tb-wat small b{color:#7EE8B5;font-weight:600}
.tb-wat>b{display:block;margin-top:2px;font-size:12px;color:#fff}
.tb-wat>span{display:block;margin-top:1px;font-size:12.5px;color:rgba(234,241,255,.82)}

/* The money, when it reaches Ready */
.tb-pay{width:232px;padding:12px 14px 9px}
.js .stage-3d[data-on] .tb-pay:not(.on){opacity:0;transform:translateY(10px)}
.tb-pay .tb-ph{margin-bottom:7px}
.tb-pay .tb-ph b{display:inline-flex;align-items:center;gap:7px}
.tb-pay .tb-ph b::before{content:"";width:8px;height:8px;border-radius:50%;background:#3ED598;box-shadow:0 0 8px #3ED598}
.tb-pay p{display:flex;justify-content:space-between;gap:10px;margin:0;padding:4px 0;border-top:1px solid rgba(255,255,255,.07);font-size:11.5px;color:rgba(234,241,255,.6)}
.tb-pay p b{font:600 11.5px var(--f-mono);color:#fff;font-variant-numeric:tabular-nums}
.tb-pay p.due b{color:#FFD27A}

@media (prefers-reduced-motion:reduce){
  .tb-bd,.tb-k,.tb-k::after,.tb-col.hit,.tb-lb>span,.tb-vals p{animation:none!important}
  .tb-k,.tb-gl,.tb-dim path{transition:none}
}