/* ══════════════════════════════════════════════════════════════════════ ONBOARDING CLAUDE — motion: save→sidebar flight, first-task completion, celebration (spec C, 2026-09-02; C2 fix round after the craft audit). Owner: spec C implementer. Loaded from index.html after components.css. Scope under .app.onb6-claude-flow unless the rule must apply during a route transition (documented where that is the case). Choreography source = design/research/onboarding-claude-motion/motion-references.md (提案A 案A-2「先にスロット確保 → 縮小トークンの直線飛行」/ 提案B 案B-1「抑制 + 小規模紙吹雪」). Everything animates transform / opacity only (Emil Kowalski: compositor-only), every block has a prefers-reduced-motion fallback that keeps the FINAL state visible. Raw ms / px literals live ONLY in the --onbc-* definitions below; every declaration below that point uses a token or an --onbc-* variable. ══════════════════════════════════════════════════════════════════════ */ :root { /* M3 easing tokens (m3.material.io/styles/motion) */ --onbc-e-emph: cubic-bezier(0.2, 0, 0, 1); /* Emphasized */ --onbc-e-emph-dec: cubic-bezier(0.05, 0.7, 0.1, 1); /* Emphasized Decelerate */ --onbc-e-std-dec: cubic-bezier(0, 0, 0, 1); /* Standard Decelerate */ --onbc-e-std-acc: cubic-bezier(0.3, 0, 0.8, 0.15); /* Standard Accelerate */ /* C1 flight — beats: 0 slot / 0-150 morph / 150-300 modal out / 200-320 lift-off / 320-740 travel / 740-800 swap / 800-940 land pulse / 940 nav */ --onbc-t-slot: 200ms; --onbc-t-morph: 150ms; --onbc-t-modalout: 150ms; --onbc-t-swap: 60ms; --onbc-t-landpulse: 600ms; /* arrival pulse on the landed row (must stay legible through the route change that follows 200ms later) */ --onbc-t-spot: 900ms; /* /creating: 3.6s spotlight → 0.9s landing highlight */ /* C3 completion / celebration */ --onbc-t-badge: 200ms; --onbc-t-card: 240ms; --onbc-t-confetti: 1000ms; /* 700ms fall + 300ms fade */ --onbc-d-confetti: 200ms; /* single burst, fired as the card settles */ /* geometry */ --onbc-rise: 4px; /* badge / card rise-in distance */ --onbc-card-scale: 0.96; /* card enters from scale(.96), never from scale(0) */ --onbc-icon: 16px; /* inline icon size (flight token) */ --onbc-retire: 0.4; /* opacity of a source CTA that has already fired */ --onbc-cf-u: 26px; /* confetti: horizontal unit */ --onbc-cf-yu: 18px; /* confetti: vertical origin unit (card's upper band) */ --onbc-cf-fall: 44px; /* confetti: fall unit */ --onbc-cf-turn: 90deg; /* confetti: rotation unit */ --onbc-cf-step: 12ms; /* confetti: per-particle stagger */ --onbc-cf-s1: 4px; /* confetti sizes: small / mid / large */ --onbc-cf-s2: 5px; --onbc-cf-s3: 6px; --onbc-cf-s4: 7px; --onbc-cf-s5: 9px; --onbc-cf-s6: 11px; } /* shared, transform/opacity-only primitives */ @keyframes onbc-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes onbc-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes onbc-slot-open { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } } @keyframes onbc-rise-in { from { opacity: 0; transform: translateY(var(--onbc-rise)); } to { opacity: 1; transform: none; } } @keyframes onbc-card-in { from { opacity: 0; transform: scale(var(--onbc-card-scale)); } to { opacity: 1; transform: none; } } @keyframes onbc-pulse { 0% { opacity: 0; } 20% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } } /* ══════════════════════════════════════════════════════════════════════ C1 — "Save this agent" → All tasks landing (案 A-2) NOTE ON SCOPE: `.app.is-flying` / `.is-fly-dest` deliberately hang off the shell and the sidebar row, NOT off .onb6-claude-flow or #view. The flight starts on /agent-review while the destination row lives in index.html's rail, and it has to survive the route change to /creating (the router only adds .onb6-saved-claude AFTER an awaited fetch). Both classes are set by the generic [data-fly-to] handler in interactions.js, so this stays screen-agnostic. ══════════════════════════════════════════════════════════════════════ */ /* the destination slot is reserved before anything moves (A-2 step 1) */ .app.is-flying .rail__scroll .nav-item.is-fly-dest { display: block; } .nav-item.is-fly-dest { position: relative; transform-origin: top center; animation: onbc-slot-open var(--onbc-t-slot) var(--onbc-e-std-dec) both; } /* PENDING slot = a dashed drop target on the plain surface. It must NOT reuse the selected row's fill: with --surface-hover the reserved slot was byte-identical to the active row above it, so mid-flight the sidebar showed two selected-looking bars (C1 audit). */ .nav-item.is-fly-dest::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; border: 1px dashed var(--border-strong); background: none; animation: onbc-fade-in var(--onbc-t-slot) var(--onbc-e-std-dec) both; } /* LANDED = a normal row plus one --surface-hover arrival pulse (opacity only). */ .nav-item.is-fly-dest.is-landed::after { /* 統括 C2 監査: 選択行と同じ N100 では着地が見えない → semantic success の淡い面 + 1px リング */ border-color: transparent; background: var(--success-50); box-shadow: inset 0 0 0 1px var(--success-100); animation: onbc-pulse var(--onbc-t-landpulse) var(--onbc-e-emph) both; } /* row content is transparent while the token is still in flight, then crossfades in as the ghost fades out. z-index keeps it above the overlay without depending on ancestor stacking. */ .nav-item.is-fly-dest .ph, .nav-item.is-fly-dest .nav-item__t { position: relative; z-index: 1; opacity: 0; } .nav-item.is-fly-dest.is-landed .ph, .nav-item.is-fly-dest.is-landed .nav-item__t { animation: onbc-fade-in var(--onbc-t-swap) linear both; } /* the arrival must not render dimmer than its older sibling (C1 audit: #404344 vs #1C1E1E). */ .nav-item.is-fly-dest.is-landed .nav-item__t { color: var(--text-primary); } /* the flying token: a fixed-position ghost, so the modal's and the rail's separate stacking contexts never clip it. Only this node gets will-change. Fill / text / border are the DESTINATION row's, so the morph resolves into the row instead of contradicting it. */ .fly-ghost { position: fixed; z-index: 900; display: flex; align-items: center; gap: var(--space-3); height: var(--layout-navitem-h); padding: 0 var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--surface); box-shadow: var(--shadow-2); color: var(--text-secondary); font: var(--type-c2-weight) var(--type-c2-size)/1 var(--font-sans); white-space: nowrap; pointer-events: none; will-change: transform, opacity; } .fly-ghost .ph { font-size: var(--onbc-icon); color: var(--text-faint); } /* trigger morph: label out, check in — Stripe-type crossfade, no scale (research 原則) */ .btn.is-fly-done { position: relative; } .btn.is-fly-done .fly-btn__label { animation: onbc-fade-out var(--onbc-t-morph) var(--onbc-e-emph) both; } .fly-btn__check { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; } .btn.is-fly-done .fly-btn__check { animation: onbc-fade-in var(--onbc-t-morph) var(--onbc-e-emph) both; } /* retire every source CTA the moment the save fires: the pane header "Save this agent", the inline chat card "Save" and the footer "Save" all open the same modal, and leaving them live while the agent is already flying away reads as if the action can still be performed. */ .app.onb6-claude-flow [data-modal-open="modal-onb6-save"] { transition: opacity var(--onbc-t-morph) var(--onbc-e-emph); } .app.onb6-claude-flow.is-flying [data-modal-open="modal-onb6-save"] { opacity: var(--onbc-retire); pointer-events: none; } /* the confirm modal leaves with opacity only (A-2: no scale) */ .modal-overlay.is-open.is-leaving { animation: onbc-fade-out var(--onbc-t-modalout) ease-out both; pointer-events: none; } /* /creating: the row has ALREADY landed, so the 3.6s spotlight (row slide-in + typewriter + conic outline in components.css) would replay the arrival a second time. Claude keeps only the surrounding dim, shortened to 1.0s, as a landing highlight. */ .app.onb6-claude-flow.onb6-spot .rail__scroll .nav-item--onb6new-claude { animation: none; background: var(--surface-hover); } .app.onb6-claude-flow.onb6-spot .rail__scroll .nav-item--onb6new-claude::before { display: none; } .app.onb6-claude-flow.onb6-spot .rail__scroll .nav-item--onb6new-claude .nav-item__t { animation: none; max-width: none; border-right-color: transparent; color: var(--text-primary); } /* the flight classes are cleaned up a beat AFTER the route change (see interactions.js), so the landed row must not fall back to the in-flight "contents transparent" state on /creating. */ .app.onb6-claude-flow.onb6-spot .rail__scroll .nav-item--onb6new-claude .ph, .app.onb6-claude-flow.onb6-spot .rail__scroll .nav-item--onb6new-claude .nav-item__t { opacity: 1; } .app.onb6-claude-flow.onb6-spot .rail > .brand, .app.onb6-claude-flow.onb6-spot .rail > .nav:not(.rail__scroll), .app.onb6-claude-flow.onb6-spot .rail-run, .app.onb6-claude-flow.onb6-spot .promo-card, .app.onb6-claude-flow.onb6-spot .rail__scroll .nav-item:not(.nav-item--onb6new), .app.onb6-claude-flow.onb6-spot .main { animation-duration: var(--onbc-t-spot); animation-delay: 0s; } /* ══════════════════════════════════════════════════════════════════════ Agent draft pane craft floor (C1 audit P2) — contrast, elevation, no dangling rules ══════════════════════════════════════════════════════════════════════ */ /* the pane is an overlay: it must not sit at the same z as the inline chat card */ .app.onb6-claude-flow .pane-canvas--float .canvas-float { box-shadow: var(--shadow-2); } /* stat-tile labels were ~1.9:1 on --surface-subtle; the pane subtitle ~3.0:1 */ .app.onb6-claude-flow .onb6-agent-sheet__grid span { color: var(--neutral-600); } .app.onb6-claude-flow .onb6-agent-sheet p { color: var(--text-secondary); } /* "Every Monday, 09:00" must not break mid-datum at the narrower pane width */ .app.onb6-claude-flow .onb6-agent-sheet__grid strong { white-space: nowrap; } /* a rule under the LAST workflow row reads as an unfinished list */ .app.onb6-claude-flow .onb6-agent-sheet__section li:last-child { border-bottom: 0; } /* ══════════════════════════════════════════════════════════════════════ C2 — agent session: body copy at B1/16px (the 24px logo is gone from the markup) ══════════════════════════════════════════════════════════════════════ */ .app.onb6-claude-flow .onb6-session .msg-ai__text { font: var(--type-b1-weight) var(--type-b1-size)/var(--type-b1-lh) var(--font-sans); } /* the ask is its own step: --space-6 between the sentence and its button */ .app.onb6-claude-flow .onbc-taskask { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); } /* ══════════════════════════════════════════════════════════════════════ C3 — notification saved → first task complete → celebration → home (案 B-1) ══════════════════════════════════════════════════════════════════════ */ /* "First task complete" = the DS success alert, so the milestone carries an accent and a surface instead of the flat gray notice weight it had. .onb6-session .msg-ai is align-items:flex-start, so the alert has to stretch to match the paragraph measure above. */ .app.onb6-claude-flow .onb6-session .onbc-taskdone { align-self: stretch; animation: onbc-rise-in var(--onbc-t-badge) var(--onbc-e-emph-dec) both; } /* celebration stage — absolutely positioned inside the chat column so the card is centred on the conversation, and pointer-events:none so the composer underneath stays usable. */ .onbc-stage { position: relative; } .onbc-celebrate { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; /* 統括 C2 監査: 祝福カードを面の上に浮かせる 5% の scrim（white-50 over black-10 ≒ 5%）。操作は素通し */ background: linear-gradient(var(--white-50), var(--white-50)), var(--black-10); } .onbc-celebrate__card { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); width: 420px; max-width: 80%; padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-2xl); background: var(--surface); box-shadow: var(--shadow-2); text-align: center; pointer-events: auto; animation: onbc-card-in var(--onbc-t-card) var(--onbc-e-emph-dec) both; } .onbc-celebrate__h { font: var(--type-h3-weight) var(--type-h3-size)/var(--type-h3-lh) var(--font-sans); color: var(--text-primary); } .onbc-celebrate__p { margin: 0; font: var(--type-b3-weight) var(--type-b3-size)/1.6 var(--font-sans); color: var(--text-secondary); } .onbc-celebrate__p strong { color: var(--text-primary); font-weight: var(--fw-semibold); } /* the card is no longer a bare link: it carries an explicit next step and a dismiss */ .onbc-celebrate__acts { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-2); } /* confetti — 42 particles, single burst, 2 shapes × 3 sizes, brand hues only. Screens are injected with innerHTML so their