/**
 * features.css — features page header, per-row media graphics,
 * reading-progress affordance, anchor-arrival highlight.
 */

/* §5.1 header — fades in on load (features.js adds .is-in) */
.features-header { text-align: center; padding-bottom: var(--space-8); }
.features-header__sub { color: var(--text-secondary); margin-top: var(--space-5); font-size: 1.125rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .features-header { opacity: 0; transition: opacity var(--dur-slow) var(--ease-out); }
  .js .features-header.is-in { opacity: 1; }
}

/* Anchor arrival (/features#04): brief 600ms background tint fade (§2.1) */
.feature-row.is-arrived { animation: ping-tint 600ms var(--ease-out); border-radius: var(--radius-xl); }

/* Row 01: markdown → card-tree crossfade on hover (§2.2) */
.media-crossfade { position: relative; }
.xfade {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transition: opacity var(--dur-base) var(--ease-in-out);
}
.xfade--b { opacity: 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .media-crossfade:hover .xfade--a { opacity: 0; }
  .media-crossfade:hover .xfade--b { opacity: 1; }
}
.frame-note { color: var(--text-secondary); font-size: 0.8125rem; line-height: 1.8; }

/* Row 02: diff graphic — changed lines highlight sequentially on hover */
.diff-graphic {
  display: grid; gap: var(--space-1);
  font-size: 0.8125rem;
  width: 100%; max-width: 26rem;
}
.diff-line {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.diff-line--del { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }
.diff-line--add { background: color-mix(in srgb, var(--success) 10%, transparent); color: var(--success); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .diff-line--del, .diff-line--add { transition: transform var(--dur-base) var(--ease-out), filter var(--dur-base); }
  .media-frame:hover .diff-line--del { transform: translateX(4px); filter: brightness(1.1); }
  .media-frame:hover .diff-line--add { transform: translateX(4px); filter: brightness(1.1); }
  .media-frame:hover .diff-line--add { transition-delay: 120ms; }
  .media-frame:hover .diff-line--add:last-of-type { transition-delay: 240ms; }
}

/* Row 06: rollup counter (counts 0→7 on reveal via features.js) */
.rollup {
  display: grid; justify-items: center; gap: var(--space-2);
  font-size: 1.5rem; color: var(--text-primary);
}
.rollup__count { color: var(--primary-dark); font-weight: 700; font-size: 2.5rem; }
.rollup__phase { font-size: 0.75rem; color: var(--text-tertiary); }

/* Row 07: wifi-off slash draw + badge pop (§2.2) */
.offline-badge { display: grid; justify-items: center; gap: var(--space-4); color: var(--text-secondary); }
.wifi-off { width: 4rem; height: 4rem; }
.wifi-off .slash { stroke: var(--danger); stroke-dasharray: 46; stroke-dashoffset: 46; }
.offline-pop {
  border: 1px solid var(--success);
  color: var(--success);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4);
  font-size: 0.8125rem;
}
@media (prefers-reduced-motion: no-preference) {
  .js .reveal.is-visible .wifi-off .slash { animation: slash-draw 400ms var(--ease-out) forwards; }
  .js .offline-pop { scale: 0.8; opacity: 0; }
  .js .reveal.is-visible .offline-pop {
    scale: 1; opacity: 1;
    transition: scale var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
    transition-delay: 400ms;
  }
}
@keyframes slash-draw { to { stroke-dashoffset: 0; } }

/* §2.3 reading-progress affordance — desktop ≥1200px only */
.row-progress {
  position: fixed;
  right: var(--space-6); top: 50%;
  translate: 0 -50%;
  font-size: 0.8125rem;
  color: var(--text-tertiary);
  z-index: var(--z-sticky);
}
.row-progress__num { color: var(--primary-dark); font-weight: 600; transition: opacity 150ms var(--ease-out); }
.row-progress__num.is-swapping { opacity: 0; }
@media (max-width: 74.99rem), (prefers-reduced-motion: reduce) {
  .row-progress { display: none; }
}

/* §5.3 reduced CTA band */
.cta-band--small { padding-block: calc(var(--section-gap) * 0.6); margin-top: var(--section-gap); }