/* Shared motion, press feedback, and type polish. Loaded last so it can refine every earlier sheet. */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --press-scale: 0.97;
}

/* Press feedback: anything pressable acknowledges the tap immediately and settles back smoothly. */
button:not(:disabled), .button, summary, [role="button"], a.rail-action, .person-item, .ew-file {
  transition: transform 160ms var(--ease-out), background-color 170ms var(--ease-out), color 170ms var(--ease-out),
    border-color 170ms var(--ease-out), box-shadow 170ms var(--ease-out), opacity 170ms var(--ease-out);
}
button:not(:disabled):active, .button:active, summary:active, [role="button"]:active,
a.rail-action:active, .person-item:active, .ew-file:active {
  transform: scale(var(--press-scale));
}

/* First reading reveal: JS sets html[data-reveal] for ~1s after a user's first import or example open. */
@keyframes emvona-reveal { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
html[data-reveal] .ec-moment, html[data-reveal] .ec-context-card, html[data-reveal] .ec-follow {
  animation: emvona-reveal 360ms var(--ease-out) both;
}
html[data-reveal] .ec-context-card:nth-child(1) { animation-delay: 60ms; }
html[data-reveal] .ec-context-card:nth-child(2) { animation-delay: 120ms; }
html[data-reveal] .ec-follow { animation-delay: 180ms; }

/* Reading a large export: an indeterminate bar under the status line. */
#import-form[aria-busy="true"] #chosen-file { position: relative; display: inline-block; padding-bottom: 8px; }
#import-form[aria-busy="true"] #chosen-file::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%; border-radius: 2px; background: currentColor;
  opacity: 0.55; animation: emvona-progress 1.1s var(--ease-in-out) infinite alternate;
}
@keyframes emvona-progress { from { transform: translateX(0); } to { transform: translateX(150%); } }

/* Copy confirmation: the label swap blurs briefly so two states read as one change. */
[data-action="copy-draft"].is-copied { filter: blur(0); animation: emvona-copied 260ms var(--ease-out); }
@keyframes emvona-copied { 0% { filter: blur(2px); opacity: 0.6; } 100% { filter: blur(0); opacity: 1; } }

/* Type polish. */
h1, h2, h3 { text-wrap: balance; }
time, small, [class*="date"], [class*="count"] { font-variant-numeric: tabular-nums; }

/* Reduced motion: no movement or looping; short fades still carry meaning. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  html[data-reveal] .ec-moment, html[data-reveal] .ec-context-card, html[data-reveal] .ec-follow { animation: none; }
}