/* =========================================================================
   Tell Tale — the web kit (site/kit.js): the translucent cassette, the
   holographic street seal, tier badges and the die-cut foil stickers.
   Needs /ui/nav.css for the .tt-holo foil itself.
   ========================================================================= */

:root {
  --tt-oxide: #D14B34;
  --tt-cyan: #2FB5BC;
  --tt-amber: #FFB84D;
  --tt-paper: #F3EAD7;
  --tt-ink: #1f2430;
  --tt-putty: #dcd4c3;
  --tt-noise: 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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --tt-foil: linear-gradient(100deg, #FF7AC8, #8E7BFF, #4CC9F0, #7BE495, #FFD166, #FF7AC8);
}

.k-vh {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* --- the cassette (400 × 256) -------------------------------------------- */
.kc {
  --c: #3EC9B8;
  position: relative;
  width: 100%;
  aspect-ratio: 400 / 256;
  container-type: inline-size;
  user-select: none;
  -webkit-user-select: none;
}
.kc-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.45)); }
.kc-back  { fill: color-mix(in srgb, var(--c) 46%, #08090b); }
.kc-front { fill: var(--c); fill-opacity: 0.36; }
.kc-band  { fill: var(--c); }
.kc-pack  { fill: #2c1e14; stroke: #3d2b1d; stroke-width: 2; }
.kc-label { fill: #F2E9D6; }
.kc-smoke { fill: rgba(0, 0, 0, 0.1); }
.kc-glare { fill: rgba(255, 255, 255, 0.05); }
.kc-print { font-family: Michroma, sans-serif; font-size: 6.5px; letter-spacing: 0.08em; fill: #7a7160; }
.kc-hub { transform-box: fill-box; transform-origin: center; }
.kc.spin .kc-hub { animation: kc-spin 2.2s linear infinite; }
@keyframes kc-spin { to { transform: rotate(360deg); } }
.kc-title, .kc-sub {
  position: absolute;
  left: 9%;
  font-family: "Permanent Marker", "Marker Felt", cursive;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.kc-title { right: 21%; top: 9.2%; padding-top: 0.6cqw; font-size: 6.6cqw; color: var(--tt-ink); transform: rotate(-1.4deg); transform-origin: left bottom; }
.kc-sub   { right: 24%; top: 25.2%; font-size: 4.1cqw; color: #3e4a63; transform: rotate(-0.8deg); }
.kc-seal {
  position: absolute; left: 80.5%; top: 7.6%; width: 11%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: 0 0 0 0.35cqw rgba(0, 0, 0, 0.12), 0 0.4cqw 0.8cqw rgba(0, 0, 0, 0.18);
}
.kc-seal b { font-family: Michroma, sans-serif; font-weight: 400; font-size: 4.6cqw; color: rgba(28, 28, 40, 0.72); }
.kc-foil {
  position: absolute; top: 43.2%; height: 13.6%; width: 17.5%;
  -webkit-mask-image: linear-gradient(180deg, #000 0 27%, transparent 27% 36.5%, #000 36.5% 63.5%, transparent 63.5% 73%, #000 73%);
          mask-image: linear-gradient(180deg, #000 0 27%, transparent 27% 36.5%, #000 36.5% 63.5%, transparent 63.5% 73%, #000 73%);
}
.kc-foil-l { left: 5.5%; }
.kc-foil-r { left: 77%; }

/* --- "PLAYS ONLY ON SOHO'S STREETS" -------------------------------------- */
.k-seal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px 4px 7px;
  border-radius: 4px;
  font-family: Michroma, sans-serif;
  font-size: 6.5px;
  letter-spacing: 0.16em;
  line-height: 1.3;
  color: rgba(22, 22, 34, 0.86);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35) inset, 0 1px 3px rgba(0, 0, 0, 0.35);
  /* a perforated edge, like the security seal on a sealed tape */
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 2.5px, #000 3px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 2.5px, #000 3px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 2.5px, #000 3px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 2.5px, #000 3px) right / 51% 100% no-repeat;
}
.k-seal b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-seal-pin { position: relative; z-index: 3; font-size: 8px; color: #6b2c7a; }
.k-seal--lg { padding: 7px 16px 7px 12px; font-size: 8px; gap: 8px; }
.k-seal--lg .k-seal-pin { font-size: 10px; }

.k-tier {
  display: inline-block;
  padding: 3px 7px 2px;
  border-radius: 3px;
  font-family: Michroma, sans-serif;
  font-size: 6.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}
.k-tier--premium { color: #1d1a12; background: linear-gradient(180deg, #ffd38a, var(--tt-amber)); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); }
.k-tier--community { color: #e9fbfb; background: linear-gradient(180deg, #3fc5cc, #1f8f95); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25); }
.k-tier--free { color: #e9fbe9; background: linear-gradient(180deg, #6fcf7f, #3f9a4f); }

/* --- the die-cut sticker --------------------------------------------------- */
.k-stk {
  --c: #3EC9B8;
  --rot: -3deg;
  position: relative;
  margin: 0;
  width: 100%;
  aspect-ratio: 1;
  container-type: inline-size;
  transform: perspective(600px) rotate(var(--rot)) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform 0.5s cubic-bezier(.3,1.4,.5,1);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.18)) drop-shadow(0 7px 9px rgba(40, 24, 10, 0.28));
}
.k-stk.is-tilting { transition: transform 0.08s linear; }
.k-stk-die {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #ffffff, #f1ece2);
  clip-path: var(--shape);
}
.k-stk-face {
  position: absolute;
  inset: 5.5%;
  clip-path: var(--shape);
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--c) 26%, transparent);
}
.k-stk--round   { --shape: circle(50%); }
.k-stk--square  { --shape: inset(0 round 20%); }
.k-stk--burst   { --shape: polygon(50.0% 0.0%, 56.8% 7.0%, 65.5% 2.4%, 69.7% 11.2%, 79.4% 9.5%, 80.8% 19.2%, 90.5% 20.6%, 88.8% 30.3%, 97.6% 34.5%, 93.0% 43.2%, 100.0% 50.0%, 93.0% 56.8%, 97.6% 65.5%, 88.8% 69.7%, 90.5% 79.4%, 80.8% 80.8%, 79.4% 90.5%, 69.7% 88.8%, 65.5% 97.6%, 56.8% 93.0%, 50.0% 100.0%, 43.2% 93.0%, 34.5% 97.6%, 30.3% 88.8%, 20.6% 90.5%, 19.2% 80.8%, 9.5% 79.4%, 11.2% 69.7%, 2.4% 65.5%, 7.0% 56.8%, 0.0% 50.0%, 7.0% 43.2%, 2.4% 34.5%, 11.2% 30.3%, 9.5% 20.6%, 19.2% 19.2%, 20.6% 9.5%, 30.3% 11.2%, 34.5% 2.4%, 43.2% 7.0%); }
.k-stk--scallop { --shape: polygon(50.0% 0.0%, 53.2% 1.5%, 56.0% 4.6%, 58.7% 6.5%, 61.9% 5.8%, 65.6% 4.0%, 69.1% 3.8%, 71.5% 6.4%, 72.9% 10.3%, 74.7% 13.1%, 77.9% 13.7%, 82.0% 13.5%, 85.4% 14.6%, 86.5% 18.0%, 86.3% 22.1%, 86.9% 25.3%, 89.7% 27.1%, 93.6% 28.5%, 96.2% 30.9%, 96.0% 34.4%, 94.2% 38.1%, 93.5% 41.3%, 95.4% 44.0%, 98.5% 46.8%, 100.0% 50.0%, 98.5% 53.2%, 95.4% 56.0%, 93.5% 58.7%, 94.2% 61.9%, 96.0% 65.6%, 96.2% 69.1%, 93.6% 71.5%, 89.7% 72.9%, 86.9% 74.7%, 86.3% 77.9%, 86.5% 82.0%, 85.4% 85.4%, 82.0% 86.5%, 77.9% 86.3%, 74.7% 86.9%, 72.9% 89.7%, 71.5% 93.6%, 69.1% 96.2%, 65.6% 96.0%, 61.9% 94.2%, 58.7% 93.5%, 56.0% 95.4%, 53.2% 98.5%, 50.0% 100.0%, 46.8% 98.5%, 44.0% 95.4%, 41.3% 93.5%, 38.1% 94.2%, 34.4% 96.0%, 30.9% 96.2%, 28.5% 93.6%, 27.1% 89.7%, 25.3% 86.9%, 22.1% 86.3%, 18.0% 86.5%, 14.6% 85.4%, 13.5% 82.0%, 13.7% 77.9%, 13.1% 74.7%, 10.3% 72.9%, 6.4% 71.5%, 3.8% 69.1%, 4.0% 65.6%, 5.8% 61.9%, 6.5% 58.7%, 4.6% 56.0%, 1.5% 53.2%, 0.0% 50.0%, 1.5% 46.8%, 4.6% 44.0%, 6.5% 41.3%, 5.8% 38.1%, 4.0% 34.4%, 3.8% 30.9%, 6.4% 28.5%, 10.3% 27.1%, 13.1% 25.3%, 13.7% 22.1%, 13.5% 18.0%, 14.6% 14.6%, 18.0% 13.5%, 22.1% 13.7%, 25.3% 13.1%, 27.1% 10.3%, 28.5% 6.4%, 30.9% 3.8%, 34.4% 4.0%, 38.1% 5.8%, 41.3% 6.5%, 44.0% 4.6%, 46.8% 1.5%); }

.k-stk-photo {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 13%;
  width: 52%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--c) 40%, #2a2b30);
  box-shadow: 0 0 0 1.6cqw #fffdf7, 0 0 0 2.4cqw var(--c), 0 1.4cqw 2.4cqw rgba(0, 0, 0, 0.3);
}
.k-stk--square .k-stk-photo { border-radius: 18%; }
.k-stk-photo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.06) sepia(0.12); }
/* a rainbow prism over the portrait, the way the holo catches a face */
.k-stk-prism {
  position: absolute;
  z-index: 4;
  inset: 0;
  background: repeating-linear-gradient(115deg,
    rgba(255, 90, 200, 0.0) 0%, rgba(255, 90, 200, 0.55) 6%, rgba(120, 110, 255, 0.55) 12%,
    rgba(70, 210, 255, 0.55) 18%, rgba(110, 240, 160, 0.55) 24%, rgba(255, 220, 110, 0.55) 30%, rgba(255, 90, 200, 0) 36%);
  background-size: 260% 260%;
  background-position: calc(50% + var(--hx, 0) * 40%) calc(50% + var(--hy, 0) * 40%);
  mix-blend-mode: color-dodge;
  opacity: 0.32;
  pointer-events: none;
}
.k-stk-name {
  position: absolute;
  z-index: 5;
  left: 12%;
  right: 12%;
  top: 70%;
  padding: 1.6cqw 2cqw 1.2cqw;
  font-family: "Permanent Marker", "Marker Felt", cursive;
  font-size: 7.4cqw;
  line-height: 1;
  text-align: center;
  color: var(--tt-ink);
  background: #fffaf0;
  border-radius: 1.2cqw;
  box-shadow: 0 0.6cqw 1.2cqw rgba(0, 0, 0, 0.2);
  transform: rotate(-2deg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.k-stk-year {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 59%;
  transform: translateX(-50%);
  padding: 0.8cqw 2.4cqw 0.5cqw;
  border-radius: 99px;
  font-family: Michroma, sans-serif;
  font-size: 5.2cqw;
  letter-spacing: 0.12em;
  color: #fff;
  background: color-mix(in srgb, var(--c) 82%, #111);
  box-shadow: 0 0 0 0.7cqw #fffdf7;
}
.k-stk--burst .k-stk-name, .k-stk--scallop .k-stk-name { left: 15%; right: 15%; }

@media (prefers-reduced-motion: reduce) {
  .k-stk { transition: none; transform: rotate(var(--rot)); }
  .kc.spin .kc-hub { animation: none; }
}

/* the foil's own children rule (.tt-holo > span) must not unpin the sticker's parts */
.k-stk-face > .k-stk-photo { position: absolute; z-index: 3; }
.k-stk-face > .k-stk-prism { position: absolute; z-index: 4; }
.k-stk-face > .k-stk-year,
.k-stk-face > .k-stk-name { position: absolute; z-index: 5; }