/* Motion follows the existing Atelier palette and editorial typography. */
:root { --motion-editorial: cubic-bezier(.22, 1, .36, 1); }

.reading-progress {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--wine);
  transform: scaleX(var(--reading-progress, 0));
  transform-origin: left;
  pointer-events: none;
}

.future-replay {
  position: absolute;
  left: 0;
  bottom: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .5rem 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: .75rem/1.4 var(--font-body);
  cursor: pointer;
}
.future-replay[hidden] { display: none; }
.future-replay:hover { color: var(--wine); }
.future-replay:focus-visible { outline: 2px solid var(--wine); outline-offset: 5px; }
.future-replay svg { transition: transform 500ms var(--motion-editorial); }
.future-replay:hover svg { transform: rotate(-35deg); }
.future-lines { transform-origin: 12% 53%; }

.button > span[aria-hidden], .event-arrow {
  display: inline-block;
  transition: transform 350ms var(--motion-editorial);
}
.button:is(:hover, :focus-visible) > span[aria-hidden] { transform: translateX(4px); }
.event:is(:hover, :focus-visible) .event-arrow { transform: translate(3px, -3px); }
.event img { transition: transform 450ms var(--motion-editorial), filter 450ms ease; }
.event:is(:hover, :focus-visible) img { transform: rotate(-4deg) scale(1.07); filter: saturate(1.1); }

.nav a:not(.header-cta) { position: relative; }
.nav a:not(.header-cta)::after {
  content: '';
  position: absolute;
  inset: auto 0 -6px;
  height: 1px;
  background: var(--wine);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--motion-editorial);
}
.nav a:is(:hover, :focus-visible, [aria-current="location"])::after { transform: scaleX(1); }
.nav a[aria-current="location"] { color: var(--wine); text-decoration: none; }

.plan {
  position: relative;
  isolation: isolate;
  transition: transform 450ms var(--motion-editorial), border-color 350ms ease, box-shadow 450ms ease;
}
.plan::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--pointer-x, 50%) var(--pointer-y, 35%), rgb(249 192 49 / 10%), transparent 80%);
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
.plan:focus-within { border-color: var(--wine); }
.plan:focus-within::after { opacity: 1; }

.experience-stage { overflow: clip; overflow-clip-margin: 8px; }
.manifesto-copy blockquote em, .closing h2 em {
  text-decoration: underline;
  text-decoration-color: rgb(155 174 127 / 60%);
  text-decoration-thickness: .055em;
  text-underline-offset: .14em;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .plan:hover { transform: translateY(-6px); border-color: rgb(81 0 30 / 35%); box-shadow: 0 16px 32px rgb(61 40 49 / 6%); }
  .plan:hover::after { opacity: 1; }
  .structure-number { transition: transform 400ms var(--motion-editorial), color 300ms ease; }
  .structure-item:hover .structure-number { transform: translateX(5px); color: var(--wine); }
}

@media (max-width: 900px) {
  .future-replay { bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .future-replay { display: none; }
  .future-lines, .button > span[aria-hidden], .event img, .event-arrow, .plan { transform: none !important; }
  .reading-progress { display: none; }
  .nav a::after, .plan, .plan::after, .button > span[aria-hidden], .event img, .event-arrow { transition: none; }
}