/*
 * The feed's credits tip (src/web/credits-tip.ts, 8 October 2026): one full-bleed painted card. Loaded only on a page that draws it.
 *
 *   card     the painting fills the whole card (the card's rounded corners clip it); the headline, one line, the "Credit people"
 *            button and the small label are real HTML laid over it, inside the same box. 232 px tall on a phone (it was about 404),
 *            224 from 720 px; it grows only if the words need the room (large text, a longer translation).
 *   scene    the painting keeps its own night in the light look, as the explainers do; the words are always light on it.
 *            Contrast (checked in test/web/credits-tip.test.mjs): the headline white and the line cream on the night or the top
 *            scrim, the label cream on the indigo ground, the button's ink on its coral: all at least 4.5:1.
 *   button   the Follow family's pill (.pk-fbtn, creators.css: grain, coral to orange, sheen); only the width, the colours' names
 *            and the press spring are set here. The press lands in 90 ms and springs back on --pk-ease-pop (pk-motion.css).
 *   motion   a ten second story of transform, opacity and stroke-dashoffset only, running while the card is on screen and the tab
 *            is shown (.is-live where motion is allowed, .is-playing while seen: credits-tip.js). Reduced motion, Data Saver,
 *            Motion Off and no scripting keep the still frame, the finished picture, which is what the markup draws.
 *
 *            0-6 night lifts · 6-20 the post card slides in · 20-38 the ring and the person in it appear · 36-52 the credit tag
 *            travels from the card and attaches · 54-66 the lamp lights, a line of light runs round the window, the label comes up
 *            · 66-90 it holds, the ring breathes · 92-100 night
 */
.pk-credits-tip[hidden] { display: none; }
.pk-home .pk-feed-connect.pk-credits-tip { padding: 10px 0 12px; border-bottom: 0; }

.pk-ct {
  --cx-coral: #ff6b57; --cx-orange: #ff9a3d; --cx-ink-on-coral: #240a04; --cx-spring: var(--pk-ease-pop, cubic-bezier(.34, 1.45, .64, 1));
  position: relative; isolation: isolate; min-width: 0; overflow: hidden;
  border: 1px solid var(--pk-line); border-radius: var(--pk-radius-panel); background: #120e30; color: #fff;
}
.pk-ct-scene { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: 10px; box-sizing: border-box; min-height: 232px; padding: 16px; }
.pk-ct-art { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; }
.pk-ct-copy { position: relative; z-index: 1; grid-column: 1 / -1; min-width: 0; }
.pk-ct h2 { margin: 0; max-width: 12em; color: #fff; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 1px 12px rgba(10, 8, 32, .55); }
.pk-ct-line { margin: 6px 0 0; max-width: 26em; color: #f3e6d3; font-size: 14px; line-height: 1.35; text-shadow: 0 1px 10px rgba(10, 8, 32, .55); }
.pk-ct .pk-fbtn.pk-ct-cta { position: relative; z-index: 1; grid-row: 3; grid-column: 1; justify-self: start; align-self: end; width: auto; padding: 0 20px;
  transition: scale var(--pk-dur-pop, 560ms) var(--pk-ease-pop, cubic-bezier(.34, 1.45, .64, 1)), box-shadow 200ms ease-out; }
.pk-ct .pk-fbtn.pk-ct-cta:active { transform: none; scale: .95; transition-duration: var(--pk-dur-press, 90ms), 200ms; }
.pk-ct-label { position: relative; z-index: 1; grid-row: 3; grid-column: 2; justify-self: end; align-self: end; margin: 0; max-width: 11em; color: #f3e6d3; font-size: 12px; line-height: 1.3; text-align: right; text-wrap: balance; text-shadow: 0 1px 8px rgba(10, 8, 32, .6); pointer-events: none; }

@media (min-width: 720px) {
  .pk-ct-scene { min-height: 224px; padding: 20px; }
  .pk-ct h2 { font-size: 22px; max-width: 14em; }
}

/* A forced palette keeps the painting (and so the words laid on it) and gives the button the system's own colours. */
@media (forced-colors: active) {
  .pk-ct { border-color: CanvasText; forced-color-adjust: none; }
  .pk-ct .pk-fbtn.pk-ct-cta { forced-color-adjust: auto; border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-ct .pk-fbtn.pk-ct-cta { transition: box-shadow 200ms ease-out; }
  .pk-ct .pk-fbtn.pk-ct-cta:active { scale: none; }
}

/* The still frame: what the markup draws (the finished picture), with the resting transforms below. */
.pk-ct .ct-scene :is(.ct-card, .ct-ringdash, .ct-person, .ct-tag, .ct-lit, .ct-roomglow, .ct-float, .ct-mist, .ct-star) { transform-box: fill-box; transform-origin: center; }
.pk-ct .ct-scene .ct-person { transform-origin: 50% 100%; }

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not([data-motion="off"]):not([data-save="1"]):not(.pk-save-data) .pk-ct.is-live { --ct-play: paused; }
  html:not([data-motion="off"]):not([data-save="1"]):not(.pk-save-data) .pk-ct.is-live.is-playing { --ct-play: running; }
  html:not([data-motion="off"]):not([data-save="1"]):not(.pk-save-data) .pk-ct.is-live :is(.ct-scene *, .pk-ct-label) { animation-play-state: var(--ct-play, paused); }

  .pk-ct.is-live .ct-dusk { animation: pk-ct-dusk 10s linear infinite both; }
  .pk-ct.is-live .ct-card { animation: pk-ct-card 10s var(--pk-ease-settle, ease-out) infinite both; }
  .pk-ct.is-live .ct-ringdash { animation: pk-ct-ringdash 10s var(--pk-ease-move, ease-out) infinite both; }
  .pk-ct.is-live .ct-person { animation: pk-ct-person 10s var(--pk-ease-pop, ease-out) infinite both; }
  .pk-ct.is-live .ct-tag { animation: pk-ct-tag 10s var(--pk-ease-move, ease-in-out) infinite both; }
  .pk-ct.is-live .ct-lit { animation: pk-ct-lit 10s var(--pk-ease-pop, ease-out) infinite both; }
  .pk-ct.is-live .ct-roomglow { animation: pk-ct-roomglow 10s ease-in-out infinite both; }
  .pk-ct.is-live .ct-sweep { animation: pk-ct-sweep 10s var(--pk-ease-move, ease-in-out) infinite both; }
  .pk-ct.is-live .pk-ct-label { animation: pk-ct-label 10s var(--pk-ease-settle, ease-out) infinite both; }
  .pk-ct.is-live .ct-float { animation: pk-ct-float 3.4s ease-in-out infinite alternate; }
  .pk-ct.is-live .ct-mist { animation: pk-ct-mist 10s ease-in-out infinite; }
  .pk-ct.is-live .ct-star--a { animation: pk-ct-twinkle 3s ease-in-out infinite; }
  .pk-ct.is-live .ct-star--b { animation: pk-ct-twinkle 3s ease-in-out -1s infinite; }
  .pk-ct.is-live .ct-star--c { animation: pk-ct-twinkle 3s ease-in-out -2s infinite; }
}

@keyframes pk-ct-dusk { 0% { opacity: .6; } 5%, 90% { opacity: 0; } 97%, 100% { opacity: .6; } }
@keyframes pk-ct-card { 0%, 6% { opacity: 0; transform: translateX(-34px) rotate(-4deg); } 20%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes pk-ct-ringdash { 0%, 20% { opacity: 0; transform: scale(.86); } 32%, 66% { opacity: 1; transform: scale(1); } 78% { opacity: 1; transform: scale(1.035); } 90% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(1); } }
@keyframes pk-ct-person { 0%, 26% { opacity: 0; transform: scale(.55) translateY(8px); } 38%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes pk-ct-tag { 0%, 32% { opacity: 0; transform: translate(-212px, -24px) scale(.6) rotate(-8deg); } 36% { opacity: 1; } 44% { transform: translate(-104px, -50px) scale(1) rotate(5deg); } 50% { opacity: 1; transform: translate(0, 0) scale(1.12) rotate(0deg); } 56%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
@keyframes pk-ct-lit { 0%, 54% { opacity: 0; transform: scale(.5); } 64%, 92% { opacity: 1; transform: scale(1); } 97%, 100% { opacity: 0; transform: scale(1); } }
@keyframes pk-ct-roomglow { 0%, 54% { opacity: 0; } 62%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes pk-ct-sweep { 0%, 54% { stroke-dashoffset: 1; } 68%, 92% { stroke-dashoffset: 0; } 97%, 100% { stroke-dashoffset: 1; } }
@keyframes pk-ct-label { 0%, 58% { opacity: 0; transform: translateY(4px); } 68%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
@keyframes pk-ct-float { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }
@keyframes pk-ct-mist { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(10px); } }
@keyframes pk-ct-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }

/* The profile's empty Credits tab (creditsEmptyScene): the same painting, filling the profile panel (its rounded corners clip it), no card
   border of its own. A visitor's is quieter: no button, no label, a shorter scene. The line stays short so it never reaches the ring. */
.pk-ct--panel { border: 0; border-radius: 0; background: #120e30; }
.pk-ct--panel .pk-ct-line { max-width: 15em; text-wrap: balance; }
.pk-ct--quiet .pk-ct-scene { min-height: 184px; }
@media (min-width: 720px) { .pk-ct--quiet .pk-ct-scene { min-height: 176px; } }