.reveal-enabled :where(
  .home-page .hero > .backdrop,
  .zero-page .hero > .backdrop,
  .technology-page .design-hero-image,
  .contact-page .contact-background,
  .join-page .join-hero > img
) {
  opacity: 0;
  transform: scale(1.045);
  animation: none;
  transition: opacity 1.35s cubic-bezier(.22, 1, .36, 1), transform 1.8s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.reveal-enabled .brand-page .brand-opening-robot {
  filter: opacity(0);
  transform: scale(1.045);
  transition: filter 1.35s cubic-bezier(.22, 1, .36, 1), transform 1.8s cubic-bezier(.22, 1, .36, 1);
  will-change: left, top, width, height, border-radius, filter, transform;
}

.reveal-enabled :where(
  .home-page .hero .eyebrow,
  .home-page .hero .copy-grid,
  .zero-page .hero .eyebrow,
  .zero-page .hero .copy-grid,
  .technology-page .design-title,
  .technology-page .design-copy > *,
  .technology-page .design-rail,
  .brand-page .brand-opening-cn,
  .brand-page .brand-opening-en,
  .brand-page .brand-opening-summary,
  .contact-page .contact-card,
  .contact-page .contact-caption,
  .join-page .join-intro-card,
  .join-page .join-caption,
  .activity-page .activity-hero h1,
  .activity-page .activity-hero > span
) {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s cubic-bezier(.22, 1, .36, 1) .28s, transform .9s cubic-bezier(.22, 1, .36, 1) .28s;
  will-change: opacity, transform;
}

.reveal-enabled.hero-entered :where(
  .home-page .hero > .backdrop,
  .zero-page .hero > .backdrop,
  .technology-page .design-hero-image,
  .contact-page .contact-background,
  .join-page .join-hero > img
) {
  opacity: 1;
  transform: scale(1);
}

.reveal-enabled.hero-entered .brand-page .brand-opening-robot {
  filter: opacity(1);
  transform: scale(1);
}

.reveal-enabled.hero-entered :where(
  .home-page .hero .eyebrow,
  .home-page .hero .copy-grid,
  .zero-page .hero .eyebrow,
  .zero-page .hero .copy-grid,
  .technology-page .design-title,
  .technology-page .design-copy > *,
  .technology-page .design-rail,
  .brand-page .brand-opening-cn,
  .brand-page .brand-opening-en,
  .brand-page .brand-opening-summary,
  .contact-page .contact-card,
  .contact-page .contact-caption,
  .join-page .join-intro-card,
  .join-page .join-caption,
  .activity-page .activity-hero h1,
  .activity-page .activity-hero > span
) {
  opacity: 1;
  transform: translateY(0);
}

.reveal-enabled :where(
  body > main.hero,
  body > main.design-hero,
  body > main.contact-hero,
  body > main > header,
  body > main > section,
  body > section,
  body > footer
) {
  opacity: 0;
  transition: opacity 1.05s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity;
}

.reveal-enabled :where(
  body > main.hero,
  body > main.design-hero,
  body > main.contact-hero,
  body > main > header,
  body > main > section,
  body > section,
  body > footer
).reveal-lift {
  transform: translateY(46px);
  transition: opacity 1.05s cubic-bezier(.22, 1, .36, 1), transform 1.05s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.reveal-enabled :where(
  body > main.hero,
  body > main.design-hero,
  body > main.contact-hero,
  body > main > header,
  body > main > section,
  body > section,
  body > footer
).is-revealed {
  opacity: 1;
}

.reveal-enabled :where(
  body > main.hero,
  body > main.design-hero,
  body > main.contact-hero,
  body > main > header,
  body > main > section,
  body > section,
  body > footer
).reveal-lift.is-revealed {
  transform: translateY(0);
}

/* First screens animate their own visual and copy layers. Keep the containing
   screen visible instead of waiting for the generic section observer. */
.reveal-enabled :where(
  body.home-page > main.hero,
  body.zero-page > main.hero,
  body.technology-page > main.design-hero,
  body.brand-page .brand-opening,
  body.contact-page > main.contact-hero,
  body.join-page > main > .join-hero,
  body.activity-page > main > .activity-hero
) {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal-enabled :where(
    .home-page .hero > .backdrop,
    .zero-page .hero > .backdrop,
    .technology-page .design-hero-image,
    .brand-page .brand-opening-robot,
    .contact-page .contact-background,
    .join-page .join-hero > img,
    .home-page .hero .eyebrow,
    .home-page .hero .copy-grid,
    .zero-page .hero .eyebrow,
    .zero-page .hero .copy-grid,
    .technology-page .design-title,
    .technology-page .design-copy > *,
    .technology-page .design-rail,
    .brand-page .brand-opening-cn,
    .brand-page .brand-opening-en,
    .brand-page .brand-opening-summary,
    .contact-page .contact-card,
    .contact-page .contact-caption,
    .join-page .join-intro-card,
    .join-page .join-caption,
    .activity-page .activity-hero h1,
    .activity-page .activity-hero > span
  ) {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
  .reveal-enabled :where(
    body > main.hero,
    body > main.design-hero,
    body > main.contact-hero,
    body > main > header,
    body > main > section,
    body > section,
    body > footer
  ) {
    opacity: 1;
    transform: none;
    transition: none;
  }
}