/* Novaia Labs — opening → top. Paper + ink, Inter Tight (Latin), Zen Old Mincho (JP). Everything the opening animates is transform/opacity only. */
body.is-opening { overflow: hidden; height: 100svh; }

#home .nav { opacity: 0; }
/* ── HOME ─────────────────────────────────────────────────────────────── */
#home { position: relative; z-index: 1; }
@media (max-width: 700px) { .hl { align-self: end; padding-bottom: 7vh; font-size: 23vw; } .tag { top: calc(clamp(70px, 9vh, 110px) + 1vh); } .meta { top: calc(clamp(70px, 9vh, 110px) + 10vh + 36px); } .cue { display: none; } .cue-row { justify-content: flex-end; } }

.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: 0 var(--gut); overflow: hidden; }
.hl { margin: 0; align-self: center; padding-top: clamp(70px, 9vh, 110px); font: 800 clamp(64px, 17.6vw, 380px)/.82 var(--f-ui); letter-spacing: -.055em; text-transform: uppercase; }
.hl-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; white-space: nowrap; }
.hl-in { display: inline-block; transform: translateY(108%); will-change: transform; }
.tag { position: absolute; right: var(--gut); top: calc(clamp(70px, 9vh, 110px) + 1vh); margin: 0; overflow: hidden; font: 500 clamp(16px, 1.55vw, 26px)/1.9 var(--f-ja); letter-spacing: .14em; text-align: right; }
.tag-in { display: block; transform: translateY(110%); }
.meta { position: absolute; right: var(--gut); top: calc(clamp(70px, 9vh, 110px) + 11vh + 40px); margin: 0; display: flex; gap: 2em; font: 500 10.5px/1 var(--f-ui); letter-spacing: .24em; color: var(--mute); opacity: 0; }
.strip { position: relative; height: clamp(120px, 24vh, 260px); margin: 0 calc(-1 * var(--gut)); overflow: hidden; opacity: 0; perspective: 1400px; }
.strip-row { position: absolute; left: 0; top: 0; height: 46%; width: max-content; display: flex; gap: clamp(10px, 1vw, 16px); will-change: transform; }
.strip-row:nth-child(2) { top: 54%; }
.strip-tile { flex: none; height: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #d9d4cc; transform: rotateY(var(--ry, 0deg)); }
.strip-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cue-row { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(clamp(120px, 24vh, 260px) + 18px); display: flex; justify-content: space-between; align-items: flex-end; opacity: 0; }
.cue, .cue2 { display: inline-flex; align-items: center; gap: 12px; font: 500 10.5px/1 var(--f-ui); letter-spacing: .24em; }
.cue2 { padding: 10px 0; border-bottom: 1px solid currentColor; transition: letter-spacing .5s var(--out), gap .5s var(--out); }
.cue2:hover, .cue2:focus-visible { letter-spacing: .34em; gap: 18px; }
.cue i { width: 1px; height: 26px; background: currentColor; transform-origin: top; animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.replay-wrap { padding: 28px var(--gut) 60px; text-align: center; border-bottom: 1px solid var(--line); }
.replay { margin-top: 0; padding: 16px 28px; border: 1px solid currentColor; background: none; font: 500 13px/1 var(--f-ja); letter-spacing: .14em; cursor: pointer; transition: background .4s, color .4s; }
.replay:hover { background: var(--ink); color: var(--paper); }

/* ── OPENING ──────────────────────────────────────────────────────────── */
#open { position: fixed; inset: 0; z-index: 50; overflow: hidden; background: var(--open-bg, var(--paper)); color: var(--ink);
  --hole: 0px; -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px)); mask-image: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 1px)); }
#open[hidden] { display: none; }
#word { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; }
.word-row { display: flex; font: 800 12.2vw/1 var(--f-ui); letter-spacing: -.05em; text-transform: uppercase; white-space: pre; }
.word-row .sp { display: inline-block; width: .26em; }
.word-row.two { flex-wrap: wrap; justify-content: center; max-width: 94vw; font-size: 24vw; line-height: .9; row-gap: .02em; }
.word-row.two .sp { flex-basis: 100%; width: 0; height: 0; }
.ch { position: relative; display: inline-block; color: transparent; -webkit-text-stroke: 1.5px var(--ch-ink, var(--ink)); will-change: transform; opacity: 0; }
.ch .fill { position: absolute; inset: 0; color: var(--ch-ink, var(--ink)); -webkit-text-stroke: 0; clip-path: inset(100% 0 0 0); }
.ch .img { position: absolute; inset: 0; color: transparent; -webkit-text-stroke: 0; background-size: 260% auto; -webkit-background-clip: text; background-clip: text; clip-path: inset(100% 0 0 0); }
#wall { position: absolute; inset: 0; z-index: 2; perspective: 1500px; perspective-origin: 50% 46%; transform-style: preserve-3d; pointer-events: none; }
.tile { position: absolute; left: 50%; top: 50%; will-change: transform, opacity; transform-style: preserve-3d; backface-visibility: hidden; opacity: 0; }
.tile img { display: block; width: 100%; height: 100%; object-fit: cover; background: #d9d4cc; box-shadow: 0 1px 0 rgba(18, 16, 14, .06), 0 18px 40px -22px rgba(18, 16, 14, .45); }
#ring { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; color: var(--paper); pointer-events: none; opacity: 0; }
#mark { overflow: visible; position: fixed; z-index: 55; left: 50%; top: 50%; width: 18vh; height: 18vh; margin: -9vh 0 0 -9vh; fill: var(--mark, var(--paper)); opacity: 0; pointer-events: none; }
#mark g { transform-box: fill-box; }
#ui { position: fixed; z-index: 60; inset: auto 0 0 0; display: flex; justify-content: space-between; align-items: flex-end; padding: clamp(14px, 1.8vw, 24px) var(--gut); pointer-events: none; font: 500 11px/1 var(--f-ui); letter-spacing: .2em; color: var(--ui-ink, var(--ink)); }
.ui-count { font-variant-numeric: tabular-nums; opacity: .7; }
.ui-skip { pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; padding: 12px 0; border: 0; background: none; letter-spacing: .24em; cursor: pointer; opacity: 0; transition: opacity .6s; }
.ui-skip.on { opacity: 1; }
.ui-skip i { width: 28px; height: 1px; background: currentColor; transition: width .5s cubic-bezier(.2, .7, .1, 1); }
.ui-skip:hover i { width: 48px; }
body:not(.is-opening) #ui { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cue i { animation: none; }
}