/* © 2026 Dennis Andres */
.ic { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand-ic { flex: none; width: 20px; height: 20px; }

.masthead { position: fixed; z-index: 1000; top: 12px; right: 12px; left: 12px; view-transition-name: masthead; transition: translate var(--cc-dur-slow) var(--cc-ease), opacity var(--cc-dur) ease; }
.masthead.is-hidden { translate: 0 calc(-100% - 24px); opacity: 0; pointer-events: none; }
.masthead-bar { width: min(1480px, 100%); height: 68px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-inline: auto; padding: 0 10px 0 16px; border: 1px solid transparent; border-radius: 20px; color: var(--cc-snow); background: linear-gradient(rgba(16, 6, 22, .8), rgba(16, 6, 22, .8)) padding-box, linear-gradient(110deg, rgba(53, 201, 238, .5), rgba(255, 255, 255, .08) 34%, rgba(255, 255, 255, .06) 66%, rgba(255, 59, 141, .55)) border-box; box-shadow: 0 18px 50px -20px rgba(8, 2, 12, .7); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); }
.masthead.is-scrolled .masthead-bar { background: linear-gradient(rgba(14, 5, 20, .94), rgba(14, 5, 20, .94)) padding-box, linear-gradient(110deg, rgba(53, 201, 238, .5), rgba(255, 255, 255, .08) 34%, rgba(255, 255, 255, .06) 66%, rgba(255, 59, 141, .55)) border-box; }
.masthead-brand { display: block; border-radius: 10px; transition: scale var(--cc-dur-slow) var(--cc-ease); }
.masthead-brand img { width: 132px; height: auto; filter: drop-shadow(0 6px 14px rgba(255, 59, 141, .22)); }
.masthead.is-scrolled .masthead-brand { scale: .9; }

.masthead-nav { justify-self: center; min-width: 0; }
.nav-list { position: relative; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav-item { position: relative; }
.nav-link { position: relative; z-index: 1; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border: 0; border-radius: 12px; color: #e9ddee; background: none; font-size: 14px; font-weight: 750; letter-spacing: -.005em; white-space: nowrap; transition: color var(--cc-dur) ease; }
.nav-link::after { content: ""; position: absolute; right: 14px; bottom: 7px; left: 14px; height: 2px; border-radius: 2px; background: var(--gradient); transform: scaleX(0); transition: transform var(--cc-dur-slow) var(--cc-ease); }
.nav-link:hover, .nav-link[aria-expanded="true"], .nav-link.is-active, .nav-group.is-active > .nav-link { color: #fff; }
.nav-link:hover::after, .nav-link.is-active::after, .nav-group.is-active > .nav-link::after { transform: scaleX(.7); }
.nav-chevron { width: 14px; height: 14px; stroke-width: 2.5; rotate: 90deg; transition: rotate var(--cc-dur) var(--cc-ease); }
.nav-link[aria-expanded="true"] .nav-chevron, .nav-group:hover .nav-chevron { rotate: 270deg; }
.cc-nav-glider { position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: var(--nav-w, 0px); border-radius: 12px; background: linear-gradient(125deg, rgba(255, 59, 141, .16), rgba(53, 201, 238, .08)); opacity: 0; transform: translateX(var(--nav-x, 0px)); transition: transform var(--cc-dur-slow) var(--cc-ease), opacity var(--cc-dur) ease; pointer-events: none; }
.cc-nav-glider.ready { opacity: 1; }

.nav-menu { position: absolute; z-index: 2; top: calc(100% + 12px); left: 50%; min-width: 248px; display: grid; gap: 2px; padding: 8px; border: 1px solid transparent; border-radius: 18px; background: linear-gradient(rgba(22, 9, 29, .97), rgba(22, 9, 29, .97)) padding-box, var(--cc-ring) border-box; box-shadow: 0 30px 70px -24px rgba(6, 2, 10, .85); opacity: 0; translate: -50% -8px; pointer-events: none; transition: opacity var(--cc-dur) ease, translate var(--cc-dur) var(--cc-ease), visibility 0s linear var(--cc-dur); }
.nav-menu::before { content: ""; position: absolute; right: 0; bottom: 100%; left: 0; height: 14px; }
.nav-group:hover > .nav-menu, .nav-group:focus-within > .nav-menu, .nav-group.is-open > .nav-menu { opacity: 1; translate: -50% 0; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.js .nav-group:not(.is-open):not(:hover) > .nav-menu { visibility: hidden; }
.nav-menu-link { display: block; padding: 12px 14px; border-radius: 12px; color: var(--cc-snow-soft); font-size: 15px; font-weight: 750; transition: color var(--cc-dur) ease, translate var(--cc-dur) var(--cc-ease); }
.nav-menu-link:hover, .nav-menu-link.is-active { color: #fff; translate: 4px 0; }
.nav-menu-link.is-active { background: rgba(255, 59, 141, .12); }

.masthead-actions { display: flex; align-items: center; gap: 8px; }
.masthead-discord { min-height: 44px; }
.account-links { display: flex; align-items: center; gap: 4px; }
.account-links form { margin: 0; }
.account-link { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; border: 0; border-radius: 12px; color: #d9cbdf; background: none; font-size: 14px; font-weight: 700; transition: color var(--cc-dur) ease; }
.account-link:hover { color: #fff; }
.account-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.menu-btn { width: 46px; height: 46px; display: none; place-content: center; gap: 6px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px; background: rgba(255, 255, 255, .07); }
.menu-btn span { display: block; width: 20px; height: 2px; border-radius: 2px; background: #fff; transition: transform var(--cc-dur) var(--cc-ease); }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.nav-overlay { position: fixed; z-index: 990; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--cc-header) + 40px) var(--cc-gutter) 40px; color: var(--cc-snow); background: radial-gradient(circle at 85% 8%, rgba(53, 201, 238, .22), transparent 40%), radial-gradient(circle at 10% 90%, rgba(255, 59, 141, .26), transparent 46%), #0e0514; opacity: 0; visibility: hidden; transition: opacity var(--cc-dur) ease, visibility 0s linear var(--cc-dur); }
.nav-overlay.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.nav-overlay-inner { width: min(560px, 100%); min-height: 100%; display: flex; flex-direction: column; gap: 36px; margin-inline: auto; }
.overlay-nav { display: grid; gap: 28px; }
.overlay-group { display: grid; gap: 2px; }
.overlay-label { margin-bottom: 6px; color: var(--cc-pink-soft); font-size: 13px; font-weight: 800; letter-spacing: .06em; }
.overlay-link { display: block; padding: 4px 0; color: #fff; font-size: clamp(28px, 8.4vw, 40px); font-weight: 900; letter-spacing: -.045em; line-height: 1.12; opacity: 0; translate: 0 18px; transition: opacity var(--cc-dur-slow) var(--cc-ease), translate var(--cc-dur-slow) var(--cc-ease); }
.overlay-link.is-active { color: transparent; background: var(--gradient); -webkit-background-clip: text; background-clip: text; }
.nav-overlay.is-open .overlay-link { opacity: 1; translate: 0 0; }
.nav-overlay.is-open .overlay-link:nth-of-type(2) { transition-delay: 40ms; }
.nav-overlay.is-open .overlay-link:nth-of-type(3) { transition-delay: 80ms; }
.nav-overlay.is-open .overlay-link:nth-of-type(4) { transition-delay: 120ms; }
.nav-overlay.is-open .overlay-link:nth-of-type(n + 5) { transition-delay: 160ms; }
.nav-overlay.is-open .overlay-group:nth-child(2) .overlay-link { transition-delay: 90ms; }
.nav-overlay.is-open .overlay-group:nth-child(n + 3) .overlay-link { transition-delay: 150ms; }
.overlay-foot { display: grid; gap: 14px; margin-top: auto; padding-top: 24px; border-top: 1px solid var(--cc-line); }
.overlay-discord { width: 100%; }
.overlay-small { color: var(--cc-snow-soft); font-size: 15px; font-weight: 700; }

@media (max-width: 1100px) {
  .masthead-nav, .account-links, .account-login { display: none; }
  .menu-btn { display: grid; }
  .masthead-bar { grid-template-columns: auto 1fr auto; }
  .masthead-actions { grid-column: 3; }
}
@media (max-width: 520px) {
  .masthead { top: 8px; right: 8px; left: 8px; }
  .masthead-bar { height: 62px; padding: 0 8px 0 12px; border-radius: 18px; }
  .masthead-brand img { width: 112px; }
  .masthead-discord { width: 46px; padding: 0; }
  .masthead-discord span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .masthead.is-hidden { translate: none; opacity: 1; pointer-events: auto; }
  .overlay-link { opacity: 1; translate: none; }
}