/* ==========================================================
   LYNX ROLEPLAY v6 — polish / alignment / launch privacy pass
   ========================================================== */

/* 1) HERO — centered premium scroll cue */
.scroll-hint {
  left: 50% !important;
  bottom: 26px !important;
  transform: translateX(-50%);
  z-index: 12;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px !important;
  color: rgba(215,211,201,.62);
  text-align: center;
  transition: color .35s ease, transform .35s var(--ease-premium);
}
.scroll-hint:hover {
  color: var(--gold-2);
  transform: translateX(-50%) translateY(-3px);
}
.scroll-hint-icon {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(212,175,55,.24);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 25%,rgba(255,239,174,.08),rgba(10,10,9,.58) 64%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.28), 0 0 24px rgba(212,175,55,.035);
  animation: lynxScrollFloat 2.1s cubic-bezier(.45,0,.2,1) infinite;
}
.scroll-hint-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--gold-2);
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 7px rgba(212,175,55,.22));
}
.scroll-hint-label {
  font: 800 7px/1 'Inter',sans-serif;
  letter-spacing: .28em;
  white-space: nowrap;
}
@keyframes lynxScrollFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* 2) NAV — border is progressively drawn on hover */
.header-nav { gap: 12px !important; }
.header-nav a {
  position: relative;
  padding: 11px 14px;
  border-radius: 11px;
  overflow: hidden;
  background:
    linear-gradient(rgba(212,175,55,.72),rgba(212,175,55,.72)) left top / 0 1px no-repeat,
    linear-gradient(rgba(212,175,55,.72),rgba(212,175,55,.72)) right top / 1px 0 no-repeat,
    linear-gradient(rgba(212,175,55,.72),rgba(212,175,55,.72)) right bottom / 0 1px no-repeat,
    linear-gradient(rgba(212,175,55,.72),rgba(212,175,55,.72)) left bottom / 1px 0 no-repeat,
    linear-gradient(135deg,transparent,rgba(212,175,55,.018));
  transition: color .28s ease, background-size .48s var(--ease-premium), background-color .35s ease, box-shadow .35s ease, transform .35s var(--ease-premium);
}
.header-nav a::after { content: none !important; }
.header-nav a:hover,
.header-nav a.is-active {
  color: #f5f2eb;
  background-size: 100% 1px,1px 100%,100% 1px,1px 100%,auto;
  background-color: rgba(212,175,55,.025);
  box-shadow: inset 0 0 28px rgba(212,175,55,.025), 0 8px 26px rgba(0,0,0,.16);
}
.header-nav a:hover { transform: translateY(-1px); }
.header-nav a.is-active {
  background-image:
    linear-gradient(rgba(212,175,55,.44),rgba(212,175,55,.44)),
    linear-gradient(rgba(212,175,55,.44),rgba(212,175,55,.44)),
    linear-gradient(rgba(212,175,55,.44),rgba(212,175,55,.44)),
    linear-gradient(rgba(212,175,55,.44),rgba(212,175,55,.44)),
    linear-gradient(135deg,rgba(212,175,55,.035),rgba(212,175,55,.008));
}

/* 3) HEADER DISCORD — actual Discord mark, blue premium CTA */
.header-discord {
  min-height: 46px;
  padding: 0 17px !important;
  gap: 10px !important;
  border: 1px solid rgba(148,159,255,.44) !important;
  border-radius: 13px;
  color: #fff !important;
  background: linear-gradient(135deg,#6674f4 0%,#5865f2 46%,#4651c8 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(18,25,106,.45), 0 10px 30px rgba(88,101,242,.20), 0 0 0 1px rgba(255,255,255,.025);
  text-shadow: 0 1px 8px rgba(13,18,76,.32);
  isolation: isolate;
  transition: transform .34s var(--ease-premium), box-shadow .34s ease, border-color .34s ease, filter .34s ease !important;
}
.header-discord::before {
  z-index: -1;
  background: linear-gradient(105deg,transparent 18%,rgba(255,255,255,.28) 46%,rgba(255,255,255,.06) 58%,transparent 78%) !important;
}
.header-discord::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -2;
  border-radius: 11px;
  background: radial-gradient(90px circle at 22% 10%,rgba(255,255,255,.15),transparent 62%);
  pointer-events: none;
}
.header-discord:hover {
  transform: translateY(-3px) scale(1.025);
  border-color: rgba(185,193,255,.74) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(18,25,106,.5), 0 17px 44px rgba(88,101,242,.32), 0 0 28px rgba(88,101,242,.14) !important;
  filter: saturate(1.08) brightness(1.04);
}
.discord-brand-icon {
  width: 22px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
  fill: currentColor;
  stroke: none;
  filter: drop-shadow(0 3px 8px rgba(20,25,94,.34));
}
.header-discord span { position: relative; z-index: 2; }
.discord-cta-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.88);
  box-shadow: 0 0 10px rgba(255,255,255,.46);
}
.mobile-menu .discord-brand-icon { width: 19px; height: 16px; display:inline-block; margin-right:10px; vertical-align:-3px; }

/* 4) LAUNCH — blur + pixel/noise television privacy layer */
.launch-section { isolation: isolate; }
.launch-static {
  position: absolute;
  inset: 0;
  z-index: 11;
  display: none;
  pointer-events: none;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,rgba(0,0,0,.11) 1px 4px),
    repeating-conic-gradient(from 45deg at 50% 50%,rgba(255,255,255,.035) 0 25%,rgba(212,175,55,.018) 0 50%,rgba(0,0,0,.08) 0 75%,rgba(255,255,255,.015) 0) 0 0 / 8px 8px,
    rgba(3,3,3,.78);
  -webkit-backdrop-filter: blur(16px) contrast(1.2);
  backdrop-filter: blur(16px) contrast(1.2);
}
.launch-static::before {
  content: '';
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(circle at 12% 28%,rgba(255,255,255,.13) 0 1px,transparent 1.5px) 0 0 / 5px 5px,
    radial-gradient(circle at 73% 64%,rgba(212,175,55,.08) 0 1px,transparent 1.4px) 0 0 / 7px 7px,
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,transparent 2px 6px);
  opacity: .58;
  mix-blend-mode: screen;
  animation: lynxStaticNoise .17s steps(2,end) infinite;
}
.launch-static::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,transparent 0 48%,rgba(212,175,55,.035) 50%,transparent 52%) 0 0 / 100% 13px,
    radial-gradient(ellipse at center,transparent 25%,rgba(0,0,0,.44) 100%);
  opacity: .76;
  animation: lynxScanline 5s linear infinite;
}
.launch-section.is-obscured .launch-static { display: block; }
.launch-section.is-obscured .launch-content {
  filter: blur(22px) saturate(.22) contrast(.62) !important;
  opacity: .075 !important;
  transform: scale(1.045) !important;
}
.launch-section.is-obscured .launch-locked-overlay {
  background: radial-gradient(circle at 50% 48%,rgba(212,175,55,.10),transparent 31%),rgba(3,3,3,.18) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
}
.launch-section.is-obscured .launch-locked-overlay strong {
  text-shadow: 0 18px 70px rgba(0,0,0,.9),0 0 54px rgba(212,175,55,.13);
}
@keyframes lynxStaticNoise {
  0% { transform: translate3d(-2%,1%,0) scale(1.03); }
  20% { transform: translate3d(2%,-2%,0) scale(1.035); }
  40% { transform: translate3d(-1%,2%,0) scale(1.03); }
  60% { transform: translate3d(3%,1%,0) scale(1.04); }
  80% { transform: translate3d(-3%,-1%,0) scale(1.035); }
  100% { transform: translate3d(1%,2%,0) scale(1.03); }
}
@keyframes lynxScanline {
  from { background-position: 0 -160px,0 0; }
  to { background-position: 0 160px,0 0; }
}

/* 5) STORY / STAFF headings — more breathing room between display lines */
.story-main h2,
.staff-heading h2 {
  line-height: 1.11 !important;
}
.story-main h2 em,
.staff-heading h2 em {
  display: inline-block;
  margin-top: 7px;
}
.story-main h2 { margin-top: 28px !important; }
.staff-heading h2 { margin-top: 26px !important; }

/* story seal: compensate for transparent padding in the logo artwork */
.story-seal img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  object-position: center;
  transform: translateY(-5px);
}

/* 6) STAFF AVATARS — ring and avatar share exactly the same center */
.staff-avatar-wrap {
  padding-top: 0 !important;
  place-items: center !important;
}
.staff-avatar-wrap::before,
.staff-avatar-wrap::after {
  left: 50% !important;
  top: 50% !important;
  transform-origin: center !important;
}
.staff-avatar-wrap::before {
  animation: lynxStaffRingSpin 22s linear infinite !important;
}
.staff-avatar-wrap::after {
  transform: translate(-50%,-50%) !important;
}
.staff-avatar-img {
  margin: 0 !important;
  align-self: center;
  justify-self: center;
}
@keyframes lynxStaffRingSpin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to { transform: translate(-50%,-50%) rotate(360deg); }
}

/* 7) STATS — stronger category labels */
.stat-kicker {
  color: #bbb5a8 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: .20em !important;
  margin-bottom: 23px !important;
  text-shadow: 0 0 20px rgba(212,175,55,.055);
}
.stat-item:hover .stat-kicker { color: var(--gold-2) !important; }

/* 8) FAQ — left column is a static grid item, never moves when accordion height changes */
.faq-layout {
  align-items: start !important;
}
.faq-intro {
  position: relative !important;
  top: 0 !important;
  align-self: start !important;
  height: max-content;
  transform: none !important;
  overflow-anchor: none !important;
}
.faq-intro.reveal,
.faq-intro.reveal.is-visible { transform: none !important; }
.faq-section,
.faq-section * { overflow-anchor: none !important; }

@media (max-width: 1100px) {
  .header-nav { gap: 6px !important; }
  .header-nav a { padding: 10px 10px; }
  .header-discord { min-height: 43px; padding: 0 14px !important; }
  .header-discord .discord-brand-icon { width: 20px; height: 16px; }
  .faq-intro { position: relative !important; top: 0 !important; }
}

@media (max-width: 760px) {
  .scroll-hint { bottom: 18px !important; }
  .scroll-hint-icon { width: 34px; height: 34px; }
  .scroll-hint-label { font-size: 6px; }
  .launch-static::before { opacity: .45; }
  .story-main h2,
  .staff-heading h2 { line-height: 1.13 !important; }
  .story-main h2 em,
  .staff-heading h2 em { margin-top: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-hint-icon,
  .launch-static::before,
  .launch-static::after,
  .staff-avatar-wrap::before { animation: none !important; }
}