/* Horizon motion study: chapter push, aperture reveals, and camera travel.
   Wheel input glides on a time-based curve; touch and reduced motion stay native. */
html[data-motion-edition] .hero-inner,
html[data-motion-edition] .hero-copy,
html[data-motion-edition] .quote-line,
html[data-motion-edition] .scene-still,
html[data-motion-edition] .research-frame,
html[data-motion-edition] .research-frame img,
html[data-motion-edition] .work-phone,
html[data-motion-edition] .work-editorial-scene {
  animation: none;
}
html[data-motion-edition] .hero-inner { transform: none; opacity: 1; filter: none; }
html[data-motion-edition] .hero-copy { opacity: 1; filter: none; }
html[data-motion-edition] .hero-stage,
html[data-motion-edition] .hero-emblem-image { animation: none; clip-path: none; filter: none; }
html[data-motion-edition] .hero-stage::after { animation: none; opacity: 0; }
html[data-motion-edition] .cinema-scan { display: none; }
html[data-motion-edition] .reveal,
html[data-motion-edition] .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}
html[data-motion-edition] .reveal :is(h2, h3) { clip-path: none; transition: none; }
html[data-motion-edition] [data-motion-enter][data-motion-enter="pending"] { opacity: 0; }
/* The former sticky offset must not move a relative figure into the copy. */
html[data-motion-edition] .research-image { top: auto; }
html[data-motion-edition] .scroll-rail span { animation: none; transform: scaleX(var(--reading-progress, 0)); }
html[data-in-fields] .section-index { opacity: 0; pointer-events: none; }
html[data-motion-edition] .quote blockquote,
html[data-motion-edition] .interlude > div { transform: none; transition: none; }

/* Each scene holds its last screen with space below the final lines before
   the next surface slides over it. */
html[data-motion-edition] { scroll-behavior: auto !important; }
html[data-motion-edition] main { position: relative; isolation: isolate; }
.motion-panel { position: relative; background: transparent; }
.motion-surface { position: relative; background: var(--color-bg); }
.motion-surface:has(> .fields-section),
.motion-surface:has(> .about-section),
.motion-surface:has(> .chapter:nth-child(n)) { background: var(--color-surface); }
.motion-surface > .work-section { background: var(--color-bg); }
html[data-scene-pin] { --scene-overlap: calc(100svh - var(--header-height)); }
html[data-scene-pin] .motion-panel { height: var(--scene-height, auto); z-index: var(--scene-order); }
html[data-scene-pin] .motion-panel + .motion-panel { margin-top: calc(-1 * var(--scene-overlap)); }
html[data-scene-pin] .motion-panel:last-child { height: auto; }
html[data-scene-pin] .motion-surface {
  position: sticky;
  top: var(--pin-top, 0px);
  transform: translate3d(0, var(--chapter-shift, 0px), 0) scale(var(--chapter-scale, 1));
  transform-origin: 50% 0;
  box-shadow: 0 -28px 70px -24px rgb(0 0 20 / 65%);
  backface-visibility: hidden;
}
html[data-scene-pin] .motion-surface::before {
  content: '';
  position: absolute;
  z-index: 4;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(110 194 255 / 65%), transparent);
  opacity: var(--scene-edge, 0);
}
html[data-scene-pin] .motion-panel[data-scene-near] > .motion-surface { will-change: transform; }
html[data-scene-pin] .motion-panel:last-child > .motion-surface { position: relative; top: auto; }
[data-theme="light"][data-scene-pin] .motion-surface { box-shadow: 0 -24px 65px -28px rgb(0 0 98 / 20%); }

html[data-motion-edition] .cinema-field {
  transform: translate3d(0, var(--hero-travel, 0px), 0) scale(var(--hero-zoom, 1));
  transform-origin: 70% 40%;
}
html[data-motion-edition] .hero-copy { translate: 0 var(--hero-copy-travel, 0px); }
html[data-motion-edition] .hero-stage { translate: 0 var(--hero-mark-travel, 0px); }
html[data-motion-edition] .cinema-beam { opacity: .3; animation-duration: 22s; }
html[data-motion-edition] .cinema-horizon { opacity: .35; animation-duration: 12s; }

/* Overscan prevents exposed edges during the slow camera move. */
html[data-motion-edition] .research-frame { clip-path: none; transition: none; }
html[data-motion-edition] .research-frame img {
  height: 100%;
  transform: scale(1.18);
  translate: var(--image-x, 0%) var(--image-y, 0%);
}
/* Preserve the original image; soften only a narrow strip at its boundary. */
html[data-motion-edition][data-theme="light"] :is(.image-choice-field, .research-frame) {
  --image-edge: clamp(8px, 1.2vw, 14px);
  position: relative;
  background: var(--color-surface);
  border-color: transparent;
  box-shadow: none;
}
html[data-motion-edition][data-theme="light"] :is(.image-choice-field, .research-frame) img {
  filter: none;
}
html[data-motion-edition][data-theme="light"] :is(.image-choice-field, .research-frame)::after {
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: linear-gradient(0deg, var(--color-surface), transparent var(--image-edge), transparent calc(100% - var(--image-edge)), var(--color-surface)),
              linear-gradient(90deg, var(--color-surface), transparent var(--image-edge), transparent calc(100% - var(--image-edge)), var(--color-surface));
}
/* The light contact photograph needs a complete light form palette. */
html[data-theme="light"] .image-choice-contact,
html[data-theme="light"] .image-choice-contact :is(h2, .contact-lead, .contact-reply, .contact-note, .contact-note a, .contact-fallback a, label, .field-optional, .form-status) {
  color: var(--color-text);
}
html[data-theme="light"] .image-choice-contact :is(.field-hint, .contact-privacy, .contact-fallback) {
  color: var(--color-muted);
}
html[data-theme="light"] .image-choice-contact :is(input, select, textarea) {
  color: var(--color-text);
  background-color: #fff;
  border-color: #9aaebf;
  color-scheme: light;
}
html[data-theme="light"] .image-choice-contact input::placeholder {
  color: var(--color-muted);
}
html[data-theme="light"] .image-choice-contact select {
  background-image: linear-gradient(45deg, transparent 50%, #000062 50%), linear-gradient(135deg, #000062 50%, transparent 50%);
}
html[data-theme="light"] .image-choice-contact :is(input, select, textarea):is(:hover, :focus-visible) {
  border-color: #0376c6;
  background-color: #fff;
}
html[data-theme="light"] .image-choice-contact :is(input, select, textarea, button, a):focus-visible {
  outline-color: #0376c6;
}
html[data-theme="light"] .image-choice-contact :is(input, select, textarea)[aria-invalid="true"] {
  border-color: #a12332;
  background-color: #fff7f7;
}
html[data-theme="light"] .image-choice-contact .contact-button.is-ghost {
  color: var(--color-text);
  background: rgb(255 255 255 / 85%);
  border-color: #9aaebf;
}
html[data-theme="light"] .image-choice-contact .contact-button.is-ghost:hover {
  background: #e9f2f9;
  border-color: #0376c6;
}
html[data-theme="light"] .image-choice-contact .contact-form button {
  color: #fff;
  background: #000062;
}
html[data-theme="light"] .image-choice-contact .contact-form button::before {
  background: #00336f;
}
html[data-motion-edition] .scene-still {
  transform: scale(1.16);
  translate: var(--image-x, 0%) var(--image-y, 0%);
  opacity: .45;
}
html[data-motion-edition] .work-editorial-scene {
  inset: -8%;
  translate: var(--image-x, 0%) var(--image-y, 0%);
}
html[data-motion-edition] .work-phone { translate: 0 var(--phone-travel, 0px); }
html[data-motion-edition] .quote-line {
  translate: var(--quote-travel, 0px) 0;
  line-height: 1.03;
}
html[data-motion-edition] .quote-line:last-child { translate: calc(-1 * var(--quote-travel, 0px)) 0; }
.motion-word { display: inline-block; }

/* Fields: a native vertical document until measurements confirm that
   every card fits. The horizontal camera works without CSS timelines. */
html[data-motion-edition] .pan-wrap {
  height: auto;
  view-timeline-name: none;
}
html[data-motion-edition] .pan-sticky { position: static; height: auto; display: block; overflow: visible; }
html[data-motion-edition] .pan-track {
  flex-direction: column;
  width: auto;
  animation: none;
  transform: none;
}
html[data-motion-edition] .field-card {
  width: auto;
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
}
html[data-motion-edition] .pan-progress { display: none; }
.field-navigation { display: none; }
@media (min-width: 1025px) and (min-height: 700px) {
  html[data-motion-edition] .pan-wrap[data-pan-ready] { height: var(--pan-height); }
  html[data-motion-edition] [data-pan-ready] .pan-sticky {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-top: var(--header-height);
    padding-bottom: 5rem;
    height: 100svh;
    overflow: clip;
  }
  html[data-motion-edition] [data-pan-ready] .pan-track {
    flex-direction: row;
    width: max-content;
    gap: 1.5rem;
    transform: translate3d(var(--pan-x, 0px), 0, 0);
    will-change: transform;
  }
  html[data-motion-edition] [data-pan-ready] .field-card {
    width: clamp(45rem, 77vw, 65rem);
    flex: 0 0 auto;
    padding: clamp(1.4rem, 3vh, 2.75rem) clamp(1.6rem, 3vw, 3rem);
  }
  html[data-motion-edition] [data-pan-ready] .field-copy { gap: .9rem; }
  html[data-motion-edition] [data-pan-ready] .field-copy h3 { font-size: clamp(1.5rem, 3vh, 2.4rem); }
  html[data-motion-edition] [data-pan-ready] .field-copy > p { font-size: .95rem; }
  html[data-motion-edition] [data-pan-ready] .field-evidence { gap: .65rem; padding-top: .75rem; }
  html[data-motion-edition] [data-pan-ready] .field-signature { width: min(100%, 18rem); }
  html[data-motion-edition] [data-pan-ready] .pan-progress {
    display: block;
    bottom: 4.8rem;
    left: var(--gutter);
    right: var(--gutter);
  }
  html[data-motion-edition] [data-pan-ready] .pan-progress span {
    animation: none;
    transform: scaleX(var(--pan-progress, 0));
    box-shadow: 0 0 16px rgb(3 118 198 / 50%);
  }
  [data-pan-ready] .field-navigation {
    display: flex;
    position: absolute;
    bottom: 1rem;
    left: var(--gutter);
    right: var(--gutter);
    justify-content: space-between;
    gap: 1rem;
  }
  .field-navigation button {
    border: 0;
    padding: .65rem 0;
    min-height: 44px;
    color: var(--color-muted);
    background: transparent;
    font-family: var(--font-mono);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .3s;
  }
  .field-navigation button[aria-current="step"] { color: var(--color-primary); }
  .field-navigation button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
}
@media (max-width: 900px) {
  html[data-motion-edition] .quote { min-height: 58svh; }
  html[data-motion-edition] .quote-line { font-size: clamp(2.5rem, 8vw, 5rem); }
}
/* In the stacked layout the fixed chapter badge crosses the text column. */
@media (max-width: 1024px) {
  html[data-motion-edition] .section-index { display: none; }
}
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
  html[data-motion-edition] [data-motion-enter][data-motion-enter="pending"] { opacity: 1; }
  .motion-surface,
  html[data-motion-edition] .hero-copy,
  html[data-motion-edition] .hero-stage,
  html[data-motion-edition] .quote-line,
  html[data-motion-edition] .work-phone,
  html[data-motion-edition] .scene-still,
  html[data-motion-edition] .work-editorial-scene,
  html[data-motion-edition] .research-frame img { translate: none; }
  html[data-motion-edition] .cinema-field,
  html[data-motion-edition] .motion-surface { transform: none; }
  html[data-motion-edition] .motion-word { opacity: 1 !important; }
}