/* ══ Invitation templates showcase ══════════════════════════════════════
   A ring of cards standing in 3D space, turning slowly until somebody takes
   hold of it. Ported from the design file; the geometry, the springs and
   the timings are its numbers, not new ones.

   Only the things a stylesheet must own are here — hover, focus, reduced
   motion, and the shapes that never change. Everything that moves is set
   from js/templates-showcase.js on a single rAF. ───────────────────────── */

.ts {
  position: relative; overflow: hidden;
  background: #120C24; color: #F4F5FB;
  padding: clamp(72px, 9vw, 128px) 0 clamp(56px, 7vw, 96px);
  font-family: 'Instrument Sans', 'Montserrat', system-ui, sans-serif;
}
.ts-glows { position: absolute; inset: 0; pointer-events: none; }
.ts-glow-a {
  position: absolute; left: 50%; top: 44%; width: 1100px; height: 700px;
  margin: -350px 0 0 -550px; border-radius: 50%; will-change: transform;
  background: radial-gradient(closest-side, rgba(107,59,242,.42), rgba(107,59,242,0));
}
.ts-glow-b {
  position: absolute; right: -12%; top: -10%; width: 640px; height: 640px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(59,196,242,.16), rgba(59,196,242,0));
}
/* The section is cut into the one above it rather than butted against it. */
.ts-fade { position: absolute; left: 0; right: 0; top: 0; height: 160px;
  background: linear-gradient(#120C24, rgba(18,12,36,0)); }

/* ── The head ─────────────────────────────────────────────────────────── */
.ts-head {
  position: relative; max-width: 1440px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px;
}
.ts-head-l { max-width: 720px; display: flex; flex-direction: column; gap: 16px; }
.ts-kicker { margin: 0; font-size: 12.5px; font-weight: 600; letter-spacing: .3em; color: #3BC4F2; }
.ts-h2 { margin: 0; font-family: 'Instrument Serif', serif; font-weight: 400;
  font-size: clamp(42px, 6vw, 88px); line-height: .98; letter-spacing: -.015em; color: #F4F5FB; }
/* Each line is revealed by sliding up out of its own clipped box. */
.ts-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ts-line > span { display: block; }
.ts-h2 em { font-style: italic; color: #CBB9FF; }
.ts-stop { color: #8B5CFF; }
.ts-head-r { max-width: 420px; display: flex; flex-direction: column; gap: 20px; }
.ts-lede { margin: 0; font-size: 16px; line-height: 1.65; color: rgba(244,245,251,.78); }
.ts-cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; border-radius: 99px;
  background: #6B3BF2; color: #fff; font-weight: 600; font-size: 15.5px; text-decoration: none;
  box-shadow: 0 14px 40px rgba(107,59,242,.45);
  transition: transform .35s cubic-bezier(.22,1,.36,1), background-color .25s, box-shadow .35s;
}
.ts-cta:hover { background: #7E51FF; color: #fff; transform: translateY(-2px);
  box-shadow: 0 20px 48px rgba(107,59,242,.6); }
.ts-cta span { font-family: 'Instrument Serif', serif; font-size: 19px; }

/* ── The ring ─────────────────────────────────────────────────────────── */
.ts-stage {
  position: relative; height: clamp(420px, 50vw, 600px); margin-top: clamp(12px, 3vw, 32px);
  perspective: 1500px; perspective-origin: 50% 40%;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.ts-stage.is-drag { cursor: grabbing; }
.ts-pool, .ts-shadow { position: absolute; left: 50%; transform: translateX(-50%);
  border-radius: 50%; pointer-events: none; }
.ts-pool { bottom: 4%; width: min(1100px, 96%); height: 150px;
  background: radial-gradient(closest-side, rgba(139,92,255,.38), rgba(59,196,242,.10) 55%, rgba(18,12,36,0)); }
.ts-shadow { bottom: 9%; width: min(760px, 80%); height: 46px; filter: blur(6px);
  background: radial-gradient(closest-side, rgba(5,3,14,.75), rgba(5,3,14,0)); }
.ts-ring { position: absolute; left: 50%; top: 46%; width: 0; height: 0;
  transform-style: preserve-3d; will-change: transform; }
/* Every card stands in the same 200x267 slot whatever its own proportions,
   so the ring reads as one object rather than a row of different objects.

   That slot is multiplied by --ss and the card scales itself back down (the
   scale(1/ss) at the end of its transform). Perspective brings the front
   card to within a third of the camera, so it is painted about 1.35x larger
   than it is laid out -- and because the card is a will-change layer the
   browser rasterises it once, at the laid-out size, and stretches that one
   bitmap. At --ss:1 the artwork's cqw type came out at 5.6px and was then
   magnified; at 2 it is laid out at 11.2px and scaled down instead. Every
   px below is multiplied the same way, so the proportions never move. */
.ts-card { position: absolute;
  left: calc(-100px * var(--ss, 1)); top: calc(-133px * var(--ss, 1));
  width: calc(200px * var(--ss, 1)); height: calc(267px * var(--ss, 1));
  transform-style: preserve-3d; will-change: transform; }
.ts-face {
  position: absolute; inset: 0; border-radius: calc(6px * var(--ss, 1)); overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 calc(30px * var(--ss, 1)) calc(60px * var(--ss, 1)) calc(-22px * var(--ss, 1)) rgba(0,0,0,.75),
              0 0 0 calc(1px * var(--ss, 1)) rgba(255,255,255,.06);
}
.ts-mat { position: absolute; inset: 0; }
.ts-art { position: relative; display: block; }
.ts-art .iv-card { width: 100%; display: block; }
/* A card taller than the slot is mounted on a mat rather than cropped or
   squashed — the proportions of the artwork are the artwork. */
.ts-face.framed .ts-art { position: absolute; left: 50%; top: 5.5%; height: 89%;
  transform: translateX(-50%); }
.ts-face.framed .ts-art > div, .ts-face.framed .iv-card {
  height: 100%; width: auto; border-radius: calc(3px * var(--ss, 1));
  box-shadow: 0 calc(2px * var(--ss, 1)) calc(4px * var(--ss, 1)) rgba(0,0,0,.25),
              0 calc(14px * var(--ss, 1)) calc(30px * var(--ss, 1)) calc(-10px * var(--ss, 1)) rgba(0,0,0,.55);
}
.ts-shade { position: absolute; inset: 0; background: #120C24; opacity: 0; pointer-events: none; }
.ts-sheen { position: absolute; inset: -20% -60%; pointer-events: none; mix-blend-mode: soft-light;
  transform: translateX(-70%);
  background: linear-gradient(105deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 58%); }
.ts-back {
  position: absolute; inset: 0; transform: rotateY(180deg); border-radius: calc(6px * var(--ss, 1));
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: inset 0 0 0 calc(1px * var(--ss, 1)) rgba(255,255,255,.08);
  display: grid; place-items: center;
}
.ts-back img { width: calc(46px * var(--ss, 1)); height: auto; opacity: .35;
  filter: grayscale(1) brightness(2); }

/* ── The rail underneath ──────────────────────────────────────────────── */
.ts-rail {
  position: relative; max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  align-items: center; gap: 20px;
}
.ts-cap { display: flex; align-items: center; gap: 16px; min-width: 0; }
.ts-cap-no { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 22px;
  color: #3BC4F2; font-variant-numeric: tabular-nums; min-width: 62px; }
.ts-cap-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 52px; }
.ts-cap-name { font-family: 'Instrument Serif', serif; font-size: 28px; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-cap-cat { font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(244,245,251,.6); }
.ts-chips { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.ts-chip {
  padding: 10px 18px; min-height: 44px; border-radius: 99px;
  border: 1px solid rgba(244,245,251,.28); background: transparent; color: #F4F5FB;
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: border-color .35s, color .35s, background-color .35s, transform .35s cubic-bezier(.22,1,.36,1);
}
.ts-chip:hover { border-color: #3BC4F2; transform: translateY(-1px); }
.ts-chip.on { background: #F4F5FB; color: #120C24; border-color: #F4F5FB; }
.ts-nav { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.ts-hint { font-size: 12px; font-weight: 600; letter-spacing: .2em;
  color: rgba(244,245,251,.55); margin-right: 6px; }
.ts-arrow {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(244,245,251,.28);
  background: transparent; color: #F4F5FB; font-family: inherit; font-size: 20px; cursor: pointer;
  display: grid; place-items: center;
  transition: border-color .25s, color .25s, transform .3s cubic-bezier(.22,1,.36,1);
}
.ts-arrow:hover { border-color: #3BC4F2; color: #3BC4F2; }
.ts-arrow.prev:hover { transform: translateX(-2px); }
.ts-arrow.next:hover { transform: translateX(2px); }
.ts-chip:focus-visible, .ts-arrow:focus-visible, .ts-cta:focus-visible {
  outline: 2px solid #3BC4F2; outline-offset: 3px; }

@media (max-width: 860px) {
  .ts-rail { gap: 14px; }
  .ts-nav { justify-content: center; }
  .ts-cap { justify-content: center; }
  /* There is nothing to drag with on a touch screen that is not also the
     page's own scroll, so the arrows say what to do instead. */
  .ts-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ts-cta, .ts-chip, .ts-arrow { transition: none !important; }
}