Motion

Principles

• Less is more. A single 18-second breath is better than three pulses, four spins and a fade-up.
• Transforms only. Animate transform and opacity. Avoid top, width, height — they cause layout work.
• Honour prefers-reduced-motion. Every keyframe in the system is gated by a media query.
• Hover earns motion. Idle states are still. Motion happens when you do something — hover a card, click the Oracle.

Token reference

Token	Value	Use
--nibiru-duration-fast	150ms	Inline transitions (links, hairline shifts)
--nibiru-duration-normal	220ms	Hover lifts, button transforms, card glow
--nibiru-duration-slow	400ms	Modal panels, oracle reveal
--nibiru-duration-breathe	18s	Hero lotus breathing
--nibiru-ease-out	cubic-bezier(0.2, 0.7, 0.2, 1)	Default ease-out
--nibiru-ease-spring	cubic-bezier(0.34, 1.56, 0.64, 1)	Reserved for the Oracle panel rise

The breath

A six-pixel rise, a fraction-of-a-degree rotate, over 18 seconds. The lotus is alive but not asking for attention.

@keyframes atelier-breathe {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(0.6deg); }
}
.atelier-hero__mark {
  animation: atelier-breathe 18s ease-in-out infinite;
}

The oracle rise

220ms entrance. A small translateY and scale(0.99) so it feels like it grew, not popped.

@keyframes oracle-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
#oracle-panel.is-open {
  animation: oracle-rise 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

The hover lift

Cards and the primary button rise 1–2px on hover, with a deeper shadow.

.card {
  transition: transform 240ms var(--nibiru-ease-out),
              box-shadow  240ms var(--nibiru-ease-out),
              border-color 240ms;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--nibiru-shadow-lg);
}

Reduced motion

@media (prefers-reduced-motion: reduce) {
  .atelier-hero__mark,
  .card,
  #oracle-panel.is-open {
    animation: none;
  }
}

The site still looks right with motion off — animations are decoration, never information.

Don’t

• Don’t pulse. The Oracle is a quiet ink-stamp, not a fire alarm.
• Don’t combine multiple animations on the same element. Pick one.
• Don’t animate longer than 400ms for UI feedback. User clicks should feel immediate.
• Don’t use spring/overshoot ease for the hero — only for small “thing-just-arrived” moments.