/* Core layout helpers */
.container { max-width: 80rem; margin-inline: auto; padding-inline: 1.5rem; }

.section { padding-block: 5rem; }
@media (min-width: 1024px) { .section { padding-block: 6rem; } }

.section-title { font-family: 'Space Grotesk', Inter, ui-sans-serif; font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); letter-spacing: -0.02em; }
.section-lead { color: oklch(50% 0 0 / .85); }
.dark .section-lead { color: rgba(226, 232, 240, 0.7); }

/* Nav links */
.nav-link { position: relative; color: rgb(100 116 139); }
.dark .nav-link { color: rgb(203 213 225); }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: linear-gradient(90deg, #38bdf8, #a78bfa, #34d399);
  transition: width .25s ease;
}
.nav-link:hover::after { width: 100%; }

/* UI tokens */
.glass { border: 1px solid rgba(255,255,255,.12); background: color-mix(in oklab, white 70%, transparent); backdrop-filter: blur(8px); border-radius: .75rem; box-shadow: 0 10px 30px rgba(0,0,0,.06); }
.dark .glass { background: color-mix(in oklab, white 7%, transparent); }

.i-bullet { width: .55rem; height: .55rem; border-radius: 999px; background: radial-gradient(circle at 30% 30%, #38bdf8, #a78bfa 45%, #34d399); box-shadow: 0 0 0 1px rgba(255,255,255,.25); display: inline-block; }

/* Project cards */
.project-card { position: relative; border-radius: 1rem; perspective: 1000px; transform-style: preserve-3d; }
.project-card-inner { position: relative; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.7); border-radius: 1rem; padding: 1.25rem; min-height: 12rem; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; box-shadow: 0 10px 30px rgba(2,6,23,.08); }
.dark .project-card-inner { background: rgba(255,255,255,.05); }
.project-card:hover .project-card-inner { box-shadow: 0 15px 50px rgba(56,189,248,.2); }
.project-badge { display: inline-block; font-size: .75rem; padding: .25rem .5rem; border-radius: .5rem; color: rgb(71 85 105); background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.5); }
.dark .project-badge { color: rgb(203 213 225); background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.12); }
.project-title { font-weight: 700; margin-top: .65rem; font-size: 1.125rem; letter-spacing: -.01em; }
.project-desc { margin-top: .35rem; color: rgb(100 116 139); }
.dark .project-desc { color: rgb(148 163 184); }
.project-cta { margin-top: .85rem; font-weight: 600; color: rgb(15 23 42); }
.dark .project-cta { color: rgb(226 232 240); }

.project-card .shine { background: linear-gradient(120deg, rgba(255,255,255,.18), rgba(255,255,255,0) 30%); transform: translateX(-100%); transition: transform .4s ease; }
.project-card:hover .shine { transform: translateX(100%); }

/* Inputs and buttons */
.input { width: 100%; border-radius: .65rem; background: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.5); padding: .75rem .9rem; color: rgb(30 41 59); outline: none; }
.input:focus { box-shadow: 0 0 0 4px rgba(56,189,248,.25); border-color: rgba(56,189,248,.4); }
.dark .input { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: rgba(226,232,240,1); }
.copy-btn { display: flex; align-items: center; width: 100%; gap: .75rem; padding: .75rem .9rem; border-radius: .65rem; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.75); color: rgb(51 65 85); transition: transform .12s ease, box-shadow .2s ease; }
.copy-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(56,189,248,.15); }
.dark .copy-btn { background: rgba(255,255,255,.06); color: rgb(226 232 240); border-color: rgba(255,255,255,.12); }

/* Reveal on scroll */
section { --reveal: translateY(16px); --opacity: 0; transition: transform .6s ease, opacity .8s ease; transform: var(--reveal); opacity: var(--opacity); }
section.is-visible { --reveal: translateY(0); --opacity: 1; }

/* Small utilities */
#cursor-glow { position: fixed; left: 0; top: 0; transform: translate(-50%, -50%); pointer-events: none; }

/* Avatar styles */
.conic-border { width: clamp(220px, 35vw, 420px); height: clamp(220px, 35vw, 420px); background: conic-gradient(from var(--angle, 0deg), #38bdf8, #a78bfa, #34d399, #38bdf8); animation: spin 12s linear infinite; }
@keyframes spin { to { --angle: 360deg; } }
.avatar-inner { position: relative; width: 100%; height: 100%; background: rgba(255,255,255,.7); }
.dark .avatar-inner { background: rgba(255,255,255,.06); }
.avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.02) saturate(1.02); }
.avatar-aura { position: absolute; inset: -18%; z-index: -1; border-radius: 9999px; background: radial-gradient(closest-side, rgba(56,189,248,.25), rgba(244,63,94,.18), rgba(16,185,129,.2), transparent 70%); filter: blur(30px); }
@media (prefers-reduced-motion: reduce) { .conic-border { animation: none; } }

/* Signature underline */
.signature { width: 220px; height: 42px; }
.signature path { stroke: #38bdf8; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; stroke-dashoffset: 420; animation: draw 2s ease forwards; }
.sig-wrap svg { display: block; }
.sig-wrap svg defs, .signature defs { }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Divider */
.divider { opacity: .9; }

/* Floaty animation */
.conic-border { animation: spin 12s linear infinite, floaty 6s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Now bar */
.nowbar-pill { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: .5rem .9rem; font-size: .875rem; color: #0f172a; background: rgba(255,255,255,.7); box-shadow: 0 10px 30px rgba(2,6,23,.12); }
.dark .nowbar-pill { color: #e2e8f0; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }

/* Project media */
.project-media { position: relative; overflow: hidden; border-radius: .75rem; aspect-ratio: 16 / 9; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(120deg, rgba(56,189,248,.25), rgba(244,63,94,.18), rgba(16,185,129,.22)); }
.project-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 30% 20%, rgba(255,255,255,.25), transparent 60%); mix-blend-mode: soft-light; }

/* Infinite ticker */
.ticker { position: relative; overflow: hidden; border-block: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.6); }
.dark .ticker { background: rgba(255,255,255,.05); }
.ticker__track { display: flex; gap: 2.5rem; padding-block: .9rem; animation: scrollX 25s linear infinite; white-space: nowrap; font-weight: 600; letter-spacing: .02em; color: rgb(100 116 139); }
.dark .ticker__track { color: rgb(203 213 225); }
@keyframes scrollX { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Creative gradient text animation */
.animated-gradient { background: linear-gradient(90deg, #38bdf8, #a78bfa, #34d399); background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shift 10s ease infinite; }
@keyframes shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Ripple element */
.ripple { position: absolute; border-radius: 999px; transform: translate(-50%, -50%); pointer-events: none; background: radial-gradient(circle, rgba(255,255,255,.45) 0%, rgba(255,255,255,.2) 30%, rgba(255,255,255,0) 60%); animation: ripple .6s ease-out forwards; }
@keyframes ripple { from { width: 0; height: 0; opacity: .8; } to { width: 260px; height: 260px; opacity: 0; } }

/* Magnetic elements */
[data-magnetic] { will-change: transform; transition: transform .12s ease-out; }
[data-magnetic]:hover { transform: translateZ(0); }

/* Chips / filters */
.chip { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.6); color: rgb(51 65 85); padding: .4rem .7rem; border-radius: 999px; cursor: pointer; user-select: none; }
.dark .chip { background: rgba(255,255,255,.06); color: rgb(226 232 240); }
.chip[data-active="true"] { box-shadow: 0 0 0 2px rgba(56,189,248,.35), 0 10px 30px rgba(56,189,248,.18); border-color: rgba(56,189,248,.4); }

/* Command palette */
#cmd { display: none; }
#cmd.open { display: flex; }
.cmd-item { display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem; border-radius: .5rem; cursor: pointer; }
.cmd-item:hover, .cmd-item[aria-selected="true"] { background: rgba(56,189,248,.12); }
.cmd-item small { color: rgb(100 116 139); }
.dark .cmd-item small { color: rgb(148 163 184); }

/* Lightbox */
#lightbox { display: none; }
#lightbox.open { display: block; }