/* ==========================================================================
   NIYAM LANDING PAGE STYLES — MindMarket Editorial + Swiss Modernism
   ========================================================================== */

:root {
  /* Design Tokens — dark theme only */
  color-scheme: dark;
  --bg-main: #171717;
  --bg-card: #282A26;
  --text-main: #F5F1E4;
  --text-sub: #A8A69E;
  --text-muted: #8E908B;
  --border-color: rgba(245, 241, 228, 0.15);

  --accent-green: #8ED462;
  --accent-green-glow: rgba(142, 212, 98, 0.35);
  --accent-blue: #2BA0FF;
  --accent-blue-glow: rgba(43, 160, 255, 0.35);
  --accent-red: #FF705D;
  --accent-yellow: #F5E211;
  --accent-pink: #EBC1FF;

  --font-sans: 'Courier New', Courier, monospace;
  --font-display: 'Courier New', Courier, monospace;
  --font-mono: 'Courier New', Courier, monospace;

  --shadow-sm: 0 2px 8px rgba(44, 46, 42, 0.04);
  --shadow-md: 0 8px 24px rgba(44, 46, 42, 0.08);
  --shadow-lg: 0 16px 40px rgba(44, 46, 42, 0.12);
}

html.dark {
  --bg-main: #171717;
  --bg-card: #282A26;
  --text-main: #F5F1E4;
  --text-sub: #A8A69E;
  --border-color: rgba(245, 241, 228, 0.15);
}

body {
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: 'Courier New', Courier, monospace;
  overflow-x: hidden;
  transition: background-color 0.4s ease, color 0.4s ease;
}

/* Glass Header — dark theme only */
.glass-header {
  background: rgba(28, 30, 27, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-color);
}

/* Pill Tag */
.pill-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 600;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.pill-tag:hover {
  /* hover raise removed — static */
}

/* MindMarket Card — torn-paper look WITHOUT blurring content.
   The distortion lives on a background ::before layer only; card content
   stays sharp and readable above it. */
.mm-card {
  background: transparent;
  border: none;
  border-radius: 2rem;
  position: relative;
  isolation: isolate;
  filter: none;
  transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.35s ease;
}
.mm-card.overflow-hidden {
  overflow: visible;
}
.mm-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-md);
  filter: url(#tornPaper);
  z-index: 0;
  pointer-events: none;
}
.mm-card:hover::before {
  box-shadow: var(--shadow-lg);
}
.mm-card:hover {
  /* hover raise removed — static */
}
/* Keep all tile content sharp above the torn background */
.mm-card > * {
  position: relative;
  z-index: 1;
}

/* Buttons */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.75rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 0.9rem;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-pill-primary {
  background-color: var(--text-main);
  color: var(--bg-main);
}
.btn-pill-primary:hover {
  background-color: var(--accent-green);
  color: #2C2E2A;
  box-shadow: 0 10px 25px rgba(142, 212, 98, 0.4);
}

/* Animations */
@keyframes springReveal {
  0% { opacity: 0; transform: translateY(30px) scale(0.96); }
  60% { opacity: 0.9; transform: translateY(-4px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes textShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.animate-shimmer {
  background: linear-gradient(90deg, #2BA0FF 0%, #8ED462 25%, #FF705D 50%, #2BA0FF 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShimmer 4s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: 200%;
  animation: marquee 25s linear infinite;
}
.animate-marquee:hover {
  animation-play-state: paused;
}

/* Handwritten look: typewriter base + hand-drawn wobble (from notebook snippet) */
body {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Step every weight up so all text reads heavier but hierarchy survives */
.font-light { font-weight: 600 !important; }
.font-normal { font-weight: 700 !important; }
.font-medium { font-weight: 700 !important; }
.font-semibold { font-weight: 800 !important; }
.font-bold { font-weight: 800 !important; }
.font-extrabold, .font-black { font-weight: 900 !important; }
.pill-tag { font-weight: 700; }
b, strong { font-weight: 900; }

/* Hand-drawn wobble — size-scaled: small text = subtle, large text = strong.
   Applied to TEXT elements only (never cards/images/containers) so layout,
   backdrop-blur and pictures stay clean. */

/* MD — default body copy (block/leaf level only — no generic span to avoid double-filter) */
main p,
main li,
main a,
main button,
.btn-pill {
  filter: url(#handDrawnNoiseMd);
}

/* SM — small text: less intensity to stay legible */
.text-xs,
small,
.pill-tag,
header nav a,
header nav button,
header .font-black,
footer a,
footer p,
footer h3,
#sandbox-console,
.animate-marquee > span {
  filter: url(#handDrawnNoiseSm);
}

/* MD — mid text explicitly */
.text-sm,
.text-base {
  filter: url(#handDrawnNoiseMd);
}

/* LG — sub-heads: more wobble */
h3,
.text-lg,
.text-xl,
.text-2xl,
.text-3xl {
  filter: url(#handDrawnNoiseLg);
}

/* XL — hero / section titles: strongest wobble */
h1,
h2,
.text-4xl,
.text-5xl,
.text-6xl,
.text-7xl,
.text-8xl {
  filter: url(#handDrawnNoiseXl);
}

/* Prevent double-displacement: children of an already-filtered text
   element inherit the parent's wobble visually — don't filter twice. */
h1 span, h1 a,
h2 span, h2 a,
h3 span, h3 a,
p span, p a,
a span,
button span,
.pill-tag i, .pill-tag svg,
.btn-pill i, .btn-pill svg {
  filter: none !important;
}

/* Hand-drawn wobble — UPPER BORDER only (footer).
   A thin pseudo-element sits on the top edge and gets the displacement
   filter, so only that line looks hand-drawn. Content stays sharp. */

#site-footer {
  position: relative;
  overflow: visible;
}
#site-footer::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-blue), var(--accent-pink));
  opacity: 0.9;
  filter: url(#handDrawnBorderFooter);
  pointer-events: none;
}

/* ═══════════ DARK-ONLY — no white theme ═══════════
   html is always .dark; these force any leftover light utilities dark. */
html { color-scheme: dark; }
html.dark {
  --bg-main: #171717;
  --bg-card: #282A26;
  --text-main: #F5F1E4;
  --text-sub: #A8A69E;
  --border-color: rgba(245, 241, 228, 0.15);
}
#theme-btn { display: none !important; }

/* Mobile nav drawer — expands down from the nav instead of fading */
#mobileMenu {
  transform-origin: top;
  transition: clip-path 0.34s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}
#mobileMenu.drawer-closed {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  pointer-events: none;
}
#mobileMenu.drawer-open {
  clip-path: inset(0 0 0% 0);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  #mobileMenu { transition: none; }
}