/* 阴阳玉通道 (see portal.js). Injected into the stock new-api pages and used by the Gensokyo pages too.
   Everything is prefixed gkp- so it cannot collide with the stock Tailwind classes. */

.gkp-orb {
  --gkp-a: #c4372c; --gkp-b: #fbf8f1; --gkp-o: rgba(36, 29, 25, .5);
  position: relative; display: inline-block; flex: none; width: 32px; height: 32px; padding: 0; margin: 0;
  border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
html.dark .gkp-orb { --gkp-a: #e35b4b; --gkp-b: #ece3cc; --gkp-o: rgba(237, 229, 208, .45); }
.gkp-orb .gkp-spin { position: absolute; inset: 0; display: block; animation: gkp-turn 24s linear infinite; }
.gkp-orb svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 2px 5px rgba(120, 30, 20, .28));
  transition: transform .9s cubic-bezier(.22, .8, .24, 1);
}
.gkp-orb:hover svg, .gkp-orb:focus-visible svg { transform: rotate(160deg) scale(1.1); }
.gkp-a { fill: var(--gkp-a); }
.gkp-b { fill: var(--gkp-b); }
.gkp-o { fill: none; stroke: var(--gkp-o); stroke-width: 2.5; }
/* halo ring on hover */
.gkp-orb::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gkp-a) 45%, transparent), 0 0 18px 2px color-mix(in srgb, var(--gkp-a) 22%, transparent);
  opacity: 0; transform: scale(.7); transition: opacity .35s, transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.gkp-orb:hover::before, .gkp-orb:focus-visible::before { opacity: 1; transform: none; }
.gkp-orb:focus-visible { outline: none; }
/* label sliding out to the left */
.gkp-tip {
  position: absolute; right: calc(100% + 10px); top: 50%; translate: 0 -50%;
  padding: 6px 11px 5px; border-radius: 999px; background: #241d19; color: #f4eee2;
  font: 500 12px/1 "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif; letter-spacing: .22em; white-space: nowrap;
  opacity: 0; transform: translateX(8px); transition: opacity .25s, transform .35s cubic-bezier(.22, .8, .24, 1); pointer-events: none;
}
html.dark .gkp-tip { background: #ede5d0; color: #0b1022; }
.gkp-orb:hover .gkp-tip, .gkp-orb:focus-visible .gkp-tip { opacity: 1; transform: none; }
@keyframes gkp-turn { to { transform: rotate(360deg); } }

/* landing: the orb drops in spinning fast and settles back to its slow turn */
.gkp-orb.gkp-land .gkp-spin { animation: gkp-land 1.4s .45s cubic-bezier(.16, 1, .3, 1) both, gkp-turn 24s 1.85s linear infinite; }
@keyframes gkp-land { from { transform: rotate(-720deg) scale(.3); opacity: 0; } 30% { opacity: 1; } to { transform: rotate(0deg) scale(1); } }

/* ---------- on the stock pages ---------- */
#gk-portal { position: fixed; z-index: 60; top: 8px; right: 12px; }
/* Make room so the orb never sits on the stock header's own buttons (avatar, theme, language, bell). */
header[class*="sticky"][class*="top-0"][class*="z-40"] > div:first-child { padding-right: 56px !important; }
@media (max-width: 1400px) {
  header[class*="pointer-events-none"][class*="fixed"][class*="inset-x-0"] > div:first-child { padding-right: 60px !important; }
}
/* Phones: the stock header is already full; fold its search pill (the button carrying the ⌘K hint) down to its icon. */
@media (max-width: 640px) {
  header [class*="ms-auto"] > button:has(kbd) { width: 34px; min-width: 34px; padding: 0 !important; justify-content: center; gap: 0; }
  header [class*="ms-auto"] > button:has(kbd) > :not(svg) { display: none !important; }
  #gk-portal { right: 8px; }
}

/* ---------- hand-off layers ---------- */
.gkp-cover { position: fixed; inset: 0; z-index: 2147483600; background: #f4eee2; }
.gkp-cv { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 2147483601; pointer-events: none; }
html.gkp-arriving, html.gkp-arriving body { overflow: hidden; }
/* while a Discord sign-in started on the gate finishes on /oauth/discord */
.gkp-wait { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; }
.gkp-wait .gkp-spin { position: relative; width: 44px; height: 44px; animation: gkp-turn 1.6s linear infinite; }
.gkp-wait svg { width: 100%; height: 100%; display: block; }
.gkp-wait .gkp-a { fill: #c4372c; } .gkp-wait .gkp-b { fill: #fbf8f1; } .gkp-wait .gkp-o { fill: none; stroke: rgba(36, 29, 25, .5); stroke-width: 2.5; }
.gkp-wait b { font: 400 16px/1 "LXGW WenKai", "KaiTi", "STKaiti", serif; letter-spacing: .3em; color: #8f8173; }

@media (prefers-reduced-motion: reduce) {
  .gkp-orb .gkp-spin, .gkp-orb.gkp-land .gkp-spin { animation: none; }
}