/* The visual sequence is deliberately separate from product screenshots. */
.motion-feature { gap: 64px; }
.motion-feature .feature-copy > p:not(.eyebrow) { max-width: 350px; }
.motion-scene { position: relative; min-width: 0; margin: 0; overflow: hidden; isolation: isolate; border: 1px solid #ffffff19; border-radius: 8px; background: #17191a; --motion-progress: 1; }
.motion-scene__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 22px; min-height: 57px; border-bottom: 1px solid #ffffff0b; color: #c4c2ba; font-size: 12px; }
.motion-scene__identity { display: inline-flex; align-items: center; gap: 8px; }
.agent-glyph { width: 17px; height: 17px; display: inline-block; background: conic-gradient(from 0deg, #e8d9c1, #80795e, #e8d9c1, #9b715c, #e8d9c1); border-radius: 6px; transform: rotate(45deg); box-shadow: inset 0 0 0 1px #f9f3e133; }
.motion-status { display: grid; text-align: right; font-size: 11px; color: #939a96; }
.motion-status > span { grid-area: 1/1; opacity: 0; }
.motion-scene[data-phase='0'] .motion-status > span:nth-child(1), .motion-scene[data-phase='1'] .motion-status > span:nth-child(2), .motion-scene[data-phase='2'] .motion-status > span:nth-child(3), .motion-scene[data-phase='3'] .motion-status > span:nth-child(4), .motion-scene[data-phase='4'] .motion-status > span:nth-child(5) { opacity: 1; }
.motion-scene__bottom { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 22px; min-height: 48px; border-top: 1px solid #ffffff0b; }
.motion-scene__bottom > span { font-size: 11px; color: #8c948f; }
.agent-cut__body { padding: 20px 22px; }
.agent-cut__brief { margin: 0 0 18px; padding-left: 12px; border-left: 2px solid #d8a08988; font-size: 14px; line-height: 1.55; color: #ede5d9; }
.agent-cut__preview { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 4px; background: #252927; }
.agent-cut__preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: opacity .7s ease, transform 1.5s ease; }
.agent-cut__preview .agent-cut__city { object-position: center 54%; opacity: 0; transform: scale(1.035); }
.agent-cut[data-phase='3'] .agent-cut__city, .agent-cut[data-phase='4'] .agent-cut__city { opacity: 1; transform: scale(1); }
.agent-cut__caption { position: absolute; bottom: 15px; left: 18px; right: 18px; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s; }
.agent-cut__caption span { display: inline-block; padding: 3px 8px; background: #0c151adc; color: #fff8ee; font-size: clamp(13px,1.6vw,21px); font-weight: 500; line-height: 1.35; border-radius: 2px; }
.agent-cut[data-phase='3'] .agent-cut__caption, .agent-cut[data-phase='4'] .agent-cut__caption { opacity: 1; transform: translateY(0); }
.agent-cut__timeline { position: relative; margin-top: 21px; height: 109px; background: repeating-linear-gradient(90deg, #ffffff0a 0 1px, transparent 1px 12.5%); }
.agent-cut__ruler { display: flex; justify-content: space-between; padding-bottom: 9px; color: #858c85; font-size: 9px; line-height: 1; }
.agent-cut__track { position: relative; height: 38px; }
.agent-clip { position: absolute; top: 0; height: 100%; border-radius: 3px; overflow: hidden; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px #ffffff22; transition: left 1.1s cubic-bezier(.2,.7,.2,1), width 1.1s cubic-bezier(.2,.7,.2,1), opacity .5s; }
.agent-clip:after { content: ''; position: absolute; inset: 0; background: #1b232024; }
.agent-clip--one { left: 0; width: 30%; background-image: url('/assets/library-motion-v6.webp'); }
.agent-clip--two { left: 36%; width: 29%; background-image: url('/assets/library-city-v5.webp'); }
.agent-clip--three { left: 72%; width: 28%; background-image: url('/assets/library-motion-v6.webp'); background-position: 70% center; }
.agent-cut__silence { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(120deg, transparent 0 4px, #d69c7938 4px 5px); border: 1px solid #d69c7977; opacity: 0; transition: opacity .4s; }
.agent-cut__silence--one { left: 30%; width: 6%; }.agent-cut__silence--two { left: 65%; width: 7%; }
.agent-cut[data-phase='1'] .agent-cut__silence { opacity: 1; }
.agent-cut:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .agent-clip--one { width: 29%; }
.agent-cut:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .agent-clip--two { left: 29.7%; width: 32%; }
.agent-cut:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .agent-clip--three { left: 62.4%; width: 30.6%; }
.agent-cut__captions { position: relative; height: 15px; margin-top: 6px; }
.agent-cut__captions span { position: absolute; top: 0; height: 13px; background: #b5aa874d; border: 1px solid #d1c6a54d; border-radius: 2px; opacity: 0; transform: scaleX(.5); transform-origin: left; transition: opacity .35s, transform .5s; }
.agent-cut__captions span:nth-child(1) { left: 0; width: 28%; }.agent-cut__captions span:nth-child(2) { left: 29.7%; width: 31%; transition-delay: .12s; }.agent-cut__captions span:nth-child(3) { left: 62.4%; width: 30.6%; transition-delay: .24s; }
.agent-cut:is([data-phase='3'],[data-phase='4']) .agent-cut__captions span { opacity: 1; transform: scaleX(1); }
.agent-cut__audio { height: 14px; margin-top: 6px; background: #74898824; border-radius: 2px; overflow: hidden; }
.agent-cut__audio:before { content: ''; display: block; height: 100%; width: 100%; background: repeating-linear-gradient(90deg, transparent 0 3px,#a7bbb864 3px 4px,transparent 4px 6px,#a7bbb890 6px 7px); clip-path: polygon(0 35%, 8% 25%, 13% 42%, 18% 5%, 23% 30%, 27% 15%, 35% 32%, 44% 0, 52% 28%, 61% 20%, 66% 40%, 72% 12%, 79% 28%, 88% 0, 94% 20%, 100% 40%,100% 60%,94% 80%,88% 100%,79% 72%,72% 88%,66% 60%,61% 80%,52% 72%,44% 100%,35% 68%,27% 85%,23% 70%,18% 95%,13% 58%,8% 75%,0 65%); }
.agent-cut__playhead { position: absolute; top: 10px; bottom: 0; left: calc(var(--motion-progress) * 93%); width: 1px; background: #e5c6a4; box-shadow: 0 0 8px #e5c6a422; }
.agent-cut__playhead:before { content: ''; position: absolute; top: 0; left: -3px; width: 7px; height: 5px; background: #e5c6a4; clip-path: polygon(0 0,100% 0,100% 40%,50% 100%,0 40%); }
.agent-cut__cursor { position: absolute; right: -27px; top: 37px; display: flex; align-items: center; gap: 4px; padding: 2px 5px; border-radius: 3px; background: #e3d4bd; color: #242423; font-size: 8px; opacity: 0; transition: opacity .3s; }
.agent-cut[data-phase='1'] .agent-cut__cursor, .agent-cut[data-phase='2'] .agent-cut__cursor, .agent-cut[data-phase='3'] .agent-cut__cursor { opacity: 1; }
.agent-cut__cursor:before { content: ''; position: absolute; left: -5px; top: -3px; width: 8px; height: 12px; background: #e3d4bd; clip-path: polygon(0 0,100% 65%,45% 65%,0 100%); }
/* The same source visibly changes shape, then follows the selected speaker. */
.reel-flow__stage { position: relative; aspect-ratio: 16 / 10.5; margin: 8px 12px; }
.reel-flow__source, .reel-flow__crop { position: absolute; left: 5%; top: 11%; width: 90%; height: 77.15%; overflow: hidden; border-radius: 4px; transition: left 1.25s cubic-bezier(.2,.7,.2,1), top 1.25s cubic-bezier(.2,.7,.2,1), width 1.25s cubic-bezier(.2,.7,.2,1), height 1.25s cubic-bezier(.2,.7,.2,1), opacity .9s, box-shadow .9s; }
.reel-flow__source { opacity: .16; }
.reel-flow__source img, .reel-flow__crop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% center; transition: object-position 1.3s ease; }
.reel-flow__crop { box-shadow: 0 0 0 1px #ffffff2a; z-index: 2; }
.reel-flow__crop:after { content: ''; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent,#0b0b11a8); opacity: 0; transition: opacity .7s; }
.reel-flow__guide { position: absolute; top: 13%; left: 52%; width: 22%; height: 57%; border: 1px solid #f2d5adcc; border-radius: 4px; opacity: 0; transition: opacity .4s, left 1s; }
.reel-flow__guide:before,.reel-flow__guide:after { content: ''; position: absolute; background: #edd5b55e; }.reel-flow__guide:before { width: 1px; height: 100%; left: 50%; }.reel-flow__guide:after { height: 1px; width: 100%; top: 35%; }
.reel-flow[data-phase='1'] .reel-flow__guide { opacity: 1; left: 66%; }
.reel-flow:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .reel-flow__crop { left: 56%; top: 3%; width: 34%; height: 92.1%; box-shadow: 0 18px 45px #0008, 0 0 0 1px #ffffff49; }
.reel-flow:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .reel-flow__crop img { object-position: 81% center; }
.reel-flow:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .reel-flow__crop:after { opacity: 1; }
.reel-flow__caption { position: absolute; z-index: 1; bottom: 17%; left: 8%; right: 8%; color: #fffbf3; text-align: center; font-size: clamp(12px,1.75vw,23px); font-weight: 550; letter-spacing: -.3px; line-height: 1.25; opacity: 0; transform: translateY(8px); transition: opacity .55s, transform .55s; text-shadow: 0 2px 12px #0008; }
.reel-flow__caption mark { color: #222322; background: #ead4b6; border-radius: 2px; padding: 1px 4px; }
.reel-flow:is([data-phase='3'],[data-phase='4']) .reel-flow__caption { opacity: 1; transform: translateY(0); }
.reel-flow__route { position: absolute; left: 11%; right: 51%; top: 40%; display: flex; align-items: center; gap: 9px; opacity: 0; transform: translateX(-8px); transition: opacity .7s .2s, transform .7s .2s; }
.reel-flow__ratio { display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid #d7cbb178; background: #171b1cd9; color: #e4d8c2; font-size: clamp(10px,1.2vw,15px); font-weight: 400; border-radius: 3px; }
.reel-flow__ratio--wide { width: 38%; aspect-ratio: 16 / 9; }
.reel-flow__ratio--portrait { width: 22%; aspect-ratio: 9 / 16; }
.reel-flow__route svg { width: 23%; height: 15px; flex-shrink: 0; color: #bbaa90; }
.reel-flow:is([data-phase='2'],[data-phase='3'],[data-phase='4']) .reel-flow__route { opacity: 1; transform: translateX(0); }
@media (max-width: 1050px) { .motion-feature { gap: 34px; }.agent-cut__body { padding: 18px; }.motion-scene__top,.motion-scene__bottom { padding-inline: 18px; }.agent-cut__brief { font-size: 13px; } }
@media (max-width: 760px) { .motion-feature { grid-template-columns: 1fr; gap: 26px; }.motion-feature .feature-copy { grid-row: 1; }.motion-feature .feature-copy > p:not(.eyebrow) { max-width: 470px; }.reel-flow__caption { font-size: clamp(16px,3.5vw,23px); }.reel-flow__ratio { font-size: clamp(10px,2.2vw,15px); }.agent-cut__caption span { font-size: clamp(17px,3vw,22px); } }
@media (max-width: 420px) { .motion-scene__top { padding: 13px 14px; min-height: 49px; }.motion-status { font-size: 9px; }.motion-scene__identity { font-size: 11px; }.agent-cut__body { padding: 15px 14px; }.agent-cut__brief { font-size: 12px; padding-left: 9px; margin-bottom: 14px; }.agent-cut__timeline { margin-top: 16px; height: 101px; }.agent-cut__track { height: 31px; }.motion-scene__bottom { padding: 9px 14px; min-height: 43px; }.motion-scene__bottom > span { font-size: 10px; }.reel-flow__stage { margin: 8px 5px; }.reel-flow__route { gap: 5px; }.reel-flow__caption { font-size: 14px; }.agent-cut__caption span { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .motion-scene *, .motion-scene *:before, .motion-scene *:after { transition: none !important; } }
.motion-scene:is([data-motion-state='paused'],[data-motion-state='ready'],[data-motion-state='reduced']) *, .motion-scene:is([data-motion-state='paused'],[data-motion-state='ready'],[data-motion-state='reduced']) *:before, .motion-scene:is([data-motion-state='paused'],[data-motion-state='ready'],[data-motion-state='reduced']) *:after { animation-play-state: paused !important; }

/* Replay returns directly to the opening state without backwards transitions. */
.motion-scene[data-motion-resetting] *, .motion-scene[data-motion-resetting] *::before, .motion-scene[data-motion-resetting] *::after { transition: none !important; animation: none !important; }

/* A quiet, inline action beside the scene's title or status. */
.motion-replay { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 7px; margin: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #aaa9a2; cursor: pointer; transition: color .15s, border-color .15s, background .15s; }
.motion-replay svg { display: block; width: 16px; height: 16px; }
.motion-replay:hover { color: #efebe3; background: #ffffff08; border-color: #ffffff20; }
.motion-replay:focus-visible { outline: 2px solid #d7cbb9; outline-offset: 3px; }
.motion-replay:disabled { opacity: .4; cursor: default; }
.motion-scene[data-motion-state='complete'] *, .motion-scene[data-motion-state='complete'] *::before, .motion-scene[data-motion-state='complete'] *::after { animation-play-state: paused !important; }

.motion-scene:not([data-motion-ready]) [data-motion-replay] { display:none; }