/* =====================================================
   I'm Hopping — Base / Reset / Typography (v3)
   ===================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);  /* アンカー遷移時にヘッダー下24pxで止める */
}

body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--color-text);
  background-color: var(--color-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "palt" 1;
  overflow-x: hidden;
}

/* -----------------------------------------------------------------
 * Headings — base
 * --------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-jp);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-snug);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); }

p {
  margin: 0 0 var(--space-sm);
}
p:last-child { margin-bottom: 0; }

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img, svg, picture, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-lg) 0;
}

strong, b {
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

em {
  font-style: normal;
}

/* -----------------------------------------------------------------
 * Links
 * --------------------------------------------------------------- */
a {
  color: var(--color-btn-primary);
  text-decoration: none;
  transition: opacity 0.2s ease, color 0.2s ease;
}
@media (hover: hover) {
  a:hover {   opacity: 0.7; }
}
a:focus-visible {
  outline: 2px solid var(--color-btn-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Global :focus-visible baseline — キーボードナビ時に必ず可視化される
   button / summary / [tabindex] 等もまとめて対象に。
   個別ルール（.btn:focus-visible 等）は上書き可能。 */
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-btn-primary);
  outline-offset: 3px;
  border-radius: 2px;
}
/* マウスクリック由来の :focus は枠線を非表示にする（:focus-visible のみ表示） */
:focus:not(:focus-visible) {
  outline: none;
}

.prose a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Arrow link (small, secondary) */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-sub);
  font-size: var(--fs-small);
  font-family: var(--font-jp);
}
@media (hover: hover) {
  .link-arrow:hover {   color: var(--color-text); opacity: 1; }
}

/* -----------------------------------------------------------------
 * Selection
 * --------------------------------------------------------------- */
::selection {
  background: var(--color-green-pastel);
  color: var(--color-black);
}

/* -----------------------------------------------------------------
 * Utility — visually hidden / skip link
 * --------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-text);
  color: var(--color-white);
  border-radius: 0 0 var(--radius-md) 0;
  font-weight: var(--fw-medium);
}
.skip-link:focus {
  left: 0;
  color: var(--color-white);
}

/* -----------------------------------------------------------------
 * Container
 * --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-narrow); }
.container--wide   { max-width: var(--container-max); }
.container--full   { max-width: 100%; padding-inline: 0; }

/* -----------------------------------------------------------------
 * Section spacing
 * --------------------------------------------------------------- */
.section {
  padding-block: var(--section-py);
}
.section--tight {
  padding-block: var(--space-lg);
}

/* Background tone variants for sections */
.section--white       { background: var(--color-white); }
.section--green-light { background: var(--color-green-light); }
.section--green       { background: var(--color-green); }
.section--black       { background: var(--color-black); color: var(--color-white); }

.section--black h1,
.section--black h2,
.section--black h3,
.section--black h4 {
  color: var(--color-green-accent);
}
.section--green h1,
.section--green h2,
.section--green h3,
.section--green h4 {
  color: var(--color-black);
}

/* -----------------------------------------------------------------
 * Eyebrow
 * --------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-en-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-text-sub);
  background: transparent;
  padding: 0;
  border-radius: 0;
  margin-bottom: var(--space-sm);
  line-height: 1;
}
.eyebrow::before { display: none; }
.eyebrow--ghost { color: var(--color-text-sub); }

/* -----------------------------------------------------------------
 * Section heading helpers
 * --------------------------------------------------------------- */
.section-heading {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: inherit;
  margin-bottom: var(--space-md);
  letter-spacing: var(--tracking-snug);
  line-height: var(--lh-tight);
}
.section-lead {
  font-size: var(--fs-body);
  color: var(--color-text-sub);
  max-width: 36em;
  margin-bottom: var(--space-lg);
  line-height: var(--lh-base);
}
.section--black .section-lead,
.section--black p { color: rgba(255,255,255,0.78); }
.section--green .section-lead,
.section--green p { color: var(--color-black); }

/* Centered section header */
.section__title {
  text-align: center;
  font-size: var(--fs-h1);
  margin-bottom: var(--space-md);
}
.section__lead {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
  color: var(--color-text-sub);
}

/* -----------------------------------------------------------------
 * On-* legacy tone variants (kept for compatibility)
 * --------------------------------------------------------------- */
.on-dark, .on-black { color: var(--color-white); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4,
.on-black h1, .on-black h2, .on-black h3, .on-black h4 {
  color: var(--color-green-accent);
}
.on-dark .section-heading,
.on-black .section-heading { color: var(--color-green-accent); }
.on-dark .section-lead, .on-dark p,
.on-black .section-lead, .on-black p { color: rgba(255,255,255,0.78); }
.on-dark a, .on-black a { color: var(--color-green-accent); }
@media (hover: hover) {
  .on-dark a:hover, .on-black a:hover {   opacity: 0.8; }
}
.on-dark .eyebrow,
.on-black .eyebrow { color: rgba(255,255,255,0.7); }

.on-green { color: var(--color-black); }
.on-green h1, .on-green h2, .on-green h3, .on-green h4,
.on-green .section-heading { color: var(--color-black); }
.on-green .section-lead, .on-green p { color: var(--color-black); }
.on-green a { color: var(--color-black); text-decoration: underline; text-underline-offset: 0.2em; }
.on-green .eyebrow { color: var(--color-black); }

.on-blue { color: var(--color-white); }
.on-blue h1, .on-blue h2, .on-blue h3, .on-blue h4,
.on-blue .section-heading { color: var(--color-white); }
.on-blue .section-lead, .on-blue p { color: rgba(255,255,255,0.85); }
.on-blue a { color: var(--color-green-accent); }
.on-blue .eyebrow { color: rgba(255,255,255,0.85); }

/* -----------------------------------------------------------------
 * Text utilities
 * --------------------------------------------------------------- */
.text-en      { font-family: var(--font-en-sans); }
.text-display { font-family: var(--font-en-serif); font-weight: var(--fw-bold); }
.text-mono    { font-family: var(--font-mono); }
.text-accent  { color: var(--color-btn-primary); }
.text-primary { color: var(--color-btn-primary); }
.text-mute    { color: var(--color-text-sub); }
.text-center  { text-align: center; }
.text-lime    { color: var(--color-green); }

/* Legacy aliases */
.text-en-serif { font-family: var(--font-en-serif); font-weight: var(--fw-bold); }
.text-en-sans  { font-family: var(--font-en-sans); }

/* -----------------------------------------------------------------
 * Background utilities (kept as semantic aliases)
 * --------------------------------------------------------------- */
.bg-paper       { background: var(--color-white); }
.bg-paper-soft  { background: var(--color-white); }
.bg-mist        { background: var(--color-green-light); }
.bg-green       { background: var(--color-green); color: var(--color-black); }
.bg-green-soft  { background: var(--color-green-light); color: var(--color-text); }
.bg-blue        { background: var(--color-black); color: var(--color-white); }   /* 旧blue背景 → black */
.bg-black       { background: var(--color-black); color: var(--color-white); }
.bg-lime        { background: var(--color-green-pastel); color: var(--color-text); }
.bg-indigo      { background: var(--color-black); color: var(--color-white); }
.bg-indigo-soft { background: var(--color-green-light); }
.bg-orange-soft { background: var(--color-green-light); }

/* -----------------------------------------------------------------
 * Hairline / dot
 * --------------------------------------------------------------- */
.hairline {
  display: block;
  width: 48px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
  margin-block: var(--space-md);
}
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-green);
  margin-right: 6px;
  vertical-align: middle;
}

/* Highlighted text — keep subtle */
.accent-mark {
  display: inline-block;
  background: var(--color-green-light);
  padding: 0 0.18em;
  border-radius: 2px;
  color: var(--color-text);
}
.accent-underline {
  background: linear-gradient(transparent 70%, var(--color-green-light) 70%);
  padding: 0 0.1em;
}

/* -----------------------------------------------------------------
 * Reveal on scroll
 * --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -----------------------------------------------------------------
 * Reduced motion — kill all animation
 * --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------
 * Legacy keyframes — kept as no-ops to avoid breaking references
 * --------------------------------------------------------------- */
@keyframes hopping {
  0%, 100% { transform: none; }
}
@keyframes hopping-soft {
  0%, 100% { transform: none; }
}
@keyframes arrow-bounce {
  0%, 100% { transform: none; }
}
@keyframes ghost-fill {
  from { transform: scaleX(1); }
  to   { transform: scaleX(1); }
}
@keyframes underline-grow {
  from { transform: scaleX(1); }
  to   { transform: scaleX(1); }
}
@keyframes hop {
  0%, 100% { transform: none; }
}
@keyframes spin-slow {
  from { transform: none; }
  to   { transform: none; }
}

.is-hopping-idle,
.hoppy--bounce {
  animation: none;
}