/* Polish from the Steer site (2026-11-03, after seanfloyd.dev and third-cut), in one sheet so any
   of it can come out alone. Motion is transform and opacity on a curve with no overshoot, and all
   of it sits behind prefers-reduced-motion: no-preference. */
:root { --settle: cubic-bezier(.2, .8, .2, 1); }

/* A cross-fade between pages; the dock holds still. Only the new dock is drawn:
   two full-opacity snapshots would double its glass. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
nav.dock { view-transition-name: dock; }
::view-transition-group(dock), ::view-transition-new(dock) { animation: none; }
::view-transition-old(dock) { display: none; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

/* Buttons answer a press; the primary lifts on an accent-tinted shadow that fades in as a layer,
   not an animated box-shadow. */
.btn.primary, .dock .btn { position: relative; isolation: isolate; }
.btn.primary::after, .dock .btn::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px;
  box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent); opacity: 0; pointer-events: none; }
.btn.primary:hover::after, .dock .btn:hover::after { opacity: 1; }
.dock .btn:hover { box-shadow: none; transform: none; }
.btn:active { transform: scale(.96); }

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform .3s var(--settle), background .15s, border-color .15s, opacity .15s, filter .15s; }
  .btn:active { transition-duration: .08s; }
  .btn.primary::after, .dock .btn::after { transition: opacity .25s var(--settle); }

  /* Sections rise in on a scroll timeline. linear is the timeline's own mapping, not an ease. */
  @supports (animation-timeline: view()) {
    @keyframes rise { from { opacity: 0; translate: 0 28px; } }
    main > section { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  }

  /* An arrow link's arrow steps forward on hover: the one hover cue that promises what the click does. */
  .arrow-link .arrow { display: inline-block; transition: transform .25s var(--settle); }
  .arrow-link:hover .arrow { transform: translateX(3px); }
}
@media print { main > section { animation: none; } }