/* nooption — shared foundation
   INK #131315 · PAPER #F1EFEA · SIGNAL #D9482B
   Type: Archivo 700/800 · IBM Plex Mono 500 · Noto Sans SC */

:root {
  --ink: #131315;
  --paper: #F1EFEA;
  --desk: #E4E1D9;
  --signal: #D9482B;
  --mute: #6B6A66;
  --line: #D6D3CB;
  --void: #0A0A0B;
  --ink-2: #1D1D1F;
  --ink-3: #1A1A1C;
  --dark-line: #333230;
  --dim: #84817A;
  --soft: #B4B0A8;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --pad: 40px;
  --sheet: 1280px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Archivo', 'Noto Sans SC', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; }

::selection { background: var(--signal); color: var(--paper); }

/* ── language toggle ─────────────────────────────────────────── */
html[data-lang="en"] .l-zh,
html[data-lang="zh"] .l-en { display: none !important; }

.mono {
  font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  letter-spacing: .14em;
}
.sc { font-family: 'Noto Sans SC', sans-serif; }

/* ── the punch mark ──────────────────────────────────────────── */
.punch {
  width: var(--s, 52px);
  height: var(--s, 52px);
  background: var(--mark-fg, var(--ink));
  display: grid;
  place-items: center;
  flex: none;
}
.punch i {
  width: 44%;
  height: 44%;
  border-radius: 50%;
  background: var(--mark-bg, var(--paper));
  display: block;
}
.punch--live i { animation: hole 7s var(--ease) infinite; }
@keyframes hole {
  0%, 100% { transform: scale(1); }
  46%      { transform: scale(1.28); }
}
.punch--live { animation: breathe 7s var(--ease) infinite; }
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  46%      { transform: scale(1.05); }
}

/* wordmark: n[punch]ption */
.word {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1;
}
.word .punch { --s: .52em; margin: 0 .05em; }

/* ── signal dot ──────────────────────────────────────────────── */
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--signal);
  display: inline-block;
  animation: pulse 2.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(217, 72, 43, .45); }
  50%      { opacity: .4; box-shadow: 0 0 0 5px rgba(217, 72, 43, 0); }
}

/* ── lang button ─────────────────────────────────────────────── */
.lang {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  padding: 6px 12px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color .28s var(--ease);
}
.lang::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--signal);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .32s var(--ease-out);
  z-index: -1;
}
.lang:hover::before, .lang:focus-visible::before { transform: scaleY(1); }
.lang span { display: block; transition: transform .3s var(--ease); }
.lang:hover span { transform: translateY(-1px); }

/* ── scroll reveal ───────────────────────────────────────────── */
.rise {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.rise.in { opacity: 1; transform: none; }

/* headline line-mask reveal */
.line { display: block; overflow: hidden; padding-bottom: .04em; }
.line > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.lit .line > span { transform: none; }

/* ── focus ───────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

/* ── view transition between the two sites ───────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rise { opacity: 1; transform: none; }
  .line > span { transform: none; }
}