/* Reef — 画面の動き（v2.8.0）。動きの中身は motion.js。
   色は app.css の変数だけ（光らせない・グラデーションの飾りを使わない＝v2.6.0 の決めのまま）。 */

/* ── ロゴ（印と字）: 上の帯とログインの箱 ───────────────── */
.brand svg.brand-mark { width: 26px; height: 26px; flex: none; display: block; }
.brand .brand-name { display: inline-flex; align-items: center; }
.brand svg.brand-word { height: 18px; width: auto; aspect-ratio: 284.8 / 80.2; color: var(--text); display: block; overflow: visible; }
.login .brand svg.brand-mark { width: 40px; height: 40px; }
.login .brand svg.brand-word { height: 29px; color: var(--text); }
.login .brand { align-items: center; gap: 14px; margin-bottom: 22px; }
/* スマホでも字のロゴを出す（下のナビで上の帯が空いた）。ただし 360px 以下は財布とログアウトを優先 */
@media (max-width: 360px) { .brand .brand-name { display: none; } }

/* イントロ・ログインの引き継ぎの間、本物のロゴは場所だけ取って隠す（飛んできた写しが着いたら出す） */
html.reef-hold .brand .brand-mark, html.reef-hold .brand .brand-word { visibility: hidden; }
/* イントロの間は後ろの画面を隠し、引き継ぎで順に出す（組みはそのまま＝タブの下線やグラフの幅が測れる） */
html.reef-pre .topbar > .nav, html.reef-pre .topbar > .who, html.reef-pre #app > main, html.reef-pre .login .box { opacity: 0; }

/* ログインの画面の背景（イントロと同じ海図をごく薄く・動かさない） */
.login { position: relative; }
.login canvas.login-chart { position: fixed; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; }
.login .box { position: relative; z-index: 1; }

/* イントロの間は後ろの画面をスクロールさせない（スクロールバーをイントロの上に出さない）。
   戻すのは後ろの画面が現れ始める時（中身がまだ透明なので、スクロールバーが出て中央の物が横にずれても見えない）。
   scrollbar-gutter: stable は使わない（固定の背景＝ダイアログの暗がりがスクロールバーの溝を覆えず、右に明るい筋が出る） */
html.reef-intro { overflow: hidden; }

/* ── 開いた時のイントロ ─────────────────────────────── */
#intro {
  position: fixed; inset: 0; z-index: 90;
  background: var(--bg);
  overflow: hidden;
  cursor: default;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#intro.leaving { pointer-events: none; }
#intro canvas.intro-chart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#intro .intro-stage {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(26px, 4.4vh, 40px);
  padding: 0 16px;
}
#intro .intro-lockup {
  --mk: clamp(58px, 8.6vw, 104px);
  display: flex; align-items: center; gap: calc(var(--mk) * .27);
}
#intro svg.intro-mark { width: var(--mk); height: var(--mk); overflow: visible; flex: none; display: block; will-change: transform; }
#intro svg.intro-word { height: calc(var(--mk) * .78); width: auto; aspect-ratio: 284.8 / 80.2; overflow: visible; flex: none; display: block; will-change: transform; }
#intro .intro-meter { width: 132px; height: 1px; background: var(--line2); overflow: hidden; opacity: 0; }
#intro .intro-meter i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
#intro .intro-skip {
  position: absolute; left: 0; right: 0; bottom: calc(26px + env(safe-area-inset-bottom));
  text-align: center; color: var(--dim); font-size: 12px; letter-spacing: .14em;
  opacity: 0;
}
/* 視差効果を減らす: 描き終わりの姿を出しておき、読み込みが済んだら薄く消すだけ */
html.reef-intro-still #intro canvas.intro-chart { display: none; }
#intro.fade-out { opacity: 0; transition: opacity .3s ease-out; pointer-events: none; }
@media (max-width: 520px) {
  #intro .intro-lockup { --mk: clamp(52px, 15vw, 72px); }
}

/* ── ページ移動: 上の細い線（読み込みの進み） ─────────────── */
.route-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 45;
  background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
  opacity: 0; pointer-events: none;
}
.route-bar.run { opacity: 1; transform: scaleX(.86); transition: transform 2.6s cubic-bezier(.08, .7, .2, 1), opacity .12s; }
.route-bar.run.done { opacity: 0; transform: scaleX(1); transition: transform .2s ease-out, opacity .28s .16s; }

/* ── ナビの下線（前の場所から滑る） ─────────────────────── */
/* スマホのナビは画面の下に固定（position: fixed）なので、位置の基準はそのまま使う（relative で上書きしない） */
@media (min-width: 721px) { .nav.has-ink { position: relative; } }
.nav.has-ink a.on { box-shadow: none; }
.nav .nav-ink {
  position: absolute; left: 0; top: 0; height: 2px; width: 0;
  background: var(--accent); border-radius: 1px;
  pointer-events: none; opacity: 0;
  transition: transform .42s cubic-bezier(.3, .8, .2, 1), width .42s cubic-bezier(.3, .8, .2, 1), opacity .2s;
}

/* ── タブの下線（.tabs。前の画面の同じタブの並びから滑る） ─────── */
.tabs.has-ink { position: relative; }
.tabs.has-ink a.on { border-bottom-color: transparent; }
.tabs.has-ink::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px;
  width: var(--ink-w, 0); transform: translateX(var(--ink-x, 0)); opacity: var(--ink-o, 0);
  background: var(--accent); border-radius: 1px; pointer-events: none;
  transition: transform .4s cubic-bezier(.3, .8, .2, 1), width .4s cubic-bezier(.3, .8, .2, 1), opacity .2s;
}
.tabs.has-ink.ink-still::after { transition: none; }

/* ── ログインの後: ロゴが上の帯へ飛ぶ写し ─────────────────── */
.reef-fly { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.reef-fly .fly-copy { position: fixed; margin: 0; transform-origin: 0 0; will-change: transform; }

/* ── ダイアログ: 開く・閉じる ─────────────────────────── */
html.reef-motion .modal-back { animation: reef-back-in .18s ease-out; }
html.reef-motion .modal { animation: reef-box-in .24s cubic-bezier(.2, .8, .25, 1); }
.modal-back.closing { animation: reef-back-out .17s ease-in forwards !important; pointer-events: none; }
.modal-back.closing .modal { animation: reef-box-out .17s ease-in forwards !important; }
@keyframes reef-back-in { from { opacity: 0; } }
@keyframes reef-box-in { from { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes reef-back-out { to { opacity: 0; } }
@keyframes reef-box-out { to { opacity: 0; transform: translateY(6px) scale(.985); } }

/* 起動中の丸は、読み込みが 0.5 秒を超えた時だけ出す（速い時に一瞬だけ見えないように） */
.boot-mark { animation: spin .9s linear infinite, reef-late .25s ease-out .5s backwards; }
@keyframes reef-late { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .nav .nav-ink, .tabs.has-ink::after { transition: none; }
  html.reef-motion .modal-back, html.reef-motion .modal { animation: none; }
  .route-bar.run { transition: opacity .12s; }
}

/* ── v2.9.0: 全部の操作に動き（既定でオン）・この端末の設定（オフ・速さ） ───────────────
   速さ: --reef-k（「速い」は 0.6 倍）。オフ（data-anim="off"）は、読み込み中のくるくる以外の動きを全部止める。 */
:root { --reef-k: 1; }
html[data-speed="fast"] { --reef-k: .6; }
.nav .nav-ink { transition-duration: calc(.42s * var(--reef-k)), calc(.42s * var(--reef-k)), .2s; }
.tabs.has-ink::after { transition-duration: calc(.4s * var(--reef-k)), calc(.4s * var(--reef-k)), .2s; }
html.reef-motion .modal-back { animation-duration: calc(.18s * var(--reef-k)); }
html.reef-motion .modal { animation-duration: calc(.26s * var(--reef-k)); }

/* ボタンなどを押した時に少し沈む（浮き上がらせない・v2.6.0 の決め） */
html.reef-motion :is(.btn, .mode, .presets button, .pill-tabs button, .copy, .ip-chip, .cmd-var, .md-tools .mdbtn) {
  transition-property: background, border-color, color, opacity, box-shadow, transform;
  transition-duration: .12s, .12s, .12s, .12s, .12s, calc(.09s * var(--reef-k));
}
html.reef-motion :is(.btn, .mode, .presets button, .pill-tabs button, .copy, .ip-chip, .cmd-var, .md-tools .mdbtn):active:not(:disabled) { transform: scale(.97); }
html.reef-motion .nav a:active, html.reef-motion .tabs a:active { opacity: .7; }

/* 知らせ（トースト）: 右から滑って入り、右へ抜ける（スマホは下から） */
html.reef-motion .toast { animation: reef-toast-in calc(.3s * var(--reef-k)) cubic-bezier(.2, .85, .3, 1); }
html.reef-motion .toast.hide { opacity: 0; transform: translateX(28px); transition: opacity calc(.22s * var(--reef-k)), transform calc(.22s * var(--reef-k)) ease-in; }
@keyframes reef-toast-in { from { opacity: 0; transform: translateX(28px); } }
@media (max-width: 720px) {
  html.reef-motion .toast { animation-name: reef-toast-up; }
  html.reef-motion .toast.hide { transform: translateY(14px); }
  @keyframes reef-toast-up { from { opacity: 0; transform: translateY(18px); } }
}

/* 作ったばかりのサーバーのカード: 一覧に出た最初の 1 回だけ縁がコーラルになって戻る */
html.reef-motion .srv.fresh { animation: reef-fresh calc(2.4s * var(--reef-k)) ease-out; }
@keyframes reef-fresh {
  0%, 35% { border-color: var(--accent); background: rgba(var(--accent-rgb), .07); }
  100% { border-color: var(--line); background: var(--panel); }
}

/* 状態が変わった時（起動中 → 稼働中など）: 点が弾み、字が入れ替わる */
html.reef-motion .status.changed { animation: reef-status calc(.45s * var(--reef-k)) ease-out; }
html.reef-motion .status.changed .dot { animation: reef-dot calc(.6s * var(--reef-k)) cubic-bezier(.3, 1.6, .5, 1); }
html.reef-motion .status.changed .dot.starting, html.reef-motion .status.changed .dot.stopping, html.reef-motion .status.changed .dot.task {
  animation: reef-dot calc(.6s * var(--reef-k)) cubic-bezier(.3, 1.6, .5, 1), pulse 1.2s ease-in-out .6s infinite;
}
@keyframes reef-status { from { opacity: .35; } }
@keyframes reef-dot { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* コピーした札: 一瞬だけアクセントの色に（光らせない・中を塗るだけ） */
.copied { animation: reef-copied calc(.7s * var(--reef-k)) ease-out; }
@keyframes reef-copied { 0%, 30% { box-shadow: inset 0 0 0 40px rgba(var(--accent-rgb), .18); } 100% { box-shadow: inset 0 0 0 40px rgba(var(--accent-rgb), 0); } }

/* 丸い札の切り替え（ログインの切り替えなど）: 下地が滑る */
.pill-tabs.has-pill { position: relative; }
.pill-tabs.has-pill::before {
  content: ""; position: absolute; left: 0; top: var(--pill-y, 3px);
  width: var(--pill-w, 0); height: var(--pill-h, 28px); transform: translateX(var(--pill-x, 0));
  background: var(--panel3); border-radius: 6px; pointer-events: none;
  transition: transform calc(.36s * var(--reef-k)) cubic-bezier(.3, .8, .2, 1), width calc(.36s * var(--reef-k)) cubic-bezier(.3, .8, .2, 1);
}
.pill-tabs.has-pill.pill-still::before { transition: none; }
.pill-tabs.has-pill button { position: relative; z-index: 1; }
.pill-tabs.has-pill button.on { background: transparent; }
.pill-tabs button { transition: color .15s, background .15s; }

/* サーバーを作成できた時のダイアログの中（印が育ち、チェックと文） */
.modal { position: relative; }
.modal-success {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--panel); border-radius: inherit; padding: 24px; text-align: center;
}
.modal-success svg.ms-mark { width: 64px; height: 64px; display: block; overflow: visible; }
.modal-success svg.ms-mark .bm-tile { transform-box: fill-box; transform-origin: 50% 100%; }
.modal-success svg.ms-check { width: 26px; height: 26px; color: var(--ok); display: block; }
.modal-success .ms-text { font-weight: 650; font-size: 15px; color: var(--text); max-width: 32em; }

/* テーマの切り替え: 色がゆっくり入れ替わる（View Transitions が無いブラウザ）・ある時は画面ごと重ねて入れ替え */
html.theme-fade, html.theme-fade * {
  transition: background-color calc(.4s * var(--reef-k)), color calc(.4s * var(--reef-k)), border-color calc(.4s * var(--reef-k)) !important;
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: calc(.38s * var(--reef-k)); }

/* アニメーションをオフ（この端末の設定）: 読み込み中のくるくる以外は動かさない */
html[data-anim="off"] *, html[data-anim="off"] *::before, html[data-anim="off"] *::after { transition: none !important; animation: none !important; }
html[data-anim="off"] :is(.spin, .boot-mark) { animation: spin .8s linear infinite !important; }