/* Vitriol website.
/* ------------------------------------------------------------------ */
/* Tokens */
/* ------------------------------------------------------------------ */

:root {
  /* Surfaces */
  --bg:           #0a0a0f;
  --surface:     #15151f;
  --surface-2:   #0d0d15;
  --border:      #1f1f2e;
  --border-2:    #2a2a3a;
  --border-3:    #3a3a4a;

  /* Ink */
  --ink:         #e8e8f0;
  --ink-muted:   #9090a0;
  --ink-faint:   #6a6a7a;

  /* Brand — purple (Stone) and blue (Verify) */
  --purple:      #8b5cf6;
  --purple-soft: #a78bfa;
  --purple-hot:  #9d72ff;
  --blue:        #3b82f6;
  --red:         #c0392b;

  /* Glow */
  --glow:        rgba(139, 92, 246, 0.35);
  --glow-blue:   rgba(59, 130, 246, 0.30);

  /* Layout */
  --content-max: 1100px;
  --gutter:      28px;
  --radius:      10px;
  --radius-lg:   16px;

  /* Type */
  --font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* ------------------------------------------------------------------ */
/* Reset + base */
/* ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; 
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(139, 92, 246, 0.12), transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(59, 130, 246, 0.08), transparent 70%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; }
a { color: var(--purple-soft); text-decoration: none; }
a:hover { color: var(--purple-hot); }

/* Selection — purple to match brand */
::selection { background: var(--purple); color: #fff; }

/* ------------------------------------------------------------------ */
/* Inscribed alchemical border (rendered by js/border.js) */
/* ------------------------------------------------------------------ */

#alchemy-border {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 100;
}

/* Bottom-of-viewport fade so scrolling page content visually
   disappears before it reaches the alchemy border line + glyphs.
   Without this, paragraphs and section content scroll directly
   *through* the planetary glyph row at the bottom edge, which
   looks like a layout bug.
   z-index 80 sits ABOVE content (z=auto) and the sticky nav (z=50)
   but BELOW the alchemy frame (z=100), so the frame's lines + glyphs
   still paint on top while page content is masked behind. The top
   edge needs no equivalent fade because the sticky nav's own blurred
   background already covers content scrolling into the top zone. */
body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: linear-gradient(to top, var(--bg) 35%, transparent 100%);
  pointer-events: none;
  z-index: 80;
}


/* ------------------------------------------------------------------ */
/* Layout primitives */
/* ------------------------------------------------------------------ */

.wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section {
  
  padding: 96px 56px;
}

@media (max-width: 700px) {
  section { padding: 64px 32px; }
}

/* ------------------------------------------------------------------ */
/* Top nav */
/* ------------------------------------------------------------------ */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 10, 15, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32px 56px 16px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.08em;
  color: var(--ink);
  font-weight: 600;
  margin-top: 4px;
}

.nav-brand img { width: 28px; height: 28px; }

.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}

/* The Download button is much taller than the brand text — without an
   extra margin-top, its top edge would sit higher than the brand's,
   visually intersecting the alchemy frame's top line. Drops it down so
   both elements feel grounded inside the frame. */
.nav-links .btn { 
  margin-top: 14px; 
   font-weight: 800;
}

.nav-links a {
  color: var(--ink-muted);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 120ms;
}

.nav-links a:hover { color: var(--ink); }

@media (max-width: 700px) {
  .nav-inner { padding: 12px 32px; }
  .nav-links { gap: 18px; }
  .nav-links a:not(.btn) { display: none; }   /* keep only Download CTA on mobile */
}

/* ------------------------------------------------------------------ */
/* Hero */
/* ------------------------------------------------------------------ */

.hero {
  text-align: center;
  padding: 96px 56px 80px;
  position: relative;
}

.hero-motto {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--purple-soft);
  text-transform: none;
  margin: 0 0 32px;
  font-style: italic;
  opacity: 0.85;
}

.hero-logo {
  width: 200px;
  height: 200px;
  margin: 0 auto 24px;
  filter: drop-shadow(0 0 32px var(--glow))
          drop-shadow(0 0 12px rgba(167, 139, 250, 0.45));
  animation: hero-pulse 6s ease-in-out infinite;
}

@keyframes hero-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 32px var(--glow))
            drop-shadow(0 0 12px rgba(167, 139, 250, 0.45));
  }
  50% {
    filter: drop-shadow(0 0 48px rgba(139, 92, 246, 0.55))
            drop-shadow(0 0 18px rgba(167, 139, 250, 0.65));
  }
}

.hero-wordmark {
  font-family: var(--font-display);
  font-size: 88px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0 0 12px;
  color: var(--ink);
  /* Subtle gradient text in the same purple → blue ramp as the logo SVG */
  background: linear-gradient(135deg, #ffffff 0%, #e8e8f0 40%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 700px) {
  .hero-wordmark { font-size: 56px; }
  .hero-logo { width: 140px; height: 140px; }
}

.hero-translation {
  color: var(--ink-muted);
  font-style: italic;
  font-size: 16px;
  margin: 0 auto 36px;
  max-width: 640px;
}

.hero-tagline {
  font-size: 20px;
  color: var(--ink);
  max-width: 720px;
  margin: 0 auto 40px;
  line-height: 1.5;
}

.hero-tagline strong { color: var(--purple-soft); font-weight: 600; }

.hero-ctas {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ */
/* Buttons */
/* ------------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 160ms ease;
}

.btn-primary {
  background: var(--purple);
  border-color: var(--purple);
  color: #ffffff;
  box-shadow: 0 4px 16px var(--glow);
}
.btn-primary:hover {
  background: var(--purple-hot);
  border-color: var(--purple-hot);
  color: #ffffff;
  box-shadow: 0 6px 24px rgba(139, 92, 246, 0.55);
  transform: translateY(-1px);
}

.btn-secondary {
  background: transparent;
  border-color: var(--border-3);
  color: var(--ink);
}
.btn-secondary:hover {
  background: var(--surface);
  border-color: var(--purple-soft);
  color: var(--ink);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ink-muted);
  padding: 8px 14px;
}
.btn-ghost:hover { color: var(--ink); }

/* GitHub icon used inside .btn — sized to the button line height */
.btn .icon { width: 18px; height: 18px; }

/* ------------------------------------------------------------------ */
/* Section heading */
/* ------------------------------------------------------------------ */

.section-eyebrow {
  display: block;
  text-align: center;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--purple-soft);
  opacity: 0.8;
  margin: 0 0 12px;
}

.section-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 20px;
}

.section-lede {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
  font-size: 18px;
  color: var(--ink-muted);
  line-height: 1.65;
}

@media (max-width: 700px) {
  .section-title { font-size: 32px; }
  .section-lede { font-size: 16px; }
}

/* ------------------------------------------------------------------ */
/* Cards (matches QFrame#Card) */
/* ------------------------------------------------------------------ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform 200ms ease, border-color 200ms ease,
              box-shadow 200ms ease;
}

.card:hover {
  border-color: var(--border-3);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(167, 139, 250, 0.08) inset;
}

.card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin: 0 0 12px;
}

.card p {
  color: var(--ink-muted);
  margin: 0;
  font-size: 15px;
}

.card .card-icon {
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  color: var(--purple-soft);
}

/* ------------------------------------------------------------------ */
/* Grid */
/* ------------------------------------------------------------------ */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.grid-4-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .grid-3, .grid-5, .grid-4-thumbs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .grid-3, .grid-2, .grid-5, .grid-4-thumbs { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/* Format pills (the five categories) */
/* ------------------------------------------------------------------ */

.category {
  text-align: center;
  padding: 24px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 200ms;
}

.category:hover {
  border-color: var(--purple-soft);
  background: linear-gradient(135deg, var(--surface) 0%, rgba(139, 92, 246, 0.06) 100%);
}

.category-icon {
  width: 32px;
  height: 32px;
  margin: 0 auto 10px;
  color: var(--purple-soft);
}

.category-name {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.05em;
  color: var(--ink);
  margin: 0 0 6px;
}

.category-formats {
  font-size: 12px;
  color: var(--ink-faint);
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Monaco, Consolas, monospace;
  line-height: 1.5;
  word-break: break-all;
}

/* ------------------------------------------------------------------ */
/* Stone gallery */
/* ------------------------------------------------------------------ */

.stone-gallery figure {
  margin: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 200ms ease;
}

.stone-gallery figure:hover {
  border-color: var(--purple);
  transform: translateY(-2px);
  box-shadow: 0 0 24px var(--glow);
}

.stone-gallery img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.stone-gallery figcaption {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.stone-gallery figcaption strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  font-size: 14px;
  margin-bottom: 4px;
}

.stone-caption {
  text-align: center;
  font-style: italic;
  color: var(--ink-faint);
  margin-top: 24px;
  font-size: 14px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.stone-caption code {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--purple-soft);
}

/* ------------------------------------------------------------------ */
/* Sample row (audio, downloads) */
/* ------------------------------------------------------------------ */

.sample-row {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}

/* Chopin row has no audio preview — same-category audio→audio
   isn't Stone mode, so there's nothing meaningful to play.
   Collapse to a single column so the right side isn't visually
   empty (which would look like a broken layout). */
.sample-row--no-player {
  grid-template-columns: 1fr;
}

.sample-row h4 {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 8px;
}

.sample-row .source {
  font-size: 14px;
  color: var(--ink-muted);
  margin: 0;
}

.sample-row .outputs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.sample-row .outputs a {
  font-size: 12px;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: 6px;
  color: var(--purple-soft);
  font-family: ui-monospace, monospace;
  transition: all 160ms;
}

.sample-row .outputs a:hover {
  border-color: var(--purple);
  background: rgba(139, 92, 246, 0.08);
}

.sample-row audio {
  width: 280px;
  height: 36px;
  filter: invert(0.85) hue-rotate(190deg);
}

/* Per-row player label — sits above the audio element so each player
   honestly says what it's playing (Stone .wav OUTPUT for cross-category
   sources, source recording for same-category audio). Without this the
   page would imply the Chopin player is a Stone output, which it isn't. */
.sample-player {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.sample-player .player-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--purple-soft);
  opacity: 0.7;
}

@media (max-width: 700px) {
  .sample-row {
    grid-template-columns: 1fr;
  }
  .sample-row audio { width: 100%; }
  .sample-player {
    align-items: flex-start;
  }
  .sample-player audio { width: 100%; }
}

/* ------------------------------------------------------------------ */
/* Download section */
/* ------------------------------------------------------------------ */

.download-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

@media (max-width: 700px) {
  .download-cards { grid-template-columns: 1fr; }
}

.download-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  padding: 32px;
  position: relative;
  overflow: hidden;
}

.download-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, var(--glow), transparent 50%);
  opacity: 0;
  transition: opacity 240ms;
  pointer-events: none;
}

.download-card:hover::before { opacity: 1; }

.download-card .badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.3);
  color: var(--purple-soft);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.download-card h3 {
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  color: var(--ink);
}

.download-card .download-meta {
  font-size: 13px;
  color: var(--ink-faint);
  margin-bottom: 20px;
}

.download-card p {
  color: var(--ink-muted);
  font-size: 15px;
  margin: 0 0 24px;
  line-height: 1.65;
}

.download-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.download-card li {
  font-size: 13px;
  color: var(--ink-muted);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.download-card li::before {
  content: "◆";
  color: var(--purple-soft);
  font-size: 8px;
  opacity: 0.6;
}

/* ------------------------------------------------------------------ */
/* Trust strip */
/* ------------------------------------------------------------------ */

.trust-strip {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px 56px;
  margin: 0 56px;
  border-radius: var(--radius-lg);
}

.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  text-align: center;
}

@media (max-width: 700px) {
  .trust-row { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .trust-strip { padding: 24px; margin: 0 16px; }
}

.trust-item .icon { width: 24px; height: 24px; color: var(--purple-soft); margin: 0 auto 8px; }
.trust-item .label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ------------------------------------------------------------------ */
/* Footer */
/* ------------------------------------------------------------------ */

footer {
  /* Generous bottom padding (88px) gives the last footer line
     real clearance from the alchemy frame's bottom inner border
     line (~30px from viewport bottom) and the bottom-fade overlay
     (64px tall). Without this the copyright line sits behind the
     planetary glyph row when the page is scrolled all the way down. */
  padding: 48px 56px 88px;
  border-top: 1px solid var(--border);
  margin-top: 64px;
  text-align: center;
}

footer .motto {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--purple-soft);
  font-style: italic;
  opacity: 0.7;
  margin: 0 0 12px;
}

footer .links {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 16px 0;
}

footer .links a {
  font-size: 13px;
  color: var(--ink-muted);
}

footer .copyright {
  font-size: 12px;
  color: var(--ink-faint);
  margin-top: 16px;
}

/* ------------------------------------------------------------------ */
/* Code blocks (used in install snippets) */
/* ------------------------------------------------------------------ */

pre, code {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Monaco, Consolas, monospace;
}

pre {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 20px;
  font-size: 13px;
  color: var(--ink);
  overflow-x: auto;
  margin: 12px 0;
}

p code, li code {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  color: var(--purple-soft);
}

/* ------------------------------------------------------------------ */
/* Reveal-on-scroll (added by js/border.js) */
/* ------------------------------------------------------------------ */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}