/* Move the title, accent, and photograph layers independently of their controls. */
body.public-page.dawn-home .dawn-hero-copy {
  animation: none;
}

@media screen and (prefers-reduced-motion: no-preference) {
  body.public-page:is(.dawn-home, .dawn-interior-ui) {
    --dawn-settle-ease: cubic-bezier(.2, .75, .26, 1);
    --dawn-title-travel: 10px;
    --dawn-frame-start: 1.065;
  }

  body.public-page.dawn-home .dawn-hero-title:not(:focus),
  body.public-page.dawn-interior-ui #main :is(h1, .login-card h2):not(:focus, .sr-only) {
    animation: dawn-title-settle 540ms var(--dawn-settle-ease) backwards;
  }

  body.public-page.dawn-home .dawn-hero-note::before,
  body.public-page.dawn-interior-ui .studio-hero-copy .studio-overline::before,
  body.public-page.dawn-interior-ui .studio-section-head[data-motion-seen="true"] .studio-overline::before {
    transform-origin: left center;
    animation: dawn-accent-draw 640ms var(--dawn-settle-ease) backwards;
  }

  body.public-page.dawn-interior-ui .studio-hero-media img {
    animation: dawn-frame-settle 1100ms var(--dawn-settle-ease) backwards;
  }

  /* Interior galleries already receive this marker from public-motion.js. */
  body.public-page.dawn-interior-ui :is(
    .album-card[data-motion-seen="true"] .album-card-media,
    .project-card-dark[data-motion-seen="true"] .project-card-dark-image
  ) img {
    animation: dawn-frame-settle 680ms var(--dawn-settle-ease) backwards;
  }

  /* Tie the artwork to each section's passage through the viewport. */
  @supports (view-timeline-name: --dawn-pass) and (animation-timeline: --dawn-pass) and (animation-range: entry 0% cover 45%) {
    body.public-page.dawn-home .dawn-featured {
      view-timeline-name: --dawn-featured-pass;
    }

    body.public-page.dawn-home .dawn-offerings {
      view-timeline-name: --dawn-offerings-pass;
    }

    body.public-page.dawn-home .dawn-project-image:not([hidden]) {
      animation: dawn-frame-settle auto linear both;
      animation-timeline: --dawn-featured-pass;
      animation-range: entry 0% cover 47%;
    }

    body.public-page.dawn-home .dawn-service-icon svg {
      animation: dawn-icon-settle auto linear both;
      animation-timeline: --dawn-offerings-pass;
      animation-range: entry 0% cover 45%;
    }

    body.public-page.dawn-home :is(.dawn-section-copy, .dawn-services) {
      position: relative;
    }

    body.public-page.dawn-home :is(.dawn-section-copy, .dawn-services)::before {
      content: "";
      position: absolute;
      inset-block-start: -7px;
      inset-inline-start: 0;
      inline-size: 32px;
      block-size: 2px;
      background: var(--dawn-gold, #94621f);
      pointer-events: none;
      transform-origin: left center;
      animation: dawn-accent-draw auto linear both;
    }

    body.public-page.dawn-home .dawn-section-copy::before {
      animation-timeline: --dawn-featured-pass;
      animation-range: entry 0% cover 39%;
    }

    body.public-page.dawn-home .dawn-services::before {
      animation-timeline: --dawn-offerings-pass;
      animation-range: entry 0% cover 39%;
    }
  }
}

@media screen and (max-width: 780px) and (prefers-reduced-motion: no-preference) {
  body.public-page:is(.dawn-home, .dawn-interior-ui) {
    --dawn-title-travel: 6px;
    --dawn-frame-start: 1.04;
  }
}

@keyframes dawn-title-settle {
  from { transform: translateY(var(--dawn-title-travel)); }
  to { transform: none; }
}

@keyframes dawn-accent-draw {
  from { transform: scaleX(.25); }
  to { transform: scaleX(1); }
}

/* Individual scale composes with the existing transform on image hover. */
@keyframes dawn-frame-settle {
  from { scale: var(--dawn-frame-start); }
  to { scale: 1; }
}

@keyframes dawn-icon-settle {
  from { scale: .88; }
  to { scale: 1; }
}