/* frost portfolio v2 — hand-rolled, no libs */
@font-face { font-family:'DM Sans'; src:url('../assets/fonts/dm-sans-400.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('../assets/fonts/dm-sans-500.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('../assets/fonts/dm-sans-700.woff2') format('woff2'); font-weight:700; font-display:swap; }

:root {
  --bg:#0b0e14; --bg-2:#10141d; --card:#151a24; --line:#232a38;
  --ice:#93c5fd; --silver:#e2e8f0; --text:#f8fafc; --muted:#64748b;
  --body:'DM Sans',system-ui,'Segoe UI',sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--body); line-height:1.6; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:var(--ice); text-decoration:none; }
ul { list-style:none; }
button { font-family:inherit; cursor:pointer; }
section { scroll-margin-top:90px; }
.wrap { max-width:1060px; margin:0 auto; padding:0 24px; }
main, .hero, .nav, footer { position:relative; z-index:1; }

/* starfield sits behind everything */
#stars { position:fixed; inset:0; z-index:0; pointer-events:none; }

/* floating pill nav */
.nav { position:fixed; top:16px; left:0; right:0; z-index:50; display:flex; justify-content:center; pointer-events:none; }
.pillbar { pointer-events:auto; display:flex; align-items:center; gap:4px; background:rgba(16,20,29,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:999px; padding:6px 8px 6px 6px; transition:background .3s ease, border-color .3s ease, box-shadow .3s ease; }
.nav.scrolled .pillbar { background:rgba(11,14,20,.92); border-color:rgba(147,197,253,.28); box-shadow:0 8px 30px rgba(0,0,0,.4); }
.brand { display:flex; align-items:center; gap:9px; padding:3px 12px 3px 3px; }
.ava { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--ice),#3b5f8f); color:#0b0e14; font-weight:700; font-size:.7rem; display:flex; align-items:center; justify-content:center; letter-spacing:.5px; }
.bname { color:var(--silver); font-weight:700; font-size:.9rem; }
.links { display:flex; align-items:center; gap:2px; }
.navlink { display:inline-block; color:var(--muted); font-size:.85rem; font-weight:500; padding:8px 14px; border-radius:999px; transition:color .25s, background .25s; }
.navlink:hover { color:var(--silver); }
.navlink.active { background:rgba(147,197,253,.12); color:var(--ice); }
.hire { background:var(--silver); color:#0b0e14; font-weight:700; font-size:.85rem; padding:9px 18px; border-radius:999px; margin-left:6px; display:inline-flex; align-items:center; gap:7px; transition:transform .25s ease, box-shadow .25s ease; }
.hire:hover { transform:translateY(-2px); box-shadow:0 0 22px rgba(226,232,240,.25); }
.hire .arr { transition:transform .25s ease; display:inline-block; }
.hire:hover .arr { transform:translateX(3px); }
.burger { display:none; background:none; border:0; color:var(--silver); font-size:1.3rem; padding:6px 12px; }

/* hero */
.hero { min-height:100svh; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.hero-inner { position:relative; z-index:2; text-align:center; max-width:760px; padding-top:70px; padding-bottom:80px; }
.kicker { color:var(--muted); text-transform:uppercase; letter-spacing:4px; font-size:.72rem; font-weight:700; margin-bottom:16px; }
.chip-status { display:inline-flex; align-items:center; gap:8px; background:rgba(21,26,36,.7); border:1px solid var(--line); color:var(--silver); font-size:.8rem; font-weight:500; padding:7px 16px; border-radius:999px; margin-bottom:26px; }
.chip-status i { width:8px; height:8px; border-radius:50%; background:#4ade80; box-shadow:0 0 10px #4ade80; animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.chip-status.hidden { display:none; }
.hero h1 { font-size:clamp(2.7rem,7.5vw,4.8rem); font-weight:700; letter-spacing:-.02em; line-height:1.06; }
.squigwrap { position:relative; display:inline-block; }
.squig { position:absolute; left:2%; bottom:-12px; width:96%; height:14px; overflow:visible; }
.squig path { fill:none; stroke:var(--ice); stroke-width:3.5; stroke-linecap:round; stroke-dasharray:320; stroke-dashoffset:320; animation:draw 1.1s ease .7s forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
.sub { color:var(--muted); font-size:1.06rem; max-width:520px; margin:30px auto 34px; }
.cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 30px; border-radius:999px; font-weight:700; font-size:.95rem; border:0; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.btn:hover { transform:translateY(-3px); }
.btn-primary { background:var(--silver); color:#0b0e14; box-shadow:0 0 26px rgba(147,197,253,.22); }
.btn-primary:hover { box-shadow:0 0 34px rgba(147,197,253,.4); }
.btn-ghost { background:rgba(21,26,36,.7); border:1px solid var(--line); color:var(--silver); }
.btn-ghost:hover { border-color:var(--ice); }

/* orbital rings + floating chips */
.orbits { position:absolute; inset:0; z-index:1; pointer-events:none; }
.ring { position:absolute; inset:0; margin:auto; border:1px solid rgba(147,197,253,.09); border-radius:50%; }
.r1 { width:440px; height:440px; animation:spin 70s linear infinite; }
.r2 { width:680px; height:680px; animation:spin 100s linear infinite reverse; }
.r3 { width:940px; height:940px; animation:spin 140s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.chipico { position:absolute; width:46px; height:46px; border-radius:50%; background:rgba(21,26,36,.85); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:1.1rem; box-shadow:0 0 18px rgba(147,197,253,.12); }
.r1 .chipico { animation:spin 70s linear infinite reverse; }
.r2 .chipico { animation:spin 100s linear infinite; }
.r3 .chipico { animation:spin 140s linear infinite reverse; }
.ci1 { top:-23px; left:50%; margin-left:-23px; }
.ci2 { top:50%; right:-23px; margin-top:-23px; }
.ci3 { bottom:-23px; left:50%; margin-left:-23px; }
.ci4 { top:50%; left:-23px; margin-top:-23px; }

/* scroll cue */
.scrollcue { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:8px; }
.scrollcue .txt { color:var(--muted); font-size:.65rem; letter-spacing:4px; font-weight:700; }
.scrollcue .wheel { width:20px; height:32px; border:1px solid var(--line); border-radius:11px; position:relative; }
.scrollcue .wheel::before { content:''; position:absolute; top:6px; left:50%; margin-left:-1.5px; width:3px; height:6px; border-radius:2px; background:var(--ice); animation:wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(10px);opacity:0} 100%{transform:translateY(0);opacity:0} }

/* section shells */
.section { padding:90px 0; }
.sec-head { text-align:center; margin-bottom:44px; }
.sec-head h2 { font-size:clamp(1.7rem,3.6vw,2.4rem); font-weight:700; letter-spacing:-.01em; }
.sec-sub { color:var(--muted); font-size:.95rem; margin-top:8px; }

/* skills */
.skills-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.skill { background:rgba(21,26,36,.6); border:1px solid var(--line); border-radius:18px; padding:26px 22px; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.skill:hover { transform:translateY(-6px); border-color:rgba(147,197,253,.45); box-shadow:0 14px 40px rgba(147,197,253,.08); }
.skill .ico { width:46px; height:46px; border-radius:14px; background:rgba(147,197,253,.1); border:1px solid rgba(147,197,253,.2); display:flex; align-items:center; justify-content:center; font-size:1.25rem; }
.skill h3 { margin:16px 0 6px; font-size:1.02rem; font-weight:700; }
.skill p { color:var(--muted); font-size:.86rem; margin-bottom:18px; }
.meter { height:4px; background:var(--bg); border-radius:99px; overflow:hidden; }
.meter i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--ice),var(--silver)); transform:scaleX(0); transform-origin:left; transition:transform 1.2s cubic-bezier(.16,1,.3,1) .2s; }
.skill.in .meter i { transform:scaleX(var(--lvl,0)); }

/* work — alternating rows */
.workrows { display:flex; flex-direction:column; gap:72px; }
.workrow { display:flex; align-items:center; gap:48px; }
.workrow:nth-child(even) { flex-direction:row-reverse; }
.media { flex:1.15; border-radius:20px; overflow:hidden; border:1px solid var(--line); cursor:zoom-in; transition:transform .4s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .4s ease; }
.media:hover { transform:translateY(-6px); border-color:rgba(147,197,253,.45); box-shadow:0 20px 60px rgba(147,197,253,.12); }
.media img { width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.media:hover img { transform:scale(1.05); }
.info { flex:1; }
.tag { color:var(--ice); font-size:.7rem; text-transform:uppercase; letter-spacing:3px; font-weight:700; }
.info h3 { font-size:1.5rem; font-weight:700; margin:10px 0 8px; letter-spacing:-.01em; }
.info p { color:var(--muted); font-size:.95rem; }
.pillbtn { margin-top:20px; background:rgba(21,26,36,.85); border:1px solid var(--line); color:var(--silver); padding:11px 22px; border-radius:999px; font-weight:600; font-size:.85rem; transition:transform .25s ease, border-color .25s ease; }
.pillbtn:hover { transform:translateY(-2px); border-color:var(--ice); }

/* worked-with groups strip */
.groups-sec { padding:70px 0; }
.ice { color:var(--ice); font-weight:700; }
.groups-row { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.gcard { display:flex; align-items:center; gap:12px; background:rgba(21,26,36,.6); border:1px solid var(--line); border-radius:999px; padding:10px 24px 10px 12px; transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.gcard:hover { transform:translateY(-3px); border-color:rgba(147,197,253,.45); box-shadow:0 10px 30px rgba(147,197,253,.1); }
.gicon { width:42px; height:42px; border-radius:50%; border:1px solid var(--line); object-fit:cover; }
.gname { color:var(--text); font-weight:700; font-size:.92rem; line-height:1.25; }
.gcheck { color:var(--ice); font-size:.85rem; }
.gmem { color:var(--muted); font-size:.75rem; }

/* more builds mini grid */
.more-title { font-size:1.3rem; font-weight:700; margin:72px 0 24px; }
.minigrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.mini { cursor:zoom-in; }
.mini-img { border-radius:14px; overflow:hidden; border:1px solid var(--line); transition:border-color .3s ease, box-shadow .3s ease; }
.mini-img img { width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.mini:hover .mini-img { border-color:rgba(147,197,253,.45); box-shadow:0 12px 36px rgba(147,197,253,.1); }
.mini:hover .mini-img img { transform:scale(1.05); }
.mini h3 { font-size:1rem; font-weight:700; margin-top:12px; }
.xcard { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; background:rgba(21,26,36,.6); border:1px solid var(--line); border-radius:14px; aspect-ratio:16/10; text-align:center; padding:20px; transition:transform .3s ease, border-color .3s ease; }
.xcard:hover { transform:translateY(-4px); border-color:var(--ice); }
.xmark { width:52px; height:52px; border-radius:50%; background:rgba(147,197,253,.1); border:1px solid rgba(147,197,253,.25); display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:var(--silver); }
.xtitle { color:var(--text); font-weight:700; }
.xsub { color:var(--muted); font-size:.85rem; }

/* reviews marquee */
.marquee { overflow:hidden; padding:6px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.track { display:flex; gap:18px; width:max-content; padding:0 9px; animation:scroll var(--dur,40s) linear infinite; }
.marquee:hover .track { animation-play-state:paused; }
@keyframes scroll { to { transform:translateX(-50%); } }
.vouch { width:330px; flex:none; background:rgba(21,26,36,.6); border:1px solid var(--line); border-radius:18px; padding:22px; }
.vouch .top { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--ice),#3b5f8f); color:#0b0e14; font-weight:700; font-size:.8rem; display:flex; align-items:center; justify-content:center; }
.vouch .name { font-weight:700; font-size:.95rem; line-height:1.3; }
.vouch .when { color:var(--muted); font-size:.75rem; }
.stars { color:var(--ice); letter-spacing:2px; font-size:.85rem; margin-bottom:8px; }
.vouch .quote { color:var(--muted); font-size:.9rem; }

/* contact */
.contact .sec-head { margin-bottom:30px; }
.contact .wrap { text-align:center; }
.status { display:inline-flex; align-items:center; gap:8px; background:rgba(21,26,36,.7); border:1px solid var(--line); padding:8px 18px; border-radius:999px; font-size:.85rem; font-weight:700; margin-bottom:28px; }
.status i { width:9px; height:9px; border-radius:50%; background:#4ade80; box-shadow:0 0 10px #4ade80; }
.status.closed i { background:#f87171; box-shadow:0 0 10px #f87171; }
.contact-btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:28px; }
#copyDiscord { position:relative; }
.tip { position:absolute; top:-44px; left:50%; transform:translateX(-50%) translateY(6px); background:var(--silver); color:#0b0e14; font-size:.75rem; font-weight:700; padding:6px 12px; border-radius:6px; opacity:0; transition:opacity .3s ease, transform .3s ease; pointer-events:none; white-space:nowrap; }
.tip.show { opacity:1; transform:translateX(-50%) translateY(0); }
.socials { display:flex; gap:20px; justify-content:center; }
.socials a { color:var(--muted); font-weight:600; font-size:.9rem; transition:color .25s; }
.socials a:hover { color:var(--ice); }

/* footer */
footer { border-top:1px solid var(--line); padding:40px 0; background:rgba(11,14,20,.6); }
.foot-inner { display:flex; flex-direction:column; align-items:center; gap:16px; }
.footlinks { display:flex; gap:22px; }
.footlinks a { color:var(--muted); font-size:.85rem; font-weight:500; transition:color .25s; }
.footlinks a:hover { color:var(--ice); }
.copy { color:var(--muted); font-size:.78rem; }

/* lightbox */
.lb { position:fixed; inset:0; z-index:100; background:rgba(7,9,14,.92); display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.lb.open { opacity:1; pointer-events:auto; }
.lb figure { max-width:900px; width:100%; }
.lb img { width:100%; border-radius:18px; border:1px solid var(--line); }
.lb figcaption { margin-top:14px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; text-align:left; }
.lb h3 { font-size:1.1rem; }
.lb p { color:var(--muted); font-size:.9rem; }
.lb .x, .lb .prev, .lb .next { position:fixed; background:var(--card); border:1px solid var(--line); color:var(--silver); width:46px; height:46px; border-radius:50%; font-size:1.05rem; transition:transform .25s ease, border-color .25s ease; }
.lb .x { top:20px; right:20px; }
.lb .prev { left:16px; top:50%; margin-top:-23px; }
.lb .next { right:16px; top:50%; margin-top:-23px; }
.lb button:hover { transform:scale(1.1); border-color:var(--ice); }

/* scroll reveals */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity:1; transform:none; }
.reveal[data-delay="1"] { transition-delay:.12s; }
.reveal[data-delay="2"] { transition-delay:.24s; }
.reveal[data-delay="3"] { transition-delay:.36s; }

/* responsive */
@media (max-width:1024px) {
  .skills-grid { grid-template-columns:repeat(2,1fr); }
  .minigrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .r3 { display:none; }
}
@media (max-width:640px) {
  .burger { display:block; }
  .bname { display:none; }
  .links { display:none; position:fixed; top:74px; left:16px; right:16px; background:rgba(11,14,20,.97); border:1px solid var(--line); border-radius:20px; flex-direction:column; align-items:stretch; padding:14px; gap:4px; }
  .links.open { display:flex; }
  .links .navlink { padding:12px 16px; }
  .links .hire { margin:8px 4px 4px; justify-content:center; }
  .skills-grid { grid-template-columns:1fr; }
  .minigrid { grid-template-columns:1fr; }
  .workrow, .workrow:nth-child(even) { flex-direction:column; gap:20px; }
  .workrows { gap:52px; }
  .section { padding:84px 0; }
  .r2 { display:none; }
  .r1 { width:320px; height:320px; }
  .vouch { width:280px; }
}

/* calm everything for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
  .track { width:auto; flex-wrap:wrap; justify-content:center; }
  .meter i, .skill.in .meter i { transform:scaleX(var(--lvl,1)); }
  .squig path { stroke-dashoffset:0; }
}