/* ================================================================ * Mira — css/atelier-motion.css * Coordinated entrance + affordance animations for the Atelier. * maintainer 2026-05-11. * * Design notes * Three speed presets via [data-atelier-anim-speed] on : * snap → 80ms base (instant feel) * normal → 180ms base (production default — Linear/Notion-ish) * calm → 320ms base (deliberate, calming) * * Reveal entrances use a single keyframe `mira-fade-up` — * opacity 0→1 with a 6px translateY easing in. We pair it with * a per-element JS-set `--mira-stagger` index so coordinated * sequences fan out without an explicit JS choreographer. * * The chevron affordance pulse is stronger per maintainer's spec — * 3 cycles, 0.8s each, opacity + slight scale (1.08). Auto * cleared when the chevron is interacted with OR after the * cycle completes. * * All of the above is suppressed when: * html[data-atelier-entrance="off"] (user toggle) * html[data-atelier-reduced-motion="on"] (OS pref) * @media (prefers-reduced-motion: reduce) (belt-and-braces) * ================================================================ */ :root { --mira-anim-base: 180ms; --mira-anim-ease: cubic-bezier(.2, .7, .2, 1); --mira-stagger-unit: 60ms; } html[data-atelier-anim-speed="snap"] { --mira-anim-base: 80ms; --mira-stagger-unit: 30ms; } html[data-atelier-anim-speed="normal"] { --mira-anim-base: 180ms; --mira-stagger-unit: 60ms; } html[data-atelier-anim-speed="calm"] { --mira-anim-base: 320ms; --mira-stagger-unit: 110ms; } /* Reveal entrance keyframe. Subtle — 6px translate, opacity. */ @keyframes mira-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* The actual entrance class is applied by swarm-entrance.js (or by * existing modules calling `MiraEntrance.apply(el, index)`). The * --mira-stagger custom property is set inline as an integer; the * delay is computed via calc(). */ .mira-entering { animation: mira-fade-up var(--mira-anim-base) var(--mira-anim-ease) both; animation-delay: calc(var(--mira-stagger, 0) * var(--mira-stagger-unit)); } /* Suppress entrance animations entirely when user has opted out * or the OS prefers reduced motion. The animation is replaced with * a no-op so the `both` fill mode still presents the element. */ html[data-atelier-entrance="off"] .mira-entering, html[data-atelier-reduced-motion="on"] .mira-entering { animation: none !important; opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { .mira-entering { animation: none !important; opacity: 1 !important; transform: none !important; } } /* ── Chevron affordance pulse ──────────────────────────── * maintainer 2026-05-11 (bolder revision): the previous 3-cycle gentle * pulse was too quiet. New default: 5 cycles, 0.9s each, opacity * 0.35 → 1.0, scale 1.0 → 1.14 → 1.0, accent-color sweep at the * peak plus a gold glow ring that ripples out from the chevron so * the eye is drawn from a peripheral glance. The chevron also * grows a 2px text-stroke shadow at the peak for additional weight. * Triggered via [data-affordance-pulse="true"] on the chevron * element; cleared on click or via JS on animationend. */ @keyframes mira-chevron-pulse { 0% { opacity: 0.35; transform: scale(1); color: var(--brown-light, #6b4d40); text-shadow: none; filter: drop-shadow(0 0 0 rgba(212, 175, 55, 0)); } 35% { opacity: 1; transform: scale(1.14); color: var(--accent, #7a3a10); text-shadow: 0 0 6px rgba(212, 175, 55, 0.55); filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.65)); } 60% { opacity: 0.85; transform: scale(1.04); color: var(--brown-dark, #3e2723); text-shadow: 0 0 3px rgba(212, 175, 55, 0.3); filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.35)); } 100% { opacity: 0.35; transform: scale(1); color: var(--brown-light, #6b4d40); text-shadow: none; filter: drop-shadow(0 0 0 rgba(212, 175, 55, 0)); } } [data-affordance-pulse="true"] { animation: mira-chevron-pulse 0.9s var(--mira-anim-ease) 5; transform-origin: center center; will-change: transform, opacity, filter; /* Ring glow uses a pseudo on a sibling — provide one via box- * shadow ripple on the element itself. Two-layer shadow gives * the chevron a halo without re-flowing layout. */ position: relative; z-index: 2; } html[data-atelier-chevron-pulse="off"] [data-affordance-pulse="true"], html[data-atelier-reduced-motion="on"] [data-affordance-pulse="true"] { animation: none !important; } @media (prefers-reduced-motion: reduce) { [data-affordance-pulse="true"] { animation: none !important; } } /* ── Subtle "clickable" hint for collapsible reveal-block summaries. * maintainer 2026-05-11: he wants discoverability — every collapsible * piece should LOOK clickable. We already have hover state; this * adds a faint chevron-shadow on the closed state so the caret * reads as a button-affordance, not a static icon. */ .swarm-reveal-block:not([open]) .swarm-reveal-summary::before { text-shadow: 0 1px 0 rgba(74, 55, 40, 0.10); transition: text-shadow 0.18s ease, transform 0.18s ease; } .swarm-reveal-block:not([open]) .swarm-reveal-summary:hover::before { text-shadow: 0 1px 2px rgba(74, 55, 40, 0.20); transform: translateX(1px) rotate(8deg); } /* Dashboard chevron also gets the hover-hint on collapsed state. */ .swarm-dashboard.collapsed .swarm-dashboard-toggle { transition: transform 0.18s ease, color 0.18s ease; } .swarm-dashboard.collapsed .swarm-dashboard-header:hover .swarm-dashboard-toggle { color: var(--brown-dark, #3e2723); transform: rotate(-90deg) translateX(-1px); } /* ── Reveal-block flash when content arrives on a closed summary. * Subtle gold-rule sweep so the user notices that something new * landed inside even without expanding. Used by the entrance * choreographer on the closed-state reveal blocks at run start. */ @keyframes mira-summary-arrived { 0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); } 40% { box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18); } 100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); } } .mira-summary-arrived { animation: mira-summary-arrived 1.6s ease-out 1; } html[data-atelier-entrance="off"] .mira-summary-arrived, html[data-atelier-reduced-motion="on"] .mira-summary-arrived { animation: none !important; } @media (prefers-reduced-motion: reduce) { .mira-summary-arrived { animation: none !important; } }