/* ═══════════ PREMIUM LAYER — loader, alerts, popups, socials, motion ═══════════ */
:root{--ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1)}

/* ── 3D LOADER (used on page load, popups, section opens) ── */
.mn-loader{--s:92px;--bw:3px;position:relative;width:var(--s);height:var(--s);margin:0 auto;display:block}
.mn-loader i{position:absolute;inset:0;border-radius:50%;border:var(--bw) solid transparent;
  border-top-color:#22d3ee;border-bottom-color:#a855f7;filter:drop-shadow(0 0 8px rgba(34,211,238,.55));
  animation:mnRx .9s linear infinite}
.mn-loader i:nth-child(2){inset:12%;border-top-color:#fbbf24;border-bottom-color:#22d3ee;animation:mnRy .8s linear infinite;filter:drop-shadow(0 0 8px rgba(251,191,36,.5))}
.mn-loader i:nth-child(3){inset:24%;border-top-color:#a855f7;border-bottom-color:#fbbf24;animation:mnRz .7s linear infinite;filter:drop-shadow(0 0 8px rgba(168,85,247,.55))}
.mn-loader b{position:absolute;inset:0;display:grid;place-items:center;font:900 calc(var(--s)*.2)/1 'Playfair Display',serif;
  background:linear-gradient(135deg,#22d3ee,#a855f7 55%,#fbbf24);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:mnPulse .9s ease-in-out infinite}
.mn-loader.sm{--s:64px;--bw:2.5px;margin-bottom:1.5rem}
@keyframes mnRx{to{transform:perspective(300px) rotateX(360deg) rotateZ(360deg)}}
@keyframes mnRy{to{transform:perspective(300px) rotateY(360deg) rotateZ(-360deg)}}
@keyframes mnRz{to{transform:perspective(300px) rotateX(-360deg) rotateY(360deg)}}
@keyframes mnPulse{50%{transform:scale(1.18);filter:brightness(1.3)}}

.mn-splash{position:fixed;inset:0;z-index:20000;display:grid;place-content:center;justify-items:center;gap:1.4rem;
  background:var(--bg-primary);transition:opacity .55s var(--ease),visibility .55s,transform .55s var(--ease)}
.mn-splash p{font:600 .8rem 'DM Sans',sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--text-muted)}
.mn-splash.hide{opacity:0;visibility:hidden;transform:scale(1.06)}
.mn-splash.busy{background:rgba(5,7,13,.72);backdrop-filter:blur(12px)}
[data-theme="light"] .mn-splash.busy{background:rgba(243,246,251,.75)}
body:not(.is-ready) .hero-image-wrap,body:not(.is-ready) .hero-text{animation-play-state:paused}

/* ── AMBIENT ORBS + SCROLL BAR ── */
.orb{position:fixed;z-index:0;border-radius:50%;filter:blur(90px);opacity:.28;pointer-events:none;animation:orbFloat 18s ease-in-out infinite}
.orb.o1{width:420px;height:420px;background:#22d3ee;top:8%;left:-8%}
.orb.o2{width:380px;height:380px;background:#a855f7;top:55%;right:-8%;animation-delay:-6s}
.orb.o3{width:300px;height:300px;background:#fbbf24;bottom:-6%;left:35%;opacity:.16;animation-delay:-11s}
[data-theme="light"] .orb{opacity:.14}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(60px,-50px) scale(1.12)}66%{transform:translate(-40px,40px) scale(.94)}}
#scrollBar{position:fixed;top:0;left:0;height:3px;width:100%;z-index:1100;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#22d3ee,#a855f7,#fbbf24);box-shadow:0 0 12px rgba(168,85,247,.6)}

/* ── MOTION: flying entrances, floating, shimmer (project cards untouched) ── */
.scroll-reveal:not(.project-card){filter:blur(6px)}
.scroll-reveal.reveal:not(.project-card){filter:blur(0);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.hero-photo{animation:floatY 6s ease-in-out infinite}
.hero-photo:hover{animation-play-state:paused}
@keyframes floatY{50%{translate:0 -10px}}
.hero-name{background-size:200% auto;animation:gradFlow 7s linear infinite}
.section-title span[style],.footer-name{background-size:220% auto!important;animation:gradFlow 6s linear infinite}
@keyframes gradFlow{to{background-position:220% center}}
.section-badge{position:relative;overflow:hidden}
.section-badge::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:badgeShine 4.5s ease-in-out infinite}
@keyframes badgeShine{0%,60%{left:-80%}100%{left:140%}}
.highlight-item,.skill-card,.testi-card,.contact-card,.tl-card{background-image:radial-gradient(420px circle at var(--mx,50%) var(--my,-40%),rgba(34,211,238,.10),transparent 45%)}
.tl-dot{animation:dotPulse 2.4s ease-in-out infinite}
@keyframes dotPulse{50%{box-shadow:0 0 0 9px rgba(251,191,36,0),0 0 22px rgba(251,191,36,.8)}}
.btn,.more-projects-btn{will-change:translate;transition:var(--t),translate .25s var(--ease)}
.theme-toggle,.social-btn{will-change:transform}

/* ── PREMIUM POPUPS (both themes) ── */
.popup-overlay,.dl-overlay,.mp-overlay{background:rgba(3,5,10,.82)}
[data-theme="light"] .popup-overlay,[data-theme="light"] .dl-overlay,[data-theme="light"] .mp-overlay{background:rgba(15,23,42,.5)}
.popup-box,.dl-box,.mp-box{background:linear-gradient(160deg,var(--bg-secondary),var(--bg-card));border-radius:28px;
  box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 0 1px var(--border),0 0 60px rgba(168,85,247,.12)}
[data-theme="light"] .popup-box,[data-theme="light"] .dl-box,[data-theme="light"] .mp-box{box-shadow:0 40px 90px rgba(15,23,42,.28),0 0 0 1px rgba(15,23,42,.06)}
.popup-box{border:0;padding:3rem 2.5rem 2.4rem}
.popup-box::before{height:4px;background:linear-gradient(90deg,#22d3ee,#a855f7,#fbbf24,#22d3ee);background-size:300% 100%;animation:gradFlow 3s linear infinite}
.popup-box::after,.dl-box::after{content:'';position:absolute;width:260px;height:260px;top:-120px;right:-100px;border-radius:50%;
  background:radial-gradient(circle,rgba(168,85,247,.30),transparent 70%);pointer-events:none;animation:orbFloat 9s ease-in-out infinite}
.popup-fill{background:linear-gradient(90deg,#22d3ee,#a855f7,#fbbf24);box-shadow:0 0 12px rgba(168,85,247,.6)}
.popup-progress{height:6px}
.popup-cancel:hover{background:rgba(239,68,68,.08)}
.popup-emoji{filter:drop-shadow(0 8px 18px rgba(168,85,247,.35));animation:bounceIn .6s var(--spring),floatY 3s ease-in-out .6s infinite}
.mp-box{border:0;scrollbar-width:thin;scrollbar-color:var(--accent2) transparent}
.mp-box::before{position:sticky;display:block;top:-2.5rem;margin:-2.5rem -2.5rem 1.6rem;height:4px;border-radius:0;background:linear-gradient(90deg,#22d3ee,#a855f7,#fbbf24)}
.mp-close{box-shadow:0 6px 18px rgba(0,0,0,.25)}
.mp-close:hover,.dl-close:hover{background:rgba(239,68,68,.1)}
/* nested: demo popup opens above More Projects / Reviews */
.popup-overlay{z-index:10050}.dl-overlay{z-index:10040}
.dl-ring-fg{filter:drop-shadow(0 0 8px rgba(168,85,247,.6))}
.dl-done-btn{box-shadow:0 8px 26px rgba(34,211,238,.4)}

/* ── SWEET ALERTS (toast + modal) ── */
#mnToasts{position:fixed;top:88px;right:20px;z-index:30000;display:flex;flex-direction:column;gap:.8rem;width:min(360px,calc(100vw - 32px));pointer-events:none}
.mn-toast{--c:#22d3ee;pointer-events:auto;position:relative;display:flex;gap:.9rem;align-items:center;padding:.95rem 2.4rem .95rem 1rem;border-radius:18px;overflow:hidden;
  background:var(--bg-glass);backdrop-filter:blur(20px) saturate(1.4);border:1px solid var(--border);box-shadow:0 18px 50px rgba(0,0,0,.4),0 0 30px color-mix(in srgb,var(--c) 25%,transparent);
  animation:toastIn .6s var(--spring) both}
[data-theme="light"] .mn-toast{background:rgba(255,255,255,.92);box-shadow:0 18px 40px rgba(15,23,42,.16)}
.mn-toast.out{animation:toastOut .4s var(--ease) forwards}
.mn-toast.success{--c:#10b981}.mn-toast.warning{--c:#fbbf24}.mn-toast.error{--c:#ef4444}.mn-toast.info{--c:#22d3ee}
.mn-ico{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:1rem;color:#fff;
  background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 55%,#a855f7));box-shadow:0 6px 18px color-mix(in srgb,var(--c) 50%,transparent);animation:bounceIn .6s var(--spring) .15s both}
.mn-t{font-weight:700;font-size:.95rem;color:var(--text-primary);line-height:1.3}
.mn-s{font-size:.82rem;color:var(--text-secondary);line-height:1.45;margin-top:.1rem}
.mn-x{position:absolute;top:8px;right:10px;background:none;border:0;color:var(--text-muted);cursor:pointer;font-size:.8rem;transition:.3s}
.mn-x:hover{color:#ef4444;transform:rotate(90deg)}
.mn-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--c);transform-origin:left;animation:barRun var(--d,3.6s) linear forwards}
@keyframes barRun{to{transform:scaleX(0)}}
@keyframes toastIn{from{opacity:0;transform:translateX(120%) scale(.9)}}
@keyframes toastOut{to{opacity:0;transform:translateX(120%) scale(.9)}}
.mn-modal{position:fixed;inset:0;z-index:30001;display:grid;place-items:center;padding:1rem;background:rgba(3,5,10,.7);backdrop-filter:blur(10px);animation:fadeIn .3s ease both}
[data-theme="light"] .mn-modal{background:rgba(15,23,42,.45)}
.mn-modal .box{--c:#fbbf24;width:min(400px,100%);text-align:center;padding:2.4rem 2rem 2rem;border-radius:26px;background:linear-gradient(160deg,var(--bg-secondary),var(--bg-card));
  border:1px solid var(--border);box-shadow:0 40px 100px rgba(0,0,0,.5);animation:modalIn .55s var(--spring) both}
.mn-modal .mn-ico{width:74px;height:74px;font-size:1.9rem;margin:0 auto 1.2rem}
.mn-modal h3{font-family:'Playfair Display',serif;font-size:1.4rem;margin-bottom:.4rem}
.mn-modal p{color:var(--text-secondary);font-size:.92rem;margin-bottom:1.5rem}
.mn-modal .row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
@keyframes fadeIn{from{opacity:0}}
@keyframes modalIn{from{opacity:0;transform:scale(.7) translateY(40px)}}

/* ── PROJECT CARDS · LIGHT MODE: dark screenshots framed properly ── */
[data-theme="light"] .project-img-wrap{margin:12px 12px 0;height:190px;border-radius:14px;background:#080c18;
  box-shadow:0 10px 26px rgba(15,23,42,.22),inset 0 0 0 1px rgba(255,255,255,.08)}
[data-theme="light"] .project-img-wrap::after{background:linear-gradient(to top,rgba(8,12,24,.5),transparent 42%)}
[data-theme="light"] .project-img{object-position:top center}
[data-theme="light"] .project-name{color:#0b1220}
[data-theme="light"] .project-card:hover .project-name{color:#b45309}
[data-theme="light"] .project-card:hover .project-tag{color:#b45309;border-color:rgba(180,83,9,.35)}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.orb{display:none}}

/* ═══════════ ROUND 2 — 3D buttons, theme switch, tooltips, side dock, project search ═══════════ */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}

/* ── 3D FLYING BUTTONS ── */
.btn,.project-btn,.c-btn,.more-projects-btn,.theme-toggle{transform:perspective(700px) translateY(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))!important;
  -webkit-tap-highlight-color:transparent;transition:transform .22s var(--ease),box-shadow .25s,background .3s,color .3s,border-color .3s,translate .25s var(--ease)}
.btn,.project-btn,.c-btn,.more-projects-btn{box-shadow:0 var(--eh,5px) 0 var(--e),0 calc(var(--eh,5px)*3) 26px var(--g)!important}
.btn:hover,.project-btn:hover,.c-btn:hover,.more-projects-btn:hover{--lift:-4px;--eh:9px}
.btn:active,.project-btn:active,.c-btn:active,.more-projects-btn:active{--lift:3px;--eh:1px;transition-duration:.08s}
.btn-primary{--e:#0a6f8a;--g:rgba(34,211,238,.4)}.btn-secondary{--e:#5b21b6;--g:rgba(168,85,247,.4)}
.btn-download{--e:rgba(168,85,247,.65);--g:rgba(251,191,36,.28)}.project-btn{--e:#4338ca;--g:rgba(99,102,241,.4)}
.btn-outline{--e:rgba(255,255,255,.09);--g:rgba(0,0,0,.35);background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.16)}
[data-theme="light"] .btn-outline{--e:rgba(15,23,42,.13);--g:rgba(15,23,42,.10);background:#fff;border-color:rgba(15,23,42,.14)}
.c-btn{--e:color-mix(in srgb,currentColor 38%,transparent);--g:transparent}
.more-projects-btn{--e:rgba(168,85,247,.5);--g:rgba(34,211,238,.22)}
.btn i,.project-btn i,.c-btn i{transition:transform .5s var(--spring)}
.btn:hover i,.project-btn:hover i,.c-btn:hover i{transform:translate(3px,-3px) rotate(-10deg) scale(1.18)}

/* ── THEME SWITCH ── */
.theme-toggle{--w:68px;--h:36px;--k:28px;--cloud:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='12' cy='14' r='7'/%3E%3Ccircle cx='22' cy='9' r='9'/%3E%3Ccircle cx='33' cy='14' r='7'/%3E%3Crect x='12' y='14' width='21' height='7'/%3E%3C/g%3E%3C/svg%3E");position:relative;display:block;width:var(--w);height:var(--h);padding:0;border:0;border-radius:40px;cursor:pointer;overflow:hidden;
  background:linear-gradient(135deg,#0b1030,#1e1b4b 60%,#312e81);box-shadow:inset 0 2px 8px rgba(0,0,0,.6),0 0 0 1.5px rgba(255,255,255,.14),0 8px 22px rgba(99,102,241,.35);transition:background .6s,box-shadow .6s}
[data-theme="light"] .theme-toggle{background:linear-gradient(135deg,#5bbcf7,#8fd8ff 60%,#c9ecff);box-shadow:inset 0 2px 8px rgba(15,23,42,.18),0 0 0 1.5px rgba(255,255,255,.85),0 8px 22px rgba(56,189,248,.45)}
.theme-toggle::before{content:'';position:absolute;inset:0;transition:opacity .5s;animation:twinkle 2.4s ease-in-out infinite;
  background:radial-gradient(1.5px 1.5px at 14% 32%,#fff,transparent),radial-gradient(1px 1px at 28% 70%,#fff,transparent),radial-gradient(1.5px 1.5px at 42% 26%,#fff,transparent),radial-gradient(1px 1px at 22% 52%,#fff,transparent),radial-gradient(1px 1px at 50% 62%,#fff,transparent)}
[data-theme="light"] .theme-toggle::before{opacity:0;animation:none}
.theme-toggle::after{content:'';position:absolute;inset:0;opacity:0;translate:16px 0;transition:opacity .6s,translate .7s var(--ease);
  background:var(--cloud) no-repeat right 5px bottom 3px/26px 13px,var(--cloud) no-repeat right 10px top 4px/16px 8px}
[data-theme="light"] .theme-toggle::after{opacity:1;translate:0 0}
@keyframes twinkle{50%{opacity:.35}}
.tt-knob{position:absolute;z-index:2;top:4px;left:4px;width:var(--k);height:var(--k);pointer-events:none;transform:translateX(calc(var(--w) - var(--k) - 8px));transition:transform .65s var(--spring)}
.tt-knob i{display:none}
.tt-knob::before,.tt-knob::after{content:'';position:absolute;inset:0;border-radius:50%;transition:opacity .5s,rotate .8s var(--spring),scale .6s var(--spring)}
.tt-knob::before{background:radial-gradient(circle at 32% 34%,rgba(100,116,139,.5) 0 3px,transparent 3.6px),radial-gradient(circle at 66% 62%,rgba(100,116,139,.45) 0 4px,transparent 4.6px),radial-gradient(circle at 58% 24%,rgba(100,116,139,.4) 0 2px,transparent 2.6px),radial-gradient(circle at 35% 30%,#fff,#e2e8f0 50%,#94a3b8);
  box-shadow:0 3px 10px rgba(0,0,0,.45),inset -3px -3px 6px rgba(15,23,42,.2)}
.tt-knob::after{background:radial-gradient(circle at 35% 30%,#fffbe0,#fde047 45%,#f59e0b);box-shadow:0 0 0 3px rgba(253,224,71,.4),0 0 12px 3px rgba(251,191,36,.85);opacity:0;scale:.4;rotate:-90deg}
[data-theme="light"] .tt-knob{transform:none}
[data-theme="light"] .tt-knob::before{opacity:0;scale:.4;rotate:90deg}
[data-theme="light"] .tt-knob::after{opacity:1;scale:1;rotate:0deg;animation:sunGlow 2.6s ease-in-out infinite}
@keyframes sunGlow{50%{box-shadow:0 0 0 3px rgba(253,224,71,.5),0 0 18px 5px rgba(251,191,36,1)}}
@media(max-width:480px){.theme-toggle{--w:58px;--h:32px;--k:24px}}

/* ── FLOATING TOOLTIP (theme switch, buttons, chips…) ── */
#mnTip{--ac:#6366f1;position:fixed;left:0;top:0;z-index:40000;pointer-events:none;padding:.45rem .85rem;border-radius:8px;font:600 .8rem/1.25 'DM Sans',sans-serif;color:#fff;white-space:nowrap;
  background:linear-gradient(135deg,#0891b2,#7c3aed);box-shadow:0 12px 28px rgba(0,0,0,.35);opacity:0;visibility:hidden;translate:var(--x,0) var(--y,0);scale:.7;
  transition:opacity .25s,visibility .25s,scale .4s var(--spring),translate .35s var(--ease)}
#mnTip.snap{transition:opacity .25s,visibility .25s,scale .4s var(--spring)}
#mnTip.on{opacity:1;visibility:visible;scale:1}
#mnTip::after{content:'';position:absolute;width:10px;height:10px;background:var(--ac)}
#mnTip.top::after{bottom:-4px;left:var(--ax);transform:translateX(-50%) rotate(45deg)}
#mnTip.bottom::after{top:-4px;left:var(--ax);transform:translateX(-50%) rotate(45deg)}
#mnTip.left::after{right:-4px;top:var(--ay);transform:translateY(-50%) rotate(45deg)}

/* ── ROUND ICON BUTTONS: footer socials + side dock — white circle, brand colour, brand-coloured tooltip ── */
.socials{gap:1.2rem;flex-wrap:wrap;padding-top:2.6rem}
:is(.social-btn,.dk){--c:#3a3f4b;--bg:#fff;--fg:var(--c);--o:0;--v:hidden;--s:.8;--d:12px;position:relative;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;outline:none;color:var(--fg);background:var(--bg);
  box-shadow:0 8px 20px rgba(0,0,0,.25),0 0 0 1px rgba(15,23,42,.06);-webkit-tap-highlight-color:transparent;transition:transform .4s var(--spring),background .3s,color .3s,box-shadow .35s}
[data-theme="light"] :is(.social-btn,.dk){box-shadow:0 8px 22px rgba(15,23,42,.16),0 0 0 1px rgba(15,23,42,.08)}
:is(.social-btn,.dk).wa{--c:#25d366}
:is(.social-btn,.dk).fb{--c:#1877f2}
:is(.social-btn,.dk).ig{--c:#e1306c;--hov:linear-gradient(45deg,#f09433,#dc2743 55%,#bc1888)}
:is(.social-btn,.dk).gh{--c:#24292f;--hov:#3b434c}
:is(.social-btn,.dk).li{--c:#0a66c2}
.social-btn{width:54px;height:54px;font-size:1.45rem;transform:translateY(var(--lift,0)) scale(var(--sc,1))}
.dk{width:46px;height:46px;font-size:1.2rem;transform:translateX(var(--lift,0)) scale(var(--sc,1))}
@media(hover:hover){:is(.social-btn,.dk):hover{--bg:var(--hov,var(--c));--fg:#fff;--lift:-8px;--sc:1.1;--o:1;--v:visible;--s:1;--d:0px;box-shadow:0 16px 32px color-mix(in srgb,var(--c) 55%,transparent)}}
:is(.social-btn,.dk):is(.is-active,:focus-visible){--bg:var(--hov,var(--c));--fg:#fff;--lift:-8px;--sc:1.1;--o:1;--v:visible;--s:1;--d:0px;box-shadow:0 16px 32px color-mix(in srgb,var(--c) 55%,transparent)}
:is(.social-btn,.dk) i{transition:transform .4s var(--spring)}
:is(.social-btn,.dk):is(.is-active,:focus-visible) i{transform:scale(1.14) rotate(-8deg)}
@media(hover:hover){:is(.social-btn,.dk):hover i{transform:scale(1.14) rotate(-8deg)}}
/* tooltip: rectangle + arrow, same colour as the icon */
:is(.social-btn,.dk)::before{content:attr(data-tip);position:absolute;padding:.42rem .85rem;border-radius:8px;background:var(--c);color:#fff;font:600 .8rem/1.2 'DM Sans',sans-serif;white-space:nowrap;pointer-events:none;
  opacity:var(--o);visibility:var(--v);box-shadow:0 10px 24px color-mix(in srgb,var(--c) 45%,transparent),0 0 0 1px rgba(255,255,255,.12);transition:opacity .3s,visibility .3s,transform .4s var(--spring)}
:is(.social-btn,.dk)::after{content:'';position:absolute;width:10px;height:10px;background:var(--c);pointer-events:none;opacity:var(--o);visibility:var(--v);transition:opacity .3s,visibility .3s,transform .4s var(--spring)}
.social-btn::before{left:50%;bottom:calc(100% + 16px);transform:translate(-50%,var(--d)) scale(var(--s))}
.social-btn::after{left:50%;bottom:calc(100% + 10px);transform:translate(-50%,var(--d)) rotate(45deg)}
.dk::before{right:calc(100% + 16px);top:50%;transform:translate(var(--d),-50%) scale(var(--s))}
.dk::after{right:calc(100% + 10px);top:50%;transform:translate(var(--d),-50%) rotate(45deg)}
/* side dock (laptop / desktop only) */
.dock{position:fixed;right:14px;top:50%;translate:0 -50%;z-index:900;display:flex;flex-direction:column;gap:.75rem}
.dk{opacity:0}
body.is-ready .dk{animation:dkIn .9s var(--spring) calc(.35s + var(--i,0)*.08s) both}
@keyframes dkIn{from{opacity:0;translate:80px 0}to{opacity:1;translate:0 0}}
@media(max-width:1024px){.dock{display:none}}
@media(max-height:620px){.dk{width:40px;height:40px;font-size:1rem}.dock{gap:.5rem}}
@media(max-width:600px){.socials{gap:.9rem}.social-btn{width:48px;height:48px;font-size:1.25rem}}
@media(max-width:380px){.socials{gap:.6rem}.social-btn{width:42px;height:42px;font-size:1.1rem}}

/* ── PROJECT SEARCH ── */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.ps-wrap{max-width:760px;margin:0 auto 2.4rem;text-align:center;opacity:0}
.ps-wrap.in{animation:psFly 1s var(--spring) both}
@keyframes psFly{from{opacity:0;transform:translateY(60px) scale(.9) rotateX(20deg)}to{opacity:1;transform:none}}
.ps-box{--bg:var(--bg-card);position:relative;display:flex;align-items:center;gap:.9rem;height:62px;padding:.3rem .55rem .3rem 1.3rem;border-radius:60px;border:2px solid transparent;cursor:text;
  background:linear-gradient(var(--bg),var(--bg)) padding-box,conic-gradient(from var(--ang),#22d3ee,#a855f7,#fbbf24,#22d3ee) border-box;animation:spinAng 6s linear infinite;
  box-shadow:0 18px 50px rgba(0,0,0,.35),0 0 40px rgba(168,85,247,.12);transition:box-shadow .4s,transform .45s var(--spring)}
[data-theme="light"] .ps-box{--bg:#fff;box-shadow:0 16px 40px rgba(15,23,42,.12),0 0 30px rgba(168,85,247,.1)}
.ps-box:focus-within{transform:translateY(-4px) scale(1.02);animation-duration:2.2s;box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 60px rgba(34,211,238,.28),0 0 80px rgba(168,85,247,.22)}
@keyframes spinAng{to{--ang:360deg}}
.ps-ico{font-size:1.15rem;background:var(--premium-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:transform .5s var(--spring)}
.ps-box:focus-within .ps-ico{transform:scale(1.2) rotate(-12deg)}
#psInput{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;font:500 1.02rem 'DM Sans',sans-serif;color:var(--text-primary)}
#psInput::placeholder{color:var(--text-muted)}
#psInput::-webkit-search-cancel-button{display:none}
.ps-box kbd{font:600 .75rem 'DM Sans',sans-serif;padding:.2rem .6rem;border-radius:8px;border:1px solid var(--border);color:var(--text-muted);background:var(--bg-glass)}
.ps-box:focus-within kbd,.has-q kbd{display:none}
.ps-clear{flex:none;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;color:#fff;background:linear-gradient(135deg,#22d3ee,#a855f7);opacity:0;scale:.4;pointer-events:none;transition:opacity .3s,scale .45s var(--spring),rotate .4s}
.has-q .ps-clear{opacity:1;scale:1;pointer-events:auto}
.ps-clear:hover{rotate:90deg}
.ps-meta{display:flex;justify-content:center;align-items:center;gap:.8rem;flex-wrap:wrap;margin:1rem 0 .7rem;min-height:2rem;font-size:.88rem;color:var(--text-muted)}
.ps-more{display:none;align-items:center;gap:.4rem;padding:.35rem .9rem;border:0;border-radius:50px;cursor:pointer;font:600 .8rem 'DM Sans',sans-serif;color:#fff;background:linear-gradient(135deg,#22d3ee,#a855f7);animation:bounceIn .5s var(--spring)}
.ps-more.on{display:inline-flex}
.ps-chips{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.ps-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .95rem;border-radius:50px;cursor:pointer;font:600 .82rem 'DM Sans',sans-serif;color:var(--text-secondary);
  background:var(--bg-glass);border:1px solid var(--border);backdrop-filter:blur(8px);transition:transform .35s var(--spring),background .3s,color .3s,border-color .3s}
.ps-chip b{font-size:.7rem;padding:.05rem .45rem;border-radius:20px;background:rgba(168,85,247,.16);color:var(--accent2)}
.ps-chip:hover{transform:translateY(-3px);border-color:var(--accent);color:var(--accent)}
.ps-chip.on{color:#fff;border-color:transparent;background:linear-gradient(135deg,#22d3ee,#a855f7);box-shadow:0 8px 22px rgba(168,85,247,.4)}
.ps-chip.on b{background:rgba(255,255,255,.25);color:#fff}
.ps-hide{display:none!important}
.projects-grid.filtering{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
.ps-in{animation:psCard .7s var(--spring) backwards;animation-delay:calc(var(--i,0)*70ms)}
@keyframes psCard{from{opacity:0;transform:translateY(50px) scale(.85) rotateX(18deg)}}
.ps-pulse{animation:psPulse 1.4s ease}
@keyframes psPulse{50%{box-shadow:0 0 0 6px rgba(168,85,247,.45),0 0 50px rgba(34,211,238,.5)}}
.ps-empty{display:none;max-width:520px;margin:1rem auto 0;padding:2.4rem 2rem;text-align:center;border-radius:26px;background:var(--bg-glass);border:1px solid var(--border);backdrop-filter:blur(14px)}
.ps-empty.on{display:block;animation:psFly .7s var(--spring) both}
.ps-lens{width:84px;height:84px;margin:0 auto 1.1rem;border-radius:50%;display:grid;place-items:center;font-size:2rem;color:#fff;background:linear-gradient(135deg,#22d3ee,#a855f7);box-shadow:0 12px 34px rgba(168,85,247,.45);animation:lens 2.8s ease-in-out infinite}
@keyframes lens{25%{transform:translate(10px,-8px) rotate(12deg)}75%{transform:translate(-10px,-4px) rotate(-12deg)}}
.ps-empty h3{font-family:'Playfair Display',serif;font-size:1.3rem;margin-bottom:.4rem;word-break:break-word}
.ps-empty p{color:var(--text-muted);font-size:.9rem;margin-bottom:1.4rem}
.ps-note{display:none;margin-top:.9rem;font-size:.88rem;color:var(--text-muted)}
.ps-note.on{display:block}
.ps-note button{margin-left:.5rem;border:0;background:none;cursor:pointer;font-weight:700;color:var(--accent)}
@media(hover:none){.ps-box kbd{display:none}}
@media(max-width:640px){.ps-box{height:56px;padding-left:1.1rem}.ps-chips{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;padding:.2rem 4px .7rem;scrollbar-width:none}.ps-chips::-webkit-scrollbar{display:none}.ps-chip{flex:none}}