/*
 * The explainer scenes (owner brief, 6 October 2026; src/web/explainer-scenes.ts draws them): seven small pictures in the hand of
 * the Clubs explainer (club-explainer.css) and the first-message note (first-note.css). Loaded only on a page that draws one, or
 * on demand by explainer-scenes.js when it clones one from a template.
 *
 *   figure   the stage (4:3, radius 18, the picture's own night behind it, at most 440 wide so it stays a picture on a desktop),
 *            one caption line, one hidden sentence. `compact` and `sheet` cut the same picture to 2:1 above a control or in a dialog.
 *   motion   every loop is about nine seconds, transform and opacity only, and runs only where the browser allows motion AND
 *            scripting is on (explainer-scenes.js adds .is-playing while the stage is on screen and the tab is shown). Reduced
 *            motion, Save-Data and no scripting keep the still frame: what the markup draws, the last beat of each story, with the
 *            few resting transforms below. The keyframes start from the night.
 *
 *   stream   0-10 night · 10-30 the first person is followed and a card slides into the river · 30-50 the second · 50-72 the Club's
 *            lamp warms, its door opens and its card joins · 72-92 the river carries them · 93-100 night
 *   ask      0-14 a question lifts over the person · 15-35 it flies to the lamp · 36-46 the lamp warms · 46-62 the answer comes back
 *            to rest where the question was · 64-80 the three chips light · 93-100 night
 *   credits  0-12 the tag sits on the post · 12-34 it travels to the window sill · 34-64 it waits (a mist ring breathes) · 64-70 the
 *            room lights and the tag with it · 93-100 night
 *   invite   0-10 the near lamp warms · 12-40 the key hops across, turning once · 40-54 the lock lights, the far lamp warms, the door
 *            opens · 56-70 the code pops in, the link draws · 93-100 night
 *   control  0-24 a mute: the sound fades and the person softens · 28-42 a block: the small door closes · 46-68 a report: the flag
 *            rises to the lamp, which warms · 76-90 the shield's quiet ring · 93-100 night
 *   looks    0-28 the dial turns to warm · 36-48 cool · 56-68 mono · 76-92 back to the pick, a check · 96-100 the dial rests
 *   alerts   0-28 a reply floats up to the bell · 30-48 the bell swings and rings, the window warms · 50-86 three noise bubbles rise
 *            and fade under a hush of mist; the bell is still · 93-100 night
 */

.pk-xs { display: grid; gap: 10px; justify-items: center; min-width: 0; margin: 0 0 18px; }
.pk-xs-stage { position: relative; width: 100%; max-width: 440px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; background: #120e30; }
.pk-xs-art { display: block; width: 100%; height: 100%; }
.pk-xs-caption { display: grid; margin: 0; padding: 0 8px; text-align: center; }
.pk-xs-line { margin: 0; color: var(--pk-ink); font-size: var(--pk-type-body); font-weight: var(--pk-weight-semibold); line-height: 1.4; }
.pk-xs-ways { display: flex; justify-content: center; gap: 14px; margin: 0; font-size: var(--pk-type-ui); line-height: 1.4; }
.pk-xs-slot:empty { display: none; }
.pk-xs--compact, .pk-xs--sheet { gap: 6px; }
.pk-xs--compact { margin: 0 0 10px; }
.pk-xs--sheet { margin: 0 0 14px; }
.pk-xs--compact .pk-xs-stage, .pk-xs--sheet .pk-xs-stage { max-width: none; aspect-ratio: 2 / 1; border-radius: 14px; }
.pk-xs--compact .pk-xs-line, .pk-xs--sheet .pk-xs-line { color: var(--pk-muted); font-size: var(--pk-type-ui); font-weight: var(--pk-weight-medium); }
/* Where a scene stands, Paint's spot illustration on the empty state (paint.css) steps aside: one picture, not two. The doubled class outweighs Paint's own rule. */
html body.pk-obsidian .pk-xs + .pk-stream-empty.pk-stream-empty::before, html body.pk-obsidian .pk-creator-empty.pk-creator-empty:has(> .pk-xs)::before { display: none; }

/* The still frame: what the markup draws, plus these resting transforms (doors that stand open, the dial on its pick, the muted person). */
.pk-xs :is(.xs-float, .xs-stream-f1, .xs-stream-f2, .xs-stream-c1, .xs-stream-c2, .xs-stream-c3, .xs-ask-q, .xs-ask-a, .xs-ask-spark, .xs-ask-c1, .xs-ask-c2, .xs-ask-c3, .xs-credits-tag, .xs-credits-ring, .xs-credits-pop, .xs-invite-key, .xs-invite-qr, .xs-control-shield, .xs-control-pulse, .xs-control-flag, .xs-looks-d1, .xs-looks-d2, .xs-looks-d3, .xs-looks-check, .xs-alerts-reply, .xs-alerts-n1, .xs-alerts-n2, .xs-alerts-n3, .xs-alerts-ring, .xs-looks-dial) { transform-box: fill-box; transform-origin: 50% 50%; }
.pk-xs :is(.xs-stream-door, .xs-invite-door1, .xs-invite-door2, .xs-control-door, .xs-invite-link) { transform-box: fill-box; transform-origin: 0 50%; }
.pk-xs .xs-alerts-bell { transform-box: fill-box; transform-origin: 50% 0; }
.pk-xs :is(.xs-stream-door, .xs-invite-door1, .xs-invite-door2) { transform: scaleX(.18); }
.pk-xs .xs-looks-dial { transform: rotate(-60deg); }
.pk-xs .xs-control-mute { opacity: .35; }

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .pk-xs-stage { --xs-play: paused; }
  .pk-xs-stage.is-playing { --xs-play: running; }

  /* Shared: the night veil, the stars, the mist. */
  .pk-xs-stage .xs-dusk { animation: pk-xs-dusk 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-float { animation: pk-xs-float 3s ease-in-out infinite; }
  .pk-xs-stage .xs-star--a { animation: pk-xs-twinkle 3s ease-in-out infinite; }
  .pk-xs-stage .xs-star--b { animation: pk-xs-twinkle 3s ease-in-out -1s infinite; }
  .pk-xs-stage .xs-star--c { animation: pk-xs-twinkle 3s ease-in-out -2s infinite; }

  .pk-xs-stage .xs-stream-p1 { animation: pk-xs-stream-p1 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-stream-p2 { animation: pk-xs-stream-p2 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-stream-f1 { animation: pk-xs-stream-f1 9s ease-out infinite both; }
  .pk-xs-stage .xs-stream-f2 { animation: pk-xs-stream-f2 9s ease-out infinite both; }
  .pk-xs-stage .xs-stream-c1 { animation: pk-xs-stream-c1 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-stream-c2 { animation: pk-xs-stream-c2 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-stream-c3 { animation: pk-xs-stream-c3 9s ease-in-out infinite both; }
  .pk-xs-stage :is(.xs-stream-lit, .xs-stream-glow) { animation: pk-xs-stream-lit 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-stream-door { animation: pk-xs-stream-door 9s ease-in-out infinite both; }

  .pk-xs-stage .xs-ask-p { animation: pk-xs-ask-p 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-ask-q { animation: pk-xs-ask-q 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-ask-lit { animation: pk-xs-ask-lit 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-ask-spark { animation: pk-xs-ask-spark 9s ease-out infinite both; }
  .pk-xs-stage .xs-ask-a { animation: pk-xs-ask-a 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-ask-c1 { animation: pk-xs-ask-c1 9s ease-out infinite both; }
  .pk-xs-stage .xs-ask-c2 { animation: pk-xs-ask-c2 9s ease-out infinite both; }
  .pk-xs-stage .xs-ask-c3 { animation: pk-xs-ask-c3 9s ease-out infinite both; }

  .pk-xs-stage .xs-credits-card { animation: pk-xs-credits-card 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-credits-tag { animation: pk-xs-credits-tag 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-credits-tagglow { animation: pk-xs-credits-tagglow 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-credits-ring { animation: pk-xs-credits-ring 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-credits-pop { animation: pk-xs-credits-pop 9s ease-out infinite both; }
  .pk-xs-stage :is(.xs-credits-lit, .xs-credits-glow) { animation: pk-xs-credits-lit 9s ease-in-out infinite both; }

  .pk-xs-stage :is(.xs-invite-lit1, .xs-invite-glow1) { animation: pk-xs-invite-lit1 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-invite-door1 { animation: pk-xs-invite-door1 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-invite-key { animation: pk-xs-invite-key 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-invite-lock { animation: pk-xs-invite-lock 9s ease-in-out infinite both; }
  .pk-xs-stage :is(.xs-invite-lit2, .xs-invite-glow2) { animation: pk-xs-invite-lit2 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-invite-door2 { animation: pk-xs-invite-door2 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-invite-qr { animation: pk-xs-invite-qr 9s ease-out infinite both; }
  .pk-xs-stage .xs-invite-link { animation: pk-xs-invite-link 9s ease-out infinite both; }

  .pk-xs-stage .xs-control-shield { animation: pk-xs-breathe 3s ease-in-out infinite; }
  .pk-xs-stage .xs-control-mute { animation: pk-xs-control-mute 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-control-wave { animation: pk-xs-control-wave 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-control-door { animation: pk-xs-control-door 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-control-glow { animation: pk-xs-control-glow 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-control-flag { animation: pk-xs-control-flag 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-control-lit { animation: pk-xs-control-lit 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-control-pulse { animation: pk-xs-control-pulse 9s ease-out infinite both; }

  .pk-xs-stage .xs-looks-dial { animation: pk-xs-looks-dial 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-looks-warm { animation: pk-xs-looks-warm 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-looks-cool { animation: pk-xs-looks-cool 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-looks-mono { animation: pk-xs-looks-mono 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-looks-d1 { animation: pk-xs-looks-d1 9s ease-out infinite both; }
  .pk-xs-stage .xs-looks-d2 { animation: pk-xs-looks-d2 9s ease-out infinite both; }
  .pk-xs-stage .xs-looks-d3 { animation: pk-xs-looks-d3 9s ease-out infinite both; }
  .pk-xs-stage .xs-looks-check { animation: pk-xs-looks-check 9s ease-out infinite both; }

  .pk-xs-stage .xs-alerts-reply { animation: pk-xs-alerts-reply 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-alerts-bell { animation: pk-xs-alerts-bell 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-alerts-ring { animation: pk-xs-alerts-ring 9s ease-out infinite both; }
  .pk-xs-stage :is(.xs-alerts-lit, .xs-alerts-glow) { animation: pk-xs-alerts-lit 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-alerts-n1 { animation: pk-xs-alerts-n1 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-alerts-n2 { animation: pk-xs-alerts-n2 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-alerts-n3 { animation: pk-xs-alerts-n3 9s ease-in-out infinite both; }
  .pk-xs-stage .xs-alerts-hush { animation: pk-xs-alerts-hush 9s ease-in-out infinite both; }
  /* Last, so it wins the tie: every loop waits until the stage is on screen. */
  .pk-xs-stage .xs-scene * { animation-play-state: var(--xs-play); }
}

/* Save-Data and Reduce Motion show the still frame whatever else a browser or an extension tells the page. */
html[data-save="1"] .pk-xs-stage .xs-scene *, html.pk-save-data .pk-xs-stage .xs-scene * { animation: none; }
@media (prefers-reduced-motion: reduce) { .pk-xs-stage .xs-scene * { animation: none; } }

@keyframes pk-xs-dusk { 0%, 3% { opacity: .6; } 10%, 90% { opacity: 0; } 96%, 100% { opacity: .6; } }
@keyframes pk-xs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes pk-xs-twinkle { 0%, 100% { opacity: .3; } 50% { opacity: .95; } }
@keyframes pk-xs-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }

/* The Stream. */
@keyframes pk-xs-stream-p1 { 0%, 10%, 15%, 100% { transform: translateY(0); } 12.5% { transform: translateY(-5px); } }
@keyframes pk-xs-stream-p2 { 0%, 30%, 35%, 100% { transform: translateY(0); } 32.5% { transform: translateY(-5px); } }
@keyframes pk-xs-stream-f1 { 0%, 10% { opacity: 0; transform: scale(0); } 13% { opacity: 1; transform: scale(1.35); } 15%, 92% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(1); } }
@keyframes pk-xs-stream-f2 { 0%, 30% { opacity: 0; transform: scale(0); } 33% { opacity: 1; transform: scale(1.35); } 35%, 92% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(1); } }
@keyframes pk-xs-stream-c1 { 0%, 14% { opacity: 0; transform: translate(-115px, 158px) scale(.5); } 17% { opacity: 1; } 30% { opacity: 1; transform: translate(0, 0) scale(1); } 92% { opacity: 1; transform: translate(0, 6px) scale(1); } 96%, 100% { opacity: 0; transform: translate(0, 6px) scale(1); } }
@keyframes pk-xs-stream-c2 { 0%, 34% { opacity: 0; transform: translate(-70px, 92px) scale(.5); } 37% { opacity: 1; } 50% { opacity: 1; transform: translate(0, 0) scale(1); } 92% { opacity: 1; transform: translate(0, 5px) scale(1); } 96%, 100% { opacity: 0; transform: translate(0, 5px) scale(1); } }
@keyframes pk-xs-stream-c3 { 0%, 56% { opacity: 0; transform: translate(130px, 22px) scale(.5); } 59% { opacity: 1; } 72% { opacity: 1; transform: translate(0, 0) scale(1); } 92% { opacity: 1; transform: translate(0, 4px) scale(1); } 96%, 100% { opacity: 0; transform: translate(0, 4px) scale(1); } }
@keyframes pk-xs-stream-lit { 0%, 50% { opacity: 0; } 56%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes pk-xs-stream-door { 0%, 52% { transform: scaleX(1); } 60%, 92% { transform: scaleX(.18); } 97%, 100% { transform: scaleX(1); } }

/* Ask. */
@keyframes pk-xs-ask-p { 0%, 8%, 12%, 100% { transform: translateY(0); } 10% { transform: translateY(-5px); } }
@keyframes pk-xs-ask-q { 0%, 6% { opacity: 0; transform: translate(0, 20px) scale(.4); } 9%, 14% { opacity: 1; transform: translate(0, 0) scale(1); } 24% { opacity: 1; transform: translate(90px, -48px) scale(1); } 32% { opacity: 1; transform: translate(168px, 6px) scale(.9); } 35%, 100% { opacity: 0; transform: translate(168px, 6px) scale(0); } }
@keyframes pk-xs-ask-lit { 0%, 34% { opacity: 0; } 40%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes pk-xs-ask-spark { 0%, 36% { opacity: 0; transform: scale(.6); } 40% { opacity: 1; transform: scale(1); } 46%, 100% { opacity: 0; transform: scale(1.2); } }
@keyframes pk-xs-ask-a { 0%, 46% { opacity: 0; transform: translate(168px, 6px) scale(.3); } 50% { opacity: 1; transform: translate(168px, 6px) scale(.6); } 62% { opacity: 1; transform: translate(0, 0) scale(1); } 92% { opacity: 1; transform: translate(0, 0) scale(1); } 96%, 100% { opacity: 0; transform: translate(0, 0) scale(1); } }
@keyframes pk-xs-ask-c1 { 0%, 64% { opacity: .3; transform: scale(1); } 68% { opacity: 1; transform: scale(1.12); } 72%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: .3; transform: scale(1); } }
@keyframes pk-xs-ask-c2 { 0%, 70% { opacity: .3; transform: scale(1); } 74% { opacity: 1; transform: scale(1.12); } 78%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: .3; transform: scale(1); } }
@keyframes pk-xs-ask-c3 { 0%, 76% { opacity: .3; transform: scale(1); } 80% { opacity: 1; transform: scale(1.12); } 84%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: .3; transform: scale(1); } }

/* Credits. */
@keyframes pk-xs-credits-card { 0%, 10%, 16%, 100% { transform: translateY(0); } 13% { transform: translateY(-4px); } }
@keyframes pk-xs-credits-tag { 0%, 12% { opacity: .7; transform: translate(-236px, -56px) rotate(-8deg); } 22% { opacity: .7; transform: translate(-120px, -112px) rotate(6deg); } 34%, 62% { opacity: .7; transform: translate(0, 0) rotate(0deg); } 66%, 92% { opacity: 1; transform: translate(0, 0) rotate(0deg); } 97%, 100% { opacity: 0; transform: translate(0, 0) rotate(0deg); } }
@keyframes pk-xs-credits-tagglow { 0%, 62% { opacity: 0; } 68%, 92% { opacity: .18; } 97%, 100% { opacity: 0; } }
@keyframes pk-xs-credits-ring { 0%, 34% { opacity: 0; transform: scale(.9); } 38% { opacity: .8; transform: scale(.95); } 44% { opacity: .8; transform: scale(1.05); } 50% { opacity: .8; transform: scale(.95); } 56% { opacity: .8; transform: scale(1.05); } 62% { opacity: .8; transform: scale(.98); } 66%, 100% { opacity: 0; transform: scale(1); } }
@keyframes pk-xs-credits-pop { 0%, 64% { opacity: 0; transform: scale(.85); } 66% { opacity: .8; transform: scale(.85); } 76%, 100% { opacity: 0; transform: scale(1.5); } }
@keyframes pk-xs-credits-lit { 0%, 64% { opacity: 0; } 70%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* Invite. */
@keyframes pk-xs-invite-lit1 { 0%, 4% { opacity: 0; } 10%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes pk-xs-invite-door1 { 0%, 4% { transform: scaleX(1); } 12%, 92% { transform: scaleX(.18); } 97%, 100% { transform: scaleX(1); } }
@keyframes pk-xs-invite-key { 0%, 12% { opacity: 0; transform: translate(-186px, 0) rotate(0deg); } 14% { opacity: 1; transform: translate(-176px, -14px) rotate(20deg); } 26% { opacity: 1; transform: translate(-93px, -72px) rotate(180deg); } 40%, 92% { opacity: 1; transform: translate(0, 0) rotate(360deg); } 97%, 100% { opacity: 0; transform: translate(0, 0) rotate(360deg); } }
@keyframes pk-xs-invite-lock { 0%, 40% { opacity: 0; } 44%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes pk-xs-invite-lit2 { 0%, 42% { opacity: 0; } 48%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes pk-xs-invite-door2 { 0%, 44% { transform: scaleX(1); } 54%, 92% { transform: scaleX(.18); } 97%, 100% { transform: scaleX(1); } }
@keyframes pk-xs-invite-qr { 0%, 56% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.1); } 63%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(1); } }
@keyframes pk-xs-invite-link { 0%, 62% { opacity: 0; transform: scaleX(0); } 64% { opacity: 1; transform: scaleX(.1); } 70%, 92% { opacity: 1; transform: scaleX(1); } 97%, 100% { opacity: 0; transform: scaleX(1); } }

/* Control. */
@keyframes pk-xs-control-mute { 0%, 10% { opacity: 1; } 24%, 92% { opacity: .35; } 97%, 100% { opacity: 1; } }
@keyframes pk-xs-control-wave { 0%, 6% { opacity: 0; } 10%, 16% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes pk-xs-control-door { 0%, 28% { transform: scaleX(.15); } 42%, 100% { transform: scaleX(1); } }
@keyframes pk-xs-control-glow { 0%, 30% { opacity: 1; } 42%, 100% { opacity: 0; } }
@keyframes pk-xs-control-flag { 0%, 46% { opacity: 0; transform: translateY(76px); } 50% { opacity: 1; transform: translateY(66px); } 64%, 92% { opacity: 1; transform: translateY(0); } 97%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes pk-xs-control-lit { 0%, 62% { opacity: 0; } 68%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes pk-xs-control-pulse { 0%, 76% { opacity: 0; transform: scale(.8); } 78% { opacity: .7; transform: scale(.8); } 90%, 100% { opacity: 0; transform: scale(1.3); } }

/* Looks. */
@keyframes pk-xs-looks-dial { 0%, 8% { transform: rotate(0deg); } 16%, 28% { transform: rotate(-60deg); } 36%, 48% { transform: rotate(0deg); } 56%, 68% { transform: rotate(60deg); } 76%, 92% { transform: rotate(-60deg); } 98%, 100% { transform: rotate(0deg); } }
@keyframes pk-xs-looks-warm { 0%, 10% { opacity: 0; } 18%, 28% { opacity: 1; } 36%, 74% { opacity: 0; } 80%, 92% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes pk-xs-looks-cool { 0%, 30% { opacity: 0; } 38%, 48% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes pk-xs-looks-mono { 0%, 50% { opacity: 0; } 58%, 68% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes pk-xs-looks-d1 { 0%, 14%, 24%, 74%, 84%, 100% { transform: scale(1); } 18%, 78% { transform: scale(1.4); } }
@keyframes pk-xs-looks-d2 { 0%, 34%, 44%, 100% { transform: scale(1); } 38% { transform: scale(1.4); } }
@keyframes pk-xs-looks-d3 { 0%, 54%, 64%, 100% { transform: scale(1); } 58% { transform: scale(1.4); } }
@keyframes pk-xs-looks-check { 0%, 82% { opacity: 0; transform: scale(0); } 86% { opacity: 1; transform: scale(1.3); } 89%, 94% { opacity: 1; transform: scale(1); } 98%, 100% { opacity: 0; transform: scale(1); } }

/* Alerts. */
@keyframes pk-xs-alerts-reply { 0%, 8% { opacity: 0; transform: translate(-50px, 136px) scale(.5); } 12% { opacity: 1; } 28%, 92% { opacity: 1; transform: translate(0, 0) scale(1); } 97%, 100% { opacity: 0; transform: translate(0, 0) scale(1); } }
@keyframes pk-xs-alerts-bell { 0%, 28%, 48%, 100% { transform: rotate(0deg); } 32% { transform: rotate(9deg); } 36% { transform: rotate(-8deg); } 40% { transform: rotate(6deg); } 44% { transform: rotate(-4deg); } }
@keyframes pk-xs-alerts-ring { 0%, 30% { opacity: 0; transform: scale(.9); } 33% { opacity: 1; transform: scale(1); } 44%, 100% { opacity: 0; transform: scale(1.15); } }
@keyframes pk-xs-alerts-lit { 0%, 34% { opacity: 0; } 42%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes pk-xs-alerts-n1 { 0%, 50% { opacity: 0; transform: translateY(110px) scale(.6); } 54% { opacity: .9; } 66% { opacity: .9; transform: translateY(0) scale(1); } 74%, 100% { opacity: 0; transform: translateY(-6px) scale(.6); } }
@keyframes pk-xs-alerts-n2 { 0%, 56% { opacity: 0; transform: translateY(110px) scale(.6); } 60% { opacity: .9; } 72% { opacity: .9; transform: translateY(0) scale(1); } 80%, 100% { opacity: 0; transform: translateY(-6px) scale(.6); } }
@keyframes pk-xs-alerts-n3 { 0%, 62% { opacity: 0; transform: translateY(100px) scale(.6); } 66% { opacity: .9; } 78% { opacity: .9; transform: translateY(0) scale(1); } 86%, 100% { opacity: 0; transform: translateY(-6px) scale(.6); } }
@keyframes pk-xs-alerts-hush { 0%, 58% { opacity: 0; } 66%, 80% { opacity: .32; } 90%, 100% { opacity: 0; } }