/* Petr's cursor, direction C: "Candy vector" (heypetr.com, 2026-11-10).
   A puffy, glossy candy arrow drawn as layered SVG (crisp at any DPR), in Petr's cobalt shading into violet with a
   warm peach-gold glint. A glossy candy capsule of the same material pops out of its tail to carry a word.
   Motion: ONE transform per frame on .pc (position + springy lean, only while moving or settling); every state change
   is a CSS transition (transform and opacity only). Off on touch and with Reduce motion (the system cursor returns).
   Sizes: --pc-size is the arrow's height (tip to tail cap); 30px at real size. --k is 1px at real size, so every
   offset scales with the arrow (the board shows it at 4x by setting --pc-size: 120px). */

.pc {
  /* ---- the material: Petr's cobalt, shading into violet; a peach-gold glint (the orb's warm droplets) */
  --pc-a: #7d95ff;      /* the lit top-left: cobalt, catching light */
  --pc-b: #3f62ff;      /* cobalt (Petr's #2f5bff, lifted a touch by the light) */
  --pc-c: #4537ea;      /* blue-violet */
  --pc-d: #6a2fd6;      /* violet, the side away from the light */
  --pc-lit: #b4c2ff;    /* the soft bulge of light inside the head */
  --pc-edge: #160c66;   /* the pillowy edge shade */
  --pc-crease: #10044a; /* the deep crease where the head meets the tail */
  --pc-rim: #cfa8ff;    /* the lavender rim (reflected light, like the orb's rim) */
  --pc-warm: #ffc08c;   /* peach glint */
  --pc-gold: #ffd77a;   /* gold bounce */
  --pc-shadow: rgba(4, 3, 20, 0.6);
  --pc-glow: rgba(64, 92, 255, 0.5);
  --pc-ink: #ffffff;    /* the capsule's word */
  --pc-out: transparent; /* no dark edge on cobalt (the yellow swap has one) */

  --pc-size: 30px;
  --k: calc(var(--pc-size) / 30);

  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483000;
  width: 0;
  height: 0;
  pointer-events: none;
  will-change: transform;
  contain: layout style;
  font-family: var(--font-ui, Inter, system-ui, -apple-system, sans-serif);
  -webkit-font-smoothing: antialiased;
}

/* the yellow swap: over a yellow button (Get Petr, Get Unlimited, the nav's Get Petr while it's yellow) the arrow
   crossfades to Petr's look yellow, deepened to amber so it stays obvious on the yellow: an amber-orange body, a darker
   crease and a dark soft edge. Two copies of the art are stacked (.pc-cl cobalt, .pc-yl yellow) and only their opacity
   changes, in step with the button swell: nothing is painted per frame. */
.pc-yl {
  --pc-a: #ffd23f;      /* lit: golden, a step deeper than the button */
  --pc-b: #ffb300;      /* amber */
  --pc-c: #ff9100;      /* orange-amber */
  --pc-d: #ec6a00;      /* deep orange, away from the light */
  --pc-lit: #ffe68a;
  --pc-edge: #8f3c00;
  --pc-crease: #6e2600;
  --pc-rim: #ffd98c;
  --pc-warm: #fff3cf;
  --pc-gold: #fff8e6;
  --pc-shadow: rgba(72, 30, 0, 0.62);
  --pc-glow: rgba(110, 48, 0, 0.22); /* a dark aura instead of a light one: it separates it from the yellow */
  --pc-out: rgba(84, 34, 0, 0.8);    /* the dark soft edge */
}
.pc-cl,
.pc-yl {
  position: absolute;
  left: 0;
  top: 0;
  will-change: opacity;
}
.pc-yl {
  opacity: 0;
  /* front-loaded, so the blue-to-yellow mix (a warm brown half-way) passes in about a tenth of a second */
  transition: opacity 0.34s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.pc.pc-y .pc-yl {
  opacity: 1;
}
/* back to cobalt: it comes back at once, under the yellow that fades away */
.pc-cl {
  transition: opacity 0.1s linear;
}
/* going yellow: the cobalt leaves only once the yellow covers it */
.pc.pc-y .pc-cl {
  opacity: 0;
  transition: opacity 0.12s linear 0.26s;
}

/* ------------------------------------------------------------------ enter and leave the window: fade + grow from the tip */
.pc-v {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  opacity: 1;
  transform: none;
  transition: opacity 0.18s linear, transform 0.5s var(--pc-spring-soft);
}
.pc.pc-off .pc-v {
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 0.2s linear, transform 0.24s cubic-bezier(0.4, 0, 1, 1);
}

/* ------------------------------------------------------------------ the arrow */
.pc-a,
.pc-p {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0; /* the tip: every state turns, grows and squashes about the hotspot */
}
.pc-a {
  transition: transform 0.5s var(--pc-spring-soft), opacity 0.2s linear;
}
.pc-p {
  /* release: springs back */
  transition: transform 0.55s var(--pc-spring);
}
.pc-svg {
  position: absolute;
  display: block;
  /* the viewBox is -14 -12 128 156 (units); the shape is 127 units tall = --pc-size; the hotspot (the tip's apex along the arrow's axis) is at (6.6, 2.5) */
  left: calc((-14 - 6.6) * var(--pc-size) / 127);
  top: calc((-12 - 2.5) * var(--pc-size) / 127);
  width: calc(128 * var(--pc-size) / 127);
  height: calc(156 * var(--pc-size) / 127);
  overflow: visible;
}
/* rest life: every few seconds the top edge catches the light (an opacity fade, composited) */
.pc-glint {
  opacity: 0;
  will-change: opacity;
  transition: opacity 0.35s linear;
}
/* cursor.js adds .pc-glinting for one pass every 7 s, only while it rests (no animation runs in between) */
.pc.pc-glinting[data-state=''] .pc-glint {
  animation: pc-glint 1.4s ease-in-out;
}
@keyframes pc-glint {
  0%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

/* the art's layers (classes, so the colourways are just custom properties) */
.pc-svg .s-a { stop-color: var(--pc-a); }
.pc-svg .s-b { stop-color: var(--pc-b); }
.pc-svg .s-c { stop-color: var(--pc-c); }
.pc-svg .s-d { stop-color: var(--pc-d); }
.pc-svg .f-shadow { fill: var(--pc-shadow); }
.pc-svg .f-glow { fill: var(--pc-glow); }
.pc-svg .f-lit { fill: var(--pc-lit); }
.pc-svg .k-edge { stroke: var(--pc-edge); }
.pc-svg .f-crease { fill: var(--pc-crease); }
.pc-svg .k-rim { stroke: var(--pc-rim); }
.pc-svg .f-warm { fill: var(--pc-warm); }
.pc-svg .f-gold { fill: var(--pc-gold); }
.pc-svg .k-out { stroke: var(--pc-out, transparent); }
.pc-svg .k-crease { stroke: var(--pc-crease); }
.pc-svg .k-warm { stroke: var(--pc-warm); }
.pc-svg .k-gold { stroke: var(--pc-gold); }

/* ------------------------------------------------------------------ the states */
/* link: the arrow perks up (turns a little toward its tip and swells), springy */
.pc[data-state='link'] .pc-a {
  transform: rotate(-10deg) scale(1.14);
}
/* ...and the top edge lights up (the same glint as at rest, held on) */
.pc:is([data-state='link'], [data-state='button']) .pc-glint {
  animation: none;
  opacity: 1;
  transition: opacity 0.25s linear;
}
/* button: swells more and is pulled toward the button's centre (the pull is in cursor.js, part of the one transform) */
.pc[data-state='button'] .pc-a {
  transform: rotate(-6deg) scale(1.2);
}
/* label and hold: the arrow settles back a touch and a capsule pops out of its tail */
.pc[data-state='label'] .pc-a,
.pc[data-state='hold'] .pc-a {
  transform: rotate(4deg) scale(0.94);
}
/* text: the system I-beam stays; the arrow steps aside (down-right) and shrinks */
.pc[data-state='text'] .pc-a {
  transform: translate(calc(9 * var(--k)), calc(11 * var(--k))) scale(0.46);
  opacity: 0.9;
}

/* pressed: a soft squash along the arrow's own axis (toward the tip), fast in, springy out */
.pc.down .pc-p {
  transform: rotate(-34deg) scale(1.08, 0.8) rotate(34deg);
  transition: transform 0.09s cubic-bezier(0.2, 0, 0.4, 1);
}
.pc.down[data-state='text'] .pc-p {
  transform: rotate(-34deg) scale(1.04, 0.86) rotate(34deg);
}

/* ------------------------------------------------------------------ the capsule: same candy, pops out of the tail */
.pc-cap {
  position: absolute;
  /* its left end sits under the tail cap, so it comes out of the tail */
  left: calc(7 * var(--k));
  top: calc(15 * var(--k));
  font-size: calc(12.5 * var(--k));
  height: calc(26 * var(--k));
  min-width: calc(72 * var(--k));
  padding: 0 calc(12 * var(--k)) 0 calc(15 * var(--k));
  border-radius: calc(13 * var(--k));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pc-ink);
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1;
  white-space: nowrap;
  background:
    /* the lit top band and the deep violet bottom: a rounded, filled candy body */
    linear-gradient(180deg, var(--pc-a) 0%, var(--pc-b) 34%, var(--pc-c) 66%, var(--pc-d) 100%);
  box-shadow:
    inset 0 calc(1.2 * var(--k)) 0 rgba(255, 255, 255, 0.5),
    inset 0 calc(-3 * var(--k)) calc(5 * var(--k)) color-mix(in srgb, var(--pc-edge) 70%, transparent),
    inset calc(-4 * var(--k)) 0 calc(6 * var(--k)) color-mix(in srgb, var(--pc-edge) 45%, transparent),
    inset 0 calc(-1 * var(--k)) 0 color-mix(in srgb, var(--pc-rim) 85%, transparent),
    0 0 0 calc(0.5 * var(--k)) color-mix(in srgb, var(--pc-edge) 70%, transparent),
    0 calc(5 * var(--k)) calc(10 * var(--k)) var(--pc-shadow),
    0 0 calc(16 * var(--k)) var(--pc-glow);
  transform-origin: calc(13 * var(--k)) calc(13 * var(--k));
  /* hidden: tucked into the tail */
  opacity: 0;
  transform: scale(0.18) rotate(-14deg);
  transition: transform 0.2s cubic-bezier(0.5, 0, 0.9, 0.6), opacity 0.14s linear 0.06s;
}
/* the specular streak along its top, and a peach-gold glint low on its right (the orb's warm droplets) */
.pc-cap::before,
.pc-cap::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
}
.pc-cap::before {
  left: calc(10 * var(--k));
  right: calc(16 * var(--k));
  top: calc(2.5 * var(--k));
  height: calc(7 * var(--k));
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.35) 55%, rgba(255, 255, 255, 0));
}
.pc-cap::after {
  right: calc(6 * var(--k));
  bottom: calc(2 * var(--k));
  width: calc(18 * var(--k));
  height: calc(9 * var(--k));
  background: radial-gradient(closest-side, color-mix(in srgb, var(--pc-warm) 85%, transparent), transparent);
}
.pc[data-state='label'] .pc-cap,
.pc[data-state='hold'] .pc-cap {
  opacity: 1;
  transform: none;
  transition: transform 0.75s var(--pc-elastic), opacity 0.1s linear;
}
.pc.down[data-state='label'] .pc-cap,
.pc.down[data-state='hold'] .pc-cap {
  transform: scale(0.94, 0.88);
  transition: transform 0.09s cubic-bezier(0.2, 0, 0.4, 1);
}

/* the word: two slots, so a change (Sound to Mute) crossfades and never snaps */
.pc-w {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--k));
  padding-left: calc(2 * var(--k));
  text-shadow: 0 calc(1 * var(--k)) 0 color-mix(in srgb, var(--pc-edge) 55%, transparent);
  opacity: 0;
  transform: translateY(calc(5 * var(--k)));
  transition: opacity 0.16s linear, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.pc-w.on {
  opacity: 1;
  transform: none;
  transition: opacity 0.2s linear 0.06s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.04s;
}
.pc-w.out {
  transform: translateY(calc(-5 * var(--k)));
}
.pc-w svg {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
  filter: drop-shadow(0 calc(1 * var(--k)) 0 color-mix(in srgb, var(--pc-edge) 55%, transparent));
}
.pc-w b {
  font-weight: inherit;
}
/* a sizer keeps the capsule as wide as its widest word (no width change between Sound and Mute) */
.pc-sz {
  visibility: hidden;
  display: flex;
  align-items: center;
  gap: calc(6 * var(--k));
}
.pc-sz svg {
  width: 1em;
  height: 1em;
}

/* hold, while held: Petr is listening (the word gives way to his voice bars, the capsule breathes) */
.pc-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(3 * var(--k));
  opacity: 0;
  transition: opacity 0.18s linear;
}
.pc-bars i {
  width: calc(3 * var(--k));
  height: calc(14 * var(--k));
  border-radius: calc(2 * var(--k));
  background: var(--pc-ink);
  box-shadow: 0 calc(1 * var(--k)) 0 color-mix(in srgb, var(--pc-edge) 55%, transparent);
  transform: scaleY(0.3);
}
.pc.down[data-state='hold'] .pc-w.on {
  opacity: 0;
  transform: scale(0.8);
}
.pc.down[data-state='hold'] .pc-bars {
  opacity: 1;
}
.pc.down[data-state='hold'] .pc-bars i {
  animation: pc-bar 0.9s ease-in-out infinite alternate;
}
.pc-bars i:nth-child(2) { animation-delay: -0.25s !important; }
.pc-bars i:nth-child(3) { animation-delay: -0.6s !important; }
.pc-bars i:nth-child(4) { animation-delay: -0.1s !important; }
.pc-bars i:nth-child(5) { animation-delay: -0.45s !important; }
@keyframes pc-bar {
  0% { transform: scaleY(0.28); }
  50% { transform: scaleY(1); }
  100% { transform: scaleY(0.5); }
}
.pc.down[data-state='hold'] .pc-cap {
  transform: none;
}
.pc-halo {
  position: absolute;
  inset: calc(-6 * var(--k));
  border-radius: calc(21 * var(--k));
  box-shadow: 0 0 0 calc(1.5 * var(--k)) color-mix(in srgb, var(--pc-rim) 70%, transparent), 0 0 calc(14 * var(--k)) var(--pc-glow);
  opacity: 0;
  transition: opacity 0.25s linear;
}
.pc.down[data-state='hold'] .pc-halo {
  animation: pc-breathe 1.4s ease-in-out infinite;
}
@keyframes pc-breathe {
  0%, 100% { opacity: 0.25; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* ------------------------------------------------------------------ the springs (CSS linear(), with a fallback) */
.pc {
  --pc-spring-soft: cubic-bezier(0.34, 1.4, 0.64, 1);
  --pc-spring: cubic-bezier(0.34, 1.7, 0.64, 1);
  --pc-elastic: cubic-bezier(0.3, 1.9, 0.5, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  .pc {
    /* a damped spring (zeta 0.55): one soft overshoot */
    --pc-spring-soft: linear(0, 0.0315, 0.1134, 0.2279, 0.3601, 0.4974, 0.6303, 0.752, 0.8579, 0.9457, 1.0146, 1.0653, 1.0992, 1.1187, 1.1261, 1.124, 1.115, 1.1014, 1.0851, 1.0677, 1.0507, 1.0349, 1.021, 1.0094, 1.0001, 0.9931, 0.9883, 0.9855, 0.9842, 0.9842, 0.9851, 0.9867, 0.9887, 0.9909, 0.9931, 0.9951, 0.9969, 0.9985, 0.9997, 1.0007, 1);
    /* zeta 0.42: the press release */
    --pc-spring: linear(0, 0.0539, 0.1914, 0.3773, 0.5803, 0.7753, 0.9442, 1.0762, 1.1672, 1.218, 1.2337, 1.2213, 1.1894, 1.146, 1.0986, 1.053, 1.0134, 0.9825, 0.9611, 0.9491, 0.9454, 0.9482, 0.9556, 0.9658, 0.9768, 0.9875, 0.9968, 1.004, 1.009, 1.0119, 1.0128, 1.0121, 1.0104, 1.008, 1.0054, 1.0029, 1.0008, 0.9991, 0.9979, 0.9972, 1);
    /* zeta 0.32: the capsule's elastic pop */
    --pc-elastic: linear(0, 0.0921, 0.3206, 0.6108, 0.8963, 1.128, 1.2788, 1.3426, 1.3302, 1.2628, 1.1663, 1.0648, 0.9776, 0.9163, 0.8851, 0.882, 0.9004, 0.9317, 0.9671, 0.9993, 1.0236, 1.0376, 1.0414, 1.037, 1.0272, 1.0151, 1.0034, 0.9941, 0.9881, 0.9857, 0.9865, 0.9894, 0.9935, 0.9976, 1.0012, 1.0036, 1.0048, 1.0049, 1.004, 1.0027, 1);
  }
}

/* ------------------------------------------------------------------ the system cursor: hidden only while ours is on */
html.pc-on,
html.pc-on * {
  cursor: none !important;
}
/* over text the I-beam stays (ours steps aside) */
html.pc-on :is(p, h1, h2, h3, h4, li, dd, dt, q, blockquote, figcaption, input, textarea, [contenteditable], .pc-text) {
  cursor: text !important;
}
html.pc-on :is(a, button, summary, label, select, [role='button'], [data-pick]) :is(*) {
  cursor: none !important;
}

/* a still (the board's state sheet): the same element, placed in a box instead of following the pointer */
.pc.pc-still {
  position: absolute;
  z-index: 2;
  will-change: auto;
}
/* stills never take compositor layers (a sheet of them would make the live cursor's every frame walk dozens) */
.pc.pc-still * {
  will-change: auto !important;
}