/* Motion is an enhancement: content is fully visible without this script. */
:root {
  --motion-fast:150ms;
  --motion-reveal:420ms;
  --motion-enter:520ms;
  --motion-ease:cubic-bezier(.2,0,0,1);
}
.motion-image {
  overflow:hidden;
  line-height:0;
  outline:1px solid rgb(255 255 255 / .1);
  outline-offset:-1px;
}
.alder-page .motion-image { outline-color:rgb(0 0 0 / .1); }
@media(prefers-reduced-motion:no-preference) {
  .pill:not([data-motion="static"]),
  .filter-button:not([data-motion="static"]),
  .navlinks a:not([data-motion="static"]),
  .text-link:not([data-motion="static"]) {
    transition:scale var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease);
  }
  .pill:not([data-motion="static"]):active,
  .filter-button:not([data-motion="static"]):active,
  .navlinks a:not([data-motion="static"]):active,
  .text-link:not([data-motion="static"]):active {
    transform:none;
    scale:.96;
  }
  .pill[data-motion="static"]:active { transform:none; }
  .project-action { transition:translate var(--motion-fast) var(--motion-ease); }
  .projects>a:active .project-action { translate:2px 0; }
  .service-option {
    transition:background-color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease);
  }
  .story-toggle {
    transition:background-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease);
  }
  .story-toggle .icon {
    grid-area:1 / 1;
    transition:opacity var(--motion-fast) var(--motion-ease),scale var(--motion-fast) var(--motion-ease),filter var(--motion-fast) var(--motion-ease);
  }
  .story-toggle .icon-open,
  .story-toggle .icon-close,
  .journal-story[open] .story-toggle .icon-open,
  .journal-story[open] .story-toggle .icon-close { display:inline-block; }
  .story-toggle .icon-open,
  .journal-story[open] .story-toggle .icon-close { opacity:1; scale:1; filter:blur(0); }
  .story-toggle .icon-close,
  .journal-story[open] .story-toggle .icon-open { opacity:0; scale:.25; filter:blur(4px); }
  [dir="rtl"] .projects>a:active .project-action { translate:-2px 0; }
}
@media(prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine) {
  .navlinks a {
    position:relative;
    text-decoration:none;
  }
  .navlinks a::after {
    content:"";
    position:absolute;
    inset-inline:0;
    inset-block-end:.4rem;
    height:1px;
    background:currentColor;
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform var(--motion-fast) var(--motion-ease);
    pointer-events:none;
  }
  .navlinks a:hover { text-decoration:none; }
  .navlinks a:hover::after,.navlinks a:focus-visible::after { transform:scaleX(1); }
  [dir="rtl"] .navlinks a::after { transform-origin:right center; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}

/* A quiet return control, clear of the footer and device safe areas. */
.back-to-top {
  position:fixed;
  inset-inline-end:max(1.25rem,env(safe-area-inset-right));
  inset-block-end:max(1.25rem,env(safe-area-inset-bottom));
  z-index:20;
  display:inline-grid;
  place-items:center;
  inline-size:3rem;
  block-size:3rem;
  padding:0;
  border:1px solid var(--control-border);
  border-radius:50%;
  background:var(--bg);
  color:var(--ink);
  box-shadow:0 4px 16px rgb(0 0 0 / .15);
  cursor:pointer;
}
.wrap>footer { padding-inline-end:4.25rem; }
@media(hover:hover) {
  .back-to-top:hover { background:var(--ink); color:var(--bg); border-color:var(--ink); }
}
@media(prefers-reduced-motion:no-preference) {
  .back-to-top { transition:scale var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease); }
  .back-to-top:active { scale:.96; }
}
@media(forced-colors:active) {
  .back-to-top { border-color:ButtonText; box-shadow:none; }
  .back-to-top:hover { background:Highlight; color:HighlightText; }
}