/* The daily story, moving.
 *
 * The 52 drawings in daily.html are all built from the same three
 * helpers — fig() for a person, sfx() for a sound word, P() for the panel
 * itself — so giving those three a class each puts motion into every
 * scene at once, including the ones nobody has drawn yet.
 *
 * Two rules shaped all of it.
 *
 * IT HAS TO SETTLE. A panel that keeps moving is a panel a child cannot
 * read the words under. Everything here either plays once on arrival and
 * stops, or breathes so slowly you would have to look for it. Nothing
 * loops fast, nothing flashes, nothing slides across the text.
 *
 * IT HAS TO BE OPTIONAL. Anyone who has asked their device for less
 * motion gets a still picture and loses nothing: the drawings were
 * always the point, the movement is a bonus on top.
 */

/* --- the panel arriving ------------------------------------------------
 * Four ways in, chosen by the day number, so today does not look like
 * yesterday. It is the same drawing either way; only the way it lands
 * changes. */

.dr-panel { position: relative; }
.dr-panel svg { transform-origin: 50% 55%; }

.dr-panel.is-in svg { animation: dr-enter-0 900ms cubic-bezier(.2,.7,.3,1) both; }
.dr-panel.mood-1.is-in svg { animation-name: dr-enter-1; }
.dr-panel.mood-2.is-in svg { animation-name: dr-enter-2; }
.dr-panel.mood-3.is-in svg { animation-name: dr-enter-3; }

@keyframes dr-enter-0 {   /* the camera pushing in */
  from { transform: scale(1.07); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
@keyframes dr-enter-1 {   /* a pan across */
  from { transform: translateX(-5%) scale(1.05); opacity: 0; }
  to   { transform: translateX(0)   scale(1);    opacity: 1; }
}
@keyframes dr-enter-2 {   /* rising into frame */
  from { transform: translateY(5%) scale(1.04); opacity: 0; }
  to   { transform: translateY(0)  scale(1);    opacity: 1; }
}
@keyframes dr-enter-3 {   /* the comic snap */
  0%   { transform: scale(.9) rotate(-1.2deg); opacity: 0; }
  62%  { transform: scale(1.03) rotate(.4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0);        opacity: 1; }
}

/* --- the people --------------------------------------------------------
 * A slow breath, and each figure on a slightly different clock so the
 * three of them are not a chorus line. */

.dr-fig { transform-box: fill-box; transform-origin: 50% 100%; }
.dr-panel.is-in .dr-fig { animation: dr-breathe 3.4s ease-in-out 900ms infinite alternate; }
.dr-panel.is-in .dr-fig:nth-of-type(2) { animation-duration: 4.1s; animation-delay: 1.1s; }
.dr-panel.is-in .dr-fig:nth-of-type(3) { animation-duration: 3.8s; animation-delay: 1.3s; }

@keyframes dr-breathe {
  from { transform: translateY(0)      scaleY(1); }
  to   { transform: translateY(-2.5px) scaleY(1.012); }
}

/* --- the sound words ---------------------------------------------------
 * These are the bit a seven-year-old watches for. They land late, after
 * the panel has settled, so they read as the sound happening rather than
 * as part of the furniture. Then they hold still. */

.dr-sfx { transform-box: fill-box; transform-origin: 50% 50%; opacity: 0; }
.dr-panel.is-in .dr-sfx { animation: dr-pop 620ms cubic-bezier(.2,1.5,.4,1) 520ms both; }

@keyframes dr-pop {
  0%   { opacity: 0; transform: scale(.35) rotate(-9deg); }
  60%  { opacity: 1; transform: scale(1.16) rotate(3deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* --- the air -----------------------------------------------------------
 * The halftone dots every panel already carries, drifting. Twelve
 * seconds for four pixels: not something you notice, something you would
 * miss. */

.dr-dots { animation: dr-drift 12s ease-in-out infinite alternate; }
@keyframes dr-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(4px, 2px); }
}

/* --- today's colour ----------------------------------------------------
 * The panel edge picks up an accent that changes with the day, so the
 * page feels different on Tuesday without anything being redrawn. */

.dr-panel { box-shadow: inset 0 0 0 2px #fff, 0 0 0 0 rgba(0,0,0,0); transition: box-shadow 400ms ease; }
.dr-panel.is-in { box-shadow: inset 0 0 0 2px #fff, 0 6px 0 var(--dr-accent, #ffd21f); }

@media (prefers-reduced-motion: reduce) {
  .dr-panel.is-in svg,
  .dr-panel.is-in .dr-fig,
  .dr-panel.is-in .dr-sfx,
  .dr-dots { animation: none !important; }
  .dr-sfx { opacity: 1; }
  .dr-panel, .dr-panel.is-in { transition: none; }
}