/*
 * MIC Public Experience — Shell + Art Direction + Motion.
 * ------------------------------------------------------------------
 * Viewport → Full-Width Surface → Content (1040) → Reading (68ch) → Bleed.
 * GeneratePress is the shell; the Experience owns the visual boundary.
 *
 * Consumes MIC Design Language tokens only (--mic-*).
 */

/* ------------------------------------------------------------------
   1. Shell — free the Experience from the GeneratePress container
   ------------------------------------------------------------------ */
.mic-experience .site.grid-container,
.mic-experience .site-content,
.mic-experience #content,
.mic-experience .content-area,
.mic-experience .site-main,
.mic-experience .site-main > article {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  padding-inline: 0;
}
.mic-experience .site-content { display: block; }

/* ------------------------------------------------------------------
   2. Signature accents (theme-scoped; extract to Core after proof)
   ------------------------------------------------------------------ */
.mic-experience {
  --mic-art-capability: #1d4ed8; /* capability / system voice */
  --mic-art-tension:    #c2410c; /* challenge / tension voice */
}

/* ------------------------------------------------------------------
   3. Motion grammar — restrained, reduced-motion safe.
   The `mic-js` class is set in <head> (see experience-shell.php) so
   content never flashes before revealing.
   ------------------------------------------------------------------ */
.mic-js [data-mic-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms var(--mic-ease-emphasized), transform 700ms var(--mic-ease-emphasized);
  transition-delay: var(--mic-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.mic-js [data-mic-reveal].is-revealed { opacity: 1; transform: none; }

/* Media frames get a slightly deeper entrance. */
.mic-js .work-frame[data-mic-reveal] { transform: translateY(26px) scale(0.985); }

/* No IntersectionObserver → reveal everything. */
.mic-reveal-all [data-mic-reveal] { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  [data-mic-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------
   4. Shared Page Experience Base  (NOT a design system)
   Consumed by every MIC Page archetype. Only the presentation
   foundations proven identical across Home / About / Services live
   here. Page-specific composition stays in page-<archetype>.css.
   Boundary: Core = Capability · mic-pages = Grammar · Theme = Expression.
   ------------------------------------------------------------------ */
.mic-page {
  --page-gap: clamp(4.5rem, 9vw, 9rem);
  --page-rule: 1px solid var(--mic-color-border);
  --page-reading: var(--mic-layout-reading);
}
@media (max-width: 768px) {
  .mic-page { --page-gap: clamp(3.5rem, 12vw, 5.5rem); }
}

/* Ink surface: a ghost button must read light. */
.mic-surface-ink .mic-btn--ghost {
  color: var(--mic-color-ink);
  border-color: rgba(255, 255, 255, 0.28);
}
.mic-surface-ink .mic-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: #fff;
  color: #fff;
}

/* Ink surface: evidence eyebrow uses the light gold, not the AA-text gold. */
.mic-surface-ink .mic-eyebrow--evidence {
  color: var(--mic-palette-gold-300);
}