/* Motion for the current Her Becoming composition. */
.becoming-hero-motion .becoming-page .becoming-single-hero::before {
  opacity: 0;
  transform: translate3d(-36px, 26px, 0) scale(.7) rotate(-10deg);
  transform-origin: center;
}

.becoming-hero-motion .becoming-page .becoming-single-hero-copy h1 span {
  opacity: 0;
  transform: translate3d(0, 54px, 0);
}

.becoming-hero-motion .becoming-page .becoming-single-hero-copy h1 strong {
  opacity: 0;
  transform: translate3d(0, -54px, 0);
}

.becoming-hero-motion .becoming-page .becoming-hero-subject {
  opacity: 0;
  clip-path: inset(0 0 88% 0 round 48% 48% 0 0);
  transform: translate3d(54px, 38px, 0) scale(.94);
  transform-origin: right bottom;
}

.becoming-hero-motion .becoming-page .becoming-hero-ribbon {
  opacity: 0;
  transform: scaleX(.18);
  transform-origin: left center;
}

.becoming-hero-motion .becoming-page .becoming-hero-ribbon span {
  opacity: 0;
  transform: translate3d(-18px, 0, 0);
}

.becoming-hero-motion .becoming-page .becoming-hero-handnote {
  opacity: 0;
  transform: translate3d(24px, -14px, 0) rotate(-10deg);
}

.becoming-hero-motion .becoming-page .becoming-single-hero.is-becoming-hero-visible::before {
  animation: becoming-circle-arrive 2.2s .04s cubic-bezier(.16, .72, .18, 1) both;
}

.becoming-hero-motion .becoming-page .becoming-single-hero.is-becoming-hero-visible .becoming-single-hero-copy h1 span {
  animation: becoming-word-rise 2.2s .06s cubic-bezier(.16, .72, .18, 1) both;
}

.becoming-hero-motion .becoming-page .becoming-single-hero.is-becoming-hero-visible .becoming-single-hero-copy h1 strong {
  animation: becoming-word-fall 2.3s .08s cubic-bezier(.16, .72, .18, 1) both;
}

.becoming-hero-motion .becoming-page .becoming-single-hero.is-becoming-hero-visible .becoming-hero-subject {
  animation: becoming-portrait-reveal 2.45s .1s cubic-bezier(.16, .72, .18, 1) both;
}

.becoming-hero-motion .becoming-page .becoming-single-hero.is-becoming-hero-visible .becoming-hero-ribbon {
  animation: becoming-ribbon-open 2.05s .12s cubic-bezier(.2, .72, .2, 1) both;
}

.becoming-hero-motion .becoming-page .becoming-single-hero.is-becoming-hero-visible .becoming-hero-ribbon span {
  animation: becoming-ribbon-copy 1.8s .16s ease both;
}

.becoming-hero-motion .becoming-page .becoming-single-hero.is-becoming-hero-visible .becoming-hero-handnote {
  animation: becoming-note-arrive 2.1s .14s cubic-bezier(.2, .72, .2, 1) both;
}

/* Use one lightweight entrance per section; all selected pieces start together. */
.site-motion-enabled .becoming-page .site-motion-section,
.site-motion-enabled .becoming-page .site-motion-section.motion-from-top,
.site-motion-enabled .becoming-page .site-motion-section.motion-visible,
.site-motion-enabled .becoming-page .site-motion-section.motion-from-top.motion-visible {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.site-motion-enabled .becoming-page .site-motion-section .site-motion-item {
  opacity: 0 !important;
  transform: translate3d(-92px, 24px, 0) scale(.97) !important;
  animation: none !important;
  transition:
    opacity 1.85s cubic-bezier(.18, .58, .2, 1),
    transform 1.85s cubic-bezier(.18, .58, .2, 1) !important;
  will-change: opacity, transform;
}

.site-motion-enabled .becoming-page .site-motion-section.motion-from-top .site-motion-item {
  transform: translate3d(92px, 24px, 0) scale(.97) !important;
}

.site-motion-enabled .becoming-page .site-motion-section.motion-visible .site-motion-item {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

@keyframes becoming-circle-arrive {
  to { opacity: 1; transform: none; }
}

@keyframes becoming-word-rise {
  to { opacity: 1; transform: none; }
}

@keyframes becoming-word-fall {
  to { opacity: 1; transform: none; }
}

@keyframes becoming-portrait-reveal {
  to { opacity: 1; clip-path: inset(0); transform: none; }
}

@keyframes becoming-ribbon-open {
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes becoming-ribbon-copy {
  to { opacity: 1; transform: none; }
}

@keyframes becoming-note-arrive {
  to { opacity: 1; transform: rotate(-4deg); }
}