/* =========================================================
   Pellosy 统一右键控制台（index3 / social2 / about2 / download2）
   ========================================================= */

.pellosy-menu {
  position: fixed;
  z-index: 400;
  width: min(280px, calc(100vw - 24px));
  padding: 10px;
  color: var(--white);
  background:
    linear-gradient(
      120deg,
      rgba(255, 104, 72, .12),
      transparent 42%
    ),
    var(--ink);
  border: 1px solid rgba(248, 247, 241, .22);
  box-shadow: 10px 10px 0 var(--orange);
  transform-origin: top left;
  opacity: 0;
  transform: translateY(8px) scale(.96);
  transition:
    opacity .22s var(--ease),
    transform .22s var(--ease);
}

.pellosy-menu[hidden] {
  display: none;
}

.pellosy-menu.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.pellosy-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 4px,
    rgba(248, 247, 241, .14) 5px
  );
}

.menu-head,
.menu-title,
.menu-section-label,
.menu-item,
.menu-footer {
  position: relative;
  z-index: 1;
}

.menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 12px;
  color: rgba(248, 247, 241, .55);
  border-bottom: 1px solid rgba(248, 247, 241, .16);
  font-size: 9px;
  letter-spacing: .14em;
}

.menu-head strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--acid);
  font-weight: 400;
}

.menu-head strong i {
  width: 6px;
  height: 6px;
  background: var(--acid);
  border-radius: 50%;
  animation: menuPulse 1.6s ease-in-out infinite;
}

@keyframes menuPulse {
  0%,
  100% {
    opacity: .45;
    transform: scale(.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

.menu-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 10px 8px;
}

.menu-title strong {
  font-size: 22px;
  letter-spacing: -.05em;
}

.menu-title small {
  color: rgba(248, 247, 241, .4);
  font-size: 8px;
  letter-spacing: .12em;
}

.menu-section-label {
  padding: 12px 10px 6px;
  color: rgba(248, 247, 241, .38);
  font-size: 8px;
  letter-spacing: .16em;
}

.menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px;
  color: rgba(248, 247, 241, .82);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(248, 247, 241, .08);
  cursor: pointer;
  font-size: 11px;
  letter-spacing: .03em;
  text-align: left;
  text-decoration: none;
  transition:
    color .18s ease,
    background .18s ease,
    padding-left .2s var(--ease);
}

.menu-item:hover {
  padding-left: 15px;
  color: var(--black);
  background: var(--acid);
}

.menu-item i {
  font-size: 12px;
  font-style: normal;
}

.menu-item.is-danger:hover {
  color: var(--white);
  background: var(--orange);
}

.menu-note {
  min-height: 14px;
  padding: 10px 10px 2px;
  color: var(--acid);
  font-size: 9px;
  letter-spacing: .06em;
}

.menu-footer {
  display: flex;
  justify-content: space-between;
  padding: 8px 10px 2px;
  color: rgba(248, 247, 241, .3);
  font-size: 8px;
  letter-spacing: .14em;
}

/* ---------- 极简模式 ---------- */

.minimal-mode .aurora-blob,
.minimal-mode .hero-floating-card,
.minimal-mode .music-float-card,
.minimal-mode .manifesto-aurora {
  display: none !important;
}

/* ---------- 页面切换淡出 ---------- */

body.page-leaving {
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity .42s var(--ease),
    transform .42s var(--ease);
}

/* ---------- 减少动态效果 ---------- */

@media (prefers-reduced-motion: reduce) {
  .menu-head strong i {
    animation: none;
  }

  body.page-leaving {
    transition: none;
  }

  .pellosy-menu,
  .menu-item {
    transition: none;
  }
}