/* project-visuals.css — Artwork inside project cards/dialog (CSS 3D browser, CGPA numerals, labels). */

.pv{position:relative;display:block;overflow:hidden;container-type:inline-size;width:100%;height:100%;background:radial-gradient(120% 90% at 80% 15%,#3a0d16,#0b0909 70%)}
.pv canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.pv::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(90deg,rgba(9,9,9,.78),rgba(9,9,9,0) 55%),linear-gradient(0deg,rgba(9,9,9,.7),rgba(9,9,9,0) 40%)}
.pv.edu::after{background:radial-gradient(ellipse at center,rgba(9,9,9,.82),rgba(9,9,9,0) 72%)}
.pt{position:absolute;left:7%;bottom:34px;z-index:3;display:grid;gap:.6em;text-align:left}
.pt b{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:clamp(24px,11cqw,64px);line-height:1;letter-spacing:-.01em;color:#f2efeb;text-shadow:0 .1em .4em rgba(0,0,0,.7)}
.pt i{font-style:normal;font-size:clamp(7px,2.1cqw,11px);letter-spacing:.14em;color:#ff5a68}
.pt.c{inset:0;place-content:center;justify-items:center;text-align:center;gap:.5em}
.nm{display:flex;align-items:center;gap:7cqw}
.nm span{display:grid;justify-items:center;gap:.35em}
.nm b{font-size:clamp(22px,16cqw,76px);white-space:nowrap}
.nm em{width:1px;height:12cqw;background:rgba(255,255,255,.3)}
.wp{position:absolute;inset:0;perspective:60em;font-size:clamp(5px,1.9cqw,10px)}
.wst{position:absolute;inset:0;transform-style:preserve-3d;animation:wsw 9s ease-in-out infinite alternate}
@keyframes wsw{from{transform:rotateY(-26deg) rotateX(9deg) rotateZ(2deg)}to{transform:rotateY(-14deg) rotateX(5deg) rotateZ(1deg)}}
.wg{position:absolute;left:-20%;right:-20%;bottom:-30%;height:75%;background:linear-gradient(rgba(227,43,60,.24) 1px,transparent 1px) 0 0/100% 2.2em,linear-gradient(90deg,rgba(227,43,60,.24) 1px,transparent 1px) 0 0/2.2em 100%;transform:perspective(30em) rotateX(68deg);-webkit-mask-image:linear-gradient(transparent,#000 70%);mask-image:linear-gradient(transparent,#000 70%)}
.wn{position:absolute;inset:0;width:100%;height:100%;transform:translateZ(-10em) scale(1.3);filter:drop-shadow(0 0 3px #e32b3c)}
.wc{position:absolute;left:2%;top:8%;width:46%;height:40%;transform:translateZ(-4em);background:rgba(14,10,11,.92);border:1px solid rgba(227,43,60,.35);border-radius:.5em;padding:1em;font:.95em/1.55 ui-monospace,Menlo,monospace;white-space:pre;color:#8a8486;overflow:hidden}
.wc em{color:#ff5a68;font-style:normal}
.wc u{text-decoration:none;color:#e3d6bf}
.wb{position:absolute;right:-2%;top:8%;width:66%;height:76%;transform:translateZ(6em);display:flex;flex-direction:column;border-radius:.8em;background:#15110f;border:1px solid rgba(255,255,255,.14);box-shadow:0 3em 5em rgba(0,0,0,.7),0 0 4em rgba(227,43,60,.3);overflow:hidden}
.wh{display:flex;align-items:center;height:2.6em;padding:0 1em;background:#1d1716;gap:1em}
.wh::before{content:"";width:.7em;height:.7em;border-radius:50%;background:#e32b3c;box-shadow:1.2em 0 #6d6564,2.4em 0 #6d6564;margin-right:2.4em}
.wh u{flex:1;text-align:center;text-decoration:none;font:.9em ui-monospace,monospace;color:#a09c9a;background:#0d0a0a;padding:.3em 1em;border-radius:1em}
.wm{flex:1;margin:1em;padding:1em;display:grid;grid-template-rows:auto auto 1fr auto;gap:.8em;background:linear-gradient(160deg,#e3d6bf,#bfae8f);border-radius:.4em}
.wm .h{height:1.4em;width:55%;background:#2b231e}
.wm .l{height:.5em;width:80%;background:rgba(43,35,30,.45)}
.bk{display:grid;grid-template-columns:repeat(4,1fr);gap:.7em}
.bk i{border-radius:.15em;box-shadow:.2em .4em .8em rgba(0,0,0,.35)}
.bk i:nth-child(1){background:linear-gradient(#8e1a28,#4a0c14)}
.bk i:nth-child(2){background:linear-gradient(#2c2c34,#16161b)}
.bk i:nth-child(3){background:linear-gradient(#9b7a52,#5c4630)}
.bk i:nth-child(4){background:linear-gradient(#5a1018,#2a0a0e)}
.pl{display:flex;align-items:center;gap:.8em;background:#1a1413;border-radius:2em;padding:.5em .8em}
.pp{width:0;height:0;border:.5em solid transparent;border-left:.8em solid #e32b3c;border-right:0}
.pg{flex:1;height:.25em;background:linear-gradient(90deg,#e32b3c 38%,#4a4343 38%)}
.wq{position:absolute;right:2%;bottom:4%;transform:translateZ(14em);padding:.5em .9em;border-radius:.6em;background:linear-gradient(135deg,#e32b3c,#8e0f1d);color:#fff;font:700 1.6em ui-monospace,monospace;box-shadow:0 1.5em 3em rgba(0,0,0,.6),0 0 3em rgba(227,43,60,.5)}

@media(prefers-reduced-motion:reduce){
.wst{animation:none}
}