/* Video Shotcraft document-typewriter-reveal: content blocks write in pairs,
   4.4-frame group stagger and 9-frame in-out wipe at 30fps. Adapted to a
   compact editorial card, without hiding the readable default state. */
.cs-lines span { display: inline-block; }
.cs-demo.is-writing .cs-lines span { animation: document-write .3s cubic-bezier(.4,0,.6,1) both; animation-delay: calc(.267s + var(--group) * .147s); }
@keyframes document-write { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* Shotcraft chip-grid-single-select-blackout: the three tool chips beside the
   Image preview press and invert in sequence, then settle back to paper. */
.cs-demo--image.is-selecting .cs-chips span { animation: chip-select-invert .56s cubic-bezier(.18,1.35,.32,1) calc(.15s + var(--chip) * .36s) both; }
@keyframes chip-select-invert { 0%, 100% { background-color: var(--ch-card); color: var(--ch-ink); transform: scale(1); } 18% { background-color: #d8d1c2; color: var(--ch-ink); transform: scale(.96); } 48%, 76% { background-color: var(--ch-ink); color: #fdf8ea; transform: scale(1.04); } }

/* Shotcraft before-after-slider-scrub: the Video timeline playhead whips
   forward, rebounds, and glides back to 36%, while the play badge pulses. */
.cs-track::before, .cs-track::after { transform-origin: left center; }
.cs-demo--video.is-scrubbing .cs-track::before { animation: video-bar-scrub 1.8s cubic-bezier(.22,.82,.24,1) .15s both; }
.cs-demo--video.is-scrubbing .cs-track::after { animation: video-knob-scrub 1.8s cubic-bezier(.22,.82,.24,1) .15s both; }
.cs-demo--video.is-scrubbing .cs-play::after { animation: video-play-pulse .48s cubic-bezier(.18,1.35,.32,1) .15s both; }
@keyframes video-bar-scrub { 0%, 100% { right: 64%; } 26% { right: 22%; } 38% { right: 28%; } }
@keyframes video-knob-scrub { 0%, 100% { left: 36%; transform: scaleX(1); } 26% { left: 78%; transform: scaleX(1.18); } 38% { left: 72%; transform: scaleX(1); } }
@keyframes video-play-pulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.12); } }

@media (prefers-reduced-motion: reduce) { .cs-demo.is-writing .cs-lines span, .cs-demo--image.is-selecting .cs-chips span, .cs-demo--video.is-scrubbing .cs-track::before, .cs-demo--video.is-scrubbing .cs-track::after, .cs-demo--video.is-scrubbing .cs-play::after { animation: none; } }