/* Original portfolio project miniatures, scoped to .pa- to avoid app UI collisions. */
.project-art[class*="pa-art--"]{height:248px;isolation:isolate;background:radial-gradient(ellipse at 50% 60%,var(--pa-glow,rgba(60,126,250,.24)),transparent 72%),linear-gradient(135deg,#101934,#070d20 73%)}
.project-art.pa-art--fabricflow{--pa-accent:#79e5ff;--pa-glow:rgba(26,164,217,.23)}
.project-art.pa-art--alphazero-hrms{--pa-accent:#b49cff;--pa-glow:rgba(133,92,232,.25)}
.project-art.pa-art--kya-kare{--pa-accent:#e5aaff;--pa-glow:rgba(169,65,233,.25)}
.project-art.pa-art--aptpath{--pa-accent:#a3d2ff;--pa-glow:rgba(58,114,228,.26)}
.project-art.pa-art--odisha-bakery{--pa-accent:#ffbd9f;--pa-glow:rgba(204,112,127,.23)}
.project-art.pa-art--richesm{--pa-accent:#81eedb;--pa-glow:rgba(15,171,140,.22)}
.project-art.pa-art--task-management{--pa-accent:#c4a9ff;--pa-glow:rgba(115,72,215,.23)}
.project-art.pa-art--aquaculture-iot{--pa-accent:#6be6ff;--pa-glow:rgba(26,150,200,.3)}
.project-art.pa-art--futurecoin{--pa-accent:#80ffd6;--pa-glow:rgba(16,175,137,.22)}
.project-art.pa-art--ab-kya-kare{--pa-accent:#ffcf91;--pa-glow:rgba(196,124,63,.22)}
.project-art.pa-art--jobfill-ai{--pa-accent:#abacff;--pa-glow:rgba(90,97,230,.27)}
.project-art[class*="pa-art--"]::before{opacity:.55;background-size:24px 24px;transform:perspective(600px) rotateX(62deg) scale(1.8)}
.project-art[class*="pa-art--"]::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(5,9,24,.5),transparent 27%,transparent 75%,rgba(12,17,39,.15))}
.project-art[class*="pa-art--"] .art-index,.project-art[class*="pa-art--"] .art-label{z-index:5}
.pa-scene{position:absolute;inset:34px 12px 35px;display:grid;place-items:center;z-index:2;overflow:visible;pointer-events:none;--pa-border:color-mix(in srgb,var(--pa-accent) 43%,transparent);font:600 10px/1.3 var(--font);color:#e4efff;letter-spacing:.075em}
.pa-scene::before{content:"";position:absolute;width:210px;height:120px;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--pa-glow);filter:blur(31px);border-radius:50%;pointer-events:none}
.pa-scene *{box-sizing:border-box}
.pa-floating{position:absolute;border:1px solid var(--pa-border);background:rgba(11,20,46,.86);box-shadow:0 8px 24px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.055);border-radius:8px;padding:7px 10px;backdrop-filter:blur(10px);white-space:nowrap;color:var(--pa-accent);font-size:8px}
.pa-chip{border:1px solid var(--pa-border);background:rgba(56,81,125,.22);color:var(--pa-accent);border-radius:5px;padding:3px 6px;display:inline-block}
.pa-live{color:var(--pa-accent);font:700 8px var(--font);letter-spacing:.16em}
.pa-line{display:block;margin-top:8px;position:relative;height:13px}
.pa-line b{display:block;height:4px;border-radius:5px;background:linear-gradient(90deg,var(--pa-accent),rgba(124,131,232,.5))}
.pa-line small{position:absolute;right:0;top:-3px;font:600 7px var(--font);color:#91a5ce;letter-spacing:.035em}
.pa-microcard{display:block;font:700 7px var(--font);letter-spacing:.045em;border:1px solid rgba(124,145,208,.22);background:linear-gradient(140deg,rgba(59,72,137,.42),rgba(22,28,62,.85));border-radius:6px;padding:9px 5px;color:#d2dbf7}

/* 01 - FabricFlow: stacked fabric swatches + procurement spec panel */
.pa-fabric-fan{position:absolute;left:15%;top:19%;width:154px;height:127px;transform:rotate(-13deg);filter:drop-shadow(0 16px 17px rgba(1,6,24,.5));transition:transform .6s}
.pa-fabric-piece{position:absolute;width:108px;height:100px;border:1px solid rgba(142,208,255,.45);border-radius:13px;box-shadow:inset 0 1px 1px rgba(255,255,255,.26),0 0 22px rgba(27,131,243,.1);overflow:hidden}
.pa-fabric-piece::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(225,245,255,.12) 0 2px,transparent 2px 9px),repeating-linear-gradient(-45deg,rgba(133,199,249,.08) 0 2px,transparent 2px 9px)}
.pa-fabric-piece-one{left:4px;top:5px;transform:rotate(-17deg);background:linear-gradient(130deg,#22577e,#14294d)}
.pa-fabric-piece-two{left:28px;top:10px;transform:rotate(8deg);background:linear-gradient(125deg,#5834a3,#15254d)}
.pa-fabric-piece-three{left:46px;top:19px;transform:rotate(21deg);background:linear-gradient(135deg,#188cac,#12507d 47%,#14214f)}
.pa-fabric-piece-three span{position:absolute;bottom:12px;left:9px;font-size:7px;letter-spacing:.08em}
.pa-fabric-spec{position:absolute;right:6%;top:13%;width:121px;padding:13px 10px;border:1px solid rgba(113,197,249,.35);border-radius:10px;background:rgba(8,20,50,.93);box-shadow:0 0 28px rgba(39,135,221,.16);transform:perspective(500px) rotateY(-12deg) rotateZ(5deg)}
.pa-fabric-chip{left:42%;bottom:8%;border-radius:15px}

/* 02 - HRMS: actual tree-like organization display */
.pa-hierarchy{position:relative;width:226px;height:158px;margin-top:6px}
.pa-manager{position:absolute;top:3px;left:66px;width:100px;display:flex;align-items:center;gap:7px;padding:7px;background:#172452;border:1px solid rgba(191,151,255,.53);border-radius:10px;box-shadow:0 0 28px rgba(139,88,252,.24)}
.pa-avatar{height:29px;width:29px;display:grid;place-items:center;background:linear-gradient(135deg,#6354de,#9a6cf8);border-radius:8px;font-size:18px}
.pa-manager span:last-child{display:flex;flex-direction:column;gap:3px}
.pa-manager b{font-size:8px}
.pa-manager small{font-size:7px;color:#b5acd7}
.pa-org-line{position:absolute;left:115px;top:47px;height:48px;border-left:1px solid #937be3}
.pa-org-line::after{content:"";position:absolute;left:-72px;bottom:0;width:143px;height:1px;background:#937be3}
.pa-team{position:absolute;top:94px;left:7px;right:0;display:flex;justify-content:space-between}
.pa-team>div{display:grid;justify-items:center;gap:5px;color:#b7b7e1;font-size:7px}
.pa-employee{width:48px;height:41px;border:1px solid rgba(169,134,243,.55);display:grid;place-items:center;background:linear-gradient(145deg,#393173,#171e48);border-radius:9px;font-size:23px;box-shadow:0 7px 20px rgba(0,0,0,.2)}
.pa-hr-status{right:1%;bottom:1%}.pa-hr-status i,.pa-sensor-top i{display:inline-block;width:5px;height:5px;background:#7df2cb;border-radius:50%;box-shadow:0 0 9px #7df2cb}

/* 03 - Jyotish: astrolabe, zodiac sectors, rotating orbital dot */
.pa-zodiac{width:174px;height:174px;position:relative;border-radius:50%;border:1px solid rgba(221,149,253,.65);background:radial-gradient(circle,rgba(111,54,188,.27),#17133b 67%,#0c102a);box-shadow:inset 0 0 30px rgba(195,93,245,.15),0 0 40px rgba(156,91,225,.22);display:grid;place-items:center}
.pa-zodiac::before{content:"";position:absolute;inset:9px;border:3px dotted rgba(210,153,248,.54);border-radius:50%;animation:pa-spin 35s linear infinite}
.pa-zodiac-ring{position:absolute;inset:18px;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(234,197,255,.72) 0deg 1.3deg,transparent 1.3deg 30deg);mask:radial-gradient(transparent 62%,#000 64% 68%,transparent 70%)}
.pa-zodiac-inner{width:102px;height:102px;border:1px solid #9e78dcaa;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle,#56409b,#1c1c52);box-shadow:0 0 27px #7349a844}
.pa-zodiac-inner span{font-size:50px;font-family:serif;color:#f4d4ff;line-height:1}
.pa-zodiac-inner small{font-size:7px;letter-spacing:.16em;color:#efc7ff}
.pa-orbit-point{position:absolute;top:18px;right:35px;width:8px;height:8px;border-radius:50%;background:#f0b8ff;box-shadow:0 0 14px #dd92ff}
.pa-star-card{right:4%;bottom:4%}

/* 04 - AptPath: a learning roadmap rather than a generic ring */
.pa-roadmap{position:relative;width:260px;height:132px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.pa-route-track{position:absolute;left:30px;right:30px;top:42px;height:2px;background:linear-gradient(90deg,#7ac0ff,#aa7aff,#9bfbdc);box-shadow:0 0 13px #4f84f07c}
.pa-route-stop{position:relative;z-index:1;width:73px;display:grid;justify-items:center;gap:15px}
.pa-route-stop span{width:61px;height:61px;border:1px solid rgba(135,171,255,.7);border-radius:17px;background:linear-gradient(145deg,#214c85,#181b56);display:grid;place-items:center;color:#c6eaff;font:bold 19px var(--display);box-shadow:0 9px 24px rgba(0,0,0,.25),0 0 20px rgba(67,131,239,.2)}
.pa-route-center span{transform:translateY(-11px);border-color:#c19aff;background:linear-gradient(145deg,#513cb0,#162a71)}
.pa-route-stop b{font-size:7px;color:#a9bde5}.pa-learn-badge{right:0;bottom:0}

/* 05 - Odisha Bakery: made-to-order operational board */
.pa-orders{width:min(300px,100%);height:154px;border:1px solid rgba(255,177,153,.41);background:linear-gradient(145deg,#35243d,#0e1833);border-radius:11px;box-shadow:0 15px 38px #0007;padding:11px;transform:perspective(600px) rotateY(-5deg) rotateX(4deg);transition:transform .5s}
.pa-order-head{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#f4c3b1;margin-bottom:10px}
.pa-status-pulse{width:6px;height:6px;border-radius:50%;background:#ffbfa2;box-shadow:0 0 13px #ffb89d}
.pa-order-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.pa-order-columns>div{min-width:0;padding:6px;background:#0c1736b8;border:1px solid rgba(180,137,157,.15);border-radius:7px}
.pa-order-columns small{display:block;font-size:7px;color:#c5b2d1;margin-bottom:8px}
.pa-order-columns .pa-microcard{margin-bottom:6px;font-size:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-order-hot{border-color:#ffbb9955;background:#673b52b8}
.pa-order-ready{border-color:#7fffd455;color:#a9ffe2}

/* 06 - Richesm: shopping storefront mockup */
.pa-store{width:246px;height:153px;border:1px solid #69d5bf66;background:linear-gradient(160deg,#164451,#0b1d35 50%,#07152c);box-shadow:0 17px 40px #0006;border-radius:13px;padding:10px;transform:perspective(750px) rotateY(-9deg) rotateX(6deg);transition:transform .5s}
.pa-store-head,.pa-store-foot{display:flex;align-items:center;justify-content:space-between;font-size:8px;color:#b6f8ec}
.pa-mini-dots{font-size:8px;color:#54bcb0;letter-spacing:2px}
.pa-products{display:flex;gap:10px;margin:10px 0}
.pa-products>div{width:50%;height:91px;padding:6px;border:1px solid #82baa638;border-radius:7px;background:#0c233eb3;display:flex;align-items:center;flex-direction:column;justify-content:center;gap:4px}
.pa-products small{font-size:6px;color:#b0d9df}
.pa-product-object{display:block;width:42px;height:49px;border-radius:12px 12px 6px 6px;border:1px solid #86e6d0a8;box-shadow:8px 12px 20px #0006}
.pa-product-one{background:linear-gradient(130deg,#65d3c5,#2676a3 55%,#263760);transform:rotate(-13deg)}
.pa-product-two{background:linear-gradient(125deg,#bf97f8,#6e65c5,#28346e);transform:rotate(12deg)}
.pa-store-foot{font-size:7px}.pa-store-foot b{color:#82eacb}
.pa-cart-icon{right:4%;top:20%;font-size:20px;padding:5px 9px}

/* 07 - Task board: three independently shaped Kanban columns */
.pa-kanban{width:min(316px,100%);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;transform:perspective(600px) rotateX(5deg) rotateY(-5deg);transition:transform .5s}
.pa-kanban>div{border-radius:10px;padding:8px 6px;min-height:137px;background:linear-gradient(165deg,#283258cc,#111a39);border:1px solid #ad9bff38}
.pa-kanban>div>small{display:flex;align-items:center;justify-content:space-between;font:700 7px var(--font);color:#c3bbe4;white-space:nowrap}
.pa-kanban>div>small b{font-size:8px;color:#b594f4}
.pa-task-note{position:relative;display:block;margin-top:10px;padding:7px 5px;background:linear-gradient(140deg,#4f407580,#20214d);border-radius:5px;border:1px solid #a68eff33;height:40px;box-shadow:0 4px 10px #0003}
.pa-task-note .pa-line{margin-top:5px}.pa-task-note .pa-line small{display:none}.pa-task-note .pa-line b{height:5px}
.pa-task-note i{display:block;width:18px;height:5px;border-radius:5px;background:#ac9aff}
.pa-active-note{border-left:3px solid #af8eff}.pa-done-note{border-left:3px solid #7df0ba}

/* 08 - Aquaculture: three probes over animated sensor wave */
.pa-sensor-top{position:absolute;left:3%;right:3%;top:1%;display:flex;align-items:center;justify-content:space-between;font-size:8px;color:#8ddcff}
.pa-sensor-top b{font-size:8px;color:#7bb1e9}
.pa-wave-panel{position:absolute;bottom:8px;width:min(320px,96%);height:103px}
.pa-wave-panel svg{width:100%;height:100%;filter:drop-shadow(0 0 12px rgba(60,170,239,.35));animation:pa-wave 7s ease-in-out infinite}
.pa-probe{position:absolute;bottom:47%;width:2px;height:56px;background:linear-gradient(#d5fbff,#67d7f6)}
.pa-probe:before{content:"";position:absolute;top:-9px;left:-8px;width:18px;height:18px;border-radius:7px;border:1px solid #9beeff;background:#205f87;box-shadow:0 0 15px #42c1ee}
.pa-probe span{position:absolute;bottom:0;left:-3px;width:8px;height:8px;border-radius:50%;background:#91e9ff;box-shadow:0 0 13px #5fc7ff}
.pa-probe-one{left:19%}.pa-probe-two{left:51%;height:73px}.pa-probe-three{left:81%;height:43px}
.pa-sensor-readouts{display:flex;gap:7px;position:absolute;bottom:-2px}

/* 09 - FutureCoin: stylised time series, not live prices */
.pa-forecast{width:min(303px,100%);height:165px;border:1px solid #69dec54d;border-radius:12px;background:linear-gradient(160deg,#0b3541,#071b33 45%,#080e22);padding:11px 12px;box-shadow:0 15px 36px #0005}
.pa-chart-top{display:flex;justify-content:space-between;color:#8de4c6;font-size:9px}
.pa-chart-top b{color:#b2ffe3}
.pa-price-grid{height:106px;padding-top:10px}
.pa-price-grid svg{width:100%;height:100%;overflow:visible}
.pa-chart-bottom{display:flex;gap:8px;justify-content:space-around;font-size:7px;color:#9fd8c8}
.pa-chart-line{stroke-dasharray:475;stroke-dashoffset:0;filter:drop-shadow(0 0 4px rgba(96,243,176,.6))}
/* Chart movement is decorative: data does not change on hover. */

/* 10 - Ab Kya Kare: 2-wheeler incident assistance, not a generic safety badge */
.pa-bike-badge{width:190px;height:122px;border:1px solid rgba(255,208,145,.45);border-radius:48% 48% 24% 24%;background:linear-gradient(140deg,#503b4b,#1e2448);display:grid;place-items:center;box-shadow:0 0 35px rgba(255,159,99,.13),inset 0 0 24px #ffc27a16}
.pa-bike-badge svg{width:158px;color:#ffcd9e;filter:drop-shadow(0 0 7px rgba(244,167,103,.5))}
.pa-checkpoints{position:absolute;bottom:-3px;display:flex;gap:6px}
.pa-checkpoints .pa-microcard{color:#ffcf9b;border-color:#ffc98b66;padding:7px 9px;background:#342940c9}

/* 11 - JobFill AI: browser with a compact prefilled-form sequence */
.pa-browser{width:248px;height:153px;border-radius:11px;background:linear-gradient(145deg,#283972,#0b183e 70%);border:1px solid #a4b2ff69;box-shadow:0 16px 40px #0007;overflow:hidden;transform:perspective(700px) rotateY(-8deg) rotateX(5deg);transition:transform .5s}
.pa-browser-bar{height:26px;display:flex;align-items:center;gap:12px;padding:0 11px;background:#1a2857;border-bottom:1px solid #9bb9ff33}
.pa-browser-bar span{font-size:8px;color:#98a8ef;letter-spacing:1px}.pa-browser-bar b{font-size:7px;color:#bdc8ff}
.pa-browser-body{display:grid;gap:8px;padding:10px}
.pa-inputfield{display:flex;align-items:center;gap:8px;height:22px;border-radius:5px;border:1px solid #92a0d844;background:#121d43;padding:4px 8px}
.pa-inputfield i{display:block;width:6px;height:6px;border-radius:50%;background:#8a9efa}
.pa-inputfield b{font-size:8px;font-weight:500;color:#c0cef9}
.pa-inputfield em{margin-left:auto;font-size:12px;font-style:normal;color:#86f1b9}
.pa-progressbar{height:4px;background:#303c78;border-radius:4px}.pa-progressbar i{display:block;width:88%;height:100%;border-radius:4px;background:linear-gradient(90deg,#8baaff,#c392ff)}
.pa-auto-chip{right:1%;top:13%}

/* Future unknown project: a deliberately different engineering circuit motif */
.pa-generic{display:flex;gap:12px;align-items:center}.pa-generic-core{font-size:55px;color:#9bddff}.pa-generic-label{font-size:9px}
.project-card:hover .pa-fabric-fan{transform:rotate(-6deg) translateY(-7px)}
.project-card:hover .pa-store,.project-card:hover .pa-orders,.project-card:hover .pa-kanban,.project-card:hover .pa-browser{transform:perspective(700px) rotateX(0) rotateY(0) translateY(-4px)}
.project-card:hover .pa-route-center span{box-shadow:0 0 35px rgba(157,110,248,.65);transform:translateY(-14px)}
.project-card:hover .pa-chart-line{stroke-dashoffset:16;transition:stroke-dashoffset 1.2s}
.project-card:hover .pa-fabric-piece-three{box-shadow:0 0 27px #81d9ff66,inset 0 0 30px #58bbef44}
@keyframes pa-spin{to{transform:rotate(360deg)}}
@keyframes pa-wave{50%{transform:translateY(5px) scaleY(.94)}}
@media(max-width:460px){.pa-scene{transform:scale(.88)}.pa-kanban{width:280px}.pa-fabric-spec{right:0}.pa-fabric-fan{left:6%}}
@media(prefers-reduced-motion:reduce){.pa-zodiac::before,.pa-wave-panel svg{animation:none!important}.pa-scene *{transition:none!important}}

/* The full case study has enough room for the larger illustration. */
.cube-card:not(.project-card) > .project-art[class*="pa-art--"]{height:325px}
.cube-card:not(.project-card) > .project-art .pa-scene{transform:scale(1.12)}
@media(max-width:700px){.cube-card:not(.project-card) > .project-art[class*="pa-art--"]{height:260px}.cube-card:not(.project-card) > .project-art .pa-scene{transform:scale(.94)}}