/* Photography previews (.x-ph-*). Builds on shared .d-* parts. */
.x-ph-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.x-ph-row { display: flex; align-items: center; gap: 10px; }
.x-ph-lab { font: 9.5px var(--mono); color: var(--key); letter-spacing: .02em; white-space: nowrap; }
.x-ph-op { font: 600 13px var(--mono); color: var(--muted); }
.x-ph-fr { position: relative; width: 196px; height: 117px; border: 1px solid #2a2a31; border-radius: 6px; overflow: hidden; background: #15151a; flex: none; }
.x-ph-fr.sm { width: 130px; height: 78px; }
.x-ph-fr.sq { width: 100px; height: 100px; }
.x-ph-fr.scope { width: 210px; height: 88px; }
.x-ph-fr.sm3 { width: 50px; height: 34px; border-radius: 4px; }
.x-ph-fr.sm3.ins, .x-ph-fr.sm3.res, .x-ph-fr.sm3.hdr { border-color: var(--key); }
.x-ph-fr > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.x-ph-L { position: absolute; inset: 0; }
.x-ph-L svg { display: block; width: 100%; height: 100%; overflow: visible; }
.x-ph-tag { position: absolute; left: 6px; top: 5px; font: 600 9px var(--mono); color: var(--key); background: rgba(14, 14, 17, .75); padding: 2px 5px; border-radius: 4px; z-index: 3; }

/* shared motion for svg parts */
.x-ph-pulse { animation: x-ph-pu 2.4s ease-in-out infinite; }
.x-ph-flow { stroke-dasharray: 3 3; animation: x-ph-fw 1.2s linear infinite; }
.x-ph-glow { animation: x-ph-gw 2.8s ease-in-out infinite; }
@keyframes x-ph-pu { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes x-ph-fw { to { stroke-dashoffset: -18; } }
@keyframes x-ph-fw16 { to { stroke-dashoffset: -16; } }
@keyframes x-ph-gw { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---- optics ---- */
.x-ph-zoom .x-ph-L:nth-child(-n+2) { transform-origin: 50% 74%; animation: x-ph-zm 3.8s ease-in-out infinite; }
@keyframes x-ph-zm { 0%, 12% { transform: scale(.9); } 50%, 88% { transform: scale(var(--z)); } 100% { transform: scale(.9); } }
.x-ph-iris { position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #8a8a94; background: rgba(14, 14, 17, .75); display: grid; place-items: center; z-index: 3; }
.x-ph-iris::after { content: ""; width: var(--d); height: var(--d); border-radius: 50%; background: var(--key); }
.x-ph-disc { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(var(--c), calc(var(--o) * .7)) 60%, rgba(var(--c), var(--o)) 84%, rgba(var(--c), 0) 88%); animation: x-ph-bk 3.6s ease-in-out infinite; }
@keyframes x-ph-bk { 0%, 100% { transform: translate(-50%, -50%) scale(.92); opacity: .75; } 50% { transform: translate(-50%, -54%) scale(1.1); opacity: 1; } }
.x-ph-wide { width: 230px; height: 104px; }
.x-ph-band { transform-box: fill-box; transform-origin: 50% 50%; animation: x-ph-bn 3.8s ease-in-out infinite; }
@keyframes x-ph-bn { 0%, 100% { transform: scaleX(.4); } 50% { transform: scaleX(1.25); } }
.x-ph-th { display: flex; align-items: flex-end; gap: 2px; width: 38px; height: 42px; padding: 5px; border: 1px solid #2a2a31; border-radius: 4px; background: #15151a; animation: x-ph-sq 3.6s infinite; animation-delay: calc(var(--n) * .8s); }
.x-ph-th i { flex: 1; background: #6a6a74; filter: blur(1.6px); border-radius: 1px; }
.x-ph-th i.s { background: var(--key); filter: none; }
.x-ph-th.res { animation: x-ph-res 3.6s infinite; }
@keyframes x-ph-sq { 0%, 22% { border-color: var(--key); } 32%, 100% { border-color: #2a2a31; } }
@keyframes x-ph-res { 0%, 55% { opacity: .3; border-color: #2a2a31; } 70%, 100% { opacity: 1; border-color: var(--key); } }
.x-ph-rack .x-ph-L:nth-child(-n+2) { animation: x-ph-rkb 4.2s ease-in-out infinite; }
.x-ph-rack .x-ph-L:nth-child(3) { animation: x-ph-rka 4.2s ease-in-out infinite; }
@keyframes x-ph-rka { 0%, 35% { filter: blur(0); } 55%, 85% { filter: blur(3px); } 100% { filter: blur(0); } }
@keyframes x-ph-rkb { 0%, 35% { filter: blur(3px); } 55%, 85% { filter: blur(0); } 100% { filter: blur(3px); } }
.x-ph-brk { position: absolute; z-index: 3; transform: translate(-50%, -50%); border: 1.5px solid var(--key); border-radius: 3px; animation: x-ph-bx 4.2s ease-in-out infinite; }
@keyframes x-ph-bx { 0%, 35% { left: 50%; top: 66%; width: 30px; height: 48px; } 55%, 85% { left: 87%; top: 56%; width: 26px; height: 36px; } 100% { left: 50%; top: 66%; width: 30px; height: 48px; } }
.x-ph-ts { position: absolute; inset: 0; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(#000 0, #000 26%, transparent 40%, transparent 60%, #000 74%, #000); mask-image: linear-gradient(#000 0, #000 26%, transparent 40%, transparent 60%, #000 74%, #000); animation: x-ph-tsb 3.6s ease-in-out infinite; }
@keyframes x-ph-tsb { 0%, 100% { backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); } 50% { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } }
.x-ph-tsl { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--key); opacity: .6; z-index: 2; }
.x-ph-oval { position: absolute; width: 12px; height: 28px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(ellipse, rgba(255, 238, 205, .5), rgba(255, 238, 205, .22) 70%); border: 1px solid rgba(255, 238, 205, .35); animation: x-ph-ov 3.2s ease-in-out infinite; }
@keyframes x-ph-ov { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.x-ph-streak { position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: linear-gradient(90deg, transparent, #6aa8ff 18%, #dbeaff 50%, #6aa8ff 82%, transparent); box-shadow: 0 0 8px #6aa8ff; animation: x-ph-stk 3s ease-in-out infinite; }
@keyframes x-ph-stk { 0%, 100% { transform: scaleX(.45); opacity: .6; } 50% { transform: scaleX(1); opacity: 1; } }
.x-ph-sq { width: 66px; height: 66px; }
.x-ph-fish { width: 100px; height: 100px; }
.x-ph-bulge { transform-origin: 0 0; animation: x-ph-bg 3.6s ease-in-out infinite; }
@keyframes x-ph-bg { 0%, 100% { transform: scale(.96); } 50% { transform: scale(1.03); } }
.x-ph-vig { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, .7) 100%); }
.x-ph-flare { position: absolute; right: 14%; top: 10%; width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 224, 170, .9), rgba(255, 160, 80, .25) 50%, transparent 70%); mix-blend-mode: screen; animation: x-ph-fr 3.4s ease-in-out infinite; }
@keyframes x-ph-fr { 0%, 100% { transform: translate(0, 0) scale(.9); opacity: .6; } 50% { transform: translate(-14px, 10px) scale(1.15); opacity: 1; } }
.x-ph-pr { width: 110px; height: 100px; }
.x-ph-probe { animation: x-ph-prb 3.6s ease-in-out infinite; }
@keyframes x-ph-prb { 0%, 100% { transform: translateX(-16px); } 50% { transform: translateX(0); } }

/* ---- lighting ---- */
.x-ph-dg { width: 122px; height: 122px; flex: none; }
.x-ph-face { width: 84px; height: 84px; flex: none; border-radius: 6px; }
.x-ph-lift { animation: x-ph-lf 3.6s ease-in-out infinite; }
@keyframes x-ph-lf { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
.x-ph-lift2 { animation: x-ph-lf2 3.4s ease-in-out infinite; }
@keyframes x-ph-lf2 { 0%, 100% { opacity: 0; } 50% { opacity: .75; } }
.x-ph-mod svg { width: 210px; height: 124px; }
.x-ph-flagm { animation: x-ph-fg 3.6s ease-in-out infinite; }
@keyframes x-ph-fg { 0%, 100% { transform: translateX(26px); opacity: .3; } 50% { transform: translateX(0); opacity: 1; } }
.x-ph-neg { animation: x-ph-ng 3.6s ease-in-out infinite; }
@keyframes x-ph-ng { 0%, 100% { opacity: 0; } 50% { opacity: .6; } }
.x-ph-gel { fill: #ff3da0; animation: x-ph-gl 4.5s linear infinite; }
@keyframes x-ph-gl { 0%, 100% { fill: #ff3da0; } 33% { fill: #3d8bff; } 66% { fill: #2effb0; } }
.x-ph-sh { width: 210px; height: 124px; }
.x-ph-swing { animation: x-ph-sw 4s ease-in-out infinite; }
@keyframes x-ph-sw { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.x-ph-sun { transform-box: fill-box; transform-origin: center; animation: x-ph-sn 4s ease-in-out infinite; }
@keyframes x-ph-sn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
.x-ph-long { transform-origin: 62px 90px; animation: x-ph-lg 4s ease-in-out infinite; }
@keyframes x-ph-lg { 0%, 100% { transform: scaleX(.7); } 50% { transform: scaleX(1.1); } }
.x-ph-win rect, .x-ph-win { animation: x-ph-tw 2.6s ease-in-out infinite; }
@keyframes x-ph-tw { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.x-ph-flash { opacity: 0; animation: x-ph-fh 3s infinite; }
@keyframes x-ph-fh { 0%, 18% { opacity: 0; } 21% { opacity: .85; } 36%, 100% { opacity: 0; } }
.x-ph-bolt { animation: x-ph-bt 3s infinite; }
@keyframes x-ph-bt { 0%, 18% { opacity: .3; } 21% { opacity: 1; } 60%, 100% { opacity: .5; } }
.x-ph-lamp { width: 62px; height: 80px; }

/* ---- composition ---- */
.x-ph-th3 { animation: x-ph-t3 3.8s ease-in-out infinite; }
@keyframes x-ph-t3 { 0%, 14% { transform: translate(-28px, -6px); } 50%, 88% { transform: translate(0, 0); } 100% { transform: translate(-28px, -6px); } }
.x-ph-mir { animation: x-ph-mi 3.6s ease-in-out infinite; }
@keyframes x-ph-mi { 0%, 100% { opacity: .1; } 45%, 80% { opacity: 1; } }
.x-ph-dash { animation: x-ph-fw16 1.4s linear infinite; }
.x-ph-pl1 { animation: x-ph-par 5s ease-in-out infinite alternate; --a: 4px; }
.x-ph-pl2 { animation: x-ph-par 5s ease-in-out infinite alternate; --a: 10px; }
.x-ph-pl3 { animation: x-ph-par 5s ease-in-out infinite alternate; --a: 22px; }
@keyframes x-ph-par { from { transform: translateX(calc(var(--a) * -1)); } to { transform: translateX(var(--a)); } }
.x-ph-spiral { stroke-dasharray: 1; stroke-dashoffset: 1; animation: x-ph-dr 4s ease-in-out infinite; }
@keyframes x-ph-dr { 0% { stroke-dashoffset: 1; } 55%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.x-ph-rep { animation: x-ph-rp 2.4s ease-in-out infinite; }
@keyframes x-ph-rp { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
.x-ph-odd { animation: x-ph-od 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes x-ph-od { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
.x-ph-sd { width: 100px; height: 100px; flex: none; }
.x-ph-dutch { transform-origin: 50% 60%; animation: x-ph-du 4s ease-in-out infinite; }
@keyframes x-ph-du { 0%, 15% { transform: rotate(0) scale(1.45); } 50%, 85% { transform: rotate(-14deg) scale(1.45); } 100% { transform: rotate(0) scale(1.45); } }
.x-ph-fl { transform-box: fill-box; transform-origin: center; animation: x-ph-fp 4s ease-in-out infinite; }
@keyframes x-ph-fp { 0%, 10% { transform: translate(var(--x), var(--y)) rotate(10deg); } 40%, 88% { transform: none; } 100% { transform: translate(var(--x), var(--y)) rotate(10deg); } }

/* ---- materials ---- */
.x-ph-sheen { animation: x-ph-shn 3.4s ease-in-out infinite; }
@keyframes x-ph-shn { 0% { transform: translateX(0); } 100% { transform: translateX(110px); } }
.x-ph-fr.brush { background: repeating-linear-gradient(0deg, #3a3c44 0 1px, #5a5c66 1px 2px, #484a54 2px 3px, #666872 3px 4px); }
.x-ph-bm { position: absolute; top: 0; bottom: 0; left: -70px; width: 70px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent); animation: x-ph-bms 3s linear infinite; }
@keyframes x-ph-bms { to { transform: translateX(270px); } }
.x-ph-bub { animation: x-ph-bb 2.8s ease-in infinite; }
@keyframes x-ph-bb { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-40px); opacity: 0; } }
.x-ph-glare { animation: x-ph-gr 3.8s ease-in-out infinite; }
@keyframes x-ph-gr { 0%, 12% { opacity: 1; } 50%, 70% { opacity: .05; } 100% { opacity: 1; } }
.x-ph-pol { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border: 2px solid #aaa; border-radius: 50%; background: rgba(14, 14, 17, .65); z-index: 3; }
.x-ph-pol i { position: absolute; left: 50%; top: 3px; bottom: 3px; width: 2px; margin-left: -1px; background: var(--key); animation: x-ph-pr 3.8s ease-in-out infinite; }
@keyframes x-ph-pr { 0%, 12% { transform: rotate(0); } 50%, 70% { transform: rotate(90deg); } 100% { transform: rotate(0); } }
.x-ph-gcard { animation: x-ph-pu 3s ease-in-out infinite; }
.x-ph-flagin { animation: x-ph-fi 3.6s ease-in-out infinite; }
@keyframes x-ph-fi { 0%, 100% { transform: translateX(-36px); } 45%, 70% { transform: translateX(0); } }
.x-ph-edge { animation: x-ph-ed 3.6s ease-in-out infinite; }
@keyframes x-ph-ed { 0%, 100% { opacity: 0; } 45%, 70% { opacity: 1; } }
.x-ph-rk { animation: x-ph-rk 4.2s ease-in-out infinite; }
@keyframes x-ph-rk { 0%, 15%, 100% { transform: scaleX(1); } 55%, 75% { transform: scaleX(.12); } }
.x-ph-rkl { animation: x-ph-rl 4.2s ease-in-out infinite; }
@keyframes x-ph-rl { 0%, 15%, 100% { transform: translate(0, 0); } 55%, 75% { transform: translate(34px, -50px); } }
.x-ph-wr { animation: x-ph-wr 4s ease-in-out infinite; }
@keyframes x-ph-wr { 0%, 25% { opacity: 1; } 70%, 90% { opacity: 0; } 100% { opacity: 1; } }
.x-ph-steam { opacity: 0; animation: x-ph-st 2.4s ease-out infinite; }
@keyframes x-ph-st { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: .75; } 100% { transform: translateY(-34px); opacity: 0; } }
.x-ph-shine { animation: x-ph-sj 3.2s ease-in-out infinite; }
@keyframes x-ph-sj { 0% { transform: translateX(0); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateX(86px); opacity: 0; } }

/* ---- colour ---- */
.x-ph-hist { position: absolute; right: 6px; bottom: 6px; width: 40px; height: 20px; z-index: 3; background: rgba(14, 14, 17, .6); border-radius: 2px; }
.x-ph-wbt { position: absolute; inset: 0; mix-blend-mode: color; animation: x-ph-wb 2.6s ease-in-out infinite alternate; }
@keyframes x-ph-wb { 0% { background: rgba(70, 130, 255, .7); } 50% { background: rgba(128, 128, 128, 0); } 100% { background: rgba(255, 150, 50, .7); } }
.x-ph-card { position: absolute; left: 6px; bottom: 6px; display: flex; align-items: center; gap: 4px; font: 8px var(--mono); color: #fff; background: rgba(14, 14, 17, .75); padding: 3px 5px; border-radius: 4px; z-index: 3; }
.x-ph-card i { width: 14px; height: 10px; border-radius: 2px; background: #e8e8e8; animation: x-ph-wc 2.6s ease-in-out infinite alternate; }
@keyframes x-ph-wc { 0% { background: #9ab8ff; } 50% { background: #e8e8e8; } 100% { background: #ffd0a0; } }
.x-ph-kv { width: 226px; }
.x-ph-kbar { position: relative; height: 18px; border-radius: 9px; background: linear-gradient(90deg, #ff8a1f, #ffd08a 28%, #fff 52%, #bcd4ff 76%, #6a9bff); }
.x-ph-kmark { position: absolute; top: -4px; width: 4px; height: 26px; background: #0e0e11; border: 1.5px solid #fff; border-radius: 2px; animation: x-ph-km 4s ease-in-out infinite alternate; }
@keyframes x-ph-km { from { left: 2%; } to { left: 95%; } }
.x-ph-kt { display: flex; justify-content: space-between; margin-top: 6px; font: 8px var(--mono); color: var(--muted); text-align: center; line-height: 1.3; }
.x-ph-sw { width: 58px; height: 58px; border-radius: 6px; font: 600 9px var(--mono); display: grid; place-items: center; text-align: center; color: #fff; }
.x-ph-sw.cast { background: #8fa6cc; animation: x-ph-cs 3.6s ease-in-out infinite; }
.x-ph-sw.cast i { display: none; }
.x-ph-sw.ok { background: #777; }
@keyframes x-ph-cs { 0%, 40% { background: #8fa6cc; } 70%, 100% { background: #7c7c7c; } }
.x-ph-eye { width: 22px; height: 22px; animation: x-ph-ey 3.6s ease-in-out infinite; }
@keyframes x-ph-ey { 0%, 100% { transform: translate(-4px, 4px); } 50% { transform: translate(0, 0); } }
.x-ph-chk { display: grid; grid-template-columns: repeat(6, 28px); gap: 3px; padding: 5px; background: #0a0a0c; border-radius: 5px; }
.x-ph-chk i { height: 23px; border-radius: 2px; animation: x-ph-ck 2.4s ease-in-out infinite; }
@keyframes x-ph-ck { 0%, 100% { filter: brightness(.82); } 50% { filter: brightness(1.15); } }
.x-ph-spot { position: absolute; inset: 0; background: radial-gradient(circle at 50% 62%, rgba(255, 224, 170, .3) 0, transparent 38%); animation: x-ph-pu 3.4s ease-in-out infinite; z-index: 1; }
.x-ph-wheel { position: relative; width: 100px; height: 100px; flex: none; }
.x-ph-wheel::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(hsl(0 70% 55%), hsl(60 70% 55%), hsl(120 70% 55%), hsl(180 70% 55%), hsl(240 70% 55%), hsl(300 70% 55%), hsl(360 70% 55%)); -webkit-mask: radial-gradient(circle, transparent 24%, #000 25%); mask: radial-gradient(circle, transparent 24%, #000 25%); }
.x-ph-wheel svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.x-ph-hs, .x-ph-hn span { opacity: 0; animation: x-ph-hs 6s infinite; }
.x-ph-wheel .h1, .x-ph-hn .h1 { animation-delay: -4s; }
.x-ph-wheel .h2, .x-ph-hn .h2 { animation-delay: -2s; }
.x-ph-hn { position: relative; width: 84px; height: 14px; }
.x-ph-hn span { position: absolute; left: 0; font: 10px var(--mono); color: var(--key); }
@keyframes x-ph-hs { 0% { opacity: 0; } 5%, 30% { opacity: 1; } 35%, 100% { opacity: 0; } }
.x-ph-wp { position: absolute; inset: 0; animation: x-ph-wp 4.4s ease-in-out infinite; }
@keyframes x-ph-wp { 0%, 8% { clip-path: inset(0 100% 0 0); } 45%, 60% { clip-path: inset(0 0 0 0); } 97%, 100% { clip-path: inset(0 100% 0 0); } }
.x-ph-wl { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--key); z-index: 4; animation: x-ph-wl 4.4s ease-in-out infinite; }
@keyframes x-ph-wl { 0%, 8% { left: 0; } 45%, 60% { left: 100%; } 97%, 100% { left: 0; } }
.x-ph-ov { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.x-ph-fr.gr .x-ph-tag { z-index: 5; }

/* ---- production ---- */
.x-ph-doc { width: 170px; padding: 10px 12px; border: 1px solid #2a2a31; border-radius: 6px; background: #18181d; font: 10px var(--sans); color: var(--text-2); }
.x-ph-doc.wide { width: 210px; }
.x-ph-doc > b { display: block; font: 600 9px var(--mono); color: var(--key); margin-bottom: 4px; letter-spacing: .06em; }
.x-ph-doc p { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.x-ph-doc em { font: normal 9px var(--mono); color: var(--muted); width: 54px; flex: none; }
.x-ph-doc.kv em { width: 58px; }
.x-ph-doc small { display: block; margin-top: 4px; font: 9px var(--mono); }
.x-ph-ln { display: block; height: 5px; border-radius: 3px; background: #4a4a56; transform-origin: left; animation: x-ph-wd 3.6s infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes x-ph-wd { 0% { transform: scaleX(0); } 22%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.x-ph-sl s { text-decoration: none; font: 600 10px var(--mono); color: var(--text); min-width: 52px; flex: none; }
.x-ph-sl u { text-decoration: none; margin-left: auto; width: 10px; height: 10px; border: 1px solid #55555f; border-radius: 3px; flex: none; animation: x-ph-tk 3.6s infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes x-ph-tk { 0%, 15% { background: transparent; border-color: #55555f; } 28%, 85% { background: var(--key); border-color: var(--key); } 100% { background: transparent; } }
.x-ph-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #55555f; margin-right: 3px; }
.x-ph-fr.mb { background: #15151a; }
.x-ph-tile { position: absolute; border-radius: 3px; animation: x-ph-tp 4s infinite; animation-delay: calc(var(--i) * .25s); }
@keyframes x-ph-tp { 0% { opacity: 0; transform: scale(.85); } 15%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.x-ph-chips { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 3px; }
.x-ph-chips i { width: 11px; height: 11px; border-radius: 50%; border: 1px solid #0e0e11; }
.x-ph-sb { display: flex; flex-direction: column; gap: 3px; align-items: center; animation: x-ph-sbh 3.6s infinite; animation-delay: calc(var(--i) * 1.2s); border-radius: 3px; }
.x-ph-sb svg { width: 62px; height: 42px; border: 1px solid #3a3a44; border-radius: 3px; }
.x-ph-sb small { font: 8px var(--mono); color: var(--muted); }
@keyframes x-ph-sbh { 0%, 28% { filter: drop-shadow(0 0 0 var(--key)) brightness(1.25); } 34%, 100% { filter: none; } }
.x-ph-leg { display: flex; flex-direction: column; gap: 6px; font: 9px var(--mono); }
.x-ph-leg span { color: var(--c); white-space: nowrap; }
.x-ph-prop { animation: x-ph-pp 3.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes x-ph-pp { 0%, 8% { transform: translate(var(--x, 0), var(--y, 0)); opacity: 0; } 35%, 88% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.x-ph-sd1, .x-ph-sd2, .x-ph-sd3, .x-ph-sd4 { animation: x-ph-sdi 4s ease-out infinite; }
.x-ph-sd2 { animation-delay: .5s; } .x-ph-sd3 { animation-delay: 1s; } .x-ph-sd4 { animation-delay: 1.5s; }
@keyframes x-ph-sdi { 0% { opacity: 0; transform: translateY(8px); } 15%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.x-ph-teth { width: 190px; height: 100px; }
.x-ph-img { animation: x-ph-ti 3.2s infinite; }
@keyframes x-ph-ti { 0%, 40% { opacity: 0; } 55%, 90% { opacity: 1; } 100% { opacity: 0; } }
.x-ph-prog { transform-origin: 86px 49px; animation: x-ph-tg 3.2s infinite; }
@keyframes x-ph-tg { 0% { transform: scaleX(0); } 40%, 100% { transform: scaleX(1); } }
.x-ph-bk { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.x-ph-bk small { font: 8px var(--mono); color: var(--muted); }
.x-ph-ref { position: absolute; right: 8px; bottom: 8px; display: flex; gap: 4px; padding: 4px; background: #0a0a0c; border-radius: 4px; border: 1px solid var(--key); animation: x-ph-pu 2.4s ease-in-out infinite; }
.x-ph-gc { width: 14px; height: 14px; background: #777; border-radius: 2px; }
.x-ph-ref span { display: grid; grid-template-columns: repeat(2, 7px); gap: 2px; }
.x-ph-ref span i { width: 7px; height: 7px; }
.x-ph-doc.dit .x-ph-cp em { width: 68px; }
.x-ph-cp u { display: block; width: 90px; height: 4px; background: #2a2a31; border-radius: 2px; overflow: hidden; text-decoration: none; }
.x-ph-cp u i { display: block; height: 100%; background: var(--key); animation: x-ph-pw 3.6s infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes x-ph-pw { 0% { width: 0; } 70%, 100% { width: var(--p); } }
.x-ph-sheet { display: grid; grid-template-columns: repeat(4, 46px); gap: 4px; }
.x-ph-cell { position: relative; height: 32px; border-radius: 3px; background: linear-gradient(160deg, #3a3a46, #22222a); }
.x-ph-cell b { position: absolute; right: 3px; top: 1px; font: 700 10px var(--mono); }
.x-ph-cell.rej { animation: x-ph-rj 4s infinite; }
.x-ph-cell.rej b::after { content: "×"; color: #ff6b6b; }
.x-ph-cell.pick { animation: x-ph-pk 4s infinite; }
.x-ph-cell.pick b::after { content: "✓"; color: var(--key); }
@keyframes x-ph-rj { 0%, 25% { opacity: 1; } 45%, 90% { opacity: .22; } 100% { opacity: 1; } }
@keyframes x-ph-pk { 0%, 25% { box-shadow: none; } 45%, 90% { box-shadow: 0 0 0 2px var(--key); } 100% { box-shadow: none; } }
.x-ph-cell b::after { opacity: 0; }
.x-ph-cell.rej b::after, .x-ph-cell.pick b::after { animation: x-ph-pu 4s infinite; opacity: 1; }
.x-ph-spot2 { animation: x-ph-sp 4s infinite; }
@keyframes x-ph-sp { 0%, 10% { opacity: 1; } 28%, 90% { opacity: 0; } 100% { opacity: 1; } }
.x-ph-heal { animation: x-ph-hl 4s steps(1, end) infinite; }
@keyframes x-ph-hl { 0% { transform: translate(-12px, 12px); } 25% { transform: translate(10px, -10px); } 50% { transform: translate(16px, 14px); } 75% { transform: translate(-4px, -16px); } 100% { transform: translate(-12px, 12px); } }
.x-ph-fq { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 8px var(--mono); color: var(--muted); }
.x-ph-fq svg { width: 52px; height: 52px; border: 1px solid #3a3a44; border-radius: 4px; }
.x-ph-fq.res svg { border-color: var(--key); }
.x-ph-comp { position: relative; width: 190px; height: 108px; }
.x-ph-cl { position: absolute; left: 45px; top: 14px; width: 100px; height: 62px; border: 1px solid #3a3a44; border-radius: 4px; overflow: hidden; }
.x-ph-cl svg { width: 100%; height: 100%; display: block; }
.x-ph-cl small { position: absolute; left: 3px; bottom: 2px; font: 7px var(--mono); color: var(--key); }
.x-ph-cl.c1 { background: #1c1c22; animation: x-ph-c1 4s ease-in-out infinite; }
.x-ph-cl.c2 { border-style: dashed; animation: x-ph-c2 4s ease-in-out infinite; }
.x-ph-cl.c3 { border-style: dashed; animation: x-ph-c3 4s ease-in-out infinite; }
@keyframes x-ph-c1 { 0%, 10% { transform: translate(-44px, -12px); } 50%, 85% { transform: none; } 100% { transform: translate(-44px, -12px); } }
@keyframes x-ph-c2 { 0%, 10% { transform: translate(0, 32px); } 50%, 85% { transform: none; } 100% { transform: translate(0, 32px); } }
@keyframes x-ph-c3 { 0%, 10% { transform: translate(44px, -12px); } 50%, 85% { transform: none; } 100% { transform: translate(44px, -12px); } }
.x-ph-fr.chk { background: repeating-conic-gradient(#2a2a31 0% 25%, #1d1d23 0% 50%) 0 0 / 12px 12px; }
.x-ph-cpath { stroke-dasharray: 1; stroke-dashoffset: 1; animation: x-ph-dr 4s ease-in-out infinite; }
.x-ph-cfill { opacity: 0; animation: x-ph-cf 4s ease-in-out infinite; }
@keyframes x-ph-cf { 0%, 50% { opacity: 0; } 70%, 90% { opacity: 1; } 100% { opacity: 0; } }
.x-ph-node { animation: x-ph-pu 2s ease-in-out infinite; }
.x-ph-col.big .x-ph-face { width: 112px; height: 112px; }
.x-ph-cl small { animation: x-ph-lb 4s infinite; }
@keyframes x-ph-lb { 0%, 12% { opacity: 1; } 40%, 85% { opacity: 0; } 100% { opacity: 1; } }