:root{--hora-ease:cubic-bezier(.22,.61,.36,1);--hora-soft:cubic-bezier(.25,.46,.45,.94)}
.hora-wheel-scroll,.hora-program-scroll{scroll-snap-type:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:no-preference){
 body{animation:hora-page-enter .8s var(--hora-ease) both}
 .header{animation:none}
 .opening-video{animation-duration:1.1s}
 .mobile-nav:not([hidden]){animation:none}
 a,button,.plus,.plus::after,.menu-toggle span,.nav a::after,.feature-selector button,.card-plus,.image-open,.contact-disc{transition-duration:.55s;transition-timing-function:var(--hora-ease);transition-property:color,background-color,border-color,opacity,transform,right}
 .feature-image img,.card-image img,.research-image img,.gallery img,.case-hero{transition:transform 1s var(--hora-ease)}
 .scroll-fade{transition:opacity .36s var(--hora-soft)}
 .viewport-colour .photo-natural{transition:opacity .48s var(--hora-soft)!important}
 .sequence-progress>span{transition:transform .28s var(--hora-soft)}
}
@keyframes hora-page-enter{from{opacity:0}to{opacity:1}}
/* A real opacity crossfade avoids the abrupt blend-mode switch. */
.hora-colour{position:relative;isolation:isolate;background:#fff}
.hora-colour>img:not(.hora-natural),.hora-colour.is-original>img:not(.hora-natural),.hora-colour:hover>img:not(.hora-natural){filter:url(#hora-cobalt-photo);mix-blend-mode:normal}
.hora-colour>.hora-natural{position:absolute!important;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;filter:none!important;mix-blend-mode:normal!important;opacity:0;pointer-events:none;transition:opacity .85s var(--hora-ease),transform 1s var(--hora-ease)}
.hora-colour.is-original>.hora-natural,.hora-colour:focus-within>.hora-natural{opacity:1}
.hora-colour>.image-open,.hora-colour>.card-plus,.hora-colour>.research-tag,.hora-colour>.talk-play,.hora-colour>.talk-watch,.hora-colour>.talk-duration{z-index:2}
@media(hover:hover){.hora-colour:hover>.hora-natural{opacity:1}}
@media(prefers-reduced-motion:reduce){
 body{animation:none!important}
 .hora-colour>.hora-natural{opacity:1;transition:none!important}
 .scroll-fade{opacity:1!important;transition:none!important}
 .viewport-colour .photo-natural{opacity:1!important;transition:none!important}
}

@media(prefers-reduced-motion:no-preference){.talk-image img{transition:transform 1s var(--hora-ease)}.talk-play{transition:background-color .55s var(--hora-ease),color .55s var(--hora-ease)}}

/* Position owns slider colour, including after hover, focus or a previous tap. */
.hora-colour.hora-centre-colour>.hora-natural,
.hora-colour.hora-centre-colour:is(:hover,:focus-within,.is-original)>.hora-natural{opacity:var(--natural-opacity,0);transition:opacity .3s var(--hora-soft),transform 1s var(--hora-ease)}
@media(prefers-reduced-motion:reduce){.hora-colour.hora-centre-colour>.hora-natural{opacity:1;transition:none!important}}

.photo.viewport-colour:focus-visible>.photo-natural{opacity:var(--natural-opacity,0)}
@media(prefers-reduced-motion:reduce){.photo.viewport-colour:focus-visible>.photo-natural{opacity:1}}

/* Pinch and drag the enlarged artwork without moving the gallery controls. */
dialog img.hora-pinch-image{
  touch-action:none;
  transform-origin:center center;
  transition:transform none!important;
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
}