/* Video Shotcraft scanline-annotate-focus: a 74-frame linear scan followed by
   focus corners. Adapted to the real landscape example with flat solid ink. */
.cs-vision-image { position: relative; overflow: hidden; border-radius: 10px; }
.cs-vision-scan { position: absolute; inset: 0; background: #1b2f5c; clip-path: inset(0 0 calc(100% - 2px) 0); opacity: 0; pointer-events: none; }
.cs-vision-frame { position: absolute; inset: 10%; opacity: 0; pointer-events: none; }
.cs-vision-frame i { position: absolute; width: 18px; height: 18px; border-color: #1b2f5c; border-style: solid; border-width: 0; }
.cs-vision-frame i:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.cs-vision-frame i:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.cs-vision-frame i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.cs-vision-frame i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.cs-chat.is-scanning .cs-vision-scan { animation: vision-scan 2.47s linear .2s both; }
.cs-chat.is-scanning .cs-vision-frame { animation: vision-focus .47s cubic-bezier(.2,.8,.2,1) 2.67s both; }
@keyframes vision-scan { 0% { transform: translateY(0); opacity: 1; } 96% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } }
@keyframes vision-focus { from { transform: scale(1.06); opacity: 0; } 35% { opacity: 1; } to { transform: scale(1); opacity: 0; } }
/* Shotcraft radial-ripple-phone-chips: concentric frames breathe by 6%,
   offset across 1.5 cycles over 5.6 seconds, then return to rest. */
.ip-ladder.is-rippling .ip-ladder-a, .ip-ladder.is-rippling .ip-ladder-b, .ip-ladder.is-rippling .ip-ladder-c { animation: ladder-breathe 3.73s ease-in-out calc(var(--ring) * .45s) 2 both; }
@keyframes ladder-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
/* Shotcraft row-embed: each vision task cell presses into its slot at an
   accelerating cadence and flashes a centered bottom seam on landing. */
.ip-task { position: relative; }
.ip-task::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ch-orange); transform: scaleX(0); transform-origin: center; opacity: 0; pointer-events: none; }
.ip-tasks.is-embedding .ip-task { animation: task-seat .36s cubic-bezier(.3,0,.2,1) var(--task-delay) both; }
.ip-tasks.is-embedding .ip-task::after { animation: task-seam .48s cubic-bezier(.2,.75,.3,1) calc(var(--task-delay) + .12s) both; }
@keyframes task-seat { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-5px); } 75% { transform: translateY(2px); } }
@keyframes task-seam { 0% { transform: scaleX(0); opacity: 1; } 45% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
/* Shotcraft integration-hub-map: dark-panel exchange nodes light up in turn
   as the connecting arrow pulses between them. */
.ip-exchange.is-pulsing .ip-exchange-node { animation: exchange-node-lit .52s cubic-bezier(.2,.75,.3,1) calc(.1s + var(--node) * .48s) both; }
.ip-exchange.is-pulsing .ip-exchange-arrow .ch-ic { animation: exchange-arrow-pulse .42s cubic-bezier(.2,.75,.3,1) calc(.32s + var(--arrow) * .48s) both; }
@keyframes exchange-node-lit { 0%, 100% { border-color: rgba(247,242,228,.32); background-color: transparent; } 45% { border-color: #f3a189; background-color: rgba(243,161,137,.12); } }
@keyframes exchange-arrow-pulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
/* Shotcraft icon-field-colorize: each Soffio cell icon and top rule light up
   in brand color in turn, then return to ink. */
.ip-knit-cell { position: relative; }
.ip-knit-cell::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--ch-orange); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; }
.ip-knit.is-colorizing .ip-knit-cell .ch-ic { animation: knit-icon-colorize .66s cubic-bezier(.18,1.35,.32,1) calc(.14s + var(--knit) * .36s) both; transform-origin: left center; }
.ip-knit.is-colorizing .ip-knit-cell::before { animation: knit-rule-colorize .66s cubic-bezier(.3,0,.2,1) calc(.14s + var(--knit) * .36s) both; }
@keyframes knit-icon-colorize { 0%, 100% { color: var(--ch-ink); transform: scale(1); } 45% { color: #b23f1d; transform: scale(1.18); } }
@keyframes knit-rule-colorize { 0% { transform: scaleX(0); opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
/* Shotcraft avatar-bracket-carousel: a sliding bracket indicator steps across
   each vision verb link in the hero rail and releases cleanly. */
.ip-verbs.is-carouseling li a { animation: verb-bracket-step .34s cubic-bezier(.2,.75,.3,1) calc(.1s + var(--verb) * .22s) both; }
@keyframes verb-bracket-step { 0%, 100% { color: #e9e4d6; border-bottom-color: transparent; } 35%, 75% { color: #fffdf6; border-bottom-color: var(--ip-accent-on-ink); } }
/* Shotcraft beat-cut-moves, hard-cut-color-staccato: each note bullet and line
   hard-cuts to brand color on a crisp staccato beat and snaps back to ink. */
.cs-stage-notes.is-cutting li { animation: note-line-cut .32s steps(1, end) calc(.14s + var(--cut) * .24s) both; }
.cs-stage-notes.is-cutting li::before { animation: note-bullet-cut .32s steps(1, end) calc(.14s + var(--cut) * .24s) both; }
@keyframes note-line-cut { 0%, 100% { color: var(--ch-label); } 15%, 80% { color: #91391e; } }
@keyframes note-bullet-cut { 0%, 100% { background-color: var(--ch-ink); } 15%, 80% { background-color: var(--ch-orange); } }
@media (prefers-reduced-motion: reduce) { .cs-chat.is-scanning .cs-vision-scan, .cs-chat.is-scanning .cs-vision-frame, .ip-ladder.is-rippling .ip-ladder-a, .ip-ladder.is-rippling .ip-ladder-b, .ip-ladder.is-rippling .ip-ladder-c, .ip-tasks.is-embedding .ip-task, .ip-exchange.is-pulsing .ip-exchange-node, .ip-exchange.is-pulsing .ip-exchange-arrow .ch-ic, .ip-knit.is-colorizing .ip-knit-cell .ch-ic, .ip-verbs.is-carouseling li a, .cs-stage-notes.is-cutting li, .cs-stage-notes.is-cutting li::before { animation: none; } .ip-tasks.is-embedding .ip-task::after, .ip-knit.is-colorizing .ip-knit-cell::before { animation: none; opacity: 0; } }