/* <lanyard-badge> — styles. Pair with components/lanyard-badge.js.
   Sizes come from --lyd-cw / --lyd-ch / --lyd-ring / --lyd-clip, set by the
   script from the card-width attribute. Height of the stage: --lyd-height. */

lanyard-badge {
  --lyd-height: 640px;
  display: block;
  position: relative;
  width: 100%;
  height: var(--lyd-height);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

.lyd-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.lyd-card {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--lyd-cw);
  height: calc(var(--lyd-ch) + var(--lyd-ring) + var(--lyd-clip));
  transform-origin: 50% 0;
  cursor: grab;
  touch-action: none;
  will-change: transform;
  outline: none;
}
.lyd-card:focus-visible .lyd-face { outline: 2px solid var(--color-lake-blue, #2b59d1); outline-offset: 4px; }

/* badge clip: hooks the ring, bites the card */
.lyd-clip {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  width: calc(var(--lyd-cw) * 0.075);
  height: calc(var(--lyd-clip) + var(--lyd-cw) * 0.05);
  transform: translateX(-50%);
  border-radius: calc(var(--lyd-cw) * 0.02);
  background: linear-gradient(90deg, #f4efe4, #a8a090 50%, #ece6da);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.lyd-inner {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--lyd-ring) + var(--lyd-clip) * 0.6);
  height: var(--lyd-ch);
  transform-style: preserve-3d;
}

/* A physical card, so it gets a soft cast shadow (UI cards stay flat). */
.lyd-face {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--lyd-cw) * 0.06);
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .1);
}
.lyd-back { transform: rotateY(180deg); }
.lyd-face canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.lyd-slot {
  position: absolute;
  top: calc(var(--lyd-cw) * 0.05);
  left: 50%;
  width: calc(var(--lyd-cw) * 0.2);
  height: calc(var(--lyd-cw) * 0.035);
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(0, 0, 0, .22);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45);
}

.lyd-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%) var(--lyd-shine, 50%) 0 / 250% 100% no-repeat,
    rgba(0, 0, 0, var(--lyd-dim, 0));
}

/* Ghost pill, per the design system */
.lyd-flip {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--color-off-black, #242424);
  border-radius: var(--radius-buttons, 100px);
  background: rgba(246, 243, 241, .85);
  backdrop-filter: blur(6px);
  color: var(--color-off-black, #242424);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-caption, 12px);
  letter-spacing: -0.033em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.lyd-flip[hidden] { display: none; } /* flip-button="false" */
.lyd-flip:hover { background: var(--color-off-black, #242424); color: var(--color-parchment, #f6f3f1); }
.lyd-flip svg { transition: transform .5s; }
.lyd-flip[aria-pressed="true"] svg { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .lyd-flip svg { transition: none; }
}