/* DawMate — mockup D: the split gateway.
   Two doors share one screen. Hover (desktop) leans a door open; a click or tap opens it to the
   whole screen and folds the other into a slim rail you can still pick. Each door's scene is sized
   to the viewport, not the door, so opening a door reveals more of the scene instead of rescaling it. */

:root {
  --bg: #0b0b0d;
  --bg-2: #070708;
  --ink: #f3f4f7;
  --ink-2: #c3c6cf;
  --ink-3: #8d919c;
  --line: rgba(255, 255, 255, 0.09);
  --line-2: rgba(255, 255, 255, 0.16);
  /* post: cool prism (from mockup B) */
  --cyan: #8be7f8;
  --blue: #5a8cff;
  --violet: #b8a2ff;
  --prism: linear-gradient(100deg, #8be7f8 0%, #5a8cff 52%, #b8a2ff 100%);
  /* music: the SwarmFX palette — gold on black, a teal accent */
  --gold: #e9c27a;
  --amber: #cf9442;
  --cream: #efe8d6;
  --teal: #6fd3c8;
  --gilt: linear-gradient(100deg, #f7e7bf 0%, #e9c27a 45%, #c78838 100%);

  --font: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --display-m: "Bricolage Grotesque", "Space Grotesk", ui-sans-serif, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --g: 20px;
  --bar: 60px;
  --rail: 58px;
  --ease: cubic-bezier(0.22, 0.61, 0.24, 1);
  --ease-door: cubic-bezier(0.76, 0, 0.18, 1);
  --door-t: 1s;
}
@media (min-width: 900px) {
  :root { --g: clamp(28px, 3.6vw, 64px); --bar: 68px; --rail: 76px; }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); }
.dot { opacity: .5; padding: 0 .15em; }

/* ---------------------------------------------------------------- the bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  height: var(--bar);
  padding: 0 var(--g);
  display: flex; align-items: center; gap: 16px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 8, 10, .72), rgba(8, 8, 10, 0));
}
.bar > * { pointer-events: auto; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 500; font-size: 17px; letter-spacing: -0.01em; }
.brand img { width: 26px; height: auto; }
.brand-mark { --mark-box: 46px; position: relative; flex: none; width: 32px; height: 32px; display: grid; place-items: center; }
.brand-canvas {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: var(--mark-box); height: var(--mark-box);
  margin: calc(var(--mark-box) / -2) 0 0 calc(var(--mark-box) / -2);
  pointer-events: none; opacity: 0; transition: opacity .6s var(--ease);
}
.brand-glow {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 104px; height: 60px; margin: -30px 0 0 -52px;
  background:
    radial-gradient(closest-side at 36% 52%, rgba(79, 214, 245, .2), transparent),
    radial-gradient(closest-side at 66% 50%, rgba(233, 194, 122, .16), transparent);
  pointer-events: none; opacity: 0; visibility: hidden;
}
.brand-mark img { transition: opacity .4s var(--ease); }
.brand-mark.is-3d img { opacity: 0; }
.brand-mark.is-3d .brand-canvas { opacity: 1; }
.brand-mark.is-3d .brand-glow { visibility: visible; }
.brand > span:last-child { position: relative; z-index: 1; }

.bar-prompt {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font: 500 11px/1 var(--mono); letter-spacing: .28em; text-transform: uppercase; color: var(--ink-3);
  display: none;
  transition: opacity .5s var(--ease);
}
@media (min-width: 900px) { .bar-prompt { display: block; } }
.gate-open .bar-prompt { opacity: 0; }

.bar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.bar-link, .bar-back {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px;
  border-radius: 999px; border: 1px solid transparent; background: transparent;
  font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink-2);
  cursor: pointer;
  transition: color .3s, border-color .3s, background-color .3s;
}
.bar-link { border-color: var(--line-2); }
.bar-link:hover, .bar-back:hover { color: var(--ink); border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.04); }
.bar-back[hidden] { display: none; }
.bar-back { animation: fade-in .5s var(--ease) both; }

/* ---------------------------------------------------------------- the gate */
.gate {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  background: var(--bg-2);
}
@media (min-width: 900px) { .gate { flex-direction: row; } }

.door {
  position: relative; isolation: isolate;
  flex: 1 1 0px;
  min-width: 0; min-height: 0;
  overflow: hidden;
  transition: flex-grow var(--door-t) var(--ease-door), flex-basis var(--door-t) var(--ease-door);
}
/* desktop: a door leans open toward the pointer */
@media (hover: hover) and (min-width: 900px) {
  .gate[data-open=""][data-hover="post"] .door-post,
  .gate[data-open=""][data-hover="music"] .door-music { flex-grow: 1.62; }
}
.gate[data-open="post"] .door-music,
.gate[data-open="music"] .door-post { flex-grow: 0; flex-basis: var(--rail); }

/* the scene behind each door: viewport-sized, centred on the door */
.door-bg {
  position: absolute; left: 50%; top: 50%; z-index: 0;
  width: 100vw; height: 100vh; height: 100svh;
  transform: translate(-50%, -50%);
  transition: filter .9s var(--ease), opacity .9s var(--ease);
}
.post-scene { display: block; width: 100%; height: 100%; }
.swarm-video {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 52%, transparent 100%);
          mask-image: radial-gradient(ellipse 72% 70% at 50% 50%, #000 52%, transparent 100%);
}
@media (max-width: 899px) {
  .door-music .door-bg { width: 175vw; height: 92vw; }
  .swarm-video { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); }
}
.door-music .door-bg {
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(207, 148, 66, .08), transparent 70%);
}

.door-shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity .8s var(--ease); }
.door-shade::before, .door-shade::after { content: ""; position: absolute; inset: 0; }
.door-shade::before { background: linear-gradient(180deg, rgba(7, 7, 8, 0) 38%, rgba(7, 7, 8, .82) 100%); }
.door-shade::after { background: var(--bg-2); opacity: 0; transition: opacity .8s var(--ease); }
/* the door you are not leaning toward dims and loses colour */
.gate[data-open=""][data-hover="post"] .door-music .door-shade::after,
.gate[data-open=""][data-hover="music"] .door-post .door-shade::after { opacity: .5; }
.gate[data-open=""][data-hover="post"] .door-music .door-bg,
.gate[data-open=""][data-hover="music"] .door-post .door-bg { filter: saturate(.25) brightness(.8); }
.door-music .door-bg { filter: saturate(1.05); }
/* a collapsed door is a rail: darker, with its label on top */
.gate[data-open="post"] .door-music .door-shade::after,
.gate[data-open="music"] .door-post .door-shade::after { opacity: .62; }

/* small instrument details on each door */
.post-tc {
  position: absolute; z-index: 2; right: var(--g); top: calc(var(--bar) + 14px);
  font-size: 11px; letter-spacing: .12em; color: rgba(139, 231, 248, .7);
  font-variant-numeric: tabular-nums;
  transition: opacity .5s var(--ease);
}
.hz {
  position: absolute; z-index: 2; left: var(--g); top: 50%; transform: translateY(-50%);
  display: none; flex-direction: column; gap: 34px;
  font-size: 10px; letter-spacing: .08em; color: rgba(233, 194, 122, .38);
  transition: opacity .5s var(--ease);
}
@media (min-width: 900px) { .hz { display: flex; } }
.live {
  position: absolute; z-index: 2; right: var(--g); top: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(239, 232, 214, .62);
  transition: opacity .5s var(--ease);
}
@media (min-width: 900px) { .live { top: calc(var(--bar) + 14px); } }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px var(--gold); animation: blink 2.4s ease-in-out infinite; }
.gate-open .post-tc, .gate-open .hz, .gate-open .live { opacity: 0; }

/* ---------------------------------------------------------------- the face of a door */
.door-face {
  position: absolute; z-index: 3;
  left: var(--g); right: var(--g); bottom: clamp(22px, 5.5vh, 72px);
  pointer-events: none;
  transition: opacity .55s var(--ease), transform .9s var(--ease-door), filter .55s var(--ease);
}
.door-post .door-face { bottom: clamp(22px, 4vh, 72px); }
.door-kicker {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font: 500 11px/1.3 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 10px;
}
.door-num { padding: 3px 7px; border: 1px solid currentColor; border-radius: 6px; letter-spacing: .08em; }
.door-post .door-num { color: var(--cyan); }
.door-music .door-num { color: var(--gold); }
.door-word {
  font-size: clamp(76px, 25vw, 132px);
  line-height: .86;
  letter-spacing: -0.055em;
  padding-bottom: .06em;
  margin-left: -0.04em;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  width: fit-content;
}
@media (min-width: 900px) { .door-word { font-size: clamp(110px, 12.5vw, 230px); } }
.door-post .door-word {
  font-weight: 500;
  background-image: linear-gradient(176deg, #ffffff 8%, #dfe6f2 42%, #95aed4 74%, #b8a2ff 100%);
}
.door-music .door-word {
  font-family: var(--display-m);
  font-weight: 700;
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.06em;
  background-image: var(--gilt);
}
.door-line { margin-top: 10px; max-width: 32ch; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
@media (min-width: 900px) { .door-line { font-size: 17px; } }
.door-cue {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 16px; padding-bottom: 4px;
  font: 500 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase;
  border-bottom: 1px solid var(--line-2);
}
.door-cue i { font-style: normal; transition: transform .5s var(--ease); }
.door-post .door-cue { color: var(--cyan); }
.door-music .door-cue { color: var(--gold); }
.cue-tap { display: none; }
@media (hover: none) { .cue-wide { display: none; } .cue-tap { display: inline; } }
.gate[data-hover="post"] .door-post .door-cue i,
.gate[data-hover="music"] .door-music .door-cue i { transform: translateX(6px); }
.door-last {
  display: none; margin-left: 12px; vertical-align: 2px;
  font: 500 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  padding: 4px 8px; border: 1px dashed var(--line-2); border-radius: 999px;
}
.door[data-last] .door-last { display: inline-block; }

/* any door that is open or folded loses its face */
.gate-open .door-face { opacity: 0; transform: translateY(28px) scale(.97); filter: blur(8px); transition-duration: .4s, .6s, .4s; }

/* ---------------------------------------------------------------- the seam between doors */
.seam { position: relative; z-index: 6; flex: 0 0 0px; pointer-events: none; }
.seam::before {
  content: ""; position: absolute;
  left: 0; right: 0; top: -0.5px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 231, 248, .55) 30%, rgba(233, 194, 122, .55) 70%, transparent);
  transform-origin: center; transform: scaleX(0);
  transition: transform 1.1s var(--ease-door), opacity .5s;
}
@media (min-width: 900px) {
  .seam::before {
    left: -0.5px; right: auto; top: 0; bottom: 0; width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, rgba(139, 231, 248, .55) 28%, rgba(233, 194, 122, .55) 72%, transparent);
    transform: scaleY(0);
  }
}
.is-ready .seam::before { transform: none; }
.seam-or {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--ink-2);
  background: rgba(11, 11, 13, .72);
  border: 1px solid var(--line-2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 0 6px rgba(11, 11, 13, .25), 0 0 40px rgba(139, 231, 248, .12), 0 0 40px rgba(233, 194, 122, .1);
  opacity: 0;
  transition: opacity .6s var(--ease) .6s, transform .8s var(--ease) .6s;
}
@media (max-width: 899px) { .seam-or { width: 40px; height: 40px; } }
.is-ready .seam-or { opacity: 1; transform: translate(-50%, -50%); }
.gate-open .seam-or { opacity: 0; transition-delay: 0s; }
.gate-open .seam::before { opacity: .5; }

/* ---------------------------------------------------------------- the rail (a folded door) */
.door-rail {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .3s var(--ease);
}
.door-rail span {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 12px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase;
  white-space: nowrap;
}
.door-rail i { font-style: normal; }
.door-post .door-rail span { color: var(--cyan); }
.door-music .door-rail span { color: var(--gold); }
@media (min-width: 900px) { .door-rail span { writing-mode: vertical-rl; transform: rotate(180deg); } .door-music .door-rail span { transform: none; } }
@media (max-width: 899px) { .door-rail i { transform: rotate(90deg); } .door-post .door-rail i { transform: rotate(90deg); } }
.gate[data-open="post"] .door-music .door-rail,
.gate[data-open="music"] .door-post .door-rail { opacity: 1; transition: opacity .5s var(--ease) .55s; }
.door-rail span::before { content: "Switch to"; opacity: .55; letter-spacing: .2em; }
@media (min-width: 900px) { .door-rail span::before { content: none; } }
@media (max-width: 899px) { .gate[data-open="music"] .door-post .door-rail { padding-top: var(--bar); } }
@media (max-width: 899px) { .gate[data-open="music"] .door-post { flex-basis: calc(var(--rail) + var(--bar)); } }

/* the whole door is one link; an open door hands the screen to its detail */
.door-hit { position: absolute; inset: 0; z-index: 5; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.door-hit:focus-visible { outline-offset: -6px; border-radius: 14px; }
.door.is-open .door-hit { display: none; }

/* ---------------------------------------------------------------- the opened door */
.door-detail {
  position: absolute; inset: 0; z-index: 4;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--bar) + 28px) var(--g) 40px;
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.door-detail:focus { outline: none; }
.door-post .door-detail { background: linear-gradient(90deg, rgba(9, 10, 13, .9) 0%, rgba(9, 10, 13, .66) 52%, rgba(9, 10, 13, .3) 100%); }
.door-music .door-detail { background: linear-gradient(90deg, rgba(8, 7, 6, .9) 0%, rgba(8, 7, 6, .62) 52%, rgba(8, 7, 6, .3) 100%); }
@media (max-width: 899px) {
  .door-post .door-detail { background: linear-gradient(180deg, rgba(9, 10, 13, .55) 0%, rgba(9, 10, 13, .9) 46%); }
  .door-music .door-detail { background: linear-gradient(180deg, rgba(8, 7, 6, .5) 0%, rgba(8, 7, 6, .9) 46%); }
  .gate[data-open="music"] .door-music .door-detail { padding-top: 28px; }
}
.door.is-open .door-detail { opacity: 1; visibility: visible; transition: opacity .6s var(--ease) .38s, visibility 0s; }

.d-in { max-width: 1240px; margin: 0 auto; display: grid; gap: clamp(44px, 7vw, 96px); }
.d-in > *, .d-copy > *, .d-visual { --i: 0; }
/* staggered arrival */
.d-copy > *, .d-visual, .d-section, .d-pair, .d-foot {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--ease), transform 1s var(--ease);
}
.door.is-open .d-copy > *, .door.is-open .d-visual, .door.is-open .d-section, .door.is-open .d-pair, .door.is-open .d-foot {
  opacity: 1; transform: none;
  transition-delay: calc(.48s + var(--i) * 75ms);
}

.d-hero {
  display: grid; gap: 40px; align-items: center;
  min-height: calc(100svh - var(--bar) - 120px);
}
@media (min-width: 900px) { .d-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 5vw, 80px); } }
.d-copy { display: grid; gap: 22px; align-content: center; }
.d-kicker { font: 500 11px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.door-post .d-kicker { color: var(--cyan); }
.door-music .d-kicker { color: var(--gold); }
.d-title {
  font-weight: 500; font-size: clamp(46px, 6.2vw, 96px); line-height: .95; letter-spacing: -0.045em;
  text-wrap: balance;
}
.door-post .d-title { background: linear-gradient(176deg, #fff 30%, #a9bde0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .05em; }
.d-title-swarm { line-height: 1; }
.swarm-word { width: min(100%, 440px); height: auto; filter: drop-shadow(0 0 28px rgba(233, 194, 122, .18)); }
.d-head {
  font-family: var(--display-m); font-weight: 600; font-variation-settings: "opsz" 72;
  font-size: clamp(30px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -0.035em;
  background: var(--gilt); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em;
}
.d-lede { max-width: 44ch; font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--ink-2); }
.d-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 24px; border-radius: 999px;
  font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), background-color .3s, border-color .3s;
}
.btn i { font-style: normal; transition: transform .4s var(--ease); }
.btn:hover i { transform: translateX(4px); }
.btn-post { color: #071018; background: linear-gradient(100deg, #b5f1fb, #8be7f8 30%, #8fb0ff 75%, #c4b3ff); box-shadow: 0 10px 40px -12px rgba(90, 140, 255, .65); }
.btn-post:hover { transform: translateY(-1px); box-shadow: 0 14px 48px -10px rgba(90, 140, 255, .8); }
.btn-swarm { color: #1a1206; background: var(--gilt); box-shadow: 0 10px 40px -12px rgba(207, 148, 66, .7); cursor: default; }
.btn-tag { font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: rgba(26, 18, 6, .14); }
.btn-ghost { color: var(--ink); border: 1px solid var(--line-2); background: rgba(255, 255, 255, .02); }
.btn-ghost:hover { border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .06); }
.d-soon { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1.3 var(--mono); letter-spacing: .04em; color: var(--ink-3); }
.soon-ring { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ink-3) inset; }

/* post visual: three product shots, fanned (placeholders until the real visuals) */
.d-visual { position: relative; min-height: 340px; }
@media (min-width: 900px) { .d-visual { min-height: 520px; } }
.shot {
  position: absolute; width: 70%;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .12);
  background: #0d0f14;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .4);
  transition: transform 1.2s var(--ease);
}
.shot img { width: 100%; }
.shot-a { left: 0; top: 8%; transform: rotate(-4deg); z-index: 1; }
.shot-b { right: 0; top: 0; transform: rotate(3deg); z-index: 2; width: 62%; }
.shot-c { left: 16%; bottom: 0; transform: rotate(-1deg); z-index: 3; width: 66%; }
.post-visual:hover .shot-a { transform: rotate(-6deg) translate(-8px, -4px); }
.post-visual:hover .shot-b { transform: rotate(5deg) translate(8px, -8px); }
.post-visual:hover .shot-c { transform: rotate(0deg) translateY(6px); }

/* swarm visual: the real SwarmFX-g, two captures */
.frame { position: absolute; margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid rgba(233, 194, 122, .2); background: #0b0a08; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .95), 0 0 60px -20px rgba(207, 148, 66, .35); }
.frame img { width: 100%; }
.frame-back { width: 74%; right: 0; top: 0; opacity: .55; transform: rotate(2.5deg); }
.frame-front { width: 86%; left: 0; bottom: 0; z-index: 2; transform: rotate(-1.5deg); transition: transform 1.2s var(--ease); }
.swarm-visual:hover .frame-front { transform: rotate(0deg) translateY(-6px); }
.frame figcaption { position: absolute; left: 12px; bottom: 10px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(239, 232, 214, .7); background: rgba(8, 7, 6, .7); padding: 5px 8px; border-radius: 6px; }

/* Mandy, the ember */
.ember {
  position: absolute; right: 8%; bottom: 14%; z-index: 4;
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle, #fff6dc 0%, #ffc56b 45%, #ff8a2a 100%);
  box-shadow: 0 0 12px 3px rgba(255, 170, 70, .7), 0 0 44px 10px rgba(255, 140, 40, .25);
  animation: ember-float 7s ease-in-out infinite;
}
.ember::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid rgba(255, 190, 110, .55); animation: ember-ring 2.8s ease-out infinite; }
.ember-inline { position: relative; right: auto; bottom: auto; flex: none; margin-top: 6px; animation: none; }
.coda-dot { flex: none; width: 12px; height: 12px; margin-top: 6px; border-radius: 3px; transform: rotate(45deg); background: linear-gradient(135deg, #a5f0e7, var(--teal)); box-shadow: 0 0 14px 3px rgba(111, 211, 200, .45); }

/* sections */
.d-eyebrow { font: 500 11px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
.stages { border-top: 1px solid var(--line); }
.stages li {
  display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--line);
  transition: background-color .3s;
}
@media (min-width: 900px) { .stages li { grid-template-columns: 72px minmax(180px, .9fr) 1.6fr; padding: 22px 0; } }
.st-num { font: 500 12px/1 var(--mono); letter-spacing: .06em; grid-row: span 2; }
@media (min-width: 900px) { .st-num { grid-row: auto; } }
.door-post .st-num { color: var(--cyan); }
.door-music .st-num { color: var(--gold); }
.st-name { font-size: clamp(20px, 2vw, 28px); font-weight: 500; letter-spacing: -0.02em; }
.door-music .st-name { font-family: var(--display-m); font-weight: 600; }
.st-tools { color: var(--ink-2); font-size: 15px; }
@media (min-width: 900px) { .st-tools { font-size: 17px; } }

.d-pair { display: grid; gap: 16px; }
@media (min-width: 900px) { .d-pair { grid-template-columns: 1fr 1fr; gap: 20px; } }
.d-note {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 24px; border-radius: 18px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .03);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--ink-2); font-size: 16px;
}
.d-note strong { color: var(--ink); font-weight: 500; }
.d-cross { display: grid; gap: 8px; }
.d-cross .d-eyebrow { margin: 0; }
.cross-link { display: inline-flex; gap: 8px; align-items: center; width: fit-content; margin-top: 6px; text-decoration: none; font: 500 12px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; padding-bottom: 4px; border-bottom: 1px solid currentColor; }
.cross-link i { font-style: normal; }
.cross-music { color: var(--gold); }
.cross-post { color: var(--cyan); }

.d-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; border-top: 1px solid var(--line); font: 400 12px/1.4 var(--mono); letter-spacing: .06em; color: var(--ink-3); }

/* ---------------------------------------------------------------- arrival */
.js .door-face > * { opacity: 0; transform: translateY(26px); }
.js.is-ready .door-face > * { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.js.is-ready .door-face > :nth-child(1) { transition-delay: .35s; }
.js.is-ready .door-face > :nth-child(2) { transition-delay: .45s; }
.js.is-ready .door-face > :nth-child(3) { transition-delay: .6s; }
.js.is-ready .door-face > :nth-child(4) { transition-delay: .72s; }
.js.is-ready .door-music .door-face > * { transition-delay: calc(var(--d, 0s) + .12s); }
.js.is-ready .door-music .door-face > :nth-child(1) { --d: .35s; }
.js.is-ready .door-music .door-face > :nth-child(2) { --d: .45s; }
.js.is-ready .door-music .door-face > :nth-child(3) { --d: .6s; }
.js.is-ready .door-music .door-face > :nth-child(4) { --d: .72s; }
.js .door-bg { opacity: 0; }
.js.is-ready .door-bg { opacity: 1; transition: opacity 1.6s var(--ease) .1s, filter .9s var(--ease); }

/* film grain over everything */
.grain {
  position: fixed; inset: -50%; z-index: 40; pointer-events: none; opacity: .065;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1.2s steps(6) infinite;
}

@keyframes fade-in { from { opacity: 0; } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes ember-float { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-14px, -18px); } 66% { transform: translate(10px, -8px); } }
@keyframes ember-ring { from { transform: scale(.5); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); } 60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } }

@media (prefers-reduced-motion: reduce) {
  :root { --door-t: .01s; }
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
}

/* phone bar: one line, always */
.brand, .bar-link, .bar-back { white-space: nowrap; }
@media (max-width: 599px) {
  .gate-open .bar-link { display: none; }
  .bar-back { padding: 0 12px 0 10px; }
}
@media (max-width: 899px) { .post-tc { display: none; } }

/* Zen Dots, the Swarm line's display face (as on the swarmaudio site): the music door's word,
   the Swarm headline and the names in the line. One weight only, and wide, so it runs smaller. */
:root { --zen: "Zen Dots", var(--display-m); }
.door-music .door-word {
  font-family: var(--zen); font-weight: 400; font-variation-settings: normal;
  font-size: clamp(54px, 22vw, 96px);
  letter-spacing: -0.02em; line-height: 1;
  margin-left: 0;
}
@media (min-width: 900px) { .door-music .door-word { font-size: clamp(76px, 9vw, 160px); } }
.door-music .d-head { font-family: var(--zen); font-weight: 400; font-variation-settings: normal; letter-spacing: -0.01em; line-height: 1.12; font-size: clamp(24px, 2.7vw, 40px); }
.door-music .st-name { font-family: var(--zen); font-weight: 400; letter-spacing: 0; font-size: clamp(17px, 1.6vw, 22px); }

/* ---------------------------------------------------------------- one size, one line (Con, 2026-10-12)
   Both door words share --word, so P and M stand the same height (Zen Dots' caps run 2% taller per em,
   so Music is set 2% smaller). Each word box is trimmed to cap height and baseline, and both faces are
   anchored from the top, so kicker, cap line and baseline sit level across the seam whatever the lines
   below them do. Zen Dots is wide: while the other door leans open, a word steps back (scale) to fit. */
:root { --word: clamp(54px, 24vw, 112px); --face-rest: 166px; }
@media (min-width: 900px) { :root { --word: clamp(96px, 11.5vw, 200px); --face-rest: 184px; } }
.door .door-word {
  font-size: var(--word);
  line-height: 1;
  text-box: trim-both cap alphabetic;
  padding-block: .1em; margin-block: -.1em;   /* keeps round overshoots inside the painted gradient */
  transform-origin: 0 100%;
}
.door-music .door-word { font-size: calc(var(--word) * .979); }
.door .door-face, .door-post .door-face { top: calc(100% - var(--word) * .7 - var(--face-rest)); bottom: auto; }
.door .door-kicker { margin-bottom: 18px; }
.door .door-line { margin-top: 18px; }
.js.is-ready .door .door-face .door-word { transition: opacity 1s var(--ease) .45s, transform .9s var(--ease-door); }
@media (hover: hover) and (min-width: 900px) {
  .gate[data-open=""][data-hover="post"] .door-music .door-word,
  .gate[data-open=""][data-hover="music"] .door-post .door-word { transform: scale(.72); }
}