/* SynFrame landing page motion: pure CSS (the page's CSP allows no scripts).
   0–1.8 s: clips land on the tracks. Then a 15 s loop: the playhead plays five 3 s clips in the viewer. */
@property --s { syntax: "<integer>"; inherits: false; initial-value: 0; }
@property --fr { syntax: "<integer>"; inherits: false; initial-value: 0; }

:root { --loop: 15s; --start: 1.8s; }

/* Clips slide onto the timeline, one after another */
.clip, .cap { animation: land 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.v1 { animation-delay: 0.2s; } .v2 { animation-delay: 0.35s; } .v3 { animation-delay: 0.5s; } .v4 { animation-delay: 0.65s; } .v5 { animation-delay: 0.8s; }
.ttl { animation-delay: 1s; } .au { animation-delay: 1.15s; }
.c-a { animation-delay: 1.3s; } .c-b { animation-delay: 1.4s; } .c-c { animation-delay: 1.5s; }
@keyframes land { from { opacity: 0; transform: translateY(-18px) scale(0.96); } to { opacity: 1; transform: none; } }

/* Playhead and timecode */
.playhead { opacity: 0; animation: ph-in 0.3s ease-out var(--start) forwards, sweep var(--loop) linear var(--start) infinite; }
@keyframes ph-in { to { opacity: 1; } }
@keyframes sweep { from { left: var(--g); } to { left: calc(100% - 2px); } }
.tc { counter-reset: s var(--s) fr var(--fr); animation: secs var(--loop) linear var(--start) infinite, frames 1s steps(24, end) var(--start) infinite; }
.tc::before { content: "00:00:" counter(s, decimal-leading-zero) ":" counter(fr, decimal-leading-zero); }
@keyframes secs { from { --s: 0; } to { --s: 14; } }
@keyframes frames { from { --fr: 0; } to { --fr: 24; } }

/* Viewer: each clip shows while the playhead is over it */
.frame { animation: var(--loop) linear var(--start) infinite both; }
.f1 { animation-name: show1; } .f2 { animation-name: show2; } .f3 { animation-name: show3; } .f4 { animation-name: show4; } .f5 { animation-name: show5; }
@keyframes show1 { 0%, 19.6% { opacity: 1; } 20%, 99.6% { opacity: 0; } 100% { opacity: 1; } }
@keyframes show2 { 0%, 19.6% { opacity: 0; } 20%, 39.6% { opacity: 1; } 40%, 100% { opacity: 0; } }
@keyframes show3 { 0%, 39.6% { opacity: 0; } 40%, 59.6% { opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes show4 { 0%, 59.6% { opacity: 0; } 60%, 79.6% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes show5 { 0%, 79.6% { opacity: 0; } 80%, 100% { opacity: 1; } }

/* The title on V2 and the three captions on C1 appear in step with their clips */
.title-card { animation: ttl var(--loop) linear var(--start) infinite both; }
@keyframes ttl { 0%, 3.9% { opacity: 0; transform: translate(-50%, -40%); } 6%, 17% { opacity: 1; transform: translate(-50%, -50%); } 19%, 100% { opacity: 0; transform: translate(-50%, -50%); } }
.caption { animation: var(--loop) linear var(--start) infinite both; }
.k1 { animation-name: cap1; } .k2 { animation-name: cap2; } .k3 { animation-name: cap3; }
@keyframes cap1 { 0%, 20.9% { opacity: 0; } 21%, 33.9% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes cap2 { 0%, 40.9% { opacity: 0; } 41%, 52.9% { opacity: 1; } 53%, 100% { opacity: 0; } }
@keyframes cap3 { 0%, 60.9% { opacity: 0; } 61%, 76.9% { opacity: 1; } 77%, 100% { opacity: 0; } }

/* Features: camera switching, speed ramp, export progress, grade wipe */
.cam { animation: cam 4s steps(1, end) infinite; }
.cam:nth-child(2) { animation-delay: 1s; } .cam:nth-child(3) { animation-delay: 2s; } .cam:nth-child(4) { animation-delay: 3s; }
.cam.on { border-color: rgba(120, 160, 255, 0.2); }
@keyframes cam { 0% { border-color: #f59e0b; color: #fde68a; background: rgba(245, 158, 11, 0.18); } 25%, 100% { border-color: rgba(120, 160, 255, 0.2); color: #94a3b8; background: rgba(120, 160, 255, 0.1); } }
.ramp i { animation: ramp 1.6s ease-in-out infinite; animation-delay: var(--d); }
@keyframes ramp { 0%, 100% { opacity: 0.25; transform: scaleY(0.7); } 40% { opacity: 1; transform: scaleY(1.1); } }
.bar b i { animation: fill 3.2s ease-in-out infinite; }
@keyframes fill { from { width: 4%; } 85%, to { width: 100%; } }
.grade .graded { animation: wipe 5s ease-in-out infinite alternate; }
.split { animation: wipe-line 5s ease-in-out infinite alternate; }
@keyframes wipe { from { clip-path: inset(0 0 0 80%); } to { clip-path: inset(0 0 0 20%); } }
@keyframes wipe-line { from { left: 80%; } to { left: 20%; } }

/* Reduced motion: a still edit, no movement */
@media (prefers-reduced-motion: reduce) {
  .clip, .cap, .playhead, .tc, .frame, .title-card, .caption, .cam, .ramp i, .bar b i, .grade .graded, .split { animation: none; }
  .playhead { opacity: 1; left: calc(var(--g) + (100% - var(--g)) * 0.66); }
  .f4, .k3 { opacity: 1; }
  .tc::before { content: "00:00:09:22"; }
  .grade .graded { clip-path: inset(0 0 0 50%); }
  .btn { transition: none; }
  html { scroll-behavior: auto; }
}