/* Nearia 共通の「動き」と仕上げ。各サイトはこのファイルを写して使う(色・書体は各サイトのまま)。
   方針: 速く・控えめ・なめらか。中身は隠さない(JS が動かなければ普通に全部見える)。 */
:root {
  --nm-ease: cubic-bezier(.2, .7, .2, 1);      /* すっと出て、やわらかく止まる */
  --nm-ease-out: cubic-bezier(.16, 1, .3, 1);
  --nm-fast: 160ms;
  --nm-med: 280ms;
  --nm-slow: 520ms;                          /* これより長くしない(もっさり見える) */
  --nm-lift: 0 1px 2px rgb(0 0 0 / .06), 0 12px 32px -12px rgb(0 0 0 / .28);
}

/* ページ間の移動をなめらかに(対応ブラウザだけ。未対応ではふつうの移動) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; animation-timing-function: var(--nm-ease); }

/* 1. 読み込み時: 最初の画面の見出し・文・ボタンを順にふわっと出す。
   data-nm-intro を付けた箱の子が 60ms ずつずれて出る。最初の画面だけに使う。 */
@keyframes nm-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
[data-nm-intro] > * { animation: nm-rise var(--nm-slow) var(--nm-ease-out) both; }
[data-nm-intro] > :nth-child(2) { animation-delay: 60ms; }
[data-nm-intro] > :nth-child(3) { animation-delay: 120ms; }
[data-nm-intro] > :nth-child(4) { animation-delay: 180ms; }
[data-nm-intro] > :nth-child(5) { animation-delay: 240ms; }
[data-nm-intro] > :nth-child(n+6) { animation-delay: 280ms; }

/* 2. スクロールで出てくる: nearia-motion.js が画面の下にある塊に .nm-reveal を付け、見えたら .nm-in を付ける */
.nm-js .nm-reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--nm-slow) var(--nm-ease-out), transform var(--nm-slow) var(--nm-ease-out); transition-delay: var(--nm-d, 0ms); }
.nm-js .nm-reveal.nm-in { opacity: 1; transform: none; }

/* 3. 押せる物の手ざわり: ボタンは押すと少し沈む、カードは持ち上がる、リンクは下線が伸びる */
.btn, button, [role=button], .nm-press { transition: transform var(--nm-fast) var(--nm-ease), box-shadow var(--nm-med) var(--nm-ease), background-color var(--nm-med) var(--nm-ease), color var(--nm-med) var(--nm-ease), border-color var(--nm-med) var(--nm-ease), filter var(--nm-med) var(--nm-ease); }
.btn:active, button:active, [role=button]:active, .nm-press:active { transform: scale(.97); }
.nm-card { transition: transform var(--nm-med) var(--nm-ease), box-shadow var(--nm-med) var(--nm-ease), border-color var(--nm-med) var(--nm-ease); }
@media (hover: hover) {
  .nm-card:hover { transform: translateY(-3px); box-shadow: var(--nm-lift); }
  .btn:hover, .nm-press:hover { filter: brightness(1.06); }
  .nm-link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--nm-med) var(--nm-ease); }
  .nm-link:hover { background-size: 100% 1px; }
}

/* 4. 読み込み中の表示: 灰色の箱が光る(くるくる回るだけの表示の代わり) */
@keyframes nm-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.nm-skeleton { background: linear-gradient(90deg, rgb(127 127 127 / .10) 25%, rgb(127 127 127 / .22) 50%, rgb(127 127 127 / .10) 75%) 0 0 / 200% 100%; animation: nm-shimmer 1.4s linear infinite; border-radius: 8px; color: transparent; }

/* 5. 文字の組み方(日本語をきれいに折り返す) */
h1, h2, h3 { text-wrap: balance; word-break: auto-phrase; }
p, li { text-wrap: pretty; line-break: strict; }

/* 印刷では全部見せる */
@media print { .nm-js .nm-reveal { opacity: 1; transform: none; } }

/* 動きを減らす設定の人には動かさない */
@media (prefers-reduced-motion: reduce) {
  [data-nm-intro] > *, .nm-skeleton { animation: none !important; }
  .nm-js .nm-reveal { opacity: 1; transform: none; transition: none; }
  .nm-card:hover, .btn:active, button:active { transform: none; }
  @view-transition { navigation: none; }
}