/* A single rhythm: responsive controls, deliberate entrances, slow hero light. */
:root {
  --motion-micro-duration: 220ms;
  --motion-reveal-duration: 620ms;
  --motion-image-duration: 400ms;
  --motion-ambient-duration: 20s;
  --motion-ease-out: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-standard: cubic-bezier(.2, .7, .3, 1);
}

[data-parallax], [data-cursor-layer] {
  /* Individual translation composes with the artwork's own rotation and scale. */
  translate: var(--motion-cursor-x, 0px) calc(var(--motion-parallax-y, 0px) + var(--motion-cursor-y, 0px));
}
:root[data-motion="active"]:not([data-motion-suspended]) [data-motion-hero][data-motion-visible="true"] :is([data-parallax], [data-cursor-layer]) {
  will-change: translate;
}
.hero-light {
  pointer-events: none;
  animation: rs-hero-light var(--motion-ambient-duration) ease-in-out infinite alternate;
  animation-play-state: paused;
  transform-origin: 50% 45%;
}
:root[data-motion="active"]:not([data-motion-suspended]) [data-motion-hero][data-motion-visible="true"] .hero-light {
  animation-play-state: running;
  will-change: transform, opacity;
}
@keyframes rs-hero-light {
  from { transform: scale(1) rotate(-6deg); opacity: .72; }
  to { transform: scale(1.16) rotate(7deg); opacity: .96; }
}

[data-motion-toggle] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line, #d4d1ca);
  border-radius: 0;
  background: var(--paper, #f6f4ef);
  color: var(--muted, #625f58);
  font-size: .78rem;
  font-weight: 550;
  line-height: 1.3;
  transition: color var(--motion-micro-duration), border-color var(--motion-micro-duration);
}
[data-motion-toggle][hidden] { display: none; }
.hero-caption [data-motion-toggle] { min-height: 44px; }
[data-motion-toggle]:is(:hover, :focus-visible) { color: var(--accent, #2547bd); border-color: currentColor; }
[data-motion-toggle]:disabled { opacity: 1; color: var(--muted, #625f58); cursor: default; }

.project-card {
  transition: border-color var(--motion-micro-duration) var(--motion-ease-standard), box-shadow var(--motion-micro-duration) var(--motion-ease-standard);
}
.project-card__media > a {
  overflow: hidden;
  outline: 1px solid transparent;
  outline-offset: 0;
  transition: outline-color var(--motion-micro-duration);
}
.project-card__media img {
  transform-origin: center;
  transition: translate var(--motion-image-duration) var(--motion-ease-out), scale var(--motion-image-duration) var(--motion-ease-out);
}
.project-card__link, .journal-action { transition: color var(--motion-micro-duration); }
.project-card__link span, .journal-action > span:last-child {
  display: inline-block;
  transition: translate var(--motion-micro-duration) var(--motion-ease-out);
}
.project-card:focus-within { border-color: var(--accent, #2547bd); }
.project-card:focus-within .project-card__media > a { outline-color: var(--accent, #2547bd); }
.project-card:focus-within .project-card__media img { translate: 0 -3px; scale: 1.025; }
.project-card:focus-within .project-card__link { color: var(--accent, #2547bd); }
.project-card:focus-within .project-card__link span { translate: 3px -2px; }
.journal-card:focus-within .journal-action > span:last-child { translate: 4px 0; }
@media (hover: hover) and (pointer: fine) {
  .project-card:hover { border-color: var(--accent, #2547bd); }
  .project-card:hover .project-card__media > a { outline-color: var(--accent, #2547bd); }
  .project-card:hover .project-card__media img { translate: 0 -3px; scale: 1.025; }
  .project-card:hover .project-card__link { color: var(--accent, #2547bd); }
  .project-card:hover .project-card__link span { translate: 3px -2px; }
  .journal-card:hover .journal-action > span:last-child { translate: 4px 0; }
}

.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background-color var(--motion-micro-duration), border-color var(--motion-micro-duration), box-shadow var(--motion-micro-duration);
}
.button::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  background: radial-gradient(ellipse at var(--button-x, 50%) var(--button-y, 50%), rgb(255 255 255 / .2), transparent 72%);
  opacity: 0;
  scale: .78;
  pointer-events: none;
  transition: opacity var(--motion-micro-duration), scale var(--motion-micro-duration) var(--motion-ease-out);
}
.button.secondary::before { background: radial-gradient(ellipse at var(--button-x, 50%) var(--button-y, 50%), rgb(37 71 189 / .1), transparent 72%); }
.button:is(:focus-visible, :active)::before { opacity: 1; scale: 1; }
.button:active::before { opacity: .65; scale: 1.1; }
@media (hover: hover) and (pointer: fine) {
  .button:hover::before { opacity: 1; scale: 1; }
}

/* The rail belongs to a project's journal. Entries and their dates never depend on JS. */
.journal-list {
  --timeline-gutter: 32px;
  position: relative;
  padding-inline-start: var(--timeline-gutter);
}
.journal-list::before, .journal-list::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 4px;
  width: 1px;
  pointer-events: none;
}
.journal-list::before { background: var(--line, #d4d1ca); }
.journal-list::after {
  background: var(--accent, #2547bd);
  transform-origin: top;
  transform: scaleY(1);
  opacity: .7;
}
:root[data-motion="active"] .journal-list[data-motion-timeline]::after { transform: scaleY(var(--timeline-progress, 0)); }
.journal-list > .journal-card { position: relative; }
.journal-list > .journal-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset-inline-start: calc(1px - var(--timeline-gutter));
  inset-block-start: 30px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--paper, #f6f4ef);
  border: 1px solid var(--accent, #2547bd);
  transition: background-color var(--motion-micro-duration);
}
.journal-list > .journal-card:is([data-timeline-reached="true"], :focus-within)::before { background: var(--accent, #2547bd); }
@media (max-width: 700px) {
  .journal-list { --timeline-gutter: 22px; }
}
@media (hover: none), (pointer: coarse) {
  .project-card__media img, .project-card__link span, .journal-action > span:last-child, .button::before { transition-duration: 0ms; }
  .project-card:focus-within .project-card__media img { translate: none; scale: none; }
}

/* Pausing keeps every action and focus response available, without animated travel. */
:root[data-motion="paused"] { scroll-behavior: auto; }
:root[data-motion="paused"] :is(.project-card, .project-card__media > a, .project-card__media img, .project-card__link, .project-card__link span, .journal-action, .journal-action > span:last-child, .button, [data-motion-toggle]),
:root[data-motion="paused"] .button::before,
:root[data-motion="paused"] .journal-list > .journal-card::before { transition-duration: 0ms !important; }
:root[data-motion="paused"] .project-card__media img,
:root[data-motion="paused"] .project-card__link span,
:root[data-motion="paused"] .journal-action > span:last-child { translate: none !important; scale: none !important; }
:root[data-motion="paused"]::view-transition-old(*),
:root[data-motion="paused"]::view-transition-new(*),
:root[data-motion="paused"]::view-transition-group(*) { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .hero-light { animation: none; }
  [data-parallax], [data-cursor-layer] { translate: none !important; will-change: auto !important; }
  .project-card__media img, .project-card__link span, .journal-action > span:last-child { translate: none !important; scale: none !important; }
  .journal-list::after { transform: scaleY(1) !important; }
  .journal-list > .journal-card::before { transition: none; }
  .button::before { transition: none; }
}