/* Hallmark · shape: Stage linktree, one screen · genre: atmospheric · theme: brand (client system, same tokens as site/) · custom: the client's black and white
 * paper: #050505 · accent: #A6A6A6 · surface: absolute · display: Montserrat 500 uppercase · body: Montserrat 400 · hero: Stage · nav: none, the links are the page · footer: one line · signature: the facade's line of light drawing itself, a lit slat wall that follows the pointer, and project photographs that take colour under the cursor
 * axes: dark/geometric-sans/neutral · posture: Stage · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: S, one column of three links is the category's own run (a linktree); the lit slats and the colour-on-hover photographs carry the page */
/* Hallmark · waive 7b · the stylesheet holds pure white as ink and as the button · the client's brand is pure black and white, taken from the facade signage and the NM monogram */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- stage: photographs, slats, light ---------- */
html { background: var(--color-paper); }
body { min-height: 100svh; display: flex; flex-direction: column; position: relative; }

.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--color-paper); --lx: 50%; --ly: 38%; --px: 0; --py: 0; }
.stage__photos { position: absolute; inset: -4%; transform: translate3d(calc(var(--px) * -14px), calc(var(--py) * -14px), 0); }
.stage__photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: grayscale(1) contrast(1.1); animation: cycle 30s linear infinite; transition: filter 1100ms var(--ease-out); }
.stage__photos img:nth-child(2) { animation-delay: 10s; }
.stage__photos img:nth-child(3) { animation-delay: 20s; }
body:has(.link:hover) .stage__photos img, body:has(.link:focus-visible) .stage__photos img { filter: grayscale(0) contrast(1.05); }
@keyframes cycle {
  0% { opacity: 0; transform: scale(1.04); }
  8% { opacity: 0.34; }
  30% { opacity: 0.34; }
  38% { opacity: 0; transform: scale(1.14); }
  100% { opacity: 0; transform: scale(1.14); }
}

.stage__slats, .stage__lit { position: absolute; inset: 0; pointer-events: none; }
.stage__slats { background-image: repeating-linear-gradient(90deg, color-mix(in oklab, var(--color-ink) 5%, transparent) 0 2px, transparent 2px 22px); }
.stage__lit { background-image: repeating-linear-gradient(90deg, color-mix(in oklab, var(--color-ink) 46%, transparent) 0 2px, transparent 2px 22px); -webkit-mask-image: radial-gradient(340px circle at var(--lx) var(--ly), var(--color-paper), transparent 70%); mask-image: radial-gradient(340px circle at var(--lx) var(--ly), var(--color-paper), transparent 70%); }
.stage__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(560px circle at var(--lx) var(--ly), color-mix(in oklab, var(--color-ink) 9%, transparent), transparent 65%); }
.stage__veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 42%, transparent 18%, color-mix(in oklab, var(--color-paper) 92%, transparent) 88%), linear-gradient(180deg, var(--color-paper), transparent 22%, transparent 70%, var(--color-paper)); }

/* ---------- content ---------- */
.wrap { position: relative; z-index: var(--z-base); flex: 1; width: 100%; max-width: 32.5rem; margin-inline: auto; padding: var(--space-xl) var(--gutter) var(--space-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg); text-align: center; }
.brand img { width: min(17rem, 72vw); height: auto; margin-inline: auto; }
.led { width: min(15rem, 62%); height: 1px; margin: 0; border: 0; background: linear-gradient(90deg, transparent, var(--color-ink), transparent); transform-origin: center; }
.hero { display: grid; gap: var(--space-md); justify-items: center; }
h1 { text-transform: uppercase; hyphens: none; max-width: 14ch; font-size: clamp(1.9rem, 7.4vw, 3.1rem); }
.lead { color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.55; max-width: 30ch; }

.links { width: 100%; display: grid; gap: var(--space-sm); margin-top: var(--space-xs); }
.link { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: var(--space-3xs); justify-items: center; min-height: 3.75rem; padding: var(--space-md) var(--space-lg); text-decoration: none; color: var(--color-ink); background: color-mix(in oklab, var(--color-paper) 78%, transparent); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: transform var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); --sweep: var(--color-ink); }
.link::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 32%, color-mix(in oklab, var(--sweep) 30%, transparent) 50%, transparent 68%); transform: translateX(-125%); transition: transform 900ms var(--ease-out); }
.link:hover, .link:focus-visible { transform: translateY(-2px); border-color: var(--color-ink); }
.link:hover::before, .link:focus-visible::before { transform: translateX(125%); }
.link:active { transform: translateY(0); }
.link__t { font-size: var(--text-md); font-weight: 600; line-height: 1.25; }
.link__s { font-size: var(--text-xs); color: var(--color-ink-2); line-height: 1.3; overflow-wrap: anywhere; }
.link--primary { background: var(--color-ink); color: var(--color-accent-ink); border-color: var(--color-ink); --sweep: var(--color-paper); }
.link--primary .link__s { color: var(--color-accent-ink); opacity: 0.72; }
.link--primary:hover, .link--primary:focus-visible { background: var(--color-ink-2); border-color: var(--color-ink-2); }

.foot { position: relative; z-index: var(--z-base); padding: var(--space-md) var(--gutter) var(--space-lg); text-align: center; }
.foot p { margin-inline: auto; max-width: 40ch; font-size: var(--text-xs); color: var(--color-ink-2); }

/* ---------- entrance: opacity and transform only, visible without scripting ---------- */
.rise { animation: rise 900ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 110ms + 250ms); }
.led { animation: draw 1300ms var(--ease-out) 150ms both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }

@media (max-height: 860px) and (min-width: 40.01rem) { .wrap { padding-block: var(--space-lg) var(--space-md); gap: var(--space-md); } .brand img { width: 14rem; } h1 { font-size: clamp(1.9rem, 5.4vw, 2.6rem); } }

@media (max-width: 40rem) { .wrap { padding-top: var(--space-lg); gap: var(--space-md); } .stage__lit { -webkit-mask-image: radial-gradient(240px circle at var(--lx) var(--ly), var(--color-paper), transparent 70%); mask-image: radial-gradient(240px circle at var(--lx) var(--ly), var(--color-paper), transparent 70%); } }

@media (prefers-reduced-motion: reduce) {
  .rise, .led { animation: none; opacity: 1; transform: none; }
  .stage__photos { transform: none; }
  .stage__photos img { animation: none; transition: none; }
  .stage__photos img:first-child { opacity: 0.3; }
  .link, .link::before { transition: none; }
}