/* Marg is drawn in SVG so his parts can move: he blinks, sways his
   tail and twitches an ear. Scenes wake up when they scroll into view. */
.marg-scene {
  display: block;
  margin: 0 auto;
  overflow: visible;
}
.marg-scene .fur {
  fill: #a59489;
}
.marg-scene .ear-inside {
  fill: #e5a08a;
}
.marg-scene .cheek {
  fill: #eaa391;
  opacity: 0.55;
}
.marg-scene .nose {
  fill: #d98a78;
}
.marg-scene .eye {
  fill: var(--ink-brown);
}
.marg-scene .tail {
  fill: none;
  stroke: #a59489;
  stroke-width: 6;
  stroke-linecap: round;
}
.marg-scene .page {
  fill: #fcf4e6;
}
.marg-scene .page-edge {
  fill: #efe1cb;
}
.marg-scene .cover {
  fill: #6e7c70;
}
.marg-scene .text-line {
  stroke: #e6d8c4;
  stroke-width: 4;
  stroke-linecap: round;
}
.marg-scene .ink {
  fill: none;
  stroke: var(--walnut);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.marg-scene .handwriting {
  font-family: "Caveat", cursive;
  font-size: 34px;
  fill: var(--walnut);
}
.marg-scene .eye,
.marg-scene .ear,
.marg-scene .tail,
.marg-scene .marg,
.marg-scene .heart,
.marg-scene .sparkles,
.marg-scene .gaze {
  transform-box: fill-box;
}

.eye {
  transform-origin: center;
  animation: marg-blink 4.6s infinite;
}
@keyframes marg-blink {
  0%,
  93%,
  100% {
    transform: scaleY(1);
  }
  96% {
    transform: scaleY(0.1);
  }
}
.tail {
  transform-origin: 0% 100%;
  animation: marg-tail 2.6s ease-in-out infinite alternate;
}
@keyframes marg-tail {
  from {
    transform: rotate(-7deg);
  }
  to {
    transform: rotate(7deg);
  }
}
.ear.twitchy {
  transform-origin: 70% 90%;
  animation: marg-ear 6.5s infinite;
}
@keyframes marg-ear {
  0%,
  88%,
  100% {
    transform: rotate(0);
  }
  91% {
    transform: rotate(-12deg);
  }
  95% {
    transform: rotate(5deg);
  }
}

/* Peeking over the book */
.peek-scene {
  width: min(400px, 86vw);
  margin-bottom: 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.peek-scene .book,
.peek-scene .marg,
.peek-scene .paws,
.peek-scene .sparkles,
.peek-scene .label {
  transition:
    transform 0.7s cubic-bezier(0.34, 1.5, 0.64, 1),
    opacity 0.4s ease;
}
.peek-scene:not(.awake) .book {
  opacity: 0;
  transform: translateY(24px);
}
.peek-scene:not(.awake) .marg {
  opacity: 0;
  transform: translateY(90px);
}
.peek-scene:not(.awake) .paws,
.peek-scene:not(.awake) .label {
  opacity: 0;
}
.peek-scene:not(.awake) .sparkles {
  opacity: 0;
  transform: scale(0.3);
}
.peek-scene .marg {
  transition-delay: 0.5s;
}
.peek-scene .paws {
  transition-delay: 0.85s;
}
.peek-scene .sparkles {
  transform-origin: 0% 100%;
  transition-delay: 1s;
}
.peek-scene .label {
  transition-delay: 1.3s;
}
.peek-scene .arrow {
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
}
.peek-scene.awake .arrow {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.7s ease 1.5s;
}
.peek-scene .heart {
  fill: var(--terracotta);
  opacity: 0;
  transform-origin: center;
}
.peek-scene.hop .marg-body {
  animation: marg-hop 0.55s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.peek-scene.hop .heart {
  animation: marg-heart 1.1s ease-out;
}
@keyframes marg-hop {
  40% {
    transform: translateY(-16px);
  }
}
@keyframes marg-heart {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.4);
  }
  25% {
    opacity: 1;
    transform: translateY(-6px) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(-46px) scale(1);
  }
}

/* Small scenes under the feature texts */
.vignette {
  width: min(210px, 58vw);
  margin: 28px 0 0;
}

/* Writing a heart in the margin */
.writing-scene .gaze {
  transform: translateY(3px);
}
.writing-scene .margin-heart {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: marg-draw-heart 4.5s ease-in-out infinite;
}
@keyframes marg-draw-heart {
  0%,
  8% {
    stroke-dashoffset: 60;
    opacity: 1;
  }
  48%,
  80% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  92%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
.writing-scene .pencil {
  transform-box: fill-box;
  animation: marg-scribble 4.5s ease-in-out infinite;
}
@keyframes marg-scribble {
  0%,
  8%,
  48%,
  100% {
    transform: translate(0, 0);
  }
  18% {
    transform: translate(-3px, -4px);
  }
  28% {
    transform: translate(3px, 2px);
  }
  38% {
    transform: translate(-2px, 4px);
  }
}

/* A lightbulb moment over a new word */
.lightbulb-scene .gaze {
  transform: translateY(-2px);
}
.lightbulb-scene .bulb,
.lightbulb-scene .rays {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition:
    transform 0.6s cubic-bezier(0.34, 1.8, 0.64, 1),
    opacity 0.4s ease;
}
.lightbulb-scene:not(.awake) .bulb {
  opacity: 0;
  transform: scale(0.2);
}
.lightbulb-scene:not(.awake) .rays {
  opacity: 0;
}
.lightbulb-scene .bulb {
  transition-delay: 0.4s;
}
.lightbulb-scene .rays {
  transition-delay: 0.8s;
}
.lightbulb-scene .word {
  stroke: #cbb79f;
}
.lightbulb-scene .word-circle {
  stroke: var(--terracotta);
  stroke-width: 2.2;
  stroke-dasharray: 90;
  stroke-dashoffset: 90;
}
.lightbulb-scene.awake .word-circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.8s ease 1.1s;
}
.lightbulb-scene.awake .rays {
  transform-origin: center;
  animation: marg-rays 3.2s ease-in-out 1.6s infinite;
}
@keyframes marg-rays {
  0%,
  70%,
  100% {
    transform: scale(1);
  }
  80% {
    transform: scale(1.15);
  }
}
.lightbulb-scene .glass {
  fill: #f6d58a;
}

/* Asleep on a book in the footer */
.sleeping-scene {
  width: 74px;
  margin: 0;
  flex-shrink: 0;
}
.sleeping-scene .sleeper {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: marg-breathe 3.2s ease-in-out infinite alternate;
}
@keyframes marg-breathe {
  to {
    transform: scaleY(1.04);
  }
}
.sleeping-scene .snore {
  font-family: "Caveat", cursive;
  fill: var(--walnut);
  opacity: 0;
  animation: marg-snore 3.6s ease-out infinite;
}
.sleeping-scene .snore:nth-of-type(2) {
  animation-delay: 1.2s;
}
.sleeping-scene .snore:nth-of-type(3) {
  animation-delay: 2.4s;
}
@keyframes marg-snore {
  0% {
    opacity: 0;
    transform: translate(0, 6px);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(10px, -14px);
  }
}

/* Reading on a stack of books */
.reading-scene {
  width: min(200px, 56vw);
  margin-bottom: 20px;
}
.reading-scene .gaze {
  animation: marg-gaze 7s ease-in-out infinite;
}
@keyframes marg-gaze {
  0%,
  62%,
  100% {
    transform: translateY(4px);
  }
  68%,
  90% {
    transform: translateY(-1px);
  }
}
.reading-scene .sparkles {
  transform-origin: 0% 100%;
  animation: marg-notice 7s ease-out infinite;
}
@keyframes marg-notice {
  0%,
  66%,
  92%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
  70%,
  86% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marg-scene *,
  .marg-scene .arrow {
    animation: none !important;
    transition: none !important;
  }
  .peek-scene .arrow,
  .lightbulb-scene .word-circle {
    stroke-dashoffset: 0;
  }
}

@media (max-width: 760px) {
  .vignette {
    margin: 24px auto 0;
  }
}

/* Two Margs trading margins: they walk in from each side with their notes.
   The friend is tinted like in the app. */
.trade-scene {
  width: min(360px, 86vw);
}
.trade-scene .fur.friend {
  fill: #8c8d8f;
}
.trade-scene .ear-inside.friend {
  fill: #92a9bb;
}
.trade-scene .nose.friend {
  fill: #7d97ab;
}
.trade-scene .tail.friend {
  stroke: #8c8d8f;
}
.trade-scene .walker,
.trade-scene .waddle {
  transform-box: fill-box;
}
.trade-scene .walker {
  transition:
    transform 1.2s cubic-bezier(0.25, 0.8, 0.35, 1),
    opacity 0.4s ease;
}
.trade-scene:not(.awake) .from-left {
  opacity: 0;
  transform: translateX(-80px);
}
.trade-scene:not(.awake) .from-right {
  opacity: 0;
  transform: translateX(80px);
}
.trade-scene.awake .waddle {
  transform-origin: 50% 100%;
  animation: marg-waddle 0.3s ease-in-out 4 alternate;
}
@keyframes marg-waddle {
  from {
    transform: rotate(-4deg);
  }
  to {
    transform: translateY(-4px) rotate(4deg);
  }
}
.trade-scene .notes {
  fill: none;
  stroke: #8a7466;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trade-scene .notes.accent {
  stroke: var(--terracotta);
}