/* The photographs fade independently of the existing scroll choreography. */
.architecture-hero .hero-slideshow__slide { position: absolute; inset: 0; opacity: 0; z-index: 0; }
.architecture-hero .hero-slideshow__slide.is-active { opacity: 1; z-index: 1; }
/* One feathered top-down arrival for every scene; scroll motion remains independent. */
@property --hero-reveal { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
.architecture-hero .hero-slideshow__slide.is-entering {
  opacity: 1;
  z-index: 2;
  animation: hero-canopy-arrive 1.8s cubic-bezier(.22,1,.36,1) both;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--hero-reveal) - 22%), transparent var(--hero-reveal));
  mask-image: linear-gradient(to bottom, #000 calc(var(--hero-reveal) - 22%), transparent var(--hero-reveal));
}
@keyframes hero-canopy-arrive {
  from { --hero-reveal: -22%; opacity: .65; transform: translate3d(0,-1.4%,0) scale(1.055); }
  to { --hero-reveal: 124%; opacity: 1; transform: none; }
}
.architecture-hero .hero-slideshow__slide > img { display: block; }
.architecture-hero__preview { position: relative; flex: 0 0 auto; width: clamp(70px, 6.2vw, 112px); aspect-ratio: 1; }
.architecture-hero .hero-slideshow__next { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: #141414; box-shadow: 0 4px 24px #0002; padding: 0; }
.hero-slideshow__next img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.hero-slideshow__next:not(:disabled):hover img { transform: scale(1.1); }
.hero-slideshow__next:disabled { cursor: default; }
.hero-slideshow__next:focus-visible, .hero-slideshow__playback:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.hero-slideshow__playback { position: absolute; right: -3px; bottom: -3px; z-index: 1; display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid #ffffffa0; border-radius: 50%; background: #16171be6; padding: 0; }
.hero-slideshow__playback::before { content: ''; width: 7px; height: 9px; border-inline: 2px solid #fff; }
.hero-slideshow__playback.is-paused::before { width: 0; height: 0; border: 0; border-left: 7px solid #fff; border-block: 4px solid transparent; margin-left: 2px; }
@media(max-width:600px) {
  .architecture-hero__preview { width: 58px; margin-bottom: 15px; }
  .hero-slideshow__playback { width: 23px; height: 23px; }
}
@media(prefers-reduced-motion:reduce) {
  .architecture-hero .hero-slideshow__slide.is-entering { animation: none; transform: none; filter: none; -webkit-mask-image: none; mask-image: none; will-change: auto; }
  .hero-slideshow__next img { transition: none; }
}