:root {
  --radius: 220px;
  --curtain-color: #ffffff;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  color: #f8fafc;
  background: radial-gradient(circle at top, #0f2947 0%, #08182f 26%, #050d1b 58%, #100718 100%);
}

body::before,
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(circle at 20% 15%, rgba(76, 201, 240, .22), transparent 18%),
    radial-gradient(circle at 83% 18%, rgba(255, 92, 168, .18), transparent 17%),
    radial-gradient(circle at 28% 75%, rgba(34, 211, 238, .16), transparent 21%),
    radial-gradient(circle at 72% 78%, rgba(139, 92, 246, .16), transparent 22%),
    radial-gradient(circle at 48% 52%, rgba(255,255,255,.05), transparent 16%);
  animation: auroraDrift 14s ease-in-out infinite alternate;
}

body::after {
  background-image:
    radial-gradient(circle, rgba(255,255,255,.88) 0 1.2px, transparent 1.8px),
    repeating-linear-gradient(116deg, transparent 0 70px, rgba(61, 154, 255, .06) 70px 100px, transparent 100px 160px),
    repeating-linear-gradient(116deg, transparent 0 140px, rgba(255,255,255,.025) 140px 155px, transparent 155px 240px);
  background-size: 110px 110px, 100% 100%, 100% 100%;
  opacity: .58;
  animation: starsPulse 5.5s ease-in-out infinite alternate;
}

.dynamic-bg {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,.03), transparent 56%);
  transition: background .4s ease;
  z-index: 0;
}

.viewport-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10;
}

.star-menu {
  position: relative;
  width: 760px;
  height: 760px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-trigger {
  position: relative;
  width: 198px;
  height: 198px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22);
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,.10), rgba(10,18,34,.88));
  box-shadow:
    0 0 0 12px rgba(255,255,255,.03),
    0 0 38px rgba(125, 211, 252, .14),
    0 0 66px rgba(34, 211, 238, .10),
    inset 0 0 24px rgba(255,255,255,.08);
  backdrop-filter: blur(18px);
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  transition: transform .35s ease, box-shadow .35s ease;
  z-index: 12;
}

.main-trigger:hover,
.star-menu.active .main-trigger {
  transform: scale(1.035);
  box-shadow:
    0 0 0 12px rgba(255,255,255,.04),
    0 0 54px rgba(96, 165, 250, .18),
    0 0 88px rgba(125, 211, 252, .12),
    inset 0 0 26px rgba(255,255,255,.12);
}

.main-trigger::after {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  opacity: 0;
  transform: scale(.88);
}

.star-menu.active .main-trigger::after {
  opacity: 1;
  animation: pulseRing 1.9s ease-in-out infinite;
}

.dot-grid {
  width: 52px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  transition: .35s ease;
}

.dot-grid span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.55));
  box-shadow: 0 0 10px rgba(255,255,255,.35);
}

.center-content {
  position: absolute;
  inset: 0;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transform: scale(.84);
  transition: .35s ease;
  pointer-events: none;
  text-align: center;
}

#activeIcon {
  font-size: 2.9rem;
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.25));
}

#pageName {
  max-width: 136px;
  font-size: .92rem;
  line-height: 1.16;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: anywhere;
}

#pageType {
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(226,232,240,.76);
}

.star-menu.show-info .dot-grid {
  opacity: 0;
  transform: scale(.5);
}

.star-menu.show-info .center-content {
  opacity: 1;
  transform: scale(1);
}

.menu-item {
  position: absolute;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.12), rgba(10,15,28,.80));
  backdrop-filter: blur(12px);
  color: var(--color);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  opacity: 0;
  transform: rotate(0deg) translate(0) scale(0);
  transition: transform .8s cubic-bezier(.34,1.56,.64,1), opacity .55s ease, box-shadow .35s ease, background .35s ease;
}

.menu-item i {
  font-size: 2rem;
  line-height: 1;
  text-shadow: 0 0 14px var(--glow);
  animation: floatIcon 3.1s ease-in-out infinite;
}

.menu-item span {
  max-width: 78px;
  font-size: .62rem;
  line-height: 1.14;
  color: #f8fafc;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.menu-item::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  opacity: 0;
  transform: scale(.84);
}

.star-menu.active .menu-item {
  opacity: 1;
  transform: rotate(var(--angle)) translate(var(--radius)) rotate(calc(var(--angle) * -1)) scale(1);
}

.star-menu:not(.active) .menu-item {
  opacity: 0;
  transform: rotate(calc(var(--angle) + 360deg)) translate(0) scale(0);
}

.menu-item:hover,
.menu-item.highlight {
  background: radial-gradient(circle at 50% 36%, rgba(255,255,255,.18), rgba(10,15,28,.92));
  box-shadow: 0 0 30px var(--glow), inset 0 0 14px rgba(255,255,255,.06);
}

.menu-item.highlight {
  transform: rotate(var(--angle)) translate(calc(var(--radius) + 14px)) rotate(calc(var(--angle) * -1)) scale(1.14) !important;
  z-index: 20;
}

.menu-item.highlight::before {
  opacity: 1;
  animation: pulseRing 1.6s ease-in-out infinite;
}

.footer-signature a { color: #d8f2ff; text-decoration: none; }
.footer-signature a:hover { text-decoration: underline; }

.footer-signature {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 15;
  margin: 0;
  width: calc(100% - 24px);
  text-align: center;
  color: rgba(226,232,240,.64);
  font-size: .84rem;
  letter-spacing: .03em;
}

.transition-curtain { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0; }
.transition-curtain.slide-up { transform: translateY(100%); background: var(--curtain-color); opacity: 1; }
.transition-curtain.slide-up.active { animation: anim-up .8s cubic-bezier(.7, 0, .3, 1) forwards; }
.transition-curtain.iris { background: var(--curtain-color); clip-path: circle(0% at 50% 50%); opacity: 1; }
.transition-curtain.iris.active { animation: anim-iris .8s cubic-bezier(.7,0,.3,1) forwards; }
.transition-curtain.doors { background: transparent; opacity: 1; }
.transition-curtain.doors::before, .transition-curtain.doors::after { content: ''; position: absolute; width: 50%; height: 100%; background: var(--curtain-color); transition: .8s cubic-bezier(.7,0,.3,1); }
.transition-curtain.doors::before { left: -50%; top: 0; }
.transition-curtain.doors::after { right: -50%; top: 0; }
.transition-curtain.doors.active::before { left: 0; }
.transition-curtain.doors.active::after { right: 0; }

@keyframes anim-up { to { transform: translateY(0); } }
@keyframes anim-iris { to { clip-path: circle(150% at 50% 50%); } }
@keyframes pulseRing { 0%,100% { transform: scale(.88); opacity: .26; } 50% { transform: scale(1.12); opacity: .82; } }
@keyframes floatIcon { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes auroraDrift { from { transform: translate3d(-1%,-1%,0) rotate(0deg); } to { transform: translate3d(1%,1%,0) rotate(2deg); } }
@keyframes starsPulse { from { opacity: .40; } to { opacity: .67; } }

@media (max-width: 920px) {
  :root { --radius: 168px; }
  .star-menu { width: 520px; height: 520px; }
  .main-trigger { width: 172px; height: 172px; }
  .menu-item { width: 96px; height: 96px; }
  .menu-item span { max-width: 72px; font-size: .58rem; }
}

@media (max-width: 560px) {
  :root { --radius: 142px; }
  .star-menu { width: 360px; height: 500px; }
  .main-trigger { width: 174px; height: 174px; }
  .menu-item { width: 94px; height: 94px; }
  .menu-item span { max-width: 70px; font-size: .56rem; line-height: 1.12; }
  #pageName { max-width: 122px; font-size: .84rem; }
  .footer-signature { bottom: 12px; font-size: .76rem; }
}