/* =============================================================================
   Single Blog Post — sidebar + article layout
   Ported from Claude Design "blog-single.html". Uses ONLY existing design tokens
   from style.css (no new tokens). Classes are scoped under .ts-single / .ts-sp-*
   so they never collide with the rest of the theme.
   ============================================================================= */

.ts-single { background: var(--ts-white); color: var(--fg-2); }

/* ===== Reading progress bar ===== */
.ts-sp-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; background: rgba(42, 30, 48,.08); z-index: 1000; }
.ts-sp-progress-fill { height: 100%; background: var(--ts-coral-400); transform-origin: left center; transform: scaleX(0); transition: transform 80ms linear; }

/* ===== Post Banner ===== */
/* Clean purple gradient header; the featured image is rendered as a real
   <img> below the banner (.ts-sp-hero-media), not as a background. */
.ts-sp-banner { position: relative; overflow: hidden; color: #fff; padding: 20px var(--gutter); margin-bottom: 20px;
  background-color: var(--ts-plum-600);
  background-image: linear-gradient(120deg, var(--ts-plum-700) 0%, var(--ts-plum-500) 100%); }

.ts-sp-banner::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 48px 48px;
}
.ts-sp-banner-inner { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; text-align: left; }

/* Featured image — whole image, no crop, capped height, centered. */
.ts-sp-hero-media { max-width: 1100px; margin: 0 auto 20px; padding: 0 var(--gutter); text-align: center; }
.ts-sp-hero-media img { display: inline-block; max-width: 100%; max-height: 520px; width: auto; height: auto; border-radius: var(--r-lg); }
.ts-sp-banner-text { max-width: 768px; width: 100%; }
.ts-sp-banner-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ts-sp-banner-cat { font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); padding: 4px 8px; border-radius: var(--r-pill); backdrop-filter: blur(4px); transition: background var(--d-base); }
.ts-sp-banner-cat:hover { background: rgba(255,255,255,.2); color: #fff; }
.ts-sp-banner h1 { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; line-height: 1.25; margin: 0 0 16px; color: #fff; text-wrap: balance; }
.ts-sp-banner-subtitle { font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.82); margin: -8px 0 16px; max-width: 720px; width: 100%; }
.ts-sp-banner-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; color: rgba(255,255,255,.85); }
.ts-sp-banner-meta .ts-sp-author-chip { display: inline-flex; align-items: center; gap: 9px; }
.ts-sp-banner-meta .ts-sp-author-dot { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--ts-plum-700); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 11px; overflow: hidden; }
.ts-sp-banner-meta .ts-sp-author-dot img { width: 100%; height: 100%; object-fit: cover; }
.ts-sp-banner-meta .ts-sp-meta-sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.5); }
.ts-sp-banner-meta span { display: inline-flex; align-items: center; gap: 6px; }
.ts-sp-banner-meta a { color: #fff; font-weight: 600; }
.ts-sp-banner-meta a:hover { color: #fff; text-decoration: underline; }
.ts-sp-banner-meta svg { width: 14px; height: 14px; }

/* ===== Layout (Sidebar + Article) ===== */
.ts-sp-layout { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter) 24px; display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 72px; align-items: start; }

/* === SIDEBAR === */
.ts-sp-sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 28px; font-family: var(--font-body); }
.ts-sp-side-block { font-family: var(--font-body); }
/* .ts-sp-side-label / .ts-sp-toc* now live in the theme's global style.css
   (TOC SIDEBAR section) since ts_render_toc_sidebar() is shared across
   post types. */

/* Share */
.ts-sp-share-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ts-sp-share-btn { width: 34px; height: 34px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--ts-ink-200); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fg-2); transition: all var(--d-base); }
.ts-sp-share-btn:hover { border-color: var(--ts-plum-300); background: var(--ts-plum-50); color: var(--ts-plum-700); transform: translateY(-1px); }
.ts-sp-share-btn svg { width: 15px; height: 15px; }
.ts-sp-copy-toast { font-size: 11px; color: var(--ts-success); margin-top: 8px; opacity: 0; transition: opacity var(--d-base); }
.ts-sp-copy-toast.show { opacity: 1; }

/* Credentials */
.ts-sp-cred-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ts-sp-cred-btn {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  background: #fff; border: 1px solid var(--ts-ink-200);
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; transition: all var(--d-base);
}
.ts-sp-cred-btn:hover { border-color: var(--ts-plum-300); transform: translateY(-1px); }
.ts-sp-cred-btn img { width: 100%; height: 100%; object-fit: cover; }
.ts-sp-cred-tt { background: #25a9ef; border-color: #25a9ef; }

/* Side CTA card */
.ts-sp-side-cta { background: var(--ts-ink-900); color: #fff; border-radius: var(--r-card); padding: 20px; }
.ts-sp-side-cta h5 { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 1.3; }
.ts-sp-side-cta p { font-size: 12px; color: var(--ts-ink-400); margin: 0 0 12px; line-height: 1.5; }

/* Shared CTA button */
.ts-sp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 600; border: 0; border-radius: var(--r-md); cursor: pointer; padding: 12px 16px; font-size: 13px; background: var(--ts-plum-600); color: #fff; transition: background var(--d-base), transform var(--d-base); text-decoration: none; }
.ts-sp-btn:hover { background: var(--ts-plum-700); color: #fff; transform: translateY(-1px); }
.ts-sp-btn svg { width: 15px; height: 15px; }
.ts-sp-side-cta .ts-sp-btn { width: 100%; padding: 8px 12px; font-size: 12px; }
.ts-sp-btn-coral { background: var(--ts-coral-500); }
.ts-sp-btn-coral:hover { background: var(--ts-coral-600); }

/* === ARTICLE ===
   Body copy — paragraphs, lists, headings, tables and blockquotes — inherits the
   theme's existing .post-body / .wp-block-* styles from style.css. Only the
   reading-column sizing and the components NOT defined in style.css live here. */
.ts-single .ts-sp-article.post-body { max-width: none !important; margin: 0 !important; padding: 0 !important; font-family: var(--font-body); font-size: 17px; line-height: 1.75; color: var(--fg-2); }

/* Tighten the inherited .post-body content rhythm on single posts */
.ts-sp-article p,
.ts-sp-article .wp-block-paragraph { margin: 0 0 0.5rem; }
.ts-sp-article h1, .ts-sp-article h2, .ts-sp-article h3,
.ts-sp-article h4, .ts-sp-article h5, .ts-sp-article h6 { margin: 0.5rem 0; }
.ts-sp-article blockquote,
.ts-sp-article .wp-block-quote { margin: 0.5rem 0; }
.ts-sp-article ul, .ts-sp-article ol { margin: 0.5rem 0; }
.ts-sp-article li { padding: 4px 0 4px 32px; }
.ts-sp-article ul > li::before,
.ts-sp-article ol > li::before { top: 12px; }

/* In-content links are coral, not plum: plum sits too close to the body ink to
   read as a link. Coral-500 rather than the brand coral-400, which only reaches
   3.5:1 on white and fails AA for body-size text; 500 clears it at 4.5:1. */
.ts-sp-article a:not(.ts-sp-btn) { color: var(--ts-coral-500); transition: color var(--d-fast); }
.ts-sp-article a:not(.ts-sp-btn):hover { color: var(--ts-coral-600); }
.ts-sp-article strong { color: var(--fg-1); font-weight: 600; }
.ts-sp-article em { color: var(--fg-1); }
.ts-sp-article code:not(pre code) { font-family: var(--font-mono); font-size: 14px; background: var(--ts-plum-50); color: var(--ts-plum-800); padding: 4px 8px; border-radius: 5px; border: 1px solid var(--ts-plum-100); }

/* First-paragraph "lead" treatment (auto-applied to the opening paragraph) */
.ts-sp-article > p:first-of-type { font-size: 20px; line-height: 1.6; color: var(--fg-1); font-weight: 500; }

.ts-sp-article img { max-width: 100%; height: auto; border-radius: var(--r-card); }
.ts-sp-article figure { margin: 36px 0; }
.ts-sp-article figcaption { font-size: 13px; color: var(--fg-3); margin-top: 12px; line-height: 1.5; text-align: center; }

/* Pull quote (optional .pull-quote in content) */
.ts-sp-article .pull-quote { margin: 36px 0; padding: 24px 28px; background: var(--ts-plum-50); border-left: 3px solid var(--ts-plum-500); border-radius: 4px 12px 12px 4px; }
.ts-sp-article .pull-quote p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--fg-1); }

/* Code blocks */
.ts-sp-article pre { margin: 32px 0; background: var(--ts-ink-900); border-radius: var(--r-card); overflow-x: auto; border: 1px solid var(--ts-ink-800); padding: 20px; }
.ts-sp-article pre code { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; color: var(--ts-ink-100); background: none; border: 0; padding: 0; }

/* Callouts (optional .callout in content) */
.ts-sp-article .callout { display: flex; gap: 14px; padding: 16px 20px; border-radius: var(--r-card); border: 1px solid var(--ts-plum-100); background: var(--ts-plum-50); color: var(--ts-plum-800); align-items: flex-start; font-size: 14.5px; line-height: 1.55; margin: 32px 0; }
.ts-sp-article .callout strong { display: block; font-family: var(--font-display); font-size: 14px; margin-bottom: 4px; color: var(--fg-1); }
.ts-sp-article .callout p { margin: 0; }

/* Inline CTA (optional .inline-cta in content) */
.ts-sp-article .inline-cta { background: var(--ts-plum-600); color: #fff; border-radius: var(--r-lg); padding: 28px; margin: 36px 0; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; }
.ts-sp-article .inline-cta h4 { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: #fff; margin: 0 0 4px; }
.ts-sp-article .inline-cta p { font-size: 13px; color: rgba(255,255,255,.82); margin: 0; line-height: 1.5; }

/* ===== Tags row ===== */
.ts-sp-tags { margin: 24px 0 8px; display: flex; flex-wrap: wrap; gap: 8px; padding: 24px 0; border-top: 1px solid var(--ts-ink-200); align-items: center; }
.ts-sp-tags .ts-sp-tags-label { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin-right: 8px; }
.ts-sp-tag-chip { font-size: 12px; padding: 4px 12px; background: var(--ts-ink-100); color: var(--fg-1); border-radius: var(--r-pill); font-weight: 500; transition: all var(--d-base); }
.ts-sp-tag-chip:hover { background: var(--ts-plum-100); color: var(--ts-plum-700); }

/* ===== Author bio ===== */
.ts-sp-author-bio { margin: 8px 0 24px; display: grid; grid-template-columns: 92px 1fr; gap: 22px; align-items: start; padding: 24px; background: var(--ts-ink-50); border: 1px solid var(--ts-plum-100); border-radius: var(--r-card); }
.ts-sp-author-bio .ts-sp-av-lg { width: 92px; height: 92px; border-radius: 50%; background: linear-gradient(135deg, var(--ts-plum-600), var(--ts-plum-500)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 32px; overflow: hidden; }
.ts-sp-author-bio .ts-sp-av-lg img { width: 100%; height: 100%; object-fit: cover; }
.ts-sp-author-bio .ts-sp-bio-eyebrow { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-plum-700); margin: 0 0 4px; }
.single-post .ts-sp-author-bio h4 { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--fg-1); margin: 0 0 8px; }
.ts-sp-author-bio p { font-size: 14px; line-height: 1.6; color: var(--fg-2); margin: 0 0 12px; }
.ts-sp-author-bio .ts-sp-bio-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ts-sp-author-bio .ts-sp-bio-link { font-size: 13px; font-weight: 600; color: var(--ts-plum-700); border-bottom: 1px solid rgba(42, 30, 48,.25); }
.ts-sp-author-bio .ts-sp-bio-socials { display: flex; gap: 6px; margin-left: auto; }
.ts-sp-author-bio .ts-sp-bio-socials a { width: 30px; height: 30px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--ts-ink-200); display: inline-flex; align-items: center; justify-content: center; color: var(--fg-2); }
.ts-sp-author-bio .ts-sp-bio-socials a svg { width: 13px; height: 13px; }
.ts-sp-author-bio .ts-sp-bio-socials a:hover { color: var(--ts-plum-700); border-color: var(--ts-plum-300); }

/* ===== Prev / Next ===== */
.ts-sp-prevnext { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ts-sp-pn-card { padding: 16px 20px; border: 1px solid var(--ts-ink-200); border-radius: var(--r-card); transition: all var(--d-base); background: #fff; }
.ts-sp-pn-card:hover { border-color: var(--ts-plum-300); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ts-sp-pn-label { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 8px; display: inline-flex; align-items: center; gap: 5px; }
.ts-sp-pn-label svg { width: 12px; height: 12px; }
.ts-sp-pn-card h5 { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--fg-1); margin: 0; line-height: 1.35; }
.ts-sp-pn-next { text-align: right; }
.ts-sp-pn-next .ts-sp-pn-label { justify-content: flex-end; }

/* ===== Related Posts ===== */
.ts-sp-related { padding: 72px var(--gutter); background: var(--ts-ink-50); border-top: 1px solid var(--ts-ink-200); }
.ts-sp-related-head { max-width: 1100px; margin: 0 auto 16px; display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ts-sp-related-head h2 { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: -.015em; color: var(--fg-1); margin: 0; }
.ts-sp-related-head p { font-size: 14px; color: var(--fg-3); margin: 8px 0 0; }
.ts-sp-related-head a { font-size: 13px; font-weight: 600; color: var(--ts-plum-700); display: inline-flex; align-items: center; gap: 5px; }
.ts-sp-related-head a svg { width: 14px; height: 14px; }
.ts-sp-related-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ts-sp-rel-card { background: #fff; border: 1px solid var(--ts-ink-200); border-radius: var(--r-card); overflow: hidden; transition: all var(--d-base); display: flex; flex-direction: column; }
.ts-sp-rel-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--ts-plum-200); }
.ts-sp-rel-thumb { aspect-ratio: 16/9; position: relative; overflow: hidden; display: block; }
.ts-sp-rel-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ts-sp-rel-thumb-1 { background: linear-gradient(135deg, var(--ts-plum-700), var(--ts-plum-400)); }
.ts-sp-rel-thumb-2 { background: linear-gradient(135deg, #0F766E, #14B8A6); }
.ts-sp-rel-thumb-3 { background: linear-gradient(135deg, #B45309, #F59E0B); }
.ts-sp-rel-pill { position: absolute; left: 14px; top: 14px; background: rgba(255,255,255,.94); color: var(--ts-plum-700); font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 4px 12px; border-radius: var(--r-pill); z-index: 1; }
.ts-sp-rel-body { padding: 16px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.ts-sp-rel-body h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--fg-1); margin: 0 0 8px; line-height: 1.35; letter-spacing: -.01em; }
.ts-sp-rel-body h3 a { color: inherit; }
.ts-sp-rel-body h3 a:hover { color: var(--ts-plum-700); }
.ts-sp-rel-body p { font-size: 13px; color: var(--fg-3); margin: 0 0 12px; line-height: 1.5; }
.ts-sp-rel-meta { display: flex; gap: 12px; font-size: 11.5px; color: var(--fg-3); padding-top: 12px; border-top: 1px solid var(--ts-ink-100); margin-top: auto; }
.ts-sp-rel-meta span { display: inline-flex; align-items: center; gap: 4px; }
.ts-sp-rel-meta svg { width: 11px; height: 11px; }

/* ===== Responsive ===== */
@media (max-width: 960px) {
  .ts-sp-layout { grid-template-columns: 1fr; gap: 32px; }
  .ts-sp-sidebar { position: static; order: 2; }
  .ts-sp-article { max-width: 100%; }
  .ts-sp-related-grid { grid-template-columns: 1fr; }
  .ts-sp-prevnext { grid-template-columns: 1fr; }
  .ts-sp-author-bio { grid-template-columns: 64px 1fr; }
  .ts-sp-author-bio .ts-sp-av-lg { width: 64px; height: 64px; font-size: 22px; }
  .ts-sp-article .inline-cta { grid-template-columns: 1fr; }
}

/* ═══ Sea diver ═══════════════════════════════════════════════════════════
   Anchored to the TOC list in the sticky sidebar: the widget sits inside a
   .ts-diver-anchor wrapper next to #ts-sp-toc and inherits the TOC's height
   + sticky positioning. A diver descends as the reader scrolls the article,
   collecting gold stars, then the sea-bed pearl swaps to a diamond. Water
   is multi-layer animated. Bubbles exhale from the diver's regulator pipe
   (left-bottom of the icon). Hidden when the sidebar collapses (≤960px). */

.ts-diver-anchor {
  position: relative;
}

.ts-diver {
  /* Theme-purple water: light lavender surface → violet mid → deep purple bed. */
  --water-top: var(--ts-plum-200, #D5C6D7);
  --water-mid: var(--ts-plum-500, #4A3550);
  --water-deep: var(--ts-plum-900, #0B0610);
  --coin: #f59e0b;
  --coin-hi: #fde68a;
  --coin-lo: #b45309;
  --track-w: 32px;
  --diver-size: 28px;
  position: absolute;
  left: calc(100% + 14px);   /* to the right of the TOC */
  top: 0;
  bottom: 0;
  width: 44px;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  overflow: hidden; /* clip bubbles at TOC top */
  font-family: var(--font-body);
}
.ts-diver.is-ready { opacity: 1; }

@media (max-width: 960px) { .ts-diver { display: none; } }

/* Vertical water column, dark at bottom simulating depth. */
.ts-diver__track {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: var(--track-w);
  transform: translateX(-50%);
  border-radius: calc(var(--track-w) / 2);
  background: linear-gradient(to bottom, var(--water-top) 0%, var(--water-mid) 40%, var(--water-deep) 100%);
  box-shadow: inset 0 0 14px rgba(0,0,0,.35);
  overflow: hidden;
}
/* Layer 1: tight fast-moving flow lines (primary sense of motion). */
.ts-diver__track::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.09) 0px,
    rgba(255,255,255,.09) 2px,
    transparent 2px,
    transparent 14px
  );
  animation: ts-diver-flow 2.6s linear infinite;
  pointer-events: none;
}
/* Layer 2: wider, slower ripple bands (parallax depth cue). */
.ts-diver__track::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,.05) 0px,
    rgba(255,255,255,.05) 6px,
    transparent 6px,
    transparent 60px
  );
  animation: ts-diver-flow-slow 7s linear infinite;
  pointer-events: none;
}
@keyframes ts-diver-flow {
  from { background-position: 0 0; }
  to   { background-position: 0 14px; }
}
@keyframes ts-diver-flow-slow {
  from { background-position: 0 0; }
  to   { background-position: 0 60px; }
}

/* Layer 3: bright light-band shimmer sweeping downward. */
.ts-diver__shimmer {
  position: absolute;
  left: 50%;
  top: 0;
  width: var(--track-w);
  height: 100%;
  transform: translateX(-50%);
  border-radius: calc(var(--track-w) / 2);
  overflow: hidden;
  pointer-events: none;
}
.ts-diver__shimmer::before {
  content: '';
  position: absolute;
  left: -20%;
  right: -20%;
  height: 80px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,.14) 40%,
    rgba(255,255,255,.30) 50%,
    rgba(255,255,255,.14) 60%,
    transparent 100%);
  filter: blur(3px);
  animation: ts-diver-shimmer 5.5s linear infinite;
}
@keyframes ts-diver-shimmer {
  0%   { top: -80px; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%;  opacity: 0; }
}

.ts-diver__items {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ts-diver__coin {
  position: absolute;
  left: 50%;
  top: calc(var(--p) * 100%);
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, var(--coin-hi) 0%, var(--coin) 55%, var(--coin-lo) 100%);
  border: 1.5px solid var(--coin-lo);
  box-shadow: 0 0 8px rgba(251,191,36,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #78350f;
  font-size: 12px;
  font-weight: 800;
  z-index: 2;
  transition:
    transform .35s cubic-bezier(.34,1.56,.64,1),
    opacity   .35s ease;
}
.ts-diver__coin::before { content: '★'; line-height: 1; }
.ts-diver__coin.is-collected {
  transform: translate(-50%, -50%) scale(1.9);
  opacity: 0;
}

/* Sea-bed target: pearl → diamond on finish. */
.ts-diver__target {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  font-size: 26px;
  z-index: 4;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.4));
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), filter .5s ease;
}
.ts-diver.is-done .ts-diver__target {
  transform: translateX(-50%) scale(1.45);
  filter: drop-shadow(0 0 14px rgba(196,181,253,.9)); /* purple-300 glow */
}

/* Diver — centered on the water column via left:50% + centered box. */
.ts-diver__diver {
  position: absolute;
  left: 50%;
  top: var(--y, 0px);
  width: var(--diver-size);
  height: var(--diver-size);
  margin-left: calc(var(--diver-size) / -2);
  font-size: 30px;
  line-height: var(--diver-size);
  text-align: center;
  z-index: 3;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.35));
  transform: rotate(180deg);
  animation: ts-diver-kick-down .9s ease-in-out infinite alternate;
  will-change: top;
}
.ts-diver__diver[data-dir="up"] {
  transform: rotate(0deg);
  animation: ts-diver-kick-up .9s ease-in-out infinite alternate;
}
@keyframes ts-diver-kick-down {
  0%   { transform: rotate(180deg) scaleX(.94); }
  100% { transform: rotate(180deg) scaleX(1.06); }
}
@keyframes ts-diver-kick-up {
  0%   { transform: rotate(0deg) scaleX(.94); }
  100% { transform: rotate(0deg) scaleX(1.06); }
}

/* Victory bounce when the diver reaches the sea bed. */
.ts-diver.is-done .ts-diver__diver {
  animation: ts-diver-bounce 700ms cubic-bezier(.34,1.56,.64,1) 3;
}
@keyframes ts-diver-bounce {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(0deg) scale(1.2); }
  100% { transform: rotate(0deg) scale(1); }
}

/* Bubble emitter layer — bubbles positioned relative to the widget so they
   flow with the article as the reader scrolls. */
.ts-diver__bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ts-diver__bubble {
  position: absolute;
  left: var(--x, 50%);
  top: var(--start, 50%);
  width: var(--size, 8px);
  height: var(--size, 8px);
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.65);
  box-shadow: inset 0 0 4px rgba(255,255,255,.4);
  transform: translate(-50%, 0);
  animation: ts-diver-bubble var(--dur, 3s) linear forwards;
  opacity: 0;
}
@keyframes ts-diver-bubble {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.6); }
  15%  { opacity: 1; }
  100% { opacity: 0;
         transform: translate(calc(-50% + var(--drift, 0px)), var(--rise, -400px)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .ts-diver__track::before,
  .ts-diver__track::after,
  .ts-diver__shimmer::before { animation: none; }
  .ts-diver__diver { animation: none; transition: none; }
  .ts-diver.is-done .ts-diver__diver { animation: none; }
  .ts-diver__bubble { display: none; }
}