/* ============================================
   ARTICLE BASE — Shared Freysta article styles
   Minimal universal identity for all articles.
   Everything else lives in per-article CSS.
   ============================================ */

/* ── Scroll Reveal ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="left"] {
  transform: translateX(-60px);
}

[data-reveal="left"].is-revealed {
  transform: translateX(0);
}

[data-reveal="scale"] {
  transform: scale(0.92);
}

[data-reveal="scale"].is-revealed {
  transform: scale(1);
}

/* Staggered delays */
[data-delay="100"] { transition-delay: 0.1s; }
[data-delay="200"] { transition-delay: 0.2s; }
[data-delay="300"] { transition-delay: 0.3s; }
[data-delay="400"] { transition-delay: 0.4s; }
[data-delay="500"] { transition-delay: 0.5s; }
[data-delay="600"] { transition-delay: 0.6s; }
[data-delay="700"] { transition-delay: 0.7s; }
[data-delay="800"] { transition-delay: 0.8s; }

/* ── Prose Typography Defaults ── */
.article-prose p {
  font-size: var(--text-lg, 1.125rem);
  line-height: 1.9;
  color: var(--color-text-secondary, #4a4a4a);
  margin-bottom: var(--space-xl);
}

.article-prose p:last-child {
  margin-bottom: 0;
}

.article-prose a {
  color: var(--color-pine, #2d6a3f);
  text-decoration: underline;
  text-decoration-color: var(--color-aurora, #7dd3c0);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.3s, color 0.3s;
}

.article-prose a:hover {
  color: var(--color-forest, #1a4d2e);
  text-decoration-color: var(--color-pine, #2d6a3f);
}

/* ── Figure Base ── */
.article-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-xl, 12px);
}

.article-figure figcaption {
  text-align: center;
  margin-top: var(--space-md);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-text-muted, #666);
  font-style: italic;
}

/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}