/* Propozycja: miniaturowy warsztat publikacji, inspirowany ProcessVisual
   i przepływami Firecrawl. Oryginalne pliki marki pozostają bez zmian.
   9,6 s: źródło → trzy zastosowania → gotowy materiał przez ok. 3 s. */
.catalog-assets .spma-card { border-radius: 0; }
.catalog-assets .spma-card .spm-card-head { gap: 12px; }
.catalog-assets .spma-card .spm-card-head > span { font-size: 13px; line-height: 19px; }
.catalog-assets .spma-scene {
  min-height: 382px; color: #262626; background: #fafafa;
  font-family: var(--dealyo-font); --spm-duration: 9.6s;
}
.spma-scene .spm-pv-grid { background-size: 42px 42px; opacity: .6; }
.spma-stage { width: min(294px,calc(100% - 32px)); min-width: 0; padding-block: 18px; }
.spma-source { border: 1px solid #e7e7e7; background: #fff; }
.spma-source-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 12px; min-height: 36px; box-sizing: border-box;
  border-bottom: 1px solid #e7e7e7;
}
.spma-source-head strong { font-size: 13px; line-height: 18px; font-weight: 500; }
.spma-specimen { font-size: 21px; line-height: 22px; font-weight: 500; letter-spacing: -.045em; }
.spma-source-format { font: 400 13px/18px var(--dealyo-mono); color: #666; white-space: nowrap; }
.spma-source-parts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.spma-source-part {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-width: 0; min-height: 55px; padding: 5px 2px; box-sizing: border-box;
  background: #fff; color: #666;
}
.spma-source-part + .spma-source-part { border-left: 1px solid #e7e7e7; }
.spma-source-part b { font-size: 18px; line-height: 22px; font-weight: 500; color: #262626; }
.spma-source-part > span:last-child { font-size: 13px; line-height: 19px; }
.spma-source-image { display: flex; align-items: center; justify-content: center; height: 22px; }
.spma-source-image img { display: block; height: auto; flex: 0 0 auto; }
.spma-source-logo { width: 66px; }
.spma-source-mark { width: 27px; }
.spma-swatch { display: block; width: 24px; height: 18px; background: #fe4a23; }
.spma-flow { position: relative; width: 1px; height: 25px; margin-inline: auto; background: #dedede; }
.spma-flow-signal {
  position: absolute; width: 3px; height: 8px; left: -1px; top: 0;
  background: #fe4a23; opacity: 0; --spm-animation: spma-transfer;
}
.spma-paper {
  position: relative; width: calc(100% - 24px); margin-inline: auto; box-sizing: border-box;
  min-height: 204px; border: 1px solid #dedede; padding: 19px 20px 20px;
  background: #fff; box-shadow: 0 8px 18px #26262606;
}
.spma-scene .spma-heading {
  display: block; margin: 0; color: #262626;
  font: 500 25px/27px var(--dealyo-font); letter-spacing: -.045em;
}
.spma-scene .spma-body {
  margin: 11px 0 14px; color: #666; max-width: none;
  font: 400 13px/19px var(--dealyo-font); letter-spacing: 0;
}
.spma-cta {
  display: inline-flex; justify-content: space-between; align-items: center; gap: 14px;
  min-height: 34px; padding: 7px 11px; box-sizing: border-box; white-space: nowrap;
  color: #fff; background: #fe4a23; font-size: 13px; line-height: 20px; font-weight: 500;
}
.spma-cta svg { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
.spma-phases {
  display: flex; justify-content: space-between; gap: 4px; padding-top: 16px;
  color: #666; font: 400 13px/19px var(--dealyo-mono);
}
.spma-phases > span { white-space: nowrap; }
.spma-phase-third { color: #fe4a23; }
.spma-source-first { --spm-animation: spma-select-first; }
.spma-source-second { --spm-animation: spma-select-second; }
.spma-source-third { --spm-animation: spma-select-third; }
.spma-type-heading,.spma-applied-logo { --spm-animation: spma-apply-first; }
.spma-type-body,.spma-applied-mark { --spm-animation: spma-apply-second; }
.spma-type-cta { --spm-animation: spma-apply-third; }
.spma-phase-first { --spm-animation: spma-phase-input; }
.spma-phase-second { --spm-animation: spma-phase-compose; }
.spma-phase-third { --spm-animation: spma-phase-result; }
.spma-brand-paper { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.spma-brand-signature { position: relative; min-height: 17px; }
.spma-neutral-signature { position: absolute; inset: 0 auto auto 0; font-size: 13px; line-height: 17px; color: #666; opacity: 0; --spm-animation: spma-replace-signature; }
.spma-applied-logo { display: block; width: 97px; height: auto; margin-top: 2px; }
.spma-brand-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.spma-applied-mark { display: block; width: 31px; height: auto; flex: 0 0 31px; }
.spma-applied-color { color: #fe4a23; --spm-animation: spma-apply-color; }
.spma-brand-cta { --spm-animation: spma-apply-button-color; }

/* Each source activation precedes the corresponding transfer and application.
   Destination geometry is fixed; only opacity and short transforms change. */
@keyframes spma-select-first {
  0%,17% { background: #fff2ed; color: #262626; }
  25%,100% { background: #fff; color: #666; }
}
@keyframes spma-select-second {
  0%,25%,48%,100% { background: #fff; color: #666; }
  31%,41% { background: #fff2ed; color: #262626; }
}
@keyframes spma-select-third {
  0%,43%,66%,100% { background: #fff; color: #666; }
  49%,59% { background: #fff2ed; color: #262626; }
}
@keyframes spma-transfer {
  0%,11%,26%,29%,44%,47%,62%,100% { opacity: 0; transform: translateY(0); }
  13%,31%,49% { opacity: 1; transform: translateY(0); }
  22%,40%,58% { opacity: 1; transform: translateY(17px); }
  24%,42%,60% { opacity: 0; transform: translateY(17px); }
}
@keyframes spma-apply-first {
  0%,18%,100% { opacity: 0; transform: translateY(-8px); }
  26%,92% { opacity: 1; transform: translateY(0); }
}
@keyframes spma-apply-second {
  0%,36%,100% { opacity: 0; transform: translateY(-8px); }
  44%,92% { opacity: 1; transform: translateY(0); }
}
@keyframes spma-apply-third {
  0%,54%,100% { opacity: 0; transform: translateY(-8px); }
  62%,92% { opacity: 1; transform: translateY(0); }
}
@keyframes spma-replace-signature {
  0%,18%,100% { opacity: 1; }
  24%,92% { opacity: 0; }
}
@keyframes spma-apply-color {
  0%,54%,100% { color: #262626; }
  62%,92% { color: #fe4a23; }
}
@keyframes spma-apply-button-color {
  0%,54%,100% { background: #e7e7e7; color: #262626; }
  62%,92% { background: #fe4a23; color: #fff; }
}
@keyframes spma-phase-input {
  0%,17%,100% { color: #fe4a23; }
  25%,94% { color: #666; }
}
@keyframes spma-phase-compose {
  0%,18%,64%,100% { color: #666; }
  26%,58% { color: #fe4a23; }
}
@keyframes spma-phase-result {
  0%,54%,100% { color: #666; }
  62%,92% { color: #fe4a23; }
}
@media(max-width:767px) {
  .catalog-assets .spma-scene { min-height: 382px; }
  .spma-stage { width: min(294px,calc(100% - 28px)); }
}
@media(max-width:359px) {
  .catalog-assets .spma-card .spm-card-head { padding-inline: 14px; gap: 4px 10px; }
  .catalog-assets .spma-card .spm-card-head > span { font-size: 13px; }
  .spma-stage { width: calc(100% - 24px); }
  .spma-source-head { padding-inline: 10px; }
  .spma-source-format { font-size: 13px; letter-spacing: -.045em; }
  .spma-paper { width: calc(100% - 12px); padding-inline: 15px; }
  .spma-scene .spma-heading { font-size: 24px; line-height: 27px; }
  .spma-phases { letter-spacing: -.045em; }
}
/* No JavaScript and reduced/print modes use the complete base composition.
   The shared controller owns play/pause, visibility and preference changes. */
@media(prefers-reduced-motion:reduce) {
  body[data-subpage-motion] .spma-scene .spm-animated { animation: none !important; }
}
@media print {
  body[data-subpage-motion] .spma-scene .spm-animated { animation: none !important; }
}