/* Product Pelican · feature page illustrations
   Shared styles for the eight animated illustrations in
   _includes/partials/illus/. They came from the "Product Pelican website
   illustrations" Design canvas; pp-illustrations.js is their small driver.
   Look: Polaris 2.0 App Home tokens (colour, type, radius, shadow), because
   they draw the app. The site's own frame goes round them (.shot).
   Motion: one number, --p, runs 0 → 100 over the loop. Every animated element
   reads it through a start class (.t0 … .t96) so the whole scene stays in sync,
   and with animation off (or reduced motion) --p rests at 92: the finished state.
   The sample products, prices, specs and scores are made up. */

@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 92;
}
@keyframes pp-run { from { --p: 0; } to { --p: 100; } }
@keyframes pp-spin { to { transform: rotate(360deg); } }

/* ---------- Frame ---------- */

.pp {
  --o: clamp(0, (97 - var(--p, 92)) / 2, 1);   /* everything fades out at the end of the loop */
  --i: clamp(0, var(--p, 92) / 2, 1);          /* …and back in at the start */
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  background: #f7f7f7;
  color: #101010;
  font: 400 13px/20px "Inter", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss03";
  -webkit-font-smoothing: antialiased;
  animation: pp-run 12s linear infinite;
}
.pp * { box-sizing: border-box; --at: 0; --d: 3; --to: 97; --dx: 0px; --dy: 0px; --s0: 0; }
.pp svg { display: block; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Polaris look ---------- */

.pp-section {
  background: #fff;
  border-radius: 20px;
  padding: 16px;
  box-shadow: 0 0 2px #0000003d, 0 2px 12px #00000005, 0 4px 16px #00000005, 0 4px 48px #00000005;
}
.pp-box { background: #f7f7f7; border-radius: 12px; padding: 12px; }
.pp-h { margin: 0; font-size: 15px; line-height: 22px; font-weight: 500; letter-spacing: -0.01em; }
.pp-strong { font-weight: 500; }
.pp-sub { color: #4a4a4a; }
.pp-small { font-size: 12px; line-height: 16px; }
.pp-label { font-size: 12px; line-height: 16px; font-weight: 500; color: #4a4a4a; }
.pp-mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; font-size: 12px; }
.pp-clip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pp-badge {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 20px; padding: 0 8px; border-radius: 8px;
  background: #ebebeb; color: #4a4a4a;
  font-size: 12px; line-height: 20px; font-weight: 500; white-space: nowrap;
}
.pp-badge--success { background: #8ae156; color: #0f2400; }
.pp-badge--info { background: #5bc9eb; color: #002c38; }
.pp-badge--caution { background: #ffb837; color: #312100; }
.pp-badge--warning { background: #ff8a3e; color: #381600; }
.pp-badge--critical { background: #de0004; color: #fff; }

.pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  height: 28px; padding: 0 12px; margin: 0; border: 0; border-radius: 999px;
  background: #f2f2f2; color: #101010;
  font-family: inherit; font-size: 12px; line-height: 28px; font-weight: 500; white-space: nowrap;
}
.pp-btn--primary {
  background: #101010; color: #fff;
  box-shadow: 0 1px 2px -0.5px #00000021, 0 4px 6px -2px #00000021, inset 0 0 12px -6px #ffffffbf, inset 0 0 4px 2px #ffffff1a;
}
.pp-btn--plain { background: transparent; }

.pp-field {
  display: flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 6px 12px; border-radius: 12px; background: #fff;
  box-shadow: 0 2px 3px -1px #0000000a, 0 3px 4px -1.5px #0000000a, 0 0 0 1px #00000021;
}
.pp-field--area { display: block; padding: 8px 12px; overflow: hidden; }

.pp-check {
  position: relative; flex: none; width: 16px; height: 16px; border-radius: 4px;
  background: #fff; box-shadow: inset 0 0 0 1px #8a8a8a;
}
.pp-check > span {
  position: absolute; inset: 0; display: grid; place-items: center;
  border-radius: 4px; background: #101010; color: #fff;
}

.pp-thumb {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 8px;
  background: #f2f2f2; color: #707070; box-shadow: inset 0 0 0 1px #0000000f;
}
.pp-thumb { overflow: hidden; }
/* Thumbnails use the square crops (img/illus/*-sq.webp): head and product, so
   the product still reads at 30px. */
.pp-thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* A product photo in a cropping frame. The image is placed with width / left / top,
   so the scan canvas can cover exactly the same rectangle. */
.pp-photo { position: relative; overflow: hidden; flex: none; border-radius: 12px; background: #f7f7f7; }
.pp-photo > img { position: absolute; left: 0; top: 0; display: block; width: 100%; height: auto; max-width: none; }
.pp-photo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #0000000f; pointer-events: none; }

/* "AI is looking at the photo": the app's PixelScan. The canvas is painted by
   illustrations.js (coarse pixel blocks that sharpen) between its .tN and .uN,
   while the band sweeps down. */
.pp-scan { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pp-scan-band {
  position: absolute; left: 0; right: 0; top: -30%; height: 26%; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,111,168,0) 0%, rgba(15,111,168,.28) 60%, rgba(215,237,249,.85) 100%);
  box-shadow: 0 2px 0 rgba(255,255,255,.9);
}

.pp-tint-1 { background: #e6eeff; }
.pp-tint-2 { background: #ede6fe; }
.pp-tint-3 { background: #ffefcc; }
.pp-tint-4 { background: #e6fdd4; }
.pp-tint-5 { background: #d0f6ff; }
.pp-tint-6 { background: #ffeddb; }

.pp-tab {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  height: 32px; padding: 0 12px; border-radius: 12px;
  background: #ebebeb; color: #101010;
  font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap;
}
.pp-tab--on {
  background: #fff;
  box-shadow: 0 2px 3px -1px #0000000a, 0 3px 4px -1.5px #0000000a, 0 0 0 1px #00000021;
}
.pp-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #c0c0c0; }
.pp-dot--critical { background: #de0004; }
.pp-dot--caution { background: #ffb837; }
.pp-dot--success { background: #8ae156; }

.pp-done {
  display: grid; place-items: center; flex: none;
  width: 16px; height: 16px; border-radius: 50%; background: #8ae156; color: #0f2400;
}
.pp-pending { flex: none; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #c0c0c0; }
.pp-spinner {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid #ddd; border-top-color: #101010;
  animation: pp-spin 0.7s linear infinite;
}

.pp-rows > * { border-bottom: 1px solid #ddd; }
.pp-rows > *:last-child { border-bottom: 0; }

/* Several states drawn in the same spot */
.pp-stack { display: grid; }
.pp-stack > * { grid-area: 1 / 1; }

/* ---------- Motion ---------- */

.pp .r, .pp .rx, .pp .f, .pp .h, .pp .w, .pp .wipe, .pp .mv, .pp .gr, .pp .mark, .pp .press {
  --v: clamp(0, (var(--p, 92) - var(--at)) / var(--d), 1);
  --e: calc(var(--v) * var(--v) * (3 - 2 * var(--v)));
}
.pp .r { opacity: calc(var(--v) * var(--o)); transform: translateY(calc((1 - var(--e)) * 8px)); }    /* appear, rising */
.pp .rx { opacity: calc(var(--v) * var(--o)); transform: translateX(calc((1 - var(--e)) * -56px)); } /* appear, sliding in from the left */
.pp .f { opacity: calc(var(--v) * var(--o)); }                                                       /* appear */
.pp .h { opacity: calc(1 - var(--v)); }                                                              /* disappear */
.pp .w { opacity: calc(var(--v) * clamp(0, (var(--to) - var(--p, 92)) / var(--d), 1)); }             /* visible from .tN to .uN */
.pp .wipe {                                                                                          /* text written left to right */
  --d: 8;
  display: block; white-space: nowrap;
  clip-path: inset(-4px calc((1 - var(--v)) * 100%) -4px -4px);
  opacity: var(--o);
}
.pp .mv {                                                                                            /* travel from (--dx, --dy) to its place */
  transform: translate(calc((1 - var(--e)) * var(--dx)), calc((1 - var(--e)) * var(--dy)));
  opacity: calc(var(--o) * var(--i));
}
.pp .gr {                                                                                            /* bar growing from --s0 of its width */
  transform-origin: left center;
  transform: scaleX(calc(var(--s0) + (1 - var(--s0)) * var(--e)));
  opacity: calc(var(--v) * var(--o));
}
.pp .mark {                                                                                          /* highlight */
  border-radius: 2px;
  background: rgb(255 239 204 / calc(var(--v) * var(--o)));
  box-shadow: 0 0 0 2px rgb(255 239 204 / calc(var(--v) * var(--o)));
}
.pp .press {                                                                                         /* a click: brief focus ring */
  outline: 2px solid rgb(70 128 255 / calc(var(--v) * clamp(0, (var(--at) + 6 - var(--p, 92)) / 3, 1)));
  outline-offset: 2px;
}

/* start (percent of the loop) */
.pp .t0{--at:0}.pp .t2{--at:2}.pp .t4{--at:4}.pp .t6{--at:6}.pp .t8{--at:8}.pp .t10{--at:10}.pp .t12{--at:12}.pp .t14{--at:14}.pp .t16{--at:16}.pp .t18{--at:18}
.pp .t20{--at:20}.pp .t22{--at:22}.pp .t24{--at:24}.pp .t26{--at:26}.pp .t28{--at:28}.pp .t30{--at:30}.pp .t32{--at:32}.pp .t34{--at:34}.pp .t36{--at:36}.pp .t38{--at:38}
.pp .t40{--at:40}.pp .t42{--at:42}.pp .t44{--at:44}.pp .t46{--at:46}.pp .t48{--at:48}.pp .t50{--at:50}.pp .t52{--at:52}.pp .t54{--at:54}.pp .t56{--at:56}.pp .t58{--at:58}
.pp .t60{--at:60}.pp .t62{--at:62}.pp .t64{--at:64}.pp .t66{--at:66}.pp .t68{--at:68}.pp .t70{--at:70}.pp .t72{--at:72}.pp .t74{--at:74}.pp .t76{--at:76}.pp .t78{--at:78}
.pp .t80{--at:80}.pp .t82{--at:82}.pp .t84{--at:84}.pp .t86{--at:86}.pp .t88{--at:88}.pp .t90{--at:90}.pp .t92{--at:92}.pp .t94{--at:94}.pp .t96{--at:96}
/* end, for .w */
.pp .u10{--to:10}.pp .u12{--to:12}.pp .u14{--to:14}.pp .u16{--to:16}.pp .u18{--to:18}.pp .u20{--to:20}.pp .u22{--to:22}.pp .u24{--to:24}.pp .u26{--to:26}.pp .u28{--to:28}
.pp .u30{--to:30}.pp .u32{--to:32}.pp .u34{--to:34}.pp .u36{--to:36}.pp .u38{--to:38}.pp .u40{--to:40}.pp .u42{--to:42}.pp .u44{--to:44}.pp .u46{--to:46}.pp .u48{--to:48}
.pp .u50{--to:50}.pp .u52{--to:52}.pp .u54{--to:54}.pp .u56{--to:56}.pp .u58{--to:58}.pp .u60{--to:60}.pp .u62{--to:62}.pp .u64{--to:64}.pp .u66{--to:66}.pp .u68{--to:68}
.pp .u70{--to:70}.pp .u72{--to:72}.pp .u74{--to:74}.pp .u76{--to:76}.pp .u78{--to:78}.pp .u80{--to:80}.pp .u82{--to:82}.pp .u84{--to:84}.pp .u86{--to:86}.pp .u88{--to:88}
/* length of the transition (percent of the loop) */
.pp .d2{--d:2}.pp .d4{--d:4}.pp .d6{--d:6}.pp .d8{--d:8}.pp .d10{--d:10}.pp .d12{--d:12}

/* ---------- On the page ---------- */

/* The artboard is a fixed 720×480. Its frame is as wide as the column, and the
   artboard scales to fit it: tan(atan2(a, b)) is a / b as a plain number.
   pp-illustrations.js does the same sum for browsers that can't. */
.pp-fit {
  container-type: inline-size; aspect-ratio: 3 / 2; overflow: hidden; margin: 0;
  background: #f7f7f7; color: #101010; text-align: left;
  /* the site's frame: black border, hard shadow (tokens from global.css) */
  border: var(--border-md, 3px) solid var(--black, #000); box-shadow: var(--shadow-lg, 8px 8px 0 #000);
}
.pp-fit > .pp { transform-origin: 0 0; transform: scale(tan(atan2(100cqw, 720px))); }
/* Off screen the loop holds still. */
.pp-fit.pp-off > .pp { animation-play-state: paused; }
/* No @property: --p can't be animated, so rest on the finished state. */
.no-pp .pp { animation: none !important; }

/* ---------- One illustration only ---------- */

/* collection-audit: four tabs have to fit the row in Inter */
.pp .pp-tabs .pp-tab{padding:0 9px;gap:6px}
/* geo-score */
.pp .roll{--dy:28px}
.pp .s1{--s0:.79}
.pp .s2{--s0:.82}
/* merchandising-rulesets */
.pp .up2{--dy:68px}
.pp .up4{--dy:136px}
.pp .dn1{--dy:-34px}
.pp .dn2{--dy:-68px}
.pp .dn5{--dy:-170px}
.pp .dim{--v:clamp(0,(var(--p,92) - var(--at))/var(--d),1);opacity:calc(1 - .55*var(--v))}

@media (prefers-reduced-motion: reduce) {
  .pp { animation: none !important; }
  .pp-spinner { animation: none; }
}