@property --pointer-x { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --pointer-y { syntax: '<number>'; inherits: true; initial-value: 0; }

.inner-page { overflow-wrap: break-word; }
.inner-page img { max-width: 100%; }
.inner-page [id] { scroll-margin-top: 2rem; }
.inner-page a:focus-visible { outline-offset: 5px; }
.inner-page .motion-word-mask { display: contents; }
.editorial-page { max-width: 1050px; padding-block: 5rem 8rem; }
.editorial-page h1 { font-size: clamp(2.5rem,6vw,5rem); margin-bottom: 3rem; }
.editorial-page h2 { font-size: 1.6rem; font-weight: 400; margin-top: 3rem; }
.editorial-page p, .editorial-page li { font-size: 1rem; line-height: 1.8; color: #c4c4bd; }
.editorial-page a { text-decoration: underline; text-underline-offset: .25em; }

/* Progressive enhancement confined to the interior pages. Without the ready
   class every word, image and application keeps its original static layout. */
.inner-page.motion-ready {
 --motion-p: .5;
 --motion-open: 1;
 --motion-focus: 1;
 --motion-ink: 1;
 --motion-turn: 0;
 --motion-direction: 1;
 --pointer-x: 0;
 --pointer-y: 0;
 --motion-word-rise: 110%;
 --motion-word-rotate: 4deg;
 --motion-word-tilt: 12deg;
 --motion-reveal-rise: 20px;
 --motion-shift-distance: 24px;
 --motion-photo-drift: 4%;
 --motion-photo-scale: 1.035;
 --motion-photo-zoom: .195;
 --motion-photo-crop: 12%;
 --motion-photo-inset: 3%;
 --motion-caption-drift: 35px;
 --motion-card-rise: 50px;
 --motion-card-scale: .14;
 --motion-card-tilt: 20deg;
 --motion-card-yaw: 14deg;
 --motion-pointer-shift: 0px;
 --motion-pointer-tilt: 0deg;
 --motion-flow-rise: 18px;
 --motion-ease: cubic-bezier(.16, .8, .22, 1);
}

/* A padded mask protects accents and italic overhangs without changing the
   footprint or baseline of the word. Every word is static after its arrival. */
.inner-page.motion-ready .motion-title .motion-word-mask {
 display: inline-block;
 max-width: 100%;
 vertical-align: baseline;
 padding: .12em .1em .22em;
 margin: -.12em -.1em -.22em;
 clip-path: inset(0);
 perspective: 900px;
}
.inner-page.motion-ready .motion-title .motion-word {
 display: inline-block;
 max-width: 100%;
 vertical-align: baseline;
 transform-origin: 0 100%;
}
.inner-page.motion-ready .motion-title.is-entered .motion-word {
 animation: prisme-inner-word .95s var(--motion-ease) both;
 animation-delay: min(calc(var(--word-order, 0) * 55ms), 660ms);
}
.inner-page.motion-ready h1.motion-title.is-entered .motion-word { animation-duration: 1.1s; }
.inner-page.motion-ready .motion-reveal.is-entered {
 animation: prisme-inner-reveal .8s var(--motion-ease) both;
}
.inner-page.motion-ready .motion-list:not(.motion-flow).is-entered > li {
 animation: prisme-inner-reveal .76s var(--motion-ease) both;
 animation-delay: min(calc(var(--item-order, 0) * 70ms), 490ms);
}
@keyframes prisme-inner-word {
 from { opacity: .25; transform: translateY(var(--motion-word-rise)) rotate(var(--motion-word-rotate)) rotateX(var(--motion-word-tilt)); }
 to { opacity: 1; transform: none; }
}
@keyframes prisme-inner-reveal {
 from { opacity: .45; transform: translateY(var(--motion-reveal-rise)); }
 to { opacity: 1; transform: none; }
}

/* Photography opens into its full frame; only the photograph drifts inside it.
   Figure captions remain outside the wrappers introduced by the controller. */
.inner-page.motion-ready .motion-photo-frame { overflow: clip; }
.inner-page.motion-ready .motion-photo:not(.motion-film) {
 clip-path: inset(calc((1 - var(--motion-open)) * var(--motion-photo-inset)) calc((1 - var(--motion-open)) * var(--motion-photo-crop)));
}
.inner-page.motion-ready .motion-photo:focus-visible { clip-path: none; }
.inner-page.motion-ready .expertises-intro__visual .motion-photo {
 animation: prisme-inner-aperture 1.25s .12s var(--motion-ease) backwards;
}
@keyframes prisme-inner-aperture {
 from { clip-path: inset(10% 22%); }
 to { clip-path: inset(calc((1 - var(--motion-open)) * var(--motion-photo-inset)) calc((1 - var(--motion-open)) * var(--motion-photo-crop))); }
}
.inner-page.motion-ready .motion-photo-image {
 transform: translate(
   calc(var(--pointer-x) * var(--motion-pointer-shift)),
   calc(clamp(-.4, .5 - var(--motion-p), .4) * var(--motion-photo-drift))
  ) scale(calc(var(--motion-photo-scale) + (1 - var(--motion-focus)) * var(--motion-photo-zoom)));
 transform-origin: 50% 50%;
 transition: none;
}
.inner-page.motion-ready .case-cover.motion-photo figcaption,
.inner-page.motion-ready .projection-entry__image.motion-photo .projection-entry__image-word {
 translate: 0 calc((.5 - var(--motion-p)) * var(--motion-caption-drift));
}
.inner-page.motion-ready:not(.motion-small) .motion-interactive {
 --motion-pointer-shift: 5px;
 --motion-pointer-tilt: 3deg;
 transition: --pointer-x .3s ease-out, --pointer-y .3s ease-out;
}

/* A screen and a printed object unfold with their own physical angle. */
.inner-page.motion-ready .case-application__art.motion-scene > [role='img'],
.inner-page.motion-ready .expertise-contact-example__screen.motion-scene {
 --rest-angle: 0deg;
 transform-origin: 50% 70%;
 transform: perspective(1000px)
  translateY(calc((1 - var(--motion-open)) * var(--motion-card-rise)))
  scale(calc(1 - (1 - var(--motion-open)) * var(--motion-card-scale)))
  rotateX(calc(var(--motion-turn) * var(--motion-card-tilt) - var(--pointer-y) * var(--motion-pointer-tilt)))
  rotateY(calc(var(--motion-turn) * var(--motion-direction) * var(--motion-card-yaw) + var(--pointer-x) * var(--motion-pointer-tilt)))
  rotateZ(var(--rest-angle));
 translate: calc(var(--pointer-x) * var(--motion-pointer-shift)) calc(var(--pointer-y) * var(--motion-pointer-shift));
}
.inner-page.motion-ready .case-application__art.motion-scene > .atelier-brochure { --rest-angle: -3deg; }
.inner-page.motion-ready .case-application__art.motion-scene > .habitat-guide { --rest-angle: 3deg; }

/* The two readings converge. Individual translate preserves the existing
   downward arrow rotation in the mobile layout. */
.inner-page.motion-ready .motion-shift-start {
 translate: calc((1 - var(--motion-open)) * var(--motion-shift-distance) * -1) 0;
}
.inner-page.motion-ready .motion-shift-end {
 translate: calc((1 - var(--motion-open)) * var(--motion-shift-distance)) 0;
}
.inner-page.motion-ready .motion-shift-arrow {
 translate: calc((1 - var(--motion-open)) * -10px) 0;
 opacity: calc(.6 + var(--motion-open) * .4);
}

/* A few concluding phrases acquire a fine ink line as their meaning settles. */
.inner-page.motion-ready .motion-ink em { opacity: calc(.72 + var(--motion-ink) * .28); }
.inner-page.motion-ready .motion-ink em .motion-word {
 background-image: linear-gradient(currentColor, currentColor);
 background-repeat: no-repeat;
 background-position: left bottom;
 background-size: calc(var(--motion-ink) * 100%) 1px;
}

/* A sequence connects its stages to the reader's progress, without pinning or
   hiding the copy. These rows are excluded from the one-time list cascade. */
.inner-page.motion-ready .motion-flow > li {
 position: relative;
 --motion-step: 1;
 translate: 0 calc((1 - var(--motion-step)) * var(--motion-flow-rise));
 opacity: calc(.65 + var(--motion-step) * .35);
}
.inner-page.motion-ready .motion-flow > li::before {
 content: '';
 position: absolute;
 inset: -.7rem 0 auto;
 height: 2px;
 background: var(--motion-flow-rule, var(--gold));
 transform: scaleX(var(--motion-step));
 transform-origin: left center;
 pointer-events: none;
}
.inner-page.motion-ready .expertise-communication__example .motion-flow { --motion-flow-rule: #806433; }
.inner-page.motion-ready .contact-next .motion-flow > li::before { top: -1px; }

/* The film intention gains a cinematic frame and a readable sequence marker. */
.inner-page.motion-ready .motion-film {
 clip-path: inset(calc((1 - var(--motion-open)) * 10%) 0);
}
.inner-page.motion-ready .motion-film .case-film__sequence > span {
 position: relative;
 color: #fff;
 transition: color .3s ease;
}
.inner-page.motion-ready .motion-film .case-film__sequence > span::before {
 content: '';
 position: absolute;
 left: 0;
 right: 0;
 top: calc(-1rem - 1px);
 height: 2px;
 background: #edc989;
 transform: scaleX(0);
 transform-origin: left center;
 transition: transform .4s var(--motion-ease);
}
.inner-page.motion-ready .motion-film .case-film__sequence > .is-current { color: #f3d59b; }
.inner-page.motion-ready .motion-film .case-film__sequence > .is-current::before { transform: scaleX(1); }

/* Small responses reinforce an intentional path through the page. */
.inner-page.motion-ready .motion-link {
 background-image: linear-gradient(currentColor, currentColor);
 background-repeat: no-repeat;
 background-position: left bottom;
 background-size: 0 1px;
 transition: background-size .35s var(--motion-ease);
}
.inner-page.motion-ready .motion-link > span[aria-hidden='true'] {
 transition: translate .35s var(--motion-ease);
}
.inner-page.motion-ready .motion-link:is(:hover, :focus-visible) { background-size: 100% 1px; }
.inner-page.motion-ready .motion-link:is(:hover, :focus-visible) > span[aria-hidden='true'] { translate: 2px -2px; }
.inner-page.motion-ready .inner-reading-progress {
 position: fixed;
 z-index: 1100;
 inset: 0 0 auto;
 height: 2px;
 background: var(--gold);
 transform: scaleX(var(--reading-progress, 0));
 transform-origin: left center;
 pointer-events: none;
}

/* Short viewports keep the same narrative with less travel and no tilt. */
.inner-page.motion-ready.motion-small {
 --motion-word-rise: 80%;
 --motion-word-rotate: 2deg;
 --motion-word-tilt: 0deg;
 --motion-reveal-rise: 12px;
 --motion-shift-distance: 12px;
 --motion-photo-drift: 2%;
 --motion-photo-scale: 1.025;
 --motion-photo-zoom: .075;
 --motion-photo-crop: 4%;
 --motion-photo-inset: 1.5%;
 --motion-caption-drift: 15px;
 --motion-card-rise: 12px;
 --motion-card-scale: .045;
 --motion-card-tilt: 0deg;
 --motion-card-yaw: 0deg;
 --motion-flow-rise: 10px;
}
.inner-page.motion-ready.motion-small .motion-film {
 clip-path: inset(calc((1 - var(--motion-open)) * 5%) 0);
}

/* The controller also removes its ready class immediately when either
   preference changes. These guards make that fallback independent of JS. */
@media (prefers-reduced-motion: reduce), (forced-colors: active) {
 .inner-page.motion-ready .motion-interactive { transition: none; }
 .inner-page.motion-ready .motion-title .motion-word-mask {
  display: contents;
  padding: 0;
  margin: 0;
  clip-path: none;
  perspective: none;
 }
 .inner-page.motion-ready .motion-word,
 .inner-page.motion-ready .motion-reveal,
 .inner-page.motion-ready .motion-list > li {
  animation: none !important;
  opacity: 1;
  transform: none;
 }
 .inner-page.motion-ready .motion-photo,
 .inner-page.motion-ready .motion-film { clip-path: none !important; animation: none !important; }
 .inner-page.motion-ready .motion-photo-image { transform: none; transition: none; }
 .inner-page.motion-ready .case-application__art.motion-scene > [role='img'],
 .inner-page.motion-ready .expertise-contact-example__screen.motion-scene {
  transform: rotate(var(--rest-angle, 0deg));
  translate: none;
  transition: none;
 }
 .inner-page.motion-ready .case-cover.motion-photo figcaption,
 .inner-page.motion-ready .projection-entry__image.motion-photo .projection-entry__image-word { translate: none; }
 .inner-page.motion-ready .motion-ink em { opacity: 1; }
 .inner-page.motion-ready .motion-ink em .motion-word { background-image: none; }
 .inner-page.motion-ready .motion-flow > li { translate: none; opacity: 1; }
 .inner-page.motion-ready .motion-shift-start,
 .inner-page.motion-ready .motion-shift-end,
 .inner-page.motion-ready .motion-shift-arrow { translate: none; opacity: 1; }
 .inner-page.motion-ready .motion-link,
 .inner-page.motion-ready .motion-link > span[aria-hidden='true'],
 .inner-page.motion-ready .motion-film .case-film__sequence > span,
 .inner-page.motion-ready .motion-film .case-film__sequence > span::before { transition: none; }
 .inner-page.motion-ready .motion-link:is(:hover, :focus-visible) > span[aria-hidden='true'] { translate: none; }
 .inner-page.motion-ready .motion-film .case-film__sequence > span::before,
 .inner-page.motion-ready .motion-flow > li::before,
 .inner-page.motion-ready .inner-reading-progress { display: none; }
}
@media (forced-colors: active) {
 .inner-page.motion-ready .motion-film .case-film__sequence > span { color: CanvasText !important; }
 .inner-page.motion-ready .motion-link { background-image: none; }
}