/* Motion for Noyau and the public website (Emil Kowalski skills, .claude/skills/emil-kowalski/PROJECT.md).
   Transform and opacity only, short ease-out curves from tokens.css, nothing that hides or delays content or focus.
   Loaded last so it can retune the transitions declared in app.css, website.css and directory.css. */
@keyframes noyau-rise { from { opacity: 0; transform: translateY(-4px); } }
@keyframes noyau-fade { from { opacity: 0; } }

/* Press feedback and hover colour, everywhere buttons are used. */
.button, .site-button, .text-button { transition: transform 120ms var(--ease-out), background-color 150ms ease, color 150ms ease; }
.button:active, .site-button:active { transform: scale(.97); }

/* Saved/updated notices settle in once, after the page loads. */
.portal-main > .notice, .auth-form > .notice { animation: noyau-rise 200ms var(--ease-out); }

/* Things that appear inside a form: unsaved indicator and the SuperAdmin review step. */
.dirty-indicator, [data-privileged-confirm] { transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); }
@starting-style { .dirty-indicator, [data-privileged-confirm] { opacity: 0; transform: scale(.96); } }

/* Disclosures (Change the web address, search text, recovery codes, FAQ, archives): contents fade down into place. */
details[open] > :not(summary) { animation: noyau-rise 160ms var(--ease-out); }
.faq-list summary span { transition: transform 200ms var(--ease-out); }

/* Public website menu on phones. */
.has-site-js .site-navigation.is-open { animation: noyau-rise 180ms var(--ease-out); }

/* Hover lifts only where a real pointer hovers; working lists in Noyau change colour only. */
.service-card { transition: transform 200ms var(--ease-out), border-color 200ms var(--ease-out); }
.project-window { transition: transform 250ms var(--ease-out); }
.directory-card { transition: border-color 150ms var(--ease-out); }
.directory-card:hover { transform: none; }
@media (hover: none), (pointer: coarse) {
  .service-card:hover, .project-card:hover .project-window { transform: none; }
}

/* Noyau phone drawer slides in from the left (opening only; closing stays instant so focus returns at once).
   portal-navigation.js adds .navigation-ready after the first paint so the page never animates on load. */
@media (max-width: 760px) {
  .navigation-ready.portal-navigation[open] > nav { transition: transform 280ms var(--ease-drawer); }
  @starting-style { .navigation-ready.portal-navigation[open] > nav { transform: translateX(-100%); } }
}

/* Reduced motion: no movement anywhere; fades are kept or become instant. */
@media (prefers-reduced-motion: reduce) {
  .portal-main > .notice, .auth-form > .notice, details[open] > :not(summary), .has-site-js .site-navigation.is-open { animation-name: noyau-fade; }
  .button:active, .site-button:active, .service-card:hover, .project-card:hover .project-window { transform: none; }
  .dirty-indicator, [data-privileged-confirm] { transition: opacity 150ms ease; }
  @starting-style { .dirty-indicator, [data-privileged-confirm] { transform: none; } }
  .navigation-ready.portal-navigation[open] > nav, .faq-list summary span, .navigation-chevron { transition: none; }
}

/* Welcome tour: the card rises in once and each step fades in; reduced motion keeps only the fade. */
.welcome-tour[open] { animation: noyau-rise 220ms var(--ease-out); }
.welcome-tour[open]::backdrop { animation: noyau-fade 220ms ease; }
.welcome-tour-step:not([hidden]) { animation: noyau-fade 180ms var(--ease-out); }
@media (prefers-reduced-motion: reduce) {
  .welcome-tour[open] { animation-name: noyau-fade; }
  .welcome-tour-dots span { transition: none; }
}