/* GENERADO por import-motions.py desde Animaciones/Animaciones-web — no editar a mano. */ /* ── modes-hero · Hero.dc.html ── */ /* Cycle: 24s. One job, ten states, one window. Every change is the same 400ms dissolve — no cuts, no highlights, no camera moves. No state is shorter than 2s, so nothing flashes past. 0 01 ⌘L, the path bar is a field 2.4s 2.4s 02 ↩ — sorted by type, already in colour 2.8s 5.2s 03 the PDF tool ribbon 2.2s 7.4s 04 ⌥⌘3, the report read at half window 2.8s 10.2s 05 ⌥⌘4, the landscape and its metadata 2.4s 12.6s 06 ↓, the teaser in its player 2.2s 14.8s 07 ↓, the voiceover waveform 2.2s 17.0s 08 ⌘K + pdf, nine PDF commands 2.2s 19.2s 09 three PDFs marked 2.0s 21.2s 10 F5 — delivered 2.8s 24s seam back to 01 */ @keyframes om-modes-hero-f2 { 0%,9.17%{opacity:0} 10.83%,100%{opacity:1} } @keyframes om-modes-hero-f3 { 0%,20.83%{opacity:0} 22.50%,100%{opacity:1} } @keyframes om-modes-hero-f4 { 0%,30.00%{opacity:0} 31.67%,100%{opacity:1} } @keyframes om-modes-hero-f5 { 0%,41.67%{opacity:0} 43.33%,100%{opacity:1} } @keyframes om-modes-hero-f6 { 0%,51.67%{opacity:0} 53.33%,100%{opacity:1} } @keyframes om-modes-hero-f7 { 0%,60.83%{opacity:0} 62.50%,100%{opacity:1} } @keyframes om-modes-hero-f8 { 0%,70.00%{opacity:0} 71.67%,100%{opacity:1} } @keyframes om-modes-hero-f9 { 0%,79.17%{opacity:0} 80.83%,100%{opacity:1} } @keyframes om-modes-hero-f10 { 0%,87.50%{opacity:0} 89.17%,100%{opacity:1} } @keyframes om-modes-hero-fseam { 0%,98.33%{opacity:0} 100%{opacity:1} } /* One keycap at a time, in a fixed slot below the window. No key on 03 (a setting) or on 09 (marking with the mouse). */ @keyframes om-modes-hero-c1 { 0%{opacity:1;transform:scale(1.10)} 1.4%{transform:scale(1)} 8.4%{opacity:1} 9.8%,100%{opacity:0} } @keyframes om-modes-hero-c2 { 0%,9.3%{opacity:0;transform:scale(1)} 10.2%{opacity:1;transform:scale(1.10)} 11.6%{transform:scale(1)} 19.6%{opacity:1} 21%,100%{opacity:0} } @keyframes om-modes-hero-c3 { 0%,30.1%{opacity:0;transform:scale(1)} 31%{opacity:1;transform:scale(1.10)} 32.4%{transform:scale(1)} 40.3%{opacity:1} 41.7%,100%{opacity:0} } @keyframes om-modes-hero-c4 { 0%,41.8%{opacity:0;transform:scale(1)} 42.7%{opacity:1;transform:scale(1.10)} 44.1%{transform:scale(1)} 50.3%{opacity:1} 51.7%,100%{opacity:0} } @keyframes om-modes-hero-c5 { 0%,51.8%{opacity:0;transform:scale(1)} 52.7%{opacity:1;transform:scale(1.10)} 54.1%{transform:scale(1)} 59.4%{opacity:1} 60.8%,100%{opacity:0} } @keyframes om-modes-hero-c6 { 0%,60.9%{opacity:0;transform:scale(1)} 61.8%{opacity:1;transform:scale(1.10)} 63.2%{transform:scale(1)} 68.6%{opacity:1} 70%,100%{opacity:0} } @keyframes om-modes-hero-c7 { 0%,70.1%{opacity:0;transform:scale(1)} 71%{opacity:1;transform:scale(1.10)} 72.4%{transform:scale(1)} 77.8%{opacity:1} 79.2%,100%{opacity:0} } @keyframes om-modes-hero-c8 { 0%,87.6%{opacity:0;transform:scale(1)} 88.5%{opacity:1;transform:scale(1.10)} 89.9%{transform:scale(1)} 97.6%{opacity:1} 99.5%,100%{opacity:0} } @media (prefers-reduced-motion: reduce) { [data-om-hero3] * { animation: none !important; } [data-om-hero3] [data-frame]:not([data-first]) { opacity: 0 !important; } [data-om-hero3] [data-key]:not([data-key="c1"]) { opacity: 0 !important; } [data-om-hero3] [data-key="c1"] { opacity: 1 !important; } } /* ── modes · 01 Modes.dc.html ── */ /* Cycle: 10s — 1.5s per mode, 2.5s on Space, then back to Files. Each mode fades in over 220ms at its cue and stays; the stack is painted bottom-to-top, so the newest frame wins. */ @keyframes om-modes-m2 { 0%,13.9%{opacity:0} 16.1%,100%{opacity:1} } @keyframes om-modes-m3 { 0%,28.9%{opacity:0} 31.1%,100%{opacity:1} } @keyframes om-modes-m4 { 0%,43.9%{opacity:0} 46.1%,100%{opacity:1} } @keyframes om-modes-m5 { 0%,58.9%{opacity:0} 61.1%,100%{opacity:1} } @keyframes om-modes-m6 { 0%,73.9%{opacity:0} 76.1%,100%{opacity:1} } @keyframes om-modes-mseam { 0%,97%{opacity:0} 100%{opacity:1} } /* The switcher is the control: a brief hold on it at the start. */ @keyframes om-modes-accent { 0%,1.8%{opacity:0} 6.2%{opacity:1} 10.5%,100%{opacity:0} } /* Slow breathing push-in, centred on the switcher, back home for the loop. */ @keyframes om-modes-breathe { 0%{transform:scale(1)} 6%{transform:scale(1.008)} 50%{transform:scale(1.014)} 100%{transform:scale(1)} } @keyframes om-modes-label { 0%,1.8%{opacity:0} 6.2%,10.5%{opacity:1} 14%,100%{opacity:0} } @media (prefers-reduced-motion: reduce) { [data-om-mode-cycle] * { animation: none !important; } [data-om-mode-cycle] [data-frame]:not([data-first]) { opacity: 0 !important; } [data-om-mode-cycle] [data-accent] { opacity: 0 !important; } } /* ── themes · 02 Themes.dc.html ── */ /* Cycle: 10.8s. Each theme fades in over 250ms at its cue and stays; the stack is painted bottom-to-top, so the newest frame wins. */ @keyframes om-themes-f2 { 0%,13.889%{opacity:0} 16.204%,100%{opacity:1} } @keyframes om-themes-f3 { 0%,20.370%{opacity:0} 22.685%,100%{opacity:1} } @keyframes om-themes-f4 { 0%,26.852%{opacity:0} 29.167%,100%{opacity:1} } @keyframes om-themes-f5 { 0%,33.333%{opacity:0} 35.648%,100%{opacity:1} } @keyframes om-themes-f6 { 0%,39.815%{opacity:0} 42.130%,100%{opacity:1} } @keyframes om-themes-f7 { 0%,46.296%{opacity:0} 48.611%,100%{opacity:1} } @keyframes om-themes-f8 { 0%,52.778%{opacity:0} 55.093%,100%{opacity:1} } @keyframes om-themes-f9 { 0%,59.259%{opacity:0} 61.574%,100%{opacity:1} } @keyframes om-themes-f10 { 0%,65.741%{opacity:0} 68.056%,100%{opacity:1} } @keyframes om-themes-f11 { 0%,72.222%{opacity:0} 74.537%,100%{opacity:1} } @keyframes om-themes-f12 { 0%,78.704%{opacity:0} 81.019%,100%{opacity:1} } @keyframes om-themes-f13 { 0%,85.185%{opacity:0} 87.500%,100%{opacity:1} } @keyframes om-themes-fsys { 0%,96.759%{opacity:0} 100%{opacity:1} } @keyframes om-themes-l1 { 0%,13.889%{opacity:1} 16.204%,96.759%{opacity:0} 100%{opacity:1} } @keyframes om-themes-l2 { 0%,13.889%{opacity:0} 16.204%,20.370%{opacity:1} 22.685%,100%{opacity:0} } @keyframes om-themes-l3 { 0%,20.370%{opacity:0} 22.685%,26.852%{opacity:1} 29.167%,100%{opacity:0} } @keyframes om-themes-l4 { 0%,26.852%{opacity:0} 29.167%,33.333%{opacity:1} 35.648%,100%{opacity:0} } @keyframes om-themes-l5 { 0%,33.333%{opacity:0} 35.648%,39.815%{opacity:1} 42.130%,100%{opacity:0} } @keyframes om-themes-l6 { 0%,39.815%{opacity:0} 42.130%,46.296%{opacity:1} 48.611%,100%{opacity:0} } @keyframes om-themes-l7 { 0%,46.296%{opacity:0} 48.611%,52.778%{opacity:1} 55.093%,100%{opacity:0} } @keyframes om-themes-l8 { 0%,52.778%{opacity:0} 55.093%,59.259%{opacity:1} 61.574%,100%{opacity:0} } @keyframes om-themes-l9 { 0%,59.259%{opacity:0} 61.574%,65.741%{opacity:1} 68.056%,100%{opacity:0} } @keyframes om-themes-l10 { 0%,65.741%{opacity:0} 68.056%,72.222%{opacity:1} 74.537%,100%{opacity:0} } @keyframes om-themes-l11 { 0%,72.222%{opacity:0} 74.537%,78.704%{opacity:1} 81.019%,100%{opacity:0} } @keyframes om-themes-l12 { 0%,78.704%{opacity:0} 81.019%,85.185%{opacity:1} 87.500%,100%{opacity:0} } @keyframes om-themes-l13 { 0%,85.185%{opacity:0} 87.500%,96.759%{opacity:1} 100%{opacity:0} } @media (prefers-reduced-motion: reduce) { [data-om-theme-cycle] * { animation: none !important; } [data-om-theme-cycle] [data-frame]:not([data-first]) { opacity: 0 !important; } [data-om-theme-cycle] [data-label]:not([data-first]) { opacity: 0 !important; } } /* ── size-thumbs · 03-04 Size Pair.dc.html ── */ /* Cycle: 8s — 1.6s at the default size, three ⌘+ presses 1.6s apart, 3.2s held at the largest, then back to the start. Both halves grow on the same cue from the same key: that is the whole argument. */ @keyframes om-size-thumbs-p2 { 0%,17.81%{opacity:0} 22.19%,100%{opacity:1} } @keyframes om-size-thumbs-p3 { 0%,38.06%{opacity:0} 42.44%,100%{opacity:1} } @keyframes om-size-thumbs-p4 { 0%,58.31%{opacity:0} 62.69%,100%{opacity:1} } @keyframes om-size-thumbs-pseam { 0%,95%{opacity:0} 100%{opacity:1} } @keyframes om-size-thumbs-press-p { 0%,15.3%{transform:scale(1)} 17%{transform:scale(1.12)} 21%{transform:scale(1)} 35.6%{transform:scale(1)} 37.2%{transform:scale(1.12)} 41%{transform:scale(1)} 55.8%{transform:scale(1)} 57.5%{transform:scale(1.12)} 61%{transform:scale(1)} 100%{transform:scale(1)} } @media (prefers-reduced-motion: reduce) { [data-om-pair] * { animation: none !important; } [data-om-pair] [data-frame]:not([data-first]) { opacity: 0 !important; } } /* ── address · 05 Path Bar.dc.html ── */ /* Cycle: 9s. Typing steps are dry (180ms) and unevenly spaced, the way real typing is; the Enter result gets a longer 300ms dissolve and 3s to land. */ @keyframes om-address-r2 { 0%,10.11%{opacity:0} 12.11%,100%{opacity:1} } @keyframes om-address-r3 { 0%,20.11%{opacity:0} 22.11%,100%{opacity:1} } @keyframes om-address-r4 { 0%,30.11%{opacity:0} 32.11%,100%{opacity:1} } @keyframes om-address-r5 { 0%,41.22%{opacity:0} 43.22%,100%{opacity:1} } @keyframes om-address-r6 { 0%,51.22%{opacity:0} 53.22%,100%{opacity:1} } @keyframes om-address-r7 { 0%,65%{opacity:0} 68.33%,100%{opacity:1} } @keyframes om-address-rseam { 0%,96.67%{opacity:0} 100%{opacity:1} } /* A soft lean towards the path bar while typing; back out for the result. */ @keyframes om-address-lean { 0%{transform:scale(1)} 12%{transform:scale(1.018)} 55%{transform:scale(1.018)} 66%{transform:scale(1)} 100%{transform:scale(1)} } /* The breadcrumbs come back changed: one brief hold on them. */ @keyframes om-address-crumbs { 0%,67%{opacity:0} 70%{opacity:1} 80%{opacity:1} 86%,100%{opacity:0} } @keyframes om-address-key-open { 0%{opacity:1} 11%{opacity:1} 15%,100%{opacity:0} } @keyframes om-address-key-enter { 0%,58%{opacity:0;transform:scale(1)} 61%{opacity:1;transform:scale(1)} 63%{transform:scale(1.14)} 66%{transform:scale(1)} 76%{opacity:1} 80%,100%{opacity:0} } @media (prefers-reduced-motion: reduce) { [data-om-path] * { animation: none !important; } [data-om-path] [data-frame]:not([data-first]) { opacity: 0 !important; } [data-om-path] [data-key="enter"], [data-om-path] [data-crumbs] { opacity: 0 !important; } } /* ── panels · 06 Copy Between Panes.dc.html ── */ /* Cycle: 10s — 1.5s on the selection, 3s on the plan (the longest hold: it is what has to be read), 1s glance at the conflict sheet, then the result for 4.5s. The whole window stays in frame: two panes, source and destination, is the argument. */ @keyframes om-panels-c2 { 0%,13.75%{opacity:0} 16.25%,100%{opacity:1} } @keyframes om-panels-c5 { 0%,53.5%{opacity:0} 56.5%,100%{opacity:1} } @keyframes om-panels-cseam { 0%,97%{opacity:0} 100%{opacity:1} } /* The conflict sheet arrives over the plan and leaves with it. */ @keyframes om-panels-sheet { 0%,43%{opacity:0;transform:translate(-50%,-56%) scale(0.985)} 46%{opacity:1;transform:translate(-50%,-50%) scale(1)} 53%{opacity:1;transform:translate(-50%,-50%) scale(1)} 56%,100%{opacity:0;transform:translate(-50%,-50%) scale(1)} } /* Brief hold on the two red rows that are about to travel. */ @keyframes om-panels-pick { 0%{opacity:0} 3%{opacity:1} 11%{opacity:1} 15%,100%{opacity:0} } /* Left to right, once, at the moment the files land. */ @keyframes om-panels-travel { 0%,55%{opacity:0;transform:scaleX(0)} 57%{opacity:1;transform:scaleX(0)} 62%{opacity:1;transform:scaleX(1)} 67%{opacity:0;transform:scaleX(1)} 100%{opacity:0;transform:scaleX(1)} } @keyframes om-panels-landed { 0%,58%{opacity:0} 61%{opacity:1} 72%{opacity:1} 77%,100%{opacity:0} } @keyframes om-panels-key-f5 { 0%{opacity:1;transform:scale(1)} 5%{transform:scale(1.13)} 9%{transform:scale(1)} 14%{opacity:1} 18%,100%{opacity:0} } @keyframes om-panels-key-read { 0%,17%{opacity:0} 20%{opacity:1} 52%{opacity:1} 56%,100%{opacity:0} } @keyframes om-panels-key-done { 0%,56%{opacity:0} 60%{opacity:1} 92%{opacity:1} 96%,100%{opacity:0} } @media (prefers-reduced-motion: reduce) { [data-om-copy] * { animation: none !important; } [data-om-copy] [data-frame]:not([data-first]) { opacity: 0 !important; } [data-om-copy] [data-overlay] { opacity: 0 !important; } } /* ── filter · 07 Filter Search.dc.html ── */ /* Cycle: 9s. Typing is dry (180ms) and local: each letter takes rows away from the folder you are already in. Enter is a different animal, so it arrives as a hard cut, not a dissolve, and then holds 4s. */ @keyframes om-filter-q2 { 0%,11.11%{opacity:0} 13.11%,100%{opacity:1} } @keyframes om-filter-q3 { 0%,21.11%{opacity:0} 23.11%,100%{opacity:1} } @keyframes om-filter-q4 { 0%,31.11%{opacity:0} 33.11%,100%{opacity:1} } @keyframes om-filter-q5 { 0%,49.9%{opacity:0} 50.2%,100%{opacity:1} } @keyframes om-filter-qseam { 0%,96.67%{opacity:0} 100%{opacity:1} } @keyframes om-filter-field { 0%{opacity:0} 1.5%{opacity:1} 9%{opacity:1} 11%,100%{opacity:0} } @keyframes om-filter-path { 0%,53%{opacity:0} 55.5%{opacity:1} 66%{opacity:1} 69%,100%{opacity:0} } @keyframes om-filter-status { 0%,56%{opacity:0} 58.5%{opacity:1} 69%{opacity:1} 72%,100%{opacity:0} } @keyframes om-filter-cap-filter { 0%{opacity:1} 38%{opacity:1} 41%,100%{opacity:0} } @keyframes om-filter-cap-enter { 0%,40%{opacity:0;transform:scale(1)} 42%{opacity:1;transform:scale(1)} 44%{transform:scale(1.13)} 47%{transform:scale(1)} 49%{opacity:1} 51%,100%{opacity:0} } @keyframes om-filter-cap-found { 0%,50%{opacity:0} 53%{opacity:1} 95%{opacity:1} 98%,100%{opacity:0} } @media (prefers-reduced-motion: reduce) { [data-om-filter] * { animation: none !important; } [data-om-filter] [data-frame]:not([data-first]) { opacity: 0 !important; } [data-om-filter] [data-overlay] { opacity: 0 !important; } [data-om-filter] [data-cap]:not([data-cap="filter"]) { opacity: 0 !important; } } /* ── branch · 08 Branch View.dc.html ── */ /* Cycle: 8s — the slowest series, because every frame has a lot to read. Pictures (2s) → one level in (1.5s) → back out, ⌃B (0.5s) → the whole subtree as one flat list, held 4s. The flat list wipes DOWNWARD over the listing only: the folder tree on the left never moves. That contrast is the idea. */ @keyframes om-branch-b2 { 0%,25%{opacity:0} 28.1%,43.75%{opacity:1} 46.9%,100%{opacity:0} } @keyframes om-branch-b3-wipe { 0%,50%{clip-path:inset(0 0 100% 0)} 57.5%,96.25%{clip-path:inset(0 0 0 0)} 100%{clip-path:inset(0 0 100% 0)} } @keyframes om-branch-b3-fade { 0%,50%{opacity:0} 50.4%{opacity:1} 96.25%{opacity:1} 99.6%,100%{opacity:0} } @keyframes om-branch-tree { 0%{opacity:0} 2.5%{opacity:1} 13%{opacity:1} 15%,100%{opacity:0} } @keyframes om-branch-status-b { 0%,58%{opacity:0} 61%{opacity:1} 74%{opacity:1} 77%,100%{opacity:0} } @keyframes om-branch-cap-map { 0%{opacity:1} 22%{opacity:1} 25%,100%{opacity:0} } @keyframes om-branch-cap-deep { 0%,25%{opacity:0} 28%{opacity:1} 41%{opacity:1} 44%,100%{opacity:0} } @keyframes om-branch-cap-key { 0%,43%{opacity:0;transform:scale(1)} 45%{opacity:1;transform:scale(1)} 47%{transform:scale(1.13)} 50%{transform:scale(1)} 54%{opacity:1} 57%,100%{opacity:0} } @keyframes om-branch-cap-flat { 0%,57%{opacity:0} 60%{opacity:1} 94%{opacity:1} 97%,100%{opacity:0} } @media (prefers-reduced-motion: reduce) { [data-om-branch] * { animation: none !important; } [data-om-branch] [data-frame]:not([data-first]) { opacity: 0 !important; } [data-om-branch] [data-overlay] { opacity: 0 !important; } [data-om-branch] [data-cap]:not([data-cap="map"]) { opacity: 0 !important; } } /* ── palette · 09 Command Palette.dc.html ── */ /* Cycle: 7s. Keyboard only, no pointer: ⌘K, then a letter every 0.9s until one command is left, held 2.5s. The window stays visible around the palette so it reads as an overlay, not another screen. */ @keyframes om-palette-k2 { 0%,24.29%{opacity:0} 26.86%,100%{opacity:1} } @keyframes om-palette-k3 { 0%,37.14%{opacity:0} 39.71%,100%{opacity:1} } @keyframes om-palette-k4 { 0%,50%{opacity:0} 52.57%,100%{opacity:1} } @keyframes om-palette-kseam { 0%,95.71%{opacity:0} 100%{opacity:1} } /* The highlighted first row is what Enter would run: one soft pulse. */ @keyframes om-palette-row { 0%,62%{opacity:0;transform:scale(1)} 65%{opacity:1;transform:scale(1)} 70%{transform:scale(1.012)} 75%{transform:scale(1)} 88%{opacity:1} 92%,100%{opacity:0} } @keyframes om-palette-cap-open { 0%{opacity:1;transform:scale(1)} 4%{transform:scale(1.13)} 8%{transform:scale(1)} 20%{opacity:1} 24%,100%{opacity:0} } @keyframes om-palette-cap-narrow { 0%,23%{opacity:0} 26%{opacity:1} 49%{opacity:1} 52%,100%{opacity:0} } @keyframes om-palette-cap-one { 0%,52%{opacity:0} 55%{opacity:1} 93%{opacity:1} 96%,100%{opacity:0} } @media (prefers-reduced-motion: reduce) { [data-om-palette] * { animation: none !important; } [data-om-palette] [data-frame]:not([data-first]) { opacity: 0 !important; } [data-om-palette] [data-overlay] { opacity: 0 !important; } [data-om-palette] [data-cap]:not([data-cap="open"]) { opacity: 0 !important; } } /* ── rename · 10 Batch Rename.dc.html ── */ /* Cycle: 10s. Starts on the window, pushes in to the sheet while the template is typed, pulls back out for the result. Two sets of frames are composited: the window underneath, the standalone sheet on top, exactly over the sheet the window already contains. The preview table answers each keystroke ~150ms late — that lag is what says "live preview". */ @keyframes om-rename-n2 { 0%,12%{opacity:0} 13.5%,100%{opacity:1} } @keyframes om-rename-n3 { 0%,24%{opacity:0} 25.5%,100%{opacity:1} } @keyframes om-rename-n4 { 0%,38%{opacity:0} 39.5%,100%{opacity:1} } @keyframes om-rename-sheet-out { 0%,58%{opacity:1} 61%,100%{opacity:0} } @keyframes om-rename-result { 0%,58%{opacity:0} 61%,100%{opacity:1} } @keyframes om-rename-window-seam { 0%,97%{opacity:0} 100%{opacity:1} } @keyframes om-rename-sheet-seam { 0%,96%{opacity:0} 98%,100%{opacity:1} } @keyframes om-rename-push { 0%,10%{transform:scale(1)} 18%{transform:scale(1.5)} 54%{transform:scale(1.5)} 60%,100%{transform:scale(1)} } /* The red step: six files would all be called the same, and the table says so before anything is touched. Then the counter puts it right. */ @keyframes om-rename-red { 0%,14%{opacity:0} 16%{opacity:1} 21%{opacity:1} 23%,100%{opacity:0} } @keyframes om-rename-black { 0%,26%{opacity:0} 28%{opacity:1} 33%{opacity:1} 35%,100%{opacity:0} } @keyframes om-rename-renamed { 0%,63%{opacity:0} 66%{opacity:1} 76%{opacity:1} 79%,100%{opacity:0} } @keyframes om-rename-cap-tpl { 0%{opacity:1} 53%{opacity:1} 56%,100%{opacity:0} } @keyframes om-rename-cap-rename { 0%,54%{opacity:0;transform:scale(1)} 56%{opacity:1;transform:scale(1)} 58%{transform:scale(1.12)} 61%{transform:scale(1)} 64%{opacity:1} 67%,100%{opacity:0} } @keyframes om-rename-cap-done { 0%,66%{opacity:0} 69%{opacity:1} 95%{opacity:1} 98%,100%{opacity:0} } @media (prefers-reduced-motion: reduce) { [data-om-rename] * { animation: none !important; } [data-om-rename] [data-frame]:not([data-first]) { opacity: 0 !important; } [data-om-rename] [data-overlay] { opacity: 0 !important; } [data-om-rename] [data-cap]:not([data-cap="tpl"]) { opacity: 0 !important; } } /* ── Gobierno de la página ───────────────────────────────────────────── Las piezas llegaron en bucle infinito. Aquí sólo se mueve lo que se mira, una vuelta, y una sola a la vez (ver el guion de index.html): todo arranca en pausa, `.play` suelta una única iteración y se queda en el estado final —que es el primer fotograma, por la costura—, y `.reset` devuelve las animaciones al tiempo cero para la próxima vez. */ .motion{display:block} .motion:not(.play) *{animation-play-state:paused !important} .motion.play *{animation-iteration-count:1 !important;animation-fill-mode:forwards !important} .motion.reset *{animation:none !important} /* La pareja lista/miniaturas va lado a lado con la tecla en medio; en un teléfono eso son dos capturas de ciento veinte píxeles. Apiladas. */ @media (max-width:700px){[data-om-pair]>div{grid-template-columns:1fr !important}}