/* Clanker Cock Audio */
.au-body {
  --au-bg: #050508;
  --au-cyan: #5afafe;
  --au-blue: #4f8cff;
  --au-violet: #9b7bff;
  --au-pink: #ff5fd2;
  --au-ink: #f5f6fb;
  --au-ink-2: #b9bccc;
  --au-ink-3: #7b7f93;
  --au-line: rgba(255, 255, 255, .08);
  --au-line-2: rgba(255, 255, 255, .14);
  --au-glass: rgba(16, 17, 26, .55);
  --au-grad: linear-gradient(100deg, var(--au-cyan) 0%, var(--au-blue) 38%, var(--au-violet) 68%, var(--au-pink) 100%);
  --au-display: "Space Grotesk", var(--font);
  --au-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --lvl: 0;
  background: var(--au-bg);
  color: var(--au-ink);
}
.au-body .site-header { background: rgba(5, 5, 8, .62); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border-bottom-color: var(--au-line); }
.au-body .site-foot { background: transparent; border-top-color: var(--au-line); }
.au { overflow: clip; }

/* ---------- hero ---------- */
.au-hero {
  position: relative;
  isolation: isolate;
  min-height: min(980px, calc(100svh - 64px));
  padding: clamp(28px, 6vw, 72px) var(--gutter) clamp(40px, 7vw, 96px);
  display: grid;
  align-items: center;
}
.au-wave { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
.au-aura { position: absolute; inset: -10% -10% 0; z-index: -3; pointer-events: none; filter: blur(70px) saturate(1.2); opacity: .55; }
.au-aura i { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
.au-aura i:nth-child(1) { width: 46vmax; height: 46vmax; left: -12vmax; top: -16vmax; background: radial-gradient(closest-side, rgba(79, 140, 255, .55), transparent); animation: au-drift 22s var(--ease) infinite alternate; }
.au-aura i:nth-child(2) { width: 38vmax; height: 38vmax; right: -10vmax; top: 6vmax; background: radial-gradient(closest-side, rgba(155, 123, 255, .5), transparent); animation: au-drift 28s var(--ease) -6s infinite alternate-reverse; }
.au-aura i:nth-child(3) { width: 30vmax; height: 30vmax; left: 30%; bottom: -18vmax; background: radial-gradient(closest-side, rgba(90, 250, 254, .28), transparent); animation: au-drift 34s var(--ease) -12s infinite alternate; }
@keyframes au-drift { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.12); } }
.au-grain {
  position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .5;
  background:
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 100% 4px,
    radial-gradient(ellipse 80% 60% at 50% 40%, transparent 40%, var(--au-bg) 100%);
}
.au-hero::after { /* fade into the page below */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: -1; pointer-events: none;
  background: linear-gradient(transparent, var(--au-bg));
}

.au-hero-in {
  width: 100%; max-width: var(--wrap); margin: 0 auto;
  display: grid; gap: clamp(36px, 6vw, 72px);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 900px) {
  .au-hero-in { grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); }
}

.au-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 22px; font: 600 11.5px/1 var(--au-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--au-ink-2); }
.au-live { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px 7px 9px; border-radius: 999px; border: 1px solid rgba(90, 250, 254, .28); background: rgba(90, 250, 254, .07); color: var(--au-cyan); }
.au-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--au-cyan); box-shadow: 0 0 0 0 rgba(90, 250, 254, .7); animation: au-ping 1.8s ease-out infinite; }
@keyframes au-ping { 70% { box-shadow: 0 0 0 9px rgba(90, 250, 254, 0); } 100% { box-shadow: 0 0 0 0 rgba(90, 250, 254, 0); } }

.au-h1 { margin: 0; font-family: var(--au-display); font-weight: 700; letter-spacing: -.035em; line-height: .95; font-size: clamp(44px, 6.4vw, 92px); }
.au-h1 span { display: block; }
.au-h1-b {
  background: var(--au-grad); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: au-sheen 9s linear infinite;
  padding-bottom: .08em;
}
@keyframes au-sheen { to { background-position: -200% 0; } }
.au-lede { margin: 22px 0 0; max-width: 30ch; font-size: clamp(17px, 1.8vw, 21px); line-height: 1.45; color: var(--au-ink-2); }

.au-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.au-btn {
  --b: var(--au-line-2);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px; border-radius: 999px;
  font: 600 15px/1 var(--au-display); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  color: var(--au-ink); background: rgba(255, 255, 255, .04); border: 1px solid var(--b);
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.au-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.au-btn:hover { transform: translateY(-1px); }
.au-btn:focus-visible { outline: 2px solid var(--au-cyan); outline-offset: 3px; }
.au-btn-line:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); }
.au-btn-glow {
  color: #05060c; border: 0;
  background: linear-gradient(100deg, #8ffcff, #7aa8ff 45%, #b79cff);
  box-shadow: 0 10px 34px -8px rgba(110, 150, 255, .65), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.au-btn-glow:hover { box-shadow: 0 14px 44px -8px rgba(130, 170, 255, .85), inset 0 1px 0 rgba(255, 255, 255, .6); }

.au-specs { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin: 44px 0 0; padding: 0; }
.au-specs div { padding: 0 22px; border-left: 1px solid var(--au-line-2); }
.au-specs div:first-child { padding-left: 0; border-left: 0; }
.au-specs dt { font: 600 10.5px/1 var(--au-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--au-ink-3); }
.au-specs dd { margin: 9px 0 0; font: 600 15px/1.2 var(--au-display); color: var(--au-ink); }

/* ---------- device ---------- */
.au-device { position: relative; margin: 0 auto; width: min(100%, 360px); }
.au-device-glow {
  position: absolute; inset: -14%; z-index: -1; border-radius: 40%;
  background: conic-gradient(from 210deg, var(--au-cyan), var(--au-blue), var(--au-violet), var(--au-pink), var(--au-cyan));
  filter: blur(54px);
  opacity: calc(.28 + var(--lvl) * .5);
  transform: scale(calc(.94 + var(--lvl) * .1));
  transition: opacity .12s linear, transform .12s linear;
  animation: au-spin 18s linear infinite;
}
@keyframes au-spin { to { rotate: 360deg; } }
.au-screen {
  position: relative; aspect-ratio: 9 / 16; border-radius: 30px; overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 0 0 7px rgba(10, 10, 16, .9), 0 0 0 8px rgba(255, 255, 255, .08), 0 40px 90px -20px rgba(0, 0, 0, .9);
}
.au-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.au-screen::after { /* glass sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(155deg, rgba(255, 255, 255, .1), transparent 26%, transparent 70%, rgba(255, 255, 255, .04));
}

.au-sound {
  position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%;
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 20px 13px 16px; border-radius: 999px;
  font: 600 14px/1 var(--au-display); color: #fff; cursor: pointer;
  background: rgba(8, 9, 16, .5); border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(14px) saturate(1.5); -webkit-backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
  transition: opacity .35s var(--ease), translate .35s var(--ease), top .45s var(--ease), left .45s var(--ease), padding .35s var(--ease), background .2s;
}
.au-sound:hover { background: rgba(20, 22, 36, .7); }
.au-sound svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.au-sound .i-on { display: none; }
.au-device.is-unmuted .au-sound { left: calc(100% - 14px); top: 14px; translate: -100% 0; padding: 10px; }
.au-device.is-unmuted .au-sound span { display: none; }
.au-device.is-unmuted .au-sound .i-on { display: block; }
.au-device.is-unmuted .au-sound .i-off { display: none; }

.au-hud {
  position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px;
  display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px;
  padding: 7px 12px 7px 7px; border-radius: 18px;
  background: rgba(8, 9, 16, .5); border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
}
.au-pp { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border-radius: 12px; border: 0; cursor: pointer; color: #05060c; background: linear-gradient(140deg, #8ffcff, #9f8cff); }
.au-pp svg { width: 16px; height: 16px; fill: currentColor; }
.au-pp .i-play { display: none; }
.au-device.is-paused .au-pp .i-play { display: block; }
.au-device.is-paused .au-pp .i-pause { display: none; }
.au-track { position: relative; height: 30px; cursor: pointer; touch-action: none; outline: none; }
.au-track canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.au-track:focus-visible { box-shadow: 0 0 0 2px var(--au-cyan); border-radius: 6px; }
.au-head { position: absolute; top: 2px; bottom: 2px; left: 0; width: 2px; border-radius: 2px; background: #fff; box-shadow: 0 0 10px #fff, 0 0 18px var(--au-cyan); }
.au-time { font: 600 11.5px/1 var(--au-mono); color: var(--au-ink-2); min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; }
.au-cap { display: flex; justify-content: space-between; margin-top: 18px; padding: 0 4px; font: 600 10.5px/1 var(--au-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--au-ink-3); }

/* ---------- marquee ---------- */
.au-marquee { position: relative; overflow: hidden; border-block: 1px solid var(--au-line); padding: 18px 0; background: rgba(255, 255, 255, .015); -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.au-marquee-in { display: flex; width: max-content; gap: 28px; align-items: center; animation: au-marq 38s linear infinite; font: 600 clamp(13px, 1.5vw, 15px)/1 var(--au-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--au-ink-2); white-space: nowrap; }
.au-marquee-in b { font-weight: 400; color: var(--au-violet); }
@keyframes au-marq { to { transform: translateX(-50%); } }

/* ---------- two ways in ---------- */
.au-ways { max-width: var(--wrap); margin: 0 auto; padding: clamp(64px, 9vw, 120px) var(--gutter) 0; }
.au-sec-h { margin: 0 0 28px; font: 600 11.5px/1 var(--au-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--au-ink-3); display: flex; align-items: center; gap: 16px; }
.au-sec-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--au-line-2), transparent); }
.au-cards { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .au-cards { grid-template-columns: 1fr 1fr; gap: 22px; } }

.au-card {
  --mx: 50%; --my: 0%;
  position: relative; overflow: hidden; isolation: isolate;
  padding: 22px 24px 28px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .045), rgba(255, 255, 255, .012));
  border: 1px solid var(--au-line);
  transition: border-color .3s var(--ease), transform .4s var(--ease);
}
.au-card::before { /* pointer light */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(122, 168, 255, .14), transparent 60%);
}
.au-card:hover { border-color: var(--au-line-2); }
.au-card:hover::before { opacity: 1; }
.au-card-top { display: flex; justify-content: space-between; align-items: center; }
.au-idx { font: 600 12px/1 var(--au-mono); letter-spacing: .14em; color: var(--au-ink-3); }
.au-soon { padding: 6px 10px; border-radius: 999px; font: 600 10.5px/1 var(--au-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--au-ink-2); border: 1px solid var(--au-line-2); }
.au-card h3 { margin: 26px 0 0; font: 700 clamp(26px, 3.2vw, 34px)/1.05 var(--au-display); letter-spacing: -.025em; }
.au-card > p { margin: 10px 0 0; font-size: 16px; color: var(--au-ink-2); }

.au-vis { margin: 22px 0 0; height: 200px; border-radius: 18px; border: 1px solid var(--au-line); background: rgba(0, 0, 0, .35); position: relative; overflow: hidden; }

/* make: a live take and a script */
.au-vis-rec { display: grid; grid-template-rows: 1fr auto; padding: 16px; }
.au-rec-dot { position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: #ff4d6d; box-shadow: 0 0 12px #ff4d6d; animation: au-blink 1.4s steps(2, jump-none) infinite; }
@keyframes au-blink { 50% { opacity: .2; } }
.au-rec-bars { display: flex; align-items: center; justify-content: center; gap: 4px; height: 100%; }
.au-rec-bars i { width: 4px; border-radius: 4px; height: 18%; background: linear-gradient(var(--au-cyan), var(--au-violet)); animation: au-bar 1.1s ease-in-out infinite alternate; opacity: .9; }
.au-rec-bars i:nth-child(3n) { animation-duration: .8s; }
.au-rec-bars i:nth-child(4n+1) { animation-duration: 1.35s; }
.au-rec-bars i:nth-child(5n+2) { animation-duration: .95s; }
@keyframes au-bar { to { height: var(--h, 70%); } }
.au-script { display: grid; gap: 7px; font: 600 10.5px/1 var(--au-mono); letter-spacing: .12em; }
.au-script p { margin: 0; display: flex; align-items: center; gap: 12px; }
.au-script b { width: 3ch; color: var(--au-ink-3); font-weight: 600; }
.au-script p:nth-child(2) b { color: var(--au-cyan); }

/* library: a track list */
.au-vis-lib { list-style: none; padding: 8px; display: grid; align-content: center; gap: 2px; }
.au-vis-lib li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 0 12px; height: 44px; border-radius: 12px; font: 600 11px/1 var(--au-mono); color: var(--au-ink-3); }
.au-vis-lib li.is-on { background: rgba(122, 168, 255, .1); box-shadow: inset 0 0 0 1px rgba(122, 168, 255, .22); color: var(--au-ink); }
.au-tn { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.au-tn i { width: 3px; height: 40%; border-radius: 2px; background: var(--au-cyan); animation: au-bar .7s ease-in-out infinite alternate; --h: 100%; }
.au-tn i:nth-child(2) { animation-duration: .5s; }
.au-tn i:nth-child(3) { animation-duration: .9s; }
.au-td { font-variant-numeric: tabular-nums; }

.au-redact { display: inline-block; height: 9px; border-radius: 3px; background: linear-gradient(90deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .07)); }
.au-redact.is-text { height: auto; background: none; color: var(--au-ink-2); letter-spacing: .08em; white-space: nowrap; overflow: hidden; }
.is-on .au-redact { background: linear-gradient(90deg, rgba(122, 168, 255, .55), rgba(155, 123, 255, .3)); }

/* ---------- end ---------- */
.au-end { position: relative; isolation: isolate; overflow: clip; text-align: center; padding: clamp(96px, 14vw, 180px) var(--gutter) clamp(88px, 12vw, 150px); }
.au-end h2 { margin: 0; font: 700 clamp(40px, 7vw, 84px)/.95 var(--au-display); letter-spacing: -.035em; }
.au-end p { margin: 16px 0 0; color: var(--au-ink-2); font-size: 17px; }
.au-end .au-actions { justify-content: center; }
.au-rings { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: -1; width: 1px; height: 1px; pointer-events: none; }
.au-rings i { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; translate: -50% -50%; border-radius: 50%; border: 1px solid rgba(122, 168, 255, .35); animation: au-ring 6s cubic-bezier(.2, .6, .3, 1) infinite; opacity: 0; }
.au-rings i:nth-child(2) { animation-delay: 2s; }
.au-rings i:nth-child(3) { animation-delay: 4s; }
@keyframes au-ring { 0% { scale: .4; opacity: 0; } 15% { opacity: .9; } 100% { scale: 3.4; opacity: 0; } }
.member-only { display: none !important; }
.is-signed-in .member-only { display: inline-flex !important; }

/* ---------- reveal ---------- */
.au-js .au-rv { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.au-js .au-rv.is-in { opacity: 1; transform: none; }

@media (max-width: 899px) {
  .au-hero { min-height: 0; }
  .au-copy { text-align: left; }
  .au-device { width: min(78vw, 340px); }
}
@media (max-width: 420px) {
  .au-specs div { padding: 0 14px; }
  .au-btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .au-aura i, .au-h1-b, .au-device-glow, .au-marquee-in, .au-rec-bars i, .au-tn i, .au-rings i, .au-live i, .au-rec-dot { animation: none !important; }
  .au-rings i { opacity: .25; }
  .au-js .au-rv { opacity: 1; transform: none; transition: none; }
}