/* ── Pull-out project cards ─────────────────────────────────────
   A trading card sits in a sleeve at the bottom of a project card,
   with only its top showing. Pull it up (or click it) and it comes
   out to the middle of the screen. The card face reuses the .tc
   styles from lanyard-v2.css; behaviour is in pull-card.js.
   --------------------------------------------------------------- */

.project-slot {
  position: relative;
  display: flex;
}
.project-slot > .project-card {
  flex: 1;
  padding-bottom: 88px;   /* room for the sleeve under the tags */
}

/* the sleeve runs on below the project card; only its top is in view */
.pull {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 1px;
  height: 66px;
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  touch-action: pan-y;   /* a swipe still scrolls the page; a tap opens the card */
  clip-path: inset(-700px -20px 0 -20px);
  z-index: 2;
  transition: transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.project-slot:hover .pull { transform: translateY(-2px); }   /* rides along with the card's hover lift */
.pull:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 6px; }

.pull-holder {
  position: absolute;
  left: 9px;
  right: 9px;
  top: 0;
  height: 400px;          /* set to the card's scaled height by pull-card.js */
  transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.pull:hover .pull-holder,
.pull:focus-visible .pull-holder { transform: translateY(-6px); }

/* ── The sleeve: soft plastic that has been handled ──
   Two sheets, so two edges at the opening. Each sleeve sets its own
   --tilt, --gx, --sx, --bow and --cx inline, so no two look the same. */
.pull-sleeve,
.pull::before {
  position: absolute;
  left: 0;
  right: 0;
  height: 500px;
  border: 1px solid rgba(38, 50, 74, 0.34);
  pointer-events: none;
}

/* the back sheet, seen behind the card and a little above the front one */
.pull::before {
  content: "";
  top: 10px;
  left: var(--back, 1px);
  border-radius: 46% 54% 0 0 / 3px 4px 0 0;
  border-color: rgba(38, 50, 74, 0.2);
  background: rgba(214, 222, 236, 0.3);
}

/* the front sheet: slightly milky, bowed where the card pushes it out */
.pull-sleeve {
  top: 14px;
  border-radius: var(--bow, 56% 44% 0 0 / 4px 3px 0 0);
  overflow: hidden;
  background-image:
    radial-gradient(circle at var(--cx, 100%) 0, rgba(255, 255, 255, 0.6), transparent 16px),
    linear-gradient(104deg, transparent 20%, rgba(255, 255, 255, 0.4) 44%, rgba(255, 255, 255, 0.12) 56%, transparent 80%),
    linear-gradient(104deg, transparent 30%, rgba(255, 255, 255, 0.24) 50%, transparent 70%),
    linear-gradient(180deg, rgba(232, 237, 245, 0.34), rgba(224, 230, 240, 0.2) 60px);
  background-size: 100% 60px, 56% 80px, 12% 80px, 100% 100%;
  background-position: 0 0, calc(var(--gx, 30%) + var(--shift, 0%)) 0, calc(var(--gx, 30%) + 34% + var(--shift, 0%)) 0, 0 0;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.85),
    inset 0 4px 3px -3px rgba(24, 34, 54, 0.3),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.4),
    inset -1.5px 0 0 rgba(255, 255, 255, 0.4);
  transition: background-position 0.6s ease;
}
/* hairline scratches, which mostly show where the glare crosses them */
.pull-sleeve::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("pull-sleeve-wear.svg") var(--sx, 0px) 0 repeat-x;
  -webkit-mask-image:
    linear-gradient(104deg, transparent 20%, #000 44%, #000 56%, transparent 80%),
    linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
          mask-image:
    linear-gradient(104deg, transparent 20%, #000 44%, #000 56%, transparent 80%),
    linear-gradient(rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0.38));
  -webkit-mask-size: 56% 80px, 100% 100%;
          mask-size: 56% 80px, 100% 100%;
  -webkit-mask-position: calc(var(--gx, 30%) + var(--shift, 0%)) 0, 0 0;
          mask-position: calc(var(--gx, 30%) + var(--shift, 0%)) 0, 0 0;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  transition: -webkit-mask-position 0.6s ease, mask-position 0.6s ease;
}
/* the reflection slides as the card is nudged */
.pull:hover .pull-sleeve,
.pull:focus-visible .pull-sleeve { --shift: 16%; }

/* the card never sits perfectly square in its sleeve */
.pull-holder .pc-tilt {
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.3s ease;
}

[data-theme="dark"] .pull-sleeve,
[data-theme="dark"] .pull::before { border-color: rgba(255, 255, 255, 0.3); }
[data-theme="dark"] .pull::before {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(214, 226, 246, 0.06);
}
[data-theme="dark"] .pull-sleeve {
  background-image:
    radial-gradient(circle at var(--cx, 100%) 0, rgba(255, 255, 255, 0.4), transparent 16px),
    linear-gradient(104deg, transparent 20%, rgba(255, 255, 255, 0.3) 44%, rgba(255, 255, 255, 0.09) 56%, transparent 80%),
    linear-gradient(104deg, transparent 30%, rgba(255, 255, 255, 0.18) 50%, transparent 70%),
    linear-gradient(180deg, rgba(226, 234, 248, 0.2), rgba(226, 234, 248, 0.1) 60px);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 4px 3px -3px rgba(0, 0, 0, 0.5),
    inset 1.5px 0 0 rgba(255, 255, 255, 0.16),
    inset -1.5px 0 0 rgba(255, 255, 255, 0.16);
}

/* ── The card ── */
.pc-fly {
  position: absolute;
  left: 0;
  top: 0;
  width: 228px;
  height: 319px;
  transform-origin: 0 0;
  will-change: transform;
}
.pc-tilt,
.pc-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.pc-flip { transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1); }
.pc-flip.is-flipped { transform: rotateY(180deg); }
.pc-flip > .tc,
.pc-back {
  left: 0;
  top: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* project cards: plainer than the legendary. a light gloss, no star foil */
.tc--project .tc-move { grid-template-columns: 34px 1fr; }
.tc--project .tc-hp { color: #17834a; }
.tc--project .tc-hp--wip { color: #b96a0a; }
.tc--project .tc-type {
  background: var(--logo) center / cover;
  font-size: 0;
}
/* the art window takes the shape of a share image, so it shows whole */
.tc--project .tc-art { height: 104px; }
.tc--project .tc-art img { object-position: 50% 50%; transform: none; }
.tc--project .tc-move { padding: 3px 0; }
.tc--project .tc-foil {
  -webkit-mask-image: none;
          mask-image: none;
  opacity: calc(0.06 + var(--glint, 0) * 0.14);
}
.tc--project .tc-stats dd { font-weight: 700; }
.tc--project::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.5) 46%, rgba(255, 255, 255, 0.12) 54%, transparent 66%);
  background-size: 260% 100%;
  background-position: calc(50% - var(--ty, 0) * 4%) 0;
  opacity: calc(var(--glint, 0) * 0.7);
  mix-blend-mode: soft-light;
}

.tc--violet .tc-body {
  background:
    radial-gradient(60% 40% at 18% 12%, rgba(255, 255, 255, 0.75), transparent 70%),
    radial-gradient(50% 35% at 86% 58%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(70% 45% at 30% 92%, rgba(138, 124, 226, 0.55), transparent 70%),
    linear-gradient(170deg, #d6d0f6, #b5abec 55%, #cbc4f3);
  box-shadow: inset 0 0 0 0.5px rgba(60, 40, 120, 0.45);
}

.tc--blue .tc-body {
  background:
    radial-gradient(60% 40% at 18% 12%, rgba(255, 255, 255, 0.78), transparent 70%),
    radial-gradient(50% 35% at 86% 58%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(70% 45% at 30% 92%, rgba(72, 132, 214, 0.5), transparent 70%),
    linear-gradient(170deg, #d2e3f8, #a6c7ee 55%, #c4dbf5);
  box-shadow: inset 0 0 0 0.5px rgba(24, 64, 128, 0.5);
}

.tc--orange .tc-body {
  background:
    radial-gradient(60% 40% at 18% 12%, rgba(255, 255, 255, 0.78), transparent 70%),
    radial-gradient(50% 35% at 86% 58%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(70% 45% at 30% 92%, rgba(232, 128, 62, 0.5), transparent 70%),
    linear-gradient(170deg, #fbe0c8, #f3b98c 55%, #f8d3b4);
  box-shadow: inset 0 0 0 0.5px rgba(130, 62, 16, 0.5);
}

.tc--red .tc-body {
  background:
    radial-gradient(60% 40% at 18% 12%, rgba(255, 255, 255, 0.78), transparent 70%),
    radial-gradient(50% 35% at 86% 58%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(70% 45% at 30% 92%, rgba(222, 72, 56, 0.5), transparent 70%),
    linear-gradient(170deg, #fbd3cc, #f09a8d 55%, #f8c4bb);
  box-shadow: inset 0 0 0 0.5px rgba(130, 28, 18, 0.5);
}

.tc--cream .tc-body {
  background:
    radial-gradient(60% 40% at 18% 12%, rgba(255, 255, 255, 0.9), transparent 70%),
    radial-gradient(50% 35% at 86% 58%, rgba(255, 255, 255, 0.6), transparent 70%),
    radial-gradient(70% 45% at 30% 92%, rgba(196, 184, 160, 0.45), transparent 70%),
    linear-gradient(170deg, #faf7f0, #ebe5d8 55%, #f5f1e8);
  box-shadow: inset 0 0 0 0.5px rgba(70, 62, 44, 0.5);
}

.tc--green .tc-body {
  background:
    radial-gradient(60% 40% at 18% 12%, rgba(255, 255, 255, 0.78), transparent 70%),
    radial-gradient(50% 35% at 86% 58%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(70% 45% at 30% 92%, rgba(84, 160, 62, 0.5), transparent 70%),
    linear-gradient(170deg, #d6eec8, #a3d48a 55%, #c8e8b6);
  box-shadow: inset 0 0 0 0.5px rgba(36, 86, 24, 0.5);
}

/* back: the same card back as the legendary */
.pc-back { transform: rotateY(180deg); }

/* ── Centre stage ── */
.pull-stage {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(8, 10, 16, 0);
  transition: background 0.35s ease, backdrop-filter 0.35s ease;
  touch-action: none;
}
.pull-stage[hidden] { display: none; }
.pull-stage.is-open {
  background: rgba(8, 10, 16, 0.66);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}
.pull-stage .pc-fly { position: fixed; cursor: grab; }
.pull-stage .pc-fly.is-held { cursor: grabbing; }
.pull-stage .pc-flip > .tc,
.pull-stage .pc-back { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.4), 0 26px 50px -14px rgba(0, 0, 0, 0.7); }
.pull-stage .pc-flip > .pc-back { box-shadow: inset 0 0 0 9px #1a2f80, inset 0 0 0 10px rgba(255, 255, 255, 0.35), 0 26px 50px -14px rgba(0, 0, 0, 0.7); }

.pull-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(20, 22, 30, 0.6);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pull-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pull-stage.is-open .pull-close,
.pull-stage.is-open .pull-hint { opacity: 1; }

html.pull-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pull-holder,
  .pull-sleeve,
  .pull-sleeve::after,
  .pc-flip,
  .pull-stage { transition: none; }
}