/* Theme default - effects.css: skip link, brand mark, glow, glass, motion and highlight layer. */
.skip-link { position: absolute; left: -9999px; top: 0; padding: 0.7rem 1.1rem; background: var(--panel-solid); border-radius: 0 0 var(--r-s) 0; z-index: 100; }
.skip-link:focus { left: 0; }

.center { text-align: center; }
.center .lead { margin-inline: auto; }
.center .btn-row { justify-content: center; }

.brand-mark { width: 2.1rem; height: 2.1rem; flex: none; overflow: visible; }
.lg-ring { transform-origin: 20px 20px; animation: ringSpin 26s linear infinite; }
.lg-v { transition: stroke-width 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.lg-node { transform-origin: 20px 20px; }
@keyframes ringSpin { to { transform: rotate(360deg); } }
.brand:hover .lg-ring { animation-duration: 7s; }
.brand:hover .lg-v { stroke-width: 3.9; }
.brand { transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.brand:hover { transform: translateY(-1px); }

.orbit-wrap { position: relative; display: grid; place-items: center; }
.orbit-wrap::before {
  content: "";
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--primary-rgb) / 0.22), transparent 62%);
  filter: blur(24px);
  animation: breathe 7s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: scale(0.94); opacity: 0.7; }
  50% { transform: scale(1.06); opacity: 1; }
}

.hero h1 span {
  background-size: 220% 100%;
  animation: shimmer 11s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.card, .feature, .hub-item, .stat {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.28s ease, box-shadow 0.28s ease;
}
.card:hover, .feature:hover, .hub-item:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: 0 20px 44px -26px rgb(var(--primary-rgb) / 0.55);
}

.btn-discord, .btn-primary { position: relative; overflow: hidden; transition: transform 0.2s ease, filter 0.2s ease; }
.btn-discord::after, .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgb(var(--ink-rgb) / 0.55), transparent);
}
.btn-discord:hover, .btn-primary:hover { transform: translateY(-1px); }
.btn-discord:hover::after, .btn-primary:hover::after {
  animation: sheen 0.75s ease forwards;
}
@keyframes sheen { to { transform: translateX(120%) skewX(-18deg); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .grid, .hub, .steps, .stats, .rule-list {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 26%;
    }
    @keyframes rise {
      from { opacity: 0.3; transform: translateY(0.8rem); }
      to { opacity: 1; transform: none; }
    }
  }
}

:where(a, button, summary, input):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-s);
}

body.no-scroll { overflow: hidden; }

.orbit { max-width: 25rem; width: 100%; overflow: visible; }
.ob-r1 { transform-origin: 220px 220px; animation: ringSpin 52s linear infinite; }
.ob-r2 { transform-origin: 220px 220px; animation: ringSpin 78s linear infinite reverse; }
.ob-grid { transform-origin: 220px 220px; animation: gridPulse 8s ease-in-out infinite; }
.ob-v { transform-origin: 220px 220px; animation: vFloat 9s ease-in-out infinite; }
.ob-dots circle { animation: nodeGlow 5s ease-in-out infinite; }
.ob-dots circle:nth-child(2) { animation-duration: 6.5s; animation-delay: 0.8s; }
.ob-dots circle:nth-child(3) { animation-duration: 8s; animation-delay: 1.6s; }
@keyframes gridPulse { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.24; } }
@keyframes vFloat {
  0%, 100% { transform: translateY(-4px); }
  50% { transform: translateY(6px); }
}
@keyframes nodeGlow { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }

.card, .tile, .step, .faq details, .rule, .notice, .tpl, .mega-inner, .cookie-box, .mega-col {
  position: relative;
  border-radius: var(--r-m);
}
.card, .tile, .step, .faq details, .rule, .tpl {
  background: linear-gradient(180deg, rgb(var(--raise-rgb) / 0.46), rgb(var(--surface-rgb) / 0.6));
}
.card::after, .tile::after, .step::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--ink-rgb) / 0.2), transparent);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: "";
  width: 1.15rem;
  height: 2px;
  border-radius: 2px;
  background: var(--violet);
  flex: none;
}

.hero h1 span {
  background: linear-gradient(100deg, var(--primary-tint), var(--primary) 55%, var(--primary-shade));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat b { background: none; -webkit-text-fill-color: currentColor; color: var(--text); }

.btn {
  border-radius: var(--r-s);
  background: rgb(var(--ink-rgb) / 0.04);
}
.btn:hover { background: rgb(var(--ink-rgb) / 0.08); border-color: var(--line-strong); }
.btn-primary {
  background: linear-gradient(160deg, var(--primary-tint), var(--primary) 48%, var(--primary-shade));
  color: var(--on-primary);
  border: 0;
}
.btn-primary:hover { box-shadow: 0 16px 40px -18px rgb(var(--primary-rgb) / 0.75); }
.btn-discord {
  border-radius: var(--r-s);
  background: rgb(var(--ink-rgb) / 0.05);
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.btn-discord:hover { background: rgb(var(--primary-rgb) / 0.14); border-color: rgb(var(--primary-rgb) / 0.5); color: var(--text-strong); }

.nav-item { background: none !important; position: relative; border-radius: var(--r-s); }
.nav-item::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.3rem;
  height: 2px;
  border-radius: 2px;
  background: var(--violet);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-item:hover::after,
.nav-item[aria-expanded="true"]::after,
.nav-item[aria-current="page"]::after,
.nav-item[data-active="true"]::after { transform: scaleX(1); }
.nav-item:hover, .nav-item[aria-expanded="true"] { color: var(--text); }

.lang summary { gap: 0.4rem; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; border-radius: var(--r-s); }
.lang summary .chev { width: 0.62rem; height: 0.62rem; transition: transform 0.2s; }
.lang[open] summary .chev { transform: rotate(180deg); }
.lang-menu { border-radius: var(--r-m); }
.lang-menu a { align-items: center; border-radius: var(--r-s); }
.lang-code { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--dim); width: 1.7rem; flex: none; }
.lang-menu a[aria-current="true"] .lang-code { color: var(--violet); }

.horizon {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, rgb(var(--primary-rgb) / 0.6), rgb(var(--ink-rgb) / 0.14) 26%, transparent 78%);
}

.tile { overflow: hidden; }
.tile::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--violet);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.tile:hover::before { transform: scaleY(1); }

.step::before { color: var(--violet); font-size: 0.82rem; letter-spacing: 0.2em; }

.mega-inner {
  background:
    radial-gradient(24rem 12rem at 86% 124%, rgb(var(--primary-rgb) / 0.16), transparent 70%),
    rgb(var(--surface-rgb) / 0.98);
}
.mega-inner::after {
  background: linear-gradient(160deg, rgb(var(--primary-rgb) / 0.4), rgb(var(--ink-rgb) / 0.08) 45%, transparent 75%);
}
.mega-cap { color: var(--dim); }
.mega-item:hover { background: rgb(var(--primary-rgb) / 0.12); }
.mega-item[aria-current="page"] { background: rgb(var(--ink-rgb) / 0.07); }

.site-header::after {
  background: linear-gradient(90deg, transparent, var(--violet), var(--steel), var(--violet), transparent);
  background-size: 220% 100%;
}
.brand-dot { color: var(--violet); }

.badge { border-radius: 999px; background: rgb(var(--primary-rgb) / 0.1); border-color: rgb(var(--primary-rgb) / 0.3); }
.badge b { color: var(--violet); }
.pulse { background: var(--violet); box-shadow: 0 0 0 0 rgb(var(--primary-rgb) / 0.55); }

.sev { border-radius: 999px; }
.sev-general { color: var(--muted); border-color: var(--line-strong); background: rgb(var(--ink-rgb) / 0.04); }
.sev-important { color: var(--primary); border-color: rgb(var(--primary-rgb) / 0.4); background: rgb(var(--primary-rgb) / 0.09); }
.sev-severe { color: var(--danger); border-color: rgb(var(--danger-rgb) / 0.42); background: rgb(var(--danger-rgb) / 0.1); }

.notice { border-color: rgb(var(--primary-rgb) / 0.26); background: rgb(var(--primary-rgb) / 0.05); }
.notice h3 { color: var(--violet); }

a { color: inherit; }
.prose a, .cookie-body a, .faq .answer a { color: var(--violet); text-underline-offset: 3px; }
.faq summary::after { color: var(--violet); }
.rule .n { color: var(--violet); }