/* One semantic title and a decorative, statically blurred copy share one box. */
.newsletter h2 { display: grid; filter: none; }
.newsletter h2 > .focus-layer { display: block; grid-area: 1 / 1; margin: 0; white-space: normal; }
.newsletter .focus-line { display: block; white-space: nowrap; }
.newsletter .focus-line + .focus-line { margin-top: .06em; }
.newsletter .focus-layer-sharp { opacity: 1; }
.newsletter h2 > .focus-layer-blur { display: none; opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .js .newsletter-scene:not(.is-expanded):not(.is-focus-complete) .focus-layer-sharp { opacity: 0; }
  .js .newsletter-scene:not(.is-expanded):not(.is-focus-complete) .focus-layer-blur {
    display: block;
    filter: blur(5px);
    opacity: 1;
  }
  .js .newsletter-scene.is-focus-revealed:not(.is-expanded):not(.is-focus-complete) .focus-layer-sharp {
    animation: newsletter-focus-sharp 640ms cubic-bezier(.333333, 0, .666667, 1) 140ms both;
  }
  .js .newsletter-scene.is-focus-revealed:not(.is-expanded):not(.is-focus-complete) .focus-layer-blur {
    animation: newsletter-focus-soft 640ms cubic-bezier(.333333, 0, .666667, 1) 140ms both;
  }
  .js .newsletter-scene.is-motion-active:not(.is-expanded):not(.is-focus-complete) .focus-layer { will-change: opacity; }

  /* Focus resolves in time; the separate zoom continues to follow scrolling. */
  .motion .newsletter h2 {
    transform: translate3d(0, 45px, 0) scale(.84);
    transform-origin: left center;
    filter: none;
    will-change: auto;
  }
  .motion .newsletter-scene.is-motion-active:not(.is-expanded) h2 { will-change: transform; }
  @supports (animation-timeline: scroll(root block)) and (animation-range: 0px 1px) {
    .motion .newsletter-scene:not(.is-expanded) h2 {
      animation: newsletter-zoom auto cubic-bezier(.333333, 0, .666667, 1) both;
      animation-timeline: scroll(root block);
      animation-range: var(--focus-start, 0px) var(--focus-end, 1px);
    }
  }
}

.newsletter-scene.is-expanded h2 { animation: none; transform: none; will-change: auto; }
.newsletter-scene.is-expanded .focus-layer-sharp { animation: none; opacity: 1; will-change: auto; }
.newsletter-scene.is-expanded .focus-layer-blur { display: none; animation: none; will-change: auto; }

@keyframes newsletter-focus-sharp { from { opacity: 0; } to { opacity: 1; } }
@keyframes newsletter-focus-soft { from { opacity: 1; } to { opacity: 0; } }
@keyframes newsletter-zoom {
  from { transform: translate3d(0, 45px, 0) scale(.84); }
  to { transform: translate3d(0, 0, 0) scale(1.04); }
}