/* The cut-paper daycare scene (server/templates/partials/daycare-scene.html),
   shared by the Age of Robots page, /membership, and /welcome. Moved here
   from aor.css on 30 Sep 2026. Relies on marketing.css + paper.css (palette,
   hanging pieces, schoolhouse, balloon) and the Permanent Marker font.
   Pieces are sized in cqi of .dc-scene. Animations run only while the box is
   on screen (.is-live, set by assets/daycare-scene.js). */
.dc-box {
  --marker: "Permanent Marker", var(--display);
}
/* The shadow box. */
.dc-box {
  position: relative;
  width: min(1240px, calc(100% - 40px));
  margin: 48px auto 0;
}
.dc-scene {
  --wall: #fbf2df;
  --roof: #8f3a22;
  --window: #f5d833;
  --ground: #2a2e27;
  --trim: var(--yellow);
  --roof-deep: #7a2f1a;
  --cloud: #fcf6ea;
  --cloud-edge: #e6d7bb;
  position: relative;
  isolation: isolate;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: 26px;
  container-type: inline-size;
  box-shadow:
    0 2px 2px rgb(60 40 20 / 18%),
    0 50px 70px -40px rgb(36 40 33 / 75%);
}
.dc-scene::after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 8;
  border: 24px solid #efe3c8;
  border-radius: 34px;
  box-shadow:
    inset 0 0 0 1px rgb(80 55 30 / 22%),
    inset 0 6px 26px 4px rgb(60 38 18 / 42%);
  filter: url(#deckle);
  pointer-events: none;
}
.dc-scene > * {
  position: absolute;
}
.dc-scene .diorama-grain {
  z-index: 7;
}
.dc-sky {
  inset: 0;
  background:
    radial-gradient(circle at 50% 12%, rgb(255 236 150 / 45%), transparent 40%),
    linear-gradient(#f1d9b2, #fbf2df 72%);
}

/* The sky, borrowed from the daycare hero. */
.dc-garland {
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 7cqi;
  overflow: visible;
  filter: drop-shadow(0 4px 3px rgb(90 50 15 / 25%));
}
.dc-bunting-line {
  fill: none;
  stroke: var(--string);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
.dc-bunting {
  fill: var(--rust);
}
.dc-scene .hanging-sun {
  z-index: 1;
  left: 27cqi;
  width: 11cqi;
}
.dc-scene .hanging-sun .hang-sway {
  --len: 1cqi;
}
.dc-scene .hanging-cloud {
  z-index: 1;
}
.dc-hcloud-1 {
  left: 7cqi;
  width: 13cqi;
}
.dc-hcloud-1 .hang-sway {
  --len: 5cqi;
  --sway: 8s;
}
.dc-hcloud-2 {
  left: 58cqi;
  width: 9cqi;
}
.dc-hcloud-2 .hang-sway {
  --len: 11cqi;
  --sway: 9s;
  animation-delay: -3s;
}
.dc-scene .hanging-mobile {
  z-index: 1;
  left: 84cqi;
  width: 11cqi;
}
.dc-scene .hanging-mobile .hang-sway {
  --len: 3cqi;
}
/* The balloon drifts across the whole sky and back. */
.dc-scene .balloon {
  z-index: 2;
  left: 16cqi;
  top: 15cqi;
  width: 7.5cqi;
  animation: dc-balloon-drift 46s ease-in-out infinite alternate;
}
@keyframes dc-balloon-drift {
  from {
    translate: 0 0;
  }
  to {
    translate: 54cqi -4cqi;
  }
}
/* A kite bobbing on the breeze, its string running down to the boy. */
.dc-kite {
  z-index: 2;
  left: 22cqi;
  top: 20cqi;
  width: 4.6cqi;
  transform-origin: 50% 100%;
  animation: dc-kite 4.5s ease-in-out infinite alternate;
}
.dc-kite svg {
  display: block;
  width: 100%;
  overflow: visible;
  filter: drop-shadow(0 6px 5px rgb(90 50 15 / 25%));
}
.dc-kite .kite-tail {
  fill: none;
  stroke: var(--string);
  stroke-width: 3;
}
.dc-kite .kite-bow {
  fill: var(--rust);
}
.dc-kite .kite-a {
  fill: var(--rust);
}
.dc-kite .kite-b {
  fill: var(--yellow);
}
@keyframes dc-kite {
  from {
    rotate: -8deg;
    translate: 0 0;
  }
  to {
    rotate: 7deg;
    translate: 1.5cqi -1cqi;
  }
}

/* Hills, schoolhouse, lawn. */
.dc-hill {
  left: -1%;
  width: 102%;
}
.dc-hill-back {
  z-index: 3;
  bottom: 12cqi;
  height: 20cqi;
  filter: drop-shadow(0 -3px 6px rgb(90 50 15 / 25%));
}
.dc-hill-back path {
  fill: #e0a947;
}
.dc-school {
  z-index: 3;
  left: 37cqi;
  right: auto;
  bottom: 12.4cqi;
  width: 26cqi;
  transform: none;
  translate: none;
  filter: drop-shadow(0 14px 12px rgb(60 30 10 / 30%));
}
.dc-hill-front {
  z-index: 4;
  bottom: 0;
  height: 14cqi;
  filter: drop-shadow(0 -4px 8px rgb(60 25 10 / 35%));
}
.dc-lawn {
  fill: var(--rust);
}
.dc-walk {
  fill: #e9d3a8;
}
.dc-walk-stones {
  fill: none;
  stroke: #cfae78;
  stroke-width: 3;
  stroke-dasharray: 6 8;
}

/* Idea babies waddle up the walk and in the door, one after another. */
.dc-parade {
  inset: 0;
  z-index: 5;
}
.dc-parade img {
  position: absolute;
  left: 50cqi;
  bottom: 0;
  width: 4.6cqi;
  height: auto;
  max-width: none;
  translate: -50% 0;
  opacity: 0;
  filter: drop-shadow(0 5px 4px rgb(40 20 5 / 40%));
  animation:
    dc-walk-in 8.1s linear var(--d) infinite,
    dc-waddle 0.45s ease-in-out infinite alternate;
}
@keyframes dc-walk-in {
  0% {
    bottom: -6cqi;
    scale: 1.3;
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  78% {
    bottom: 12.4cqi;
    scale: 0.55;
    opacity: 1;
  }
  90%,
  100% {
    bottom: 12.8cqi;
    scale: 0.45;
    opacity: 0;
  }
}
@keyframes dc-waddle {
  from {
    rotate: -7deg;
  }
  to {
    rotate: 7deg;
  }
}

/* The kids in their robot heads. */
.dc-kid {
  z-index: 6;
  bottom: 1.5cqi;
  width: auto;
  max-width: none;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 8px rgb(36 25 15 / 38%));
}
/* The boy flies the kite (arm up), bouncing on his toes. */
.dc-kid-boy {
  left: 21cqi;
  height: 19cqi;
  animation: dc-bounce 1.3s ease-in-out infinite alternate;
}
.dc-kid-little {
  left: 40.5cqi;
  height: 13cqi;
  animation: cheer 2.6s ease-in-out infinite;
}
.dc-greeter {
  left: 56cqi;
  height: 17cqi;
  animation: dc-greet 2.8s ease-in-out infinite;
}
@keyframes dc-bounce {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 -0.8cqi;
  }
}
@keyframes dc-greet {
  0%,
  60%,
  100% {
    rotate: 0deg;
  }
  70% {
    rotate: -5deg;
  }
  80% {
    rotate: 4deg;
  }
  90% {
    rotate: -3deg;
  }
}
/* The trio can't stop giggling. */
.dc-trio {
  z-index: 6;
  right: 6cqi;
  bottom: 2cqi;
  width: 12cqi;
  height: auto;
  max-width: none;
  transform-origin: 50% 100%;
  filter: drop-shadow(0 8px 7px rgb(36 25 15 / 32%));
  animation: giggle 1.7s ease-in-out infinite;
}

/* A hand-lettered cardboard sign staked in the yard. */
.dc-sign {
  z-index: 6;
  left: 7cqi;
  bottom: 2cqi;
  display: flex;
  flex-direction: column;
  align-items: center;
  rotate: -7deg;
  transform-origin: 50% 100%;
  animation: dc-sign-wobble 6s ease-in-out infinite;
}
.dc-sign-board {
  position: relative;
  padding: 1.3cqi 1.8cqi 1.4cqi;
  background:
    repeating-linear-gradient(90deg, rgb(120 70 20 / 10%) 0 2px, transparent 2px 7px),
    #c99a5e;
  color: #1b1b1b;
  font: 400 2.1cqi/1.02 var(--marker);
  text-align: center;
  text-transform: uppercase;
  clip-path: polygon(0 4%, 12% 0, 30% 3%, 55% 0, 78% 4%, 100% 1%, 98% 50%, 100% 97%, 70% 100%, 40% 96%, 12% 100%, 2% 95%);
  filter: drop-shadow(0 6px 6px rgb(40 20 5 / 40%));
}
.dc-sign-board b {
  display: inline-block;
  margin-top: 0.2cqi;
  padding: 0 0.5cqi;
  background: var(--yellow);
  color: #c9331e;
  font-weight: 400;
  font-size: 1.25em;
  rotate: -3deg;
}
.dc-sign-stake {
  width: 0.9cqi;
  height: 5cqi;
  background: #8f5626;
}
@keyframes dc-sign-wobble {
  0%,
  100% {
    rotate: -7deg;
  }
  50% {
    rotate: -4deg;
  }
}
.dc-caption {
  margin: 16px 0 0;
  text-align: center;
  font: italic 500 16px/1.3 var(--display);
  color: var(--rust-deep);
}

/* Below the box: a small report card and a small enrollment slip. */

.dc-box:not(.is-live) .dc-scene *,
.dc-box:not(.is-live) .dc-scene *::before {
  animation-play-state: paused;
}
/* On phones: zoom into the middle of the scene so the kids stay a good size. */
@media (max-width: 700px) {
  .dc-box {
    width: 100%;
    overflow: hidden;
    padding-bottom: 10px;
  }
  .dc-scene {
    width: 150%;
    margin-left: -25%;
    border-radius: 0;
    box-shadow: none;
  }
  .dc-scene::after {
    display: none;
  }
  .dc-scene .hanging-sun {
    left: 30cqi;
  }
  .dc-sign {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dc-scene *,
  .dc-scene *::before {
    animation: none !important;
  }
  .dc-parade img {
    opacity: 1;
    bottom: 3cqi;
  }
  .dc-parade img:nth-child(1) {
    left: 46cqi;
  }
  .dc-parade img:nth-child(3) {
    left: 54cqi;
  }
}