/* ==========================================================================
   grove.css — the Forge's share of one design system.

   Mapped Soul is a building in the Grove, not a separate product, so it is
   drawn with the same rules the Grove is: gold constant, room tone for the
   interior, one easing curve, contrast floors that paragraphs actually meet.
   Walking here from auralen.one/grove should feel like stepping indoors.

   Structure follows what both agent kits ask for — bg / card / accent / text /
   muted — so the tokens map one-to-one with the Grove's room tones.
   ========================================================================== */

:root {
  /* --- the Forge: firelit interior ------------------------------------- */
  --bg: #160f1a;
  --card: #241b2c;
  --accent: #c07390;
  --accent-deep: #8a3a55;

  /* --- Auralen's constant ---------------------------------------------- */
  --gold: #d9b75f;
  --gold-bright: #eccf86;

  /* --- type ------------------------------------------------------------
     Contrast floors, per the Cinematic Sites rules: on dark grounds body copy
     sits at #999 or lighter and labels at #888 or lighter. --muted is for
     captions and metadata only — never for a paragraph. */
  --text: #f0ebf0;
  --body: #cbbdd0;
  --label: #a898ae;
  --muted: #8d7f93;

  --hair: rgba(217, 183, 95, 0.22);
  --edge: rgba(217, 183, 95, 0.4);

  /* --- the library's single easing curve -------------------------------- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Noise. On both kits' quality lists, and most of the difference between a
   dark background and a place — it is what stops large flat washes banding.
   Inline data URI so it costs no request and needs no CSP allowance. */
.grove-noise {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- the navbar lives in js/grove-shell.js ------------------------------
   It used to be declared here and hand-written into index.html, which meant
   the Forge's front door had a Grove navbar and the other seventeen pages had
   none. The bar is now injected on every page by the shell script, which
   carries its own styles so that pages which have not yet been migrated onto
   this stylesheet still get the whole bar rather than unstyled markup.

   Those styles read every colour as `var(--token, #literal)`, so a page that
   does load this file gets these tokens and the rest fall back correctly. */

/* --- the one button ----------------------------------------------------- */
.grove-cta {
  display: inline-block;
  padding: 16px 40px;
  border: none;
  border-radius: 40px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #241b2c;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 30px rgba(236, 207, 134, 0.2);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.grove-cta:hover {
  box-shadow: 0 10px 40px rgba(236, 207, 134, 0.3);
}
.grove-cta.ghost {
  background: none;
  border: 1px solid var(--edge);
  color: var(--gold-bright);
  box-shadow: none;
}
.grove-cta.ghost:hover {
  background: rgba(217, 183, 95, 0.06);
}

/* --- labels are semibold, per the contrast rule ------------------------- */
.grove-label {
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--label);
}

/* --- reveal ------------------------------------------------------------
   The resting state is VISIBLE. `.grove-reveal` only does anything once JS has
   added `.armed`, so a reader without JavaScript, a crawler, or anyone whose
   observer never fires still gets the whole page. R59 writes this rule as
   `.service-card { opacity: 1 !important }`; this is the same guarantee made
   structural rather than remembered. */
.grove-reveal.armed {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.grove-reveal.armed.shown {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .grove-reveal.armed {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .grove-cta {
    transition: none;
  }
}