/* ═══════════════════════════════════════════════════════════════════════
 * Signature premium : le kit CSS
 *
 * Reconstruit d'après les sites de l'agence Pulsor (pulsor.agency, ekklo,
 * limova, peakfast, arc144, heysimon, mig, première classe, striker).
 * Tout est préfixé `pk-` pour se poser sur n'importe quel site sans collision.
 *
 * Une marque se règle avec quatre variables : --pk-brand(-rgb), --pk-ink(-rgb),
 * --pk-bg, et éventuellement --pk-lime (l'accent lumineux sur fond sombre).
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Marque */
  --pk-brand: #6f9440;
  --pk-brand-rgb: 111, 148, 64;
  --pk-ink: #0f100d;
  --pk-ink-rgb: 15, 16, 13;
  --pk-bg: #f3f2ee;
  --pk-glow: #a9cc7c;            /* l'accent qui « s'allume » sur fond sombre */
  --pk-glow-rgb: 169, 204, 124;

  /* Mouvement : la même courbe en CSS et en GSAP, toujours */
  --pk-ease: cubic-bezier(.32, .72, 0, 1);        /* type iOS, 90 % des transitions */
  --pk-ease-io: cubic-bezier(.66, .01, .17, .97); /* entrées de titres, gros mouvements */
  --pk-ease-out: cubic-bezier(.22, 1, .36, 1);    /* curseurs et démos */
  --pk-ease-elastic: cubic-bezier(.34, 1.35, .64, 1); /* petits rebonds : pastilles, prix */
  --pk-d-xs: .3s; --pk-d-s: .45s; --pk-d-m: .6s; --pk-d-l: .8s;
  --pk-anim: var(--pk-d-s) var(--pk-ease);

  /* Ombres en couches : jamais une seule ombre, jamais de bordure pleine */
  --pk-sh-base:
    0 0 0 1px rgba(var(--pk-ink-rgb), .04),
    0 1px 1px -.5px rgba(var(--pk-ink-rgb), .04),
    0 3px 3px -1.5px rgba(var(--pk-ink-rgb), .06),
    0 6px 8px -3px rgba(var(--pk-ink-rgb), .02),
    0 6px 12px -6px rgba(var(--pk-ink-rgb), .03),
    0 24px 24px -12px rgba(var(--pk-ink-rgb), .05);
  --pk-sh-card:
    0 0 0 1px rgba(var(--pk-ink-rgb), .04),
    0 145px 58px 0 rgba(var(--pk-ink-rgb), .01),
    0 82px 49px 0 rgba(var(--pk-ink-rgb), .04),
    0 36px 36px 0 rgba(var(--pk-ink-rgb), .06),
    0 9px 20px 0 rgba(var(--pk-ink-rgb), .07);
  --pk-sh-pane: 0 0 0 2px #fff inset, var(--pk-sh-base);
  --pk-sh-label:
    0 0 35px 0 rgba(255, 255, 255, .2) inset, 0 0 12px 0 #fff inset,
    0 0 64px rgba(0, 0, 0, .02), 0 0 32px rgba(0, 0, 0, .02), 0 0 16px rgba(0, 0, 0, .02),
    0 0 8px rgba(0, 0, 0, .02), 0 0 4px rgba(0, 0, 0, .02), 0 0 2px rgba(0, 0, 0, .02);
  --pk-sh-btn:
    -21px 16px 10px 0 rgba(0, 0, 0, .04), -12px 9px 9px 0 rgba(0, 0, 0, .13),
    -5px 4px 6px 0 rgba(0, 0, 0, .23), -1px 1px 4px 0 rgba(0, 0, 0, .26),
    0 .5px .5px 0 rgba(255, 255, 255, .16) inset;
  --pk-sh-brand:
    0 16px 16px 0 rgba(var(--pk-brand-rgb), .12), 0 8px 8px 0 rgba(var(--pk-brand-rgb), .12),
    0 4px 4px 0 rgba(var(--pk-brand-rgb), .12), 0 2px 2px 0 rgba(var(--pk-brand-rgb), .12),
    0 .5px .5px 0 rgba(255, 255, 255, .25) inset, 0 0 8px 0 rgba(255, 255, 255, .2) inset;
  --pk-sh-glass: 0 0 35px 0 rgba(255, 255, 255, .03) inset, 0 0 12px 0 rgba(255, 255, 255, .08) inset, 0 1px 0 rgba(255, 255, 255, .06) inset;
  --pk-sh-dark:
    0 0 0 1px rgba(0, 0, 0, .7), 0 41px 17px rgba(0, 0, 0, .03), 0 23px 14px rgba(0, 0, 0, .1),
    0 10px 10px rgba(0, 0, 0, .17), 0 3px 6px rgba(0, 0, 0, .19), 0 .5px .5px rgba(255, 255, 255, .16) inset;

  /* Matières */
  --pk-gr-btn: linear-gradient(220deg, color-mix(in srgb, var(--pk-ink) 78%, #fff) 0%, var(--pk-ink) 100%);
  --pk-gr-dark: linear-gradient(127deg, color-mix(in srgb, var(--pk-ink) 88%, #fff) -3%, var(--pk-ink) 106%);
  --pk-gr-glow: linear-gradient(98deg, color-mix(in srgb, var(--pk-glow) 85%, #fff), var(--pk-glow));
}

/* Les lignes révélées sous masque : on laisse de l'air aux accents et aux jambages */
[class*="line-mask"] { padding-block: .12em; margin-block: -.12em; }

/* Texte lu par les lecteurs d'écran, invisible à l'œil */
.pk-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Lenis gère le défilement : le smooth natif doit se taire */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

/* ═════════════ Fonds vivants ═════════════ */

/* Grain : une texture à peine visible sur toute la page, qui ôte le côté « écran plat » */
/* inset: 0 et non négatif : un calque fixe qui déborde élargit la page sur mobile. */
.pk-grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Grain fixe : animé, il repeignait tout l'écran cinq fois par seconde, par-dessus tout le reste */
@keyframes pk-grain {
  0% { background-position: 0 0; } 20% { background-position: -37px 23px; } 40% { background-position: 29px -41px; }
  60% { background-position: -18px -9px; } 80% { background-position: 44px 31px; } 100% { background-position: 0 0; }
}

/* Trame de points statique : panneaux « produit », fonds de widgets */
.pk-dots-bg { background-image: radial-gradient(circle, rgba(var(--pk-ink-rgb), .09) 1px, transparent 1.2px); background-size: 12px 12px; }
.pk-dots-bg-light { background-image: radial-gradient(circle, rgba(255, 255, 255, .09) 1px, transparent 1.2px); background-size: 12px 12px; }

/* Panneau « produit » gris à liseré blanc intérieur */
.pk-pane { background-color: color-mix(in srgb, var(--pk-bg) 70%, #fff); border-radius: 2em; box-shadow: var(--pk-sh-pane); }

/* Canvas de points qui scintillent (piloté par PK.dots) ; on le découpe avec un masque */
.pk-dotfield { position: relative; pointer-events: none; }
.pk-dotfield canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pk-divider { position: relative; height: .5em; opacity: .5; -webkit-mask: linear-gradient(to right, #0000, #fff 15% 85%, #0000); mask: linear-gradient(to right, #0000, #fff 15% 85%, #0000); }
.pk-divider canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Halo qui tourne derrière un bloc (Limova) : un dégradé conique flouté */
/* will-change : le flou est calculé une fois, la rotation se fait sur le GPU */
.pk-halo { position: absolute; pointer-events: none; aspect-ratio: 1; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform;
  background: conic-gradient(from 0deg, rgba(var(--pk-glow-rgb), .0), rgba(var(--pk-glow-rgb), .55), rgba(var(--pk-brand-rgb), .25), rgba(var(--pk-glow-rgb), 0) 70%);
  animation: pk-spin 12s linear infinite; }
@keyframes pk-spin { to { rotate: 360deg; } }

/* Trame LED sur fond sombre : petits carrés + halo masqué (Arc, Limova) */
.pk-led { position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--pk-led-bg, #0f100d) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, var(--pk-led-bg, #0f100d) 0 1px, transparent 1px 4px),
    radial-gradient(55% 60% at var(--pk-led-x, 70%) 0%, rgba(var(--pk-glow-rgb), .28), rgba(var(--pk-glow-rgb), .06) 55%, transparent 75%);
  -webkit-mask: linear-gradient(#fff 35%, #0000 95%); mask: linear-gradient(#fff 35%, #0000 95%); }

/* Lignes verticales pointillées de fond (MIG), qui s'effacent vers le haut */
.pk-guides { position: absolute; inset: 0; display: flex; justify-content: space-between; pointer-events: none; padding-inline: var(--pk-guides-pad, 0); }
.pk-guides i { width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent 40%, color-mix(in srgb, currentColor 14%, transparent) 40%) 0 0 / 100% 10px;
  -webkit-mask: linear-gradient(to bottom, #0000, #fff 30%, #fff 70%, #0000); mask: linear-gradient(to bottom, #0000, #fff 30%, #fff 70%, #0000); }

/* Trait au pinceau dessiné (Ekklo) : PK.draw remplit le canvas */
.pk-draw { position: absolute; pointer-events: none; contain: layout style paint; }
.pk-draw canvas { width: 100%; height: 100%; display: block; }

/* Faisceau de lumière qui balaie une surface */
.pk-sweep { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.pk-sweep::after { content: ""; position: absolute; inset: -40% -80%; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%); animation: pk-sweep 7s var(--pk-ease-io) infinite; transform: translateX(-60%); }
@keyframes pk-sweep { 0% { transform: translateX(-60%); } 45%, 100% { transform: translateX(60%); } }

/* Fondus de bord : rien ne s'arrête net */
.pk-fade-x { -webkit-mask: linear-gradient(90deg, #0000, #fff 10% 90%, #0000); mask: linear-gradient(90deg, #0000, #fff 10% 90%, #0000); }
.pk-fade-y { -webkit-mask: linear-gradient(#0000, #fff 12% 88%, #0000); mask: linear-gradient(#0000, #fff 12% 88%, #0000); }
.pk-fade-b { -webkit-mask: linear-gradient(#fff 65%, #0000); mask: linear-gradient(#fff 65%, #0000); }

/* Séparateur pointillé statique */
.pk-dash { height: 1px; background: linear-gradient(90deg, transparent 66.66%, color-mix(in srgb, currentColor 14%, transparent) 0) 0 0 / .375em 100%; }

/* ═════════════ Header : flou progressif + pilule ═════════════ */

.pk-header-blur { position: absolute; top: 0; left: 0; width: 100%; height: 150%; pointer-events: none; z-index: -1;
  transform-origin: top; transform: scaleY(0); transition: transform var(--pk-d-s) var(--pk-ease); }
body[data-scrolling-started="true"] .pk-header-blur { transform: scaleY(1); }
.pk-header-blur > i { position: absolute; inset: 0; }
.pk-header-blur > i:nth-child(1) { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); -webkit-mask: linear-gradient(to top, #0000 0%, #fff 12.5%, #fff 37.5%, #0000 50%); mask: linear-gradient(to top, #0000 0%, #fff 12.5%, #fff 37.5%, #0000 50%); }
.pk-header-blur > i:nth-child(2) { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); -webkit-mask: linear-gradient(to top, #0000 12.5%, #fff 37.5%, #fff 50%, #0000 62.5%); mask: linear-gradient(to top, #0000 12.5%, #fff 37.5%, #fff 50%, #0000 62.5%); }
.pk-header-blur > i:nth-child(3) { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); -webkit-mask: linear-gradient(to top, #0000 37.5%, #fff 50%, #fff 62.5%, #0000 75%); mask: linear-gradient(to top, #0000 37.5%, #fff 50%, #fff 62.5%, #0000 75%); }
.pk-header-blur > i:nth-child(4) { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -webkit-mask: linear-gradient(to top, #0000 50%, #fff 62.5%, #fff 100%); mask: linear-gradient(to top, #0000 50%, #fff 62.5%, #fff 100%); }

/* ═════════════ Bouton signature ═════════════
 * <a class="pk-btn"><span class="pk-btn-bg"></span><span class="pk-btn-txt" data-pk-roll>Texte</span>
 *   <span class="pk-btn-ico"><svg>flèche</svg><svg>flèche</svg></span></a>
 * Le texte roule lettre par lettre, la flèche s'échange, le fond se rétracte. */
.pk-btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .75em; cursor: pointer; white-space: nowrap; text-decoration: none; }
.pk-btn-bg { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--pk-gr-btn); box-shadow: var(--pk-sh-btn);
  outline: 1px solid color-mix(in srgb, currentColor 8%, transparent); outline-offset: -1px;
  transition: inset var(--pk-anim), transform var(--pk-anim), box-shadow var(--pk-anim); }
.pk-btn-txt { position: relative; display: inline-flex; overflow: hidden; line-height: 1.3; }
.pk-btn-txt > span { display: inline-block; text-shadow: 0 1.3em currentColor; transition: transform var(--pk-anim); }
.pk-btn-ico { position: relative; display: grid; place-items: center; overflow: hidden; flex: none; }
.pk-btn-ico > svg { grid-area: 1 / 1; transition: transform var(--pk-anim); }
.pk-btn-ico > svg:nth-child(2) { transform: translate(-110%, 110%); }
@media (hover: hover) and (pointer: fine) {
  .pk-btn:hover .pk-btn-bg { inset: .125em; }
  .pk-btn:hover .pk-btn-txt > span { transform: translateY(-1.3em); }
  .pk-btn:hover .pk-btn-ico > svg:nth-child(1) { transform: translate(110%, -110%); }
  .pk-btn:hover .pk-btn-ico > svg:nth-child(2) { transform: none; }
}
.pk-btn:active .pk-btn-bg { transform: scale(.95); }

/* Bordure pointillée avec reflet qui tourne (bouton WhatsApp de Pulsor) */
@property --pk-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.pk-ring { position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--pk-a), transparent 0 260deg, rgba(255, 255, 255, .95) 360deg), rgba(255, 255, 255, .14);
  -webkit-mask: radial-gradient(closest-side, #0000 calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(closest-side, #0000 calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: pk-ring 4s linear infinite; }
@keyframes pk-ring { to { --pk-a: 360deg; } }

/* Bordure lumineuse qui fait le tour d'une carte (offre mise en avant) */
.pk-border-glow { position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--pk-a), transparent 0 70%, var(--pk-glow) 85%, transparent 100%), rgba(255, 255, 255, .06);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: pk-ring 6s linear infinite; }

/* Anneau qui pulse (bouton flottant) */
.pk-pulse::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid currentColor; animation: pk-pulse 2.2s var(--pk-ease) infinite; }
@keyframes pk-pulse { from { transform: scale(1); opacity: .8; } to { transform: scale(1.8); opacity: 0; } }

/* ═════════════ Démos : faux curseur, frappe ═════════════ */

.pk-cursor { position: absolute; left: 0; top: 0; z-index: 20; pointer-events: none; opacity: 0;
  transition: opacity .22s ease, transform .75s var(--pk-ease-out); }
.pk-cursor svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .25)); transition: transform .2s var(--pk-ease); }
.pk-cursor b { position: absolute; left: 18px; top: 20px; padding: 3px 9px; border-radius: 7px; background: var(--pk-glow); color: var(--pk-ink);
  font: 600 12px/18px var(--pk-font, system-ui); white-space: nowrap; box-shadow: var(--pk-sh-base); }
.pk-cursor.is-click svg { transform: scale(.85); }
.pk-typing { display: inline-flex; gap: 4px; padding: 10px 12px; border-radius: 14px; }
.pk-typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; animation: pk-dot 1s ease-in-out infinite; }
.pk-typing i:nth-child(2) { animation-delay: .15s; } .pk-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes pk-dot { 0%, 60%, 100% { transform: none; opacity: .35; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ═════════════ Odomètre ═════════════ */
.pk-odo { display: inline-flex; align-items: flex-start; overflow: hidden; height: 1.1em; line-height: 1.1; vertical-align: bottom;
  -webkit-mask: linear-gradient(#0000, #fff 12% 88%, #0000); mask: linear-gradient(#0000, #fff 12% 88%, #0000); }
.pk-odo > span { display: flex; flex-direction: column; transition: transform .9s var(--pk-ease-elastic); }
.pk-odo > span > i { display: block; font-style: normal; height: 1.1em; text-align: center; white-space: nowrap; }
.pk-odo > span[data-digit] { align-items: center; }

/* ═════════════ Mouvement réduit ═════════════ */
@media (prefers-reduced-motion: reduce) {
  .pk-grain, .pk-halo, .pk-sweep::after, .pk-ring, .pk-border-glow, .pk-pulse::before { animation: none !important; }
}

/* ═════════════ Ajouts Awwwards ═════════════ */

/* Mot qui tourne */
.pk-rot { position: relative; display: inline-block; vertical-align: bottom; white-space: nowrap; transition: width .6s var(--pk-ease); }
.pk-rot-w { display: inline-block; }
.pk-rot-w + .pk-rot-w { position: absolute; left: 0; top: 0; }
.pk-rot-w i { display: inline-block; font-style: inherit; transition: transform .6s var(--pk-ease), opacity .5s var(--pk-ease), filter .5s var(--pk-ease); transition-delay: calc(var(--i) * 22ms); }
.pk-rot-w.is-in i { transform: translateY(.45em); opacity: 0; filter: blur(6px); }
.pk-rot-w.is-out i { transform: translateY(-.45em); opacity: 0; filter: blur(6px); }

/* Texte qui s'écrit en balayage : la couleur pleine avance, le reste reste en fantôme */
.pk-sweep-txt { --p: 0%; background: linear-gradient(90deg, currentColor var(--p), color-mix(in srgb, currentColor 18%, transparent) calc(var(--p) + 6%));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Cartes qui s'empilent */
@media (min-width: 900px) {
  [data-pk-stack] .pk-stack-card { position: sticky; top: calc(110px + var(--i, 0) * 18px); transform-origin: 50% 0; }
}

/* ═════════════ Formes Pulsor ═════════════ */

/* Texte qui se décode */
.pk-sc { display: inline; transition: opacity .2s; }
.pk-sc.is-noise { background: currentColor; color: var(--pk-bg, #fff); border-radius: 1px; }

/* Repères de visée aux quatre coins (préchargeur Pulsor) : .pk-frame sur un bloc positionné */
.pk-frame { position: relative; }
.pk-frame::after { content: ""; position: absolute; inset: var(--pk-frame-inset, -10px); pointer-events: none; z-index: 3;
  --l: var(--pk-frame-len, 18px); --c: var(--pk-frame-color, currentColor);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 0 0 / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) 0 100% / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 0 100% / 1.5px var(--l),
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--l) 1.5px, linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px var(--l);
  background-repeat: no-repeat; opacity: .55; transition: inset .6s var(--pk-ease), opacity .4s; }
.pk-frame:hover::after { inset: calc(var(--pk-frame-inset, -10px) - 6px); opacity: .9; }

/* Colonnes de points (le « skyline » du héros Pulsor) : .pk-dotcols contient un canvas data-pk-dots */
.pk-dotcols { position: absolute; pointer-events: none;
  --cw: 12.29%; --gw: calc((100% - var(--cw) * 6) / 5);
  -webkit-mask-image: repeating-linear-gradient(to right, #000 0 var(--cw), transparent var(--cw) calc(var(--cw) + var(--gw))), linear-gradient(#0000, #000 30%, #000 70%, #0000);
  -webkit-mask-composite: source-in;
  mask-image: repeating-linear-gradient(to right, #000 0 var(--cw), transparent var(--cw) calc(var(--cw) + var(--gw))), linear-gradient(#0000, #000 30%, #000 70%, #0000);
  mask-composite: intersect; }
.pk-dotcols canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Règle graduée verticale */
.pk-ruler { position: absolute; width: 14px; pointer-events: none; opacity: .4;
  background: repeating-linear-gradient(currentColor 0 1px, transparent 1px 10px) left / 6px 100% no-repeat, repeating-linear-gradient(currentColor 0 1px, transparent 1px 50px) left / 14px 100% no-repeat;
  -webkit-mask: linear-gradient(#0000, #000 15% 85%, #0000); mask: linear-gradient(#0000, #000 15% 85%, #0000); }

/* Crochets [ … ] autour d'un mot */
.pk-brackets::before { content: "[ "; color: var(--pk-brand); } .pk-brackets::after { content: " ]"; color: var(--pk-brand); }

/* Logo numérisé à la Pulsor : une trame de points qui scintille, découpée par le logo
 * ET par six grandes bandes verticales, qui apparaît en diagonale à l'arrivée.
 * <div class="pk-logo-dots" style="--logo:url(/assets/logo.svg)"> (chemin ABSOLU : une url dans une variable se résout depuis la feuille du kit)<canvas data-pk-dots …></canvas></div>
 * PK.logoDots() ajoute .is-in à l'arrivée. */
@property --pk-r { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
.pk-logo-dots { position: relative; pointer-events: none; --pk-bands: 6;
  --cw: calc(100% / (var(--pk-bands) * 1.25)); --gw: calc((100% - var(--cw) * var(--pk-bands)) / (var(--pk-bands) - 1));
  -webkit-mask-image: var(--logo), repeating-linear-gradient(to right, #000 0 var(--cw), transparent var(--cw) calc(var(--cw) + var(--gw))), linear-gradient(135deg, #000 var(--pk-r), transparent calc(var(--pk-r) + 12%));
  -webkit-mask-size: contain, 100% 100%, 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
  -webkit-mask-composite: source-in, source-in;
  mask-image: var(--logo), repeating-linear-gradient(to right, #000 0 var(--cw), transparent var(--cw) calc(var(--cw) + var(--gw))), linear-gradient(135deg, #000 var(--pk-r), transparent calc(var(--pk-r) + 12%));
  mask-size: contain, 100% 100%, 100% 100%; mask-repeat: no-repeat; mask-position: center; mask-composite: intersect;
  transition: --pk-r 2.6s var(--pk-ease-io); }
.pk-logo-dots.is-in { --pk-r: 130%; }
.pk-logo-dots canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) { .pk-logo-dots { --pk-r: 130%; transition: none; } }