/* ============================================================
   feature-anims.css — code-drawn feature animations for home.html
   Each .media-box holds a small mock of the editor (.anim). It shows a
   still "first frame" until home.js adds .playing to the box (on hover,
   or when scrolled into view on touch screens); removing .playing
   rewinds every animation back to that first frame.
   If a real anim/<name>.mp4 exists, the video replaces the mock.
============================================================ */

.media-box{ position:relative; container-type:inline-size; }
.media-box.has-video .anim{ display:none; }

/* ---------- Mini editor shell (shared by every animation) ---------- */
.anim{
  --m-rail:#1a1c22; --m-rail-soft:#24262d; --m-border:#2c3038;
  --m-dim:#9aa0ad; --m-bright:#f4f1ea; --m-paper:#e7e4dd;
  --m-stage:#cfccc4; --m-ink:#c9c6bf; --m-ink-dark:#8d8a84;
  position:absolute; inset:0; overflow:hidden;
  background:var(--m-stage);
  font-family:var(--font-body, 'Inter', sans-serif);
  font-size:2.2cqw; /* everything inside scales with the box */
  pointer-events:none; user-select:none;
}
.m-rail{
  position:absolute; left:0; top:0; bottom:0; width:13%;
  background:var(--m-rail); padding:2.4cqw 1.6cqw;
  display:flex; flex-direction:column; gap:1.3cqw;
}
.m-rail .m-brand{ height:1.1cqw; width:70%; border-radius:99px; background:var(--accent, #ff7a45); margin-bottom:1cqw; }
.m-rail i{ display:block; height:3.2cqw; border-radius:0.8cqw; background:var(--m-rail-soft); }
.m-rail i.on{ background:rgba(255,122,69,0.28); box-shadow:inset 0 0 0 1px var(--accent, #ff7a45); }

.m-tabs{
  position:absolute; left:13%; right:0; top:0; height:11%;
  background:var(--m-rail); display:flex; align-items:flex-end; gap:0.8cqw; padding:0 2cqw;
}
.m-tab{
  width:19%; height:72%; border-radius:1cqw 1cqw 0 0;
  background:#2c2f38; color:var(--m-dim);
  display:flex; align-items:center; padding:0 1.4cqw; gap:1cqw;
  font-size:1.9cqw; white-space:nowrap; overflow:hidden;
}
.m-tab::before{ content:''; flex-shrink:0; width:1.5cqw; height:1.9cqw; border-radius:0.3cqw; background:#e85d5d; opacity:0.85; }
.m-tab.on{ background:var(--m-paper); color:#1f2024; font-weight:600; }

.m-stage{ position:absolute; left:13%; right:0; top:11%; bottom:0; }
.m-paper{
  position:absolute; left:50%; top:7%; bottom:-6%; width:44%; transform:translateX(-50%);
  background:#fff; border-radius:0.4cqw; box-shadow:0 1cqw 3cqw rgba(0,0,0,0.18);
  padding:3cqw 3.2cqw; display:flex; flex-direction:column; gap:1.1cqw;
}
/* Fake text lines / blocks (used on pages and thumbnails) */
.anim .h{ display:block; height:1.9cqw; width:55%; border-radius:0.4cqw; background:#3a3d46; margin-bottom:0.8cqw; }
.anim .ln{ display:block; height:0.95cqw; border-radius:99px; background:var(--m-ink); }
.anim .ln.d{ background:var(--m-ink-dark); }
.anim .row{ display:flex; gap:1cqw; }
.anim .cell{ flex:1; height:2.4cqw; border-radius:0.3cqw; background:#efede8; border:1px solid #e0ddd6; }
.anim .field{ display:block; height:2.6cqw; border-radius:0.4cqw; border:1px solid #cfccc4; background:#fbfaf8; }
.anim .lbl{ display:block; height:0.8cqw; width:30%; border-radius:99px; background:var(--m-ink-dark); margin-top:0.6cqw; }
/* Width helpers — scoped under .anim so they also override .h's default width */
.anim .w30{width:30%} .anim .w40{width:40%} .anim .w50{width:50%} .anim .w60{width:60%}
.anim .w70{width:70%} .anim .w80{width:80%} .anim .w90{width:90%} .anim .w100{width:100%}

/* Mouse pointer */
.m-cursor{ position:absolute; width:3.6cqw; height:3.6cqw; z-index:5; left:62%; top:62%; }
.m-cursor svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 0.3cqw 0.5cqw rgba(0,0,0,0.35)); }

/* Shared extras: coloured page headers, menus, download toast, export button */
.anim .ph-a,.anim .ph-b,.anim .ph-c{ display:block; height:1.6cqw; width:60%; border-radius:0.3cqw; margin-bottom:0.6cqw; }
.anim .ph-a{ background:#ff7a45; } .anim .ph-b{ background:#4f8cff; } .anim .ph-c{ background:#34c759; }

.ex-item{
  display:block; padding:1cqw 1.4cqw; border-radius:0.6cqw;
  color:var(--m-bright); font-size:1.7cqw; white-space:nowrap;
}
.ex-item.danger{ color:#e85d5d; }

.m-toast{
  position:absolute; right:3%; bottom:5%; width:34%; z-index:4;
  background:var(--m-rail); border:1px solid var(--m-border); border-radius:1.2cqw;
  padding:1.2cqw 1.4cqw; display:flex; align-items:center; gap:1.2cqw;
  box-shadow:0 1.5cqw 3cqw rgba(0,0,0,0.35);
}
.m-file{ flex-shrink:0; width:2.8cqw; height:3.4cqw; border-radius:0.4cqw; background:#e85d5d; position:relative; }
.m-file::after{ content:'PDF'; position:absolute; left:0; right:0; bottom:0.4cqw; text-align:center; font-size:0.9cqw; font-weight:700; color:#fff; }
.m-toast-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:0.2cqw; }
.m-toast-text b{ color:var(--m-bright); font-size:1.6cqw; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-toast-text small{ color:var(--m-dim); font-size:1.3cqw; white-space:nowrap; }
.m-ok{ flex-shrink:0; width:2.6cqw; height:2.6cqw; border-radius:50%; background:#34c759; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:1.6cqw; font-weight:700; }

/* Respect "reduce motion" — show the still frame only */
@media (prefers-reduced-motion: reduce){
  .media-box.playing .anim *{ animation:none !important; }
}

/* ============================================================
   1. Multiple PDFs in tabs  (7s loop)
   Cursor clicks tab 2, then tab 3, then back to tab 1; the page
   underneath swaps to that document each time.
============================================================ */
.anim-tabs .m-paper.p2,
.anim-tabs .m-paper.p3{ opacity:0; }

.playing .anim-tabs .m-cursor{ animation:tabsCursor 7s ease-in-out infinite; }
.playing .anim-tabs .m-cursor svg{ animation:clickPulse3 7s linear infinite; }
.playing .anim-tabs .t1{ animation:tabsT1 7s linear infinite; }
.playing .anim-tabs .t2{ animation:tabsT2 7s linear infinite; }
.playing .anim-tabs .t3{ animation:tabsT3 7s linear infinite; }
.playing .anim-tabs .p1{ animation:tabsP1 7s linear infinite; }
.playing .anim-tabs .p2{ animation:tabsP2 7s linear infinite; }
.playing .anim-tabs .p3{ animation:tabsP3 7s linear infinite; }

/* Tab centres: t1 ≈ 23%, t2 ≈ 40%, t3 ≈ 57% across; tab row ≈ 6% down */
@keyframes tabsCursor{
  0%   { left:62%; top:62%; }
  12%  { left:40%; top:6%; }
  35%  { left:40%; top:6%; }
  45%  { left:57%; top:6%; }
  70%  { left:57%; top:6%; }
  80%  { left:22%; top:6%; }
  90%  { left:22%; top:6%; }
  100% { left:62%; top:62%; }
}
/* Clicks at 15%, 48%, 83% */
@keyframes clickPulse3{
  0%, 13.5%, 16.5%, 46.5%, 49.5%, 81.5%, 84.5%, 100% { transform:scale(1); }
  15%, 48%, 83% { transform:scale(0.78); }
}
@keyframes tabsT1{
  0%, 14.9%, 83%, 100% { background:var(--m-paper); color:#1f2024; font-weight:600; }
  15%, 82.9%           { background:#2c2f38; color:var(--m-dim); font-weight:400; }
}
@keyframes tabsT2{
  0%, 14.9%, 48%, 100% { background:#2c2f38; color:var(--m-dim); font-weight:400; }
  15%, 47.9%           { background:var(--m-paper); color:#1f2024; font-weight:600; }
}
@keyframes tabsT3{
  0%, 47.9%, 83%, 100% { background:#2c2f38; color:var(--m-dim); font-weight:400; }
  48%, 82.9%           { background:var(--m-paper); color:#1f2024; font-weight:600; }
}
@keyframes tabsP1{
  0%, 15%, 84%, 100% { opacity:1; }
  16%, 83%           { opacity:0; }
}
@keyframes tabsP2{
  0%, 15%, 49%, 100% { opacity:0; }
  16%, 48%           { opacity:1; }
}
@keyframes tabsP3{
  0%, 48%, 84%, 100% { opacity:0; }
  49%, 83%           { opacity:1; }
}

/* Positions below are % of the whole box. The page (.m-paper) spans
   x 37.4%–75.7% and y 17.2%–105% of the box, so a point at (px%, py%)
   of the page sits at box (37.4 + px*0.383, 17.2 + py*0.88). */

/* ============================================================
   2. Add shapes  (7s) — draws a box round a paragraph, an arrow,
   then stamps a star. Still frame shows the finished drawing.
============================================================ */
.anim-shapes .m-cursor{ left:75%; top:85%; }
.s-rect{ position:absolute; left:6%; top:14.5%; width:88%; height:12.5%;
  border:0.45cqw solid #ff3b30; border-radius:0.6cqw; }
.s-arrow{ position:absolute; left:10%; top:55%; width:48%; height:0.5cqw; margin-top:-0.25cqw;
  background:#ff3b30; border-radius:99px; }
.s-arrow::after{ content:''; position:absolute; right:-0.6cqw; top:50%; transform:translateY(-50%);
  border-left:2.2cqw solid #ff3b30; border-top:1.3cqw solid transparent; border-bottom:1.3cqw solid transparent; }
.s-star{ position:absolute; left:62%; top:50.5%; width:14%; }

.playing .anim-shapes .m-cursor{ animation:shCursor 7s ease-in-out infinite; }
.playing .anim-shapes .m-cursor svg{ animation:shPress 7s linear infinite; }
.playing .anim-shapes .s-rect{ animation:shRect 7s ease-out infinite; }
.playing .anim-shapes .s-arrow{ animation:shArrow 7s ease-out infinite; }
.playing .anim-shapes .s-star{ animation:shStar 7s ease-out infinite; }
@keyframes shCursor{
  0%       { left:75%;   top:85%; }
  8%, 10%  { left:39.7%; top:30%; }
  30%      { left:73.4%; top:41%; }
  38%, 40% { left:41.2%; top:65.6%; }
  56%      { left:59.6%; top:65.6%; }
  64%, 70% { left:63.8%; top:66%; }
  84%,100% { left:75%;   top:85%; }
}
@keyframes shPress{
  0%, 9.5%, 30.5%, 39.5%, 56.5%, 66.5%, 69.5%, 100% { transform:scale(1); }
  10%, 30%, 40%, 56%, 68% { transform:scale(0.82); }
}
@keyframes shRect{
  0%, 10%   { width:0; height:0; opacity:1; }
  30%, 92%  { width:88%; height:12.5%; opacity:1; }
  97%, 100% { width:88%; height:12.5%; opacity:0; }
}
@keyframes shArrow{
  0%, 39.9% { width:0; opacity:0; }
  40%       { width:0; opacity:1; }
  56%, 92%  { width:48%; opacity:1; }
  97%, 100% { width:48%; opacity:0; }
}
@keyframes shStar{
  0%, 67%   { transform:scale(0); opacity:1; }
  71%       { transform:scale(1.25); }
  75%, 92%  { transform:scale(1); opacity:1; }
  97%, 100% { transform:scale(1); opacity:0; }
}

/* ============================================================
   3. Add symbols  (6s) — a faint ✓ follows the pointer; clicking
   a checkbox stamps it. Rows 1, 2 and 4 get ticked.
============================================================ */
.anim-symbols .m-cursor{ left:70%; top:85%; }
.sy-row{ position:absolute; left:10%; right:10%; height:2.8cqw; display:flex; align-items:center; gap:1.6cqw; }
.sy-row .ln{ flex:none; }
.sy-box{ flex-shrink:0; width:2.8cqw; height:2.8cqw; border:0.25cqw solid #8d8a84; border-radius:0.4cqw;
  display:flex; align-items:center; justify-content:center; }
.sy-mark{ font-size:3.3cqw; line-height:1; color:#34c759; font-weight:700; margin-top:-0.4cqw; }
.sy-ghost{ position:absolute; left:-0.9cqw; top:-1.6cqw; font-size:3.3cqw; line-height:1; font-weight:700;
  color:#34c759; opacity:0.45; }

.playing .anim-symbols .m-cursor{ animation:syCursor 6s ease-in-out infinite; }
.playing .anim-symbols .m-cursor svg{ animation:syPress 6s linear infinite; }
.playing .anim-symbols .c1{ animation:syC1 6s ease-out infinite; }
.playing .anim-symbols .c2{ animation:syC2 6s ease-out infinite; }
.playing .anim-symbols .c4{ animation:syC4 6s ease-out infinite; }
@keyframes syCursor{
  0%        { left:70%;   top:85%; }
  14%, 24%  { left:42.2%; top:38.4%; }
  36%, 46%  { left:42.2%; top:49%; }
  62%, 72%  { left:42.2%; top:70.1%; }
  88%, 100% { left:70%;   top:85%; }
}
@keyframes syPress{
  0%, 16.5%, 19.5%, 38.5%, 41.5%, 66.5%, 69.5%, 100% { transform:scale(1); }
  18%, 40%, 68% { transform:scale(0.8); }
}
@keyframes syC1{ 0%, 17.9% { transform:scale(0); opacity:1; } 21% { transform:scale(1.3); } 24%, 92% { transform:scale(1); opacity:1; } 97%, 100% { transform:scale(1); opacity:0; } }
@keyframes syC2{ 0%, 39.9% { transform:scale(0); opacity:1; } 43% { transform:scale(1.3); } 46%, 92% { transform:scale(1); opacity:1; } 97%, 100% { transform:scale(1); opacity:0; } }
@keyframes syC4{ 0%, 67.9% { transform:scale(0); opacity:1; } 71% { transform:scale(1.3); } 74%, 92% { transform:scale(1); opacity:1; } 97%, 100% { transform:scale(1); opacity:0; } }

/* ============================================================
   4. Add images  (7s) — a signature drops onto the page, is
   dragged onto the signature line, then resized by its handle.
============================================================ */
.anim-images .m-cursor{ left:80%; top:30%; }
.im-line{ position:absolute; left:50%; width:42%; top:82.5%; height:0.3cqw; background:#3a3d46; }
.im-sig{ position:absolute; left:52%; top:70%; width:40%; aspect-ratio:2.5;
  border:1px dashed var(--accent, #ff7a45); border-radius:0.3cqw; transform-origin:center; }
.im-sig svg{ width:100%; height:100%; display:block; }
.im-handle{ position:absolute; right:-0.9cqw; bottom:-0.9cqw; width:1.8cqw; height:1.8cqw; border-radius:50%;
  background:var(--accent, #ff7a45); border:0.3cqw solid #fff; }

.playing .anim-images .m-cursor{ animation:imCursor 7s ease-in-out infinite; }
.playing .anim-images .m-cursor svg{ animation:imPress 7s linear infinite; }
.playing .anim-images .im-sig{ animation:imSig 7s ease-in-out infinite; }
@keyframes imCursor{
  0%        { left:80%;   top:30%; }
  10%, 22%  { left:52.7%; top:56.1%; }
  46%       { left:63.1%; top:82.5%; }
  52%, 58%  { left:68.8%; top:86.2%; }
  76%, 84%  { left:72.6%; top:88.7%; }
  100%      { left:80%;   top:30%; }
}
@keyframes imPress{
  0%, 11.5%, 14.5%, 21.5%, 46.5%, 57.5%, 76.5%, 100% { transform:scale(1); }
  13%, 22%, 46%, 58%, 76% { transform:scale(0.82); }
}
@keyframes imSig{
  0%, 12.9% { opacity:0; left:25%; top:40%; width:30%; transform:scale(0.8); }
  16%, 22%  { opacity:1; left:25%; top:40%; width:30%; transform:scale(1); }
  46%, 58%  { opacity:1; left:52%; top:70%; width:30%; transform:scale(1); }
  76%, 92%  { opacity:1; left:52%; top:70%; width:40%; transform:scale(1); }
  97%, 100% { opacity:0; left:52%; top:70%; width:40%; transform:scale(1); }
}

/* ============================================================
   5. Page arrangement  (7s) — add a blank page, drag page 3 to
   the front, then delete the blank page again.
============================================================ */
.anim-pages .m-cursor{ left:50%; top:90%; }
.pg-wrap{ position:absolute; inset:0; }
.pg{ position:absolute; top:37%; width:15%; height:32%; background:#fff; border-radius:0.4cqw;
  box-shadow:0 0.6cqw 1.6cqw rgba(0,0,0,0.15); padding:1.4cqw; display:flex; flex-direction:column; gap:0.7cqw; }
.pg .row{ gap:0.6cqw; } .pg .cell{ height:1.8cqw; }
.pg .pic{ display:block; height:5cqw; border-radius:0.3cqw; background:linear-gradient(135deg,#bfe3c8,#6fbf8c); }
.pg-a{ left:20.5%; z-index:1; } .pg-b{ left:39.5%; z-index:1; } .pg-c{ left:58.5%; z-index:2; }
.pg-d{ left:77.5%; opacity:0; }
.pg-add{ position:absolute; left:77.5%; top:37%; width:15%; height:32%; border:0.3cqw dashed #8d8a84; border-radius:0.6cqw;
  display:flex; align-items:center; justify-content:center; color:#6b6862; font-size:5cqw; font-weight:300; }
.pg-num{ position:absolute; top:71.5%; width:15%; text-align:center; font-size:1.6cqw; font-weight:600; color:#6b6862; }
.pg-num.n4{ opacity:0; }
.pg-del{ position:absolute; top:-1.2cqw; right:-1.2cqw; width:2.4cqw; height:2.4cqw; border-radius:50%;
  background:#e85d5d; color:#fff; font-size:1.3cqw; display:flex; align-items:center; justify-content:center; opacity:0; }

.playing .anim-pages .m-cursor{ animation:pgCursor 7s ease-in-out infinite; }
.playing .anim-pages .m-cursor svg{ animation:pgPress 7s linear infinite; }
.playing .anim-pages .pg-wrap{ animation:pgWrap 7s linear infinite; }
.playing .anim-pages .pg-a{ animation:pgA 7s ease-in-out infinite; }
.playing .anim-pages .pg-b{ animation:pgB 7s ease-in-out infinite; }
.playing .anim-pages .pg-c{ animation:pgC 7s ease-in-out infinite; }
.playing .anim-pages .pg-d,
.playing .anim-pages .pg-num.n4{ animation:pgD 7s ease-out infinite; }
.playing .anim-pages .pg-add{ animation:pgAdd 7s linear infinite; }
.playing .anim-pages .pg-del{ animation:pgDel 7s linear infinite; }
@keyframes pgCursor{
  0%        { left:50%;   top:90%; }
  10%, 14%  { left:85%;   top:53%; }
  22%, 28%  { left:66%;   top:53%; }
  46%, 48%  { left:28%;   top:53%; }
  56%, 66%  { left:91.6%; top:35.8%; }
  84%, 100% { left:50%;   top:90%; }
}
@keyframes pgPress{
  0%, 11.5%, 14.5%, 25.5%, 48.5%, 58.5%, 61.5%, 100% { transform:scale(1); }
  13%, 26%, 48%, 60% { transform:scale(0.82); }
}
@keyframes pgWrap{ 0%, 88% { opacity:1; } 93%, 96% { opacity:0; } 100% { opacity:1; } }
@keyframes pgA{ 0%, 34% { left:20.5%; } 46%, 95% { left:39.5%; } 95.5%, 100% { left:20.5%; } }
@keyframes pgB{ 0%, 34% { left:39.5%; } 46%, 95% { left:58.5%; } 95.5%, 100% { left:39.5%; } }
@keyframes pgC{
  0%, 26%   { left:58.5%; transform:scale(1); box-shadow:0 0.6cqw 1.6cqw rgba(0,0,0,0.15); z-index:2; }
  29%       { left:58.5%; transform:scale(1.06); box-shadow:0 1.6cqw 3cqw rgba(0,0,0,0.3); z-index:3; }
  46%       { left:20.5%; transform:scale(1.06); box-shadow:0 1.6cqw 3cqw rgba(0,0,0,0.3); z-index:3; }
  49%, 95%  { left:20.5%; transform:scale(1); box-shadow:0 0.6cqw 1.6cqw rgba(0,0,0,0.15); z-index:2; }
  95.5%,100%{ left:58.5%; transform:scale(1); box-shadow:0 0.6cqw 1.6cqw rgba(0,0,0,0.15); z-index:2; }
}
@keyframes pgD{
  0%, 13%   { opacity:0; transform:scale(0.7); }
  18%, 60%  { opacity:1; transform:scale(1); }
  66%, 100% { opacity:0; transform:scale(0.7); }
}
@keyframes pgAdd{ 0%, 12.9% { opacity:1; } 13%, 65.9% { opacity:0; } 66%, 100% { opacity:1; } }
@keyframes pgDel{ 0%, 51% { opacity:0; } 53%, 60% { opacity:1; } 61%, 100% { opacity:0; } }

/* ============================================================
   6. Export a single page  (7s) — right-click the page, choose
   "Export this page"; it shrinks into a download notification.
============================================================ */
.anim-export .m-cursor{ left:85%; top:25%; }
.anim .ln.ex-hl{ height:1.5cqw; border-radius:0.2cqw; background:rgba(255,204,0,0.65); }
.ex-circle{ position:absolute; left:54%; top:25.3%; width:38%; height:7%; border:0.35cqw solid #ff3b30; border-radius:50%; }
.ex-tick{ position:absolute; right:7%; top:41%; font-size:3.4cqw; line-height:1; color:#ff3b30; font-weight:700; }
.ex-menu, .mg-menu{ position:absolute; z-index:4; display:flex; flex-direction:column;
  background:var(--m-rail); border:1px solid var(--m-border); border-radius:1cqw; padding:0.6cqw;
  box-shadow:0 1.5cqw 3cqw rgba(0,0,0,0.35); opacity:0; }
.ex-menu{ left:61%; top:46%; width:25%; transform-origin:top left; }
/* Same size/content as the page; shrinks via transform (origin top-left)
   so its contents scale down with it */
.ex-fly{ position:absolute; left:37.4%; top:17.2%; width:38.3%; height:88%; background:#fff; border-radius:0.4cqw;
  box-shadow:0 1.5cqw 4cqw rgba(0,0,0,0.3); opacity:0; z-index:3; transform-origin:top left;
  padding:3cqw 3.2cqw; display:flex; flex-direction:column; gap:1.1cqw; }
.ex-toast, .mg-toast{ opacity:0; }

.playing .anim-export .m-cursor{ animation:exCursor 7s ease-in-out infinite; }
.playing .anim-export .m-cursor svg{ animation:exPress 7s linear infinite; }
.playing .anim-export .ex-menu{ animation:exMenu 7s ease-out infinite; }
.playing .anim-export .ex-item.on{ animation:exItem 7s linear infinite; }
.playing .anim-export .ex-fly{ animation:exFly 7s ease-in-out infinite; }
.playing .anim-export .ex-toast{ animation:toastIn 7s ease-out infinite; }
@keyframes exCursor{
  0%        { left:85%;   top:25%; }
  14%, 18%  { left:60.5%; top:45.5%; }
  26%, 38%  { left:66%;   top:50.2%; }
  56%, 100% { left:85%;   top:25%; }
}
@keyframes exPress{
  0%, 15.5%, 18.5%, 36.5%, 39.5%, 100% { transform:scale(1); }
  17%, 38% { transform:scale(0.8); }
}
@keyframes exMenu{
  0%, 17%   { opacity:0; transform:scale(0.94); }
  19%, 38%  { opacity:1; transform:scale(1); }
  40%, 100% { opacity:0; transform:scale(1); }
}
@keyframes exItem{ 0%, 25% { background:transparent; } 26%, 39% { background:rgba(255,122,69,0.25); } 40%, 100% { background:transparent; } }
/* Target = the PDF icon in the toast (box 64.6%, 84%):
   translate is a % of the copy's own size (38.3% × 88% of the box) */
@keyframes exFly{
  0%, 39.9% { opacity:0; transform:translate(0, 0) scale(1); }
  40%       { opacity:1; transform:translate(0, 0) scale(1); }
  44%       { opacity:1; transform:translate(2%, -2%) scale(0.92); }
  58%       { opacity:0.9; transform:translate(71%, 76%) scale(0.07); }
  60%, 100% { opacity:0; transform:translate(71%, 76%) scale(0.07); }
}
@keyframes toastIn{
  0%, 58%   { opacity:0; transform:translateY(30%); }
  62%, 90%  { opacity:1; transform:translateY(0); }
  96%, 100% { opacity:0; transform:translateY(0); }
}

/* ============================================================
   7. Merge PDFs  (7s) — Export → All PDF; the three open
   documents slide together into one stack and download.
============================================================ */
.anim-merge .m-cursor{ left:60%; top:85%; }
.m-export{ position:absolute; left:1.6cqw; right:1.6cqw; bottom:2.4cqw; height:3.6cqw; border-radius:0.7cqw;
  background:var(--accent, #ff7a45); color:#1a1c22; font-size:1.4cqw; font-weight:700;
  display:flex; align-items:center; justify-content:center; }
.mg-wrap{ position:absolute; inset:0; }
.mg-doc{ position:absolute; top:28%; width:18%; height:44%; background:#fff; border-radius:0.4cqw;
  box-shadow:0 0.8cqw 2cqw rgba(0,0,0,0.18); padding:1.4cqw; display:flex; flex-direction:column; gap:0.7cqw; }
.mg-a{ left:24%; z-index:1; } .mg-b{ left:47.5%; z-index:2; } .mg-c{ left:71%; z-index:3; }
.mg-badge{ position:absolute; left:47.5%; top:18%; width:18%; text-align:center; opacity:0;
  font-size:1.5cqw; font-weight:700; color:#1a1c22; }
.mg-badge::before{ content:''; position:absolute; inset:-0.6cqw 2cqw; border-radius:99px; background:var(--accent, #ff7a45); z-index:-1; }
.mg-menu{ left:1.5%; bottom:10%; width:21%; transform-origin:bottom left; }

.playing .anim-merge .m-cursor{ animation:mgCursor 7s ease-in-out infinite; }
.playing .anim-merge .m-cursor svg{ animation:mgPress 7s linear infinite; }
.playing .anim-merge .mg-menu{ animation:mgMenu 7s ease-out infinite; }
.playing .anim-merge .mg-menu .ex-item.on{ animation:mgItem 7s linear infinite; }
.playing .anim-merge .mg-wrap{ animation:mgWrap 7s linear infinite; }
.playing .anim-merge .mg-a{ animation:mgA 7s ease-in-out infinite; }
.playing .anim-merge .mg-c{ animation:mgC 7s ease-in-out infinite; }
.playing .anim-merge .mg-badge{ animation:mgBadge 7s ease-out infinite; }
.playing .anim-merge .mg-toast{ animation:toastIn 7s ease-out infinite; }
@keyframes mgCursor{
  0%        { left:60%;  top:85%; }
  12%, 15%  { left:6.5%; top:92.5%; }
  22%, 28%  { left:8%;   top:85.4%; }
  42%, 100% { left:60%;  top:85%; }
}
@keyframes mgPress{
  0%, 13.5%, 16.5%, 26.5%, 29.5%, 100% { transform:scale(1); }
  15%, 28% { transform:scale(0.8); }
}
@keyframes mgMenu{
  0%, 15%   { opacity:0; transform:scale(0.94); }
  17%, 29%  { opacity:1; transform:scale(1); }
  31%, 100% { opacity:0; transform:scale(1); }
}
@keyframes mgItem{ 0%, 21% { background:transparent; } 22%, 30% { background:rgba(255,122,69,0.25); } 31%, 100% { background:transparent; } }
@keyframes mgWrap{ 0%, 90% { opacity:1; } 94%, 96% { opacity:0; } 100% { opacity:1; } }
@keyframes mgA{
  0%, 32%    { left:24%;   top:28%;   transform:rotate(0); }
  55%, 95%   { left:46.3%; top:26.5%; transform:rotate(-4deg); }
  95.5%,100% { left:24%;   top:28%;   transform:rotate(0); }
}
@keyframes mgC{
  0%, 32%    { left:71%;   top:28%;   transform:rotate(0); }
  55%, 95%   { left:48.7%; top:29.5%; transform:rotate(3deg); }
  95.5%,100% { left:71%;   top:28%;   transform:rotate(0); }
}
@keyframes mgBadge{
  0%, 55%   { opacity:0; transform:translateY(40%); }
  59%, 90%  { opacity:1; transform:translateY(0); }
  95%, 100% { opacity:0; transform:translateY(0); }
}

/* ============================================================
   8. Link & sync text  (7s) — typing a name once in the toolbox
   fills all three linked boxes on the form at the same time.
============================================================ */
.anim-link .m-cursor{ left:65%; top:80%; }
.anim-link .m-rail{ width:27%; }
.anim-link .m-tabs, .anim-link .m-stage{ left:27%; }
.lk-card{ display:flex; flex-direction:column; gap:0.8cqw; margin-top:1.4cqw; padding:1.2cqw;
  background:var(--m-rail-soft); border:1px solid var(--m-border); border-radius:1cqw; }
.lk-title{ font-size:1.6cqw; font-weight:700; color:var(--m-bright); }
.lk-label{ font-size:1.3cqw; color:var(--m-dim); }
.lk-input{ display:flex; align-items:center; height:3.6cqw; padding:0 1cqw; border-radius:0.6cqw;
  background:#111318; border:1px solid var(--accent, #ff7a45); color:var(--m-bright); font-size:1.6cqw; }
.lk-caret{ width:0.15cqw; height:2cqw; background:var(--m-bright); margin-left:0.15cqw; opacity:0; }
.lk-count{ font-size:1.25cqw; color:#6aa5ff; }
.lk-box{ position:absolute; left:10%; width:62%; height:3.4cqw; display:flex; align-items:center; padding:0 1cqw;
  border:0.2cqw dashed #007aff; border-radius:0.4cqw; background:rgba(0,122,255,0.06);
  font-size:1.6cqw; font-weight:600; color:#1a1c22; }
/* Typing is shown by growing max-width in 12 steps (one per letter) so the
   caret right after it moves along with the text. */
.lk-text{ display:inline-block; white-space:nowrap; overflow:hidden; vertical-align:middle; max-width:14cqw; }
.anim-link .m-brand{ width:35%; }

.playing .anim-link .m-cursor{ animation:lkCursor 7s ease-in-out infinite; }
.playing .anim-link .m-cursor svg{ animation:lkPress 7s linear infinite; }
.playing .anim-link .lk-text{ animation:lkType 7s linear infinite; }
.playing .anim-link .lk-caret{ animation:lkCaret 0.8s steps(1) infinite; }
.playing .anim-link .lk-box{ animation:lkGlow 7s ease-in-out infinite; }
@keyframes lkCursor{
  0%        { left:65%; top:80%; }
  10%, 70%  { left:9%;  top:24.5%; }
  84%, 100% { left:65%; top:80%; }
}
@keyframes lkPress{ 0%, 10.5%, 13.5%, 100% { transform:scale(1); } 12% { transform:scale(0.8); } }
@keyframes lkType{
  0%        { max-width:0; opacity:1; }
  16%       { max-width:0; opacity:1; animation-timing-function:steps(12, end); }
  56%, 88%  { max-width:11.2cqw; opacity:1; }
  94%, 100% { max-width:11.2cqw; opacity:0; }
}
@keyframes lkCaret{ 0% { opacity:1; } 50% { opacity:0; } }
@keyframes lkGlow{
  0%, 15%, 60%, 100% { background:rgba(0,122,255,0.06); }
  20%, 55% { background:rgba(0,122,255,0.16); }
}

/* ============================================================
   9. Copy & paste anything  (8s) — right-click-drag selects a stamp
   and a signature, Ctrl+C, switch to another PDF, Ctrl+V: both land
   in the same spot on the other document.
   Marquee covers page (6–94%, 62–84%) = box (39.7–73.4%, 71.8–91.1%).
============================================================ */
.anim-copy .m-cursor{ left:85%; top:30%; }
.anim-copy .cp-b{ opacity:0; }
.cp-stamp{ position:absolute; left:10%; top:68%; padding:0.5cqw 1cqw; border:0.3cqw solid #e85d5d; border-radius:0.5cqw;
  color:#e85d5d; font-size:1.9cqw; font-weight:800; letter-spacing:0.1em; transform:rotate(-8deg); }
.cp-sig{ position:absolute; left:50%; top:66%; width:40%; aspect-ratio:2.5; }
.cp-sig svg{ width:100%; height:100%; display:block; }
.cp-marquee{ position:absolute; left:39.7%; top:71.8%; width:0; height:0; z-index:4; opacity:0;
  border:1.5px dashed var(--accent, #ff7a45); background:rgba(255,122,69,0.12); }
.cp-keys{ position:absolute; left:56.5%; bottom:4%; transform:translateX(-50%); z-index:4; opacity:0;
  display:flex; align-items:center; gap:0.6cqw; white-space:nowrap;
  background:var(--m-rail); color:var(--m-bright); border:1px solid var(--m-border); border-radius:1cqw;
  padding:0.9cqw 1.4cqw; font-size:1.5cqw; box-shadow:0 1.2cqw 3cqw rgba(0,0,0,0.35); }
.cp-keys kbd{ font-family:inherit; font-size:1.4cqw; font-weight:700; background:#2c2f38; border:1px solid #3a3d46;
  border-bottom-width:0.3cqw; border-radius:0.5cqw; padding:0.3cqw 0.8cqw; }
.cp-keys small{ color:var(--m-dim); font-size:1.3cqw; margin-left:0.8cqw; }

.playing .anim-copy{ animation:cpRoot 8s linear infinite; }
.playing .anim-copy .m-cursor{ animation:cpCursor 8s ease-in-out infinite; }
.playing .anim-copy .m-cursor svg{ animation:cpPress 8s linear infinite; }
.playing .anim-copy .cp-marquee{ animation:cpMarquee 8s ease-in-out infinite; }
.playing .anim-copy .cp-a .cp-stamp,
.playing .anim-copy .cp-a .cp-sig{ animation:cpSelA 8s linear infinite; }
.playing .anim-copy .cp-copy{ animation:cpCopyKeys 8s ease-out infinite; }
.playing .anim-copy .cp-paste{ animation:cpPasteKeys 8s ease-out infinite; }
.playing .anim-copy .t1{ animation:cpT1 8s linear infinite; }
.playing .anim-copy .t2{ animation:cpT2 8s linear infinite; }
.playing .anim-copy .cp-a{ animation:cpPageA 8s linear infinite; }
.playing .anim-copy .cp-b{ animation:cpPageB 8s linear infinite; }
.playing .anim-copy .cp-pasted{ animation:cpPasted 8s ease-out infinite; }
.playing .anim-copy .cp-stamp.cp-pasted{ animation-name:cpPastedStamp; }

@keyframes cpRoot{ 0%, 92% { opacity:1; } 95%, 97% { opacity:0; } 100% { opacity:1; } }
@keyframes cpCursor{
  0%        { left:85%;   top:30%; }
  8%, 10%   { left:39.7%; top:71.8%; }
  24%, 32%  { left:73.4%; top:91.1%; }
  42%, 46%  { left:40%;   top:6%; }
  54%, 90%  { left:64%;   top:52%; }
  100%      { left:85%;   top:30%; }
}
@keyframes cpPress{
  0%, 9.5%, 24.5%, 43.5%, 46.5%, 100% { transform:scale(1); }
  10%, 24%, 45% { transform:scale(0.82); }
}
@keyframes cpMarquee{
  0%, 10%   { width:0; height:0; opacity:1; }
  24%       { width:33.7%; height:19.3%; opacity:1; }
  27%, 100% { width:33.7%; height:19.3%; opacity:0; }
}
@keyframes cpSelA{
  0%, 24%   { box-shadow:0 0 0 0 transparent; }
  25%, 45%  { box-shadow:0 0 0 0.3cqw var(--accent, #ff7a45); }
  46%, 100% { box-shadow:0 0 0 0 transparent; }
}
@keyframes cpCopyKeys{
  0%, 27%   { opacity:0; transform:translate(-50%, 30%); }
  30%, 40%  { opacity:1; transform:translate(-50%, 0); }
  43%, 100% { opacity:0; transform:translate(-50%, 0); }
}
@keyframes cpPasteKeys{
  0%, 55%   { opacity:0; transform:translate(-50%, 30%); }
  58%, 80%  { opacity:1; transform:translate(-50%, 0); }
  84%, 100% { opacity:0; transform:translate(-50%, 0); }
}
@keyframes cpT1{
  0%, 44.9%, 96%, 100% { background:var(--m-paper); color:#1f2024; font-weight:600; }
  45%, 95.9%           { background:#2c2f38; color:var(--m-dim); font-weight:400; }
}
@keyframes cpT2{
  0%, 44.9%, 96%, 100% { background:#2c2f38; color:var(--m-dim); font-weight:400; }
  45%, 95.9%           { background:var(--m-paper); color:#1f2024; font-weight:600; }
}
@keyframes cpPageA{ 0%, 45%, 96.5%, 100% { opacity:1; } 46%, 96% { opacity:0; } }
@keyframes cpPageB{ 0%, 45%, 96.5%, 100% { opacity:0; } 46%, 96% { opacity:1; } }
@keyframes cpPasted{
  0%, 58.9% { opacity:0; transform:scale(0.6); box-shadow:0 0 0 0 transparent; }
  59%       { opacity:1; transform:scale(0.6); box-shadow:0 0 0 0.3cqw var(--accent, #ff7a45); }
  62%       { opacity:1; transform:scale(1.1); }
  65%, 84%  { opacity:1; transform:scale(1); box-shadow:0 0 0 0.3cqw var(--accent, #ff7a45); }
  86%, 100% { opacity:1; transform:scale(1); box-shadow:0 0 0 0 transparent; }
}
/* The stamp is tilted, so its keyframes keep the rotation */
@keyframes cpPastedStamp{
  0%, 58.9% { opacity:0; transform:rotate(-8deg) scale(0.6); box-shadow:0 0 0 0 transparent; }
  59%       { opacity:1; transform:rotate(-8deg) scale(0.6); box-shadow:0 0 0 0.3cqw var(--accent, #ff7a45); }
  62%       { opacity:1; transform:rotate(-8deg) scale(1.1); }
  65%, 84%  { opacity:1; transform:rotate(-8deg) scale(1); box-shadow:0 0 0 0.3cqw var(--accent, #ff7a45); }
  86%, 100% { opacity:1; transform:rotate(-8deg) scale(1); box-shadow:0 0 0 0 transparent; }
}