/* Small explainer animations beside the "how a reel gets made" steps, one per feature, drawn in HTML/CSS (no
   footage): the recording comes in and is transcribed, the AI marks the best moments, one click builds the edit,
   a title animates on the word, a caption line becomes B-roll. Each loops only while it has .run (scenes.js). */
.ill { --u: 5.2s; position: relative; width: min(100%, 440px); aspect-ratio: 4 / 5; margin-inline: auto; padding: 28px; border-radius: 24px; overflow: hidden;
  background: radial-gradient(90% 60% at 50% 0%, #1d1a18, #121315 70%); border: 1px solid var(--line2); box-shadow: 0 32px 64px -32px #000;
  display: flex; flex-direction: column; gap: 20px; justify-content: center; direction: ltr; }
.ill * { animation-play-state: paused !important; }
.ill.run * { animation-play-state: running !important; }
.ill-tag { align-self: flex-start; padding: 4px 10px; border-radius: 8px; background: #ffffff0f; color: var(--muted); font: 500 12px/1.4 ui-monospace, "SF Mono", Menlo, monospace; }
.ill [dir="rtl"] { direction: rtl; }

/* shared: a waveform of bars */
.wv { display: flex; align-items: center; gap: 3px; height: 72px; }
.wv i { flex: 1; height: var(--h); border-radius: 2px; background: #ffffff33; transform-origin: center; }

/* 1. the recording comes in, then the words appear one by one, the current one orange */
.i-open .file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #ffffff0d; border: 1px solid var(--line2);
  animation: drop var(--u) cubic-bezier(.2,.8,.2,1) infinite; }
.i-open .file b { width: 36px; height: 36px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; color: var(--on-accent); font-size: 14px; }
.i-open .file span { font-size: 14px; color: var(--text); } .i-open .file small { display: block; color: var(--muted); font-size: 12px; }
.i-open .wv i { animation: grow var(--u) cubic-bezier(.2,.8,.2,1) infinite; animation-delay: calc(var(--k) * 18ms); }
.i-open .words { display: flex; flex-wrap: wrap; gap: 6px 8px; font: 600 18px/1.3 var(--font-display); }
.i-open .words span { opacity: .12; animation: say var(--u) linear infinite; animation-delay: calc(1.2s + var(--k) * 260ms); }
@keyframes drop { 0% { opacity: 0; transform: translateY(-24px); } 8%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes grow { 0%, 6% { transform: scaleY(.05); } 18%, 88% { transform: scaleY(1); } 100% { transform: scaleY(.05); } }
@keyframes say { 0% { opacity: .12; color: var(--text); } 2% { opacity: 1; color: var(--accent); } 7% { color: var(--text); } 80% { opacity: 1; } 92%, 100% { opacity: .12; } }

/* 2. a scanner reads the hour; the best moments light up and pop out as reels */
.i-find .scan { position: relative; }
.i-find .scan::after { content: ""; position: absolute; top: -8px; bottom: -8px; left: 0; width: 2px; background: var(--accent); box-shadow: 0 0 12px var(--accent);
  animation: sweep var(--u) linear infinite; }
.i-find .wv i { transition: none; }
.i-find .wv i.hit { animation: hit var(--u) linear infinite; animation-delay: calc(var(--k) * 52ms); }
.i-find .reels { display: flex; justify-content: center; gap: 14px; }
.i-find .reels div { width: 72px; aspect-ratio: 9 / 16; border-radius: 10px; background: linear-gradient(180deg, #2a2d33, #1a1c20); border: 1px solid #ff6a1366; position: relative;
  animation: pop var(--u) cubic-bezier(.3,1.4,.5,1) infinite; animation-delay: calc(2.6s + var(--k) * 180ms); opacity: 0; }
.i-find .reels div::after { content: attr(data-t); position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; color: var(--muted); font: 500 11px ui-monospace, Menlo, monospace; }
.i-find .reels div::before { content: ""; position: absolute; left: 8px; right: 8px; bottom: 26px; height: 6px; border-radius: 3px; background: var(--accent); }
@keyframes sweep { 0% { left: 0; opacity: 1; } 50% { left: 100%; opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes hit { 0%, 2% { background: #ffffff33; } 4%, 90% { background: var(--accent); } 100% { background: #ffffff33; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.6) translateY(12px); } 6%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 3. one click, and the timeline fills itself: cuts, captions, graphics, music, then a check */
.i-edit .btnx { align-self: center; padding: 12px 22px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 15px; animation: press var(--u) ease-out infinite; }
.i-edit .tl2 { display: grid; gap: 6px; padding: 12px; border-radius: 14px; background: #00000040; border: 1px solid var(--line); }
.i-edit .row { position: relative; height: 22px; border-radius: 6px; background: #ffffff08; }
.i-edit .row b { position: absolute; top: 0; bottom: 0; left: var(--x); width: var(--w); border-radius: 6px; transform-origin: left; animation: lay var(--u) cubic-bezier(.2,.8,.2,1) infinite; animation-delay: calc(.9s + var(--k) * 120ms); transform: scaleX(0); }
.i-edit .v b { background: #3b6fd8; } .i-edit .c b { background: #7c5cff; } .i-edit .g b { background: var(--accent); } .i-edit .m b { background: #2f9d62; }
.i-edit .ok { align-self: center; display: flex; align-items: center; gap: 8px; color: var(--ok); font-size: 14px; font-weight: 500; opacity: 0; animation: okin var(--u) ease-out infinite; }
@keyframes press { 0%, 10% { transform: none; } 13% { transform: scale(.94); } 17%, 100% { transform: none; } }
@keyframes lay { 0%, 4% { transform: scaleX(0); } 14%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes okin { 0%, 62% { opacity: 0; transform: translateY(6px); } 68%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* 4. the text effects from 4reel's Animations tab, each in its own tile, the way they look in the app */
@property --pct { syntax: "<integer>"; initial-value: 0; inherits: false; }
.fx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fx small { display: block; margin-top: 8px; text-align: center; color: var(--muted); font-size: 13px; }
.fx-box { position: relative; height: 96px; display: flex; align-items: center; justify-content: center; gap: .3em; padding: 0 10px; border-radius: 12px; overflow: hidden;
  background: #1c1e22; border: 1px solid var(--line); font: 800 19px/1 var(--font-display); color: #fff; white-space: nowrap; }
/* Rise: words come up out of a blur, one after another */
.fx-rise span { animation: fxrise var(--u) cubic-bezier(.2,.8,.2,1) infinite; animation-delay: calc(var(--k) * 160ms); }
@keyframes fxrise { 0% { opacity: 0; transform: translateY(14px); filter: blur(6px); } 10%, 86% { opacity: 1; transform: none; filter: none; } 96%, 100% { opacity: 0; } }
/* Typing: hard, even letters with a caret */
.fx-type span { clip-path: inset(0 100% 0 0); animation: fxtype var(--u) steps(9, end) infinite; }
[dir="rtl"] .fx-type span, .fx-type[dir="rtl"] span { clip-path: inset(0 0 0 100%); animation-name: fxtype-rtl; }
.fx-type::after { content: ""; width: 2px; height: 22px; background: var(--accent); animation: blink .8s steps(1) infinite; }
@keyframes fxtype { 0%, 6% { clip-path: inset(0 100% 0 0); } 40%, 88% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes fxtype-rtl { 0%, 6% { clip-path: inset(0 0 0 100%); } 40%, 88% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
@keyframes blink { 50% { opacity: 0; } }
/* Brush: an orange stroke sweeps in under the words */
.fx-brush span { position: relative; z-index: 1; color: #111214; }
.fx-brush::before { content: ""; position: absolute; left: 12%; right: 12%; top: 30%; bottom: 30%; border-radius: 6px 14px 8px 12px; background: var(--accent); transform: skewX(-8deg) scaleX(0); transform-origin: left;
  animation: fxbrush var(--u) cubic-bezier(.2,.8,.2,1) infinite; }
.fx-brush[dir="rtl"]::before { transform-origin: right; }
@keyframes fxbrush { 0%, 6% { transform: skewX(-8deg) scaleX(0); } 22%, 88% { transform: skewX(-8deg) scaleX(1); } 100% { transform: skewX(-8deg) scaleX(0); } }
/* Counter: the number counts up and the line draws under it */
.fx-count b { color: var(--accent); counter-reset: p var(--pct); animation: fxcount var(--u) cubic-bezier(.2,.8,.2,1) infinite; }
.fx-count b::after { content: "+" counter(p) "%"; }
.fx-count i { position: absolute; left: 22%; right: 22%; bottom: 22px; height: 3px; border-radius: 2px; background: var(--accent); transform: scaleX(0); animation: line var(--u) cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes fxcount { 0%, 6% { --pct: 0; } 40%, 100% { --pct: 312; } }
@keyframes line { 0%, 22% { transform: scaleX(0); } 36%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* 5. a caption line becomes a video: the line is picked, a spark, the clip renders and appears */
.i-broll .line { align-self: center; padding: 10px 16px; border-radius: 12px; background: #ffffff0d; border: 1px solid var(--line2); font: 600 18px var(--font-display); }
.i-broll .line em { font-style: normal; animation: pick var(--u) ease-out infinite; }
.i-broll .spark { align-self: center; width: 28px; height: 28px; color: var(--accent); animation: spin var(--u) ease-in-out infinite; }
.i-broll .spark svg { width: 100%; height: 100%; fill: currentColor; }
.i-broll .clip { position: relative; align-self: center; width: 48%; aspect-ratio: 9 / 16; border-radius: 16px; overflow: hidden; background: #1b1d21; border: 1px solid var(--line2); }
.i-broll .clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: reveal var(--u) ease-out infinite; }
.i-broll .clip .bar { position: absolute; left: 12px; right: 12px; bottom: 14px; height: 4px; border-radius: 2px; background: #ffffff1a; overflow: hidden; }
.i-broll .clip .bar::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left; animation: load var(--u) linear infinite; }
.i-broll .clip .shim { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, #ffffff14 50%, transparent 70%) 0 0 / 200% 100%; animation: shim 1.2s linear infinite; }
.i-broll .meta { align-self: center; color: var(--muted); font: 500 12px ui-monospace, Menlo, monospace; }
@keyframes pick { 0%, 8% { color: var(--text); background: transparent; } 12%, 90% { color: var(--on-accent); background: var(--accent); border-radius: 4px; } 100% { color: var(--text); } }
@keyframes spin { 0%, 14% { opacity: 0; transform: scale(.4) rotate(0); } 22% { opacity: 1; transform: scale(1.1) rotate(90deg); } 30%, 88% { opacity: 1; transform: scale(1) rotate(180deg); } 100% { opacity: 0; } }
@keyframes load { 0%, 26% { transform: scaleX(0); } 60%, 100% { transform: scaleX(1); } }
@keyframes reveal { 0%, 60% { opacity: 0; transform: scale(1.08); } 68%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes shim { to { background-position: -200% 0; } }

/* the sticky frame holds the animations instead of phones */
.sf .ill { height: 100%; width: auto; }
@media (max-width: 860px) {
  .made-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .st-img .ill { width: min(100%, 360px); min-width: 0; padding: 20px; }
  .fx-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fx-box { font-size: 15px; height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .ill * { animation: none !important; opacity: 1 !important; transform: none !important; }
  .fx-count b { --pct: 312; }
  .fx-type span { clip-path: none !important; }
}