/* DFUSION landing page: one composition, nothing else. */
@font-face { font-family: "Die Grotesk"; src: url("fonts/die-grotesk-vf-roman.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "GT America Mono"; src: url("fonts/GT-America-Mono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --ivory: #efebe2; --ink: #0a0a0b; --red: #d7261e;
  --muted: rgb(10 10 11 / 0.6);
  --gutter: clamp(20px, 3.2vw, 56px);
  --mark-width: min(44vw, 640px);
  --sans: "Die Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "GT America Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--ivory); color: var(--ink); }
body { font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow: hidden; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--red); }

.stage { position: fixed; inset: 0; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.mono { font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.02em; }

/* Corners: mark top-left, status top-right, caption bottom-right, footer bottom-left. */
.mark { position: fixed; left: var(--gutter); top: var(--gutter); width: var(--mark-width); z-index: 2; pointer-events: none; margin: 0; }
.mark svg, .mark img { display: block; width: 100%; height: auto; }
.line { position: fixed; left: var(--gutter); top: calc(var(--gutter) + var(--mark-width) / 5.3145 + 16px); z-index: 2; margin: 0; }
.status { position: fixed; right: var(--gutter); top: var(--gutter); z-index: 2; color: var(--red); }
.status::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 7px; background: var(--red); vertical-align: 1px; }
.status[hidden] { display: none; }
.caption { position: fixed; right: var(--gutter); bottom: var(--gutter); z-index: 2; text-align: right; transition: opacity 0.8s; }
.caption .muted { color: var(--muted); }
.caption a { color: var(--red); }
.foot { position: fixed; left: var(--gutter); bottom: var(--gutter); z-index: 2; color: var(--muted); }
.caption .pair { font-family: var(--sans); font-size: clamp(19px, 1.55vw, 26px); letter-spacing: -0.01em; line-height: 1.15; margin-bottom: 6px; font-variant-numeric: tabular-nums; }

/* Intro: the mark's halves rise out of the fault line, then slip sideways into
   their offset; the text follows once the beds have plotted in. */
@media (prefers-reduced-motion: no-preference) {
  .mark .top { animation: dfx-top 1500ms cubic-bezier(0.3, 0.6, 0, 1) 120ms both; }
  .mark .bottom { animation: dfx-bottom 1500ms cubic-bezier(0.3, 0.6, 0, 1) 120ms both; }
  .line, .status, .volume, .foot { animation: dfx-fade 900ms ease 1250ms both; }
}
@keyframes dfx-top { 0% { transform: translate(-150px, 430px); } 55% { transform: translate(-150px, 0); } 100% { transform: none; } }
@keyframes dfx-bottom { 0% { transform: translate(150px, -560px); } 55% { transform: translate(150px, 0); } 100% { transform: none; } }
@keyframes dfx-fade { from { opacity: 0; } }

/* Total volume: top right, under the Live light. */
.volume { position: fixed; right: var(--gutter); top: calc(var(--gutter) + 34px); z-index: 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.volume[hidden] { display: none; }
.volume .label { color: var(--muted); }
.volume .n { font-weight: 300; font-variation-settings: "opsz" 42; font-size: clamp(26px, 2.6vw, 44px); letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  :root { --mark-width: calc(100vw - 2 * var(--gutter)); }
  .volume { left: var(--gutter); right: auto; align-items: flex-start; }
}