/* ===========================================================================
   Feature-card mini-scenes (partials/card-scenes/*.php), 2026-10-02.
   They replace the cropped screenshots: a few large, readable elements in the
   site's own colours, one idea per card, fading into the card instead of
   being cut off at its edges.

   Animation runs off the card's scroll reveal: reveal.js puts .is-visible on
   the .card, and everything below starts from it. Under reduced motion
   reveal.js adds it at once and the rules at the bottom skip straight to the
   final frame.
   =========================================================================== */

.v2 .card-scene {
  position: relative;
  z-index: 1;
  height: 184px;
  margin-top: var(--s-4);
  /* Fades out toward the bottom edge instead of being cropped by it. */
  -webkit-mask-image: linear-gradient(#000 72%, transparent);
          mask-image: linear-gradient(#000 72%, transparent);
}

/* Shared bits */
.v2 .cs-label { display: block; font-size: 11.5px; letter-spacing: 0.04em; color: var(--text-muted); }
.v2 .cs-badge,
.v2 .cs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.v2 .cs-badge svg,
.v2 .cs-chip svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Analytics ===== */
.v2 .cs-panel {
  height: 100%;
  padding: 16px 16px 0;
  border: 1px solid var(--hairline);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01));
}
.v2 .cs-an-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.v2 .cs-an-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 2px;
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.v2 .cs-an-up { font-family: var(--font-body, inherit); font-size: 12px; font-weight: 600; color: #5cf2a0; letter-spacing: 0; }
.v2 .cs-badge { color: var(--accent-voice); background: var(--accent-voice-soft); border: 1px solid var(--accent-voice-line); }

.v2 .cs-an-plot { position: relative; height: 96px; margin-top: 14px; }
.v2 .cs-an-chart { display: block; width: 100%; height: 100%; overflow: visible; }
.v2 .cs-an-line {
  fill: none;
  stroke: #f2a65a;
  stroke-width: 2.5;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px rgba(242, 166, 90, 0.55));
}
.v2 .cs-an-dot {
  position: absolute;
  left: calc(306 / 312 * 100%);
  top: 20%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(242, 166, 90, 0.35), 0 0 16px 4px rgba(242, 166, 90, 0.6);
}
.v2 .cs-an-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(242, 166, 90, 0.7);
  opacity: 0;
}

/* The draw: line sweeps in, the area fades up under it, the dot lands, then
   pulses gently for as long as the card is on screen. */
.v2 .card .cs-an-line { stroke-dashoffset: 100; }
.v2 .card .cs-an-area { opacity: 0; }
.v2 .card .cs-an-dot { opacity: 0; transform: scale(0.4); }
.v2 .card.is-visible .cs-an-line { animation: cs-draw 1.6s cubic-bezier(.45, 0, .2, 1) 0.25s forwards; }
.v2 .card.is-visible .cs-an-area { animation: cs-fade 1s ease 0.9s forwards; }
.v2 .card.is-visible .cs-an-dot  { animation: cs-pop 0.5s cubic-bezier(.3, 1.6, .5, 1) 1.75s forwards; }
.v2 .card.is-visible .cs-an-dot::after { animation: cs-pulse 2.4s ease-out 2.3s infinite; }

/* ===== Media ===== */
.v2 .cs-media { position: relative; height: 100%; }
.v2 .cs-photo {
  position: absolute;
  left: 50%;
  top: 34px;
  width: 41%;
  aspect-ratio: 4 / 3;
  margin-left: -20.5%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.7);
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(.2, .8, .2, 1);
}
/* Soft gradient "photos": a sky, a warm hill, a sea. */
.v2 .cs-photo-1 { background: radial-gradient(60% 50% at 70% 30%, rgba(255, 255, 255, 0.35), transparent 70%), linear-gradient(160deg, #5b7cf0, #2b3d8f); }
.v2 .cs-photo-3 { background: radial-gradient(70% 55% at 30% 70%, rgba(255, 220, 190, 0.45), transparent 70%), linear-gradient(160deg, #f0a35b, #c2553f); }
.v2 .cs-photo-2 {
  z-index: 2;
  background:
    radial-gradient(45% 35% at 75% 28%, rgba(255, 245, 225, 0.85), transparent 70%),
    radial-gradient(120% 60% at 50% 115%, #1f6f8b, transparent 60%),
    linear-gradient(175deg, #f7b78b 0%, #e2786a 45%, #7b4f9e 100%);
}
.v2 .cs-photo-name {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  color: #fff;
  background: rgba(10, 15, 30, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.v2 .cs-chip { position: absolute; z-index: 3; }
.v2 .cs-chip-webp {
  right: 3%;
  top: 8px;
  color: var(--text-primary);
  background: rgba(19, 27, 46, 0.72);
  border: 1px solid var(--hairline-strong);
}
.v2 .cs-chip-webp strong { color: #5cf2a0; font-weight: 700; }
.v2 .cs-chip-old { color: var(--text-muted); font-weight: 500; text-decoration: line-through; text-decoration-color: rgba(147, 160, 191, 0.7); }
.v2 .cs-chip-lock {
  left: 3%;
  top: 112px;
  color: #f2a65a;
  background: rgba(242, 166, 90, 0.14);
  border: 1px solid rgba(242, 166, 90, 0.4);
}

/* The fan: all three start stacked, then spread when the card appears; a
   hover spreads them a little further. Chips arrive after the fan. */
.v2 .card .cs-photo-1,
.v2 .card .cs-photo-3 { transform: rotate(0) translateX(0) scale(0.92); }
.v2 .card .cs-photo-2 { transform: translateY(6px); }
.v2 .card.is-visible .cs-photo-1 { transform: translateX(-62%) rotate(-9deg) scale(0.9); transition-delay: 0.2s; }
.v2 .card.is-visible .cs-photo-3 { transform: translateX(62%) rotate(9deg) scale(0.9); transition-delay: 0.2s; }
.v2 .card.is-visible .cs-photo-2 { transform: none; transition-delay: 0.2s; }
.v2 .card.is-visible:hover .cs-photo-1 { transform: translateX(-63%) rotate(-11deg) scale(0.9); transition-delay: 0s; }
.v2 .card.is-visible:hover .cs-photo-3 { transform: translateX(63%) rotate(11deg) scale(0.9); transition-delay: 0s; }
.v2 .card.is-visible:hover .cs-photo-2 { transform: translateY(-4px) scale(1.03); transition-delay: 0s; }
.v2 .card .cs-chip { opacity: 0; transform: translateY(6px); transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.2, .8, .2, 1); }
.v2 .card.is-visible .cs-chip-webp { opacity: 1; transform: none; transition-delay: 0.8s; }
.v2 .card.is-visible .cs-chip-lock { opacity: 1; transform: none; transition-delay: 1.05s; }

/* ===== Keyframes ===== */
@keyframes cs-draw  { to { stroke-dashoffset: 0; } }
@keyframes cs-fade  { to { opacity: 1; } }
@keyframes cs-pop   { to { opacity: 1; transform: none; } }
@keyframes cs-pulse {
  0%   { opacity: 0.9; transform: scale(0.8); }
  100% { opacity: 0;   transform: scale(2.2); }
}

/* Reduced motion: the finished picture, no movement. */
@media (prefers-reduced-motion: reduce) {
  .v2 .card .cs-an-line { stroke-dashoffset: 0; animation: none !important; }
  .v2 .card .cs-an-area,
  .v2 .card .cs-an-dot { opacity: 1; transform: none; animation: none !important; }
  .v2 .card .cs-an-dot::after { animation: none !important; }
  .v2 .card .cs-photo,
  .v2 .card .cs-chip { transition: none !important; }
}

/* ===== Frame Tools =====
   A mini browser, fully inside the scene (no bottom fade: the footer is part
   of the story). Order on reveal: code lines type in, the navbar drops into
   place, the footer rises into place, each with a "found" tag; then two menu
   items trade places every few seconds (Frame Studio's reordering). */
.v2 .card-scene-frame { -webkit-mask-image: none; mask-image: none; margin-bottom: var(--s-3); }
.v2 .cs-frame {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0 2px;
}
.v2 .cs-fr-nav,
.v2 .cs-fr-foot {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}
.v2 .cs-fr-nav { height: 36px; padding: 0 8px 0 12px; justify-content: space-between; }
.v2 .cs-fr-foot { height: 30px; padding: 0 12px; gap: 8px; }
.v2 .cs-fr-logo { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heading); font-size: 12px; font-weight: 600; color: var(--text-primary); }
.v2 .cs-fr-logo i { width: 12px; height: 12px; border-radius: 4px; background: linear-gradient(135deg, #6cc0ff, #f2a65a); }
.v2 .cs-fr-menu { position: relative; display: flex; gap: 6px; }
.v2 .cs-fr-item {
  width: 54px;
  padding: 4px 0;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 11px;
  text-align: center;
  color: var(--text-muted);
}
.v2 .cs-fr-bar { height: 6px; width: 34%; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.v2 .cs-fr-bar-s { width: 18%; }
.v2 .cs-fr-tag {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  color: #5cf2a0;
  background: rgba(12, 206, 107, 0.12);
  border: 1px solid rgba(92, 242, 160, 0.35);
  white-space: nowrap;
}
.v2 .cs-fr-nav .cs-fr-tag { top: -17px; }
/* Above the footer like the header's tag: below it, the card edge clips it. */
.v2 .cs-fr-foot .cs-fr-tag { top: -17px; }

.v2 .cs-fr-code {
  flex: 1 1 auto;
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed rgba(108, 192, 255, 0.35);
  background: rgba(10, 15, 30, 0.45);
  font: 11.5px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--text-primary);
  white-space: pre;
  overflow: hidden;
}
.v2 .cs-fr-code b { font-weight: 400; color: #f2a65a; }
.v2 .cs-fr-code em { font-style: normal; color: #6cc0ff; }
.v2 .cs-fr-code u { text-decoration: none; color: #5cf2a0; }
.v2 .cs-l { display: inline-block; }

/* Start state */
.v2 .card .cs-l { clip-path: inset(0 100% 0 0); }
.v2 .card .cs-fr-nav  { opacity: 0; transform: translateY(-26px); }
.v2 .card .cs-fr-foot { opacity: 0; transform: translateY(26px); }
.v2 .card .cs-fr-tag  { opacity: 0; transform: scale(0.8); }

/* Reveal sequence */
.v2 .card.is-visible .cs-l1 { animation: cs-type 0.45s steps(18) 0.2s forwards; }
.v2 .card.is-visible .cs-l2 { animation: cs-type 0.45s steps(22) 0.6s forwards; }
.v2 .card.is-visible .cs-l3 { animation: cs-type 0.55s steps(30) 1.0s forwards; }
.v2 .card.is-visible .cs-l4 { animation: cs-type 0.3s steps(10) 1.5s forwards; }
.v2 .card.is-visible .cs-fr-nav  { animation: cs-snap 0.6s cubic-bezier(.3, 1.4, .5, 1) 1.85s forwards; }
.v2 .card.is-visible .cs-fr-foot { animation: cs-snap 0.6s cubic-bezier(.3, 1.4, .5, 1) 2.15s forwards; }
.v2 .card.is-visible .cs-fr-nav .cs-fr-tag  { animation: cs-pop 0.4s cubic-bezier(.3, 1.6, .5, 1) 2.4s forwards; }
.v2 .card.is-visible .cs-fr-foot .cs-fr-tag { animation: cs-pop 0.4s cubic-bezier(.3, 1.6, .5, 1) 2.7s forwards; }
/* Studio: "Blog" is picked up and trades places with "Contact", then back. */
.v2 .card.is-visible .cs-fr-b { animation: cs-swap-b 7s ease-in-out 3.4s infinite; }
.v2 .card.is-visible .cs-fr-c { animation: cs-swap-c 7s ease-in-out 3.4s infinite; }

@keyframes cs-type { to { clip-path: inset(0 0 0 0); } }
@keyframes cs-snap { to { opacity: 1; transform: none; } }
/* One slot = item width 54px + gap 6px. */
@keyframes cs-swap-b {
  0%, 6%   { transform: none; border-color: transparent; color: var(--text-muted); background: transparent; }
  12%      { transform: translateY(-3px) scale(1.08); border-color: #f2a65a; color: var(--text-primary); background: rgba(242, 166, 90, 0.14); }
  30%      { transform: translate(60px, -3px) scale(1.08); border-color: #f2a65a; color: var(--text-primary); background: rgba(242, 166, 90, 0.14); }
  36%, 56% { transform: translateX(60px); border-color: transparent; color: var(--text-muted); background: transparent; }
  62%      { transform: translate(60px, -3px) scale(1.08); border-color: #f2a65a; color: var(--text-primary); background: rgba(242, 166, 90, 0.14); }
  80%      { transform: translateY(-3px) scale(1.08); border-color: #f2a65a; color: var(--text-primary); background: rgba(242, 166, 90, 0.14); }
  86%, 100%{ transform: none; border-color: transparent; color: var(--text-muted); background: transparent; }
}
@keyframes cs-swap-c {
  0%, 12%  { transform: none; }
  30%, 62% { transform: translateX(-60px); }
  80%, 100%{ transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .v2 .card .cs-l { clip-path: none; animation: none !important; }
  .v2 .card .cs-fr-nav, .v2 .card .cs-fr-foot, .v2 .card .cs-fr-tag { opacity: 1; transform: none; animation: none !important; }
  .v2 .card .cs-fr-b, .v2 .card .cs-fr-c { animation: none !important; }
}

/* ===== Search & AI: robot donkey in code rain =====
   Only the rain (and the bot names inside it) moves. Each column holds its
   characters twice and slides by half, so the loop has no seam. */
.v2 .card-scene-seo { -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.v2 .cs-seo { position: relative; height: 100%; border-radius: 14px; overflow: hidden; background: radial-gradient(60% 70% at 50% 55%, rgba(12, 206, 107, 0.10), transparent 70%); }
.v2 .cs-rain { position: absolute; inset: 0; }
.v2 .cs-rain-col {
  position: absolute;
  top: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 2px;
  color: rgba(92, 242, 160, 0.22);
  animation: cs-rain var(--dur) linear var(--delay) infinite;
}
.v2 .cs-rain-bot {
  position: absolute;
  top: -12%;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #5cf2a0;
  text-shadow: 0 0 8px rgba(92, 242, 160, 0.7);
  white-space: nowrap;
  opacity: 0;
  animation: cs-bot-fall 9s linear var(--delay) infinite;
}
.v2 .cs-robot {
  position: absolute;
  left: 50%;
  bottom: 6px;
  width: 150px;
  margin-left: -75px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}
.v2 .cs-robot-tip { filter: drop-shadow(0 0 6px rgba(92, 242, 160, 0.9)); }
@keyframes cs-rain { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes cs-bot-fall {
  0%   { transform: translateY(0); opacity: 0; }
  8%   { opacity: 1; }
  55%  { opacity: 1; }
  70%  { transform: translateY(190px); opacity: 0; }
  100% { transform: translateY(190px); opacity: 0; }
}

/* ===== Homepage embed: floating post cards ===== */
.v2 .cs-embed { position: relative; height: 100%; }
.v2 .cs-embed-title {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.v2 .cs-embed-title::after { content: ''; display: block; width: 28px; height: 2px; margin-top: 6px; border-radius: 1px; background: var(--accent-voice); }
.v2 .cs-post {
  position: absolute;
  left: 50%;
  top: 40px;
  width: 46%;
  margin-left: -23%;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #22304f;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}
.v2 .cs-post-thumb { height: 52px; background: radial-gradient(60% 80% at 30% 30%, rgba(255, 255, 255, 0.3), transparent 70%), linear-gradient(135deg, #f0a35b, #f2a65a 50%, #7b4f9e); }
.v2 .cs-post-back1 .cs-post-thumb { background: radial-gradient(60% 80% at 70% 30%, rgba(255, 255, 255, 0.3), transparent 70%), linear-gradient(135deg, #5b7cf0, #2b3d8f); }
.v2 .cs-post-back2 .cs-post-thumb { background: radial-gradient(60% 80% at 40% 40%, rgba(255, 255, 255, 0.3), transparent 70%), linear-gradient(135deg, #3fc1a8, #1f6f8b); }
.v2 .cs-post-body { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px 10px; }
.v2 .cs-post-cat { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-voice); }
.v2 .cs-post-title {
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v2 .cs-post-more { font-size: 10px; color: var(--accent-voice); font-weight: 600; }
.v2 .cs-post-back1 { --tx: -50%; --rot: -7deg; --s: 0.88; }
.v2 .cs-post-back2 { --tx: 50%;  --rot: 7deg;  --s: 0.88; }
.v2 .cs-post-front { --tx: 0%;   --rot: 0deg;  --s: 1; z-index: 2; top: 30px; }
.v2 .cs-post { transform: translateX(var(--tx)) rotate(var(--rot)) scale(var(--s)); }
.v2 .card.is-visible .cs-post-front { animation: cs-float 4.6s ease-in-out infinite; }
.v2 .card.is-visible .cs-post-back1 { animation: cs-float 5.4s ease-in-out -1.8s infinite; }
.v2 .card.is-visible .cs-post-back2 { animation: cs-float 5s ease-in-out -3.1s infinite; }
@keyframes cs-float {
  0%, 100% { transform: translate(var(--tx), 0) rotate(var(--rot)) scale(var(--s)); }
  50%      { transform: translate(var(--tx), -7px) rotate(var(--rot)) scale(var(--s)); }
}

/* ===== WordPress import: the file flips into a DonkeyCMS page ===== */
.v2 .card-scene-import { -webkit-mask-image: none; mask-image: none; }
.v2 .cs-import { position: relative; height: 100%; perspective: 700px; }
.v2 .cs-sheet {
  position: absolute;
  left: 50%;
  top: 14px;
  width: 112px;
  height: 142px;
  margin-left: -56px;
  transform-style: preserve-3d;
}
.v2 .card.is-visible .cs-sheet { animation: cs-flip 7s cubic-bezier(.6, 0, .25, 1) 0.6s infinite; }
.v2 .cs-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 16px 14px 0;
  border-radius: 10px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.8);
}
/* Sheets of paper with a folded top-right corner. */
.v2 .cs-face-wp { background: linear-gradient(225deg, #c9d4ea 14px, #eef2fa 14px); }
.v2 .cs-face-dk { background: linear-gradient(225deg, #f3c6bc 14px, #fff6f3 14px); transform: rotateY(180deg); }
.v2 .cs-face-mark { width: 42px; height: 42px; }
.v2 .cs-wp-w {
  display: grid;
  place-items: center;
  font: 700 34px/1 Georgia, 'Times New Roman', serif;
  color: #2f6fb5;
}
.v2 .cs-face-name { font: 600 10px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #3a4560; }
.v2 .cs-face-line { width: 100%; height: 5px; border-radius: 3px; background: rgba(19, 27, 46, 0.12); }
.v2 .cs-face-line-s { width: 70%; }
.v2 .cs-import-spark {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffd38a;
  box-shadow: 0 0 10px 2px rgba(255, 211, 138, 0.8);
  opacity: 0;
}
.v2 .cs-spark-1 { left: 28%; top: 36px; }
.v2 .cs-spark-2 { right: 27%; top: 70px; }
.v2 .cs-spark-3 { left: 34%; top: 130px; }
.v2 .card.is-visible .cs-import-spark { animation: cs-spark 7s ease-out 0.6s infinite; }
.v2 .card.is-visible .cs-spark-2 { animation-delay: 0.75s; }
.v2 .card.is-visible .cs-spark-3 { animation-delay: 0.9s; }
@keyframes cs-flip {
  0%, 18%   { transform: rotateY(0) scale(1); }
  32%       { transform: rotateY(90deg) scale(1.18); }
  46%, 72%  { transform: rotateY(180deg) scale(1); }
  86%       { transform: rotateY(270deg) scale(1.1); }
  100%      { transform: rotateY(360deg) scale(1); }
}
@keyframes cs-spark {
  0%, 38%  { opacity: 0; transform: scale(0.2); }
  44%      { opacity: 1; transform: scale(1.2); }
  56%, 100%{ opacity: 0; transform: scale(0.4) translateY(-14px); }
}

/* ===== Feature pills under the grid ===== */
.v2 .feature-pills { margin-top: var(--s-4); text-align: center; }
.v2 .feature-pills-lead { font-size: 14px; color: var(--text-muted); margin: 0 0 var(--s-2); }
.v2 .feature-pills-lead a { color: var(--accent-voice); font-weight: 600; }
.v2 .feature-pills-lead a:hover { text-decoration: underline; }
.v2 .pills-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Slides the opposite way to the integrations row, so the two never look
   like one continuous belt. */
.v2 .pills-track { display: flex; width: max-content; animation: integrations-slide 46s linear infinite reverse; }
.v2 .pills-marquee:hover .pills-track { animation-play-state: paused; }
.v2 .pills-set { display: flex; margin: 0; padding: 0; list-style: none; }
.v2 .pills-set li {
  flex: 0 0 auto;
  margin-right: 10px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--hairline-strong);
  background: rgba(255, 255, 255, 0.03);
  font-size: 13.5px;
  color: var(--text-primary);
  white-space: nowrap;
}
.v2 .pills-set li::before { content: '\2713'; margin-right: 7px; color: #5cf2a0; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .v2 .cs-rain-col, .v2 .cs-post, .v2 .cs-sheet, .v2 .cs-import-spark { animation: none !important; }
  .v2 .cs-rain-bot { animation: none !important; opacity: 1; }
  .v2 .cs-bot-0 { top: 12%; }
  .v2 .cs-bot-1 { top: 30%; }
  .v2 .cs-bot-2 { top: 48%; }
  .v2 .cs-bot-3, .v2 .cs-bot-4, .v2 .cs-bot-5 { display: none; }
  .v2 .pills-track { animation: none; width: auto; }
  .v2 .pills-set { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .v2 .pills-set[aria-hidden="true"] { display: none; }
}