/* Angler — 15 · teammate. The pilot page's card register: paper, ink hairline, ink drop.
   .tm__head / eyebrow / h2 / sub are the shared head for 15, 24 and 26. Tokens only. */

.tm, .eg, .vs { background: var(--paper); }
.tm__wrap { max-width: 1100px; margin-inline: auto; padding-inline: var(--gutter); }
.tm__head { max-width: 62ch; }
.tm__eyebrow {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 500;
  color: var(--dawn-deep); margin-bottom: 10px;
}
.tm__h {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--ink);
}
.tm__sub { margin-top: 14px; font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.5; color: var(--muted); }

.tm__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 40px; }
.tm__card {
  padding: 30px 30px 32px; background: var(--paper);
  border: 1.5px solid var(--ink); border-radius: var(--r-card); box-shadow: 0 2px 0 var(--ink);
}
.tm__kind { display: block; margin-bottom: 18px; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .06em; color: var(--muted); }
.tm__card h3 {
  margin-bottom: 12px; font-family: var(--serif); font-weight: 600; font-size: 1.35rem;
  line-height: 1.2; letter-spacing: -.015em; color: var(--ink);
}
.tm__card p { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }

@media (max-width: 900px) {
  .tm__cards { grid-template-columns: 1fr; }
  .tm__card { padding: 24px 22px 26px; }
}

/* ---- card scenes. Looping SVG, an owner-directed exception to the no-idle-animation rule
   (product-context/design-system.md). Paused until the card reveals; under reduced motion
   each holds one settled frame instead. ---- */
.tm__art { aspect-ratio: 2 / 1; margin: -12px -12px 22px; border-radius: 3px; background: var(--vellum); overflow: hidden; }
.tm__art svg { width: 100%; height: 100%; }
.tm__art * { transform-box: view-box; }
.js-ready .tm__card:not(.is-in) .tm__art * { animation-play-state: paused; }

.il-ink    { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.il-thin   { fill: none; stroke: var(--ink); stroke-width: 1; }
.il-line   { fill: none; stroke: var(--line); stroke-width: 2; }
.il-paper  { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; }
.il-dot    { fill: var(--ink); }
.il-brown  { fill: var(--dawn-deep); }
.il-arrow  { fill: none; stroke: var(--lake); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.il-silver { fill: var(--parchment); stroke: var(--ink); stroke-width: 1.5; }
.il-shine  { fill: none; stroke: var(--paper); stroke-width: 4; stroke-linecap: round; }
.il-sleeve { fill: var(--ink); }
.il-stitch { fill: none; stroke: var(--muted); stroke-width: 1; stroke-linecap: round; }
.il-finger { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; }
.il-spark  { fill: var(--dawn); transform-box: fill-box; transform-origin: center; }
.il-floor  { fill: var(--vellum); }
.il-board  { fill: none; stroke: var(--ink); stroke-width: 4; }
.il-b1 { fill: var(--lake); } .il-b2 { fill: var(--dawn); } .il-b3 { fill: var(--rust); }
.il-b4 { fill: var(--ink-soft); } .il-b5 { fill: var(--moss); } .il-b6 { fill: var(--dawn-deep); }
.il-label text { font-family: var(--mono); font-weight: 500; font-size: 3.4px; letter-spacing: .04em; fill: var(--paper); text-anchor: middle; dominant-baseline: central; }

/* 01 · clock runs backwards and the money comes back. The markup draws the clock around
   its own (0,0) inside a translate(); each hand rotates about that local origin, so no
   viewBox coordinate lives here. Class names are new on purpose: stale cached rules for
   the old hand classes (origin hard-coded to an old cx) can't match anything. The three $
   share the minute hand's 6s loop: $ at 0s, $$ at 2s, $$$ at 4s, all fade out together. */
.il-clock-min, .il-clock-hr { transform-box: view-box; transform-origin: 0 0; }
.il-clock-min { animation: il-clock-back 6s linear infinite; }
.il-clock-hr  { animation: il-clock-back 72s linear infinite; }
@keyframes il-clock-back { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
.il-clock-cash {
  font-family: var(--serif); font-weight: 700; font-size: 26px; fill: var(--moss);
  text-anchor: middle; transform-box: fill-box; transform-origin: center;
  animation: 6s var(--ease-house) infinite;
}
.il-clock-c1 { animation-name: il-clock-c1; }
.il-clock-c2 { animation-name: il-clock-c2; }
.il-clock-c3 { animation-name: il-clock-c3; }
@keyframes il-clock-c1 { 0% { opacity: 0; transform: scale(.5); } 6%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes il-clock-c2 { 0%, 33.3% { opacity: 0; transform: scale(.5); } 39.3%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
@keyframes il-clock-c3 { 0%, 66.6% { opacity: 0; transform: scale(.5); } 72.6%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

/* 02 · the gloved hand lifts the cloche, the slide sparkles, the cloche goes back down */
.il-dome  { transform-origin: 254px 140px; animation: il-lift 7s var(--ease-house) infinite; }
.il-spark { animation: il-spark 7s var(--ease-house) infinite; }
@keyframes il-lift  { 0%, 14% { transform: none; } 40%, 78% { transform: translate(30px, -42px) rotate(10deg); } 94%, 100% { transform: none; } }
@keyframes il-spark { 0%, 34% { transform: scale(0); } 44% { transform: scale(1.25); } 50%, 72% { transform: scale(1); } 80%, 100% { transform: scale(0); } }

/* 03 · camera pulls back from the four spines; fades and cuts to the start to loop */
.il-cam { transform-origin: 0 0; animation: il-cam 9s var(--ease-house) infinite; }
@keyframes il-cam {
  0%, 12% { transform: translate(160px, 80px) scale(3.6) translate(-163px, -145px); opacity: 1; }
  70%, 90% { transform: translate(160px, 152px) scale(.4) translate(-160px, -160px); opacity: 1; }
  95% { transform: translate(160px, 152px) scale(.4) translate(-160px, -160px); opacity: 0; }
  96% { transform: translate(160px, 80px) scale(3.6) translate(-163px, -145px); opacity: 0; }
  100% { transform: translate(160px, 80px) scale(3.6) translate(-163px, -145px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .tm__art * { animation: none !important; }
  .il-clock-min { transform: rotate(-60deg); }
  .il-clock-hr  { transform: rotate(-30deg); }
  .il-dome { transform: translate(30px, -42px) rotate(10deg); }
  .il-cam { transform: translate(160px, 152px) scale(.4) translate(-160px, -160px); }
}