/* website-design: motion tokens and the one reveal vocabulary a business site needs.
   Source: references/motion-patterns.md (Kowalski, Vercel, Linear, Material 3, caniuse Aug 2026).
   0 KB of libraries. Pair with assets/reveal.js. Nothing above the fold gets .reveal. */

:root {
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);     /* entering / exiting */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* moving / morphing */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);     /* sheets and drawers */
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);      /* Linear / Vercel fade-up */
  --dur-press:   140ms;   /* button press, toggles */
  --dur-menu:    200ms;   /* dropdowns, menus, tooltips */
  --dur-drawer:  350ms;   /* drawers, modals */
  --dur-reveal:  450ms;   /* section entrance, business sites (luxury: 700-900ms) */
  --reveal-y:    16px;    /* 12-24px; more reads bouncy */
  --stagger:     60ms;    /* 40-60ms sweet spot */
}

/* Entrance: opacity + small rise, once, below the fold only */
.reveal { opacity: 0; transform: translateY(var(--reveal-y));
  transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-group > * { transition-delay: calc(var(--i, 0) * var(--stagger)); }

/* Progressive enhancement: let the browser drive it where supported (87% of users, Aug 2026) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { transition: none; animation: wd-rise linear both;
              animation-timeline: view(); animation-range: entry 10% entry 40%; }
    .reveal.is-in { animation: none; opacity: 1; transform: none; }
  }
}
@keyframes wd-rise { from { opacity: 0; transform: translateY(var(--reveal-y)); } to { opacity: 1; transform: none; } }

/* Hover and press: the whole hover vocabulary for a professional site */
.btn { transition: transform var(--dur-press) var(--ease-out), background var(--dur-press) ease, box-shadow var(--dur-press) ease; }
.btn:active { transform: scale(0.97); }
.card-lift { transition: transform var(--dur-menu) var(--ease-out), box-shadow var(--dur-menu) ease; }
.card-lift:hover { transform: translateY(-2px); }
.link-draw { text-decoration: none; background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur-menu) var(--ease-out); }
.link-draw:hover, .link-draw:focus-visible { background-size: 100% 1px; }
.img-zoom { overflow: hidden; } .img-zoom img { transition: transform 600ms var(--ease-out); }
.img-zoom:hover img { transform: scale(1.03); }

/* Accordion height without JS measuring (grid-rows trick; interpolate-size where supported) */
.acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-drawer) var(--ease-out); }
.acc-panel > * { overflow: hidden; min-height: 0; }
.acc-panel.is-open { grid-template-rows: 1fr; }

/* Focus ring that looks deliberate */
:focus-visible { outline: 2px solid var(--accent, #1F46E6); outline-offset: 2px; border-radius: 4px; }

/* Reduced motion: keep feedback, drop decoration */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: opacity 150ms ease; animation: none; }
  .btn:active, .card-lift:hover, .img-zoom:hover img { transform: none; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}