/* motion-deck の見た目の土台。色と書体はテーマ（deck.js の theme.vars）で上書きする */
:root {
  --bg: #f2f2f0;
  --bg-dark: #0d0d0e;
  --ink: #111;
  --sub: #6b6b6b;
  --line: #cfcfcc;
  --accent: #111;
  --ink-dark: #f4f4f2;
  --sub-dark: #a3a3a0;
  --line-dark: #3a3a3a;
  --font: "SF Pro Display", -apple-system, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body { font-family: var(--font); -webkit-font-smoothing: antialiased; cursor: default; user-select: none; }
.md-record body, .md-record * { cursor: none !important; }

.md-stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  overflow: hidden; background: var(--bg); color: var(--ink);
  transform-origin: 50% 50%;
}
.md-bg-dark { position: absolute; inset: 0; background: var(--bg-dark); opacity: 0; }
.md-bg-img { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; will-change: transform, opacity; }

/* 物体の後ろで揺れる光 */
.md-glow-layer { position: absolute; inset: 0; pointer-events: none; }
.md-glow { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform, opacity; }
.md-glow.ring {
  background: conic-gradient(from 0deg, #ff9fb3, #ffd59a, #b8f2c9, #9fd8ff, #c9b3ff, #ff9fb3);
  -webkit-mask: radial-gradient(closest-side, transparent 58%, #000 70%, #000 80%, transparent 100%);
          mask: radial-gradient(closest-side, transparent 58%, #000 70%, #000 80%, transparent 100%);
  filter: blur(34px);
}
.md-glow.soft {
  background: conic-gradient(from 0deg, #ffb3c4, #ffe0a8, #c2f5d3, #a8dcff, #d5c2ff, #ffb3c4);
  -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 100%);
          mask: radial-gradient(closest-side, #000 20%, transparent 100%);
  filter: blur(60px);
}

/* 物体 */
.md-world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.md-actor { position: absolute; left: 0; top: 0; will-change: transform, opacity, filter; }
.md-actor img { display: block; width: 100%; height: auto; pointer-events: none; }

/* 文字 */
.md-text-layer { position: absolute; inset: 0; pointer-events: none; z-index: 50; }
.md-slide { position: absolute; inset: 0; visibility: hidden; }
.md-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.md-mi { display: inline-block; transform: translateY(110%); will-change: transform; }
[data-in="up"], [data-in="fade"], [data-in="blur"] { opacity: 0; }
[data-in="line"] { transform: scaleX(0); transform-origin: 0 50%; }

/* 周りの小さな文字 */
.md-chrome { position: absolute; inset: 0; pointer-events: none; z-index: 60; font-size: 20px; letter-spacing: .02em; color: var(--sub); }
.md-brand { position: absolute; left: 72px; top: 52px; font-weight: 600; color: var(--ink); }
.md-page { position: absolute; right: 72px; top: 52px; font-variant-numeric: tabular-nums; }
.md-progress { position: absolute; left: 72px; right: 72px; bottom: 44px; height: 1px; background: var(--line); }
.md-progress i { position: absolute; inset: 0; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); }

/* 暗いスライド */
.md-stage.is-dark { color: var(--ink-dark); }
.md-stage.is-dark .md-chrome { color: var(--sub-dark); }
.md-stage.is-dark .md-brand { color: var(--ink-dark); }
.md-stage.is-dark .md-progress { background: var(--line-dark); }
.md-stage.is-dark .md-progress i { background: var(--ink-dark); }

/* よく使う文字の型（デッキ側で自由に足してよい） */
.md-kicker { font-size: 22px; font-weight: 600; letter-spacing: .08em; color: var(--sub); }
.md-h1 { font-size: 104px; font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
.md-h2 { font-size: 76px; font-weight: 700; line-height: 1.18; letter-spacing: -.005em; }
.md-body { font-size: 27px; line-height: 1.75; color: var(--sub); font-weight: 400; }
.md-rule { height: 1px; background: var(--line); }
.is-dark .md-kicker, .is-dark .md-body { color: var(--sub-dark); }