/* Solar-system landing page — all styling lives here.
   JS keeps only genuinely dynamic values inline (orbit positions, per-planet
   gradients, drift transforms); everything static is a class below. */

/* ── reset / base ─────────────────────────────────────────────────────── */
html, body { margin: 0; padding: 0; background: #08081a; overflow: hidden; font-family: 'Nunito', sans-serif; }
* { box-sizing: border-box; }
::selection { background: rgba(255, 180, 120, .4); }
[contenteditable="true"] { outline: 1px dashed rgba(255, 210, 140, .6); outline-offset: 4px; border-radius: 5px; cursor: text; }
[contenteditable="true"]:focus { outline: 1px solid rgba(255, 210, 140, .9); }

/* ── keyframes ────────────────────────────────────────────────────────── */
@keyframes bob { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
@keyframes tw { 0%, 100% { opacity: .9 } 50% { opacity: .5 } }
@keyframes tw2 { 0%, 100% { opacity: .55 } 50% { opacity: .25 } }
@keyframes sunpulse { 0%, 100% { transform: scale(1); opacity: .9 } 50% { transform: scale(1.05); opacity: 1 } }
@keyframes coronaspin { to { transform: rotate(360deg) } }
@keyframes arrive { from { opacity: 0 } to { opacity: 1 } }
@keyframes shake { 0%, 100% { transform: translateX(0) } 20% { transform: translateX(-8px) } 40% { transform: translateX(8px) } 60% { transform: translateX(-5px) } 80% { transform: translateX(5px) } }
@keyframes slide { to { transform: translateX(-50%) } }
@keyframes mx { 0%, 100% { transform: translateX(var(--r)) } 50% { transform: translateX(calc(var(--r) * -1)) } }
@keyframes my { 0%, 100% { transform: translateY(var(--ry)) } 50% { transform: translateY(calc(var(--ry) * -1)) } }
@keyframes mz { 0%, 24.9% { z-index: 4 } 25%, 74.9% { z-index: 1 } 75%, 100% { z-index: 4 } }
@media (prefers-reduced-motion: reduce) { .pd-anim { animation: none !important } }

/* ── backdrop + starfield ─────────────────────────────────────────────── */
.bg { position: fixed; inset: 0; overflow: hidden;
  background:
    radial-gradient(1200px 820px at 78% 10%, rgba(232,137,107,.20), transparent 60%),
    radial-gradient(1000px 900px at 10% 84%, rgba(110,150,235,.18), transparent 62%),
    radial-gradient(900px 720px at 62% 96%, rgba(150,111,205,.16), transparent 60%),
    radial-gradient(1500px 1050px at 50% 44%, rgba(34,44,96,.55), transparent 72%),
    linear-gradient(160deg, #0c0e26 0%, #0a0a1e 55%, #08081a 100%); }
.stars { position: absolute; inset: -40px; pointer-events: none; will-change: transform, opacity; }
.stars1 { animation: tw 7s ease-in-out infinite; background-size: 340px 300px;
  background-image:
    radial-gradient(1.6px 1.6px at 42px 62px, rgba(255,255,255,.95), transparent),
    radial-gradient(1px 1px at 132px 158px, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 214px 92px, rgba(200,220,255,.6), transparent),
    radial-gradient(1.6px 1.6px at 302px 204px, rgba(255,255,255,.85), transparent),
    radial-gradient(1px 1px at 92px 252px, rgba(255,236,210,.7), transparent); }
.stars2 { animation: tw2 9.5s ease-in-out infinite; background-size: 290px 240px;
  background-image:
    radial-gradient(1px 1px at 180px 40px, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px at 60px 190px, rgba(200,220,255,.5), transparent),
    radial-gradient(1.4px 1.4px at 250px 130px, rgba(255,255,255,.7), transparent); }

/* ── nav ──────────────────────────────────────────────────────────────── */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 80; display: flex; align-items: center; justify-content: space-between; padding: 16px 26px; background: rgba(10,12,30,.34); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255,255,255,.06); transition: opacity .4s; }
.nav.dim { opacity: 0; pointer-events: none; }
.brand { display: flex; align-items: center; gap: 9px; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 20px; color: #fff; letter-spacing: -.3px; }
.brand-dot { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd98a, #ff8a5c); box-shadow: 0 0 12px rgba(255,150,90,.8); user-select: none; }
.nav-hint { font-family: 'Nunito', sans-serif; font-size: 13px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 7px 14px; backdrop-filter: blur(6px); }

/* ── stage (parallax + zoomable solar system) ─────────────────────────── */
.parallax { position: absolute; inset: 0; transform-origin: center center; will-change: transform; animation: arrive 1.1s ease-out both; }
.stage { position: absolute; left: 50%; top: 50%; width: 1500px; height: 1500px; margin-left: -750px; margin-top: -750px; transform-origin: center center; transition: transform .85s cubic-bezier(.22,1,.36,1); }
.orbit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 1px solid rgba(255,255,255,.07); border-radius: 50%; pointer-events: none; }

/* ── sun ──────────────────────────────────────────────────────────────── */
.sun { position: absolute; left: 750px; top: 750px; width: 300px; height: 300px; z-index: 740; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.sun-corona { position: absolute; inset: -74px; border-radius: 50%; background: conic-gradient(from 0deg, rgba(255,190,110,0), rgba(255,210,140,.30), rgba(255,150,90,.05) 55%, rgba(255,190,110,0)); filter: blur(16px); z-index: 0; pointer-events: none; animation: coronaspin 26s linear infinite; }
.sun-glow { position: absolute; inset: -64px; border-radius: 50%; background: radial-gradient(circle, rgba(255,198,122,.5), rgba(255,140,90,.20) 45%, transparent 70%); filter: blur(6px); z-index: 0; pointer-events: none; animation: sunpulse 6s ease-in-out infinite; }
.sun-body { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 42% 36%, #fff3c4, #ffb347 40%, #ff7a52 72%, #c94f2e 100%); box-shadow: inset -22px -26px 64px rgba(120,30,0,.5), inset 16px 16px 44px rgba(255,255,255,.4), 0 0 130px rgba(255,150,90,.6); z-index: 1; }
.sun-caption { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; transition: opacity .4s; }
.sun-name { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 38px; color: #fff; letter-spacing: -.5px; text-shadow: 0 2px 12px rgba(120,30,0,.55); }
.sun-role { font-family: 'Nunito', sans-serif; font-size: 14px; color: rgba(255,255,255,.92); margin-top: 7px; text-shadow: 0 1px 8px rgba(120,30,0,.6); }

/* ── hover name pill (planets + sun) ──────────────────────────────────── */
.plabel { position: absolute; left: 50%; top: calc(100% + 12px); transform: translateX(-50%) translateY(5px); white-space: nowrap; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 14px; color: #fff; background: rgba(10,12,30,.72); backdrop-filter: blur(6px); padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; box-shadow: 0 6px 20px rgba(0,0,0,.35); z-index: 5; }
.plabel.show { opacity: 1; transform: translateX(-50%); }

/* ── sliding panel + scrim ────────────────────────────────────────────── */
.scrim { position: fixed; inset: 0; z-index: 55; opacity: 0; pointer-events: none; transition: opacity .5s; }
.scrim.open { opacity: 1; pointer-events: auto; }
.scrim.narrow { background: linear-gradient(0deg, rgba(6,8,22,.55), transparent 55%); }
.scrim.wide { background: linear-gradient(90deg, transparent 42%, rgba(6,8,22,.5) 100%); }
.panel { position: fixed; z-index: 60; background: linear-gradient(160deg, rgba(21,23,48,.94), rgba(12,13,30,.97)); backdrop-filter: blur(14px); box-shadow: -20px 0 60px rgba(0,0,0,.45); transition: transform .55s cubic-bezier(.22,1,.36,1); overflow-y: auto; color: #eef; }
.panel.narrow { left: 0; right: 0; bottom: 0; height: 66vh; border-radius: 22px 22px 0 0; border-top: 1px solid rgba(255,255,255,.1); transform: translateY(112%); }
.panel.narrow.open { transform: translateY(0); }
.panel.wide { top: 0; right: 0; height: 100vh; width: min(444px, 92vw); border-left: 1px solid rgba(255,255,255,.1); transform: translateX(114%); }
.panel.wide.open { transform: translateX(0); }
.panel-body { padding: 28px 30px 40px; display: flex; flex-direction: column; min-height: 100%; }
.panel-body.about { gap: 16px; }
.panel-body.project { gap: 15px; }
.prow { display: flex; align-items: center; justify-content: space-between; }
.eyebrow { font-family: 'Nunito', sans-serif; font-size: 12px; letter-spacing: 2.5px; color: rgba(255,255,255,.5); font-weight: 700; }
.spacer { flex: 1; }
.xbtn { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; cursor: pointer; font-size: 14px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.xbtn:hover { background: rgba(255,255,255,.18); }

/* ── about panel ──────────────────────────────────────────────────────── */
.about-head { display: flex; align-items: center; gap: 16px; margin-top: 2px; }
.avatar { width: 88px; height: 88px; flex: 0 0 88px; border-radius: 50%; overflow: hidden; border: 2px solid rgba(255,210,140,.55); box-shadow: 0 0 26px rgba(255,150,90,.4); background: radial-gradient(circle at 40% 34%, #3a2a2a, #1a1526); cursor: default; display: flex; align-items: center; justify-content: center; }
.avatar.edit { cursor: pointer; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-ph { font-family: 'Nunito', sans-serif; font-size: 11px; color: rgba(255,255,255,.45); }
.about-name { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 27px; line-height: 1.08; color: #ffd98a; margin: 0; }
.about-role { font-family: 'Nunito', sans-serif; font-style: italic; color: rgba(255,255,255,.66); font-size: 15px; margin-top: 5px; }
.bio { font-family: 'Nunito', sans-serif; font-size: 15.5px; line-height: 1.62; color: rgba(238,240,255,.85); margin: 2px 0 0; }
.info-list { display: flex; flex-direction: column; gap: 11px; margin-top: 2px; }
.info-row { display: flex; align-items: center; gap: 11px; font-family: 'Nunito', sans-serif; font-size: 14.5px; color: rgba(238,240,255,.82); }
.icon-box { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; background: rgba(255,180,120,.14); display: flex; align-items: center; justify-content: center; color: #ffce8f; }
.links-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lcard { display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #fff; text-decoration: none; font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 14px; transition: all .2s; }
.lcard:hover { background: rgba(255,210,140,.16); border-color: rgba(255,210,140,.45); }
.lcard .edit-mark { margin-left: auto; opacity: .5; font-size: 12px; }

/* ── project panel ────────────────────────────────────────────────────── */
.proj-name { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 40px; line-height: 1.04; margin: 4px 0 0; }
.proj-tagline { font-family: 'Nunito', sans-serif; font-style: italic; color: rgba(255,255,255,.62); font-size: 15px; margin-top: 3px; }
.proj-desc { font-family: 'Nunito', sans-serif; font-size: 15.5px; line-height: 1.62; color: rgba(238,240,255,.85); margin: 2px 0 0; }
.shot { position: relative; width: 100%; height: 210px; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.28); }
.shot-track { display: flex; width: 100%; height: 210px; transition: transform .45s cubic-bezier(.22,1,.36,1); }
.shot-track img { flex: 0 0 100%; width: 100%; height: 210px; object-fit: cover; display: block; }
.shot-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Nunito', sans-serif; font-size: 13px; color: rgba(255,255,255,.45); cursor: pointer; }
.arr { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(10,12,30,.6); color: #fff; border: 1px solid rgba(255,255,255,.2); font-size: 19px; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(6px); z-index: 3; }
.dots { display: flex; gap: 7px; justify-content: center; margin-top: 12px; }
.dot { width: 8px; height: 8px; border-radius: 50%; transition: background .2s; }
.img-edit { display: flex; gap: 8px; justify-content: center; margin-top: 10px; font-family: 'Nunito', sans-serif; font-size: 12.5px; }
.mini { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; border-radius: 999px; padding: 4px 12px; cursor: pointer; }
.mini.danger { color: #ff9a8a; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { font-family: 'Nunito', sans-serif; font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.82); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); padding: 5px 11px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; }
.chip-x { cursor: pointer; opacity: .6; }
.tag-input { font-family: 'Nunito', sans-serif; font-size: 12.5px; width: 72px; background: rgba(255,255,255,.04); border: 1px dashed rgba(255,255,255,.25); color: #fff; padding: 5px 11px; border-radius: 999px; outline: none; }
.visit { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; border-radius: 14px; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 16px; text-decoration: none; color: #141126; }
.visit .arrow { font-size: 18px; }
.del { background: none; border: 1px solid rgba(255,120,110,.35); color: #ff9a8a; border-radius: 11px; padding: 9px; font-family: 'Fredoka', sans-serif; font-size: 13px; cursor: pointer; }

/* ── modals ───────────────────────────────────────────────────────────── */
.mbg { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(4,5,16,.6); backdrop-filter: blur(6px); animation: arrive .25s ease-out both; }
.mcard { background: linear-gradient(160deg, rgba(28,26,54,.98), rgba(14,14,32,.99)); border: 1px solid rgba(255,210,140,.25); border-radius: 18px; padding: 26px 24px; box-shadow: 0 30px 80px rgba(0,0,0,.6); display: flex; flex-direction: column; gap: 14px; }
.mhead { display: flex; align-items: center; gap: 10px; }
.mlock { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,180,120,.16); display: flex; align-items: center; justify-content: center; color: #ffce8f; }
.mtitle { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 17px; color: #fff; }
.mtext { font-family: 'Nunito', sans-serif; font-size: 13.5px; color: rgba(238,240,255,.7); line-height: 1.5; }
.pwd-input { width: 100%; padding: 11px 13px; border-radius: 11px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.15); color: #fff; font-family: 'Nunito', sans-serif; font-size: 14px; outline: none; }
.pwd-input.err { border-color: rgba(255,120,110,.6); }
.pwd-err { font-family: 'Nunito', sans-serif; font-size: 12.5px; color: #ff9a8a; margin-top: -6px; }
.mrow { display: flex; gap: 9px; margin-top: 2px; }
.mcol { display: flex; flex-direction: column; gap: 9px; margin-top: 2px; }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn { font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 14px; cursor: pointer; border-radius: 11px; padding: 11px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #fff; }
.btn.primary { background: linear-gradient(135deg, #ffd98a, #ff8a5c); border: none; color: #241016; font-weight: 600; }
.btn.danger { background: rgba(255,120,110,.12); border-color: rgba(255,120,110,.35); color: #ff9a8a; }
.grow { flex: 1; }
.pill { font-family: 'Fredoka', sans-serif; font-size: 12px; cursor: pointer; border-radius: 999px; padding: 3px 10px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15); color: #fff; }

/* ── edit toolbar ─────────────────────────────────────────────────────── */
.toolbar { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 190; display: flex; align-items: center; gap: 9px; background: rgba(20,22,46,.9); backdrop-filter: blur(8px); border: 1px solid rgba(255,210,140,.3); border-radius: 999px; padding: 8px 16px 8px 13px; box-shadow: 0 10px 30px rgba(0,0,0,.4); font-family: 'Nunito', sans-serif; font-size: 13px; color: rgba(255,240,220,.92); }
.toolbar-dot { width: 8px; height: 8px; border-radius: 50%; background: #7bd88f; box-shadow: 0 0 10px #7bd88f; }
.toolbar-dot.err { background: #ff9a8a; box-shadow: 0 0 10px #ff9a8a; }