/* Sun menu v2: ONE menu for every page of the site (home, About, Projects).
   Static: a round button with a slow light orb turning behind a clear menu icon.
   Open: the button slides into the corner and becomes the ✕ inside a quarter "corner sun" — a dark core drawn with single
   lines, a ring of icons, a fine ruler. Hovering an icon draws one straight line to a small liquid-glass tag with its name. */
.sm-btn{position:fixed;top:var(--top,24px);right:var(--gutter,24px);z-index:14;width:48px;height:48px;padding:0;border:0;border-radius:50%;
  background:none;cursor:pointer;color:#f6f8fa;-webkit-tap-highlight-color:transparent;
  transition:transform .55s cubic-bezier(.22,1,.36,1)}
.sm-btn:focus-visible{outline:2px solid #e8f5ff;outline-offset:3px}
/* the light orb: a soft gradient turning slowly behind the icon */
.sm-btn .sm-orb{position:absolute;inset:0;border-radius:50%;overflow:hidden;transition:opacity .35s,transform .45s cubic-bezier(.22,1,.36,1)}
.sm-btn .sm-orb:before{content:"";position:absolute;inset:-30%;
  background:conic-gradient(from 0deg,#e8f5ff 0deg,#7cc8ff 70deg,#141922 150deg,#6f7cff 220deg,#0e1118 290deg,#e8f5ff 360deg);
  filter:blur(7px);animation:sm-turn 7s linear infinite}
.sm-btn .sm-orb:after{content:"";position:absolute;inset:3px;border-radius:50%;background:radial-gradient(circle at 50% 40%,rgba(10,12,16,.5),rgba(6,7,10,.78) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08)}
@keyframes sm-turn{to{transform:rotate(360deg)}}
.sm-btn:hover .sm-orb:before{animation-duration:3.5s}
/* the menu icon: three rounded bars (short left, long, short right) that fold into a ✕ */
.sm-btn .sm-ic{position:absolute;left:50%;top:50%;width:18px;height:14px;margin:-7px 0 0 -9px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.sm-btn .sm-ic i{position:absolute;height:2.4px;border-radius:2px;background:currentColor;transition:transform .45s cubic-bezier(.22,1,.36,1),width .45s cubic-bezier(.22,1,.36,1),left .45s cubic-bezier(.22,1,.36,1),opacity .2s}
.sm-btn .sm-ic i:nth-child(1){left:0;top:0;width:9px}
.sm-btn .sm-ic i:nth-child(2){left:0;top:5.8px;width:18px}
.sm-btn .sm-ic i:nth-child(3){left:9px;top:11.6px;width:9px}
.sm-btn.is-open .sm-orb{opacity:0;transform:scale(.6)}
.sm-btn.is-open .sm-ic i:nth-child(1){left:0;width:18px;transform:translateY(5.8px) rotate(45deg)}
.sm-btn.is-open .sm-ic i:nth-child(2){opacity:0;transform:scaleX(.2)}
.sm-btn.is-open .sm-ic i:nth-child(3){left:0;width:18px;transform:translateY(-5.8px) rotate(-45deg)}

.sm{position:fixed;inset:0;z-index:13;pointer-events:none;overflow:hidden;visibility:hidden}
.sm.live{visibility:visible}
.sm.open{pointer-events:auto}
.sm-scrim{position:absolute;inset:0;opacity:0;background:radial-gradient(85vmax 85vmax at 100% 0,rgba(3,3,4,.82) 0,rgba(3,3,4,.55) 32%,rgba(3,3,4,.25) 62%,rgba(3,3,4,.12))}
.sm-cv{position:absolute;right:0;top:0;pointer-events:none}

.sm-item{position:absolute;left:0;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;display:grid;place-items:center;border-radius:50%;
  color:#8f97a1;opacity:0;outline:none;text-decoration:none;pointer-events:none;transition:color .2s,opacity .25s}
.sm-item svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:filter .2s}
.sm-item.on{opacity:1}
.sm-item.act{color:#f6f8fa}
.sm-item.act svg{filter:drop-shadow(0 0 6px rgba(232,245,255,.45))}
.sm-item:focus-visible{box-shadow:0 0 0 1px rgba(232,245,255,.6)}
.sm-item.here:after{content:"";position:absolute;right:5px;top:6px;width:4px;height:4px;border-radius:50%;background:#e8f5ff;box-shadow:0 0 6px rgba(232,245,255,.8)}

/* the name: a small liquid-glass tag, only while an icon is chosen */
.sm-tag{position:absolute;left:0;top:0;padding:8px 13px 7px;border-radius:999px;white-space:nowrap;pointer-events:none;
  font:400 12px/1 "Silkscreen","Geist Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#f6f8fa;
  background:linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.05) 48%,rgba(255,255,255,.09));
  -webkit-backdrop-filter:blur(14px) saturate(1.6) brightness(1.08);backdrop-filter:blur(14px) saturate(1.6) brightness(1.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -6px 10px -8px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.14),0 10px 24px -10px rgba(0,0,0,.8);
  opacity:0;transform-origin:center;transition:opacity .18s}
.sm-tag.show{opacity:1}
.sm-tag i{font-style:normal;display:inline-block;text-align:center;white-space:pre}
.sm-tag i.al{font-family:"Noto Sans Runic","Segoe UI Historic","Segoe UI Symbol",monospace;color:#f2f2f2}
@media (max-width:639px){ .sm-tag{font-size:11px;padding:7px 11px 6px} .sm-item svg{width:20px;height:20px} }
@media (prefers-reduced-motion:reduce){ .sm-btn,.sm-btn .sm-ic i,.sm-item,.sm-tag{transition:none} .sm-btn .sm-orb:before{animation:none} }