/* Three explanatory kinetic scenes. Original type and palette, no external assets. */
.motion-controls { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:28px; }
.motion-toggle { flex-shrink:0; border:1px solid var(--color-line); border-radius:99px; background:transparent; color:var(--color-navy); padding:10px 18px; font-size:.85rem; }
.motion-toggle[hidden] { display:none; }.motion-toggle:disabled { opacity:.7; cursor:default; }
.motion-offers { margin-top:48px; }
.motion-offer { display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,84px); align-items:center; }
.motion-offer + .motion-offer { margin-top:88px; }
.motion-offer--reverse .motion-scene { order:2; }
.motion-copy h3 { font-size:clamp(1.7rem,3vw,2.5rem); font-weight:600; letter-spacing:-.02em; line-height:1.02; margin:16px 0 22px; }
.motion-copy .bullets { margin:24px 0; }
.motion-scene { position:relative; min-width:0; width:100%; min-height:440px; aspect-ratio:1.15; border-radius:24px; overflow:hidden; background:var(--color-navy); color:var(--color-cream); container-type:inline-size; isolation:isolate; font-family:var(--font-body); line-height:1.4; }
.motion-scene *, .motion-scene *::before, .motion-scene *::after { box-sizing:border-box; }
.motion-topline { position:absolute; inset:7% 7% auto; display:flex; justify-content:space-between; gap:16px; align-items:center; font-size:clamp(10px,2.5cqw,13px); color:var(--color-cream-72); }
.motion-index { color:var(--color-coral); font-size:1.2em; }
.motion-label { display:block; font-size:clamp(9px,2.3cqw,12px); letter-spacing:.06em; text-transform:uppercase; opacity:.7; }
.motion-caption { position:absolute; inset:auto 7% 6%; display:flex; align-items:center; gap:10px; font-size:clamp(11px,2.7cqw,14px); line-height:1.4; min-height:2.8em; }
.motion-dot { width:6px; height:6px; flex-shrink:0; border-radius:50%; background:var(--color-coral); }
.motion-scene strong { font-weight:600; }.motion-scene small { display:block; font-size:.8em; margin-top:3px; }
.lead-track { position:absolute; top:20%; left:9%; right:9%; display:flex; justify-content:space-between; font-size:clamp(10px,2.4cqw,12px); letter-spacing:.08em; }
.lead-rail { position:absolute; top:28%; left:10%; right:10%; height:1px; background:var(--color-line-cream); }
.lead-rail i { display:block; height:3px; width:0; margin-top:-1px; background:var(--color-coral); transition:width 1s cubic-bezier(.22,1,.36,1); }
.lead-ticket { position:absolute; top:35%; left:18%; width:64%; background:var(--color-cream); color:var(--color-navy); border-radius:3px 14px 14px 14px; padding:6%; box-shadow:0 20px 30px #0003; transform:translateX(-90%) rotate(-9deg); opacity:0; transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .5s; }
.lead-ticket strong { display:block; font-size:clamp(15px,4.1cqw,22px); margin:8px 0 16px; }
.ticket-fold { position:absolute; top:0; right:0; border-top:18px solid var(--color-navy); border-left:18px solid var(--color-panel); }
.ticket-field { display:flex; justify-content:space-between; border-top:1px solid var(--color-line); padding:6px 0; font-size:clamp(11px,2.7cqw,14px); }
.ticket-field b { color:var(--color-coral-ink); font-weight:500; opacity:0; transform:translateY(5px); transition:opacity .6s,transform .6s; }
.ticket-owner { display:block; margin-top:10px; font-size:clamp(10px,2.6cqw,14px); opacity:0; transition:opacity .5s; }
.lead-approval { display:flex; align-items:center; gap:12px; position:absolute; left:23%; right:7%; bottom:18%; background:var(--color-coral); color:var(--color-navy); padding:4%; border-radius:12px; font-size:clamp(12px,3.2cqw,17px); transform:translateY(35px) rotate(4deg); opacity:0; transition:opacity .6s,transform .8s cubic-bezier(.22,1,.36,1); }
.approval-mark { font-size:1.6em; }
.motion-lead[data-phase="0"] .lead-ticket { transform:translateX(-8%) rotate(-5deg); opacity:1; }
.motion-lead:not([data-phase="0"]) .lead-ticket { transform:translateX(0) rotate(0); opacity:1; }
.motion-lead:not([data-phase="0"]) .lead-rail i { width:50%; }
.motion-lead:not([data-phase="0"]) .ticket-field b { opacity:1; transform:translateY(0); }
.motion-lead[data-phase="2"] .ticket-owner,.motion-lead[data-phase="3"] .ticket-owner { opacity:1; }
.motion-lead[data-phase="3"] .lead-rail i { width:100%; }
.motion-lead[data-phase="3"] .lead-ticket { transform:translateY(-12%) rotate(-3deg); }
.motion-lead[data-phase="3"] .lead-approval { opacity:1; transform:none; }
/* Paper collation: three different inputs feed one physical report. */
.motion-report { background:var(--color-cream); color:var(--color-navy); border:1px solid var(--color-line); }
.motion-report .motion-topline { color:var(--color-ink-72); }.motion-report .motion-index { color:var(--color-coral-ink); }
.report-input { position:absolute; top:23%; width:27%; padding:4% 3%; background:var(--color-panel); border:1px solid var(--color-line); border-radius:5px; font-size:clamp(12px,3cqw,16px); font-weight:600; transition:transform .9s cubic-bezier(.22,1,.36,1),opacity .6s; }
.report-input span { display:block; font-size:.8em; font-weight:400; margin-top:10px; padding-top:8px; border-top:1px solid var(--color-line); }
.input-mail { left:6%; transform:rotate(-9deg); }.input-table { left:36.5%; transform:translateY(-10%) rotate(3deg); }.input-doc { right:6%; transform:rotate(10deg); }
.report-slot { position:absolute; top:49%; left:9%; right:9%; border-top:3px solid var(--color-navy); text-align:center; padding-top:12px; font-size:clamp(10px,2.5cqw,13px); }
.report-slot::before { content:''; position:absolute; left:0; right:0; top:-12px; height:20px; background:var(--color-navy); opacity:.06; border-radius:50%; }
.report-sheet { position:absolute; top:27%; left:18%; right:18%; padding:6%; background:var(--color-navy); color:var(--color-cream); border-radius:4px; transform:translateY(45%) scaleY(.25); transform-origin:top; opacity:0; transition:transform 1s cubic-bezier(.22,1,.36,1),opacity .4s; box-shadow:8px 8px 0 var(--color-coral); }
.report-sheet strong { display:block; margin:10px 0 14px; font-size:clamp(14px,3.7cqw,20px); }
.report-line { display:flex; align-items:center; gap:12px; margin-top:8px; font-size:clamp(11px,2.8cqw,15px); }
.report-line i { height:1px; flex:1; background:var(--color-line-cream); }.report-line b { font-weight:400; color:var(--color-coral); opacity:0; transition:opacity .6s; }
.report-stamp { display:block; border-top:1px solid var(--color-line-cream); padding-top:10px; margin-top:14px; font-size:clamp(9px,2.5cqw,13px); color:var(--color-coral); opacity:0; transition:opacity .6s; }
.motion-report[data-phase="1"] .report-input { transform:translateY(85%) rotate(0) scale(.9); }
.motion-report[data-phase="2"] .report-input,.motion-report[data-phase="3"] .report-input { transform:translateY(155%) scale(.8); opacity:0; }
.motion-report[data-phase="2"] .report-slot,.motion-report[data-phase="3"] .report-slot { opacity:.15; }
.motion-report[data-phase="2"] .report-sheet,.motion-report[data-phase="3"] .report-sheet { transform:none; opacity:1; }
.motion-report[data-phase="3"] .report-line b,.motion-report[data-phase="3"] .report-stamp { opacity:1; }
/* Conversation with a source trail and an explicit human handoff. */
.chat-question,.chat-special { position:absolute; right:7%; max-width:78%; padding:4%; border:1px solid var(--color-line-cream); border-radius:14px 14px 3px 14px; font-size:clamp(12px,3.1cqw,16px); }
.chat-question { top:21%; }.chat-special { top:55%; padding:3%; opacity:0; transform:translateY(15px); transition:transform .6s,opacity .6s; }
.chat-source { position:absolute; top:38%; left:10%; display:flex; gap:12px; align-items:center; font-size:clamp(10px,2.7cqw,14px); color:var(--color-coral); opacity:0; transition:opacity .6s; }.chat-source i { font-style:normal; }
.chat-answer { position:absolute; top:47%; left:7%; max-width:80%; padding:3%; background:var(--color-cream); color:var(--color-navy); border-radius:14px 14px 14px 3px; font-size:clamp(12px,3.1cqw,16px); opacity:0; transform:translateY(20px); transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .6s; }
.chat-answer .motion-label { margin-bottom:7px; }.chat-link { display:block; color:var(--color-coral-ink); margin-top:8px; font-weight:600; }
.chat-handoff { position:absolute; left:7%; right:7%; top:68%; display:flex; align-items:center; gap:12px; background:var(--color-coral); color:var(--color-navy); padding:3%; border-radius:12px; font-size:clamp(12px,3cqw,16px); opacity:0; transform:translateX(-25px); transition:transform .7s,opacity .6s; }
.handoff-avatar { font-size:1.8em; }
.motion-chat:not([data-phase="0"]) .chat-source { opacity:1; }
.motion-chat[data-phase="2"] .chat-answer { opacity:1; transform:none; }
.motion-chat[data-phase="3"] .chat-question { opacity:0; }
.motion-chat[data-phase="3"] .chat-source { opacity:0; }
.motion-chat[data-phase="3"] .chat-answer { opacity:1; transform:translateY(-65%) scale(.93); transform-origin:left; }
.motion-chat[data-phase="3"] .chat-special { opacity:1; transform:none; }
.motion-chat[data-phase="3"] .chat-handoff { opacity:1; transform:none; }
@media(max-width:860px) { .motion-offer { grid-template-columns:1fr; gap:30px; }.motion-offer--reverse .motion-scene { order:0; }.motion-scene { max-width:540px; margin-inline:auto; }.motion-offer + .motion-offer { margin-top:64px; }.motion-controls { align-items:flex-start; flex-direction:column; gap:14px; } }
@media(prefers-reduced-motion:reduce) { .motion-scene *, .motion-scene *::before { transition:none!important; animation:none!important; } }