/* ==========================================================================
   Keyholder Pass  (Juice Unlocked)
   A holographic, flipping, lanyard-hung member pass.
   Pair with assets/pass/pass.js. Markup hook: <div class="kpass" data-kpass data-state="locked"></div>
   Everything scales from the pass width: set --kpass-w on .kpass (default 360px).
   ========================================================================== */

@property --mx    { syntax: "<number>";     inherits: true;  initial-value: .5; }
@property --my    { syntax: "<number>";     inherits: true;  initial-value: .5; }
@property --flood { syntax: "<percentage>"; inherits: true;  initial-value: 0%; }
@property --sweep { syntax: "<percentage>"; inherits: true;  initial-value: 130%; }

.kpass {
  /* palette: falls back to the logo colors when site.css is not loaded */
  --kp-juice:  var(--juice, #FF5D00);
  --kp-deep:   var(--juice-deep, #EC3C00);
  --kp-bright: var(--juice-bright, #FC6C14);
  --kp-ink:    var(--ink, #0B0B0B);
  --kp-ink2:   var(--ink-2, #151311);
  --kp-cream:  var(--cream, #FFF174);
  --kp-yellow: var(--yellow, #FFD902);
  --kp-leaf:   var(--leaf, #288407);
  --kp-ground: #0B0B0B;            /* what shows through the punched slot */
  --kp-display: var(--nf-display, "Bebas Neue"), Impact, "Arial Narrow Bold", sans-serif;
  --kp-sans: Inter, "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kp-mono: var(--mono, ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace);

  --kpass-w: 360px;
  --tilt: 12deg;                     /* max pointer tilt */
  --strap: 46cqw;                    /* lanyard height above the card */
  --kx: 50%; --ky: 39%;              /* keyhole position on the front (set by JS) */
  --mx: .5; --my: .5;

  position: relative;
  box-sizing: border-box;
  width: var(--kpass-w);
  max-width: 100%;
  container-type: inline-size;
  padding-top: calc(var(--kpass-w) * .46);   /* = --strap, resolved outside the container */
  margin-inline: auto;
  perspective: 1500px;
  perspective-origin: 50% 30%;
  font-family: var(--kp-sans);
  color: var(--kp-ink);
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}
.kpass *, .kpass *::before, .kpass *::after { box-sizing: border-box; }
.kpass[data-state="unlocked"] { --flood: 160%; }

/* ---------- 3D chain: swing (lanyard + card) > tilt > card > faces ---------- */
.kpass__swing {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% calc(-1 * var(--strap));
}
.kpass.is-intro .kpass__swing { animation: kp-swing-in 2.6s cubic-bezier(.3,.7,.3,1) both; }
.kpass.is-swinging .kpass__swing { animation: kp-swing-hover 1.8s cubic-bezier(.3,.7,.3,1) both; }
.kpass.is-thunk .kpass__swing { animation: kp-thunk .34s cubic-bezier(.2,.9,.3,1.4) both; }

.kpass__tilt {
  position: relative;
  transform-style: preserve-3d;
  transform-origin: 50% 0;
  transform:
    rotateX(calc((var(--my) - .5) * -2 * var(--tilt)))
    rotateY(calc((var(--mx) - .5) *  2 * var(--tilt)));
}

/* idle: a slow figure-eight shimmer so the foil is alive without input */
.kpass[data-motion="auto"] { animation: kp-shimmer 11s ease-in-out infinite; --tilt: 5deg; }
/* Off screen (pass.js toggles .is-offscreen): freeze the shimmer and sweep. They animate --mx/--my/--sweep under
   blend modes, masks and blur, so each frame repaints the whole card. Left running while the reader sits elsewhere
   on the page, phones (iPhones most) run out of graphics memory and the browser reloads the tab with a white flash. */
.kpass.is-offscreen, .kpass.is-offscreen * { animation-play-state: paused !important; }

.kpass__card {
  position: relative;
  aspect-ratio: 54 / 85.6;          /* CR80 portrait */
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.25,.9,.25,1.08);
  cursor: pointer;
  border-radius: 5.8cqw;
  outline: none;
}
.kpass[data-flipped="true"] .kpass__card { transform: rotateY(180deg); }
.kpass__card:focus-visible .kpass__face { box-shadow: 0 0 0 3px var(--kp-ground), 0 0 0 6px var(--kp-cream), 0 40px 70px -26px rgba(0,0,0,.85); }

.kpass__face {
  position: absolute; inset: 0;
  border-radius: 5.8cqw;
  overflow: hidden;
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(.6px);
  box-shadow: 0 1px 2px rgba(0,0,0,.55), 0 12px 22px -10px rgba(0,0,0,.75);
  transition: box-shadow .8s ease;
}
.kpass__back { transform: rotateY(180deg) translateZ(.6px); }

/* card edge: the 0.76mm "thickness" seen mid-flip */
.kpass__edge {
  position: absolute; top: 5.8cqw; bottom: 5.8cqw; width: 2px;
  background: linear-gradient(180deg, #ffb27a, var(--kp-deep) 30%, #3a1200 70%, #1a0a02);
}
.kpass__edge--l { left: -1px;  transform: rotateY(90deg); }
.kpass__edge--r { right: -1px; transform: rotateY(-90deg); }

/* shared face layers */
.kp-layer { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }

/* glossy laminate: glare follows the pointer, plus a fixed top sheen */
.kp-glare {
  z-index: 40;
  background:
    radial-gradient(farthest-corner circle at calc(var(--mx) * 100%) calc(var(--my) * 100%),
      rgba(255,255,255,.62) 0%, rgba(255,255,255,.18) 18%, rgba(255,255,255,0) 42%, rgba(0,0,0,.28) 100%);
  mix-blend-mode: overlay;
  opacity: .9;
}
.kp-sheen {
  z-index: 41;
  background: linear-gradient(172deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.05) 22%, transparent 38%);
  mix-blend-mode: screen;
}
/* edge highlight: a bevel of light along the die-cut */
.kp-bevel {
  z-index: 42;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 1px 0 0 rgba(255,255,255,.22),
    inset -1px 0 0 rgba(0,0,0,.25),
    inset 0 -2px 0 rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(0,0,0,.25);
}

/* holographic foil.
   One foil, two finishes: the SAME holo layers sit on both states.
   Unlocked = full vivid holo (flooded out from the keyhole by --flood).
   Locked   = the same foil desaturated, blurred and dimmed under a frosted laminate.
   The iridescent conic band is visible at rest, so it reads as holo in a still screenshot. */
.kp-holo {
  z-index: 3;
  background:
    /* iridescent band: cream / yellow / green / magenta-violet, centred near the keyhole, turns with the pointer */
    conic-gradient(from calc(150deg + var(--mx) * 120deg) at calc(22% + var(--mx) * 56%) calc(30% + var(--my) * 40%),
      #fff174 0deg, #ffd902 34deg, #8dff6a 62deg, #2fd6c8 84deg, #b06bff 120deg, #ff4fbf 156deg,
      #fff6c8 196deg, #ffd902 232deg, #8dff6a 262deg, #b06bff 300deg, #ff4fbf 330deg, #fff174 360deg),
    /* fine diffraction lines */
    repeating-linear-gradient(28deg,
      rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 1.2%, rgba(255,255,255,0) 2.4%);
  background-size: 100% 100%, 100% 100%;
  mix-blend-mode: color-dodge;
  opacity: .38;
  -webkit-mask-image: radial-gradient(circle at var(--kx) var(--ky), #000 calc(var(--flood) - 14%), transparent var(--flood));
          mask-image: radial-gradient(circle at var(--kx) var(--ky), #000 calc(var(--flood) - 14%), transparent var(--flood));
  transition: opacity 1s ease, filter 1s ease;
}
/* sparkle: foil glitter flecks (static noise, so they show in a still) that drift against the pointer */
.kp-sparkle {
  z-index: 4;
  background:
    repeating-linear-gradient(135deg, #fff174 0%, #ffffff 6%, #ffb36b 12%, #9dff7a 18%, #d9a8ff 24%, #fff174 30%);
  background-size: 300% 300%;
  background-position: calc((1 - var(--mx)) * 100%) calc((1 - var(--my)) * 100%);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 26 -16.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 26 -16.4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size: 140px 140px; mask-size: 140px 140px;
  mix-blend-mode: screen;
  opacity: .9;
  transition: opacity 1.2s ease, filter 1s ease;
}

/* LOCKED: same foil, frosted. Desaturate + blur the holo layers (no keyhole mask), dim the stock. */
.kpass[data-state="locked"] .kp-holo { -webkit-mask-image: none; mask-image: none; filter: grayscale(1) blur(2px); opacity: .26; }
.kpass[data-state="locked"] .kp-iris { --flood-mask: linear-gradient(#000, #000); filter: grayscale(1) blur(1.6px); opacity: .3; }
.kpass[data-state="locked"] .kp-sparkle { opacity: .35; filter: grayscale(1) blur(.6px); }
.kpass[data-state="locked"] .kp-guilloche { filter: blur(.7px); }

/* foil sweep: a band of light that crosses the pass every few seconds once unlocked */
.kp-sweep {
  z-index: 43;
  background: linear-gradient(105deg, transparent 36%, rgba(255,241,116,.0) 40%, rgba(255,241,116,.55) 47%, rgba(255,255,255,.9) 50%, rgba(255,217,2,.5) 53%, transparent 62%);
  background-size: 260% 100%;
  background-position: var(--sweep) 0;
  mix-blend-mode: overlay;
  opacity: 0;
}
.kpass[data-state="unlocked"] .kp-sweep { opacity: 1; animation: kp-sweep 6.5s cubic-bezier(.45,0,.2,1) 1.2s infinite; }

/* frosted laminate over a locked pass: milky frost + dark tint. It sits under the printed
   text (z 8 < .kp-front-inner z 10) so names, the stamp and the title stay crisp. */
.kp-frost {
  z-index: 8;
  background:
    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='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .38 -.14'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 70% at 30% 0%, rgba(255,246,236,.22), rgba(255,246,236,0) 60%),
    linear-gradient(180deg, rgba(20,16,14,.30), rgba(8,6,5,.58));
  mix-blend-mode: normal;
  opacity: 0;
  transition: opacity 1.1s ease;
}
.kpass[data-state="locked"] .kp-frost { opacity: 1; }
.kpass.is-unlocking .kp-frost { opacity: 0; transition-delay: .9s; }

/* ============================== FRONT ============================== */
.kpass__front { color: var(--kp-ink); }
.kp-base {
  z-index: 0;
  background:
    radial-gradient(110% 62% at 12% -4%, #ff9a52 0%, rgba(255,140,60,0) 58%),
    radial-gradient(90% 55% at 105% 102%, #b82e00 0%, rgba(184,46,0,0) 62%),
    linear-gradient(162deg, #ff6a0e 0%, #ff5d00 40%, #e33d00 100%);
  transition: filter 1.2s ease;
}
.kpass[data-state="locked"] .kp-base { filter: saturate(.38) brightness(.62) contrast(1.02); }
.kpass.is-unlocking .kp-base { filter: none; transition-delay: .6s; }

/* guilloche rosette, printed fine-line security pattern */
.kp-guilloche { z-index: 1; width: 100%; height: 100%; overflow: hidden; color: rgba(60,14,0,.30); }


/* embossed microtext, pressed into the card stock along the left edge */
.kp-emboss {
  position: absolute; z-index: 6; left: 2.6cqw; top: 33cqw;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 400 4.2cqw/1 var(--kp-display); letter-spacing: .34em; white-space: nowrap;
  color: rgba(120,30,0,.18);
  text-shadow: 1px 1px 0 rgba(255,255,255,.28), -1px -1px 0 rgba(60,10,0,.30);
  pointer-events: none; user-select: none;
}

/* glow cast on the wall behind an unlocked pass (kept out of the 3D layers so it never clips).
   The box stays inside the pass width; the spread comes from box-shadow, which is paint-only
   and never adds page scroll width (a wider box made pass.html scroll sideways at 390px). */
.kpass::before {
  content: ""; position: absolute; z-index: -1; left: 14%; right: 14%;
  top: calc(var(--kpass-w) * .46 + 14%); bottom: 8%;
  border-radius: 50%;
  background: rgba(255,93,0,.26);
  box-shadow: 0 0 60px 50px rgba(255,93,0,.26);
  opacity: 0; transition: opacity 1.4s ease; pointer-events: none;
}
.kpass[data-state="unlocked"]::before { opacity: 1; }
/* soft contact shadow on the wall below the pass */
.kpass::after {
  content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -7%; height: 16%;
  background: radial-gradient(closest-side, rgba(0,0,0,.75), rgba(0,0,0,0));
  pointer-events: none;
}

/* iridescent band: a broad diagonal rainbow sweep (hard-light, so green and violet survive on
   orange where color-dodge alone can only brighten toward yellow). Visible at rest; slides with the pointer. */
.kp-iris {
  --band: linear-gradient(118deg, transparent 26%, #000 38%, #000 46%, transparent 58%);
  --flood-mask: radial-gradient(circle at var(--kx) var(--ky), #000 calc(var(--flood) - 14%), transparent var(--flood));
  z-index: 5;
  background:
    repeating-linear-gradient(118deg,
      #fff174 0%, #8dff6a 1.5%, #2fd6c8 3%, #b06bff 4.6%, #ff4fbf 6.2%, #ffd902 7.8%, #fff174 9%);
  background-size: 220% 220%;
  background-position: calc(var(--mx) * 100%) calc(var(--my) * 100%);
  mix-blend-mode: hard-light;
  opacity: .34;
  -webkit-mask-image: var(--band), var(--flood-mask);
          mask-image: var(--band), var(--flood-mask);
  -webkit-mask-size: 200% 200%, 100% 100%; mask-size: 200% 200%, 100% 100%;
  -webkit-mask-position: calc(100% - var(--mx) * 100%) calc(100% - var(--my) * 100%), 0 0;
          mask-position: calc(100% - var(--mx) * 100%) calc(100% - var(--my) * 100%), 0 0;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  transition: opacity 1s ease, filter 1s ease;
}

/* punched slot for the clip */
.kp-slot {
  position: absolute; z-index: 50; left: 50%; top: 3.2cqw;
  width: 22cqw; height: 4cqw; transform: translateX(-50%);
  border-radius: 3cqw;
  background: var(--kp-ground);
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.9),
    0 1px 0 rgba(255,255,255,.35),
    0 -1px 0 rgba(0,0,0,.35);
}

.kp-front-inner {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  padding: 10cqw 7cqw 0;
}
.kp-head { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; }
.kp-logo {
  width: 15.5cqw; height: 15.5cqw; border-radius: 50%; display: block; flex: none;
  object-fit: cover;
  box-shadow: 0 0 0 .9cqw var(--kp-ink), 0 0 0 1.25cqw rgba(255,255,255,.35), 0 1.6cqw 2.4cqw rgba(0,0,0,.4);
  background: var(--kp-juice);
}
.kp-meta {
  text-align: right; font: 700 2.55cqw/1.45 var(--kp-mono); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(40,10,0,.78);
  text-shadow: 0 1px 0 rgba(255,255,255,.28), 0 -1px 0 rgba(0,0,0,.18);
}
.kp-meta b { display: block; font-weight: 800; color: var(--kp-ink); }

/* lock zone */
.kp-lockzone { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; }
.kp-lock { width: 37cqw; height: auto; overflow: visible; display: block; margin-top: 1cqw; filter: drop-shadow(0 2.2cqw 2.2cqw rgba(60,10,0,.45)); }
.kp-lock .kp-shackle { transform-box: view-box; transform-origin: 34px 70px; transition: transform .75s cubic-bezier(.3,1.7,.45,1); }
.kpass[data-state="unlocked"] .kp-lock .kp-shackle,
.kpass.is-step-shackle .kp-lock .kp-shackle { transform: translateY(-15px) rotate(-30deg); }
.kp-lock .kp-keyhole { transition: fill .4s ease; }
.kp-lock .kp-keyglow { opacity: 0; transition: opacity .5s ease; }
.kpass[data-state="unlocked"] .kp-lock .kp-keyglow,
.kpass.is-step-glow .kp-lock .kp-keyglow { opacity: 1; }
.kpass[data-state="unlocked"] .kp-lock .kp-keyhole,
.kpass.is-step-glow .kp-lock .kp-keyhole { fill: #FFF6B8; }
.kpass.is-step-glow .kp-lock .kp-keyglow { animation: kp-pulse .9s ease-in-out infinite alternate; }

/* the key: pushes into the keyhole, then turns a quarter */
.kp-lock .kp-key { transform-box: view-box; transform-origin: 60px 98px; opacity: 0; transform: scale(1.7) rotate(0deg); }
.kpass[data-state="unlocked"] .kp-lock .kp-key { opacity: 1; transform: scale(1) rotate(90deg); }
.kpass.is-step-key .kp-lock .kp-key { animation: kp-key 1s cubic-bezier(.4,0,.2,1) forwards; }

/* rubber stamp */
.kp-stamp {
  position: absolute; z-index: 12; right: -1cqw; top: 2cqw;
  font: 400 8.6cqw/1 var(--kp-display); letter-spacing: .06em;
  padding: 1.6cqw 2.6cqw .7cqw; border-radius: 2cqw;
  transform: rotate(-13deg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -4 3.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -4 3.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-mask-size: 120px 60px; mask-size: 120px 60px;
  pointer-events: none;
}
/* LOCKED: cream ink on the dark frosted stock. UNLOCKED: solid black stamp with cream ink. */
.kp-stamp--locked {
  color: var(--kp-cream);
  background: rgba(11,11,11,.38);
  box-shadow: inset 0 0 0 .9cqw var(--kp-cream);
  text-shadow: 0 0 1px rgba(255,241,116,.6);
  transition: opacity .18s ease, transform .3s ease;
}
.kp-stamp--unlocked {
  color: var(--kp-cream); background: var(--kp-ink);
  box-shadow: inset 0 0 0 .7cqw var(--kp-cream), 0 0 0 .7cqw var(--kp-ink);
  opacity: 0; transform: rotate(-9deg) scale(1.9);
  right: -2cqw;
}
.kpass[data-state="unlocked"] .kp-stamp--locked { opacity: 0; transform: rotate(-20deg) scale(.7); }
.kpass[data-state="unlocked"] .kp-stamp--unlocked { opacity: 1; transform: rotate(-9deg) scale(1); }
.kpass.is-step-stamp .kp-stamp--locked { opacity: 0; transform: rotate(-20deg) scale(.7); }
.kpass.is-step-stamp .kp-stamp--unlocked { animation: kp-stamp .42s cubic-bezier(.5,0,.75,0) forwards; }

/* title: Juice Unlocked headline type (white fill, thick outside stroke, black extrusion) */
.kp-title { position: relative; margin: 0; text-align: left; }
.kp-juice {
  display: block;
  font: 400 21.6cqw/.84 var(--kp-display);
  letter-spacing: .012em;
  color: #fff;
  -webkit-text-stroke: .12em var(--kp-ink);
  paint-order: stroke fill;
  text-shadow:
    .012em .012em 0 var(--kp-ink), .024em .024em 0 var(--kp-ink), .036em .036em 0 var(--kp-ink),
    .048em .048em 0 var(--kp-ink), .06em .06em 0 var(--kp-ink), .07em .07em 0 var(--kp-ink),
    .09em .16em .18em rgba(40,8,0,.55);
  margin-left: -.02em;
}
.kp-tag {
  display: inline-block; margin-top: 3cqw; padding: 1.7cqw 2.8cqw 1.2cqw;
  background: linear-gradient(180deg, #1c1816, #0b0b0b); border-radius: 1.6cqw;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 .8cqw 1.6cqw rgba(60,10,0,.35);
}
.kp-foil {
  display: block;
  font: 400 6.2cqw/1 var(--kp-display); letter-spacing: .2em; margin-right: -.2em;
  background: linear-gradient(100deg, #fff174 0%, #fffbe0 18%, #ffd902 34%, #fff 46%, #ffb36b 58%, #fff174 74%, #fffbe0 100%);
  background-size: 260% 100%;
  background-position: calc(var(--mx) * 100%) 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

/* data band */
.kp-band {
  position: relative; margin: 4.6cqw -7cqw 0; padding: 4.4cqw 7cqw 6.2cqw;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 3.2cqw 4cqw;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255,93,0,.16), transparent 55%),
    linear-gradient(180deg, #1a1614, #0b0b0b 60%);
  color: #fff;
}
.kp-band::before { /* foil hairline */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: .8cqw;
  background: linear-gradient(90deg, #ff5d00, #fff174, #ffd902, #8dff6a, #b06bff, #ff5d00);
  background-size: 200% 100%; background-position: calc(var(--mx) * 100%) 0;
}
.kp-field { min-width: 0; }
.kp-label {
  display: flex; align-items: center; gap: 1.2cqw;
  font: 700 2.3cqw/1 var(--kp-mono); letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,241,116,.72); margin-bottom: 1.3cqw;
}
.kp-label svg { width: 3.4cqw; height: 3.4cqw; flex: none; }
.kp-value {
  display: block; font: 400 5.4cqw/1 var(--kp-display); letter-spacing: .06em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase;
  text-shadow: 0 -1px 0 rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.12);
}
.kp-value--num { font-family: var(--kp-mono); font-weight: 700; font-size: 4.3cqw; letter-spacing: .08em; color: var(--kp-cream); }
.kp-value--small { font-size: 4.1cqw; letter-spacing: .08em; }
.kpass[data-state="locked"] .kp-value { color: rgba(255,255,255,.55); }
.kpass[data-state="locked"] .kp-value--num { color: rgba(255,241,116,.55); }
.kp-caret { display: inline-block; width: .55em; height: 1em; margin-left: .05em; vertical-align: -.12em; background: var(--kp-cream); animation: kp-caret .6s steps(1) infinite; }

/* ============================== BACK ============================== */
/* The back is printed on the same orange holo stock as the front (one object, two sides).
   Dark ink panels carry the perks; the seal, signature strip and "member since" sit on the foil. */
.kpass__back { color: var(--kp-ink); }
.kp-base--back {
  background:
    radial-gradient(110% 62% at 88% -4%, #ff9a52 0%, rgba(255,140,60,0) 58%),
    radial-gradient(90% 55% at -5% 102%, #b82e00 0%, rgba(184,46,0,0) 62%),
    linear-gradient(198deg, #ff6a0e 0%, #ff5d00 40%, #e33d00 100%);
}
.kp-guilloche--back { color: rgba(60,14,0,.26); }
/* mirrored: the back's foil moves the opposite way to the front as the card turns */
.kpass__back .kp-holo { -webkit-mask-image: none; mask-image: none; }
.kpass__back .kp-iris { --flood-mask: linear-gradient(#000, #000); }
.kpass__back .kp-holo {
  background:
    conic-gradient(from calc(330deg - var(--mx) * 120deg) at calc(78% - var(--mx) * 56%) calc(64% + var(--my) * 20%),
      #fff174 0deg, #ffd902 34deg, #8dff6a 62deg, #2fd6c8 84deg, #b06bff 120deg, #ff4fbf 156deg,
      #fff6c8 196deg, #ffd902 232deg, #8dff6a 262deg, #b06bff 300deg, #ff4fbf 330deg, #fff174 360deg),
    repeating-linear-gradient(-28deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.4) 1.2%, rgba(255,255,255,0) 2.4%);
}
.kpass__back .kp-iris { --band: linear-gradient(62deg, transparent 26%, #000 38%, #000 46%, transparent 58%); background-position: calc((1 - var(--mx)) * 100%) calc(var(--my) * 100%); }
.kpass__back .kp-glare { background: radial-gradient(farthest-corner circle at calc((1 - var(--mx)) * 100%) calc(var(--my) * 100%), rgba(255,255,255,.45) 0%, rgba(255,255,255,.1) 20%, rgba(255,255,255,0) 44%, rgba(0,0,0,.25) 100%); mix-blend-mode: soft-light; }

.kp-magstripe {
  position: absolute; z-index: 10; left: 0; right: 0; top: 11cqw; height: 15cqw;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2a2522 0%, #050505 22%, #141110 50%, #050505 78%, #2a2522 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(255,255,255,.06);
}
.kp-magstripe::after { /* a dull band of light on the oxide */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent calc((1 - var(--mx)) * 100% - 18%), rgba(255,255,255,.10) calc((1 - var(--mx)) * 100%), transparent calc((1 - var(--mx)) * 100% + 18%));
}
.kp-back-inner {
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column;
  padding: 31cqw 7cqw 5cqw;
}
.kp-back-head { display: flex; align-items: baseline; justify-content: space-between; gap: 3cqw; }
.kp-back-head h3 {
  margin: 0; font: 400 9cqw/.9 var(--kp-display); letter-spacing: .04em; color: var(--kp-ink);
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
.kp-back-head h3 em { font-style: normal; color: #fff; -webkit-text-stroke: .06em var(--kp-ink); paint-order: stroke fill; }
.kp-chip {
  font: 700 2.3cqw/1 var(--kp-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--kp-cream); background: var(--kp-ink); padding: 1.2cqw 1.8cqw; border-radius: 99px; white-space: nowrap;
}
.kp-perks {
  list-style: none; margin: 3cqw 0 0; padding: 3.2cqw 3.4cqw; display: grid; gap: 2.4cqw;
  background: linear-gradient(170deg, rgba(20,17,15,.92), rgba(8,7,6,.94));
  border-radius: 3cqw;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 0 0 .5cqw rgba(11,11,11,.25), 0 1.4cqw 3cqw rgba(60,12,0,.35);
}
.kp-perks li {
  display: grid; grid-template-columns: 7.4cqw 1fr; align-items: center; gap: 2.6cqw;
  font: 600 3.55cqw/1.25 var(--kp-sans); color: rgba(255,255,255,.92);
}
.kp-perks li small { display: block; font-weight: 400; font-size: 2.75cqw; color: rgba(255,255,255,.55); margin-top: .3cqw; }
.kp-ico {
  width: 7.4cqw; height: 7.4cqw; border-radius: 2cqw; display: grid; place-items: center;
  background: linear-gradient(160deg, #ff7a2a, #e94100); color: var(--kp-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 .8cqw 1.6cqw rgba(0,0,0,.4);
}
.kp-ico svg { width: 4.4cqw; height: 4.4cqw; }
/* A perk from the Control Room: its emoji in the tile, and each line kept to one row of the card. */
.kp-ico--emoji { font-size: 4.1cqw; line-height: 1; }
.kp-perks li > span:last-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-perks li small { overflow: hidden; text-overflow: ellipsis; }
.kp-ico--live { background: #101010; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.kp-ico--live i { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #39c414; box-shadow: 0 0 0 .8cqw rgba(57,196,20,.22), 0 0 2cqw rgba(57,196,20,.8); }

.kp-sig { margin-top: 4.2cqw; }
.kp-sig-strip {
  position: relative; height: 9cqw; border-radius: 1.2cqw; overflow: hidden;
  background:
    repeating-linear-gradient(-28deg, rgba(255,93,0,.16) 0 1.1cqw, transparent 1.1cqw 2.2cqw),
    linear-gradient(180deg, #fffdf0, #fff6c8);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
  display: flex; align-items: center; padding: 0 3cqw;
}
.kp-sig-strip span {
  font: italic 400 6.4cqw/1 "Brush Script MT", "Segoe Script", "Snell Roundhand", cursive;
  color: #1d2a6b; transform: rotate(-3deg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpass[data-state="locked"] .kp-sig-strip span { opacity: 0; }
.kp-sig-label { display: flex; justify-content: space-between; margin-top: 1.3cqw; font: 700 2.1cqw/1 var(--kp-mono); letter-spacing: .18em; color: rgba(11,11,11,.72); text-transform: uppercase; }

.kp-back-row { display: grid; grid-template-columns: 26cqw 1fr; gap: 4.4cqw; align-items: center; margin-top: 4.6cqw; }
.kp-qr { width: 26cqw; height: 26cqw; padding: 2cqw; border-radius: 2.4cqw; background: #fffdf0; box-shadow: 0 0 0 .6cqw var(--kp-ink), 0 1.6cqw 3cqw rgba(60,12,0,.45); }
.kp-qr svg { display: block; width: 100%; height: 100%; }
.kpass[data-state="locked"] .kp-qr { filter: blur(.5px) grayscale(.6); opacity: .7; }
.kp-since { position: relative; }
.kp-since small { display: block; font: 700 2.3cqw/1 var(--kp-mono); letter-spacing: .2em; color: rgba(11,11,11,.72); text-transform: uppercase; }
.kp-since strong {
  display: block; font: 400 11cqw/.9 var(--kp-display); letter-spacing: .02em; margin-top: 1cqw; color: #fff;
  -webkit-text-stroke: .1em var(--kp-ink); paint-order: stroke fill;
  text-shadow: .03em .03em 0 var(--kp-ink), .06em .06em 0 var(--kp-ink);
}
.kp-since p { margin: 2cqw 0 0; font: italic 700 3.2cqw/1.25 var(--kp-sans); color: var(--kp-ink); }

/* holographic security seal: an orange-slice hologram */
.kp-seal {
  position: absolute; right: -1cqw; top: -4.5cqw; width: 15.5cqw; height: 15.5cqw; border-radius: 50%;
  background:
    radial-gradient(circle, #fff3b0 0 9%, #ffc56a 10% 52%, #ff8a1e 60%, #ff5d00 68%, #fff1c9 70% 74%, #ff6a0e 76% 100%);
  box-shadow: 0 0 0 .45cqw rgba(255,255,255,.55), 0 0 0 .9cqw rgba(0,0,0,.65), 0 1.2cqw 2.4cqw rgba(0,0,0,.5);
  overflow: hidden; isolation: isolate;
}
.kp-seal::before { /* rainbow diffraction that turns with the pointer */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from calc(var(--mx) * 540deg + var(--my) * 180deg),
    #ff5d00, #fff174, #8dff6a, #2fd6c8, #b06bff, #ff4fbf, #ffd902, #ff5d00);
  mix-blend-mode: color-dodge; opacity: .42;
}
.kp-seal::after { /* gloss */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle at calc((1 - var(--mx)) * 100%) calc(var(--my) * 100%), rgba(255,255,255,.9), rgba(255,255,255,0) 48%);
  mix-blend-mode: overlay;
}
.kp-seal svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.kpass[data-state="locked"] .kp-seal { filter: grayscale(.8) brightness(.7); }

.kp-fine {
  margin: auto 0 0; padding-top: 3cqw;
  font: 500 2.25cqw/1.45 var(--kp-sans); color: rgba(11,11,11,.72);
  border-top: 1px solid rgba(11,11,11,.2);
}
.kp-fine b { color: var(--kp-ink); font-weight: 700; }
/* locked back: the stock is frosted dark, so its print flips to light ink */
.kpass[data-state="locked"] .kpass__back { color: #fff; }
.kpass[data-state="locked"] .kp-back-head h3,
.kpass[data-state="locked"] .kp-fine b { color: rgba(255,247,238,.9); }
.kpass[data-state="locked"] .kp-sig-label,
.kpass[data-state="locked"] .kp-since small,
.kpass[data-state="locked"] .kp-since p,
.kpass[data-state="locked"] .kp-fine { color: rgba(255,247,238,.62); border-color: rgba(255,247,238,.14); }

/* ============================== LANYARD ============================== */
.kpass__lanyard {
  position: absolute; left: 50%; top: calc(-1 * var(--strap)); width: 0; height: var(--strap);
  transform-style: preserve-3d;
  transform: translateZ(3px);
  pointer-events: none;
}
.kp-strap {
  /* the ends sit inside the clip's wide clamp bar (bar spans 10.6-14.8cqw up, +/-5.75cqw wide),
     so the straps never show below or beside the metal */
  position: absolute; bottom: 13cqw; left: -4.6cqw; width: 9.2cqw; height: calc(var(--strap) + 6.4cqw);
  transform-origin: 50% 100%;
  background:
    linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0) 22%, rgba(255,255,255,.07) 48%, rgba(0,0,0,0) 74%, rgba(0,0,0,.6)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 2.5px),
    linear-gradient(90deg, var(--kp-juice) 0 13%, var(--kp-ink) 13% 21%, var(--kp-juice) 21% 25%, var(--kp-ink) 25% 75%, var(--kp-juice) 75% 79%, var(--kp-ink) 79% 87%, var(--kp-juice) 87%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 34%);
  overflow: hidden;
  border-radius: 0 0 .6cqw .6cqw;
}
.kp-strap--l { transform: translateX(-0.2cqw) rotate(-10deg); }
.kp-strap--r { transform: translateX(0.2cqw) rotate(10deg); }
.kp-strap span {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  writing-mode: vertical-rl; text-orientation: mixed;
  font: 400 3.4cqw/1 var(--kp-display); letter-spacing: .3em; white-space: nowrap;
  color: var(--kp-juice); opacity: .95;
}
.kp-strap--r span { transform: translateX(-50%) rotate(180deg); }
.kp-clip {
  position: absolute; left: -7cqw; bottom: -5.2cqw; width: 14cqw; height: auto;
  filter: drop-shadow(0 1.2cqw 1cqw rgba(0,0,0,.55));
  overflow: visible;
}

/* ============================== FLIP BUTTON ============================== */
.kpass__flip {
  position: absolute; z-index: 60; right: -3cqw; bottom: -3.5cqw;
  transform: translateZ(28px);
  display: inline-flex; align-items: center; gap: 1.6cqw;
  height: 11.6cqw; min-height: 40px; padding: 0 3.6cqw 0 3cqw;
  border: 0; border-radius: 99px; cursor: pointer;
  font: 400 4.6cqw/1 var(--kp-display); letter-spacing: .12em; color: var(--kp-ink);
  background: linear-gradient(180deg, #fff9b0, var(--kp-cream) 45%, #ffd902);
  box-shadow: 0 0 0 .8cqw var(--kp-ink), 0 1.4cqw 0 .8cqw var(--kp-ink), 0 3cqw 4cqw rgba(0,0,0,.55);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kpass__flip svg { width: 4.6cqw; height: 4.6cqw; min-width: 16px; min-height: 16px; transition: transform .6s cubic-bezier(.3,1.5,.5,1); }
.kpass__flip:hover { transform: translateZ(28px) translateY(-2px); }
.kpass__flip:active { transform: translateZ(28px) translateY(3px); box-shadow: 0 0 0 .8cqw var(--kp-ink), 0 .4cqw 0 .8cqw var(--kp-ink), 0 1.4cqw 2cqw rgba(0,0,0,.5); }
.kpass__flip[aria-pressed="true"] svg { transform: rotate(-180deg); }
.kpass__flip:focus-visible { outline: 3px solid var(--kp-cream); outline-offset: 5px; }

/* confetti layer (outside the 3D chain so it is never clipped) */
.kpass__fx { position: absolute; inset: 0; pointer-events: none; z-index: 80; overflow: visible; }
.kpass__fx i { position: absolute; left: 0; top: 0; display: block; will-change: transform, opacity; }
.kpass__fx svg { display: block; width: 100%; height: 100%; }

.kp-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; }

/* ============================== KEYFRAMES ============================== */
@keyframes kp-swing-in {
  0%   { transform: rotate(5.5deg); }
  22%  { transform: rotate(-3.6deg); }
  44%  { transform: rotate(2.1deg); }
  64%  { transform: rotate(-1.1deg); }
  82%  { transform: rotate(.45deg); }
  100% { transform: rotate(0deg); }
}
@keyframes kp-swing-hover {
  0% { transform: rotate(0); } 20% { transform: rotate(-1.8deg); } 45% { transform: rotate(1.1deg); }
  70% { transform: rotate(-.5deg); } 100% { transform: rotate(0); }
}
@keyframes kp-thunk {
  0% { transform: translateY(0) scale(1); } 35% { transform: translateY(5px) scale(.985); } 100% { transform: translateY(0) scale(1); }
}
@keyframes kp-shimmer {
  0%   { --mx: .5;  --my: .42; }
  25%  { --mx: .78; --my: .30; }
  50%  { --mx: .55; --my: .66; }
  75%  { --mx: .22; --my: .40; }
  100% { --mx: .5;  --my: .42; }
}
@keyframes kp-sweep {
  0%   { --sweep: 130%; }
  38%  { --sweep: -30%; }
  100% { --sweep: -30%; }
}
@keyframes kp-pulse { from { opacity: .75; } to { opacity: 1; } }
@keyframes kp-key {
  0%   { opacity: 0; transform: scale(1.8) rotate(0deg); }
  30%  { opacity: 1; transform: scale(1) rotate(0deg); }
  45%  { opacity: 1; transform: scale(1) rotate(0deg); }
  85%  { opacity: 1; transform: scale(1) rotate(96deg); }
  100% { opacity: 1; transform: scale(1) rotate(90deg); }
}
@keyframes kp-stamp {
  0%   { opacity: 0; transform: rotate(-9deg) scale(1.9); }
  70%  { opacity: 1; transform: rotate(-9deg) scale(.94); }
  100% { opacity: 1; transform: rotate(-9deg) scale(1); }
}
@keyframes kp-flood { from { --flood: 0%; } to { --flood: 160%; } }
.kpass.is-step-flood .kpass__front { animation: kp-flood 1.1s cubic-bezier(.5,0,.3,1) forwards; }
@keyframes kp-caret { 50% { opacity: 0; } }

/* ============================== REDUCED MOTION ============================== */
@media (prefers-reduced-motion: reduce) {
  .kpass { --tilt: 0deg; }
  .kpass[data-motion] { animation: none; }
  .kpass__swing, .kpass.is-swinging .kpass__swing, .kpass.is-thunk .kpass__swing { animation: none; }
  .kpass__card, .kpass[data-flipped="true"] .kpass__card { transform: none; transition: none; }
  .kpass__face { backface-visibility: visible; -webkit-backface-visibility: visible; transition: opacity .35s ease; }
  .kpass__back { transform: none; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s .35s; }
  .kpass[data-flipped="true"] .kpass__back { opacity: 1; visibility: visible; transition: opacity .35s ease, visibility 0s; }
  .kpass[data-flipped="true"] .kpass__front { opacity: 0; }
  .kpass__edge { display: none; }
  .kpass[data-state="unlocked"] .kp-sweep { animation: none; opacity: 0; }
  .kp-lock .kp-shackle { transition-duration: .01s; }
  .kpass.is-step-key .kp-lock .kp-key { animation-duration: .01s; }
  .kpass.is-step-stamp .kp-stamp--unlocked { animation-duration: .01s; }
  .kpass.is-step-flood .kpass__front { animation-duration: .3s; }
  .kpass.is-step-glow .kp-lock .kp-keyglow { animation: none; }
  .kpass__flip svg { transition: none; }
}

/* ============================== PLAN TIERS ==============================
   data-tier="free" is the orange All Access Pass above. Paid plans keep the same orange stock
   and change only the foil: a gold rim and gold tag for Gold Key, an iridescent rim and tag for Master Key. */
.kpass[data-tier="gold"] .kp-bevel {
  box-shadow:
    inset 0 0 0 1.1cqw #e9b730,
    inset 0 0 0 1.5cqw rgba(90,50,0,.55),
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(0,0,0,.35);
}
.kpass[data-tier="gold"] .kp-tag,
.kpass[data-tier="gold"] .kp-chip {
  background: linear-gradient(100deg, #8a5a00 0%, #f6d36a 22%, #fff3c4 38%, #d9a21c 56%, #ffe48a 74%, #a86f00 100%);
  background-size: 220% 100%;
  background-position: calc(var(--mx) * 100%) 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 .8cqw 1.6cqw rgba(60,10,0,.35);
}
.kpass[data-tier="gold"] .kp-foil { background: none; color: var(--kp-ink); }
.kpass[data-tier="gold"] .kp-chip { color: var(--kp-ink); }
.kpass[data-tier="gold"][data-state="unlocked"] .kp-holo { filter: sepia(.55) saturate(1.5); }

.kpass[data-tier="master"] .kp-bevel {
  box-shadow:
    inset 0 0 0 1.1cqw rgba(255,255,255,.9),
    inset 0 0 0 1.5cqw var(--kp-ink),
    inset 0 1.5px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(0,0,0,.35);
}
.kpass[data-tier="master"][data-state="unlocked"] .kp-bevel {
  box-shadow:
    inset 0 0 0 1.5cqw var(--kp-ink),
    inset 0 1.5px 0 rgba(255,255,255,.55);
  border: 1.1cqw solid transparent;
  border-radius: inherit;
  background: conic-gradient(from calc(var(--mx) * 360deg), #fff174, #8dff6a, #2fd6c8, #b06bff, #ff4fbf, #fff174) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.kpass[data-tier="master"] .kp-foil {
  background: linear-gradient(100deg, #fff174 0%, #8dff6a 18%, #2fd6c8 34%, #b06bff 50%, #ff4fbf 66%, #ffd902 82%, #fff174 100%);
  background-size: 260% 100%;
  background-position: calc(var(--mx) * 100%) 0;
  -webkit-background-clip: text; background-clip: text;
}
.kpass[data-tier="master"] .kp-chip {
  color: var(--kp-ink);
  background: linear-gradient(100deg, #fff174, #8dff6a 30%, #2fd6c8 50%, #b06bff 70%, #ff4fbf);
}
.kpass[data-tier="master"][data-state="unlocked"] .kp-holo { opacity: .5; }