/* more.md temp landing — Mori mascot + light/dark themes */

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

html,
body {
  margin: 0;
  height: 100%;
}

html[data-theme='light'] {
  --bg: oklch(0.975 0.003 90);
  --fg: oklch(0.1 0.008 240);
  --muted: oklch(0.45 0.02 260);
  --border: oklch(0.88 0.01 90);
  --toggle-bg: oklch(0.99 0.002 90);
}

html[data-theme='dark'] {
  --bg: oklch(0.13 0.008 260);
  --fg: oklch(0.98 0 0);
  --muted: oklch(0.62 0.02 260);
  --border: oklch(0.24 0.015 260);
  --toggle-bg: oklch(0.18 0.01 260);
}

body {
  background: var(--bg);
  color: var(--fg);
  transition:
    background-color 0.45s ease,
    color 0.45s ease;
}

.theme-toggle {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 10;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--toggle-bg);
  color: var(--fg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    color 0.35s ease;
}

.theme-toggle:hover {
  border-color: var(--muted);
}

.theme-toggle:focus-visible {
  outline: 2px solid var(--muted);
  outline-offset: 3px;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  width: 1.1rem;
  height: 1.1rem;
}

html[data-theme='light'] .theme-toggle .icon-moon {
  display: none;
}

html[data-theme='dark'] .theme-toggle .icon-sun {
  display: none;
}

.stage {
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}

.landing-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  max-width: 22rem;
  text-align: center;
}

.tagline {
  margin: 0;
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    'Segoe UI',
    sans-serif;
  font-size: 0.9375rem;
  line-height: 1.65;
  letter-spacing: 0.02em;
  color: var(--muted);
  font-weight: 400;
}

/* 28px design × 5 = 140px on screen */
.mori-mascot {
  --mori-helm: oklch(0.18 0.01 260);
  --mori-visor-ring: oklch(0.985 0.002 90);
  --mori-eye: oklch(0.98 0 0);
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  flex-shrink: 0;
}

html[data-theme='dark'] .mori-mascot {
  --mori-helm: oklch(0.9 0.004 90);
  --mori-visor-ring: oklch(0.13 0.008 260);
  --mori-eye: oklch(0.13 0.008 260);
}

.mori-scale {
  transform: scale(5);
  transform-origin: center center;
}

.mori-scale svg {
  display: block;
  overflow: visible;
}

.mori-helm {
  fill: var(--mori-helm);
}

.mori-visor-ring {
  fill: var(--mori-visor-ring);
}

.mori-eye-fill {
  fill: var(--mori-eye);
}

.mori-eye-stroke {
  stroke: var(--mori-eye);
  fill: none;
}

.mori-eye {
  transform-origin: 0 0;
  will-change: transform;
}

@keyframes moriBreath {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.94;
  }
}

@keyframes moriBlink {
  0% {
    transform: scaleY(1);
  }
  18% {
    transform: scaleY(0.88);
  }
  42% {
    transform: scaleY(1.06);
  }
  100% {
    transform: scaleY(1);
  }
}

@keyframes moriHop {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  15% {
    transform: translateY(-0.5px) scale(1.04, 1);
  }
  40% {
    transform: translateY(-3.5px) scale(1, 1.05);
  }
  70% {
    transform: translateY(0) scale(1.03, 1);
  }
  85% {
    transform: translateY(0) scale(1, 1.01);
  }
}

@keyframes moriGrow {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scale(1.28);
  }
  60% {
    transform: scale(1.22);
  }
  80% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

.mori-eye-idle {
  animation: moriBreath 3.5s ease-in-out infinite;
}

.mori-blink-wrap.mori-blinking {
  animation: moriBlink 0.38s ease-in-out both;
}

.mori-hop.mori-hopping {
  animation: moriHop 0.65s ease-in-out both;
}

/* Grow on the outer shell — NOT .mori-scale (scale(5) must stay fixed) */
.mori-mascot.mori-big {
  animation: moriGrow 1.1s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  .mori-eye-idle,
  .mori-blink-wrap.mori-blinking,
  .mori-hop.mori-hopping,
  .mori-mascot.mori-big {
    animation: none;
  }

  body,
  .theme-toggle {
    transition: none;
  }
}