/* The animated illustration supplies the decoration; copy uses theme tokens. */
.how-section { overflow: clip; padding-block: clamp(5rem,7vw,7rem) clamp(4rem,6vw,6rem); background: var(--cream); }
.imagination-inner { text-align: center; }
.imagination-inner h2 {
  position: absolute;
  top: 0;
  left: 50%;
  width: max-content;
  max-width: 70%;
  transform: translateX(-50%);
  z-index: 1;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(2.5rem,4.7vw,4.25rem);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -.045em;
}
.imagination-inner h2 > * { display: block; }
.imagination-inner h2 em { color: var(--moonlight); }
.imagination-stage { position: relative; width: 100%; margin: 0 auto; padding-top: 6rem; }
.imagination-film {
  position: relative;
  aspect-ratio: 5 / 2;
  /* Blend the encoded video's outermost pixels into the page palette. */
  mask-image: linear-gradient(to right,transparent,#000 2%,#000 98%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 97%,transparent);
  mask-composite: intersect;
}
.imagination-film img,.imagination-film video { display: block; width: 100%; height: 100%; object-fit: contain; }
.imagination-film picture { display: block; height: 100%; }
.imagination-film video { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.imagination-film video.is-ready { opacity: 1; }
@media (max-width: 54em) {
  .how-section { padding-block: 4.5rem 3.5rem; }
  .imagination-inner { width: min(100% - 2rem,29rem); }
  .imagination-stage { padding-top: 0; }
  .imagination-inner h2 {
    position: relative;
    inset: auto;
    width: auto;
    max-width: none;
    transform: none;
    font-size: clamp(1.85rem,8.3vw,3rem);
  }
  .imagination-film { aspect-ratio: 8 / 9; margin-top: 2rem; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Only JavaScript arms the entrance; static content stays visible by default. */
  .imagination-pending.is-revealed h2 > * {
    transition: opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1);
  }
  .imagination-pending.is-revealed h2 em { transition-delay: .14s; }
  .imagination-pending.is-revealed .imagination-film {
    transition: opacity 1.2s ease .22s,transform 1.4s cubic-bezier(.2,.7,.2,1) .22s;
  }
  .imagination-pending:not(.is-revealed) h2 > *,
  .imagination-pending:not(.is-revealed) .imagination-film { opacity: 0; transform: translateY(2rem); }
}
@media (prefers-reduced-motion: reduce) {
  .imagination-film video { display: none; }
}