/*
 * Publika motion — one place for every curve, duration and moment.
 *
 * Ported from cinemaOS (Sources/MomentumUI, read-only):
 *   Theme.swift:395-431 Motion tokens — quick easeOut 140 ms (hover/press),
 *     state easeOut 200 ms, move/panel critically damped springs (response
 *     .24 / .28, damping 1: travels and stops), settle spring(.32, .9) — the
 *     ONE under-damped token, for arrivals with weight (toasts, finished work),
 *     room easeInOut 280 ms; ambient loops only through ambientLoop, all gated
 *     by Reduce Motion.
 *   SequencerExportPanels.swift:203-336 ExportQueueAurora — an angular sweep
 *     on the tile's own rim (2 pt rim at .9, 7.5 pt bloom blurred 6 at .42,
 *     plusLighter), one turn 3.1–4.2 s, LIT ONLY WHILE ENCODING; lighting up
 *     and going dark use `settle`.
 *   SequencerExportPanels.swift:339-360 ExportProgressMacroblockBar — the fill
 *     is PLACED, never eased; a highlight crest (half-width .22 of the run)
 *     travels left→right in a 1.6 s pass.
 *   AtelierSpine.swift:850-931 — the accent glow rides a single linear sweep:
 *     glow = sin(π·t), shadow .22 + .20·glow, radius 2 + 5·glow; never a loop.
 *
 * Rules: motion confirms an action or reveals content; nothing loops except
 * progress and processing; only transform / opacity / filter animate — the one
 * ruled exception is the export glow itself (the publish sweep's --pk-angle and
 * box-shadow pulse, the upload crest's background-position and ready glow),
 * which the owner asked for by name and which lights only while work runs; nothing
 * blocks input; under prefers-reduced-motion every transform, particle and view
 * transition is off and fades are opacity-only, ≤ 120 ms. Save-Data
 * (html.pk-save-data, set by motion.js) drops the ambient extras too.
 */
:root {
  /* Curves. linear() approximates the springs; the cubic fallback sits first. */
  --pk-ease-quick: cubic-bezier(.2, .8, .2, 1);
  --pk-ease-move: cubic-bezier(.16, 1, .3, 1);
  --pk-ease-settle: cubic-bezier(.34, 1.28, .64, 1);
  --pk-ease-room: cubic-bezier(.45, 0, .55, 1);
  /* Durations. */
  --pk-dur-fast: 120ms;
  --pk-dur-base: 220ms;
  --pk-dur-slow: 420ms;
  --pk-stagger: 45ms;
  /* Glow colour and falloff (the wordmark's warm ramp around the accent). */
  --pk-glow-lead: #ff9a45;
  --pk-glow-mid: #f0442e;
  --pk-glow-trail: #db2419;
  --pk-glow-shadow: rgba(240, 68, 46, .42);
}
@supports (animation-timing-function: linear(0, 1)) {
  :root {
    /* spring(response .24, damping 1): critically damped — travels and stops. */
    --pk-ease-move: linear(0, .0036 1.3%, .0146 2.6%, .0559 5.2%, .1163 7.8%, .1915 10.4%, .2789 13%, .3755 15.6%, .4787 18.2%, .5854 20.8%, .6934 23.4%, .78 26%, .8465 28.6%, .8981 31.2%, .9368 33.8%, .9642 36.4%, .9818 39%, .9925 41.6%, .9976 44.2%, .9994 46.8%, 1);
    /* spring(response .32, damping .9): one small overshoot, then rest. */
    --pk-ease-settle: linear(0, .0022 1.2%, .0172 3.6%, .0644 7.2%, .1471 10.8%, .2611 14.4%, .3952 18%, .536 21.6%, .6703 25.2%, .7876 28.8%, .8811 32.4%, .9481 36%, .9895 39.6%, 1.0098 43.2%, 1.0157 46.8%, 1.0132 50.4%, 1.0067 54%, 1.0016 57.6%, .9993 61.2%, .9988 64.8%, .9994 68.4%, 1);
  }
}
@property --pk-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---------- Reveal: cards rise in on first paint and as more arrive ---------- */
html.pk-motion .pk-reveal { opacity: 0; transform: translateY(12px); }
html.pk-motion .pk-reveal.is-in { animation: pk-rise var(--pk-dur-slow) var(--pk-ease-settle) both; animation-delay: calc(var(--pk-i, 0) * var(--pk-stagger)); }
@keyframes pk-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Image blur-up: the frame's own colour first, then the picture sharpens. */
html.pk-motion .pk-media[data-color] { background: var(--pk-media-color, #050607); }
html.pk-motion .pk-media-image.pk-blur-up { opacity: 0; filter: blur(14px); transform: scale(1.03); transition: opacity var(--pk-dur-slow) var(--pk-ease-quick), filter var(--pk-dur-slow) var(--pk-ease-quick), transform var(--pk-dur-slow) var(--pk-ease-move); }
html.pk-motion .pk-media-image.pk-blur-up.is-loaded { opacity: 1; filter: blur(0); transform: none; }

/* ---------- Heart: a pop, and a small burst the first time ---------- */
.pk-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.pk-burst i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--pk-heart); transform: rotate(var(--pk-burst-a, 0deg)) translateY(0) scale(1); animation: pk-burst-dot var(--pk-dur-slow) var(--pk-ease-quick) both; }
.pk-burst i:nth-child(odd) { background: var(--pk-glow-lead); }
@keyframes pk-burst-dot { to { transform: rotate(var(--pk-burst-a, 0deg)) translateY(-22px) scale(0); opacity: 0; } }
.pk-engage-heart { position: relative; }

/* Reshare: the arrows flip over once. */
.pk-engage-reshare.is-flipping .pk-icon-reshare { animation: pk-flip var(--pk-dur-slow) var(--pk-ease-settle); }
@keyframes pk-flip { 50% { transform: rotateX(180deg) scale(1.1); } to { transform: rotateX(360deg); } }

/* ---------- Publish: the export aurora on the Share button while sending ---------- */
.pk-aurora { position: relative; isolation: isolate; }
.pk-aurora::before, .pk-aurora::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity var(--pk-dur-slow) var(--pk-ease-settle); }
/* The rim: a conic sweep masked to a 2 px ring (alpha zero at both ends closes the ring without a seam). */
.pk-aurora::after { padding: 2px; background: conic-gradient(from var(--pk-angle, 0deg), transparent 0%, var(--pk-glow-mid) 14%, color-mix(in srgb, var(--pk-glow-trail) 30%, transparent) 32%, var(--pk-glow-lead) 52%, color-mix(in srgb, var(--pk-glow-mid) 28%, transparent) 70%, color-mix(in srgb, var(--pk-glow-trail) 78%, transparent) 87%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
/* The bloom: the same sweep, wider and blurred, additive. */
.pk-aurora::before { inset: -6px; padding: 7px; background: conic-gradient(from var(--pk-angle, 0deg), transparent 0%, var(--pk-glow-mid) 14%, transparent 32%, var(--pk-glow-lead) 52%, transparent 70%, var(--pk-glow-trail) 87%, transparent 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; filter: blur(6px); mix-blend-mode: plus-lighter; }
.pk-aurora.is-lit::after { opacity: .9; animation: pk-aurora-turn 3.1s linear infinite; }
.pk-aurora.is-lit::before { opacity: .42; animation: pk-aurora-turn 3.1s linear infinite; }
@keyframes pk-aurora-turn { to { --pk-angle: 360deg; } }
.pk-aurora.is-done { animation: pk-land-pulse var(--pk-dur-slow) var(--pk-ease-settle); }
@keyframes pk-land-pulse { 30% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(240, 68, 46, .18), 0 10px 30px var(--pk-glow-shadow); } }

/* ---------- Upload progress: a placed fill with a travelling crest ---------- */
.pk-tray-progress > span { transition: none; }
html.pk-motion .pk-tray-item.is-uploading .pk-tray-progress > span { background: linear-gradient(90deg, var(--pk-glow-trail) 0%, var(--pk-glow-mid) 39%, var(--pk-glow-lead) 50%, var(--pk-glow-mid) 61%, var(--pk-glow-trail) 100%); background-size: 220% 100%; animation: pk-crest 1.6s linear infinite; }
@keyframes pk-crest { from { background-position: 120% 0; } to { background-position: -120% 0; } }
html.pk-motion .pk-tray-item.is-uploading .pk-tray-thumb { box-shadow: 0 0 0 1px rgba(240, 68, 46, .35), 0 0 18px var(--pk-glow-shadow); }
/* Clips wait for Stream: a gentle shimmer until the poster lands. */
html.pk-motion .pk-tray-item.is-processing .pk-tray-thumb::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .12) 50%, transparent 100%); transform: translateX(-100%); animation: pk-sheen 1.6s linear infinite; }
html.pk-motion .pk-tray-item.is-ready .pk-tray-thumb { animation: pk-ready-glow var(--pk-dur-slow) var(--pk-ease-settle); }
@keyframes pk-ready-glow { 40% { box-shadow: 0 0 0 2px rgba(240, 68, 46, .5), 0 0 22px var(--pk-glow-shadow); } }

/* ---------- Skeletons: a sheen slides across (transform only) ---------- */
@keyframes pk-sheen { to { transform: translateX(270%); } }
.pk-skeleton-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--pk-border); border-radius: var(--pk-radius-card); background: var(--pk-surface); }
.pk-skeleton-card > span { position: relative; display: block; min-height: 14px; overflow: hidden; border-radius: 6px; background: #1c2021; }
.pk-skeleton-card > span::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 60%; background: linear-gradient(100deg, transparent 0%, #2a2f30 50%, transparent 100%); transform: translateX(-100%); animation: pk-sheen 1.3s linear infinite; }
.pk-skeleton-card > span:first-child { aspect-ratio: 16 / 9; min-height: 0; }

/* ---------- Status and toasts slide in ---------- */
html.pk-motion .pk-engage-status:not(:empty), html.pk-motion .pk-composer-status:not(:empty), html.pk-motion .fs-toast { animation: pk-slide-in var(--pk-dur-base) var(--pk-ease-move) both; }
@keyframes pk-slide-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Toggles and tabs: the indicator morphs across page loads ---------- */
.pk-feed-toggle a[aria-current="page"] { view-transition-name: pk-feed-indicator; }
.pk-tabs a[aria-current="page"], .pk-profile-tabs a[aria-current="page"] { view-transition-name: pk-tab-indicator; }

/* ---------- Dial: a bloom when it opens, a glint when it commits ---------- */
html.pk-motion .pk-dial-glass { animation: pk-dial-open var(--pk-dur-slow) var(--pk-ease-settle) both; }
@keyframes pk-dial-open { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
html.pk-motion .pk-dial-sector.is-glint { filter: drop-shadow(0 0 7px var(--pk-glow-mid)); animation: pk-glint var(--pk-dur-base) var(--pk-ease-quick); }
@keyframes pk-glint { from { filter: drop-shadow(0 0 0 transparent); } 50% { filter: drop-shadow(0 0 10px var(--pk-glow-lead)); } }

/* ---------- Page transitions: cross-document, where the browser supports them ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: pk-vt-out var(--pk-dur-base) var(--pk-ease-quick) both; }
  ::view-transition-new(root) { animation: pk-vt-in var(--pk-dur-base) var(--pk-ease-quick) both; }
  ::view-transition-group(pk-post-media) { animation-duration: var(--pk-dur-slow); animation-timing-function: var(--pk-ease-move); }
  ::view-transition-group(pk-feed-indicator), ::view-transition-group(pk-tab-indicator) { animation-duration: var(--pk-dur-base); animation-timing-function: var(--pk-ease-move); }
}
@keyframes pk-vt-out { to { opacity: 0; } }
@keyframes pk-vt-in { from { opacity: 0; } }

/* ---------- Reduced motion: no transforms, no particles, opacity-only ≤ 120 ms ---------- */
@media (prefers-reduced-motion: reduce) {
  html.pk-motion .pk-reveal { opacity: 1; transform: none; animation: pk-fade var(--pk-dur-fast) linear both; }
  html.pk-motion .pk-reveal.is-in { animation: pk-fade var(--pk-dur-fast) linear both; animation-delay: 0s; }
  html.pk-motion .pk-media-image.pk-blur-up { filter: none; transform: none; transition: opacity var(--pk-dur-fast) linear; }
  .pk-burst { display: none; }
  .pk-engage-heart.is-popping .pk-icon-heart, .pk-engage-reshare.is-flipping .pk-icon-reshare { animation: none; }
  .pk-aurora::before, .pk-aurora::after { animation: none; transition: opacity var(--pk-dur-fast) linear; }
  .pk-aurora.is-lit::after { opacity: .9; }
  .pk-aurora.is-lit::before { opacity: 0; }
  .pk-aurora.is-done { animation: none; }
  html.pk-motion .pk-tray-item.is-uploading .pk-tray-progress > span { animation: none; background: var(--pk-accent); }
  html.pk-motion .pk-tray-item.is-processing .pk-tray-thumb::after { animation: none; transform: none; }
  html.pk-motion .pk-tray-item.is-ready .pk-tray-thumb { animation: none; }
  html.pk-motion .pk-engage-status:not(:empty), html.pk-motion .pk-composer-status:not(:empty), html.pk-motion .fs-toast { animation: pk-fade var(--pk-dur-fast) linear both; }
  html.pk-motion .pk-dial-glass { animation: pk-fade var(--pk-dur-fast) linear both; }
  html.pk-motion .pk-dial-sector.is-glint { animation: none; filter: none; }
  .pk-feed-toggle a[aria-current="page"], .pk-tabs a[aria-current="page"], .pk-profile-tabs a[aria-current="page"] { view-transition-name: none; }
  .pk-skeleton-card > span::after { animation: none; }
}
@keyframes pk-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Save-Data: keep the confirmations, drop the ambient extras ---------- */
html.pk-save-data .pk-media-image.pk-blur-up { filter: none; transform: none; transition: opacity var(--pk-dur-fast) linear; }
html.pk-save-data .pk-aurora.is-lit::before { opacity: 0; animation: none; }
html.pk-save-data .pk-burst { display: none; }
html.pk-save-data .pk-reveal.is-in { animation-delay: 0s; animation-duration: var(--pk-dur-fast); }
html.pk-save-data { view-transition-name: none; }