/*
 * Motion layer
 *
 * Shared styles for the per-post motion pieces (assets/js/motion).
 * Everything here is inert without JavaScript: figure slots stay collapsed
 * and nothing is hidden unless html.mg-js is set.
 */

/* ---------------------------------------------------------------- figures */

/* A slot in a post's HTML that a figure is drawn into. */
.mg-fig {
  display: none;
}

html.mg-js .mg-fig {
  display: block;
  position: relative;
  width: 100%;
  height: var(--mg-h, 160px);
  margin: 0 auto 30px;
  opacity: 0;
  transition: opacity 0.9s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

html.mg-js .mg-fig.mg-on {
  opacity: 1;
}

@media screen and (max-width: 567px) {
  html.mg-js .mg-fig {
    height: var(--mg-h-s, var(--mg-h, 160px));
  }
}

.mg-fig > canvas,
.mg-fig > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* A figure that may run wider than the text column on large screens. */
@media screen and (min-width: 900px) {
  html.mg-js .mg-fig.mg-fig--wide {
    width: min(820px, calc(100vw - 80px));
    left: 50%;
    margin-left: calc(min(820px, 100vw - 80px) / -2);
  }
}

/* A figure the reader can touch: keep vertical scrolling, hand us the rest. */
.mg-fig.mg-fig--touch {
  touch-action: pan-y;
  cursor: crosshair;
}

/* A slot placed between paragraphs rather than above the text. */
html.mg-js .mg-fig.mg-fig--inline {
  margin: 34px auto;
}

/* The empty featured-image slot keeps its place when a figure moves in. */
html.mg-js .post .post-thumbnail:has(.mg-fig) {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ cloak */

/*
 * data-mg-cloak hides an element until its post module takes over, so an
 * effect never starts from a flash of the finished state. If the module
 * never arrives the element shows itself after a moment.
 */
@media (prefers-reduced-motion: no-preference) {
  html.mg-js [data-mg]:not(.mg-live) [data-mg-cloak] {
    opacity: 0;
    animation: mg-uncloak 1ms linear 4s forwards;
  }
}

@keyframes mg-uncloak {
  to { opacity: 1; }
}

/* ------------------------------------------------------------------- text */

/* Words and characters produced by split(). */
.mg-w {
  display: inline-block;
  white-space: nowrap;
}

.mg-c {
  display: inline-block;
}

/* Block caret for typed text. Takes no room, so text never shifts when it goes. */
.mg-caret {
  display: inline-block;
  position: relative;
  width: 0;
  height: 0;
  vertical-align: baseline;
}

.mg-caret::after {
  content: "";
  position: absolute;
  left: 2px;
  bottom: -0.16em;
  width: 0.56em;
  height: 1.06em;
  background: var(--accent);
  animation: mg-blink 1.06s steps(1) infinite;
}

@keyframes mg-blink {
  50% { opacity: 0; }
}

/* An underline that draws itself: add .is-on to run it. */
.mg-u {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: 2px;
}

.mg-u.is-on {
  background-size: 100% 1px;
}

/* Editor-style dotted variant of the drawn underline. */
.mg-u.mg-u--dots {
  background-image: radial-gradient(circle, currentColor 1px, transparent 1.3px);
  background-repeat: repeat-x;
  background-position: 0 100%;
  background-size: 5px 3px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.mg-u.mg-u--dots.is-on {
  background-size: 5px 3px;
  clip-path: inset(0 0 0 0);
}

/* A soft marker stroke behind a phrase: add .is-on to run it. */
.mg-hl {
  --mg-hl: var(--accent);
  background-image: linear-gradient(
    color-mix(in srgb, var(--mg-hl) 26%, transparent),
    color-mix(in srgb, var(--mg-hl) 26%, transparent)
  );
  background-repeat: no-repeat;
  background-position: 0 85%;
  background-size: 0% 55%;
  transition: background-size 1s cubic-bezier(0.22, 1, 0.36, 1), color 0.6s ease;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.mg-hl.is-on {
  background-size: 100% 55%;
  color: var(--tx);
}

/* Figure captions and labels set in HTML share the mono voice of the page. */
.mg-label {
  font-size: 11px;
  letter-spacing: 0.4px;
  color: var(--tx-3);
}

@media (prefers-reduced-motion: reduce) {
  html.mg-js .mg-fig,
  .mg-u,
  .mg-hl {
    transition: none;
  }

  .mg-caret::after {
    animation: none;
  }
}