/* ─────────────────────────────────────────────────────────────
   顺裕 · soonjoo.top
   One page. Two characters. Nothing else.

   The wordmark is sized from measured glyph metrics, not guesses:
     Noto Serif SC 700, em = 1000
     ink of "顺裕"  = 1.96875em wide (x 15.6 → 1984.4)
     ink height     = 0.95313em (ascent 859.4 / descent 93.8)
     ink of "顺"    = 0.96875em wide  (vertical stack, portrait)
     stacked ink    ≈ 1.953em tall
   → size = min( fillX * 100 / inkW  ,  fillY * 100 / inkH )
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Noto Serif SC';
  src: url('/fonts/notoserif-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

:root {
  --paper:      #0B0B0D;
  --gold-light: #FDF6E3;
  --gold-1:     #EBD6A2;
  --gold-2:     #D2B36B;
  --gold-3:     #A8823F;
  --gold-4:     #7E5F2C;
  --halo:       216, 178, 102;

  /* horizontal lock-up: ink fills 94% of the width, capped at 90% of the height
     (47.75 = 94 / 1.96875 ink-width-em ; 94.42 = 90 / 0.95313 ink-height-em) */
  --size-h: min(47.75vw, 94.42vh);
  /* portrait lock-up (stacked): 93% of the width, capped at 90% of the height
     (97.02 = 93 / 0.9585 single-char ink-em ; 46.60 = 90 / 1.931 stacked ink-em) */
  --size-v: min(97.02vw, 46.60vh);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--paper);
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  font-family: 'Noto Serif SC', 'Songti SC', 'Noto Serif CJK SC', 'Source Han Serif SC', serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  color-scheme: dark;
}

/* ── background: warm ink wash, no scroll, no chrome ─────────── */
.paper {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 78% at 50% -6%, #17140E 0%, #0E0D0C 42%, #08080A 100%);
}

/* soft lamp behind the name */
.halo {
  position: absolute;
  width: 78vmax;
  height: 78vmax;
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(var(--halo), 0.17) 0%,
              rgba(var(--halo), 0.07) 38%,
              rgba(var(--halo), 0.02) 62%,
              transparent 74%);
  animation: breathe 16s ease-in-out infinite alternate;
  will-change: opacity;
}

/* ── stage ───────────────────────────────────────────────────── */
.stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
}

.wordmark {
  position: relative;
  margin: 0;
  font-weight: 700;
  font-size: var(--size-h);
  line-height: 1;
  letter-spacing: 0;
  /* optical centering: glyph ink sits 0.0497em below the line-box centre
     (font box ascent 1.151em / descent 0.286em vs ink 0.8594 / 0.0938) */
  transform: translateY(-0.0497em);
  animation: reveal 1.8s cubic-bezier(0.16, 0.84, 0.32, 1) both;
}

.ink, .sheet {
  display: block;
  font: inherit;
  letter-spacing: inherit;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.ink {
  background-image: linear-gradient(177deg,
      var(--gold-light) 0%,
      var(--gold-1) 26%,
      var(--gold-2) 52%,
      var(--gold-3) 78%,
      var(--gold-4) 100%);
  background-size: 100% 100%;
  text-shadow: 0 0 0.055em rgba(255, 240, 205, 0.16);
}

/* a single slow light pass — the only motion on the page */
.sheet {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(96deg,
      rgba(255, 255, 255, 0) 43%,
      rgba(255, 255, 255, 0.30) 50%,
      rgba(255, 255, 255, 0) 57%);
  background-size: 260% 100%;
  background-position: 190% 0;
  mix-blend-mode: screen;
  animation: sheet 19s cubic-bezier(0.4, 0, 0.2, 1) 2.2s infinite;
  will-change: background-position;
}

/* paper grain, so the black reads as ink not a flat panel.
   A tiled PNG, not an SVG turbulence filter: the filter + soft-light blend
   cost seconds of raster time at large viewports (measured), this costs none. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.042;
  background-image: url('/assets/noise.png');
  background-size: 160px 160px;
  background-repeat: repeat;
}

.stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(118% 86% at 50% 45%,
              transparent 42%, rgba(0, 0, 0, 0.42) 84%, rgba(0, 0, 0, 0.62) 100%);
}

/* ── portrait: the characters stand up and fill the page tall ── */
@media (orientation: portrait) {
  .wordmark {
    writing-mode: vertical-rl;
    font-size: var(--size-v);
    /* vertical lock-up centres itself on the cross axis; only a hair of
       block-axis correction (vertical font metrics, measured) */
    transform: translateY(-0.019em);
  }
  .sheet {
    background-image: linear-gradient(186deg,
        rgba(255, 255, 255, 0) 44%,
        rgba(255, 255, 255, 0.40) 50%,
        rgba(255, 255, 255, 0) 56%);
  }
}

/* ── motion ──────────────────────────────────────────────────── */
@keyframes reveal {
  from { opacity: 0; filter: blur(0.017em); transform: translateY(0.045em); }
  to   { opacity: 1; filter: blur(0); }
}

@keyframes breathe {
  from { opacity: 0.72; }
  to   { opacity: 1; }
}

@keyframes sheet {
  0%   { background-position: 190% 0; }
  34%  { background-position: -90% 0; }
  100% { background-position: -90% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark, .halo, .sheet { animation: none; }
  .sheet { opacity: 0.32; background-position: 50% 0; }
}