/* ── TOKENS ───────────────────────────────────── */ :root{ --bg: #040608; --bg2: #07090f; --surface: #0d1117; --surface2: #111827; --border: #1c2333; --text: #edf2ff; --muted: #64748b; --accent: #00d4ff; --accent2: #7c3aed; --green: #00ff88; --amber: #fbbf24; --sans: 'Space Grotesk', -apple-system, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --maxw: 1160px; --ease: cubic-bezier(.4,0,.2,1); /* surfaces that used to be hardcoded rgba() so dark AND light mode both work */ --nav-bg: rgba(4,6,8,.75); --nav-bg-solid: rgba(4,6,8,.97); --nav-border: rgba(255,255,255,.04); --tint: rgba(255,255,255,.04); --tint-hover: rgba(255,255,255,.06); --shadow-lg: rgba(0,0,0,.6); --shadow-md: rgba(0,0,0,.55); --shadow-sm: rgba(0,0,0,.5); --scrollbar: rgba(255,255,255,.15); } /* ── LIGHT MODE ─────────────────────────────────── Toggled by adding class "jp-light" to . All colours above are CSS custom properties, so simply re-declaring them here re-themes the entire site — no other CSS needs to change. */ html.jp-light{ --bg: #f6f8fc; --bg2: #ffffff; --surface: #ffffff; --surface2: #eef1f8; --border: #e1e6f0; --text: #0d1117; --muted: #57607a; --accent: #0091b8; --accent2: #6d28d9; --green: #049e63; --amber: #b7791f; --nav-bg: rgba(255,255,255,.78); --nav-bg-solid: rgba(255,255,255,.97); --nav-border: rgba(13,17,23,.06); --tint: rgba(13,17,23,.04); --tint-hover: rgba(13,17,23,.07); --shadow-lg: rgba(20,30,60,.14); --shadow-md: rgba(20,30,60,.12); --shadow-sm: rgba(20,30,60,.10); --scrollbar: rgba(13,17,23,.15); } html.jp-light body{cursor:auto;} /* custom neon cursor reads better on dark; use native pointer in light mode */ html.jp-light #jp-cursor, html.jp-light #jp-canvas{display:none;} html.jp-light .jp-orb{opacity:.06;} /* Smooth theme-switch crossfade instead of a hard flash */ body, #jp-nav,#jp-nav-links,.jp-proj-card,.jp-skill-card,.jp-cred,.jp-c-link, #jp-chat-panel,.jp-chat-bubble.bot,.jp-about-frame,.jp-t-item,.jp-proj-thumb{ transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease); } /* ── RESET ── */ *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--bg); color:var(--text); font-family:var(--sans); overflow-x:hidden; cursor:none; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none;} img{max-width:100%;display:block;} ul{list-style:none;} button{font-family:var(--sans);} ::selection{background:var(--accent);color:#000;} /* ── CUSTOM CURSOR ── */ #jp-cursor{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;} .jp-dot{ width:8px;height:8px;background:var(--accent);border-radius:50%; position:absolute;transform:translate(-50%,-50%); box-shadow:0 0 8px var(--accent); } .jp-ring{ width:36px;height:36px;border:1.5px solid rgba(0,212,255,.5); border-radius:50%;position:absolute;transform:translate(-50%,-50%); transition:width .15s var(--ease),height .15s var(--ease),background .15s; } body.hovering .jp-ring{width:52px;height:52px;background:rgba(0,212,255,.06);} /* ── RIPPLE CANVAS ── */ #jp-canvas{position:fixed;inset:0;pointer-events:none;z-index:9998;} /* ── SPLASH ELEMENTS ── */ .jp-splash{ position:fixed;pointer-events:none;z-index:9997; border-radius:50%;border:2px solid var(--accent); animation:jp-splash .65s ease-out forwards; } @keyframes jp-splash{ 0% {width:0;height:0;opacity:.8;margin-left:0;margin-top:0;} 100%{width:90px;height:90px;opacity:0;margin-left:-45px;margin-top:-45px;} } .jp-drop{ position:fixed;pointer-events:none;z-index:9997; width:4px;height:4px;border-radius:50%;background:var(--accent); animation:jp-drop .55s ease-out forwards; } @keyframes jp-drop{ 0% {opacity:.9;transform:translate(0,0) scale(1);} 100%{opacity:0;transform:translate(var(--ddx),var(--ddy)) scale(0);} } /* ── PARALLAX ORBS ── */ .jp-orb{ position:fixed;border-radius:50%;pointer-events:none; filter:blur(90px);opacity:.1;transition:transform .08s linear; } .jp-orb1{width:450px;height:450px;background:var(--accent2);top:-120px;right:-120px;} .jp-orb2{width:320px;height:320px;background:var(--accent);bottom:-80px;left:-80px;} /* ── NAV ── */ #jp-nav{ position:fixed;top:0;left:0;right:0;z-index:200; padding:16px 48px; display:flex;align-items:center;justify-content:space-between; background:var(--nav-bg);backdrop-filter:blur(18px); border-bottom:1px solid var(--nav-border); transition:padding .3s; } #jp-nav.scrolled{padding:10px 48px;} .jp-nav-actions{display:flex;align-items:center;gap:6px;} .jp-logo{ font-family:var(--mono);font-size:14px;color:var(--accent); display:flex;align-items:center;gap:10px; } .jp-logo-dot{ width:9px;height:9px;border-radius:50%;background:var(--accent); box-shadow:0 0 10px var(--accent);animation:jp-pulse 2s infinite; } @keyframes jp-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.5);opacity:.5;}} #jp-nav-links{display:flex;align-items:center;gap:32px;} #jp-nav-links li{list-style:none;} #jp-nav-links a{ font-family:var(--mono);font-size:12px;color:#ffffff; transition:color .2s;letter-spacing:.03em; white-space:nowrap; } #jp-nav-links a:hover{color:var(--accent);} .jp-nav-cta{ font-family:var(--mono);font-size:12px;font-weight:700; background:linear-gradient(135deg,var(--accent2),var(--accent)); padding:9px 20px;border-radius:8px;color:#fff; transition:transform .2s,box-shadow .2s; } .jp-nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,212,255,.3);} /* ── SCROLL PROGRESS BAR ── */ #jp-progress{ position:fixed;top:0;left:0;height:3px;width:0%;z-index:300; background:linear-gradient(90deg,var(--accent2),var(--accent),var(--green)); transition:width .1s linear; } /* ── LIGHT / DARK MODE TOGGLE ── */ .jp-theme-toggle{ position:relative;width:52px;height:28px;border-radius:999px; border:1px solid var(--border);background:var(--surface2); cursor:pointer;flex:0 0 auto;padding:0; display:flex;align-items:center; transition:background .3s var(--ease),border-color .3s var(--ease); margin-left:8px; } .jp-theme-toggle:hover{border-color:var(--accent);} .jp-theme-toggle-thumb{ position:absolute;top:2px;left:2px; width:22px;height:22px;border-radius:50%; background:linear-gradient(135deg,var(--accent2),var(--accent)); display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px; transition:transform .3s var(--ease); box-shadow:0 2px 8px var(--shadow-sm); } html.jp-light .jp-theme-toggle-thumb{transform:translateX(24px);} .jp-theme-toggle-icons{ position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between; padding:0 7px;font-size:11px;pointer-events:none;opacity:.55; } /* ── PROJECT FILTER TABS ── */ .jp-proj-filters{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 6px;} .jp-proj-filter{ font-family:var(--mono);font-size:11px;letter-spacing:.03em; padding:8px 16px;border-radius:999px;border:1px solid var(--border); background:var(--surface);color:var(--muted);cursor:pointer; transition:all .2s var(--ease); } .jp-proj-filter:hover{color:var(--text);border-color:var(--accent);} .jp-proj-filter.active{ color:#fff;border-color:transparent; background:linear-gradient(135deg,var(--accent2),var(--accent)); } /* ── PROJECT THUMBNAILS ── */ .jp-proj-thumb{ position:relative;height:150px;overflow:hidden; display:flex;align-items:center;justify-content:center; border-bottom:1px solid var(--border); } .jp-proj-thumb-mark{ font-family:var(--mono);font-weight:700;font-size:30px;color:rgba(255,255,255,.92); letter-spacing:.02em;position:relative;z-index:1;text-shadow:0 4px 18px rgba(0,0,0,.25); } .jp-proj-thumb::after{ content:'';position:absolute;inset:0; background-image: radial-gradient(circle at 22px 22px, rgba(255,255,255,.14) 1.6px, transparent 1.6px); background-size:22px 22px; mix-blend-mode:overlay;opacity:.5; } .jp-proj-thumb-icon{position:absolute;bottom:10px;right:12px;font-size:15px;opacity:.85;z-index:1;} .jp-proj-card.jp-hidden{display:none;} .jp-proj-thumb.g1{background:linear-gradient(135deg,var(--accent2),var(--accent));} .jp-proj-thumb.g2{background:linear-gradient(135deg,var(--accent),var(--green));} .jp-proj-thumb.g3{background:linear-gradient(135deg,var(--amber),var(--accent2));} .jp-proj-thumb.g4{background:linear-gradient(135deg,var(--green),var(--accent2));} .jp-proj-thumb.g5{background:linear-gradient(135deg,var(--accent),var(--amber));} .jp-proj-thumb.g6{background:linear-gradient(135deg,var(--accent2),var(--green));} .jp-ham{ display:none;flex-direction:column;gap:5px; background:none;border:1px solid var(--border); border-radius:6px;padding:8px 10px;cursor:pointer; } .jp-ham span{width:22px;height:2px;background:var(--text);border-radius:2px;transition:.25s;} .jp-ham.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);} .jp-ham.open span:nth-child(2){opacity:0;} .jp-ham.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);} /* ── LAYOUT HELPERS ── */ .jp-wrap{max-width:var(--maxw);margin:0 auto;padding:0 48px;} section{padding:100px 0;border-bottom:1px solid var(--border);} section:last-of-type{border-bottom:none;} .jp-eyebrow{ font-family:var(--mono);font-size:11px;color:var(--accent); letter-spacing:.1em;text-transform:uppercase; display:flex;align-items:center;gap:14px;margin-bottom:18px; } .jp-eyebrow::after{content:'';flex:0 0 40px;height:1px;background:linear-gradient(90deg,var(--accent),transparent);} h2.jp-h2{font-size:clamp(28px,4vw,46px);font-weight:800;letter-spacing:-1.5px;line-height:1.1;margin-bottom:18px;} .jp-grad{background:linear-gradient(135deg,var(--accent),var(--accent2),#ff6b9d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;} /* ── BUTTONS ── */ .jp-btn-primary{ display:inline-flex;align-items:center;gap:9px; background:linear-gradient(135deg,var(--accent2),var(--accent)); padding:14px 28px;border-radius:10px;color:#fff; font-weight:700;font-size:14px; transition:transform .2s,box-shadow .2s; } .jp-btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,212,255,.35);} .jp-game-start:disabled{opacity:.6;cursor:default;transform:none;box-shadow:none;} .jp-btn-ghost{ display:inline-flex;align-items:center;gap:9px; border:1.5px solid var(--border); padding:14px 28px;border-radius:10px;color:var(--text); font-weight:600;font-size:14px;transition:all .2s; } .jp-btn-ghost:hover{border-color:var(--accent);color:var(--accent);} .jp-btn-cv{ display:inline-flex;align-items:center;gap:9px; border:1.5px solid var(--green); background:rgba(0,255,136,.08); padding:14px 28px;border-radius:10px;color:var(--green); font-weight:700;font-size:14px;cursor:pointer; transition:all .2s; } .jp-btn-cv:hover{background:rgba(0,255,136,.18);transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,255,136,.22);} /* ── HERO ── */ #jp-hero{ min-height:100vh;display:flex;align-items:center; position:relative;overflow:hidden;padding-top:80px; } .jp-hero-bg{ position:absolute;inset:0; background: radial-gradient(ellipse 80% 60% at 65% 30%,rgba(124,58,237,.18) 0%,transparent 60%), radial-gradient(ellipse 50% 40% at 15% 80%,rgba(0,212,255,.1) 0%,transparent 55%); pointer-events:none; } .jp-hero-grid{ position:absolute;inset:0; background-image:linear-gradient(rgba(0,212,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.025) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse 75% 75% at 50% 50%,black,transparent); pointer-events:none; } .jp-hero-inner{ display:grid;grid-template-columns:1fr 1fr; gap:64px;align-items:center;width:100%;position:relative;z-index:2; } /* character scene */ .jp-char-scene{position:relative;width:100%;max-width:440px;aspect-ratio:4/5;margin:0 auto;} .jp-char-glow{ position:absolute;bottom:0;left:50%;transform:translateX(-50%); width:72%;height:56px; background:radial-gradient(ellipse,rgba(0,212,255,.45) 0%,transparent 70%); filter:blur(22px);animation:jp-glow 3s ease-in-out infinite; } @keyframes jp-glow{0%,100%{opacity:.6;transform:translateX(-50%) scaleX(1);}50%{opacity:1;transform:translateX(-50%) scaleX(1.25);}} .jp-char-img{ width:100%;height:100%;object-fit:contain; filter:drop-shadow(0 24px 48px rgba(0,212,255,.28)); transform-origin:50% 90%; transition:transform .06s ease-out; will-change:transform; animation:jp-float 4s ease-in-out infinite; } @keyframes jp-float{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-14px) rotate(1.2deg);}} .jp-char-orbit{ position:absolute;bottom:-24px;left:50%;transform:translateX(-50%); width:62%;height:36px;border-radius:50%; border:1.5px solid rgba(0,212,255,.28); box-shadow:0 0 24px rgba(0,212,255,.18); animation:jp-orbit 7s linear infinite; } @keyframes jp-orbit{from{transform:translateX(-50%) rotateX(72deg) rotate(0);}to{transform:translateX(-50%) rotateX(72deg) rotate(360deg);}} .jp-chips{position:absolute;inset:0;pointer-events:none;} .jp-chip{ position:absolute; background:rgba(13,17,23,.92);border:1px solid var(--border); border-radius:12px;padding:9px 15px; font-family:var(--mono);font-size:11px;color:var(--accent); white-space:nowrap; animation:jp-chip-float 4s ease-in-out infinite; backdrop-filter:blur(8px); } .jp-chip:nth-child(1){top:6%;left:-18%;animation-delay:0s;} .jp-chip:nth-child(2){top:24%;right:-14%;animation-delay:.9s;} .jp-chip:nth-child(3){bottom:32%;left:-22%;animation-delay:1.7s;} .jp-chip:nth-child(4){bottom:14%;right:-12%;animation-delay:2.5s;} @keyframes jp-chip-float{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}} /* hero text */ .jp-hero-label{ font-family:var(--mono);font-size:12px;color:var(--accent); display:flex;align-items:center;gap:10px;margin-bottom:22px;letter-spacing:.04em; } .jp-hero-label::before{content:'';width:28px;height:1px;background:var(--accent);} #jp-hero h1{font-size:clamp(38px,5.5vw,68px);font-weight:900;line-height:1.03;letter-spacing:-2px;margin-bottom:22px;} .jp-hero-sub{font-size:17px;color:var(--muted);line-height:1.75;margin-bottom:36px;max-width:490px;} .jp-hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:52px;} .jp-stats{display:flex;gap:44px;flex-wrap:wrap;} .jp-stat strong{display:block;font-size:30px;font-weight:900;color:var(--accent);font-family:var(--mono);line-height:1;} .jp-stat span{font-size:11px;color:var(--muted);font-family:var(--mono);letter-spacing:.04em;} /* ── ABOUT ── */ #jp-about{background:var(--bg2);} .jp-about-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:80px;align-items:center;} .jp-about-imgwrap{position:relative;} .jp-about-frame{ border-radius:24px;overflow:hidden; border:1px solid var(--border); box-shadow:0 32px 80px var(--shadow-lg); aspect-ratio:4/5; } .jp-about-frame img{width:100%;height:100%;object-fit:cover;display:block;} .jp-about-badge{ position:absolute;bottom:-22px;right:-22px; background:var(--surface);border:1px solid var(--border); border-radius:16px;padding:18px 22px;text-align:center; box-shadow:0 8px 32px var(--shadow-sm); } .jp-about-badge strong{display:block;font-size:28px;font-family:var(--mono);color:var(--accent);line-height:1;} .jp-about-badge span{font-size:11px;color:var(--muted);font-family:var(--mono);} .jp-about-text p{color:var(--muted);font-size:15.5px;line-height:1.8;margin-bottom:16px;} .jp-cred-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px;} .jp-cred{ background:var(--surface);border:1px solid var(--border); border-radius:12px;padding:16px; transition:border-color .2s,transform .2s; } .jp-cred:hover{border-color:rgba(0,212,255,.35);transform:translateY(-2px);} .jp-cred .jp-cred-cat{font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:.08em;margin-bottom:6px;} .jp-cred strong{font-size:13px;display:block;margin-bottom:3px;color:var(--text);} .jp-cred span{font-size:11.5px;color:var(--muted);} /* ── SKILLS ── */ #jp-skills{} .jp-skills-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:20px;margin-top:52px;} .jp-skill-card{ background:var(--surface);border:1px solid var(--border); border-radius:18px;padding:28px; position:relative;overflow:hidden; transition:border-color .25s,transform .25s; } .jp-skill-card::before{ content:'';position:absolute;inset:0; background:linear-gradient(135deg,rgba(0,212,255,.06),rgba(124,58,237,.04)); opacity:0;transition:opacity .25s; } .jp-skill-card:hover::before{opacity:1;} .jp-skill-card:hover{border-color:rgba(0,212,255,.35);transform:translateY(-5px);} .jp-skill-icon{ width:46px;height:46px;border-radius:12px;margin-bottom:18px; background:linear-gradient(135deg,rgba(0,212,255,.15),rgba(124,58,237,.1)); display:flex;align-items:center;justify-content:center;font-size:22px; } .jp-skill-card h3{font-size:15px;font-weight:700;margin-bottom:14px;color:var(--text);} .jp-tags{display:flex;flex-wrap:wrap;gap:8px;} .jp-tag{ font-family:var(--mono);font-size:11px; background:var(--tint);border:1px solid var(--border); padding:5px 11px;border-radius:999px;color:var(--muted); transition:all .18s; } .jp-tag:hover{background:rgba(0,212,255,.1);color:var(--accent);border-color:rgba(0,212,255,.3);} .jp-tag.learning{border-style:dashed;color:#4a5568;} /* ── EXPERIENCE ── */ #jp-experience{background:var(--bg2);} .jp-timeline{position:relative;margin-top:56px;padding-left:28px;} .jp-timeline::before{ content:'';position:absolute;left:0;top:4px;bottom:0;width:1px; background:linear-gradient(to bottom,transparent 0%,var(--accent) 15%,var(--accent2) 80%,transparent 100%); } .jp-t-item{position:relative;padding-bottom:52px;} .jp-t-item:last-child{padding-bottom:0;} .jp-t-dot{ position:absolute;left:-34px;top:5px;width:13px;height:13px;border-radius:50%; background:var(--bg);border:2px solid var(--accent); box-shadow:0 0 14px rgba(0,212,255,.6); } .jp-t-meta{font-family:var(--mono);font-size:11px;color:var(--accent);margin-bottom:7px;letter-spacing:.04em;} .jp-t-title{font-size:18px;font-weight:800;margin-bottom:3px;} .jp-t-company{font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:14px;} .jp-t-list{padding:0;} .jp-t-list li{color:var(--muted);font-size:14.5px;line-height:1.65;padding:4px 0 4px 20px;position:relative;} .jp-t-list li::before{content:'▸';position:absolute;left:0;color:var(--accent);} .jp-t-stack{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;} .jp-t-stack span{ font-family:var(--mono);font-size:11px; background:rgba(0,212,255,.07);border:1px solid rgba(0,212,255,.2); padding:4px 10px;border-radius:6px;color:var(--accent); } /* ── PROJECTS ── */ #jp-projects{} .jp-proj-label{ font-family:var(--mono);font-size:11px;color:var(--muted); letter-spacing:.1em;text-transform:uppercase;margin:44px 0 20px; padding-bottom:10px;border-bottom:1px solid var(--border); } .jp-proj-label:first-of-type{margin-top:48px;} .jp-proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-bottom:10px;} .jp-proj-card{ background:var(--surface);border:1px solid var(--border); border-radius:20px;overflow:hidden;display:flex;flex-direction:column; transition:transform .3s,border-color .3s,box-shadow .3s; } .jp-proj-card:hover{ transform:translateY(-7px); border-color:rgba(124,58,237,.5); box-shadow:0 28px 64px var(--shadow-md); } .jp-proj-top{padding:26px 26px 0;flex-grow:1;} .jp-proj-num{font-family:var(--mono);font-size:10px;color:var(--accent2);margin-bottom:10px;letter-spacing:.08em;} .jp-proj-card h3{font-size:16px;font-weight:700;margin-bottom:10px;} .jp-proj-card p{color:var(--muted);font-size:13.5px;line-height:1.65;} .jp-proj-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;} .jp-proj-tag{ font-family:var(--mono);font-size:10px; background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.25); padding:3px 9px;border-radius:999px;color:#a78bfa; } .jp-proj-bot{ padding:18px 26px 22px; display:flex;justify-content:space-between;align-items:center; border-top:1px solid var(--border);margin-top:18px; } .jp-proj-link{ font-family:var(--mono);font-size:11px;color:var(--accent); display:inline-flex;align-items:center;gap:6px; transition:gap .2s; } .jp-proj-link:hover{gap:12px;} .jp-proj-badge{font-family:var(--mono);font-size:10px;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.2);padding:3px 10px;border-radius:999px;color:var(--accent);} /* ── CONTACT ── */ #jp-contact{background:var(--bg2);text-align:center;} .jp-contact-inner{max-width:660px;margin:0 auto;} .jp-contact-inner p{font-size:17px;color:var(--muted);line-height:1.75;margin:14px 0 36px;} .jp-contact-links{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;} .jp-c-link{ display:inline-flex;align-items:center;gap:10px; border:1px solid var(--border);padding:13px 22px;border-radius:12px; color:var(--text);font-family:var(--mono);font-size:12px; transition:all .2s; } .jp-c-link:hover{border-color:var(--accent);color:var(--accent);} /* ── FOOTER ── */ #jp-footer{ padding:28px 48px;text-align:center; font-family:var(--mono);font-size:12px;color:var(--muted); } /* ── MINI GAME: SQUASH THE BUG ── */ #jp-game{background:var(--bg2);} .jp-game-card{ background:var(--surface);border:1px solid var(--border);border-radius:20px; padding:24px;margin-top:8px; } .jp-game-hud{ display:flex;align-items:center;gap:22px;flex-wrap:wrap; padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--border); } .jp-game-stat{display:flex;flex-direction:column;gap:2px;font-family:var(--mono);} .jp-game-stat span{font-size:10px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;} .jp-game-stat strong{font-size:20px;color:var(--accent);} .jp-game-start{margin-left:auto;padding:10px 22px;font-size:12px;} .jp-game-board{ position:relative; height:260px;border-radius:14px; background: linear-gradient(var(--tint) 1px,transparent 1px), linear-gradient(90deg,var(--tint) 1px,transparent 1px); background-size:26px 26px; background-color:var(--surface2); border:1px solid var(--border); overflow:hidden; } .jp-bug{ position:absolute;width:42px;height:42px;border:none;background:none; font-size:26px;cursor:pointer;line-height:1; display:flex;align-items:center;justify-content:center; transform:scale(0);animation:jp-bug-in .18s var(--ease) forwards; filter:drop-shadow(0 4px 10px var(--shadow-sm)); } @keyframes jp-bug-in{to{transform:scale(1);}} .jp-bug.jp-squashed{animation:jp-bug-out .22s var(--ease) forwards;pointer-events:none;} @keyframes jp-bug-out{to{transform:scale(0) rotate(25deg);opacity:0;}} .jp-game-msg{margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--muted);} .jp-game-msg.win{color:var(--green);} @media(max-width:600px){ .jp-game-board{height:220px;} .jp-game-start{margin-left:0;width:100%;} } /* ── SCROLL REVEAL ── */ .jp-reveal{ opacity:0; transform:translateY(36px) scale(.97); filter:blur(6px); transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease); } .jp-reveal.jp-visible{opacity:1;transform:none;filter:blur(0);} /* Smooth easing for JS-driven tilt/magnetic transforms */ .jp-proj-card,.jp-skill-card{transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;} .jp-btn-primary,.jp-btn-ghost,.jp-btn-cv,.jp-nav-cta{transition:transform .18s var(--ease),box-shadow .2s;} .jp-about-imgwrap{transition:transform .1s linear;} /* ── RESPONSIVE ── */ @media(max-width:960px){ .jp-hero-inner{grid-template-columns:1fr;text-align:center;} .jp-hero-label{justify-content:center;} .jp-hero-label::before{display:none;} .jp-hero-sub{margin:0 auto 36px;} .jp-hero-btns{justify-content:center;} .jp-stats{justify-content:center;} .jp-char-scene{max-width:300px;} .jp-about-grid{grid-template-columns:1fr;gap:60px;} .jp-about-imgwrap{max-width:400px;margin:0 auto;} #jp-nav{padding:14px 24px;} #jp-nav-links{ display:none;position:absolute;top:100%;left:0;right:0; flex-direction:column;align-items:flex-start; background:var(--nav-bg-solid); padding:24px;gap:20px;border-bottom:1px solid var(--border); max-height:calc(100vh - 60px);overflow-y:auto; } #jp-nav-links.open{display:flex;} #jp-nav-links a{font-size:14px;} .jp-nav-actions > .jp-nav-cta{display:none;} .jp-ham{display:flex;} .jp-wrap{padding:0 24px;} } @media(max-width:600px){ #jp-hero h1{letter-spacing:-1px;} .jp-stats{gap:20px;} .jp-hero-btns{flex-direction:column;align-items:center;} .jp-cred-grid{grid-template-columns:1fr;} .jp-about-badge{right:8px;bottom:-16px;} .jp-chips{display:none;} /* decorative floating chips overflow narrow viewports */ .jp-orb1{width:260px;height:260px;} .jp-orb2{width:200px;height:200px;} .jp-proj-grid{grid-template-columns:1fr;} .jp-skills-wrap{grid-template-columns:1fr;} } /* Touch devices: no mouse, so drop the custom cursor / ripple overhead and restore the native pointer instead of a permanently hidden one. */ @media(hover:none),(pointer:coarse){ body{cursor:auto;} #jp-cursor,#jp-canvas{display:none;} } /* ── ABOUT-ME CHATBOT ── */ #jp-chat{position:fixed;bottom:24px;right:24px;z-index:400;font-family:var(--sans);} #jp-chat-fab{ width:58px;height:58px;border-radius:50%;border:none;cursor:pointer; background:linear-gradient(135deg,var(--accent2),var(--accent)); display:flex;align-items:center;justify-content:center; box-shadow:0 10px 30px rgba(0,212,255,.35); transition:transform .2s var(--ease),box-shadow .2s; } #jp-chat-fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 40px rgba(0,212,255,.5);} .jp-chat-fab-icon{font-size:24px;line-height:1;} #jp-chat-panel{ position:absolute;bottom:74px;right:0; width:340px;max-width:calc(100vw - 32px); max-height:min(70vh,520px); background:var(--surface);border:1px solid var(--border); border-radius:20px; box-shadow:0 24px 60px var(--shadow-md); display:flex;flex-direction:column;overflow:hidden; opacity:0;transform:translateY(16px) scale(.96); pointer-events:none; transition:opacity .22s var(--ease),transform .22s var(--ease); } #jp-chat-panel.open{opacity:1;transform:none;pointer-events:auto;} .jp-chat-head{ display:flex;align-items:center;justify-content:space-between; padding:16px 18px;border-bottom:1px solid var(--border); background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(124,58,237,.06)); } .jp-chat-head strong{display:block;font-size:14px;color:var(--text);} .jp-chat-head span{display:block;font-size:11px;color:var(--accent);font-family:var(--mono);margin-top:2px;} #jp-chat-close{ background:none;border:none;color:var(--muted);font-size:14px;cursor:pointer; padding:4px 8px;border-radius:6px;transition:color .2s,background .2s; } #jp-chat-close:hover{color:var(--text);background:var(--tint-hover);} #jp-chat-msgs{ flex:1;overflow-y:auto;padding:16px 18px; display:flex;flex-direction:column;gap:10px; min-height:180px; } .jp-chat-bubble{ max-width:85%;padding:10px 14px;border-radius:14px; font-size:13px;line-height:1.55; animation:jp-chat-in .25s var(--ease); } @keyframes jp-chat-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} .jp-chat-bubble.bot{ background:var(--surface2);border:1px solid var(--border);color:var(--text); align-self:flex-start;border-bottom-left-radius:4px; } .jp-chat-bubble.user{ background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff; align-self:flex-end;border-bottom-right-radius:4px; } .jp-chat-typing{display:flex;gap:4px;padding:14px;align-items:center;} .jp-chat-typing span{ width:6px;height:6px;border-radius:50%;background:var(--muted); animation:jp-chat-dot 1.1s infinite ease-in-out; } .jp-chat-typing span:nth-child(2){animation-delay:.15s;} .jp-chat-typing span:nth-child(3){animation-delay:.3s;} @keyframes jp-chat-dot{0%,60%,100%{opacity:.3;transform:translateY(0);}30%{opacity:1;transform:translateY(-3px);}} #jp-chat-chips{ display:flex;gap:8px;padding:0 18px 12px;overflow-x:auto; scrollbar-width:none; } #jp-chat-chips::-webkit-scrollbar{display:none;} .jp-chat-chip{ flex:0 0 auto;font-family:var(--mono);font-size:11px;color:var(--accent); background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.25); padding:6px 12px;border-radius:999px;cursor:pointer;white-space:nowrap; transition:all .18s; } .jp-chat-chip:hover{background:rgba(0,212,255,.18);} #jp-chat-form{ display:flex;gap:8px;padding:14px 16px;border-top:1px solid var(--border); } #jp-chat-input{ flex:1;background:var(--surface2);border:1px solid var(--border); border-radius:10px;padding:10px 12px;color:var(--text); font-family:var(--sans);font-size:13px;outline:none; transition:border-color .2s; } #jp-chat-input:focus{border-color:var(--accent);} #jp-chat-form button[type="submit"]{ width:38px;height:38px;border-radius:10px;border:none;cursor:pointer; background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff; font-size:14px;flex:0 0 auto;transition:transform .15s; } #jp-chat-form button[type="submit"]:hover{transform:scale(1.06);} @media(max-width:600px){ #jp-chat{bottom:16px;right:16px;} #jp-chat-panel{ width:calc(100vw - 32px); bottom:70px; } }