/* Golden YKeyWorld atmosphere layer. Keeps the existing layout and content intact. */
:root {
  --bg: #070402;
  --bg-elevated: #120b06;
  --bg-card: rgba(19, 12, 8, 0.78);
  --line: rgba(255, 202, 104, 0.13);
  --line-strong: rgba(255, 217, 133, 0.24);
  --text: #fff8ea;
  --text-soft: #cbbca4;
  --text-dim: #85745b;
  --acid: #ffc45b;
  --acid-strong: #ff9d2e;
  --cyan: #ffd98b;
  --violet: #ff8a3d;
  --ember: #ff6b22;
  --gold: #ffd36e;
}

html {
  background: #070402;
}

body {
  background:
    radial-gradient(circle at var(--cursor-x, 72vw) var(--cursor-y, 28vh), rgba(255, 173, 54, 0.12), transparent 22rem),
    radial-gradient(circle at 83% 8%, rgba(255, 196, 91, 0.2), transparent 34rem),
    radial-gradient(circle at 8% 58%, rgba(255, 92, 24, 0.12), transparent 31rem),
    linear-gradient(180deg, #080402 0%, #090503 43%, #050302 100%);
}

body::before {
  background-image:
    linear-gradient(rgba(255, 196, 91, 0.034) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 196, 91, 0.034) 1px, transparent 1px);
}

.golden-yworld-backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.95;
}

.golden-yworld-backdrop::before {
  content: "";
  position: absolute;
  right: clamp(-260px, -10vw, -80px);
  top: clamp(-180px, -9vw, -60px);
  width: min(82vw, 1050px);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 197, 79, 0.24), transparent 49%),
    linear-gradient(90deg, rgba(5, 2, 0, 0.26), rgba(5, 2, 0, 0.08)),
    url("assets/hero/ykeyworld-golden-profile.jpg") center / cover no-repeat;
  border-radius: 50%;
  filter: saturate(1.16) contrast(1.05);
  opacity: 0.46;
  mask-image: radial-gradient(circle at 54% 50%, #000 0 49%, rgba(0, 0, 0, 0.58) 60%, transparent 78%);
  transform: translate3d(0, calc(var(--page-shift, 0px) * -0.45), 0);
}

.golden-yworld-backdrop::after {
  content: "";
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(circle at 83% 20%, rgba(255, 201, 85, 0.28), transparent 18%),
    radial-gradient(circle at 72% 47%, rgba(255, 103, 28, 0.18), transparent 28%),
    radial-gradient(circle at 16% 77%, rgba(255, 106, 35, 0.1), transparent 22%),
    conic-gradient(from 132deg at 77% 30%, transparent 0 18%, rgba(255, 180, 68, 0.075) 25%, transparent 38%, rgba(255, 97, 20, 0.07) 56%, transparent 72%);
  filter: blur(26px);
  opacity: 0.82;
  mix-blend-mode: screen;
}

.golden-yworld-orbit {
  position: absolute;
  right: clamp(-230px, -7vw, -80px);
  top: clamp(20px, 8vh, 120px);
  width: min(72vw, 900px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 205, 102, 0.14);
  border-radius: 50%;
  box-shadow:
    inset 0 0 95px rgba(255, 167, 49, 0.045),
    0 0 105px rgba(255, 128, 34, 0.07);
  transform: rotateX(62deg) rotateZ(-18deg);
}

.golden-yworld-spark {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #ffd36e;
  box-shadow:
    0 0 18px rgba(255, 211, 110, 0.95),
    0 0 44px rgba(255, 122, 36, 0.38);
  opacity: 0.86;
}

.golden-yworld-spark-a {
  right: 22vw;
  top: 16vh;
  animation: golden-spark-a 8s ease-in-out infinite alternate;
}

.golden-yworld-spark-b {
  right: 8vw;
  top: 55vh;
  width: 5px;
  height: 5px;
  opacity: 0.66;
  animation: golden-spark-b 10s ease-in-out infinite alternate;
}

@keyframes golden-spark-a {
  to { transform: translate3d(-40px, 34px, 0) scale(1.45); }
}

@keyframes golden-spark-b {
  to { transform: translate3d(22px, -48px, 0) scale(1.35); }
}

.depth-field {
  opacity: 0.3;
  mix-blend-mode: screen;
}

.noise {
  opacity: 0.035;
}

.page-glow-a {
  background: #ffb13f;
  opacity: 0.16;
}

.page-glow-b {
  background: #ff6b22;
  opacity: 0.11;
}

.topbar {
  border-color: rgba(255, 209, 110, 0.18);
  background:
    radial-gradient(circle at 88% 0%, rgba(255, 196, 91, 0.11), transparent 34%),
    rgba(8, 4, 2, 0.74);
  box-shadow:
    0 24px 76px -40px rgba(0, 0, 0, 0.98),
    inset 0 1px 0 rgba(255, 222, 144, 0.08);
}

.brand-signal,
.eyebrow-pulse,
.premium-access-badge span,
.premium-feature-card li::before {
  background: var(--acid);
  box-shadow: 0 0 18px rgba(255, 196, 91, 0.88);
}

.brand-name span,
.section-kicker,
.premium-feature-card small,
.premium-access-badge,
.premium-feature-index,
.premium-nav-link {
  color: var(--acid);
}

.brand-name {
  text-shadow: 0 0 32px rgba(255, 178, 56, 0.24);
}

.hero h1 span,
.section-heading h2 em,
.premium-telegram-copy h2 em,
.manifesto h2 em,
.page-hero h1 span {
  color: transparent;
  background: linear-gradient(108deg, #fff0bf 0%, #ffc45b 32%, #ff9d2e 64%, #ff6b22 104%);
  background-clip: text;
  -webkit-background-clip: text;
  filter: drop-shadow(0 0 26px rgba(255, 165, 45, 0.16));
}

.nav-cta,
.button-primary,
.premium-telegram-button {
  color: #120704;
  background: linear-gradient(135deg, #fff0b8, #ffc45b 43%, #ff8b26 100%);
  box-shadow:
    0 24px 54px -26px rgba(255, 169, 50, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.button-ghost,
.premium-telegram-app-button,
.search-trigger,
.premium-nav-link {
  border-color: rgba(255, 202, 104, 0.22);
  background: rgba(255, 190, 86, 0.045);
}

.eyebrow,
.premium-access-badge,
.premium-topic-pills span {
  border-color: rgba(255, 196, 91, 0.22);
  background: rgba(255, 196, 91, 0.07);
}

.hero::before {
  color: rgba(255, 196, 91, 0.28);
}

.vault-scene,
.premium-telegram-card,
.manifesto-card,
.cta-strip,
.partner-slide,
.topic-card,
.tool-card,
.premium-feature-card {
  border-color: rgba(255, 202, 104, 0.14);
}

.vault-scene {
  background:
    radial-gradient(circle at 72% 30%, rgba(255, 195, 79, 0.16), transparent 29%),
    radial-gradient(circle at 36% 70%, rgba(255, 106, 35, 0.1), transparent 33%),
    linear-gradient(145deg, rgba(25, 14, 8, 0.88), rgba(5, 3, 2, 0.96));
  box-shadow:
    0 92px 155px -82px rgba(0, 0, 0, 1),
    inset 0 1px 0 rgba(255, 230, 155, 0.08),
    inset 0 -70px 120px rgba(0, 0, 0, 0.34),
    34px 34px 0 -33px rgba(255, 196, 91, 0.18);
}

.vault-halo {
  background:
    radial-gradient(circle, rgba(255, 196, 91, 0.24), rgba(255, 113, 32, 0.1) 34%, transparent 68%);
}

.edge-bot-orb {
  background:
    radial-gradient(circle at 34% 27%, #fff6d7, transparent 7%),
    radial-gradient(circle at 42% 36%, rgba(255, 214, 117, 0.95), rgba(255, 122, 30, 0.6) 28%, #120704 72%);
  box-shadow:
    inset -15px -18px 30px rgba(0, 0, 0, 0.6),
    0 0 46px rgba(255, 181, 50, 0.46),
    0 24px 48px rgba(0, 0, 0, 0.58);
}

.premium-telegram-card {
  background:
    radial-gradient(circle at 84% 8%, rgba(255, 196, 91, 0.2), transparent 24%),
    radial-gradient(circle at 16% 78%, rgba(255, 105, 32, 0.12), transparent 31%),
    linear-gradient(145deg, rgba(22, 13, 8, 0.98), rgba(5, 3, 2, 0.995) 72%);
  box-shadow:
    0 100px 160px -90px rgba(0, 0, 0, 1),
    25px 26px 0 -24px rgba(255, 196, 91, 0.18),
    -22px -20px 0 -20px rgba(255, 111, 32, 0.07),
    inset 0 1px 0 rgba(255, 230, 155, 0.08),
    0 0 130px -90px rgba(255, 151, 42, 0.8);
}

.premium-telegram-card::after {
  color: rgba(255, 196, 91, 0.18);
}

.premium-mark-ring-a,
.premium-mark-ring-b,
.premium-mark-core,
.edge-bot-card code,
.premium-access-strip span,
.edge-demo-copy,
.edge-bot-card,
.edge-flow-grid span {
  border-color: rgba(255, 202, 104, 0.18);
}

.premium-mark-core,
.edge-bot-card {
  background:
    radial-gradient(circle at 35% 24%, rgba(255, 244, 202, 0.2), transparent 8%),
    radial-gradient(circle at 38% 34%, rgba(255, 196, 91, 0.23), transparent 30%),
    linear-gradient(145deg, rgba(24, 14, 8, 0.98), rgba(7, 4, 2, 0.98));
  box-shadow:
    32px 38px 0 -28px rgba(255, 106, 35, 0.16),
    0 48px 90px -44px rgba(0, 0, 0, 1),
    0 0 74px -38px rgba(255, 171, 50, 0.82),
    inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.premium-feature-card,
.tool-card,
.topic-card,
.official-link-card,
.partner-profile-card {
  background:
    radial-gradient(circle at var(--local-x, 86%) var(--local-y, 14%), rgba(255, 196, 91, 0.1), transparent 29%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.014));
  box-shadow:
    0 36px 76px -52px rgba(0, 0, 0, 1),
    12px 13px 0 -12px rgba(255, 196, 91, 0.1),
    inset 0 1px 0 rgba(255, 231, 169, 0.055);
}

.premium-feature-index {
  border-color: rgba(255, 202, 104, 0.28);
  background: linear-gradient(145deg, rgba(255, 196, 91, 0.1), rgba(255, 106, 35, 0.04));
  box-shadow: 8px 9px 22px -15px rgba(255, 169, 50, 0.8);
}

.world-orb {
  filter: hue-rotate(132deg) saturate(1.5) brightness(1.08);
}

.world-prism {
  border-color: rgba(255, 196, 91, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 196, 91, 0.13), rgba(255, 112, 32, 0.025)),
    rgba(12, 7, 4, 0.72);
}

.world-grid {
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 196, 91, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 196, 91, 0.08) 1px, transparent 1px);
}

@media (max-width: 900px) {
  .golden-yworld-backdrop::before {
    right: -42vw;
    top: -10vh;
    width: 118vw;
    opacity: 0.38;
  }

  .golden-yworld-orbit {
    right: -34vw;
    width: 104vw;
  }
}

@media (max-width: 680px) {
  .golden-yworld-backdrop::before {
    right: -65vw;
    top: 2vh;
    width: 145vw;
    opacity: 0.28;
  }

  .golden-yworld-backdrop::after {
    opacity: 0.55;
  }

  .golden-yworld-orbit,
  .golden-yworld-spark-b {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .golden-yworld-spark,
  .golden-yworld-backdrop::before {
    animation: none;
    transform: none;
  }
}