/* V7: spring-wave keys, a raised project totem, and a fuller sliding call to action. */
.pk-key { --pk-proximity: 0; --project-color: var(--accent); --project-soft: #82eed220; }
.pk-key-icon { width: 33px; height: 33px; opacity: 1; }
.pk-key-icon :is(svg,img) { filter: drop-shadow(0 1px 1px #00000012); }
.pk-stage { z-index: 1; }
.pk-board-status i { background: var(--active-project-color,var(--accent)); box-shadow: 0 0 9px color-mix(in srgb,var(--active-project-color,var(--accent)) 50%,transparent); transition: background .3s,box-shadow .3s; }
.pk-floating-project {
  position: absolute;
  left: 0;
  top: 0;
  width: 92px;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  translate: var(--float-x, 0px) var(--float-y, 0px);
  transition: opacity .18s ease, visibility .18s;
  will-change: translate;
}
.pk-floating-project.is-visible {
  opacity: 1;
  visibility: visible;
  transition: translate .44s cubic-bezier(.16,.9,.25,1.13), opacity .15s ease, visibility 0s;
}
.pk-floating-core {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1px solid color-mix(in srgb, var(--project-color) 38%, var(--line));
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 2px 0 #ffffff18 inset, 0 18px 35px #00000030, 0 0 38px var(--project-soft);
  backdrop-filter: blur(12px);
  rotate: var(--float-lean, 0deg);
  transform-style: preserve-3d;
  transition: rotate .4s cubic-bezier(.2,.8,.3,1);
}
.pk-floating-art { display: block; width: 54px; height: 54px; }
.pk-floating-art :is(svg,img) { display: block; width: 100%; height: 100%; filter: drop-shadow(0 4px 3px #00000025); }
.pk-floating-name {
  padding: 5px 8px;
  margin-top: 7px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  border-radius: 5px;
  font: 550 10px/1.2 var(--font);
  white-space: nowrap;
  box-shadow: 0 4px 12px #00000010;
}
.pk-floating-thread { height: 18px; width: 1px; background: linear-gradient(var(--project-color), transparent); opacity: .65; }
.pk-floating-project.is-visible .pk-floating-core { animation: project-float 2.6s ease-in-out infinite; }
@keyframes project-float { 0%,100% { transform: translateY(0) rotateX(var(--float-depth,0deg)); } 50% { transform: translateY(-7px) rotateX(var(--float-depth,0deg)); } }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .pk-key-icon {
    translate: 0 calc(var(--pk-proximity) * -6px);
    scale: calc(1 + var(--pk-proximity) * .34);
    transition: none;
  }
  .pk-key {
    translate: 0 calc(var(--pk-proximity) * -2px) calc(var(--pk-proximity) * 5px);
  }
  .pk-key::before {
    content: "";
    position: absolute;
    inset: -1px;
    border: 1px solid var(--project-color);
    border-radius: inherit;
    opacity: calc(var(--pk-proximity) * .9);
    box-shadow: 0 0 19px var(--project-soft), 0 0 15px var(--project-soft) inset;
    pointer-events: none;
    transition: opacity .18s, box-shadow .18s;
  }
  :root[data-theme] .pk-key:hover:not(:active):not(.is-pressed),
  :root[data-theme] .pk-key.is-project-preview:not(:active):not(.is-pressed) {
    transform: translateZ(6px) translateY(4px);
    border-color: var(--project-color);
    filter: brightness(1.035);
    box-shadow: 0 1px 1px #ffffff12 inset, 0 -2px 2px #0000001a inset,
      0 2px 0 var(--pk-edge), 0 4px 0 var(--pk-edge), 0 5px 0 #00000045,
      0 8px 8px #00000025, 0 0 20px var(--project-soft);
    translate: 0 0 0;
    transition-duration: .13s;
  }
  :root[data-theme] .pk-key:active,
  :root[data-theme] .pk-key.is-pressed { transform: translateZ(3px) translateY(7px); transition-duration: .07s; }
  .pk-key.is-project-preview .pk-key-icon { translate: 0 -3px; scale: 1.18; }
}
@media (min-width: 761px) and (prefers-reduced-motion: no-preference) {
  .pk-stage {
    translate: var(--pk-scroll-slide, 0px) var(--pk-scroll-lift, 0px);
    scale: var(--pk-scroll-scale, 1);
    transition: translate .55s cubic-bezier(.2,.7,.3,1), scale .55s cubic-bezier(.2,.7,.3,1);
  }
  .pk-shell {
    transform: rotateX(calc(38deg + var(--pk-turn-x) + var(--pk-scroll-x, 0deg))) rotateY(var(--pk-turn-y)) rotateZ(calc(-15deg + var(--pk-scroll-z, 0deg)));
  }
}
.project-cta-slide {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  user-select: none;
  padding: 10px 12px 10px 13px;
  gap: 13px;
  min-height: 54px;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: color-mix(in srgb,var(--surface) 40%,transparent);
  transition: color .32s, border-color .32s;
}
.project-cta-slide::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  background: var(--ink);
  transform: translateY(105%);
  border-radius: 35% 35% 0 0;
  transition: transform .5s var(--motion-ease),border-radius .5s;
}
.project-cta-slide>.cta-mark { width: 24px; height: 24px; display: block; font-size: 0; transition: transform .4s; }
.cta-mark :is(svg,img) { display: block; width: 100%; height: 100%; }
.project-cta-slide>.cta-label { position: relative; height: 18px; overflow: hidden; line-height: 18px; font-size: 12px; color: inherit; transform: none; }
.cta-label>span { display: block; transition: transform .5s var(--motion-ease); }
.cta-label>span:nth-child(2) { position: absolute; top: 100%; left: 0; white-space: nowrap; }
.project-cta-slide>.cta-arrow { position: relative; width: 28px; height: 28px; margin-left: 15px; overflow: hidden; line-height: 28px; color: var(--accent); transform: none; }
.cta-arrow>i { display: block; text-align: center; font-style: normal; transition: transform .5s var(--motion-ease); }
.cta-arrow>i:nth-child(2) { position: absolute; top: 0; left: 0; width: 100%; transform: translate(-115%,115%); }
.project-cta-slide:is(:hover,:focus-visible) { color: var(--bg); border-color: var(--ink); }
.project-cta-slide:is(:hover,:focus-visible)::before { transform: translateY(0); border-radius: 0; }
.project-cta-slide:is(:hover,:focus-visible)>.cta-label { transform: none; }
.project-cta-slide:is(:hover,:focus-visible) .cta-label>span { transform: translateY(-100%); }
.project-cta-slide:is(:hover,:focus-visible)>.cta-mark { transform: translateY(-3px) rotate(-10deg) scale(1.12); }
.project-cta-slide:is(:hover,:focus-visible)>.cta-arrow { transform: none; color: var(--bg); }
.project-cta-slide:is(:hover,:focus-visible) .cta-arrow>i:first-child { transform: translate(115%,-115%); }
.project-cta-slide:is(:hover,:focus-visible) .cta-arrow>i:nth-child(2) { transform: translate(0,0); }
.motion-cursor.is-project-key .motion-cursor-label { display: none; }
.motion-cursor.is-project-key .motion-cursor-ring { background: transparent; border-color: var(--cursor-project-color, var(--accent)); opacity: .8; }
@media (max-width: 640px) {
  .pk-key-icon { width: 27px; height: 27px; }
  .pk-floating-core { width: 56px; height: 56px; border-radius: 16px; }
  .pk-floating-art { width: 41px; height: 41px; }
  .project-cta-slide>.cta-label { font-size: 11px; }
}
@media (max-width: 390px) { .pk-key-icon { width: 24px; height: 24px; } }
@media (prefers-reduced-motion: reduce) {
  .pk-floating-project, .pk-floating-core, .pk-floating-art { animation: none!important; transition: none!important; }
  .pk-key, .pk-key-icon { translate: none; scale: 1; }
  .project-cta-slide, .project-cta-slide::before, .project-cta-slide span, .project-cta-slide i { transition: none!important; }
  .pk-stage { translate: none; scale: 1; }
}