/* Adapted from onnenkeksi.com/css/style.css.
   The paper texture (img/paperi.png) is hand-made: an aged, deckle-edged sheet
   with a transparent border. It is mapped 100% 100% so the torn edge always
   lands on the edge of the box whatever the quote length. */

@font-face {
  font-family: "Neuland1 Bumpy";
  src: url("fonts/Neuland1Bumpy-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  font-size: 1.4em;
  color: white;
  background-image: url("img/onni.jpg");
  background-color: #8e0202;
  min-height: 100vh;
}

.blockquote {
  font-family: "Neuland1 Bumpy", Helvetica, sans-serif;
  font-size: 1.35em;
  font-weight: 400;
  line-height: 1.5;
  padding: 1.3em 1.5em;
  color: #45403a; /* warm dark grey, 6.3:1 on the paper - see README */
  text-align: center;
  background: url("img/paperi.png") no-repeat 50% 50% / 100% 100%;
  /* follows the torn silhouette; box-shadow would trace the rectangle */
  filter: drop-shadow(6px 8px 5px rgba(58, 0, 0, 0.55));
  transform: rotate(-0.5deg);
  cursor: pointer;
  margin: 15%;
  margin-top: 10%;
  text-shadow: 1px 1px 0 rgba(255, 250, 235, 0.45);
  min-height: 1.4em;
}

h1 {
  margin: 40px;
  text-align: center;
  font: normal 1.8em "Walter Turncoat", Helvetica, sans-serif;
  text-shadow: 0px 0px 13px rgba(255, 255, 255, 1);
}

.foot {
  text-align: center;
  font-size: 0.7em;
  color: #d83536;
}

/* Fly in from the right on load, fly out to the left on request. The two
   directions use different easings: the outgoing paper accelerates away, the
   incoming one decelerates into place.

   Opacity is deliberately held at 1 for most of each flight and dropped only
   over the last stretch. Interpolating opacity across the whole duration makes
   the paper half-faded at the midpoint, so it looks like it dissolves in place
   rather than travelling. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes flyIn {
    0%   { transform: translateX(60%) rotate(-3.5deg); opacity: 0; }
    45%  { opacity: 1; }
    100% { transform: rotate(-0.5deg); opacity: 1; }
  }
  @keyframes flyOut {
    0%   { transform: rotate(-0.5deg); opacity: 1; }
    55%  { opacity: 1; }
    100% { transform: translateX(-60%) rotate(2.5deg); opacity: 0; }
  }
  .fly-in  { animation: flyIn 520ms cubic-bezier(0.22, 0.68, 0.32, 1) both; }
  .fly-out { animation: flyOut 380ms cubic-bezier(0.55, 0.06, 0.68, 0.19) both; }
}

@media (max-width: 600px) {
  .blockquote {
    margin: 10%;
    margin-top: 8%;
    font-size: 1.1em;
  }
  h1 {
    margin: 24px;
  }
}