/* YKeyWorld HQ cinematic layer. Procedural 3D-style scene, no heavy runtime. */
:root {
  --hq-progress: 0;
  --hq-local: 0;
  --hq-depth: 0px;
  --hq-scene-accent: #ffc45b;
}

body {
  background-attachment: fixed;
}

.hq-scene-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  perspective: 1200px;
  opacity: 0.94;
  contain: layout paint style;
}

.hq-scene-stage::before,
.hq-scene-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hq-scene-stage::before {
  background:
    linear-gradient(90deg, rgba(5, 3, 2, 0.92), rgba(5, 3, 2, 0.46) 52%, rgba(5, 3, 2, 0.72)),
    radial-gradient(circle at 78% 16%, rgba(255, 197, 91, 0.22), transparent 23rem),
    radial-gradient(circle at 16% 72%, rgba(255, 104, 28, 0.14), transparent 30rem);
  mix-blend-mode: multiply;
}

.hq-scene-stage::after {
  background:
    linear-gradient(rgba(255, 196, 91, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 196, 91, 0.025) 1px, transparent 1px);
  background-size: 92px 92px;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
  transform: perspective(900px) rotateX(64deg) translateY(23vh) scale(1.4);
  opacity: 0.72;
}

.hq-scene-camera {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1380px, 96vw);
  height: min(820px, 92vh);
  transform-style: preserve-3d;
  transform:
    translate3d(-50%, -50%, var(--hq-depth))
    rotateX(calc(7deg - (var(--hq-progress) * 1.8deg)))
    rotateY(calc(-8deg + (var(--hq-progress) * 12deg)));
  transition: transform 420ms ease-out;
}

.hq-scene-room,
.hq-scene-room > * {
  position: absolute;
  transform-style: preserve-3d;
}

.hq-scene-room {
  inset: 0;
  transform: translateZ(-150px);
}

.hq-ranch-horizon {
  inset: 2% 3% auto auto;
  width: min(720px, 48vw);
  height: min(440px, 48vh);
  border-radius: 50%;
  background:
    radial-gradient(circle at 62% 38%, rgba(255, 231, 156, 0.35), transparent 7%),
    radial-gradient(circle at 72% 48%, rgba(255, 183, 61, 0.35), transparent 20%),
    radial-gradient(circle at 50% 50%, rgba(115, 64, 24, 0.34), rgba(9, 5, 3, 0.1) 58%, transparent 72%);
  filter: blur(1px);
  opacity: 0.72;
  transform: translateZ(-320px) rotateZ(-8deg);
}

.hq-back-wall {
  inset: 9% 9% auto auto;
  width: min(720px, 52vw);
  height: min(470px, 50vh);
  border: 1px solid rgba(255, 201, 91, 0.1);
  border-radius: 42px;
  background:
    linear-gradient(90deg, rgba(255, 196, 91, 0.09) 1px, transparent 1px),
    linear-gradient(rgba(255, 196, 91, 0.07) 1px, transparent 1px),
    linear-gradient(135deg, rgba(26, 15, 8, 0.74), rgba(4, 3, 2, 0.18));
  background-size: 84px 84px, 84px 84px, auto;
  box-shadow:
    inset 0 1px 0 rgba(255, 230, 165, 0.08),
    0 60px 160px rgba(0, 0, 0, 0.36);
  transform: translateZ(-240px) rotateY(-12deg);
  opacity: 0.86;
}

.hq-left-wall,
.hq-right-wall {
  top: 16%;
  width: 300px;
  height: 470px;
  border: 1px solid rgba(255, 202, 104, 0.08);
  background: linear-gradient(135deg, rgba(42, 24, 12, 0.36), rgba(3, 3, 2, 0.08));
  opacity: 0.48;
}

.hq-left-wall {
  left: 4%;
  transform: rotateY(63deg) translateZ(-260px);
}

.hq-right-wall {
  right: 2%;
  transform: rotateY(-67deg) translateZ(-220px);
}

.hq-floor {
  left: 12%;
  bottom: -7%;
  width: 76%;
  height: 48%;
  border: 1px solid rgba(255, 196, 91, 0.11);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 197, 91, 0.12), transparent 34%),
    linear-gradient(90deg, rgba(255, 196, 91, 0.05) 1px, transparent 1px),
    linear-gradient(rgba(255, 196, 91, 0.04) 1px, transparent 1px),
    linear-gradient(180deg, rgba(43, 25, 12, 0.7), rgba(5, 3, 2, 0.08));
  background-size: auto, 86px 86px, 86px 86px, auto;
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.58);
  transform: rotateX(72deg) translateZ(-170px);
}

.hq-ceiling-line {
  left: 18%;
  top: 13%;
  width: 62%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 132, 0.34), transparent);
  transform: translateZ(-80px);
}

.hq-entry-door {
  left: 13%;
  top: 25%;
  width: 170px;
  height: 250px;
  border: 1px solid rgba(255, 210, 122, 0.2);
  border-radius: 24px 24px 12px 12px;
  background:
    linear-gradient(90deg, transparent 48%, rgba(255, 198, 91, 0.22) 49% 51%, transparent 52%),
    linear-gradient(145deg, rgba(32, 19, 10, 0.72), rgba(4, 3, 2, 0.9));
  box-shadow: 0 0 60px rgba(255, 158, 42, 0.06);
  transform: translateZ(-110px) rotateY(16deg);
  opacity: 0.48;
}

.hq-ystan-figure {
  left: clamp(54%, 60vw, 66%);
  bottom: 21%;
  width: 118px;
  height: 238px;
  opacity: 0.58;
  filter: drop-shadow(0 35px 40px rgba(0, 0, 0, 0.82));
  transform: translateZ(75px) rotateY(-12deg);
}

.hq-ystan-hood {
  left: 29px;
  top: 0;
  width: 62px;
  height: 72px;
  border-radius: 50% 50% 45% 45%;
  background:
    radial-gradient(circle at 50% 52%, #030303 0 43%, transparent 44%),
    linear-gradient(145deg, #15100d, #030303);
  box-shadow: inset 10px 8px 20px rgba(255, 196, 91, 0.04);
}

.hq-ystan-glasses {
  left: 38px;
  top: 34px;
  width: 44px;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #050505, #1b1612, #050505);
  box-shadow: 0 0 12px rgba(255, 196, 91, 0.12);
}

.hq-ystan-body {
  left: 9px;
  top: 65px;
  width: 104px;
  height: 166px;
  border-radius: 38px 38px 18px 18px;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 196, 91, 0.08), transparent 13%),
    linear-gradient(145deg, #13100e, #030303 72%);
}

.hq-ystan-body::after {
  content: "Y";
  position: absolute;
  left: 50%;
  top: 36%;
  color: rgba(255, 196, 91, 0.34);
  font-family: var(--font-display);
  font-size: 18px;
  transform: translate(-50%, -50%);
}

.hq-strategy-table {
  left: 47%;
  bottom: 6%;
  width: min(520px, 36vw);
  height: min(270px, 24vw);
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255, 209, 106, 0.12), transparent 28%),
    linear-gradient(135deg, rgba(28, 18, 11, 0.92), rgba(4, 3, 2, 0.96));
  box-shadow:
    inset 0 0 0 1px rgba(255, 217, 133, 0.16),
    inset 0 0 70px rgba(0, 0, 0, 0.8),
    0 42px 70px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%) rotateX(70deg) translateZ(80px);
}

.hq-table-ring {
  inset: 17%;
  border: 2px solid rgba(255, 200, 91, 0.62);
  border-radius: inherit;
  box-shadow:
    0 0 24px rgba(255, 179, 47, 0.28),
    inset 0 0 22px rgba(255, 179, 47, 0.14);
}

.hq-table-core {
  left: 50%;
  top: 49%;
  color: rgba(255, 231, 172, 0.72);
  font-family: var(--font-display);
  font-size: clamp(42px, 5vw, 88px);
  font-weight: 800;
  transform: translate(-50%, -50%) rotateX(-70deg);
}

.hq-monitor {
  display: grid;
  gap: 9px;
  width: 220px;
  min-height: 132px;
  padding: 18px;
  border: 1px solid rgba(255, 202, 104, 0.16);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(255, 196, 91, 0.08) 1px, transparent 1px),
    linear-gradient(rgba(255, 196, 91, 0.06) 1px, transparent 1px),
    rgba(4, 6, 5, 0.62);
  background-size: 28px 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 238, 180, 0.08),
    0 24px 55px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(10px);
  opacity: 0.48;
}

.hq-monitor b {
  color: rgba(255, 226, 165, 0.92);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.hq-monitor i {
  display: block;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 196, 91, 0.8), rgba(101, 217, 255, 0.25), transparent);
}

.hq-monitor i:nth-child(3) {
  width: 74%;
}

.hq-monitor i:nth-child(4) {
  width: 48%;
}

.hq-monitor-ai {
  left: 9%;
  top: 16%;
  transform: rotateY(26deg) translateZ(40px);
}

.hq-monitor-research {
  right: 11%;
  top: 18%;
  transform: rotateY(-23deg) translateZ(60px);
}

.hq-monitor-tools {
  left: 15%;
  top: 49%;
  transform: rotateY(32deg) translateZ(95px);
}

.hq-monitor-security {
  right: 14%;
  top: 50%;
  transform: rotateY(-32deg) translateZ(95px);
}

.hq-vault-door {
  right: 18%;
  top: 31%;
  display: grid;
  place-items: center;
  width: 220px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 209, 112, 0.22);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 198, 91, 0.1), transparent 34%),
    conic-gradient(from 0deg, rgba(255, 196, 91, 0.22), transparent 16%, rgba(255, 196, 91, 0.12), transparent 38%, rgba(255, 196, 91, 0.24), transparent 72%);
  box-shadow:
    inset 0 0 0 24px rgba(3, 3, 2, 0.74),
    inset 0 0 0 26px rgba(255, 196, 91, 0.12),
    0 0 70px rgba(255, 156, 43, 0.14);
  opacity: 0;
  transform: translateZ(130px) scale(0.82) rotateZ(18deg);
}

.hq-vault-door span {
  width: 64px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 219, 142, 0.42);
  border-radius: 50%;
  box-shadow: 0 0 0 9px rgba(255, 196, 91, 0.05);
}

.hq-vault-door b,
.hq-premium-door b,
.hq-premium-door small {
  font-family: var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.hq-vault-door b {
  position: absolute;
  bottom: 43px;
  color: rgba(255, 228, 165, 0.72);
  font-size: 9px;
}

.hq-library-wall {
  left: 10%;
  top: 24%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 7px;
  width: 410px;
  height: 230px;
  padding: 26px;
  border: 1px solid rgba(255, 202, 104, 0.13);
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(24, 15, 9, 0.72), rgba(4, 3, 2, 0.64));
  box-shadow: inset 0 -24px 44px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateZ(105px) rotateY(26deg);
}

.hq-library-wall i {
  align-self: end;
  height: calc(64px + (var(--i, 1) * 18px));
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, rgba(255, 207, 109, 0.74), rgba(82, 45, 20, 0.64));
}

.hq-library-wall i:nth-child(1) { --i: 3; }
.hq-library-wall i:nth-child(2) { --i: 1; }
.hq-library-wall i:nth-child(3) { --i: 4; }
.hq-library-wall i:nth-child(4) { --i: 2; }
.hq-library-wall i:nth-child(5) { --i: 5; }
.hq-library-wall i:nth-child(6) { --i: 2; }

.hq-premium-door {
  right: 12%;
  top: 25%;
  display: grid;
  gap: 8px;
  place-items: center;
  width: 240px;
  height: 310px;
  border: 1px solid rgba(255, 202, 104, 0.2);
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 196, 91, 0.18), transparent 30%),
    linear-gradient(145deg, rgba(16, 10, 7, 0.92), rgba(2, 2, 2, 0.96));
  box-shadow: 0 45px 110px rgba(0, 0, 0, 0.48);
  opacity: 0;
  transform: translateZ(115px) rotateY(-20deg);
}

.hq-premium-door b {
  color: rgba(255, 228, 165, 0.96);
  font-size: 20px;
}

.hq-premium-door small {
  color: rgba(255, 196, 91, 0.62);
  font-size: 8px;
}

.hq-partner-wall {
  right: 8%;
  top: 24%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: 390px;
  padding: 18px;
  border: 1px solid rgba(255, 202, 104, 0.14);
  border-radius: 24px;
  background: rgba(4, 5, 4, 0.56);
  opacity: 0;
  transform: translateZ(120px) rotateY(-26deg);
}

.hq-partner-wall i {
  display: grid;
  place-items: center;
  min-height: 54px;
  border: 1px solid rgba(255, 202, 104, 0.12);
  border-radius: 14px;
  color: rgba(255, 244, 220, 0.72);
  background: rgba(255, 196, 91, 0.045);
  font-family: var(--font-mono);
  font-size: 9px;
  font-style: normal;
  letter-spacing: 0.1em;
}

.hq-ecosystem-map {
  left: 50%;
  top: 30%;
  display: block;
  width: 430px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 202, 104, 0.12);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 196, 91, 0.2), transparent 8%),
    radial-gradient(circle, transparent 38%, rgba(255, 196, 91, 0.06) 39% 40%, transparent 41%);
  opacity: 0;
  transform: translateX(-50%) translateZ(80px) rotateX(62deg);
}

.hq-ecosystem-map i {
  position: absolute;
  width: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffc45b;
  box-shadow: 0 0 20px rgba(255, 196, 91, 0.7);
}

.hq-ecosystem-map i:nth-child(1) { left: 50%; top: 0; }
.hq-ecosystem-map i:nth-child(2) { right: 8%; top: 29%; }
.hq-ecosystem-map i:nth-child(3) { right: 24%; bottom: 9%; }
.hq-ecosystem-map i:nth-child(4) { left: 18%; bottom: 16%; }
.hq-ecosystem-map i:nth-child(5) { left: 6%; top: 34%; }

.hq-cinematic-ready[data-hq-scene="entry"] .hq-entry-door,
.hq-cinematic-ready[data-hq-scene="entry"] .hq-ystan-figure {
  opacity: 0.72;
}

.hq-cinematic-ready[data-hq-scene="tools"] .hq-monitor,
.hq-cinematic-ready[data-hq-scene="tools"] .hq-strategy-table {
  opacity: 0.82;
}

.hq-cinematic-ready[data-hq-scene="vault"] .hq-vault-door,
.hq-cinematic-ready[data-hq-scene="vault"] .hq-monitor-security {
  opacity: 0.9;
}

.hq-cinematic-ready[data-hq-scene="library"] .hq-library-wall,
.hq-cinematic-ready[data-hq-scene="library"] .hq-monitor-research {
  opacity: 0.84;
}

.hq-cinematic-ready[data-hq-scene="premium"] .hq-premium-door,
.hq-cinematic-ready[data-hq-scene="premium"] .hq-ystan-figure {
  opacity: 0.86;
}

.hq-cinematic-ready[data-hq-scene="partners"] .hq-partner-wall {
  opacity: 0.86;
}

.hq-cinematic-ready[data-hq-scene="ecosystem"] .hq-ecosystem-map,
.hq-cinematic-ready[data-hq-scene="ecosystem"] .hq-partner-wall {
  opacity: 0.74;
}

.hq-cinematic-ready[data-hq-scene="tools"] .hq-scene-camera {
  transform: translate3d(-51%, -50%, -75px) rotateX(5deg) rotateY(-3deg);
}

.hq-cinematic-ready[data-hq-scene="vault"] .hq-scene-camera {
  transform: translate3d(-55%, -50%, -110px) rotateX(4deg) rotateY(6deg);
}

.hq-cinematic-ready[data-hq-scene="library"] .hq-scene-camera {
  transform: translate3d(-47%, -51%, -95px) rotateX(5deg) rotateY(-10deg);
}

.hq-cinematic-ready[data-hq-scene="premium"] .hq-scene-camera {
  transform: translate3d(-54%, -52%, -130px) rotateX(3deg) rotateY(10deg);
}

.hq-cinematic-ready[data-hq-scene="partners"] .hq-scene-camera {
  transform: translate3d(-55%, -50%, -95px) rotateX(4deg) rotateY(13deg);
}

.hq-cinematic-ready[data-hq-scene="ecosystem"] .hq-scene-camera {
  transform: translate3d(-50%, -53%, -165px) rotateX(8deg) rotateY(0deg);
}

.hq-content-section {
  position: relative;
  z-index: 3;
  padding-block: 108px;
}

.security-vault-preview,
.academy-library {
  scroll-margin-top: 110px;
}

.vault-panel-grid,
.library-shelf {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.vault-panel-card,
.library-shelf a {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  padding: 24px;
  border: 1px solid color-mix(in srgb, var(--accent, #ffc45b) 24%, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 75% 12%, color-mix(in srgb, var(--accent, #ffc45b) 17%, transparent), transparent 30%),
    linear-gradient(145deg, rgba(19, 12, 8, 0.82), rgba(4, 3, 2, 0.92));
  box-shadow:
    0 36px 80px -52px rgba(0, 0, 0, 1),
    inset 0 1px 0 rgba(255, 232, 173, 0.07);
  transform-style: preserve-3d;
  transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
}

.vault-panel-card:hover,
.library-shelf a:hover {
  transform: translateY(-7px) rotateX(2deg);
  border-color: color-mix(in srgb, var(--accent, #ffc45b) 44%, rgba(255, 255, 255, 0.08));
  box-shadow:
    0 46px 92px -50px rgba(0, 0, 0, 1),
    0 0 60px -44px var(--accent, #ffc45b);
}

.vault-panel-card::before,
.library-shelf a::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.09), transparent 26%, transparent 74%, rgba(255, 196, 91, 0.07));
  opacity: 0;
  transition: opacity 220ms ease;
}

.vault-panel-card:hover::before,
.library-shelf a:hover::before {
  opacity: 1;
}

.vault-panel-card > *,
.library-shelf a > * {
  position: relative;
  z-index: 2;
}

.vault-panel-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.vault-panel-card span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--accent, #ffc45b) 36%, transparent);
  border-radius: 14px;
  color: var(--accent, #ffc45b);
  background: color-mix(in srgb, var(--accent, #ffc45b) 8%, rgba(5, 3, 2, 0.78));
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.vault-panel-card small,
.library-shelf small {
  color: var(--accent, #ffc45b);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.vault-panel-card h3,
.library-shelf strong {
  margin: 18px 0 0;
  color: var(--text);
  font-family: var(--font-display);
  font-size: clamp(28px, 2.7vw, 42px);
  letter-spacing: -0.06em;
  line-height: 0.98;
}

.vault-panel-card p,
.library-shelf span {
  display: block;
  margin: 18px 0 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.65;
}

.library-shelf a {
  min-height: 250px;
  border-color: rgba(255, 202, 104, 0.14);
  --accent: #ffc45b;
}

.library-shelf a:nth-child(2) { --accent: #8cff84; }
.library-shelf a:nth-child(3) { --accent: #65d9ff; }
.library-shelf a:nth-child(4) { --accent: #ff8b26; }

@media (max-width: 1100px) {
  .hq-scene-stage {
    opacity: 0.52;
  }

  .hq-monitor,
  .hq-vault-door,
  .hq-library-wall,
  .hq-premium-door,
  .hq-partner-wall,
  .hq-ecosystem-map {
    transform: none;
  }

  .vault-panel-grid,
  .library-shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .hq-scene-stage {
    opacity: 0.28;
  }

  .hq-scene-camera {
    width: 120vw;
    height: 90vh;
    transform: translate3d(-50%, -48%, -170px) rotateX(8deg) rotateY(0deg) !important;
  }

  .hq-monitor,
  .hq-left-wall,
  .hq-right-wall,
  .hq-library-wall,
  .hq-partner-wall {
    display: none;
  }

  .hq-ystan-figure {
    left: 62%;
    bottom: 25%;
    transform: scale(0.75);
  }

  .hq-vault-door,
  .hq-premium-door,
  .hq-ecosystem-map {
    right: auto;
    left: 52%;
    top: 24%;
    transform: translateX(-50%) scale(0.78);
  }

  .vault-panel-grid,
  .library-shelf {
    grid-template-columns: 1fr;
  }

  .hq-content-section {
    padding-block: 74px;
  }

  .vault-panel-card,
  .library-shelf a {
    min-height: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hq-scene-camera,
  .hq-scene-room *,
  .vault-panel-card,
  .library-shelf a {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .hq-scene-stage {
    opacity: 0.18;
  }
}