/* The Engraving: same source contours and 8-second timing as compose.js. */
.de-engraving-svg { display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
.de-engraving-static { display: inline; }
.de-engraving-animated { display: none; opacity: 1; }
.engraving-is-playing .de-engraving-static { display: none; }
.engraving-is-playing .de-engraving-animated { display: inline; }
.de-engraving-stroke { stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0; }
.de-engraving-fill { clip-path: inset(0 100% 0 0); }
.de-engraving-fill-skull-ivory { clip-path: inset(0 0 100% 0); }
.de-engraving-detail { opacity: 0; }
.engraving-is-playing .de-engraving-stroke,
.engraving-is-playing .de-engraving-fill,
.engraving-is-playing .de-engraving-detail {
  animation-duration: 8s;
  animation-timing-function: cubic-bezier(.4, 0, .6, 1);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
.engraving-is-paused .de-engraving-stroke,
.engraving-is-paused .de-engraving-fill,
.engraving-is-paused .de-engraving-detail { animation-play-state: paused; }

.engraving-is-playing .de-engraving-outline-border-outer { animation-name: de-engraving-outline-border-outer; }
@keyframes de-engraving-outline-border-outer {
  0%, 1.4875% { stroke-dashoffset: 1; opacity: 0; }
  1.5% { stroke-dashoffset: 1; opacity: 1; }
  21.5%, 33.75% { stroke-dashoffset: 0; opacity: 1; }
  44.375%, 71.875% { stroke-dashoffset: 0; opacity: 0; }
  76.875%, 78.75% { stroke-dashoffset: 0; opacity: 1; }
  96.25% { stroke-dashoffset: 1; opacity: 1; }
  96.2625%, 100% { stroke-dashoffset: 1; opacity: 0; }
}

.engraving-is-playing .de-engraving-outline-border-inner { animation-name: de-engraving-outline-border-inner; }
@keyframes de-engraving-outline-border-inner {
  0%, 3.4875% { stroke-dashoffset: 1; opacity: 0; }
  3.5% { stroke-dashoffset: 1; opacity: 1; }
  21.875%, 33.75% { stroke-dashoffset: 0; opacity: 1; }
  44.375%, 71.875% { stroke-dashoffset: 0; opacity: 0; }
  76.875%, 78.75% { stroke-dashoffset: 0; opacity: 1; }
  96.25% { stroke-dashoffset: 1; opacity: 1; }
  96.2625%, 100% { stroke-dashoffset: 1; opacity: 0; }
}

.engraving-is-playing .de-engraving-outline-d-outer { animation-name: de-engraving-outline-d-outer; }
@keyframes de-engraving-outline-d-outer {
  0%, 3.4875% { stroke-dashoffset: 1; opacity: 0; }
  3.5% { stroke-dashoffset: 1; opacity: 1; }
  22.25%, 33.75% { stroke-dashoffset: 0; opacity: 1; }
  44.375%, 71.875% { stroke-dashoffset: 0; opacity: 0; }
  76.875%, 77.5% { stroke-dashoffset: 0; opacity: 1; }
  92.25% { stroke-dashoffset: 1; opacity: 1; }
  92.2625%, 100% { stroke-dashoffset: 1; opacity: 0; }
}

.engraving-is-playing .de-engraving-outline-d-inner { animation-name: de-engraving-outline-d-inner; }
@keyframes de-engraving-outline-d-inner {
  0%, 5.4875% { stroke-dashoffset: 1; opacity: 0; }
  5.5% { stroke-dashoffset: 1; opacity: 1; }
  22.625%, 33.75% { stroke-dashoffset: 0; opacity: 1; }
  44.375%, 71.875% { stroke-dashoffset: 0; opacity: 0; }
  76.875%, 77.5% { stroke-dashoffset: 0; opacity: 1; }
  92.25% { stroke-dashoffset: 1; opacity: 1; }
  92.2625%, 100% { stroke-dashoffset: 1; opacity: 0; }
}

.engraving-is-playing .de-engraving-outline-skull-outer { animation-name: de-engraving-outline-skull-outer; }
@keyframes de-engraving-outline-skull-outer {
  0%, 15.2375% { stroke-dashoffset: 1; opacity: 0; }
  15.25% { stroke-dashoffset: 1; opacity: 1; }
  27.5%, 33.75% { stroke-dashoffset: 0; opacity: 1; }
  44.375%, 71.875% { stroke-dashoffset: 0; opacity: 0; }
  76.5%, 76.5% { stroke-dashoffset: 0; opacity: 1; }
  86.75% { stroke-dashoffset: 1; opacity: 1; }
  86.7625%, 100% { stroke-dashoffset: 1; opacity: 0; }
}

.engraving-is-playing .de-engraving-outline-skull-inner { animation-name: de-engraving-outline-skull-inner; }
@keyframes de-engraving-outline-skull-inner {
  0%, 17.2375% { stroke-dashoffset: 1; opacity: 0; }
  17.25% { stroke-dashoffset: 1; opacity: 1; }
  27.875%, 33.75% { stroke-dashoffset: 0; opacity: 1; }
  44.375%, 71.875% { stroke-dashoffset: 0; opacity: 0; }
  76.5%, 76.5% { stroke-dashoffset: 0; opacity: 1; }
  86.75% { stroke-dashoffset: 1; opacity: 1; }
  86.7625%, 100% { stroke-dashoffset: 1; opacity: 0; }
}

.engraving-is-playing .de-engraving-outline-eye-left-outer { animation-name: de-engraving-outline-eye-left-outer; }
@keyframes de-engraving-outline-eye-left-outer {
  0%, 23.1125% { stroke-dashoffset: 1; opacity: 0; }
  23.125% { stroke-dashoffset: 1; opacity: 1; }
  26.875%, 33.75% { stroke-dashoffset: 0; opacity: 1; }
  44.375%, 71.875% { stroke-dashoffset: 0; opacity: 0; }
  75.375%, 75.375% { stroke-dashoffset: 0; opacity: 1; }
  79.75% { stroke-dashoffset: 1; opacity: 1; }
  79.7625%, 100% { stroke-dashoffset: 1; opacity: 0; }
}

.engraving-is-playing .de-engraving-outline-eye-right-outer { animation-name: de-engraving-outline-eye-right-outer; }
@keyframes de-engraving-outline-eye-right-outer {
  0%, 24.9875% { stroke-dashoffset: 1; opacity: 0; }
  25% { stroke-dashoffset: 1; opacity: 1; }
  28.75%, 33.75% { stroke-dashoffset: 0; opacity: 1; }
  44.375%, 71.875% { stroke-dashoffset: 0; opacity: 0; }
  75.375%, 75.375% { stroke-dashoffset: 0; opacity: 1; }
  79.75% { stroke-dashoffset: 1; opacity: 1; }
  79.7625%, 100% { stroke-dashoffset: 1; opacity: 0; }
}

.engraving-is-playing .de-engraving-outline-nose-outer { animation-name: de-engraving-outline-nose-outer; }
@keyframes de-engraving-outline-nose-outer {
  0%, 27.4875% { stroke-dashoffset: 1; opacity: 0; }
  27.5% { stroke-dashoffset: 1; opacity: 1; }
  31.25%, 33.75% { stroke-dashoffset: 0; opacity: 1; }
  44.375%, 71.875% { stroke-dashoffset: 0; opacity: 0; }
  75.25%, 75.25% { stroke-dashoffset: 0; opacity: 1; }
  78.75% { stroke-dashoffset: 1; opacity: 1; }
  78.7625%, 100% { stroke-dashoffset: 1; opacity: 0; }
}

.engraving-is-playing .de-engraving-fill-border-ivory { animation-name: de-engraving-fill-border-ivory; }
@keyframes de-engraving-fill-border-ivory {
  0%, 21.875% { clip-path: inset(0 100% 0 0); }
  30.75%, 75.75% { clip-path: inset(0 0 0 0); }
  79.375%, 100% { clip-path: inset(0 100% 0 0); }
}

.engraving-is-playing .de-engraving-fill-d-ivory { animation-name: de-engraving-fill-d-ivory; }
@keyframes de-engraving-fill-d-ivory {
  0%, 25.5% { clip-path: inset(0 100% 0 0); }
  32.25%, 75.375% { clip-path: inset(0 0 0 0); }
  78.125%, 100% { clip-path: inset(0 100% 0 0); }
}

.engraving-is-playing .de-engraving-fill-skull-ivory { animation-name: de-engraving-fill-skull-ivory; }
@keyframes de-engraving-fill-skull-ivory {
  0%, 27% { clip-path: inset(0 0 100% 0); }
  31.875%, 73.75% { clip-path: inset(0 0 0 0); }
  77.375%, 100% { clip-path: inset(0 0 100% 0); }
}

.engraving-is-playing .de-engraving-fill-d-red { animation-name: de-engraving-fill-d-red; }
@keyframes de-engraving-fill-d-red {
  0%, 33.125% { clip-path: inset(0 100% 0 0); }
  42.5%, 71.25% { clip-path: inset(0 0 0 0); }
  75.375%, 100% { clip-path: inset(0 100% 0 0); }
}

.engraving-is-playing .de-engraving-fill-border-red { animation-name: de-engraving-fill-border-red; }
@keyframes de-engraving-fill-border-red {
  0%, 37.75% { clip-path: inset(0 100% 0 0); }
  44.75%, 72.375% { clip-path: inset(0 0 0 0); }
  76%, 100% { clip-path: inset(0 100% 0 0); }
}

.engraving-is-playing .de-engraving-detail-eye-left { animation-name: de-engraving-detail-eye-left; }
@keyframes de-engraving-detail-eye-left {
  0%, 27.25% { opacity: 0; }
  29.5%, 73.875% { opacity: 1; }
  76.5%, 100% { opacity: 0; }
}

.engraving-is-playing .de-engraving-detail-eye-right { animation-name: de-engraving-detail-eye-right; }
@keyframes de-engraving-detail-eye-right {
  0%, 29.25% { opacity: 0; }
  31.5%, 73.875% { opacity: 1; }
  76.5%, 100% { opacity: 0; }
}

.engraving-is-playing .de-engraving-detail-nose { animation-name: de-engraving-detail-nose; }
@keyframes de-engraving-detail-nose {
  0%, 31% { opacity: 0; }
  32.5%, 73.875% { opacity: 1; }
  76.5%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  .de-engraving-static, .engraving-is-playing .de-engraving-static { display: inline; }
  .de-engraving-animated, .engraving-is-playing .de-engraving-animated { display: none; }
  .engraving-is-playing .de-engraving-stroke,
  .engraving-is-playing .de-engraving-fill,
  .engraving-is-playing .de-engraving-detail { animation: none; }
}