/* ============================================================
   LOOPIN — /video  (coded launch film)
   Landscape cinematic frame, scene-driven by video.js
   ============================================================ */

.videopage { background: var(--bg); }

/* embed mode (homepage lightbox): just the film, edge to edge */
.videopage.embed { background: #0a0a0b; }
.videopage.embed .nav,
.videopage.embed .footer,
.videopage.embed .vp__head,
.videopage.embed .vp__note { display: none; }
.videopage.embed .vp { padding: 0; }
.videopage.embed .vp .wrap { max-width: none; padding: 0; }
.videopage.embed .film { border-radius: 0; box-shadow: none; }

.vp { padding: 40px 0 100px; }
.vp__head { text-align: center; margin-bottom: 34px; }
.vp__title { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.04; }
.vp__sub { color: var(--ink-soft); margin-top: 12px; font-size: 1.05rem; }
.vp__note { text-align: center; color: var(--ink-soft); font-size: .85rem; margin-top: 20px; }

/* ───────── the film frame (16:9) ───────── */
.film {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  background: #0a0a0b;
  box-shadow: 0 40px 120px -40px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.05);
  isolation: isolate;
  font-family: var(--font);
  -webkit-user-select: none; user-select: none;
}

/* a scene is a full-frame layer, hidden until the director shows it */
.scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .55s var(--ease), visibility .55s var(--ease);
  z-index: 2;
}
.scene.is-live { opacity: 1; visibility: visible; }

/* the frame is a size container so both cqw and cqh resolve inside it */
.film { container-type: size; }

/* ============================================================
   FLUID GRADIENT (CSS approximation of the light-streak art)
   ============================================================ */
/* aurora light-ribbons (elongated, rotated, blurred — no round blobs) */
.fluid {
  position: absolute; inset: -30%;
  z-index: 1; pointer-events: none;
  opacity: 0;
  filter: blur(64px) saturate(150%);
  transition: opacity .5s var(--ease);
}
.fluid.is-on { opacity: .85; transition: opacity 1.1s var(--ease); }
.fluid.is-soft { opacity: .34; }
.fluid__blob { position: absolute; mix-blend-mode: screen; border-radius: 50%; }
.fluid__blob--a { width: 150%; height: 30%; left: -25%; top: 34%; transform: rotate(-15deg);
  background: linear-gradient(90deg, transparent 6%, #ff5a3c 36%, #ff2e6e 56%, transparent 92%);
  animation: sweep-a 15s ease-in-out infinite; }
.fluid__blob--b { width: 150%; height: 26%; left: -25%; top: 52%; transform: rotate(11deg);
  background: linear-gradient(90deg, transparent 8%, #2193ff 38%, #21d4fd 58%, transparent 92%);
  animation: sweep-b 18s ease-in-out infinite; }
.fluid__blob--c { width: 135%; height: 24%; left: -18%; top: 62%; transform: rotate(-7deg);
  background: linear-gradient(90deg, transparent 10%, #b14bff 40%, #7a1fff 60%, transparent 93%);
  animation: sweep-c 13s ease-in-out infinite; }
.fluid__blob--d { width: 125%; height: 22%; left: -12%; top: 44%; transform: rotate(19deg);
  background: linear-gradient(90deg, transparent 10%, #ffd24a 42%, #ff7a18 62%, transparent 92%);
  animation: sweep-d 20s ease-in-out infinite; }
.fluid__grain { display: none; }
@keyframes sweep-a { 0%,100%{transform:rotate(-15deg) translateX(-4%)} 50%{transform:rotate(-12deg) translateX(6%)} }
@keyframes sweep-b { 0%,100%{transform:rotate(11deg) translateX(5%)} 50%{transform:rotate(8deg) translateX(-5%)} }
@keyframes sweep-c { 0%,100%{transform:rotate(-7deg) translateX(-3%)} 50%{transform:rotate(-10deg) translateX(7%)} }
@keyframes sweep-d { 0%,100%{transform:rotate(19deg) translateX(4%)} 50%{transform:rotate(22deg) translateX(-6%)} }

/* ============================================================
   SCENE 1 · the hook (clean, centered, balanced)
   ============================================================ */
.scene--scatter { gap: 4.5cqh; }
.hook__big {
  font-size: 8cqw; font-weight: 500; letter-spacing: -0.045em; line-height: 0.98; text-align: center; color: var(--ink);
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.scene--scatter.is-live .hook__big { opacity: 1; transform: none; }
.scatter__chips { display: flex; flex-wrap: wrap; gap: 1.6cqh; justify-content: center; max-width: 80%; }
.frag {
  font-size: 2cqw; color: var(--ink-faint); letter-spacing: -0.01em;
  background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.08);
  border-radius: 99px; padding: 1.3cqh 2.4cqh;
  opacity: 0; transform: translateY(8px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.frag b { color: var(--ink-soft); font-weight: 500; }
.scene--scatter.is-live .frag:nth-child(1) { opacity: 1; transform: none; transition-delay: .55s; }
.scene--scatter.is-live .frag:nth-child(2) { opacity: 1; transform: none; transition-delay: .8s; }
.scene--scatter.is-live .frag:nth-child(3) { opacity: 1; transform: none; transition-delay: 1.05s; }
.scatter__foot {
  font-size: 2.6cqw; color: var(--ink-soft); font-weight: 500; letter-spacing: -0.02em; text-align: center;
  opacity: 0; transition: opacity .7s var(--ease) 1.5s;
}
.scene--scatter.is-live .scatter__foot { opacity: 1; }

/* ============================================================
   SCENE 2 · converge → mark
   ============================================================ */
.scene--morph .morph__mark {
  width: 17cqw; color: var(--ink);
  transform: scale(.4); opacity: 0;
  transition: transform .8s var(--ease), opacity .6s var(--ease);
}
.scene--morph .morph__mark svg { width: 100%; height: auto; display: block; }
.scene--morph.is-live .morph__mark { transform: scale(1); opacity: 1; }
.morph__line {
  margin-top: 5cqw; font-size: 4cqw; font-weight: 500; letter-spacing: -0.03em; color: var(--ink);
  opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease) .35s, transform .6s var(--ease) .35s;
}
.scene--morph.is-live .morph__line { opacity: 1; transform: none; }

/* ============================================================
   SCENE 3 · philosophy word cycle
   ============================================================ */
.scene--philosophy .phi__line {
  font-size: 6.4cqw; font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; text-align: center; color: var(--ink);
}
.phi__cycle { position: relative; display: inline-grid; }
.phi__cycle em { grid-area: 1 / 1; font-style: normal; opacity: 0; transition: opacity .6s ease-in-out;
  background: linear-gradient(180deg,#fff,rgba(255,255,255,.55)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.phi__cycle em.is-in { opacity: 1; }

/* ============================================================
   DEVICE (portrait phone inside the landscape stage)
   ============================================================ */
/* feature scenes: left-right split — one short line of text beside a
   real-size phone screenshot. No zooming. Flexbox so it never collapses. */
.scene--feature { justify-content: center; align-items: center; padding: 0; }
.split {
  display: flex; align-items: center; justify-content: center; gap: 4cqw;
  width: 92%; height: 100%; margin: 0 auto;
}
.feat__text {
  flex: 0 1 auto; min-width: 0; max-width: 42cqw; text-align: left;
  opacity: 0; transform: translateX(-22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.is-live .feat__text { opacity: 1; transform: none; transition-delay: .1s; }
.feat__title { font-size: 5.6cqw; font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; color: var(--ink); }
.feat__device {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateX(30px);
  transition: opacity .7s var(--ease), transform .85s var(--ease);
}
.is-live .feat__device { opacity: 1; transform: none; transition-delay: .15s; }

.device {
  position: relative;
  height: 78cqh;
  aspect-ratio: 9 / 19.5;
  background: linear-gradient(150deg, #4a4a52 0%, #1a1a1e 22%, #141417 78%, #34343a 100%);
  border-radius: 5cqh; padding: 0.6cqh;
  box-shadow: 0 34px 80px -26px rgba(0,0,0,.9), inset 0 0 0 0.35cqh #0a0a0c, inset 0 0 0 1px rgba(255,255,255,.10);
  flex: none;
}
/* titanium side buttons */
.device::before { content: ""; position: absolute; left: -0.45cqh; top: 24%; width: 0.5cqh; height: 13%; border-radius: 1cqh 0 0 1cqh; background: linear-gradient(90deg,#42424a,#222); }
.device::after  { content: ""; position: absolute; right: -0.45cqh; top: 28%; width: 0.5cqh; height: 11%; border-radius: 0 1cqh 1cqh 0; background: linear-gradient(270deg,#42424a,#222); }
/* feature screens slide in from the right so the eye tracks left-to-rest */
.scene--feature .device { transform: translateX(7cqw) scale(.95); }
.scene--feature.is-live .device { transform: translateX(0) scale(1); }

.dscreen {
  position: relative; width: 100%; height: 100%;
  background: #0b0b0d;
  border-radius: 2.6cqh; overflow: hidden; display: flex; flex-direction: column;
}
/* Dynamic Island */
.dscreen::before {
  content:""; position: absolute; top: 1.3cqh; left: 50%; transform: translateX(-50%);
  width: 30%; height: 2.7cqh; border-radius: 99px; background: #000; z-index: 6;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.status--film { display: flex; justify-content: space-between; align-items: center; padding: 1.6cqh 7% 0.4cqh; font-size: 1.5cqh; font-weight: 600; color: var(--ink-soft); }
.status--film .status__icons { display: flex; gap: 0.4cqh; }
.status--film i { width: 1.6cqh; height: 1.1cqh; border-radius: 2px; background: var(--ink-soft); display:inline-block; }
.status--film i:last-child { width: 2.2cqh; }

/* the app fills the device; reuse landing-page player parts but scale via cqh */
.dscreen .app { flex: 1; display: flex; flex-direction: column; padding: 2cqh 6% 2.4cqh; min-height: 0; }

/* ── scale the reused player parts to the film device (cqh-based) ── */
.dscreen .player__top { margin-bottom: 0.5cqh; }
.dscreen .player__top svg { width: 2.2cqh; height: 2.2cqh; }
.dscreen .player__status { font-size: 1.5cqh; gap: 1cqh; letter-spacing: .2em; }
.dscreen .dot-live { width: .9cqh; height: .9cqh; }
.dscreen .vinyl { width: 54%; margin: 2.4cqh auto 2.6cqh; aspect-ratio: 1;
  background: repeating-radial-gradient(circle at 50% 50%, #202024 0 .2cqh, #131316 .2cqh .55cqh), #0e0e10; border-radius: 50%; position: relative;
  box-shadow: 0 3cqh 6cqh -2cqh rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.05); }
.dscreen .vinyl__label { position: absolute; inset: 34%; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #d2d2d8, #97979f); display: grid; place-items: center; }
.dscreen .vinyl__label::after { content:""; width: .7cqh; height: .7cqh; border-radius: 50%; background: #161618; }
.dscreen .player__title { font-size: 2.6cqh; font-weight: 500; letter-spacing: -0.02em; }
.dscreen .player__meta { display: flex; align-items: center; gap: 1.4cqh; margin-top: 1.2cqh; font-size: 1.5cqh; color: var(--ink-soft); }
.dscreen .pm__sep { width: 1px; height: 1.6cqh; background: var(--line-2); }
.dscreen .pm__stage { display: flex; align-items: center; gap: .8cqh; letter-spacing: .14em; }
.dscreen .pm__stage i { width: .8cqh; height: .8cqh; border-radius: 50%; background: var(--ink-faint); }
.dscreen .pm__icons { margin-left: auto; display: flex; gap: 1.8cqh; }
.dscreen .pm__icons svg { width: 2cqh; height: 2cqh; color: var(--ink-faint); }
.dscreen .scrub { margin: 2.2cqh 0; }
.dscreen .scrub__bar { height: .5cqh; border-radius: 99px; background: rgba(255,255,255,.12); position: relative; }
.dscreen .scrub__bar span { position: absolute; left: 0; top: 0; height: 100%; width: 4%; border-radius: 99px; background: var(--ink); }
.dscreen .scrub__bar::after { content:""; position:absolute; left:4%; top:50%; width:1.3cqh; height:1.3cqh; border-radius:50%; background:#fff; transform:translate(-50%,-50%); }
.dscreen .scrub__time { display: flex; justify-content: space-between; font-size: 1.4cqh; color: var(--ink-faint); margin-top: 1cqh; }
.dscreen .player__controls { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 5cqh; padding-bottom: 1cqh; }
.dscreen .player__controls svg { color: var(--ink-soft); }
.dscreen .player__controls .pc svg { width: 3.4cqh; height: 3.4cqh; }
.dscreen .player__controls .pc--main { width: auto; height: auto; display: inline-flex; }
.dscreen .player__controls .pc--main svg { width: 4.6cqh; height: 4.6cqh; color: var(--ink); }
.dscreen .player__tabs { margin-top: auto; display: flex; align-items: flex-start; justify-content: space-around; padding-top: 1.8cqh; border-top: 1px solid var(--line); }
.dscreen .tab { display: flex; flex-direction: column; align-items: center; gap: .8cqh; font-size: 1.15cqh; font-weight: 600; letter-spacing: .08em; color: var(--ink-faint); }
.dscreen .tab svg { width: 2.4cqh; height: 2.4cqh; }
/* ambient layer needs positioning context */
.dscreen .app--player { position: relative; overflow: hidden; }
.dscreen .player__ambient { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 150%; aspect-ratio: 1/1; pointer-events: none; z-index: 0; opacity: 1; }
.dscreen .app--player > :not(.player__ambient) { position: relative; z-index: 1; }

/* crimson player tint for the film */
.app--crimson { background: radial-gradient(120% 90% at 50% 122%, rgba(150,30,45,.5), transparent 62%); }
.app--crimson .player__ambient {
  background: radial-gradient(circle at 50% 100%, rgba(200,40,60,.6) 0%, rgba(150,28,48,.42) 30%, rgba(80,16,30,.2) 60%, transparent 85%);
}

/* ───────── pills beside the device (scene 4) ───────── */
.pills { position: absolute; inset: 0; pointer-events: none; }
.pill-cap {
  position: absolute; display: inline-flex; align-items: center; gap: 1.4cqh;
  font-size: 2.4cqh; font-weight: 500; color: var(--ink);
  padding: 1.5cqh 2.6cqh; border-radius: 99px;
  background: rgba(28,27,32,.72); border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(8px);
  opacity: 0; transform: translateX(-12px) scale(.96);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.pill-cap--1 { left: 5%;  top: 28%; }
.pill-cap--2 { left: 9%;  top: 44%; }
.pill-cap--3 { left: 6%;  top: 60%; }
.scene--app.is-live .pill-cap--1 { opacity: 1; transform: none; transition-delay: 1.0s; }
.scene--app.is-live .pill-cap--2 { opacity: 1; transform: none; transition-delay: 1.45s; }
.scene--app.is-live .pill-cap--3 { opacity: 1; transform: none; transition-delay: 1.9s; }
.pc-ico { width: 2.4cqh; height: 2.4cqh; display: inline-grid; place-items: center; flex: none; }
.pc-ico--rec::before { content:""; width: 1.5cqh; height: 1.5cqh; border-radius: 50%; border: .35cqh solid #ff5a4d; box-shadow: inset 0 0 0 .35cqh #ff5a4d; }
.pc-ico--write { background: currentColor; -webkit-mask: var(--m-write) center/contain no-repeat; mask: var(--m-write) center/contain no-repeat; color: #6ea0ff; }
.pc-ico--mic { background: currentColor; -webkit-mask: var(--m-mic) center/contain no-repeat; mask: var(--m-mic) center/contain no-repeat; color: #ff6a6a; }
.pc-ico--import { background: currentColor; -webkit-mask: var(--m-import) center/contain no-repeat; mask: var(--m-import) center/contain no-repeat; color: var(--ink); }
.pc-ico--scan { background: currentColor; -webkit-mask: var(--m-scan) center/contain no-repeat; mask: var(--m-scan) center/contain no-repeat; color: var(--ink-soft); }
:root {
  --m-write: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/></svg>');
  --m-mic: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="2.5" width="6" height="11" rx="3"/><path d="M5.5 11a6.5 6.5 0 0 0 13 0"/><line x1="12" y1="17.5" x2="12" y2="21"/></svg>');
  --m-import: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="M8 11l4 4 4-4"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>');
  --m-scan: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg>');
}

/* ============================================================
   SCENE 5 · recording screen (recreated)
   ============================================================ */
.app--rec2 { align-items: stretch; color: var(--ink); }
.rec2__top { display: flex; justify-content: space-between; align-items: center; font-size: 1.8cqh; color: var(--ink-soft); }
.rec2__live { display: flex; align-items: center; gap: 0.8cqh; letter-spacing: .2em; font-weight: 600; font-size: 1.6cqh; }
.rec2__live i { width: 1.2cqh; height: 1.2cqh; border-radius: 50%; background: #ff3b30; }
.rec2__song { text-align: center; letter-spacing: .35em; font-size: 1.5cqh; color: var(--ink-soft); margin-top: 1cqh; }
.rec2__kind { text-align: center; letter-spacing: .35em; font-size: 1.3cqh; color: var(--ink-faint); margin-top: .4cqh; }
.rec2__wave { height: 13cqh; margin: 3.4cqh 0 0; display: block; }
.wavebars { width: 100%; height: 100%; display: block; }
.rec2__timer { text-align: center; font-size: 5cqh; font-weight: 400; letter-spacing: .05em; margin-top: 3cqh; font-variant-numeric: tabular-nums; }
.rec2__stop { margin: 2.4cqh auto 0; width: 7cqh; height: 7cqh; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); display: grid; place-items: center; }
.rec2__stop span { width: 2.8cqh; height: 2.8cqh; border-radius: .6cqh; background: #ff3b30; }
.rec2__notes { margin-top: 3cqh; padding-top: 2cqh; border-top: 1px solid var(--line); }
.rec2__notes b { font-size: 1.4cqh; letter-spacing: .25em; color: var(--ink-soft); }
.rec2__notes p { font-size: 1.7cqh; color: var(--ink-faint); margin-top: 1cqh; line-height: 1.4; }
.rec2__btn { display: flex; align-items: center; justify-content: center; gap: 1.4cqh; font-size: 2.1cqh; font-weight: 500;
  padding: 2cqh; border-radius: 99px; background: rgba(34,33,38,.9); border: 1px solid rgba(255,255,255,.08); margin-top: 2.4cqh; }
.rec2__btn--take { background: rgba(46,45,52,.95); width: 86%; align-self: flex-start;
  opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease) .5s, transform .5s var(--ease) .5s; }
.is-live .rec2__btn--take { opacity: 1; transform: none; }

/* ============================================================
   SCENE 6 · key / bpm
   ============================================================ */
.app--key { padding: 0 !important; position: relative; }
.key__dim { padding: 2cqh 6% 0; opacity: .5; }
.key__dim .player__top { display: flex; align-items: center; justify-content: space-between; }
.key__dim .player__top svg { width: 2.2cqh; height: 2.2cqh; color: var(--ink-soft); }
.key__dim .player__status { display: flex; align-items: center; gap: 1cqh; font-size: 1.5cqh; letter-spacing: .2em; color: var(--ink-soft); }
.key__dim .dot-live { width: .9cqh; height: .9cqh; border-radius: 50%; background: var(--live); }
.vinyl--sm { width: 40%; margin: 3cqh auto 0; aspect-ratio: 1; }
.key__sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 72%;
  background: #0c0c0e; border-radius: 3cqh 3cqh 0 0; padding: 1.4cqh 6% 0;
  box-shadow: 0 -2cqh 5cqh -2cqh rgba(0,0,0,.8); display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform .6s var(--ease) .25s; }
.is-live .key__sheet { transform: translateY(0); }
.key__grab { width: 5cqh; height: .5cqh; border-radius: 99px; background: rgba(255,255,255,.18); margin: 0 auto 2cqh; }
.key__head { display: flex; justify-content: space-between; align-items: baseline; }
.key__head b { font-size: 2.4cqh; font-weight: 600; }
.key__head span { font-size: 1.8cqh; color: var(--ink-soft); }
.key__label { font-size: 1.3cqh; letter-spacing: .3em; color: var(--ink-faint); margin: .6cqh 0 1.4cqh; }
.key__auto { display: flex; align-items: center; gap: 1.6cqh; background: rgba(28,27,32,.9); border: 1px solid rgba(255,255,255,.06);
  border-radius: 1.6cqh; padding: 1.8cqh; }
.key__auto .pc-ico { width: 2.6cqh; height: 2.6cqh; }
.key__auto b { font-size: 1.9cqh; font-weight: 500; }
.key__auto small { display: block; font-size: 1.4cqh; color: var(--ink-faint); margin-top: .3cqh; }
.key__group { font-size: 1.3cqh; letter-spacing: .3em; color: var(--ink-faint); margin: 2cqh 0 1.2cqh; }
.key__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1cqh; }
.key__grid span { text-align: center; font-size: 1.9cqh; padding: 1.5cqh 0; border-radius: 1.2cqh; background: rgba(20,20,24,.9); border: 1px solid rgba(255,255,255,.05); color: var(--ink); }
.key__grid .key--on { background: #f1f1f1; color: #0a0a0b; font-weight: 600; transition: background .4s var(--ease); }

/* ============================================================
   SCENE 7 · share teaser
   ============================================================ */
.app--teaser { color: var(--ink); }
.tz__top { display: flex; justify-content: space-between; align-items: flex-start; }
.tz__top b { font-size: 2.2cqh; font-weight: 600; }
.tz__top small { display: block; font-size: 1.5cqh; color: var(--ink-faint); margin-top: .3cqh; }
.tz__top span { font-size: 1.8cqh; color: var(--ink-soft); }
.tz__card { position: relative; margin: 2.4cqh 0; aspect-ratio: 1; border-radius: 2cqh; padding: 3cqh; overflow: hidden;
  background: linear-gradient(160deg, #ff7da6 0%, #f0507f 42%, #8e2447 100%); display: flex; flex-direction: column;
  box-shadow: 0 2cqh 5cqh -2cqh rgba(0,0,0,.6); }
.tz__title { font-size: 4cqh; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.tz__wave { margin: auto 0; height: 11cqh; display: block; }
.tz__play { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  width: 8cqh; height: 8cqh; border-radius: 50%; background: rgba(255,255,255,.22); backdrop-filter: blur(2px);
  display: grid; place-items: center; }
.tz__play svg { width: 3.4cqh; height: 3.4cqh; margin-left: .4cqh; }
.tz__by { display: flex; align-items: center; gap: 1cqh; font-size: 1.6cqh; font-weight: 500; color: #fff; }
.tz__mk { width: 2.6cqh; color: #fff; }
.tz__mk svg { width: 100%; height: auto; display: block; }
.tz__opts { display: flex; gap: 1.2cqh; justify-content: center; }
.tz__opts span { font-size: 1.6cqh; padding: 1cqh 2cqh; border-radius: 99px; background: rgba(28,27,32,.9); border: 1px solid rgba(255,255,255,.08); color: var(--ink-soft); }
.tz__opts .tz--on { color: var(--ink); }
.tz__trimrow { display: flex; justify-content: space-between; font-size: 1.4cqh; color: var(--ink-faint); margin: 2.4cqh 0 1cqh; letter-spacing: .1em; }
.tz__trim { height: 5cqh; border-radius: 1cqh; position: relative;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 .3cqh, transparent .3cqh 1.1cqh); }
.tz__trimsel { position: absolute; left: 4%; top: -8%; height: 116%; width: 16%; border-radius: 1cqh; border: 2px solid #fff;
  background: repeating-linear-gradient(90deg, rgba(255,80,90,.6) 0 .3cqh, transparent .3cqh 1cqh); }
.tz__share { margin-top: auto; text-align: center; font-size: 2.1cqh; font-weight: 600; color: #0a0a0b; background: #f1f1f1; border-radius: 99px; padding: 2cqh; }
.social-pop { position: absolute; width: 9cqh; height: 9cqh; border-radius: 2.4cqh; overflow: hidden; box-shadow: 0 1.5cqh 3cqh -1cqh rgba(0,0,0,.6);
  opacity: 0; transform: scale(.4); transition: opacity .5s var(--ease), transform .55s cubic-bezier(.34,1.56,.64,1); }
.social-pop svg { width: 100%; height: 100%; display: block; }
.social-pop--wa { left: -3%; top: 30%; }
.social-pop--ig { right: -3%; top: 52%; }
.scene--feature.is-live .social-pop--wa { opacity: 1; transform: none; transition-delay: .7s; }
.scene--feature.is-live .social-pop--ig { opacity: 1; transform: none; transition-delay: 1s; }
.tz__dot { display: inline-block; width: 1.6cqh; height: 1.6cqh; border-radius: 50%; background: #f0507f; vertical-align: -0.2cqh; margin-right: .4cqh; }

/* record: lyrics shown in the Notes area while a take runs */
.rec2__lyrics { font-size: 1.8cqh; color: var(--ink-soft); margin-top: 1.2cqh; line-height: 1.55; }

/* ============================================================
   WRITE screen (lyrics + keyboard)
   ============================================================ */
.app--write2 { color: var(--ink); padding-bottom: 0 !important; }
.w2__top { display: flex; align-items: flex-start; justify-content: space-between; }
.w2__title b { font-size: 2.4cqh; font-weight: 600; letter-spacing: -0.01em; }
.w2__title small { display: block; font-size: 1.3cqh; letter-spacing: .3em; color: var(--ink-faint); margin-top: .4cqh; }
.w2__done { font-size: 1.9cqh; color: var(--ink-soft); }
.w2__rule { height: 1px; background: var(--line); margin: 1.6cqh 0; }
.w2__mini { display: flex; align-items: center; gap: 1.6cqh; }
.w2__pause svg { width: 2cqh; height: 2cqh; color: var(--ink); display: block; }
.w2__bar { flex: 1; height: .4cqh; border-radius: 99px; background: rgba(255,255,255,.14); position: relative; }
.w2__bar i { position: absolute; left: 0; top: 0; height: 100%; width: 33%; border-radius: 99px; background: #fff; }
.w2__time { font-size: 1.5cqh; color: var(--ink-soft); }
.w2__body { position: relative; flex: 1; margin-top: 2.4cqh; min-height: 0; }
.w2__placeholder { position: absolute; inset: 0; font-size: 1.95cqh; color: var(--ink-faint); transition: opacity .3s var(--ease); }
.w2__placeholder.is-hidden { opacity: 0; }
.w2__text { font-size: 1.95cqh; line-height: 1.6; color: var(--ink); white-space: pre-line; }
.w2__cursor { display: inline-block; width: .25cqh; height: 1em; background: var(--live); vertical-align: -.18em; margin-left: .2cqh; animation: blink 1.1s step-end infinite; }
/* iOS-style keyboard */
.w2__kb { margin: 0 -6% 0; padding: 1.2cqh 1.6cqh 2cqh; background: #1c1c1e; display: flex; flex-direction: column; gap: 1cqh; border-radius: 1.4cqh 1.4cqh 0 0; }
.kb__row { display: flex; gap: .8cqh; justify-content: center; }
.kb__row--mid { padding: 0 4%; }
.kb__row b { flex: 1; text-align: center; font-weight: 400; font-size: 1.9cqh; color: var(--ink); background: #3a3a3c; border-radius: .8cqh; padding: 1.4cqh 0; box-shadow: 0 1px 0 rgba(0,0,0,.4); }
.kb__fn { background: #2a2a2c !important; color: var(--ink-soft) !important; flex: 1.3 !important; font-size: 1.6cqh !important; }
.kb__row--last b { flex: 1.4; }
.kb__space { flex: 5 !important; color: var(--ink-faint) !important; font-size: 1.5cqh !important; }
.kb__ret { flex: 2 !important; }
.kb__num { }

/* ============================================================
   SCENE 8 · social proof
   ============================================================ */
.social { text-align: center; max-width: 80%; }
.social__stars { font-size: 4cqw; letter-spacing: .35cqw; color: #ffce4d; opacity: 0; transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease); }
.social__quote { font-size: 5.4cqw; font-weight: 500; letter-spacing: -0.035em; line-height: 1.1; color: var(--ink); margin-top: 3cqh;
  opacity: 0; transform: translateY(14px); transition: opacity .65s var(--ease) .25s, transform .65s var(--ease) .25s; }
.social__who { font-size: 2.4cqw; color: var(--ink-faint); margin-top: 2.4cqh; letter-spacing: -0.01em;
  opacity: 0; transition: opacity .6s var(--ease) .55s; }
.scene--social.is-live .social__stars { opacity: 1; transform: none; }
.scene--social.is-live .social__quote { opacity: 1; transform: none; }
.scene--social.is-live .social__who { opacity: 1; }

/* ============================================================
   SCENE 9 · close / CTA
   ============================================================ */
.scene--close .close__mark { width: 13cqw; color: var(--ink); opacity: 0; transform: scale(.7);
  transition: opacity .6s var(--ease), transform .7s var(--ease); }
.scene--close .close__mark svg { width: 100%; height: auto; display: block; }
.close__tag { font-size: 5.6cqw; font-weight: 500; letter-spacing: -0.04em; color: var(--ink); margin-top: 3cqh; opacity: 0; transform: translateY(10px);
  transition: opacity .6s var(--ease) .25s, transform .6s var(--ease) .25s; }
.close__store { margin-top: 3.6cqh; opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease) .5s, transform .6s var(--ease) .5s; }
.close__free { font-size: 2cqw; color: var(--ink-faint); margin-top: 2cqh; opacity: 0; transition: opacity .6s var(--ease) .7s; }
.scene--close.is-live .close__mark { opacity: 1; transform: none; }
.scene--close.is-live .close__tag { opacity: 1; transform: none; }
.scene--close.is-live .close__store { opacity: 1; transform: none; }
.scene--close.is-live .close__free { opacity: 1; }

/* ============================================================
   POSTER / REPLAY / PROGRESS
   ============================================================ */
.poster {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqh;
  background: #0a0a0b;
  transition: opacity .5s var(--ease), visibility .5s var(--ease);
}
.poster.is-hidden { opacity: 0; visibility: hidden; }
.poster__mark { width: 11cqw; color: var(--ink); }
.poster__mark svg { width: 100%; height: auto; display: block; }
/* The whole poster is the play target (video.js); the button is the visible
   affordance. Sizes have floors so on a phone — where the 16:9 frame is only
   ~200px tall and 2.4cqh would be under 5px — it is still a real 48px button. */
.poster { cursor: pointer; }
.poster__play {
  display: inline-flex; align-items: center; justify-content: center; gap: max(8px, 1.2cqh); cursor: pointer;
  font-family: var(--font); font-size: max(15px, 2.4cqh); font-weight: 500; color: #0a0a0b;
  background: var(--ink); border: none; border-radius: 99px; padding: max(12px, 1.6cqh) max(22px, 3cqh);
  min-height: 48px; min-width: 48px; line-height: 1.1;
  transition: transform .2s var(--ease), background .2s;
}
.poster__play svg { width: max(18px, 2.4cqh); height: max(18px, 2.4cqh); flex: none; }
.poster__play:focus-visible, .replay:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.poster__play:hover { transform: scale(1.04); background: #fff; }

.replay {
  position: absolute; right: 2.5cqh; bottom: 3.4cqh; z-index: 20;
  display: none; align-items: center; gap: .8cqh; cursor: pointer;
  font-family: var(--font); font-size: max(14px, 1.9cqh); color: var(--ink); min-height: 44px;
  background: rgba(20,20,24,.7); border: 1px solid rgba(255,255,255,.14); border-radius: 99px; padding: max(8px, 1.1cqh) max(14px, 1.8cqh);
  backdrop-filter: blur(8px); opacity: 0; transition: opacity .4s var(--ease);
}
.replay svg { width: max(16px, 2cqh); height: max(16px, 2cqh); }
.film.is-ended .replay { display: inline-flex; opacity: 1; }

.film__progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.08); z-index: 20; opacity: 0; transition: opacity .3s; }
.film.is-playing .film__progress, .film.is-ended .film__progress { opacity: 1; }
.film__progress span { display: block; height: 100%; width: 0; background: var(--ink); }

/* ============================================================
   SUBTLE PER-SCREEN MOTION (only while the scene is live)
   ============================================================ */
/* player: the record slowly turns + the live dot breathes */
.scene--feature.is-live .app--player .vinyl { animation: vspin 11s linear infinite; }
@keyframes vspin { to { transform: rotate(360deg); } }
.scene--feature.is-live .dot-live { animation: dotbreath 1.7s ease-in-out infinite; }
@keyframes dotbreath { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* record: the red dot pulses + the waveform gently breathes */
.scene--feature.is-live .rec2__live i { animation: dotbreath 1.1s ease-in-out infinite; }
.scene--feature.is-live .rec2__wave { animation: wavebreath 2.6s ease-in-out infinite; transform-origin: center; }
@keyframes wavebreath { 0%,100% { transform: scaleY(.92); opacity: .9; } 50% { transform: scaleY(1.06); opacity: 1; } }
/* write: the mini-player progress drifts forward */
.scene--feature.is-live .w2__bar i { animation: barcreep 6s linear forwards; }
@keyframes barcreep { from { width: 33%; } to { width: 52%; } }
/* teaser: the play button gives a soft pulse */
.scene--feature.is-live .tz__play { animation: playpulse 2s ease-in-out infinite; }
@keyframes playpulse { 0%,100% { transform: translate(-50%,-50%) scale(1); } 50% { transform: translate(-50%,-50%) scale(1.09); } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 760px) {
  .film { border-radius: 16px; }
  .vp { padding: 24px 0 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .fluid__blob, .scene--feature.is-live .vinyl, .scene--feature.is-live .dot-live,
  .scene--feature.is-live .rec2__live i, .scene--feature.is-live .rec2__wave,
  .scene--feature.is-live .w2__bar i, .scene--feature.is-live .tz__play { animation: none !important; }
}