@justai/cuts 0.138.0 → 0.140.0

package/src/Preroll.astro

@@ -135,216 +135,212 @@ const safeId = "game-" + (id.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/
 </div>
 
 <style>
-  /* Scoped by Astro's hash AND placed in the cascade: a persona overriding this never has to
-     out-specify it. See @justai/ui/tokens.css for the order, and for what deliberately stays out. */
-  @layer justai.components {
-    /* ── THE COMPOSITION RESPONDS TO ITS OWN BOX, NOT TO THE WINDOW ──────────────────────────────
-     *
-     * queries: preroll responsive · the preroll is cramped · container query · cqw · dynamic preroll ·
-     *          the game kernel size changes with the device
-     *
-     * The founder, and it is the constraint the whole layout is built on: *"preroll dynamic bir design.
-     * kullanıcının kullandığı device'a göre game kernel layout'un size'ı değişebilir."*
-     *
-     * So every measurement below is in CONTAINER units. A media query would ask the window how wide it
-     * is — and the window is not what this cut lives in: the same viewport gives a 448px frame on a
-     * phone and a 638px one inside the desktop column, and a landscape phone gives a frame that is
-     * wide and 300px tall. Asking the window produces a composition that is right on one of those.
-     *
-     * `cqw`/`cqh` with a rem floor and ceiling, never a bare px: `clamp(1.75rem, 12cqw, 4rem)` scales
-     * with the box AND keeps iOS Dynamic Type moving the bounds, which the fleet's typography law
-     * requires. A pure `cqw` size ignores the reader's own setting entirely. */
-    .pr {
-      position: relative; flex: 1; min-height: 240px; display: flex; flex-direction: column;
-      border-radius: var(--preroll-radius, var(--radius-lg)); overflow: hidden;
-      container-type: size;
-      container-name: pr;
-    }
-    .pr-stage { flex: 1; min-height: 0; }
-    .pr-stage :global(iframe) { display: block; width: 100%; height: 100%; border: 0; }
+  /* ── THE COMPOSITION RESPONDS TO ITS OWN BOX, NOT TO THE WINDOW ──────────────────────────────
+   *
+   * queries: preroll responsive · the preroll is cramped · container query · cqw · dynamic preroll ·
+   *          the game kernel size changes with the device
+   *
+   * The founder, and it is the constraint the whole layout is built on: *"preroll dynamic bir design.
+   * kullanıcının kullandığı device'a göre game kernel layout'un size'ı değişebilir."*
+   *
+   * So every measurement below is in CONTAINER units. A media query would ask the window how wide it
+   * is — and the window is not what this cut lives in: the same viewport gives a 448px frame on a
+   * phone and a 638px one inside the desktop column, and a landscape phone gives a frame that is
+   * wide and 300px tall. Asking the window produces a composition that is right on one of those.
+   *
+   * `cqw`/`cqh` with a rem floor and ceiling, never a bare px: `clamp(1.75rem, 12cqw, 4rem)` scales
+   * with the box AND keeps iOS Dynamic Type moving the bounds, which the fleet's typography law
+   * requires. A pure `cqw` size ignores the reader's own setting entirely. */
+  .pr {
+    position: relative; flex: 1; min-height: 240px; display: flex; flex-direction: column;
+    border-radius: var(--preroll-radius, var(--radius-lg)); overflow: hidden;
+    container-type: size;
+    container-name: pr;
+  }
+  .pr-stage { flex: 1; min-height: 0; }
+  .pr-stage :global(iframe) { display: block; width: 100%; height: 100%; border: 0; }
 
-    /* ── THE GROUND IS THE CARD'S ────────────────────────────────────────────────────────────────
-     * queries: why is the preroll dark · preroll background · the glow · the dot lattice
+  /* ── THE GROUND IS THE CARD'S ────────────────────────────────────────────────────────────────
+   * queries: why is the preroll dark · preroll background · the glow · the dot lattice
+   *
+   * The same three layers `builder/card` paints, in the same order: a near-black field, a wide soft
+   * bloom of the persona's accent off the top-left with a cooler counter-glow top-right so the field
+   * never reads flat, and a barely-there dot lattice. It is dark on every persona, including the ones
+   * whose page is light — a game is a room you go into, and the card the ecosystem already prints for
+   * this persona is dark. The accent is the persona's, so the fleet stays various without being loud.
+   *
+   * OPAQUE, and not `--surface`: this covers a game that is drawing itself underneath. */
+  /* ── A GRID, NOT A COLUMN OF FLEX ────────────────────────────────────────────────────────────
+   * queries: the play button is in the wrong place · landscape preroll · the composition breaks on
+   *          a wide box · grid-template-areas
+   *
+   * The four parts have to REGROUP, not just re-order: in a tall box they stack, and in a wide one
+   * the copy and the button become one column with the art beside them. Written as a flex row that
+   * was measured on a landscape phone, the button became a third column and floated off to the
+   * top-right on its own — flex can reorder siblings but it cannot make two of them share a column.
+   * Named areas can, and the two layouts are then two grids rather than a pile of overrides. */
+  .pr-door {
+    position: absolute; inset: 0; z-index: 1;
+    display: grid;
+    grid-template-columns: 1fr;
+    /* ── THE ART TAKES THE TOP HALF; THE COPY BEGINS ON THE CENTRE LINE ────────────────────────
+     * queries: preroll composition · where does the copy start · the play button is too low ·
+     *          the button is under the browser bar · centre line · x-ray grid
      *
-     * The same three layers `builder/card` paints, in the same order: a near-black field, a wide soft
-     * bloom of the persona's accent off the top-left with a cooler counter-glow top-right so the field
-     * never reads flat, and a barely-there dot lattice. It is dark on every persona, including the ones
-     * whose page is light — a game is a room you go into, and the card the ecosystem already prints for
-     * this persona is dark. The accent is the persona's, so the fleet stays various without being loud.
+     * The founder, describing it through the x-ray's own grid — which is what that instrument was
+     * for: *"logo 1. satırın 2. cell'inde ortada olsa daha iyi olur… içerik de 2. satırın top'undan
+     * başlasa daha iyi olur."*
      *
-     * OPAQUE, and not `--surface`: this covers a game that is drawing itself underneath. */
-    /* ── A GRID, NOT A COLUMN OF FLEX ────────────────────────────────────────────────────────────
-     * queries: the play button is in the wrong place · landscape preroll · the composition breaks on
-     *          a wide box · grid-template-areas
+     * `50%` on the first row is exact rather than approximate: the door's padding is equal top and
+     * bottom, so half of its content box IS the frame's centre — the same line the x-ray draws. The
+     * art centres in the half above it and the copy starts on it.
      *
-     * The four parts have to REGROUP, not just re-order: in a tall box they stack, and in a wide one
-     * the copy and the button become one column with the art beside them. Written as a flex row that
-     * was measured on a landscape phone, the button became a third column and floated off to the
-     * top-right on its own — flex can reorder siblings but it cannot make two of them share a column.
-     * Named areas can, and the two layouts are then two grids rather than a pile of overrides. */
-    .pr-door {
-      position: absolute; inset: 0; z-index: 1;
-      display: grid;
-      grid-template-columns: 1fr;
-      /* ── THE ART TAKES THE TOP HALF; THE COPY BEGINS ON THE CENTRE LINE ────────────────────────
-       * queries: preroll composition · where does the copy start · the play button is too low ·
-       *          the button is under the browser bar · centre line · x-ray grid
-       *
-       * The founder, describing it through the x-ray's own grid — which is what that instrument was
-       * for: *"logo 1. satırın 2. cell'inde ortada olsa daha iyi olur… içerik de 2. satırın top'undan
-       * başlasa daha iyi olur."*
-       *
-       * `50%` on the first row is exact rather than approximate: the door's padding is equal top and
-       * bottom, so half of its content box IS the frame's centre — the same line the x-ray draws. The
-       * art centres in the half above it and the copy starts on it.
-       *
-       * AND IT IS WHY THE BUTTON IS SAFE ON A REAL PHONE. The last row takes the slack, so the button
-       * sits directly under the copy instead of at the bottom of the frame — which on a real device is
-       * where the browser puts its own bar. He sent a screenshot from one: the URL bar sitting over the
-       * play button, and a strip of the next section showing beneath it. A composition that ends at the
-       * frame's bottom edge is a composition whose call to action a phone can cover. */
-      grid-template-rows: 50% auto auto minmax(0, 1fr);
-      grid-template-areas: "art" "copy" "play" "imprint";
-      padding: clamp(18px, 7cqw, 64px);
-      /* And the strip the OS keeps for its home indicator, on top of the inset — never instead of it. */
-      padding-block-end: calc(clamp(18px, 7cqw, 64px) + env(safe-area-inset-bottom, 0px));
-      background:
-        radial-gradient(90cqw 52cqh at 8% -12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
-        radial-gradient(76cqw 46cqh at 96% 4%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
-        radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 24px 24px,
-        #080b12;
-      color: #f5f7fa;
-    }
-    .pr-door[hidden] { display: none; }
+     * AND IT IS WHY THE BUTTON IS SAFE ON A REAL PHONE. The last row takes the slack, so the button
+     * sits directly under the copy instead of at the bottom of the frame — which on a real device is
+     * where the browser puts its own bar. He sent a screenshot from one: the URL bar sitting over the
+     * play button, and a strip of the next section showing beneath it. A composition that ends at the
+     * frame's bottom edge is a composition whose call to action a phone can cover. */
+    grid-template-rows: 50% auto auto minmax(0, 1fr);
+    grid-template-areas: "art" "copy" "play" "imprint";
+    padding: clamp(18px, 7cqw, 64px);
+    /* And the strip the OS keeps for its home indicator, on top of the inset — never instead of it. */
+    padding-block-end: calc(clamp(18px, 7cqw, 64px) + env(safe-area-inset-bottom, 0px));
+    background:
+      radial-gradient(90cqw 52cqh at 8% -12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
+      radial-gradient(76cqw 46cqh at 96% 4%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%),
+      radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px) 0 0 / 24px 24px,
+      #080b12;
+    color: #f5f7fa;
+  }
+  .pr-door[hidden] { display: none; }
 
-    /* THE ART TAKES THE TOP AND SITS TO THE RIGHT, which is the card's own diagonal stood up: art one
-       side, type the other. Everything centred is the safe composition and it is the one that reads as
-       a placeholder — the card is left-aligned and that is this family's voice. */
-    /* CENTRED, not pushed to the edge. The first version put the mark hard right to echo the card's
-       diagonal — and the card is a landscape rectangle where that diagonal has room to be one. Stood up
-       in a tall frame it stops reading as a composition and starts reading as a thing that drifted. */
-    .pr-art {
-      grid-area: art; min-height: 0;
-      display: flex; align-items: center; justify-content: center;
-    }
-    .pr-art :global(svg), .pr-art :global(img) {
-      display: block; width: auto; height: auto;
-      max-width: clamp(96px, 40cqw, 300px);
-      max-height: clamp(96px, 34cqh, 300px);
-    }
+  /* THE ART TAKES THE TOP AND SITS TO THE RIGHT, which is the card's own diagonal stood up: art one
+     side, type the other. Everything centred is the safe composition and it is the one that reads as
+     a placeholder — the card is left-aligned and that is this family's voice. */
+  /* CENTRED, not pushed to the edge. The first version put the mark hard right to echo the card's
+     diagonal — and the card is a landscape rectangle where that diagonal has room to be one. Stood up
+     in a tall frame it stops reading as a composition and starts reading as a thing that drifted. */
+  .pr-art {
+    grid-area: art; min-height: 0;
+    display: flex; align-items: center; justify-content: center;
+  }
+  .pr-art :global(svg), .pr-art :global(img) {
+    display: block; width: auto; height: auto;
+    max-width: clamp(96px, 40cqw, 300px);
+    max-height: clamp(96px, 34cqh, 300px);
+  }
 
-    .pr-copy { grid-area: copy; min-width: 0; }
-    .pr-kicker {
-      display: flex; align-items: center; gap: 0.55em; margin: 0 0 clamp(10px, 2.4cqh, 26px);
-      font-size: clamp(0.75rem, 3.1cqw, 1.05rem); font-weight: 600; color: #8b949e; letter-spacing: 0.01em;
-    }
-    .pr-kicker i { width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--accent); flex: none; }
-    .pr-kicker span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .pr-copy { grid-area: copy; min-width: 0; }
+  .pr-kicker {
+    display: flex; align-items: center; gap: 0.55em; margin: 0 0 clamp(10px, 2.4cqh, 26px);
+    font-size: clamp(0.75rem, 3.1cqw, 1.05rem); font-weight: 600; color: #8b949e; letter-spacing: 0.01em;
+  }
+  .pr-kicker i { width: 0.62em; height: 0.62em; border-radius: 50%; background: var(--accent); flex: none; }
+  .pr-kicker span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 
-    .pr-name {
-      margin: 0 0 clamp(6px, 1.6cqh, 18px);
-      font-size: clamp(1.75rem, 13cqw, 4.25rem); font-weight: 700;
-      letter-spacing: -0.033em; line-height: 0.98;
-    }
-    .pr-tag {
-      margin: 0 0 clamp(6px, 1.4cqh, 16px);
-      font-size: clamp(1rem, 5.2cqw, 1.9rem); font-weight: 700; color: var(--accent);
-      letter-spacing: -0.012em; line-height: 1.18;
-    }
-    /* The card writes its second phrase in ink rather than accent, inside the copy itself. Globalised
-       because it arrives through `set:html` and carries no scope attribute — the lesson the home mark
-       taught this package the hard way. */
-    .pr-tag :global(span) { color: #f5f7fa; }
-    .pr-sub {
-      margin: 0; font-size: clamp(0.8125rem, 3.4cqw, 1.15rem); font-weight: 500; color: #8b949e;
-      letter-spacing: -0.004em;
-    }
+  .pr-name {
+    margin: 0 0 clamp(6px, 1.6cqh, 18px);
+    font-size: clamp(1.75rem, 13cqw, 4.25rem); font-weight: 700;
+    letter-spacing: -0.033em; line-height: 0.98;
+  }
+  .pr-tag {
+    margin: 0 0 clamp(6px, 1.4cqh, 16px);
+    font-size: clamp(1rem, 5.2cqw, 1.9rem); font-weight: 700; color: var(--accent);
+    letter-spacing: -0.012em; line-height: 1.18;
+  }
+  /* The card writes its second phrase in ink rather than accent, inside the copy itself. Globalised
+     because it arrives through `set:html` and carries no scope attribute — the lesson the home mark
+     taught this package the hard way. */
+  .pr-tag :global(span) { color: #f5f7fa; }
+  .pr-sub {
+    margin: 0; font-size: clamp(0.8125rem, 3.4cqw, 1.15rem); font-weight: 500; color: #8b949e;
+    letter-spacing: -0.004em;
+  }
 
-    /* ── THE BUTTON, AND IT IS ALSO THE PROGRESS ─────────────────────────────────────────────────
-     * queries: preroll progress · the loading bar · where does progress show · the button fills
-     *
-     * One element does both jobs, in one place. `.pr-fill` is a layer inside the button that grows
-     * from the left; the label sits above it and changes word. A player who presses a button and
-     * watches that same button work is never asked where their press went. */
-    .pr-play {
-      grid-area: play; justify-self: stretch;
-      position: relative; overflow: hidden; isolation: isolate;
-      margin-top: clamp(16px, 3.6cqh, 40px);
-      font: inherit; font-weight: 650; font-size: clamp(0.9375rem, 4cqw, 1.35rem);
-      padding: clamp(12px, 2.4cqh, 22px) clamp(20px, 6cqw, 40px);
-      border: 0; border-radius: var(--radius-pill);
-      background: var(--accent); color: var(--accent-on); cursor: pointer;
-      transition: transform 0.18s var(--ease-spring), opacity 0.2s;
-    }
-    .pr-play:active { transform: scale(0.97); }
-    .pr-play[data-busy] { cursor: default; }
-    .pr-play[data-busy]:active { transform: none; }
-    .pr-play span { position: relative; z-index: 1; }
-    .pr-fill {
-      position: absolute; inset: 0 auto 0 0; z-index: 0; width: 0;
-      background: color-mix(in srgb, #ffffff 26%, transparent);
-      transition: width 0.3s var(--ease-out);
-    }
-    /* A game that reports nothing gets a sweep rather than a number — honest about not knowing. A bar
-       that moves without measuring anything teaches a player that the number means nothing. */
-    .pr-play[data-busy][data-indeterminate] .pr-fill {
-      width: 42%; animation: pr-sweep 1.15s var(--ease-out) infinite;
-    }
-    @keyframes pr-sweep { from { transform: translateX(-110%); } to { transform: translateX(250%); } }
+  /* ── THE BUTTON, AND IT IS ALSO THE PROGRESS ─────────────────────────────────────────────────
+   * queries: preroll progress · the loading bar · where does progress show · the button fills
+   *
+   * One element does both jobs, in one place. `.pr-fill` is a layer inside the button that grows
+   * from the left; the label sits above it and changes word. A player who presses a button and
+   * watches that same button work is never asked where their press went. */
+  .pr-play {
+    grid-area: play; justify-self: stretch;
+    position: relative; overflow: hidden; isolation: isolate;
+    margin-top: clamp(16px, 3.6cqh, 40px);
+    font: inherit; font-weight: 650; font-size: clamp(0.9375rem, 4cqw, 1.35rem);
+    padding: clamp(12px, 2.4cqh, 22px) clamp(20px, 6cqw, 40px);
+    border: 0; border-radius: var(--radius-pill);
+    background: var(--accent); color: var(--accent-on); cursor: pointer;
+    transition: transform 0.18s var(--ease-spring), opacity 0.2s;
+  }
+  .pr-play:active { transform: scale(0.97); }
+  .pr-play[data-busy] { cursor: default; }
+  .pr-play[data-busy]:active { transform: none; }
+  .pr-play span { position: relative; z-index: 1; }
+  .pr-fill {
+    position: absolute; inset: 0 auto 0 0; z-index: 0; width: 0;
+    background: color-mix(in srgb, #ffffff 26%, transparent);
+    transition: width 0.3s var(--ease-out);
+  }
+  /* A game that reports nothing gets a sweep rather than a number — honest about not knowing. A bar
+     that moves without measuring anything teaches a player that the number means nothing. */
+  .pr-play[data-busy][data-indeterminate] .pr-fill {
+    width: 42%; animation: pr-sweep 1.15s var(--ease-out) infinite;
+  }
+  @keyframes pr-sweep { from { transform: translateX(-110%); } to { transform: translateX(250%); } }
 
-    .pr-imprint:empty { display: none; }
-    .pr-imprint { grid-area: imprint; margin-top: clamp(10px, 2cqh, 22px); }
+  .pr-imprint:empty { display: none; }
+  .pr-imprint { grid-area: imprint; margin-top: clamp(10px, 2cqh, 22px); }
 
-    /* ── WIDE AND SHORT: THE CARD'S OWN LAYOUT ───────────────────────────────────────────────────
-     * A landscape phone, or a desktop column turned wide, gives a box the vertical stack cannot fill
-     * without floating everything in the middle. At that shape the composition becomes the card it
-     * came from: type on the left, art on the right, the button under the type. */
-    @container pr (min-aspect-ratio: 1/1) and (min-width: 460px) {
-      /* The card's own shape: copy and button stacked on the left, art beside them, the whole block
-         centred in the box rather than pinned to its top. */
-      .pr-door {
-        grid-template-columns: 1fr auto;
-        grid-template-rows: auto auto auto;
-        grid-template-areas: "copy art" "play art" "imprint art";
-        align-content: center;
-        column-gap: clamp(24px, 5cqw, 72px);
-      }
-      .pr-art { justify-content: center; }
-      .pr-play { justify-self: start; }
-      .pr-name { font-size: clamp(1.75rem, 7cqw, 4.25rem); }
-      .pr-tag { font-size: clamp(1rem, 2.9cqw, 1.9rem); }
-      .pr-sub { font-size: clamp(0.8125rem, 1.9cqw, 1.15rem); }
-      .pr-kicker { font-size: clamp(0.75rem, 1.7cqw, 1.05rem); }
-      .pr-play { font-size: clamp(0.9375rem, 2.2cqw, 1.35rem); padding: clamp(12px, 2.2cqh, 22px) clamp(24px, 3.4cqw, 44px); }
-    }
-    /* A genuinely short box — a landscape phone gives about 312px — drops the third line rather than
-       crushing the type, and shrinks the art rather than removing it. Hiding the mark was the first
-       attempt and it left the persona anonymous in exactly the orientation somebody plays a game in. */
-    @container pr (max-height: 380px) {
-      .pr-sub { display: none; }
-      .pr-art :global(svg), .pr-art :global(img) { max-width: 22cqw; max-height: 46cqh; }
-      .pr-play { margin-top: clamp(10px, 2cqh, 18px); }
+  /* ── WIDE AND SHORT: THE CARD'S OWN LAYOUT ───────────────────────────────────────────────────
+   * A landscape phone, or a desktop column turned wide, gives a box the vertical stack cannot fill
+   * without floating everything in the middle. At that shape the composition becomes the card it
+   * came from: type on the left, art on the right, the button under the type. */
+  @container pr (min-aspect-ratio: 1/1) and (min-width: 460px) {
+    /* The card's own shape: copy and button stacked on the left, art beside them, the whole block
+       centred in the box rather than pinned to its top. */
+    .pr-door {
+      grid-template-columns: 1fr auto;
+      grid-template-rows: auto auto auto;
+      grid-template-areas: "copy art" "play art" "imprint art";
+      align-content: center;
+      column-gap: clamp(24px, 5cqw, 72px);
     }
+    .pr-art { justify-content: center; }
+    .pr-play { justify-self: start; }
+    .pr-name { font-size: clamp(1.75rem, 7cqw, 4.25rem); }
+    .pr-tag { font-size: clamp(1rem, 2.9cqw, 1.9rem); }
+    .pr-sub { font-size: clamp(0.8125rem, 1.9cqw, 1.15rem); }
+    .pr-kicker { font-size: clamp(0.75rem, 1.7cqw, 1.05rem); }
+    .pr-play { font-size: clamp(0.9375rem, 2.2cqw, 1.35rem); padding: clamp(12px, 2.2cqh, 22px) clamp(24px, 3.4cqw, 44px); }
+  }
+  /* A genuinely short box — a landscape phone gives about 312px — drops the third line rather than
+     crushing the type, and shrinks the art rather than removing it. Hiding the mark was the first
+     attempt and it left the persona anonymous in exactly the orientation somebody plays a game in. */
+  @container pr (max-height: 380px) {
+    .pr-sub { display: none; }
+    .pr-art :global(svg), .pr-art :global(img) { max-width: 22cqw; max-height: 46cqh; }
+    .pr-play { margin-top: clamp(10px, 2cqh, 18px); }
+  }
 
-    /* ── THE ENTRANCE ────────────────────────────────────────────────────────────────────────────
-     * Transform and opacity only, so nothing here changes a layout — the shell's own lesson about the
-     * toolbar's strip applies to anything that animates near a scroll spy. Four beats, ~520ms, and the
-     * button is tappable from the first frame regardless: an invitation you have to wait for is not
-     * one. */
-    @media (prefers-reduced-motion: no-preference) {
-      .pr-art, .pr-kicker, .pr-name, .pr-tag, .pr-sub, .pr-play {
-        animation: pr-rise 0.52s var(--ease-out) both;
-      }
-      .pr-kicker { animation-delay: 0.04s; }
-      .pr-name { animation-delay: 0.09s; }
-      .pr-tag { animation-delay: 0.14s; }
-      .pr-sub { animation-delay: 0.19s; }
-      .pr-play { animation-delay: 0.26s; }
-    }
-    @keyframes pr-rise {
-      from { opacity: 0; transform: translateY(10px); }
-      to { opacity: 1; transform: none; }
+  /* ── THE ENTRANCE ────────────────────────────────────────────────────────────────────────────
+   * Transform and opacity only, so nothing here changes a layout — the shell's own lesson about the
+   * toolbar's strip applies to anything that animates near a scroll spy. Four beats, ~520ms, and the
+   * button is tappable from the first frame regardless: an invitation you have to wait for is not
+   * one. */
+  @media (prefers-reduced-motion: no-preference) {
+    .pr-art, .pr-kicker, .pr-name, .pr-tag, .pr-sub, .pr-play {
+      animation: pr-rise 0.52s var(--ease-out) both;
     }
+    .pr-kicker { animation-delay: 0.04s; }
+    .pr-name { animation-delay: 0.09s; }
+    .pr-tag { animation-delay: 0.14s; }
+    .pr-sub { animation-delay: 0.19s; }
+    .pr-play { animation-delay: 0.26s; }
+  }
+  @keyframes pr-rise {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: none; }
   }
 </style>
 

package/src/Profile.astro

@@ -99,44 +99,40 @@ const vars = [
 </section>
 
 <style>
-  /* Scoped by Astro's hash AND placed in the cascade: a persona overriding this never has to
-     out-specify it. See @justai/ui/tokens.css for the order, and for what deliberately stays out. */
-  @layer justai.components {
-    /* ---- PROFILE cut ---- */
-    .profile { padding-block-end: 8px; }
-    .cover {
-      height: var(--cover-h, 132px);
-      /* full-bleed to the persona's page edge (see --edge on Toolbar) */
-      margin-inline: calc(-1 * max(var(--edge, 16px), env(safe-area-inset-left))) calc(-1 * max(var(--edge, 16px), env(safe-area-inset-right)));
-      background: var(--cover, linear-gradient(135deg, var(--accent), transparent));
-      position: relative;
-    }
-    @media (min-width: 640px) { .cover { margin-inline: -28px; } }
-    .avatar {
-      width: 76px; height: 76px; border-radius: var(--radius-lg); margin-block-start: -40px;
-      display: grid; place-items: center; padding: var(--avatar-pad, 0);
-      background: var(--avatar-bg, #fff);
-      border: 3px solid var(--bg); box-shadow: 0 8px 22px -16px rgba(0, 0, 0, 0.22);
-      position: relative;
-      /* it is an <a> now — undo the link ground, or a slotted SVG drawn in currentColor turns accent */
-      color: inherit; text-decoration: none;
-      transition: transform 0.15s var(--ease-out, ease-out);
-    }
-    /* Pressed, not hovered. The tile is the persona's FACE: growing it under the cursor would animate the
-       one object on the page that should hold still. Depressing it on press is the iOS answer — it says
-       "this responds" at the moment of contact, on touch as well, where there is no hover to say it. */
-    .avatar:active { transform: scale(0.97); }
-    .avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
-    @media (prefers-reduced-motion: reduce) { .avatar { transition: none; } }
-    /* the avatar content is slotted (persona-owned) → style it globally */
-    .avatar :global(svg) { width: 100%; height: 100%; display: block; }
-    .avatar :global(img) { width: 100%; height: 100%; display: block; object-fit: cover; }
-    @media (prefers-color-scheme: light) {
-      :global(html:not([data-theme="dark"])) .avatar { border-color: #fff; background: var(--avatar-bg-light, var(--avatar-bg, #fff)); }
-    }
-    .pname { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; margin-block-start: 12px; }
-    .handle { color: var(--text-dim); font-size: var(--fs-xs); margin-block-start: 2px; }
-    .bio { font-size: var(--fs-sm); line-height: 1.5; margin-block-start: 12px; }
-    .meta { color: var(--text-dim); font-size: var(--fs-2xs); margin-block-start: 10px; }
+  /* ---- PROFILE cut ---- */
+  .profile { padding-block-end: 8px; }
+  .cover {
+    height: var(--cover-h, 132px);
+    /* full-bleed to the persona's page edge (see --edge on Toolbar) */
+    margin-inline: calc(-1 * max(var(--edge, 16px), env(safe-area-inset-left))) calc(-1 * max(var(--edge, 16px), env(safe-area-inset-right)));
+    background: var(--cover, linear-gradient(135deg, var(--accent), transparent));
+    position: relative;
   }
+  @media (min-width: 640px) { .cover { margin-inline: -28px; } }
+  .avatar {
+    width: 76px; height: 76px; border-radius: var(--radius-lg); margin-block-start: -40px;
+    display: grid; place-items: center; padding: var(--avatar-pad, 0);
+    background: var(--avatar-bg, #fff);
+    border: 3px solid var(--bg); box-shadow: 0 8px 22px -16px rgba(0, 0, 0, 0.22);
+    position: relative;
+    /* it is an <a> now — undo the link ground, or a slotted SVG drawn in currentColor turns accent */
+    color: inherit; text-decoration: none;
+    transition: transform 0.15s var(--ease-out, ease-out);
+  }
+  /* Pressed, not hovered. The tile is the persona's FACE: growing it under the cursor would animate the
+     one object on the page that should hold still. Depressing it on press is the iOS answer — it says
+     "this responds" at the moment of contact, on touch as well, where there is no hover to say it. */
+  .avatar:active { transform: scale(0.97); }
+  .avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
+  @media (prefers-reduced-motion: reduce) { .avatar { transition: none; } }
+  /* the avatar content is slotted (persona-owned) → style it globally */
+  .avatar :global(svg) { width: 100%; height: 100%; display: block; }
+  .avatar :global(img) { width: 100%; height: 100%; display: block; object-fit: cover; }
+  @media (prefers-color-scheme: light) {
+    :global(html:not([data-theme="dark"])) .avatar { border-color: #fff; background: var(--avatar-bg-light, var(--avatar-bg, #fff)); }
+  }
+  .pname { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; margin-block-start: 12px; }
+  .handle { color: var(--text-dim); font-size: var(--fs-xs); margin-block-start: 2px; }
+  .bio { font-size: var(--fs-sm); line-height: 1.5; margin-block-start: 12px; }
+  .meta { color: var(--text-dim); font-size: var(--fs-2xs); margin-block-start: 10px; }
 </style>