/* ============================================================
   Hashtag World corporate skin layer (shared by labs pages).
   Brings the corporate design language (dark #0a0a0a + violet #b49bff,
   Plus Jakarta Sans, glassmorphism, aurora + dot-grid, gradient-text)
   into the hand-built labs site without touching any viewer JS.
   Loaded AFTER styles.css / product.css; uses their :root tokens.
   ============================================================ */

/* Plus Jakarta Sans variable, self-hosted. TWO subsets so Turkish (s-cedilla, g-breve,
   dotted/dotless I) renders: latin + latin-ext, split by unicode-range (Google subset boundaries). */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("assets/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- ambient violet field (corporate signature, fixed behind content) ---- */
.aurora {
  position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
  /* transparent base so a deep-space layer (#space) can sit behind it */
}
.aurora::before, .aurora::after {
  content: ""; position: absolute; border-radius: 50%; filter: blur(120px);
}
.aurora::before {
  width: 58vw; height: 58vw; top: -16vw; left: -10vw;
  background: transparent;
  animation: aurora-drift-1 26s ease-in-out infinite alternate;
}
.aurora::after {
  width: 50vw; height: 50vw; bottom: -18vw; right: -8vw;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05), transparent 58%);
  animation: aurora-drift-2 32s ease-in-out infinite alternate;
}
@keyframes aurora-drift-1 { from { transform: translate(0,0) scale(1); } to { transform: translate(8vw,6vw) scale(1.15); } }
@keyframes aurora-drift-2 { from { transform: translate(0,0) scale(1.05); } to { transform: translate(-7vw,-5vw) scale(1); } }

/* ---- masked violet dot grid ---- */
.dot-grid {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgb(var(--accent-rgb) / 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 72% 60% at 50% 38%, #000 28%, transparent 76%);
  mask-image: radial-gradient(ellipse 72% 60% at 50% 38%, #000 28%, transparent 76%);
  animation: grid-drift 22s linear infinite;
}
@keyframes grid-drift { from { background-position: 0 0; } to { background-position: 40px 40px; } }

/* ---- violet gradient text on the emphasized word ---- */
.gradient-text {
  background: linear-gradient(135deg, #16181D, #2C2F36, #565B63);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- accent-to-transparent hairline ---- */
.gradient-divider { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--accent), transparent); }

/* ---- giant outlined display numeral ---- */
.step-number {
  font-family: var(--disp); font-weight: 800; line-height: 1; color: transparent;
  -webkit-text-stroke: 2px var(--accent);
}

/* NOTE: labs already ships its own scroll-reveal (.reveal-on .reveal + .in via
   product.js); we intentionally do NOT redefine .reveal here so we don't clobber it. */

/* ---- accent selection + scrollbar ---- */
::selection { background: rgb(var(--accent-rgb) / 0.3); color: #fff; }
html { scrollbar-width: thin; scrollbar-color: var(--accent-muted) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--accent-muted); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .aurora::before, .aurora::after, .dot-grid { animation: none; }
}

/* =========================================================
   Koyu kontrol paneli, acik studyo sayfasi uzerinde.
   Sayfa acik kalir; sag panel (#dock) koyu bir yuzey olur:
   beyaz metin/ikon, acik katmanlar. Sadece dock icini etkiler.
   ========================================================= */
#dock {
  --txt: #F2F4F8;
  --txt-dim: #A8AEB8;
  --txt-faint: #7E8692;
  --accent: #E6E9EF;
  --accent-rgb: 230 233 239;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.16);
  background: linear-gradient(165deg, rgba(28, 31, 39, 0.94), rgba(15, 17, 22, 0.95));
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 26px 64px rgba(22, 24, 29, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #F2F4F8;
}
#dock::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); }
#dock .tabs { background: rgba(255, 255, 255, 0.06); }
#dock .tabs button.on {
  background: rgba(255, 255, 255, 0.14);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
#dock input[type="range"] { background: rgba(255, 255, 255, 0.16); }
#dock .move-btn,
#dock .pose-grid button,
#dock .action-btn { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.10); }
#dock .move-btn:hover,
#dock .pose-grid button:hover,
#dock .action-btn:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.20); }
#dock .part-row { background: rgba(255, 255, 255, 0.04); }
#dock .part-row:hover { background: rgba(255, 255, 255, 0.09); }
#dock .part-list::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); }

/* Alt ipucu cubugu + FOLLOWER/LEADER: panele uyan koyu kontroller */
#hint {
  --txt: #F2F4F8;
  --txt-dim: #AAB0BA;
  background: rgba(20, 22, 28, 0.82);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 12px 36px rgba(22, 24, 29, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
#hint .hint-key { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.16); }
#hint .hint-sep { background: rgba(255, 255, 255, 0.14); }