/* Edit section scenes: Easing, Checklist, Safe Zones, Presets. Auto SFX uses the tile styles in library.css. */

/* 06 Easing */
.ez-top{display:grid;grid-template-columns:minmax(0,290px) 1fr;gap:14px;align-items:start}
.ez-graph{width:100%;height:auto;background:var(--bg-input);border:1px solid var(--bd);border-radius:6px;overflow:visible}
.ez-grid{stroke:#2e2e36;stroke-width:1;fill:none}
.ez-curve{stroke:var(--acc-h);stroke-width:3;fill:none;stroke-linecap:round;transition:d .6s var(--ease)}
.ez-chips{display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.ez-track{position:relative;height:34px;border-radius:6px;background:var(--bg-input);border:1px solid var(--bd)}
.ez-sq{position:absolute;left:4px;top:5px;width:24px;height:22px;border-radius:5px;background:var(--acc);
       box-shadow:0 0 0 3px var(--acc-sub)}
.ez-kf{border-radius:6px;border:1px solid var(--bd)}
.ez-key{position:absolute;top:50%;width:7px;height:7px;background:var(--t2);transform:translate(-50%,-50%) rotate(45deg) scale(0);
        transition:transform .25s var(--ease)}
.ez-key.end{background:var(--acc-h);width:9px;height:9px}
.ez-key.in{transform:translate(-50%,-50%) rotate(45deg) scale(1)}

/* Checklist */
.ck-count{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--t2)}
.ck-list{display:flex;flex-direction:column;gap:2px;position:relative}
.ck-row{display:flex;align-items:center;gap:9px;padding:7px 6px;border-radius:5px;font-size:12px;color:var(--t2);transition:color .25s}
.ck-box{width:14px;height:14px;border-radius:4px;border:1.5px solid var(--bd2);flex:0 0 auto;position:relative;transition:background .2s,border-color .2s}
.ck-row.done .ck-box,.co-hit.done .ck-box{background:var(--ok);border-color:var(--ok)}
.ck-row.done .ck-box::after,.co-hit.done .ck-box::after{content:"";position:absolute;left:3.5px;top:0;width:4px;height:8px;
  border:solid #10210f;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ck-row.done .ck-txt{color:var(--t1)}
.ck-ask{margin-left:auto;width:18px;height:18px;border-radius:50%;background:var(--bg-el);color:var(--acc-h);font-size:11px;
        font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ck-hint{position:absolute;right:36px;top:40px;background:var(--acc);color:#fff;font-size:11px;padding:6px 10px;border-radius:8px;
         opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s var(--ease);pointer-events:none}
.ck-hint.in{opacity:1;transform:none}

/* Safe Zones */
.sz-split{display:grid;grid-template-columns:1fr 132px;gap:12px;align-items:start}
.sz-side{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.sz-frame{position:relative;aspect-ratio:9/16;border-radius:6px;overflow:hidden;background:#000}
.sz-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:53% 40%}
.sz-over i{position:absolute;background:rgba(229,72,77,.3);opacity:0;transition:all .45s var(--ease)}
.sz-over.on i{opacity:1}
.sz-top{left:0;right:0;top:0;height:9%}
.sz-rail{right:0;top:38%;bottom:18%;width:16%}
.sz-bottom{left:0;right:0;bottom:0;height:18%}
.sz-over i.sz-safe{background:transparent;border:1.5px dashed #4CD174;left:6%;right:18%;top:11%;bottom:20%}
.sz-over.p1 .sz-rail{top:44%;width:15%}
.sz-over.p1 .sz-bottom{height:22%}
.sz-over.p1 .sz-safe{bottom:24%;right:17%}
.sz-over.p2 .sz-top{height:6%}
.sz-over.p2 .sz-rail{top:52%;width:14%}
.sz-over.p2 .sz-bottom{height:15%}
.sz-over.p2 .sz-safe{top:8%;bottom:17%;right:16%}

/* Presets: .prfpset tiles with a moving preview, the selected clip gets its keyframes */
.pr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.pr-tile{background:var(--bg-input);border:1px solid var(--bd);border-radius:7px;padding:6px;transition:border-color .25s,background .25s,transform .25s var(--ease)}
.pr-tile.hi{border-color:var(--acc-bd);background:var(--acc-sub);transform:translateY(-2px)}
.pr-tile.hide{display:none}
.pr-tile b{display:block;font-size:10.5px;font-weight:600;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-prev{position:relative;height:58px;border-radius:5px;background:#101014;overflow:hidden}
.pr-prev i{position:absolute;left:50%;top:50%;width:34%;height:38%;margin:-9.5% 0 0 -17%;border-radius:4px;
           background:linear-gradient(135deg,#b7a3ff,#6d4de0)}
.pr-tile.play .ltr,.pr-tile.hi .ltr{animation:prLtr 1.1s cubic-bezier(.16,1,.3,1) infinite}
.pr-tile.play .up,.pr-tile.hi .up{animation:prUp 1.1s cubic-bezier(.16,1,.3,1) infinite}
.pr-tile.play .fast,.pr-tile.hi .fast{animation-duration:.7s}
.pr-tile.play .zoom,.pr-tile.hi .zoom{animation:prZoom 1.6s cubic-bezier(.16,1,.3,1) infinite}
.pr-tile.play .whip,.pr-tile.hi .whip{animation:prLtr .8s cubic-bezier(.7,0,.2,1) infinite reverse}
.pr-tile.play .out,.pr-tile.hi .out{animation:prZoom 2s ease-out infinite reverse}
.pr-tile.play .slow,.pr-tile.hi .slow{animation:prLtr 2.2s ease-out infinite}
@keyframes prLtr{from{transform:translateX(-160%)}60%,to{transform:none}}
@keyframes prUp{from{transform:translateY(150%);opacity:0}60%,to{transform:none;opacity:1}}
@keyframes prZoom{from{transform:scale(.6)}60%,to{transform:scale(1.15)}}
.clip.pr-clip{background:#7a5bd8;outline:1.5px solid transparent;outline-offset:-1.5px;transition:outline-color .25s}
.clip.pr-clip.sel{outline-color:#fff}
.clip.pr-clip em{left:auto;right:6px}
.pr-key{position:absolute;top:50%;width:7px;height:7px;background:#fff;transform:translate(-50%,-50%) rotate(45deg) scale(0);transition:transform .25s var(--ease)}
.pr-key.in{transform:translate(-50%,-50%) rotate(45deg) scale(1)}