/* Photo Studio: five players, AI cut-out, AI match, on the giant screen */
@property --phs-y{syntax:"<length>";inherits:true;initial-value:-9999px}
@property --phs-fade{syntax:"<percentage>";inherits:false;initial-value:100%}

.phs{--pad:22px;--gap:14px;--ar:1.3333;--ease:cubic-bezier(.65,0,.25,1);--out:cubic-bezier(.2,.8,.2,1);--orange:#f95800;--blue:#3144a2;--navy:#212b70;--deep:#0e1438}
.phs-stage{position:relative;container-type:inline-size;border-radius:16px;overflow:hidden;
  background:radial-gradient(70% 90% at 50% 0%,#1d1846 0%,transparent 62%),radial-gradient(60% 70% at 100% 100%,#14123a 0%,transparent 70%),var(--bg-2);
  box-shadow:0 0 0 1px #ffffff14,inset 0 1px 0 #ffffff0d;
  transition:--phs-y 1.25s cubic-bezier(.45,0,.3,1)}
.phs-instant .phs-stage,.phs-instant .phs-stage *{transition:none!important;animation:none!important}
.phs-stage>.phs-body,.phs-stage>.phs-figs{transition:opacity .25s ease}
.phs-dim .phs-stage>.phs-body,.phs-dim .phs-stage>.phs-figs,.phs-dim .phs-beam{opacity:0}

/* Status bar */
.phs-bar{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--pad) 12px}
.phs-src{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:13.5px;font-weight:600;color:var(--ink)}
.phs-src svg{flex:none;width:18px;height:18px;fill:#8b7bff33;stroke:var(--accent);stroke-width:1.6}
.phs-src-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phs-src em{flex:none;font-style:normal;font-weight:500;color:var(--ink-3);padding-left:8px;border-left:1px solid var(--line-2)}
.phs-ai{position:relative;display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:999px;background:#120f2b;box-shadow:inset 0 0 0 1px #8b7bff55;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden}
.phs-ai::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,#8b7bff2e 50%,transparent 70%) -100% 0/200% 100% no-repeat;opacity:0;transition:opacity .4s}
.phs[data-step="1"] .phs-ai::after,.phs[data-step="2"] .phs-ai::after{opacity:1;animation:phs-sheen 2.4s ease-in-out infinite}
.phs-ai b{display:inline-flex;align-items:center;gap:4px;padding:3px 9px 3px 7px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:12px;letter-spacing:.06em}
.phs-ai b svg{width:13px;height:13px;fill:#fff}
.phs-status{position:relative;z-index:1;color:var(--ink);transition:opacity .25s}
.phs-prog{position:absolute;left:var(--pad);right:var(--pad);bottom:0;height:2px;border-radius:2px;background:var(--line)}
.phs-prog::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--phs-p,1));background:linear-gradient(90deg,var(--accent-2),var(--accent));transition:transform .6s var(--ease)}
.phs[data-step="0"]{--phs-p:.25}.phs[data-step="1"]{--phs-p:.5}.phs[data-step="2"]{--phs-p:.75}.phs[data-step="3"]{--phs-p:1}

/* Body: lane and screen share one grid cell */
.phs-body{--cw:calc((100cqw - 2*var(--pad) - 4*var(--gap))/5);display:grid;place-items:center;padding:14px var(--pad) var(--pad);position:relative;z-index:1}
.phs-lane,.phs-screen{grid-area:1/1}
.phs-lane{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap);width:100%}
.phs-card{min-width:0;transition:opacity .55s var(--out),transform .7s var(--out)}
.phs-photo{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;background:repeating-conic-gradient(#20202b 0 25%,#181821 0 50%) 0 0/16px 16px;box-shadow:0 0 0 1px #ffffff1c,0 18px 40px -22px #000;transition:box-shadow .5s}
.phs-raw{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--phs-y) - var(--ct,0px) - 34px),#000 calc(var(--phs-y) - var(--ct,0px)));
  mask-image:linear-gradient(to bottom,transparent calc(var(--phs-y) - var(--ct,0px) - 34px),#000 calc(var(--phs-y) - var(--ct,0px)))}
.phs-badge{position:absolute;z-index:1;top:8px;left:8px;transition:opacity .4s,transform .5s var(--out);display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:8px;background:var(--accent-2);font:700 17px/1 var(--display);color:#fff;box-shadow:0 6px 16px -6px #6d5cff;opacity:0;transform:scale(.6)}
.phs-photo::after{content:"";position:absolute;inset:7px;border-radius:7px;pointer-events:none;opacity:0;transition:opacity .45s;
  background:linear-gradient(var(--accent),var(--accent)) 0 0/14px 2px,linear-gradient(var(--accent),var(--accent)) 0 0/2px 14px,
  linear-gradient(var(--accent),var(--accent)) 100% 0/14px 2px,linear-gradient(var(--accent),var(--accent)) 100% 0/2px 14px,
  linear-gradient(var(--accent),var(--accent)) 0 100%/14px 2px,linear-gradient(var(--accent),var(--accent)) 0 100%/2px 14px,
  linear-gradient(var(--accent),var(--accent)) 100% 100%/14px 2px,linear-gradient(var(--accent),var(--accent)) 100% 100%/2px 14px;background-repeat:no-repeat}
.phs-chip{position:relative;display:flex;align-items:center;gap:7px;height:32px;margin-top:10px;padding:0 8px 0 4px;border-radius:9px;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line-2);font-size:13px;font-weight:600;color:var(--ink);transition:opacity .45s var(--out),transform .55s var(--out),box-shadow .4s}
.phs-chip>b,.phs-chip-name{opacity:0;transform:translateY(6px);transition:opacity .4s var(--out),transform .5s var(--out)}
.phs-chip-file{position:absolute;left:10px;right:10px;top:50%;transform:translateY(-50%);font:500 11.5px/1 ui-monospace,Menlo,monospace;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .3s,transform .4s var(--out)}
.phs-chip b{display:grid;place-items:center;min-width:24px;height:24px;padding:0 4px;border-radius:6px;background:#6d5cff2e;color:#cfc8ff;font:700 15px/1 var(--display)}
.phs-chip-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase;letter-spacing:.02em;font-size:12.5px}
.phs-chip i{flex:none;position:relative;width:18px;height:18px;margin-left:auto;border-radius:50%;background:#1f9e5f;transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1)}
.phs-chip i::after{content:"";position:absolute;left:6px;top:4px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Import: photos land one after another */
.phs[data-step="0"] .phs-card{animation:phs-land .6s var(--out) both}
.phs-card:nth-child(2){animation-delay:.07s!important}.phs-card:nth-child(3){animation-delay:.14s!important}.phs-card:nth-child(4){animation-delay:.21s!important}.phs-card:nth-child(5){animation-delay:.28s!important}


/* AI cut-out */
.phs-beam{position:absolute;z-index:5;left:0;width:0;top:var(--phs-y);height:0;pointer-events:none;opacity:0}
.phs-beam::before{content:"";position:absolute;left:-12px;right:-12px;top:-1px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,#a99dff 12%,#e4dfff 50%,#a99dff 88%,transparent);box-shadow:0 0 18px 4px #8b7bff88}
.phs-beam::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:56px;background:linear-gradient(to top,#8b7bff2e,transparent)}
.phs-beam em{position:absolute;left:0;top:-30px;padding:3px 9px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-2));font:600 11.5px/1.4 var(--sans);font-style:normal;letter-spacing:.04em;color:#fff;white-space:nowrap;box-shadow:0 6px 18px -6px #6d5cff}
.phs[data-step="1"] .phs-beam{animation:phs-beam 1.35s linear both}
.phs-fig{position:absolute;left:0;top:0;width:10px;height:10px;max-width:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--phs-y) - var(--ft,0px)),transparent calc(var(--phs-y) - var(--ft,0px) + 1px)),linear-gradient(to bottom,#000 var(--phs-fade),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 calc(var(--phs-y) - var(--ft,0px)),transparent calc(var(--phs-y) - var(--ft,0px) + 1px)),linear-gradient(to bottom,#000 var(--phs-fade),transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  filter:drop-shadow(0 0 0 #b9b0ff00);
  transition:left .85s var(--ease),top .85s var(--ease),width .85s var(--ease),height .85s var(--ease),clip-path .85s var(--ease),--phs-fade .75s var(--ease),filter .5s}
.phs-figs{position:absolute;inset:0;z-index:3;pointer-events:none}
.phs[data-step="1"] .phs-fig{filter:drop-shadow(0 0 1.5px #c4bbff) drop-shadow(0 0 10px #8b7bff66)}

/* AI match */
.phs[data-step="2"] .phs-chip-file{opacity:0;transform:translateY(-120%)}
.phs[data-step="2"] :is(.phs-chip>b,.phs-chip-name){opacity:1;transform:none}
.phs[data-step="2"] .phs-badge{opacity:1;transform:none}
.phs[data-step="2"] .phs-photo{box-shadow:0 0 0 1px #8b7bff99,0 18px 40px -22px #000}
.phs[data-step="2"] .phs-photo::after{opacity:1}
.phs[data-step="2"] .phs-chip{box-shadow:inset 0 0 0 1px #1f9e5f88}
.phs[data-step="2"] .phs-chip i{transform:none}
.phs-card :is(.phs-badge,.phs-chip,.phs-chip>b,.phs-chip-name,.phs-chip-file){transition-delay:var(--d,0s)}
.phs[data-step="2"] .phs-chip i{transition-delay:calc(var(--d,0s) + .15s)}
.phs-card:nth-child(2){--d:.07s}.phs-card:nth-child(3){--d:.14s}.phs-card:nth-child(4){--d:.21s}.phs-card:nth-child(5){--d:.28s}

/* On screen */
.phs[data-step="3"] .phs-card{opacity:0;transform:translateY(14px) scale(.94);pointer-events:none}
/* on the card the cut-out sweep no longer applies: only the soft bottom fade, so each player lands whole */
.phs[data-step="3"] .phs-fig{--phs-fade:58%;-webkit-mask-image:linear-gradient(#000,#000),linear-gradient(to bottom,#000 var(--phs-fade),transparent 100%);mask-image:linear-gradient(#000,#000),linear-gradient(to bottom,#000 var(--phs-fade),transparent 100%)}
.phs-fig:nth-child(2){transition-delay:.05s}.phs-fig:nth-child(3){transition-delay:.1s}.phs-fig:nth-child(4){transition-delay:.15s}.phs-fig:nth-child(5){transition-delay:.2s}
.phs-screen{position:relative;container-type:inline-size;width:min(100%,calc((var(--cw)*var(--ar) + 76px)*16/9));aspect-ratio:16/9;border-radius:10px;
  box-shadow:0 0 0 1px #ffffff1c,0 0 0 7px #0c0c14,0 0 0 8px #ffffff14,0 30px 80px -30px #6d5cffaa;
  opacity:0;visibility:hidden;transform:scale(.94);transition:opacity .4s var(--out),transform .7s var(--out),visibility 0s .7s}
.phs[data-step="3"] .phs-screen{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--out) .05s,transform .7s var(--out),visibility 0s}
.phs-gfx{position:absolute;inset:0;border-radius:10px;overflow:hidden;background:radial-gradient(90% 70% at 50% 0%,#2c3a90 0%,transparent 70%),linear-gradient(#212b70,#1a2260);font-family:var(--display);text-transform:uppercase;color:#fff}
.phs-head{position:absolute;left:3.2cqw;right:3.2cqw;top:3.4cqw;display:flex;align-items:center;justify-content:space-between;font-size:5.4cqw;line-height:1}
.phs-team{display:flex;align-items:center;gap:1.6cqw}
.phs-team img{width:7cqw;height:4.6cqw;object-fit:cover;border-radius:1cqw}
.phs-title b{color:var(--orange)}
.phs-team,.phs-title{opacity:0;transition:opacity .5s,transform .7s var(--out)}
.phs-team{transform:translateX(-3cqw)}.phs-title{transform:translateX(3cqw)}
.phs[data-step="3"] :is(.phs-team,.phs-title){opacity:1;transform:none;transition-delay:.2s}
.phs-slots{position:absolute;left:3.2cqw;right:3.2cqw;top:11.6cqw;bottom:3.6cqw;display:grid;grid-template-columns:repeat(5,1fr);gap:1.4cqw}
.phs-slots li{position:relative;display:grid;grid-template-columns:1fr 3.4cqw;clip-path:inset(0 0 100% 0);transition:clip-path .65s var(--ease)}
.phs-slots li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.45cqw;background:var(--c,#01f287)}
.phs-slots li:nth-child(2){--c:var(--orange)}.phs-slots li:nth-child(3){--c:#01d7f3}.phs-slots li:nth-child(4){--c:#f2d900}.phs-slots li:nth-child(5){--c:#01f287}
.phs[data-step="3"] .phs-slots li{clip-path:inset(0)}
.phs-slots li:nth-child(2){transition-delay:.05s}.phs-slots li:nth-child(3){transition-delay:.1s}.phs-slots li:nth-child(4){transition-delay:.15s}.phs-slots li:nth-child(5){transition-delay:.2s}
.phs-ph{background:linear-gradient(to bottom,var(--orange) 0%,var(--orange) 52%,#121a52 100%)}
.phs-slots li:nth-child(even) .phs-ph{background:linear-gradient(to bottom,var(--blue) 0%,var(--blue) 52%,#121a52 100%)}
.phs-name{background:var(--deep);writing-mode:vertical-rl;padding:1.4cqw 0;font-size:2.7cqw;line-height:3.4cqw;text-align:start;white-space:nowrap;overflow:hidden}
.phs-n{position:absolute;left:1.2cqw;bottom:1.4cqw;z-index:4;font-size:5.6cqw;line-height:1;color:var(--orange)}
.phs-live{position:absolute;top:-1px;right:14px;transform:translateY(-50%);display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:#0c0c14;box-shadow:inset 0 0 0 1px #ffffff22;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.phs-live i{width:7px;height:7px;border-radius:50%;background:var(--live)}

/* Steps */
.phs-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.phs-steps button{position:relative;overflow:hidden;display:flex;align-items:baseline;gap:8px;padding:11px 12px 13px;border:0;border-radius:10px;background:var(--bg-3);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-3);font-size:14px;font-weight:600;text-align:left;transition:color .3s,box-shadow .3s,background .3s}
.phs-steps button span{font-size:11px;letter-spacing:.1em;color:var(--ink-3)}
.phs-steps button:hover{color:var(--ink)}
.phs-steps button[aria-current="step"]{color:#fff;background:#6d5cff1c;box-shadow:inset 0 0 0 1px var(--accent-2)}
.phs-steps button[aria-current="step"] span{color:var(--accent)}
.phs-steps i{position:absolute;left:0;bottom:0;height:2px;width:100%;transform-origin:left;transform:scaleX(0);background:var(--accent)}
.phs-run .phs-steps button[aria-current="step"] i{animation:phs-fill var(--dur,3s) linear both}
.phs-steps button[aria-current="step"] i{transform:scaleX(1)}
.phs-run .phs-steps button[aria-current="step"] i{transform:scaleX(0)}

@keyframes phs-land{from{opacity:0;transform:translateY(-26px) scale(.92)}to{opacity:1;transform:none}}
@keyframes phs-beam{0%{opacity:0}6%{opacity:1}80%{opacity:1}100%{opacity:0}}
@keyframes phs-sheen{from{background-position:-100% 0}to{background-position:200% 0}}
@keyframes phs-fill{to{transform:scaleX(1)}}

@media (max-width:860px){.phs{--pad:14px;--gap:10px}}
@media (max-width:560px){
  .phs{--pad:10px;--gap:6px;--ar:1.5}
  .phs-bar{padding:10px var(--pad) 9px;gap:8px}
  .phs-src{font-size:12px;gap:6px;flex:none}.phs-src svg{width:15px;height:15px}.phs-src-t{display:none}.phs-src em{padding-left:0;border:0;color:var(--ink-2)}
  .phs-ai{min-width:0}.phs-status{overflow:hidden;text-overflow:ellipsis}
  .phs-photo{aspect-ratio:2/3}
  .phs-ai{font-size:11.5px;gap:6px;padding:4px 10px 4px 4px}.phs-ai b{font-size:10.5px;padding:2px 7px 2px 5px}
  .phs-body{padding:10px var(--pad) 12px}
  .phs-photo{border-radius:8px}
  .phs-chip-file{display:none}
  .phs-chip{opacity:0}
  .phs[data-step="2"] .phs-chip{opacity:1}
  .phs-badge{top:4px;left:4px;min-width:20px;height:20px;font-size:13px;border-radius:6px}
  .phs-photo::after{inset:3px;background-size:8px 2px,2px 8px,8px 2px,2px 8px,8px 2px,2px 8px,8px 2px,2px 8px}
  .phs-chip{height:24px;margin-top:6px;padding:0 3px;gap:3px;justify-content:center}
  .phs-chip b{min-width:18px;height:18px;font-size:12px}
  .phs-chip-name{display:none}
  .phs-chip i{width:14px;height:14px;margin-left:0}.phs-chip i::after{left:4.5px;top:2.5px;width:3.5px;height:7px}
  .phs-beam em{font-size:10px;top:-24px;padding:2px 7px}
  .phs-screen{width:100%;box-shadow:0 0 0 1px #ffffff1c,0 0 0 4px #0c0c14,0 0 0 5px #ffffff14,0 20px 50px -24px #6d5cffaa}
  .phs-live{font-size:9.5px;padding:2px 8px;right:10px}
  .phs-steps{gap:5px}.phs-steps button{flex-direction:column;gap:0;padding:7px 8px 9px;font-size:12px}.phs-steps button span{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .phs-stage,.phs-stage *{transition:none!important;animation:none!important}
  .phs-beam{display:none}
}