/* ============================================================
   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: radial-gradient(circle at center, rgb(var(--accent-rgb) / 0.09), transparent 58%);
  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(139, 111, 204, 0.07), 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, #b49bff, #d4c5ff, #8b6fcc);
  -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; }
}