/* Peka insight symbols: one hand-drawn line figure per article, over the article's gradient.
   White line, one weight, round ends. A soft paper fill marks the one thing the figure is about.
   Each loops slowly while it is on screen and holds still for reduced motion. */
.pk-sym { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.pk-sym * { fill: none; stroke: #F4F2EC; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pk-sym .s-fill { fill: rgba(244,242,236,.2); }
.pk-sym .s-solid { fill: #F4F2EC; }
.pk-sym .s-big * { stroke-width: 1.12; }
.pk-sym .s-faint { stroke: rgba(244,242,236,.45); stroke-width: 1.4; }
.pk-sym g, .pk-sym path, .pk-sym rect, .pk-sym circle { transform-box: view-box; }
.pk-sym { --t: 1; }
.pk-sym * { animation-play-state: paused; }
.is-in .pk-sym * { animation-play-state: running; }

/* loop: the note goes round, each hand lifts a little as it arrives */
.pk-sym--loop .s-orbit { transform-origin: 160px 90px; animation: s-spin 7s linear infinite; }
.pk-sym--loop .s-hand--a { animation: s-lift-a 7s var(--ease-settle, ease-in-out) infinite; }
.pk-sym--loop .s-hand--b { animation: s-lift-b 7s var(--ease-settle, ease-in-out) infinite; }
@keyframes s-spin { to { transform: rotate(360deg); } }
@keyframes s-lift-a { 0%, 40%, 75%, 100% { transform: none; } 55%, 62% { transform: translate(2px, -4px); } }
@keyframes s-lift-b { 0%, 15%, 100% { transform: translate(-2px, 4px); } 22%, 90% { transform: none; } }

/* dashboard: steam rises, becomes three bars, the week starts again */
.pk-sym--dashboard .s-steam { stroke-dasharray: 1; stroke-dashoffset: 1; animation: s-steam 6s var(--ease-notice, ease-out) infinite; }
.pk-sym--dashboard .s-steam--2 { animation-delay: .25s; }
.pk-sym--dashboard .s-steam--3 { animation-delay: .5s; }
.pk-sym--dashboard .s-bar { transform-origin: 160px 58px; transform: scaleY(0); opacity: 0; animation: s-bar 6s var(--ease-settle, ease-in-out) infinite; }
.pk-sym--dashboard .s-bar--2 { animation-delay: .2s; }
.pk-sym--dashboard .s-bar--3 { animation-delay: .4s; }
@keyframes s-steam { 0% { stroke-dashoffset: 1; opacity: 1; } 30% { stroke-dashoffset: 0; opacity: 1; } 45%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes s-bar { 0%, 35% { transform: scaleY(0); opacity: 0; } 50% { transform: scaleY(1); opacity: 1; } 85% { transform: scaleY(1); opacity: 1; } 95%, 100% { transform: scaleY(1); opacity: 0; } }

/* gates: lamp on, gate opens from its hinge, one person walks through, gate closes */
.pk-sym--gates .s-lamp { animation: s-lamp 8s linear infinite; }
.pk-sym--gates .s-gate { transform-origin: 132px 105px; animation: s-gate 8s var(--ease-settle, ease-in-out) infinite; }
.pk-sym--gates .s-walker { animation: s-walk 8s var(--ease-settle, ease-in-out) infinite; }
@keyframes s-lamp { 0%, 14% { fill: none; } 18%, 74% { fill: #F4F2EC; } 80%, 100% { fill: none; } }
@keyframes s-gate { 0%, 22% { transform: none; } 34%, 66% { transform: scaleX(.12); } 78%, 100% { transform: none; } }
@keyframes s-walk { 0% { transform: none; opacity: 0; } 6%, 34% { transform: none; opacity: 1; } 64% { transform: translateX(130px); opacity: 1; } 72%, 100% { transform: translateX(142px); opacity: 0; } }

/* hero: the light sweeps the shelf, then rests on one product, which steps forward */
.pk-sym--hero .s-cone { fill: rgba(244,242,236,.16); stroke: none; }
.pk-sym--hero .s-beam { transform-origin: 160px 28px; animation: s-sweep 8s var(--ease-settle, ease-in-out) infinite; }
.pk-sym--hero .s-pick { animation: s-pick 8s var(--ease-settle, ease-in-out) infinite; }
@keyframes s-sweep { 0% { transform: rotate(0deg); } 18% { transform: rotate(22deg); } 40% { transform: rotate(-24deg); } 58%, 90% { transform: rotate(-8deg); } 100% { transform: rotate(0deg); } }
@keyframes s-pick { 0%, 58% { transform: none; } 66%, 88% { transform: translateY(-8px); } 96%, 100% { transform: none; } }

/* kol: the stem grows, the leaves open, then the season starts over */
.pk-sym--kol .s-stem { stroke-dasharray: 1; stroke-dashoffset: 1; animation: s-stem 7s var(--ease-notice, ease-out) infinite; }
.pk-sym--kol .s-leaf { fill: rgba(244,242,236,.2); transform: scale(0); opacity: 0; animation: s-leaf 7s var(--ease-settle, ease-in-out) infinite; }
.pk-sym--kol .s-leaf--l { transform-origin: 171px 80px; }
.pk-sym--kol .s-leaf--r { transform-origin: 172px 68px; animation-delay: .5s; }
@keyframes s-stem { 0% { stroke-dashoffset: 1; opacity: 1; } 30% { stroke-dashoffset: 0; } 88% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes s-leaf { 0%, 26% { transform: scale(0); opacity: 0; } 42% { transform: scale(1); opacity: 1; } 88% { transform: scale(1); opacity: 1; } 96%, 100% { transform: scale(1); opacity: 0; } }

/* billboard: phones rise one after another and flash, the picture goes with them */
.pk-sym--billboard .s-phone { animation: s-raise 6s var(--ease-settle, ease-in-out) infinite; }
.pk-sym--billboard .s-phone--2 { animation-delay: .6s; }
.pk-sym--billboard .s-phone--3 { animation-delay: 1.2s; }
.pk-sym--billboard .s-screen { animation: s-flash 6s linear infinite; }
.pk-sym--billboard .s-phone--2 .s-screen { animation-delay: .6s; }
.pk-sym--billboard .s-phone--3 .s-screen { animation-delay: 1.2s; }
@keyframes s-raise { 0% { transform: translateY(26px); opacity: 0; } 12%, 70% { transform: none; opacity: 1; } 84%, 100% { transform: translateY(26px); opacity: 0; } }
@keyframes s-flash { 0%, 16% { fill: none; } 18% { fill: #F4F2EC; } 26%, 70% { fill: rgba(244,242,236,.3); } 80%, 100% { fill: none; } }

/* vibe: the chopsticks lift the noodles, steam rises, a small spark */
.pk-sym--vibe .s-lift { animation: s-slurp 5s var(--ease-settle, ease-in-out) infinite; }
.pk-sym--vibe .s-noodle { transform-origin: 176px 86px; animation: s-stretch 5s var(--ease-settle, ease-in-out) infinite; }
.pk-sym--vibe .s-steam { stroke-dasharray: 1; stroke-dashoffset: 1; animation: s-steam 5s var(--ease-notice, ease-out) infinite; }
.pk-sym--vibe .s-steam--2 { animation-delay: .4s; }
.pk-sym--vibe .s-spark { fill: #F4F2EC; stroke: none; transform-origin: 134px 54px; transform: scale(0); animation: s-spark 5s var(--ease-notice, ease-out) infinite; }
@keyframes s-slurp { 0%, 10% { transform: none; } 40%, 60% { transform: translateY(-16px); } 85%, 100% { transform: none; } }
@keyframes s-stretch { 0%, 10% { transform: none; } 40%, 60% { transform: scaleY(1.7); } 85%, 100% { transform: none; } }
@keyframes s-spark { 0%, 40% { transform: scale(0); } 50% { transform: scale(1.15); } 60% { transform: scale(1); } 75%, 100% { transform: scale(0); } }

@media (prefers-reduced-motion: reduce) {
  .pk-sym * { animation: none !important; }
  .pk-sym--dashboard .s-steam, .pk-sym--kol .s-stem, .pk-sym--vibe .s-steam { stroke-dashoffset: 0; }
  .pk-sym--dashboard .s-bar, .pk-sym--kol .s-leaf { transform: none; opacity: 1; }
}

/* where the symbols sit: inside the card link, and inside the padded cover on a single insight */
.wp-block-post-featured-image { position: relative; }
.peka-case__cover .pk-sym { inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); }
/* the line stays about the same weight on screen however large the cover is */
.peka-work .wp-block-post-template > li:first-child .pk-sym * { stroke-width: 1.4; }
.peka-work .wp-block-post-template > li:first-child .pk-sym .s-big * { stroke-width: .82; }
.peka-case__cover .pk-sym * { stroke-width: 1.05; }
.peka-case__cover .pk-sym .s-big * { stroke-width: .62; }
.peka-case__cover .pk-sym .s-faint { stroke-width: .9; }