/* ==========================================================================
   Profile section, scroll-driven (desktop). js/profile.js pins .pa and sets,
   from the eased scroll position:
     --t     0 to 3, which part of the profile we are at
     --sub   -0.5 to 0.5, how far between two parts (drives the drift)
     --k     on each card on the left: 1 for the current one, fading to 0
   Without it the hover / auto-play version in css/gig.css is used.
   ========================================================================== */

.pa-runway--pin {
  height: 380vh;
}

.pa--pin {
  position: sticky;
  top: calc(var(--header-h) + 0.75rem);
}

/* cards lean towards the stage as they become the current one */
.pa--pin .pa-item {
  translate: calc(var(--k, 0) * 10px) 0;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.35s ease;
}

.pa--pin .pa-item:not(.is-active) {
  opacity: calc(0.62 + 0.38 * var(--k, 0));
}

/* layered parallax: the mock-up, its parts and the decorations all drift at their own speed */
.pa--pin .pa-mock {
  translate: 0 calc(var(--sub, 0) * -26px);
  rotate: calc((var(--t, 0) - 1.5) * 1.1deg);
}

.pa--pin .pa-zone {
  translate: 0 calc((var(--zi, 0) - var(--t, 0)) * -5px);
}

.pa--pin .pa-stage__ring {
  rotate: calc(var(--t, 0) * 38deg);
  translate: calc(var(--t, 0) * -18px) calc(var(--t, 0) * 14px);
}

.pa--pin .pa-bubble--star {
  translate: calc(var(--t, 0) * -10px) calc(var(--t, 0) * 34px);
  rotate: calc(var(--t, 0) * 26deg);
}

.pa--pin .pa-bubble--cam {
  translate: calc(var(--t, 0) * 12px) calc(var(--t, 0) * -40px);
  rotate: calc(var(--t, 0) * -24deg);
}

@media (prefers-reduced-motion: reduce) {
  .pa--pin .pa-mock,
  .pa--pin .pa-zone,
  .pa--pin .pa-stage__ring,
  .pa--pin .pa-bubble,
  .pa--pin .pa-item {
    translate: none;
    rotate: none;
  }
}