/* Bibishox — project layer on top of Terracotta Home.
   The cloud layer of the aerial renders: soft clouds drift behind the hero and the prologue. */

.th--motif-cloud .th-hero--doorway,
.th--motif-cloud .th-prologue { position: relative; isolation: isolate; }
.th--motif-cloud .th-hero--doorway::before,
.th--motif-cloud .th-prologue::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 10% -10% 0 30%;
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, .9), transparent) 10% 30% / 46% 34% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .8), transparent) 60% 60% / 56% 38% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .7), transparent) 90% 20% / 40% 30% no-repeat;
  filter: blur(6px);
  animation: bx-drift 38s linear infinite alternate;
  pointer-events: none;
}
.th--motif-cloud .th-prologue::before { inset: 0 -20% 0 20%; opacity: .8; animation-duration: 46s; }
@keyframes bx-drift { to { transform: translateX(-12%); } }
@media (prefers-reduced-motion: reduce) { .th--motif-cloud .th-hero--doorway::before, .th--motif-cloud .th-prologue::before { animation: none; } }

/* the bronze cornice: a thin bronze cap above the doorway */
.th--motif-cloud .th-doorway::after {
  content: '';
  position: absolute;
  left: 18%;
  right: 18%;
  top: -18px;
  height: 3px;
  border-radius: 3px;
  background: var(--pdx-accent);
}