/* v27: a few bold hand-drawn contours precede the detailed photographic door. */
.portal.ds-queued > :is(.door-art, .dm-aperture, .dm-spill, .dm-leaf),
.portal.ds-drawing > :is(.door-art, .dm-aperture, .dm-spill, .dm-leaf),
.portal.ds-drawn > :is(.door-art, .dm-aperture, .dm-spill, .dm-leaf) {
  opacity: 0 !important;
  transition: none !important;
}
.portal:is(.ds-queued, .ds-drawing, .ds-drawn)::before,
.portal:is(.ds-queued, .ds-drawing, .ds-drawn)::after {
  opacity: 0 !important;
  transition: none !important;
}
.portal.ds-revealing > :is(.door-art, .dm-aperture, .dm-spill, .dm-leaf) {
  transition: opacity 1400ms cubic-bezier(.4,0,.2,1), transform 1000ms cubic-bezier(.45,0,.25,1);
}
.portal.ds-revealing::before,
.portal.ds-revealing::after {
  transition: opacity 1400ms cubic-bezier(.4,0,.2,1);
}
.ds-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  overflow: visible;
  pointer-events: none;
  opacity: 1;
  filter: drop-shadow(0 1px 1px #15372e99);
  animation: ds-pencil-appear 300ms ease-out;
}
.ds-pencil-stroke {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  opacity: 0;
  animation: ds-pencil-line var(--ds-stroke-duration) cubic-bezier(.4,0,.25,1) var(--ds-stroke-delay) both;
}
/* Freeze the complete study through its hold and fade, including after a slow
   first paint. Changing phase must never restart a panel or the final handle. */
.portal:is(.ds-drawn, .ds-revealing) .ds-pencil-stroke {
  animation: none;
  stroke-dashoffset: 0;
  opacity: var(--ds-pencil-opacity);
}
.portal.ds-revealing > .ds-outline {
  opacity: 0;
  transition: opacity 1400ms cubic-bezier(.4,0,.2,1);
}
@keyframes ds-pencil-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-pencil-line {
  0% { stroke-dashoffset: 100; opacity: 0; }
  8% { opacity: var(--ds-pencil-opacity); }
  100% { stroke-dashoffset: 0; opacity: var(--ds-pencil-opacity); }
}
@media (prefers-reduced-motion: reduce) {
  .portal:is(.ds-queued, .ds-drawing, .ds-drawn, .ds-revealing) > :is(.door-art, .dm-aperture, .dm-leaf) {
    opacity: 1 !important;
    transition: none !important;
  }
  .ds-outline { display: none; animation: none; }
  .ds-pencil-stroke { animation: none; }
}