/* Feature-card demos: three small looping stories drawn in Motif's own UI (lp-demos.js drives data-step).
   Each stage is designed at 520×340 and scaled to its card by --s; it is centred, so a narrow card crops the edges. */

.feature-media { container-type: normal; }
.dm {
  --ez: cubic-bezier(.22, .8, .24, 1);
  --ink: #e7ecf4; --dim: #8592a8; --faint: #5d6a80; --panel: #161d2b; --line: #ffffff14;
  position: absolute; left: 50%; top: 50%; width: 520px; height: 340px;
  transform: translate(-50%, -50%) scale(var(--s, .8)); transform-origin: 50% 50%;
  font-size: 12px; line-height: 1.4; color: var(--ink); letter-spacing: 0;
  transition: opacity .3s ease;
}
.dm * { box-sizing: border-box; }
.dm.dm-out { opacity: 0; }
.dm.dm-hard, .dm.dm-hard * { transition: none !important; }

/* shared bits */
.d-composer { position: absolute; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px -18px #000c; }
.d-typed { white-space: pre; }
.d-caret { display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; vertical-align: -2px; background: #8fb3ff; opacity: 0; }
.dm[data-typing] .d-caret { opacity: 1; animation: d-blink 1s steps(1) infinite; }
@keyframes d-blink { 50% { opacity: 0; } }
.d-spin { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #ffffff2a; border-top-color: #cfd8e6; animation: d-spin .9s linear infinite; flex: none; }
@keyframes d-spin { to { transform: rotate(360deg); } }
.d-check { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #3fb984; flex: none; }
.d-check::after { content: ""; width: 6px; height: 3.5px; border: solid #0b1410; border-width: 0 0 1.6px 1.6px; transform: translateY(-1px) rotate(-45deg); }
.d-cursor {
  position: absolute; left: 0; top: 0; width: 18px; height: 22px; z-index: 5; opacity: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 22'%3E%3Cpath d='M2 1.5v16.2l4.3-4.1 2.9 6.6 2.9-1.3-2.9-6.4h6.1z' fill='%23fff' stroke='%23111' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
  filter: drop-shadow(0 2px 4px #0008);
  transform: translate(var(--cx, 470px), var(--cy, 320px));
  transition: transform 1s cubic-bezier(.45, .05, .25, 1), opacity .4s ease;
}
.dm[data-click] .d-cursor { scale: .86; transition: transform 1s cubic-bezier(.45, .05, .25, 1), opacity .4s ease, scale .12s ease; }

/* ---------- 1. スタイルを覚える ---------- */
.d1-ref {
  position: absolute; left: 92px; top: 8px; width: 336px; height: 94px; padding: 7px; display: flex; gap: 12px; align-items: center;
  background: #1a2232; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 20px 40px -20px #000d;
  opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .7s var(--ez), transform .7s var(--ez), filter .5s ease;
}
.d1-thumb { position: relative; width: 142px; height: 80px; flex: none; border-radius: 8px; background: url("assets/th-cafe.jpg") 50% 18% / cover; }
.d1-thumb time { position: absolute; right: 5px; bottom: 5px; padding: 1px 4px; border-radius: 3px; background: #000b; font-size: 9px; color: #fff; }
.d1-play { position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px; border-radius: 50%; background: #000a; backdrop-filter: blur(4px); }
.d1-play::after { content: ""; position: absolute; left: 10px; top: 8px; border: 5px solid transparent; border-left: 8px solid #fff; border-right: 0; }
.d1-meta { display: grid; gap: 6px; min-width: 0; }
.d1-meta b { font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.d1-meta span { font-size: 10.5px; color: var(--dim); }
.d1-composer { left: 40px; top: 120px; width: 440px; height: 104px; padding: 13px 14px; }
.d-input { min-height: 44px; font-size: 13px; color: var(--ink); line-height: 22px; }
.d1-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px 0 3px; margin-right: 6px; vertical-align: top;
  border-radius: 6px; background: #ffb54a1f; color: #ffd08a; font-size: 11.5px;
  opacity: 0; transform: scale(.85); transition: opacity .45s var(--ez), transform .55s var(--ez);
}
.d1-chip i { width: 26px; height: 16px; border-radius: 3px; background: url("assets/th-cafe.jpg") 50% 18% / cover; }
.d-bar { position: absolute; left: 14px; right: 12px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.d-model { font-size: 10.5px; color: var(--faint); }
.d-send { position: relative; width: 26px; height: 26px; border-radius: 50%; background: #ffffff1a; transition: background-color .35s ease, transform .2s ease; }
.d-send::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -2px 0 0 -3.5px; border: solid #0d121c; border-width: 1.6px 0 0 1.6px; transform: rotate(45deg); opacity: .5; }
.d1-status { position: absolute; left: 52px; top: 240px; width: 420px; height: 90px; }
.d1-row { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 9px; font-size: 12.5px; opacity: 0; transform: translateY(6px); transition: opacity .55s var(--ez), transform .55s var(--ez); }
.d1-working { color: var(--dim); }
.d1-bar { width: 120px; height: 3px; margin-left: 6px; border-radius: 2px; background: #ffffff14; overflow: hidden; }
.d1-bar i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #4f8cff, #ff9a5a); transform: scaleX(0); transform-origin: left; transition: transform 1.7s cubic-bezier(.4, 0, .3, 1); }
.d1-tags { position: absolute; left: 0; top: 30px; display: flex; gap: 6px; }
.d1-tags span { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: #ffffff0a; font-size: 11px; color: #cdd6e3; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ez), transform .6s var(--ez); }
.d1-tags span:nth-child(2) { transition-delay: .1s; } .d1-tags span:nth-child(3) { transition-delay: .2s; }

.dm-style[data-step="0"] .d-cursor { --cx: 470px; --cy: 330px; }
.dm-style:not([data-step="0"]) .d1-ref { opacity: 1; transform: none; }
.dm-style[data-step="2"] .d-cursor, .dm-style[data-step="3"] .d-cursor { --cx: 168px; --cy: 50px; opacity: 1; }
.dm-style[data-step="3"] .d1-ref { transform: scale(.98); }
.dm-style:is([data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"]) .d1-chip { opacity: 1; transform: none; }
.dm-style:is([data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"]) .d1-ref { filter: saturate(.6) brightness(.7); }
.dm-style[data-step="4"] .d-cursor { --cx: 452px; --cy: 204px; opacity: 1; }
.dm-style[data-step="5"] .d-cursor { --cx: 452px; --cy: 204px; opacity: 1; }
.dm-style:is([data-step="4"], [data-step="5"]) .d-send { background: #fff; }
.dm-style:is([data-step="4"], [data-step="5"]) .d-send::after { opacity: 1; }
.dm-style[data-step="5"] .d-send { transform: scale(.9); }
.dm-style:is([data-step="6"], [data-step="7"]) .d-cursor { --cx: 500px; --cy: 330px; opacity: 0; }
.dm-style[data-step="6"] .d1-working { opacity: 1; transform: none; }
.dm-style[data-step="6"] .d1-bar i { transform: scaleX(1); }
.dm-style[data-step="7"] .d1-done, .dm-style[data-step="7"] .d1-tags span { opacity: 1; transform: none; }

/* ---------- 2. 最初の一本を、すぐに ---------- */
.dm-cut { background: #0e131d; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 50px -24px #000e; overflow: hidden; }
.d2-head { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.d2-tc { font: 500 12px/1 ui-monospace, "SF Mono", Menlo, monospace; color: #cfd8e6; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.d2-fmt { font-size: 10.5px; color: var(--faint); }
.d2-pill { position: relative; height: 24px; min-width: 150px; }
.d2-pill > span { position: absolute; left: 50%; top: 0; display: flex; align-items: center; gap: 7px; height: 24px; padding: 0 11px; white-space: nowrap; border-radius: 999px; background: #ffffff0d; border: 1px solid var(--line); font-size: 11px; color: #cdd6e3; opacity: 0; transform: translate(-50%, 4px); transition: opacity .5s var(--ez), transform .5s var(--ez); }
.d2-ruler { position: relative; height: 22px; margin-left: 96px; margin-right: 12px; border-bottom: 1px solid var(--line);
  background: repeating-linear-gradient(90deg, #ffffff22 0 1px, transparent 1px 10.3px) 0 100% / 100% 5px no-repeat; }
.d2-ruler span { position: absolute; top: 4px; font-size: 9.5px; color: var(--faint); transform: translateX(3px); }
.d2-rows { position: relative; padding: 8px 12px 0 0; }
.d2-row { display: flex; height: 32px; margin-bottom: 6px; }
.d2-row.tall { height: 58px; }
.d2-row label { display: flex; align-items: center; gap: 7px; width: 96px; padding-left: 14px; font-size: 10.5px; color: var(--dim); flex: none; }
.d2-row label i { width: 9px; height: 9px; border-radius: 2px; }
.ic-t { background: #9b7cf4; } .ic-g { background: #34b6c9; } .ic-v { background: #4f8cff; } .ic-a { background: #3fb984; }
.d2-lane { position: relative; flex: 1; border-radius: 6px; background: #ffffff05; }
.d2-lane > i {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap;
  border-radius: 6px; font-style: normal; font-size: 10.5px; color: #fff;
  opacity: 0; transform: translateX(14px); transition: opacity .55s var(--ez), transform .7s var(--ez); transition-delay: calc(var(--i, 0) * .14s);
}
.k-cap { background: #7457d6; border: 1px solid #a48cf7; }
.k-gfx { background: #1f8a9b; border: 1px solid #4fc7d8; }
.k-vid { align-items: flex-start !important; padding: 5px 7px !important; background: #1d3866 repeat-x 0 0 / auto 100%; border: 1px solid #5d8fe4; }
.k-vid::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0009, transparent 55%); }
.k-vid em { position: relative; font-style: normal; font-size: 9.5px; }
.v1 { background-image: url("assets/th-cafe.jpg"); background-position: 0 18%; background-size: 52px auto; }
.v2 { background-image: url("assets/seg-owner.jpg"); background-size: auto 100%; }
.v3 { background-image: url("assets/hero-poster.jpg"); background-size: auto 100%; }
.k-bgm { align-items: flex-start !important; padding: 3px 8px !important; background: #1d5e45; border: 1px solid #4fc995; }
.k-bgm::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 16px; opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16' preserveAspectRatio='none'%3E%3Cpath d='M0 8h120' stroke='%2393f0c6' stroke-width='.6'/%3E%3Cg fill='%2393f0c6'%3E%3Crect x='1' y='5' width='1.4' height='6'/%3E%3Crect x='4' y='3' width='1.4' height='10'/%3E%3Crect x='7' y='6' width='1.4' height='4'/%3E%3Crect x='10' y='2' width='1.4' height='12'/%3E%3Crect x='13' y='4' width='1.4' height='8'/%3E%3Crect x='16' y='6' width='1.4' height='4'/%3E%3Crect x='19' y='3' width='1.4' height='10'/%3E%3Crect x='22' y='1' width='1.4' height='14'/%3E%3Crect x='25' y='5' width='1.4' height='6'/%3E%3Crect x='28' y='3' width='1.4' height='10'/%3E%3Crect x='31' y='6' width='1.4' height='4'/%3E%3Crect x='34' y='4' width='1.4' height='8'/%3E%3Crect x='37' y='2' width='1.4' height='12'/%3E%3Crect x='40' y='5' width='1.4' height='6'/%3E%3Crect x='43' y='3' width='1.4' height='10'/%3E%3Crect x='46' y='6' width='1.4' height='4'/%3E%3Crect x='49' y='2' width='1.4' height='12'/%3E%3Crect x='52' y='4' width='1.4' height='8'/%3E%3Crect x='55' y='1' width='1.4' height='14'/%3E%3Crect x='58' y='5' width='1.4' height='6'/%3E%3C/g%3E%3C/svg%3E") repeat-x 0 0 / 120px 16px; }
.k-bgm em { position: relative; font-style: normal; font-size: 9.5px; }
.d2-lane > .k-bgm { transform: none; clip-path: inset(0 100% 0 0 round 6px); transition: opacity .3s ease, clip-path 1.1s cubic-bezier(.5, 0, .2, 1); }
.d2-playhead { position: absolute; top: -30px; bottom: -40px; left: 96px; width: 1.5px; background: #ff9a5a; opacity: 0; z-index: 2;
  transform: translateX(var(--px, 0px)); transition: opacity .4s ease; }
.d2-playhead::before { content: ""; position: absolute; top: 0; left: -5px; border: 5.5px solid transparent; border-top: 7px solid #ff9a5a; border-bottom: 0; }

.dm-cut:is([data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"]) .d2-p1 { opacity: 1; transform: translate(-50%, 0); }
.dm-cut:is([data-step="6"], [data-step="7"]) .d2-p2 { opacity: 1; transform: translate(-50%, 0); }
.dm-cut:not([data-step="0"]):not([data-step="1"]) .k-vid,
.dm-cut:is([data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"]) .k-cap,
.dm-cut:is([data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"]) .k-gfx { opacity: 1; transform: none; }
.dm-cut:is([data-step="5"], [data-step="6"], [data-step="7"]) .k-bgm { opacity: 1; clip-path: inset(0 0 0 0 round 6px); }
.dm-cut[data-step="7"] .d2-playhead { opacity: 1; }

/* ---------- 3. 話しかけて直す ---------- */
.d3-frame { position: absolute; left: 50px; top: 4px; width: 420px; height: 236px; border-radius: 12px; overflow: hidden; background: #111; box-shadow: 0 24px 50px -24px #000e; }
.d3-photo { position: absolute; inset: 0; background: url("assets/th-office.jpg") 50% 20% / cover; transition: transform 1.2s var(--ez); }
.d3-cap {
  position: absolute; left: 50%; bottom: 20px; white-space: nowrap; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: .02em;
  paint-order: stroke; -webkit-text-stroke: 3px #000; text-shadow: 0 2px 8px #0008;
  transform: translateX(-50%); transform-origin: 50% 100%; transition: transform .9s var(--ez), font-size .9s var(--ez);
}
.d3-cap em { font-style: normal; transition: color .6s ease; }
.d3-ring { position: absolute; left: 50%; bottom: 3px; width: 260px; height: 64px; margin-left: -130px; overflow: visible; }
.d3-ring ellipse { fill: none; stroke: #ff9a5a; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .9s cubic-bezier(.5, 0, .3, 1), opacity .5s ease; }
.d3-pin { position: absolute; left: 368px; bottom: 54px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #ff9a5a; color: #1a0f08; font-size: 11px; font-weight: 700;
  opacity: 0; transform: scale(.6); transition: opacity .4s ease, transform .5s var(--ez); }
.d3-glow { position: absolute; inset: 0; border-radius: 12px; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  box-shadow: inset 0 0 0 1.5px #ffffff30, inset 0 0 40px #4f8cff55; }
.d3-glow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, #ffffff1c 50%, transparent 65%) -100% 0 / 200% 100% no-repeat; }
.d3-input { left: 50px; top: 256px; width: 420px; height: 50px; display: flex; align-items: center; gap: 9px; padding: 0 8px 0 10px; font-size: 13px; }
.d3-time { padding: 3px 7px; border-radius: 6px; background: #ff9a5a22; color: #ffbe8f; font-size: 11px; font-variant-numeric: tabular-nums; flex: none; }
.d3-input .d-typed { overflow: hidden; }
.d3-btn { position: relative; margin-left: auto; width: 96px; height: 32px; flex: none; }
.d3-btn b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 999px; font-size: 11.5px; font-weight: 600; transition: opacity .4s ease, transform .2s ease, background-color .3s ease, color .3s ease; }
.d3-btn .b1 { background: #ffffff14; color: var(--dim); }
.d3-btn .b2, .d3-btn .b3 { background: #ffffff10; color: #cdd6e3; opacity: 0; }

.dm-revise[data-step="0"] .d-cursor { --cx: 480px; --cy: 220px; }
.dm-revise[data-step="1"] .d-cursor { --cx: 140px; --cy: 196px; opacity: 1; }
.dm-revise[data-step="2"] .d-cursor { --cx: 372px; --cy: 220px; opacity: 1; transition-duration: .9s; }
.dm-revise:not([data-step="0"]):not([data-step="1"]) .d3-ring ellipse { stroke-dashoffset: 0; }
.dm-revise:is([data-step="3"], [data-step="4"], [data-step="5"]) .d3-pin { opacity: 1; transform: none; }
.dm-revise[data-step="3"] .d-cursor { --cx: 372px; --cy: 220px; opacity: 1; }
.dm-revise[data-step="4"] .d-cursor, .dm-revise[data-step="5"] .d-cursor { --cx: 430px; --cy: 285px; opacity: 1; }
.dm-revise:is([data-step="4"], [data-step="5"], [data-step="6"]) .d3-btn .b1 { background: #fff; color: #0d121c; }
.dm-revise[data-step="5"] .d3-btn .b1 { opacity: 0; transform: scale(.94); }
.dm-revise[data-step="5"] .d3-btn .b2 { opacity: 1; }
.dm-revise[data-step="5"] .d3-glow { opacity: 1; }
.dm-revise[data-step="5"] .d3-glow::after { animation: d-sweep 1.3s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes d-sweep { to { background-position: 200% 0; } }
.dm-revise[data-step="6"] .d-cursor { --cx: 500px; --cy: 330px; opacity: 0; }
.dm-revise[data-step="6"] .d3-btn .b1 { opacity: 0; }
.dm-revise[data-step="6"] .d3-btn .b3 { opacity: 1; }
.dm-revise[data-step="6"] .d3-cap { transform: translateX(-50%) scale(1.55); }
.dm-revise[data-step="6"] .d3-cap em { color: #ffd84d; }
.dm-revise[data-step="6"] .d3-photo { transform: scale(1.04); }
.dm-revise[data-step="6"] .d3-ring ellipse { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .dm, .dm * { transition: none !important; animation: none !important; }
}

/* the timeline panel is shorter than the stage; taller rows so it has no empty floor */
.dm-cut { top: 50%; height: 288px; }
.d2-row { height: 34px; margin-bottom: 7px; }
.d2-row.tall { height: 66px; }

/* ---------- 1 (v2). スタイルを覚える: icon → chat → video → prompt → analysis → rewind ---------- */
.dm-style2 { --io: cubic-bezier(.65, 0, .35, 1); --out: cubic-bezier(.16, 1, .3, 1); }
.s1-icons { position: absolute; left: 0; right: 0; top: 34px; height: 76px; }
.s1-ic { position: absolute; top: 8px; width: 60px; height: 60px; margin-left: -30px;
  transition: transform .9s var(--io), opacity .6s var(--io); }
.s1-ic i { display: block; width: 100%; height: 100%; border-radius: 16px; box-shadow: 0 14px 30px -10px #000c, inset 0 0 0 1px #ffffff14; animation: s1-bob 4.8s ease-in-out infinite; }
.s1-ic svg { display: block; width: 100%; height: 100%; }
.s1-yt { left: 176px; } .s1-yt i { background: #fff; animation-delay: -1.2s; }
.s1-ig { left: 260px; top: 0; } .s1-ig i { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 92%); }
.s1-tt { left: 344px; } .s1-tt i { background: #0b0b0d; animation-delay: -2.6s; }
@keyframes s1-bob { 50% { transform: translateY(-5px); } }

.s1-video { position: absolute; left: 106px; top: 12px; width: 308px; height: 102px; padding: 6px; display: flex; gap: 12px; align-items: center;
  background: #1c2230; border: 1px solid #ffffff17; border-radius: 14px; box-shadow: 0 24px 44px -22px #000e;
  opacity: 0; transform: translateY(16px) scale(.92); transform-origin: 50% 100%; transition: opacity .55s var(--io), transform .8s var(--out); }
.s1-thumb { position: relative; width: 160px; height: 90px; flex: none; border-radius: 9px; overflow: hidden; background: #000; }
.s1-thumb b { position: absolute; inset: 0; background: 50% 22% / cover no-repeat; opacity: 0; animation: s1-frames 3.6s infinite; }
.s1-thumb b:nth-child(2) { animation-delay: 1.2s; } .s1-thumb b:nth-child(3) { animation-delay: 2.4s; }
@keyframes s1-frames { 0%, 30% { opacity: 1; } 36%, 94% { opacity: 0; } 100% { opacity: 1; } }
.s1-thumb time { position: absolute; right: 5px; bottom: 6px; padding: 1px 4px; border-radius: 3px; background: #000b; font-size: 9px; color: #fff; }
.s1-prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #ff0033; transform: scaleX(.08); transform-origin: left; transition: transform 6s linear; }
.s1-meta { display: grid; gap: 6px; min-width: 0; }
.s1-meta strong { font-size: 12.5px; font-weight: 600; line-height: 1.45; color: #eef2f8; }
.s1-meta span { font-size: 10px; color: #7f8aa0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.s1-composer { position: absolute; left: 40px; top: 128px; width: 440px; height: 128px; padding: 15px 16px;
  background: #1a1d24; border: 1px solid #ffffff14; border-radius: 16px; box-shadow: 0 24px 50px -24px #000e;
  transition: border-color .6s ease, box-shadow .6s ease; }
.s1-text { position: relative; height: 22px; font-size: 13.5px; line-height: 22px; color: #f1f3f7; white-space: nowrap; }
.s1-ph { position: absolute; left: 0; top: 0; color: #6b7385; transition: opacity .35s ease; }
.s1-link { height: 22px; margin-top: 4px; font-size: 13px; line-height: 22px; }
.s1-link span { display: inline-block; padding: 0 3px; border-radius: 3px; background: #2b4a7e; color: #dbe7ff;
  opacity: 0; transform: translateY(6px) scale(.96); transform-origin: left center; transition: opacity .45s var(--io), transform .7s var(--out); }
.s1-bar { position: absolute; left: 14px; right: 12px; bottom: 11px; display: flex; align-items: center; gap: 12px; color: #7d8597; }
.s1-model { display: flex; align-items: center; gap: 7px; font-size: 11.5px; margin-right: auto; }
.s1-model svg { width: 14px; height: 14px; } .s1-model .s1-chev { width: 12px; height: 12px; margin-left: -2px; }
.s1-mic svg { display: block; width: 15px; height: 15px; }
.s1-send { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ffffff1f; color: #ffffff80;
  transition: background-color .35s ease, color .35s ease, transform .2s var(--io); }
.s1-send svg { width: 15px; height: 15px; }

.s1-status { position: absolute; left: 54px; top: 272px; width: 420px; height: 64px; }
.s1-think, .s1-done { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 9px; height: 20px; font-size: 12.5px;
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--io), transform .6s var(--out); }
.s1-think { color: #9aa4b8; }
.s1-done { color: #eef2f8; }
.s1-roll { position: relative; display: block; width: 260px; height: 20px; overflow: hidden; }
.s1-roll em { position: absolute; left: 0; top: 0; font-style: normal; line-height: 20px; white-space: nowrap; opacity: 0; transform: translateY(100%);
  transition: transform .55s var(--io), opacity .45s var(--io);
  background: linear-gradient(90deg, #9aa4b8 0%, #9aa4b8 40%, #e9eef7 50%, #9aa4b8 60%, #9aa4b8 100%) 0 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: s1-shimmer 1.8s linear infinite; }
@keyframes s1-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.s1-tags { position: absolute; left: 0; top: 30px; display: flex; gap: 6px; }
.s1-tags span { padding: 5px 11px; border-radius: 999px; border: 1px solid #ffffff17; background: #ffffff0a; font-size: 11px; color: #d3dae6;
  opacity: 0; transform: translateY(8px); transition: opacity .5s var(--io), transform .65s var(--out); }
.s1-tags span:nth-child(2) { transition-delay: .09s; } .s1-tags span:nth-child(3) { transition-delay: .18s; }

/* 1: Instagram is pulled into the chat, shrinking as it goes; the other two step back */
.dm-style2:not([data-step="0"]):not([data-step="8"]) .s1-ig { transform: translateY(132px) scale(.1); opacity: 0; transition: transform 1s cubic-bezier(.55, 0, .25, 1), opacity .35s .62s ease-in; }
.dm-style2:not([data-step="0"]):not([data-step="8"]) :is(.s1-yt, .s1-tt) { transform: scale(.82); opacity: 0; transition: transform .7s .35s var(--io), opacity .5s .35s var(--io); }
.dm-style2[data-step="8"] .s1-ig { transition: transform 1s .25s var(--out), opacity .4s .25s ease-out; }
.dm-style2[data-step="8"] .s1-yt { transition: transform .8s .45s var(--out), opacity .5s .45s ease-out; }
.dm-style2[data-step="8"] .s1-tt { transition: transform .8s .55s var(--out), opacity .5s .55s ease-out; }
/* 2: the chat takes it in */
.dm-style2[data-step="2"] .s1-composer { border-color: #6f9cff66; box-shadow: 0 0 0 4px #4f8cff1f, 0 24px 50px -24px #000e; }
.dm-style2:is([data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"]) .s1-link span { opacity: 1; transform: none; }
.dm-style2:not([data-step="0"]):not([data-step="1"]):not([data-step="8"]) .s1-ph { opacity: 0; }
/* 3: the video appears above the chat */
.dm-style2:is([data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"]) .s1-video { opacity: 1; transform: none; }
.dm-style2:is([data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"], [data-step="7"]) .s1-prog { transform: scaleX(.85); }
.dm-style2[data-step="8"] .s1-video { transform: translateY(10px) scale(.9); transition: opacity .45s var(--io), transform .6s var(--io); }
/* 5: send */
.dm-style2[data-step="5"] .s1-send { background: #fff; color: #10131a; transform: scale(.9); }
.dm-style2[data-step="4"][data-typed] .s1-send { background: #fff; color: #10131a; }
/* 6: thinking, three lines rolling through; 7: done */
.dm-style2[data-step="6"] .s1-think { opacity: 1; transform: none; }
.dm-style2[data-sub="0"] .s1-roll em:nth-child(1), .dm-style2[data-sub="1"] .s1-roll em:nth-child(2), .dm-style2[data-sub="2"] .s1-roll em:nth-child(3) { opacity: 1; transform: none; }
.dm-style2[data-sub="1"] .s1-roll em:nth-child(1), .dm-style2[data-sub="2"] .s1-roll em:nth-child(-n+2) { opacity: 0; transform: translateY(-100%); }
.dm-style2[data-step="7"] .s1-done, .dm-style2[data-step="7"] .s1-tags span { opacity: 1; transform: none; }
/* 8: everything leaves the way it came */
.dm-style2[data-step="8"] .d-typed { opacity: 0; transition: opacity .4s ease; }
.dm-style2 .d-typed { transition: opacity .3s ease; }
/* the outgoing thinking line fades fast, the next one comes in a beat later, so the two never sit on top of each other */
.s1-roll em { transition: transform .6s var(--io), opacity .22s ease-in; }
.dm-style2[data-sub="0"] .s1-roll em:nth-child(1), .dm-style2[data-sub="1"] .s1-roll em:nth-child(2), .dm-style2[data-sub="2"] .s1-roll em:nth-child(3) { transition: transform .6s .12s var(--out), opacity .4s .18s ease-out; }
/* Instagram passes in front of the chat on its way in (and out) */
.s1-icons { z-index: 3; }

/* ---- card 1: a little more life (anticipation, soft overshoot, small impacts) ---- */
.dm-style2 { --spring: cubic-bezier(.34, 1.32, .64, 1); }
/* Instagram lifts a touch before it dives into the chat */
.dm-style2[data-step="1"] .s1-ig { animation: s1-dive 1.05s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes s1-dive {
  0% { transform: none; opacity: 1; }
  22% { transform: translateY(-12px) scale(1.08); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, .7, .2); }
  80% { opacity: 1; }
  100% { transform: translateY(132px) scale(.1); opacity: 0; }
}
/* the other two drift apart as they leave, and spring back on the rewind */
.dm-style2:not([data-step="0"]):not([data-step="8"]) .s1-yt { transform: translateX(-18px) scale(.82); }
.dm-style2:not([data-step="0"]):not([data-step="8"]) .s1-tt { transform: translateX(18px) scale(.82); }
.dm-style2[data-step="8"] .s1-ig { transition: transform .95s .25s var(--spring), opacity .35s .25s ease-out; }
.dm-style2[data-step="8"] .s1-yt { transition: transform .85s .42s var(--spring), opacity .45s .42s ease-out; }
.dm-style2[data-step="8"] .s1-tt { transition: transform .85s .52s var(--spring), opacity .45s .52s ease-out; }
/* the chat gives a small bump when it takes the icon in */
.dm-style2[data-step="2"] .s1-composer { animation: s1-bump .55s cubic-bezier(.3, 0, .3, 1) both; }
@keyframes s1-bump { 40% { transform: scale(1.018); } 100% { transform: none; } }
/* link and video pop with a soft overshoot */
.s1-link span { transform: translateY(8px) scale(.9); transition: opacity .4s var(--io), transform .7s var(--spring); }
.s1-video { transform: translateY(24px) scale(.86); transition: opacity .5s var(--io), transform .85s var(--spring); }
/* send: press and a ring */
.s1-send { position: relative; }
.s1-send::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid #fff; opacity: 0; }
.dm-style2[data-step="5"] .s1-send::after { animation: s1-ring .6s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes s1-ring { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.9); } }
/* done: the check pops */
.dm-style2[data-step="7"] .s1-done .d-check { animation: s1-pop .6s var(--spring) both; }
@keyframes s1-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
.dm-style2[data-step="7"] .s1-done { transition: opacity .4s ease-out, transform .6s var(--spring); }
@media (prefers-reduced-motion: reduce) { .dm-style2 * { animation: none !important; } }
/* Instagram shrinks early: a third of its size halfway down, tiny when it lands */
.dm-style2[data-step="1"] .s1-ig { animation: s1-dive2 .95s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes s1-dive2 {
  0% { transform: none; opacity: 1; }
  20% { transform: translateY(-12px) scale(1.08); opacity: 1; animation-timing-function: cubic-bezier(.5, 0, .6, .4); }
  55% { transform: translateY(60px) scale(.34); opacity: 1; animation-timing-function: cubic-bezier(.3, .4, .5, 1); }
  85% { opacity: 1; }
  100% { transform: translateY(132px) scale(.1); opacity: 0; }
}
/* Instagram: original pace; the dive itself is a pure ease-in (slow start, speeds up as it shrinks into the chat) */
.dm-style2[data-step="1"] .s1-ig { animation: s1-dive3 1.1s linear both; }
@keyframes s1-dive3 {
  0% { transform: none; opacity: 1; animation-timing-function: cubic-bezier(.3, 0, .4, 1); }
  20% { transform: translateY(-10px) scale(1.06); opacity: 1; animation-timing-function: cubic-bezier(.55, 0, .9, .4); }
  88% { opacity: 1; }
  100% { transform: translateY(132px) scale(.1); opacity: 0; }
}

/* ---------- 2 (v2). タイムラインに組み上がる: build with soft springs, playhead pass, animated rewind ---------- */
.dm-cut { --io: cubic-bezier(.65, 0, .35, 1); --out: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.3, .64, 1); background: #12151c; }
.d2-row label { position: relative; width: 112px; padding-right: 8px; }
.d2-ruler { margin-left: 112px; }
.d2-playhead { left: 112px; }
.d2-tools { display: flex; gap: 5px; margin-left: auto; color: #5d6578; }
.d2-tools svg { width: 11px; height: 11px; }
.d2-lane { background: #ffffff06; }
.d2-lane > i { transform-origin: 0 50%; opacity: 0; transform: translateY(-10px) scale(.94);
  transition: opacity .45s var(--io) calc(var(--i, 0) * .13s), transform .85s var(--spring) calc(var(--i, 0) * .13s), filter .35s ease, box-shadow .35s ease; }
.d2-lane > i.on { filter: brightness(1.22); box-shadow: 0 0 0 1px #ffffff55, 0 6px 16px -6px #000c; }
.k-cap::before { content: "T"; margin-right: 6px; font: 600 9px/1 -apple-system, sans-serif; opacity: .75; }
.d2-pill .d-check { transform: scale(0); }
.dm-cut:is([data-step="6"], [data-step="7"]) .d2-p2 .d-check { animation: s1-pop .6s .1s var(--spring) both; }
.d2-pill > span { transition: opacity .45s var(--io), transform .7s var(--spring); transform: translate(-50%, 6px) scale(.94); }
.dm-cut:is([data-step="1"], [data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"]) .d2-p1,
.dm-cut:is([data-step="6"], [data-step="7"]) .d2-p2 { transform: translate(-50%, 0); }
.d2-lane > .k-bgm { transform: none; transition: opacity .3s ease, clip-path 1.2s var(--io); }
.dm-cut[data-step="8"] .d2-playhead { opacity: 1; }
/* rewind: clips leave in reverse order, a quick ease-in; BGM wipes away to the right */
.dm-cut[data-step="8"] .d2-lane > i:is(.k-vid, .k-cap, .k-gfx) { opacity: 0; transform: translateY(6px) scale(.97);
  transition: opacity .4s ease-in calc((2 - var(--i, 0)) * .08s + .5s), transform .5s cubic-bezier(.5, 0, .75, 0) calc((2 - var(--i, 0)) * .08s + .5s); }
.dm-cut[data-step="8"] .d2-lane > .k-bgm { opacity: 1; clip-path: inset(0 0 0 100% round 6px); transition: clip-path .8s cubic-bezier(.6, 0, .4, 1) .35s; }
@media (prefers-reduced-motion: reduce) { .dm-cut * { animation: none !important; } }
.d2-row label { width: 130px; white-space: nowrap; }
.d2-ruler { margin-left: 130px; }
.d2-playhead { left: 130px; }

/* one story across all three cards: the same cafe video, different moments of it */
.s1-thumb b { background-image: url("assets/th-cafe.jpg"); }
.s1-thumb .f1 { background-position: 50% 18%; background-size: cover; }
.s1-thumb .f2 { background-position: 50% 8%; background-size: 260% auto; }
.s1-thumb .f3 { background-position: 50% 42%; background-size: 160% auto; }
.v2 { background-image: url("assets/th-cafe.jpg"); background-position: 0 6%; background-size: 90px auto; }
.v3 { background-image: url("assets/th-cafe.jpg"); background-position: 0 40%; background-size: 64px auto; }

/* ---------- 3 (v2). 囲って、頼むだけ: drag a box → Motif's ask popup → fix → animated rewind ---------- */
.dm-revise2 { --io: cubic-bezier(.65, 0, .35, 1); --out: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.3, .64, 1); --cyan: #5cc8d0; }
.r3-frame { position: absolute; left: 20px; top: 14px; width: 480px; height: 270px; border-radius: 12px; overflow: hidden; background: #111; box-shadow: 0 24px 50px -24px #000e; }
.r3-photo { position: absolute; inset: 0; background: url("assets/th-cafe.jpg") 50% 16% / cover; transition: transform 1.2s var(--io); }
.r3-cap { position: absolute; left: 50%; bottom: 30px; white-space: nowrap; font-size: 15px; font-weight: 700; color: #fff; letter-spacing: .02em;
  paint-order: stroke; -webkit-text-stroke: 3px #000; text-shadow: 0 2px 8px #0008;
  transform: translateX(-50%); transform-origin: 50% 100%; transition: transform .9s var(--io); }
.r3-cap em { font-style: normal; transition: color .6s var(--io); }
.r3-box { position: absolute; left: 110px; top: 196px; width: 260px; height: 60px; border: 1.5px dashed var(--cyan); background: #5cc8d012;
  clip-path: inset(0 100% 100% 0); opacity: 0; transition: clip-path .95s var(--io), opacity .3s ease; }
.r3-toast { position: absolute; right: 12px; top: 12px; display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px;
  background: #16191fe6; border: 1px solid #ffffff17; font-size: 11.5px; color: #eef2f8; opacity: 0; transform: translateY(-6px) scale(.94);
  transition: opacity .45s var(--io), transform .7s var(--spring); }
.r3-glow { position: absolute; inset: 0; border-radius: 12px; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  box-shadow: inset 0 0 0 1.5px #5cc8d066, inset 0 0 44px #5cc8d040; }
.r3-glow::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, #ffffff1f 50%, transparent 65%) -100% 0 / 200% 100% no-repeat; }

.r3-pop { position: absolute; left: 42px; top: 34px; width: 300px; padding: 13px 14px 14px; border-radius: 14px; background: #25272d; border: 1px solid #ffffff12;
  box-shadow: 0 24px 50px -16px #000e; opacity: 0; transform: translateY(10px) scale(.94); transform-origin: 30% 100%;
  transition: opacity .4s var(--io), transform .75s var(--spring); }
.r3-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.r3-head b { font-size: 12.5px; font-weight: 700; color: #f1f3f6; }
.r3-head i { position: relative; width: 10px; height: 10px; }
.r3-head i::before, .r3-head i::after { content: ""; position: absolute; left: 4px; top: -1px; width: 1.6px; height: 12px; border-radius: 1px; background: #a3a8b3; transform: rotate(45deg); }
.r3-head i::after { transform: rotate(-45deg); }
.r3-area { position: relative; height: 58px; padding: 8px 10px; border-radius: 10px; background: #0a0b0d; border: 1.5px solid var(--cyan); font-size: 12px; line-height: 19px; color: #eef1f5; }
.r3-ph { position: absolute; left: 10px; top: 8px; color: #626874; transition: opacity .3s ease; }
.r3-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.r3-send { position: relative; width: 66px; height: 30px; }
.r3-send b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; font-size: 12px; font-weight: 600;
  transition: opacity .35s ease, background-color .35s ease, color .35s ease, transform .2s var(--io); }
.r3-send .b1 { background: #2d5d63; color: #ffffff70; }
.r3-send .b2 { background: #2d5d63; color: #e6fbfd; opacity: 0; }
.r3-send .b2 .d-spin { width: 10px; height: 10px; }

/* 1: cursor arrives; 2: drags the box open around the caption */
.dm-revise2[data-step="0"] .d-cursor { --cx: 470px; --cy: 300px; }
.dm-revise2[data-step="1"] .d-cursor { --cx: 130px; --cy: 210px; opacity: 1; }
.dm-revise2[data-step="2"] .d-cursor { --cx: 390px; --cy: 270px; opacity: 1; transition: transform .95s var(--io), opacity .4s ease; }
.dm-revise2:is([data-step="2"], [data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"]) .r3-box { opacity: 1; clip-path: inset(0 0 0 0); }
/* 3: the ask popup; 4: typing */
.dm-revise2:is([data-step="3"], [data-step="4"], [data-step="5"], [data-step="6"]) .r3-pop { opacity: 1; transform: none; }
.dm-revise2:is([data-step="3"], [data-step="4"]) .d-cursor { --cx: 390px; --cy: 270px; opacity: 1; }
.dm-revise2[data-typed] .r3-ph { opacity: 0; }
.dm-revise2[data-typed] .r3-send .b1 { background: var(--cyan); color: #06292c; }
/* 5: to 送信; 6: sent */
.dm-revise2:is([data-step="5"], [data-step="6"]) .d-cursor { --cx: 312px; --cy: 166px; opacity: 1; }
.dm-revise2[data-step="6"] .r3-send .b1 { opacity: 0; transform: scale(.94); }
.dm-revise2[data-step="6"] .r3-send .b2 { opacity: 1; }
.dm-revise2[data-step="6"] .r3-glow { opacity: 1; }
.dm-revise2[data-step="6"] .r3-glow::after { animation: d-sweep 1.3s cubic-bezier(.45, 0, .55, 1) infinite; }
/* 7: popup and box go, the caption grows */
.dm-revise2[data-step="7"] .r3-pop { transition: opacity .35s ease-in, transform .45s cubic-bezier(.5, 0, .75, 0); transform: translateY(6px) scale(.96); }
.dm-revise2[data-step="7"] .r3-box { transition: opacity .35s ease-in; }
.dm-revise2:is([data-step="7"], [data-step="8"]) .d-cursor { --cx: 500px; --cy: 320px; opacity: 0; }
.dm-revise2[data-step="7"] .r3-cap { transform: translateX(-50%) scale(1.5); transition: transform .9s .25s var(--spring); }
.dm-revise2[data-step="7"] .r3-cap em { color: #ffd84d; transition-delay: .3s; }
.dm-revise2[data-step="7"] .r3-photo { transform: scale(1.035); }
.dm-revise2[data-step="7"] .r3-toast { opacity: 1; transform: none; transition-delay: .6s; }
/* 8: rewind — caption settles back, toast leaves */
.dm-revise2[data-step="8"] .r3-cap { transition: transform .9s var(--io); }
@media (prefers-reduced-motion: reduce) { .dm-revise2 * { animation: none !important; } }
/* thumbnails: one steady wide shot, no zoomed crops cycling */
.s1-thumb b { animation: none; opacity: 0; background-size: cover; background-position: 50% 18%; }
.s1-thumb .f1 { opacity: 1; }
.v2, .v3 { background-position: 0 18%; background-size: 52px auto; }

/* real stock footage (Pexels) — the same cafe clips the hero video edits */
.s1-thumb b { background-image: url("assets/stk-latte.jpg") !important; background-position: 50% 50% !important; background-size: cover !important; }
.v1 { background-image: url("assets/stk-tamp.jpg"); background-position: 0 0; background-size: auto 100%; }
.v2 { background-image: url("assets/stk-grind.jpg"); background-position: 0 0; background-size: auto 100%; }
.v3 { background-image: url("assets/stk-pour.jpg"); background-position: 0 0; background-size: auto 100%; }
.r3-photo { background: url("assets/stk-baristas.jpg") 50% 40% / cover; }

/* ---------- 3 (v3). the payoff: a scan line sweeps the frame and the plain caption becomes a designed telop ---------- */
.r3-photo { animation: r3-drift 14s ease-in-out infinite alternate; }
@keyframes r3-drift { from { scale: 1; translate: 0 0; } to { scale: 1.07; translate: -8px -4px; } }
.r3-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, #0000008c 100%); opacity: 0; transition: opacity .8s var(--io); }
.r3-new { position: absolute; left: 0; right: 0; bottom: 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.r3-kick { padding: 3px 10px 4px; border-radius: 999px; background: #fff; color: #10141b; font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  opacity: 0; transform: translateY(6px); clip-path: inset(0 100% 0 0 round 999px);
  transition: opacity .3s ease, transform .5s var(--out), clip-path .55s var(--io); }
.r3-big { display: flex; font-size: 25px; line-height: 1.25; font-weight: 800; letter-spacing: .03em; color: #fff; text-shadow: 0 2px 14px #000a, 0 1px 2px #0009; white-space: nowrap; }
.r3-big i { display: inline-block; font-style: normal; opacity: 0; transform: translateY(12px) scale(.9); filter: blur(5px);
  transition: opacity .35s ease, transform .6s var(--spring), filter .45s ease; }
.r3-big em { position: relative; display: flex; margin: 0 3px; padding: 0 5px; font-style: normal; }
.r3-big em::before { content: ""; position: absolute; inset: 3px 0 2px; border-radius: 4px; background: #ffd84d; z-index: -1;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .55s var(--io); }
.r3-big em { isolation: isolate; }
.r3-big em i { transition: opacity .35s ease, transform .6s var(--spring), filter .45s ease, color .3s ease, text-shadow .3s ease; }
.r3-scan { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: #c9fbff; box-shadow: 0 0 12px 2px #5cc8d0, 0 0 40px 8px #5cc8d066;
  opacity: 0; transform: translateX(-20px); }
.r3-scan::before { content: ""; position: absolute; top: 0; bottom: 0; right: 2px; width: 90px; background: linear-gradient(90deg, transparent, #5cc8d02e); }

/* 7: the sweep. Old caption leaves as the line passes the middle; each character arrives as the line reaches it. */
.dm-revise2[data-step="7"] .r3-cap { transform: translateX(-50%); opacity: 0; transition: opacity .25s .55s ease; }
.dm-revise2[data-step="7"] .r3-cap em { color: #fff; }
.dm-revise2[data-step="7"] .r3-scan { animation: r3-sweep 1.1s .15s cubic-bezier(.55, .05, .45, .95) both; }
@keyframes r3-sweep { 0% { opacity: 0; transform: translateX(-20px); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateX(500px); } }
.dm-revise2[data-step="7"] .r3-shade { opacity: 1; transition-delay: .3s; }
.dm-revise2[data-step="7"] .r3-big i { opacity: 1; transform: none; filter: none; transition-delay: calc(.42s + var(--i) * .05s); }
.dm-revise2[data-step="7"] .r3-big em::before { transform: none; transition-delay: 1.15s; }
.dm-revise2[data-step="7"] .r3-big em i { color: #1b1504; text-shadow: none; transition-delay: calc(.42s + var(--i) * .05s), calc(.42s + var(--i) * .05s), calc(.42s + var(--i) * .05s), 1.3s, 1.3s; }
.dm-revise2[data-step="7"] .r3-kick { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 999px); transition-delay: 1.25s; }
.dm-revise2[data-step="7"] .r3-photo { transform: scale(1.04); }
.dm-revise2[data-step="7"] .r3-toast { transition-delay: 1.5s; }
/* 8: rewind — the telop folds away right to left, the plain caption comes back */
.dm-revise2[data-step="8"] .r3-big i { transition: opacity .3s ease, transform .4s var(--io), filter .3s ease; transition-delay: calc((11 - var(--i)) * .025s); transform: translateY(8px); }
.dm-revise2[data-step="8"] .r3-kick { transition: opacity .25s ease, transform .3s var(--io), clip-path .35s var(--io); }
.dm-revise2[data-step="8"] .r3-cap { opacity: 1; transition: opacity .5s .45s ease; }
@media (prefers-reduced-motion: reduce) { .r3-photo { animation: none; } }