.sec__head,
.manifest__title,
.manifest__body,
.manifest__specs,
.zoom__intro,
.house__shot,
.house__body,
.houses__note,
.place__shot,
.place__body,
.belt__head,
.belt__perks,
.progress__grid,
.faq__list,
.view__top,
.view__grid {
  animation: rise linear both;
  animation-timeline: view();
  animation-range: entry 8% entry 46%;
}

.hero {
  height: 330svh;
  view-timeline-name: --hero-track;
  view-timeline-axis: block;
}

.hero__head,
.hero__media,
.hero__media img,
.hero__word,
.hero__caption,
.hero__sky::after {
  animation-timeline: --hero-track;
  animation-range: entry 100% exit 0%;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

.hero__head {
  animation-name: hero-head-leave;
}

.hero__media {
  animation-name: hero-frame-open;
}

.hero__media img {
  animation-name: hero-image-grow;
}

.hero__word {
  display: flex;
  animation-name: hero-word-collapse;
}

.hero__sky::after {
  animation-name: hero-sky-deepen;
}

.hero__caption {
  animation-name: hero-caption-enter;
}

.view {
  position: relative;
  z-index: 7;
  border-radius: 1.5rem 1.5rem 0 0;
}

.belt__track {
  height: 380svh;
  view-timeline-name: --belt-track;
  view-timeline-axis: block;
}

.belt__viewport {
  position: sticky;
  top: 0;
  justify-content: center;
  height: 100svh;
  padding-block: var(--topbar-h) 0;
}

.belt__lane {
  overflow: visible;
  scroll-snap-type: none;
  animation: belt-run linear both;
  animation-timeline: --belt-track;
  animation-range: entry 100% exit 0%;
  will-change: transform;
}

.belt__head,
.belt__perks {
  animation: none;
}

@media (min-width: 900px) {
  .belt__track {
    height: 320svh;
  }
}

.zoom__track {
  height: 320svh;
  view-timeline-name: --zoom-track;
  view-timeline-axis: block;
}

.zoom__viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  padding: 0;
  overflow: hidden;
  background: var(--paper);
}

.zoom__stage {
  display: block;
  position: absolute;
  inset: 0;
}

.zoom__frame {
  --w: 12vw;
  --h: 18vh;
  --x: 0vw;
  --y: 0vh;
  --s: 6;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  border-radius: 0;
  background: none;
  animation: zoom-grow linear both;
  animation-timeline: --zoom-track;
  animation-range: entry 100% exit 0%;
  will-change: transform;
}

.zoom__frame img {
  position: relative;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: var(--radius);
}

.zoom__frame--core {
  --w: 30vw;
  --h: 30vh;
  --x: 0vw;
  --y: 0vh;
  --s: 3.8;
}

.zoom__frame--core img {
  border-radius: 0;
}

.zoom__frame--facade {
  --w: 24vw;
  --h: 14vh;
  --x: 20vw;
  --y: -25vh;
  --s: 5.5;
}

.zoom__frame--terrace {
  --w: 26vw;
  --h: 15vh;
  --x: -20vw;
  --y: -26vh;
  --s: 5;
}

.zoom__frame--yard {
  --w: 22vw;
  --h: 18vh;
  --x: -27vw;
  --y: 6vh;
  --s: 5;
}

.zoom__frame--bedroom {
  --w: 20vw;
  --h: 16vh;
  --x: 27vw;
  --y: 4vh;
  --s: 5;
}

.zoom__frame--bath {
  --w: 22vw;
  --h: 15vh;
  --x: -18vw;
  --y: 30vh;
  --s: 6;
}

.zoom__frame--lounge {
  --w: 20vw;
  --h: 17vh;
  --x: 20vw;
  --y: 31vh;
  --s: 6.5;
}

.zoom__mark {
  position: absolute;
  z-index: 3;
  inset: auto 0 0;
  margin: 0;
  padding: 5rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(36, 33, 29, 0) 0%, rgba(36, 33, 29, .82) 100%);
  color: var(--paper);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  opacity: 0;
  animation: zoom-mark linear both;
  animation-timeline: --zoom-track;
  animation-range: entry 100% exit 0%;
}

@media (min-width: 900px) {
  .zoom__track {
    height: 360svh;
  }

  .zoom__frame--core {
    --w: 25vw;
    --h: 25vh;
    --s: 4.5;
  }

  .zoom__frame--facade {
    --w: 20vw;
    --h: 14vh;
    --x: 5vw;
    --y: -30vh;
    --s: 5;
  }

  .zoom__frame--terrace {
    --w: 13vw;
    --h: 22vh;
    --x: -27vw;
    --y: -8vh;
    --s: 6;
  }

  .zoom__frame--yard {
    --w: 13vw;
    --h: 20vh;
    --x: 27vw;
    --y: -4vh;
    --s: 5;
  }

  .zoom__frame--bedroom {
    --w: 11vw;
    --h: 18vh;
    --x: 6vw;
    --y: 30vh;
    --s: 6.5;
  }

  .zoom__frame--bath {
    --w: 12vw;
    --h: 16vh;
    --x: -22vw;
    --y: 28vh;
    --s: 8;
  }

  .zoom__frame--lounge {
    --w: 11vw;
    --h: 19vh;
    --x: 25vw;
    --y: 26vh;
    --s: 9;
  }
}

.no-timeline [class],
.no-timeline .hero__media img,
.no-timeline .hero__sky::after {
  animation-name: none;
}

.js-timeline .hero__head,
.js-timeline .hero__media,
.js-timeline .hero__media img,
.js-timeline .hero__word,
.js-timeline .hero__caption,
.js-timeline .hero__sky::after,
.js-timeline .zoom__frame,
.js-timeline .zoom__mark,
.js-timeline .belt__lane {
  animation-timeline: auto;
  animation-duration: 1s;
  animation-delay: calc(var(--p, 0) * -1s);
  animation-play-state: paused;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

.no-timeline .hero {
  height: 100svh;
}

.no-timeline .hero__viewport {
  position: relative;
}

.no-timeline .hero__word {
  display: none;
}

.no-timeline .zoom__track,
.no-timeline .belt__track {
  height: auto;
}

.no-timeline .zoom__viewport {
  position: relative;
  height: auto;
  padding: 0 var(--gutter) var(--sec-pad);
  overflow: visible;
  background: none;
}

.no-timeline .zoom__stage {
  display: grid;
  position: static;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.no-timeline .zoom__frame {
  position: static;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--sand-deep);
}

.no-timeline .zoom__frame img {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
}

.no-timeline .zoom__mark {
  position: static;
  padding: 0;
  margin-top: 1.25rem;
  background: none;
  color: var(--ink-soft);
  opacity: 1;
}

.no-timeline .belt__viewport {
  position: static;
  height: auto;
}

.no-timeline .belt__lane {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.no-timeline .view {
  border-radius: 0;
}