/* Optional pacing and entrance. Disable both with ?motionDemo=off. */
body[data-demo-pacing] .onform-portfolio-story {
  height: 220svh;
  --portfolio-expand-fraction: .65;
  --portfolio-expand-end: 65%;
}
@media (max-width:600px) {
  body[data-demo-pacing] .onform-portfolio-story { height: 210svh; }
}

/* The outer hero layers keep ownership of their existing scroll choreography. */
body[data-demo-entrance] { --entrance-at: 1.3s; }
.studio-hero.architecture-hero { background: #012bba; }
body[data-demo-entrance] .page-loader { display: none; }
body[data-demo-entrance] .demo-hero-mask {
  display: inline-block;
  vertical-align: bottom;
  overflow: clip;
  padding: .14em .12em;
  margin: -.14em -.12em;
}
body[data-demo-entrance] .architecture-hero__title :is(.demo-hero-mask,.demo-hero-word,.demo-hero-glyph) { margin-inline: 0; }
/* Keep the same inline allowance on hero and contact word masks. */
body[data-demo-entrance] .architecture-hero__title .demo-hero-mask { margin-inline: -.12em; }
body[data-demo-entrance] .demo-hero-word { display: inline-block; perspective: 600px; }
body[data-demo-entrance] .demo-hero-glyph {
  display: inline-block;
  transform-origin: 50% 80%;
  animation: onform-glyph-arrive 1.15s cubic-bezier(.16,1,.3,1) calc(var(--entrance-at) + var(--glyph-index) * .047s) backwards;
}
@keyframes onform-glyph-arrive {
  from { opacity: 0; transform: translateY(var(--glyph-y)) rotateX(var(--glyph-turn)) scale(.75); }
  to { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
}
body[data-demo-entrance] .architecture-hero .hero-studio-room,
body[data-demo-entrance] .studio-hero.architecture-hero::after {
  animation: onform-photo-unfold 2s cubic-bezier(.16,1,.3,1) calc(var(--entrance-at) - .2s) backwards;
}
@keyframes onform-photo-unfold { from { clip-path: inset(12% 22%); } to { clip-path: inset(0); } }
body[data-demo-entrance] .architecture-hero__preview,
body[data-demo-entrance] .architecture-hero__intro > p,
body[data-demo-entrance] .architecture-hero__location,
body[data-demo-entrance] .architecture-hero .studio-logo,
body[data-demo-entrance] .architecture-hero__discipline {
  animation: onform-detail-arrive 1s cubic-bezier(.16,1,.3,1) calc(var(--entrance-at) + .6s) backwards;
}
body[data-demo-entrance] .architecture-hero__intro > p { animation-delay: calc(var(--entrance-at) + .7s); }
body[data-demo-entrance] .architecture-hero__location { animation-delay: calc(var(--entrance-at) + .82s); }
@keyframes onform-detail-arrive { from { opacity: 0; translate: -18px 0; } to { opacity: 1; translate: 0 0; } }

/* The same five alternating bands and easing as the navigation shutters. */
html.is-brand-intro { overflow: clip; }
.onform-brand-intro { position: fixed; inset: 0; z-index: 100; overflow: clip; color: #fff; }
.onform-brand-intro__shutter {
  position: absolute;
  top: calc(var(--band) * 20%);
  left: 0;
  width: 100%;
  height: calc(20% + 1px);
  overflow: hidden;
  background: #012bba;
  will-change: transform;
  contain: paint;
  backface-visibility: hidden;
  --shutter-away: -102%;
  animation: onform-intro-shutter .735s cubic-bezier(.76,0,.24,1) calc(1.02s + var(--band) * 65ms) both;
}
.onform-brand-intro__shutter:nth-child(even) { --shutter-away: 102%; }
.onform-brand-intro__canvas {
  position: absolute;
  left: 0;
  top: calc(var(--band) * -20dvh);
  width: 100%;
  height: 100dvh;
  display: grid;
  place-items: center;
}
.onform-brand-intro__word {
  display: flex;
  font-family: Impact,'Arial Narrow',sans-serif;
  font-size: clamp(76px,28vw,650px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.035em;
}
.onform-brand-intro__word > span {
  animation: onform-intro-type .34s cubic-bezier(.22,1,.36,1) calc(.1s + var(--type-index) * .105s) both;
}
@keyframes onform-intro-type {
  from { opacity: 0; transform: translate3d(0,.055em,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes onform-intro-shutter { from { transform: translate3d(0,0,0); } to { transform: translate3d(var(--shutter-away),0,0); } }
body.is-demo-skipped .demo-hero-glyph,
body.is-demo-skipped .architecture-hero .hero-studio-room,
body.is-demo-skipped .studio-hero.architecture-hero::after,
body.is-demo-skipped .architecture-hero__preview,
body.is-demo-skipped .architecture-hero__intro > p,
body.is-demo-skipped .architecture-hero__location,
body.is-demo-skipped .architecture-hero .studio-logo,
body.is-demo-skipped .architecture-hero__discipline { animation: none; }
@media (prefers-reduced-motion:reduce) {
  body[data-demo-pacing] .onform-portfolio-story { height: auto; }
  .onform-brand-intro { display: none; }
  body[data-demo-entrance] .demo-hero-glyph,
  body[data-demo-entrance] .architecture-hero .hero-studio-room,
  body[data-demo-entrance] .studio-hero.architecture-hero::after,
  body[data-demo-entrance] .architecture-hero__preview,
  body[data-demo-entrance] .architecture-hero__intro > p,
  body[data-demo-entrance] .architecture-hero__location,
  body[data-demo-entrance] .architecture-hero .studio-logo,
  body[data-demo-entrance] .architecture-hero__discipline { animation: none; }
}

/* Keep the intro and its hero choreography on one clock after assets are ready. */
html.is-intro-preparing .onform-brand-intro__shutter,
html.is-intro-preparing .onform-brand-intro__word > span,
html.is-intro-preparing .demo-hero-glyph,
html.is-intro-preparing .architecture-hero .hero-studio-room,
html.is-intro-preparing .studio-hero.architecture-hero::after,
html.is-intro-preparing .architecture-hero__preview,
html.is-intro-preparing .architecture-hero__intro > p,
html.is-intro-preparing .architecture-hero__location,
html.is-intro-preparing .architecture-hero .studio-logo,
html.is-intro-preparing .architecture-hero__discipline {
  animation-play-state: paused !important;
}