/*
 * MoonJapan shared page standard
 *
 * This file is the baseline for About and future Team, Service, and Teachers
 * page revisions. Load it after the page's structural stylesheet.
 *
 * Background:
 * - Base surfaces are white or paper.
 * - Time-varying red/yellow/blue ambient color is implemented in
 *   fluid-ambient.css; keep central reading areas quiet.
 * Typography:
 * - .design-eyebrow: small English section label.
 * - .design-display-heading: first-view statement.
 * - .design-section-title: Japanese section title.
 * - .design-body-copy: primary explanatory copy.
 * Layout:
 * - .content-shell-standard: text-heavy section width.
 * Motion:
 * - Prefer opacity and transform. Avoid large animated blur filters.
 * - Add .design-reference-page to pages that follow this standard.
 */
:root {
  --design-white: #ffffff;
  --design-paper: #f5f5f5;
  --design-ink: #333333;
  --design-ink-muted: rgba(51, 51, 51, 0.56);
  --design-copy-color: rgba(51, 51, 51, 0.76);
  --design-blue: #015283;
  --design-line: rgba(51, 51, 51, 0.14);
  --design-label-font: var(--font-heiti, sans-serif);
  --design-heading-size: clamp(1.7rem, 4.2vw, 4rem);
  --design-heading-weight: 650;
  --design-heading-letter-spacing: 0.035em;
  --design-heading-line-height: 1.4;
  --design-body-size: clamp(0.86rem, 1.22vw, 1.08rem);
  --design-body-small-size: clamp(0.88rem, 1.05vw, 1rem);
  --design-body-weight: 500;
  --design-body-letter-spacing: 0.07em;
  --design-body-line-height: 2.18;
  --design-section-space: clamp(6.5rem, 11vw, 11rem);
  --design-section-space-mobile: 5.8rem;
  --design-motion-fast: 360ms;
  --design-motion-medium: 640ms;
  --design-motion-slow: 900ms;
  --design-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --content-shell-standard-max: 80rem;
  --content-shell-standard-inset: clamp(3rem, 10vw, 9rem);
}

.design-eyebrow {
  color: var(--design-blue);
  font-family: var(--design-label-font);
  font-size: clamp(0.7rem, 0.9vw, 0.9rem);
  font-weight: 300;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
}

.design-display-heading,
.design-section-title {
  margin: 0;
  color: var(--design-ink);
  font-size: var(--design-heading-size);
  font-weight: var(--design-heading-weight);
  letter-spacing: var(--design-heading-letter-spacing);
  line-height: var(--design-heading-line-height);
}

.design-body-copy {
  color: var(--design-copy-color);
  font-size: var(--design-body-size);
  font-weight: var(--design-body-weight);
  letter-spacing: var(--design-body-letter-spacing);
  line-height: var(--design-body-line-height);
}

.content-shell-standard {
  width: min(
    calc(100% - var(--content-shell-standard-inset)),
    var(--content-shell-standard-max)
  );
  margin-inline: auto;
}

/* Shared lightweight entrance motion: no animated blur or filter layer. */
.design-reference-page [data-reveal] {
  filter: none;
  transform: translateY(1rem);
  transition:
    opacity var(--design-motion-medium) var(--design-ease),
    transform var(--design-motion-medium) var(--design-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.design-reference-page [data-reveal].is-revealed {
  filter: none;
  transform: translateY(0);
}

/* Skip below-the-fold paint work without changing each page's layout. */
.design-reference-page .company-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 54rem;
}

@media (width < 768px) {

  .design-body-copy:where(:not(.mission-intro__statement)) {
    font-size: 0.8rem;
    letter-spacing: 0.045em;
    line-height: 2.05;
  }

  .content-shell-standard {
    width: min(calc(100% - 2rem), var(--content-shell-standard-max));
  }
}

@media (width < 1200px) {
  .design-body-copy:where(.mission-intro__statement) {
    font-size: 0.8rem;
    letter-spacing: 0.045em;
    line-height: 2.05;
  }
}

@media (prefers-reduced-motion: reduce) {
  .design-reference-page [data-reveal] {
    transform: none;
    transition-duration: 1ms;
  }
}