/* Built by scripts/landing/build.py from scripts/landing/landing.css:
   edit that, then run the build. */

/* The landing page: every place a box cut into a sheet of paper, as in
   the app, and every section a sheet of its own, torn across its foot
   (TornEdge) and lying over the next. The placement of each cut-out is in
   landing-art.css, written by scripts/landing/build.py. */

:root {
  --pen: #2f4a6b;
  --text: 34rem;
}

body.landing {
  overflow-x: clip;
}
/* Resets that any rule below may override. */
:where(.landing) img {
  display: block;
}
:where(.landing) p {
  margin: 0;
  text-wrap: pretty;
}
:where(.landing) :is(h1, h2, h3) {
  line-height: 1.12;
  text-wrap: balance;
}

/* ---------------------------------------------------------------- Scene --

   A paper box as in the app (DaySky, LandscapeScene): a sky of paper,
   things hung in it on threads, sheets of land from far to near, each
   casting a soft shadow down and to the right from one window light at the
   upper left. Positions are the app's unit shares; a "point" is the
   scene's width over 393, as on the phone.

   .box is the container the scene measures itself by.
   --h      the stage's height (land and hung things are laid out in it)
   --above  plain sky over the stage, for a title                        */

.box {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
}

.scene {
  --pt: calc(100cqw / 393);
  --h: calc(330 * var(--pt));
  --above: 0px;
  --sky-top: #c2d7d4;
  --sky-horizon: #e6e9de;
  position: relative;
  height: calc(var(--above) + var(--h));
  overflow: hidden;
  isolation: isolate;
}

/* The soft cast shadow of a cut-out on what stands behind it. */
.cut {
  --gap: 1;
  filter: drop-shadow(
    calc(var(--gap) * 1.2 * var(--pt))
    calc(var(--gap) * 2 * var(--pt))
    calc(var(--gap) * 3.6 * var(--pt))
    rgb(var(--cut-shadow) / 0.36)
  );
}

/* A sheet of land: a share of the width, its foot a share of the height. */
.strip {
  position: absolute;
  left: calc(50% + var(--shift, 0) * 100%);
  bottom: calc(var(--b) * var(--h));
  width: calc(var(--w) * 100%);
  max-width: none;
  height: auto;
  translate: -50% 0;
}

/* Everything that hangs or drifts in the sky moves together with it. */
.air {
  position: absolute;
  inset: 0;
}

/* A cut-out on a thread from the top of the scene. --y is where its middle
   hangs, as a share of the stage. */
.hung {
  position: absolute;
  top: 0;
  left: calc(var(--x) * 100%);
  width: calc(var(--w) * var(--pt));
  height: calc(var(--above) + var(--y) * var(--h));
  translate: -50% 0;
  transform-origin: 50% 0;
}
.hung::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0.5px;
  background: rgb(69 48 31 / 0.22);
}
.hung img {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  height: auto;
  translate: 0 -50%;
}

/* A cloud drifting to and fro behind the land. */
.drifter {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--above) + var(--y) * var(--h));
  width: calc(var(--w) * var(--pt));
  height: auto;
  translate: 0 -50%;
}

/* A landmark standing on the land: its middle a share of the width, its
   foot and height shares of the stage. */
.mark {
  position: absolute;
  left: calc(var(--x) * 100%);
  bottom: calc(var(--b) * var(--h));
  height: calc(var(--mh) * var(--h));
  translate: -50% 0;
}
.mark > img:first-child {
  height: 100%;
  width: auto;
}
.mark .turning {
  position: absolute;
  left: calc(var(--hx) * 100%);
  top: calc(var(--hy) * 100%);
  width: calc(var(--size) * var(--mh) * var(--h));
  height: auto;
  translate: -50% -50%;
}

/* Today's garden: a flower sways from its foot. */
.plant {
  position: absolute;
  left: calc(var(--x) * 100%);
  bottom: calc(var(--b) * var(--h));
  height: calc(var(--ph) * var(--h));
  width: auto;
  translate: -50% 0;
  transform-origin: 50% 100%;
  rotate: var(--lean, 0deg);
}

/* A butterfly: it rests with open wings and beats them now and then. */
.flyer {
  position: absolute;
  left: calc(var(--x) * 100%);
  top: calc(var(--above) + var(--y) * var(--h));
  width: calc(var(--w) * var(--pt));
  translate: -50% -50%;
}
.flyer img {
  width: 100%;
  height: auto;
}

/* ---------------------------------------------------------------- Card --
   A scan from 1909: the sheet with the full colour, on the page. */

.card {
  position: relative;
  z-index: 3;
  width: var(--card, 180px);
  aspect-ratio: 1110 / 1920;
  margin-inline: auto;
  border-radius: calc(var(--card, 180px) * 0.045);
  overflow: hidden;
  box-shadow:
    0 1.25px 0 rgb(var(--cut-shadow) / 0.24),
    0 10px 24px -6px rgb(var(--cut-shadow) / 0.28);
}
.card img {
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- Text -- */

.section-head {
  width: min(100% - 2 * var(--gutter), var(--text));
  margin-inline: auto;
}
.section-head h2 {
  font-size: clamp(31px, 5.4vw, 46px);
}
.section-head p {
  margin-top: 14px;
  font-size: 18px;
  color: var(--ink-secondary);
}
.kicker {
  font: italic 15px/1.3 var(--prose);
  color: var(--ink-secondary);
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}

.soon {
  display: inline-block;
  padding: 12px 22px 11px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper2);
  font: 19px/1.2 var(--display);
  box-shadow: 0 1.25px 0 rgb(var(--cut-shadow) / 0.3), 0 4px 12px -4px rgb(var(--cut-shadow) / 0.35);
}

/* A note on ruled paper, in the pen's blue, under the question. */
.note {
  position: relative;
  z-index: 4;
  background: var(--grain), var(--paper2);
  background-blend-mode: multiply, multiply, normal;
  border-radius: 12px;
  padding: 18px 20px 20px;
  box-shadow:
    0 1.25px 0 rgb(var(--cut-shadow) / 0.2),
    0 8px 22px -8px rgb(var(--cut-shadow) / 0.3);
}
.note .ask {
  font: italic 16px/1.35 var(--prose);
  color: var(--ink-secondary);
}
.note .pen {
  margin-top: 8px;
  font: italic 18px/30px var(--prose);
  color: var(--pen);
  background: repeating-linear-gradient(transparent 0 29px, rgb(47 74 107 / 0.16) 29px 30px);
  background-position: 0 1px;
}

/* ---------------------------------------------------------------- Motion --
   Only transform and opacity, slow; still under Reduce Motion. */

@keyframes swing {
  from { rotate: -2.5deg; }
  to { rotate: 2.5deg; }
}
@keyframes sway {
  from { rotate: calc(var(--lean, 0deg) - 3deg); }
  to { rotate: calc(var(--lean, 0deg) + 3deg); }
}
@keyframes turn {
  to { rotate: 1turn; }
}
@keyframes breathe {
  from { opacity: 0.8; }
  to { opacity: 1; }
}
@keyframes drift-to {
  to { transform: translateX(calc(var(--travel) * var(--pt))); }
}
/* The day's cloud crosses now and then, behind the peaks. */
@keyframes cross {
  0% { transform: translateX(calc(-100% - 100cqw * var(--x))); }
  62% { transform: translateX(calc(100cqw * (1 - var(--x)) + 10%)); }
  100% { transform: translateX(calc(100cqw * (1 - var(--x)) + 10%)); }
}
/* A burst of five beats, then still with open wings. */
@keyframes beat {
  0%, 30%, 100% { scale: 1 1; }
  3%, 9%, 15%, 21%, 27% { scale: 0.32 1; }
  6%, 12%, 18%, 24% { scale: 1 1; }
}
@keyframes hover {
  0%, 100% { transform: translate(0, 0); }
  30% { transform: translate(calc(var(--rx, 12) * 1px), calc(var(--ry, 4) * -1px)); }
  60% { transform: translate(calc(var(--rx, 12) * -0.6px), calc(var(--ry, 4) * 0.6px)); }
}

@media (prefers-reduced-motion: no-preference) {
  .hung {
    animation: swing var(--period, 8s) ease-in-out var(--phase, 0s) infinite alternate;
  }
  .hung.breathes img {
    animation: breathe calc(var(--period, 6s) * 0.5) ease-in-out var(--phase, 0s) infinite alternate;
  }
  .plant.sways {
    animation: sway var(--period, 7s) ease-in-out var(--phase, 0s) infinite alternate;
  }
  .drifter {
    animation: drift-to calc(var(--period, 32s) / 2) ease-in-out var(--phase, 0s) infinite alternate;
  }
  .drifter.crosses {
    animation: cross var(--period, 56s) linear var(--phase, 0s) infinite;
  }
  .turning {
    animation: turn var(--period, 40s) linear infinite;
  }
  .flyer {
    animation: hover var(--period, 18s) ease-in-out var(--phase, 0s) infinite;
  }
  .flyer img {
    animation: beat var(--beat, 6s) linear var(--phase, 0s) infinite;
  }
}

/* As the page scrolls, the sheets drift a few pixels apart: the far ones
   lag most. Without scroll-driven animations the scene stands still. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .strip,
    .air,
    .mark,
    .garden {
      animation: parallax linear both;
      animation-timeline: view();
    }
  }
}
@keyframes parallax {
  from { transform: translateY(calc(var(--drift, 0) * -60px)); }
  to { transform: translateY(calc(var(--drift, 0) * 60px)); }
}
.garden {
  position: absolute;
  inset: 0;
}

:root {
  /* The band at a sheet's foot the tear wanders in (TEAR_DEPTH + 5). */
  --band: 23px;
  --edge: rgb(var(--cut-shadow) / 0.24);
  --lift: rgb(var(--cut-shadow) / 0.1);
  /* Sheets with a breath of their landscape's sky in them. */
  --journal-paper: #f5edeb;
  --library-paper: #ecebed;
  --path-paper: #f4ecdd;
}

/* The sky: an even gradient, paler to the horizon, with the fine grain
   only (the gradient is its dye). It stops where the page's own paper
   begins under the land. */
.scene .sky {
  position: absolute;
  inset: 0 0 calc(var(--h) * 0.08);
  background:
    url('/images/grain-fine.webp') 0 0 / 170px,
    linear-gradient(var(--sky-top), var(--sky-horizon) 75%);
  background-blend-mode: multiply, normal;
}

/* ---------------------------------------------------------------- Sheet -- */

.leaf {
  --sheet: var(--paper1);
  position: relative;
  padding: 96px 0 calc(88px + var(--band));
  margin-bottom: calc(-1 * var(--band));
}
.hero { --sheet: var(--paper0); z-index: 6; }
.method { --sheet: var(--paper1); z-index: 5; }
.journal { --sheet: var(--journal-paper); z-index: 4; }
.library { --sheet: var(--library-paper); z-index: 3; }
.path { --sheet: var(--path-paper); z-index: 2; }
.closing { --sheet: var(--paper3); z-index: 1; margin-bottom: 0; }

/* The paper itself, under the section: the shadow on the whole, the core
   and the face each cut by the tear. */
.paper {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  filter: drop-shadow(0 1.5px 0 var(--edge)) drop-shadow(0 2.5px 3px var(--lift));
}
.paper::before,
.paper::after {
  content: '';
  position: absolute;
  inset: 0;
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--band) + 1px) no-repeat,
    var(--core) left bottom / 1920px var(--band) no-repeat;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--band) + 1px) no-repeat,
    var(--core) left bottom / 1920px var(--band) no-repeat;
}
.paper::before {
  background: var(--paper2);
}
.paper::after {
  background: var(--grain), var(--sheet);
  background-blend-mode: multiply, multiply, normal;
  -webkit-mask-image: linear-gradient(#000 0 0), var(--face);
  mask-image: linear-gradient(#000 0 0), var(--face);
}
/* Wider than the tear: the same tear, drawn a little wider. */
@media (min-width: 1920px) {
  .paper::before,
  .paper::after {
    -webkit-mask-size: 100% calc(100% - var(--band) + 1px), 100% var(--band);
    mask-size: 100% calc(100% - var(--band) + 1px), 100% var(--band);
  }
}

/* TileTear: a tile torn along its foot, a rim of fibres under the tear. */
.torn-tile {
  position: relative;
  isolation: isolate;
}
.torn-tile::before {
  content: '';
  position: absolute;
  inset: 1.5px 0 -1.5px;
  z-index: -1;
  background: var(--paper2);
}
.torn-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 8px 8px 0 0;
  background: var(--grain), var(--paper2);
  background-blend-mode: multiply, multiply, normal;
}
.torn-tile::before,
.torn-tile::after {
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat,
    var(--tile) left bottom / 640px 7px no-repeat;
  mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - 6px) no-repeat,
    var(--tile) left bottom / 640px 7px no-repeat;
}

/* ---------------------------------------------------------------- Window --
   A box cut into the sheet: its cut edge throws a shadow in from the upper
   left and catches the light along the bottom and right. */

.window {
  border-radius: 18px;
  overflow: hidden;
  background: var(--sheet);
}
.window::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 2px 3px 5px rgb(var(--cut-shadow) / 0.28),
    inset 0 0 0 1px rgb(var(--cut-shadow) / 0.12),
    inset -1px -1.5px 0 rgb(255 255 255 / 0.45);
}

/* ---------------------------------------------------------------- Hero -- */

.hero {
  padding: 12px 12px calc(84px + var(--band));
}
.hero .scene {
  --above: calc(58 * var(--pt));
}
.hero-title {
  position: absolute;
  z-index: 5;
  left: 22px;
  top: 22px;
}
.hero-title h1 {
  font-size: 44px;
  line-height: 1;
}
.hero-title p {
  margin-top: 6px;
  font: italic 16px/1.3 var(--prose);
  color: var(--ink-secondary);
}
.hero .card {
  --card: 180px;
  margin-top: -132px;
}
.hero-text {
  text-align: center;
  width: min(100% - 2 * var(--gutter) + 24px, 36rem);
  margin: 30px auto 0;
}
.tagline {
  font: 32px/1.12 var(--display);
  text-wrap: balance;
}
.lede {
  margin-top: 14px;
  font-size: 18px;
  color: var(--ink-secondary);
}
.hero-soon {
  margin-top: 28px;
  text-align: center;
}

/* ---------------------------------------------------------------- Sections */

.section-head p + p {
  margin-top: 12px;
}
.figure {
  position: relative;
  margin: 36px 12px 0;
}

/* The method: Temperance sinks into the land of the Major Arcana. */
.method .card {
  --card: 200px;
  margin-top: -146px;
}
.method .note {
  width: min(300px, 82%);
  margin: -40px 0 0 auto;
  rotate: 0.6deg;
}

/* The journal: the Moon's land, and a day torn from it, opened. */
.with-art {
  display: flow-root;
}
.with-art img {
  float: left;
  width: 34px;
  height: auto;
  margin: 4px 14px 2px 0;
}
.day {
  position: relative;
  z-index: 4;
  width: min(340px, 92%);
  margin: -70px auto 0;
  padding: 16px 18px 20px;
  border-radius: 12px;
  background: var(--grain), var(--paper2);
  background-blend-mode: multiply, multiply, normal;
  rotate: -0.8deg;
  box-shadow:
    0 1.25px 0 rgb(var(--cut-shadow) / 0.2),
    0 8px 22px -8px rgb(var(--cut-shadow) / 0.3);
}
.day .date {
  font: 20px/1.2 var(--display);
}
.day-row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-top: 12px;
}
.day .card {
  --card: 84px;
  flex: none;
  margin: 2px 0 0;
}
.day .pen {
  font: italic 17px/28px var(--prose);
  color: var(--pen);
  background: repeating-linear-gradient(transparent 0 27px, rgb(47 74 107 / 0.16) 27px 28px);
  background-position: 0 1px;
}

/* The library: the Star's land, the Hermit, and a painting that echoes it. */
.pair {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 18px;
  margin-top: -128px;
}
.pair .card {
  --card: 150px;
  margin: 0;
  flex: none;
}
.plate {
  width: 146px;
  margin: 18px 0 0;
  rotate: 1deg;
}
/* The painting printed on a plate of paper, torn at its foot. */
.print {
  padding: 7px 7px 14px;
  filter: drop-shadow(0 1.25px 0 var(--edge)) drop-shadow(0 6px 10px rgb(var(--cut-shadow) / 0.2));
}
.print img {
  width: 100%;
  height: auto;
}
.plate figcaption {
  margin-top: 12px;
  font: italic 13px/1.4 var(--prose);
  color: var(--ink-secondary);
}

/* The path: the road into the hills, the altar over it, and the first
   lessons torn from the course, laid along the road. */
.slips {
  position: relative;
  z-index: 4;
  list-style: none;
  margin: -58px 0 0;
  padding: 0 14px;
  display: grid;
  gap: 10px;
  justify-items: start;
}
.slip {
  width: min(270px, 84%);
  padding: 12px 16px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  filter: drop-shadow(0 1.25px 0 var(--edge)) drop-shadow(0 6px 10px rgb(var(--cut-shadow) / 0.16));
}
.slip:nth-child(2) { margin-left: 12%; rotate: -0.7deg; }
.slip:nth-child(3) { margin-left: 24%; rotate: 0.5deg; }
.slip .when {
  grid-column: 1 / -1;
  font: italic 13px/1.3 var(--prose);
  color: var(--ink-secondary);
}
.slip .what {
  font: 19px/1.2 var(--display);
}
.slip .long {
  align-self: end;
  font-size: 13px;
  color: var(--ink-secondary);
}

/* ---------------------------------------------------------------- Closing */

.closing {
  padding: 96px 12px calc(48px + var(--band));
}
.closing .scene {
  --above: calc(30 * var(--pt));
}
.closing-text {
  text-align: center;
  width: min(100% - 2 * var(--gutter) + 24px, 30rem);
  margin: 30px auto 0;
}
.closing .name {
  font: 40px/1 var(--display);
}
.closing .quiet {
  margin-top: 14px;
  color: var(--ink);
}
.closing-soon {
  margin-top: 24px;
}
.closing nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin-top: 30px;
  font-size: 15px;
}
.copyright {
  margin-top: 12px;
  font-size: 14px;
  color: var(--ink-secondary);
}
/* Under the last sheet, the ground. */
body.landing::after {
  content: '';
  display: block;
  height: 40px;
}

/* ---------------------------------------------------------------- Wide -- */

@media (min-width: 960px) {
  .hero {
    padding: 32px 32px calc(110px + var(--band));
  }
  .hero .window {
    max-width: 1120px;
    margin-inline: auto;
  }
  .hero .scene {
    --h: calc(262 * var(--pt));
  }
  .hero .hung {
    width: calc(var(--w) * var(--pt) * 0.62);
    --y: 0.2 !important;
  }
  .hero .flyer {
    width: calc(var(--w) * var(--pt) * 0.6);
  }
  /* The cloud crosses lower, in front of the peaks, under the words. */
  .hero .drifter {
    top: calc(var(--above) + 0.47 * var(--h));
  }
  .hero-title {
    left: 48px;
    top: 44px;
  }
  .hero-title h1 {
    font-size: 72px;
  }
  .hero-title p {
    font-size: 20px;
  }
  .hero .card {
    --card: 240px;
    margin-top: -176px;
  }
  /* The words stand in the sky under the name, so the first screen says
     what Imaginalis is; the Fool sinks into the land below them. */
  .hero {
    display: grid;
    grid-template-columns: min(100%, 1120px);
    justify-content: center;
  }
  .hero > .window,
  .hero > .hero-text {
    grid-area: 1 / 1;
  }
  .hero > .window {
    width: 100%;
  }
  /* Sky enough over the land for the words: the land grows with the box,
     the words don't, so a narrower box gets more sky. */
  .hero .scene {
    --above: max(60px, 420px - 26cqw);
  }
  .hero-text {
    position: relative;
    z-index: 5;
    align-self: start;
    width: min(48%, 540px);
    margin: 0;
    padding: 172px 0 0 48px;
    text-align: left;
  }
  .tagline {
    font-size: 36px;
  }
  .lede {
    margin-top: 10px;
    font-size: 17px;
    line-height: 1.5;
  }
  .hero-soon {
    margin-top: 30px;
  }

  /* A section: words on one side, the box on the other, turn and turn
     about down the page. */
  main > .leaf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-areas: 'head figure';
    align-items: center;
    column-gap: 72px;
    padding: 150px max(40px, (100% - 1180px) / 2) calc(150px + var(--band));
  }
  main > .leaf.flip {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    grid-template-areas: 'figure head';
  }
  main > .leaf > .section-head {
    grid-area: head;
    width: auto;
    margin: 0;
  }
  main > .leaf > .figure {
    grid-area: figure;
    margin: 0;
  }

  .method .card {
    --card: 230px;
    margin-top: -168px;
    margin-left: 12%;
  }
  .method .note {
    position: absolute;
    right: 0;
    bottom: 40px;
    width: 300px;
    margin: 0;
  }

  .day {
    position: absolute;
    right: -28px;
    bottom: -64px;
    width: 360px;
    margin: 0;
  }
  .journal .figure {
    margin-bottom: 64px;
  }

  .pair {
    justify-content: flex-start;
    gap: 28px;
    margin: -150px 0 0 8%;
  }
  .pair .card {
    --card: 200px;
  }
  .plate {
    width: 200px;
    margin-top: 40px;
  }

  .path .hung {
    width: calc(var(--w) * var(--pt) * 0.8);
  }
  /* The first three lessons step down from the road, left to right. */
  .slips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 14px;
    margin-top: -44px;
    padding: 0 10px;
  }
  .slip {
    width: auto;
  }
  .slip:nth-child(1) { rotate: 0.6deg; }
  .slip:nth-child(2) { margin: 22px 0 0; }
  .slip:nth-child(3) { margin: 44px 0 0; }

  .closing {
    padding: 150px 32px calc(64px + var(--band));
  }
  .closing .window {
    max-width: 1120px;
    margin-inline: auto;
  }
  .closing .scene {
    --h: calc(200 * var(--pt));
    --above: 0px;
  }
  .closing .hung {
    width: calc(var(--w) * var(--pt) * 0.62);
  }
}

/* Increase Contrast: flat paper, as the app's plain sheets. */
@media (prefers-contrast: more) {
  .paper::after,
  .torn-tile::after,
  .note,
  .day {
    background-image: none;
  }
}

/* Where each cut-out stands (build.py). */
.p1{--face:url(/images/landing/tear-hero.svg);--core:url(/images/landing/tear-hero-core.svg)}
.p2{--sky-top:#C2D7D4;--sky-horizon:#E6E9DE}
.p3{--w:1.5;--b:0.26;--drift:0.17;--gap:1}
.p4{--w:1.06;--b:0.22;--drift:0.12;--gap:1.5}
.p5{--w:1.3;--b:0.15;--drift:0.08;--gap:1.5}
.p6{--drift:.06}
.p7{--x:.23;--b:.1;--ph:.12;--gap:1.5}
.p8{--x:.77;--b:.1;--ph:.12;--gap:1.5}
.p9{--w:1.2;--b:0.01;--drift:0.04;--gap:2}
.p10{--drift:.04}
.p11{--x:.11;--b:.07;--ph:.25;--gap:1.5;--lean:-1.5deg;--period:3.4s;--phase:-.4s}
.p12{--x:.9;--b:.08;--ph:.29;--gap:1.5;--lean:1.5deg;--period:3.8s;--phase:-1.2s}
.p13{--x:0.19;--y:0.56;--w:30;--rx:22;--ry:8;--period:17s;--phase:-3s;--beat:5.2s}
.p14{--gap:4}
.p15{--x:0.87;--y:0.72;--w:32;--rx:14;--ry:4;--period:21s;--phase:-9s;--beat:6.4s}
.p16{--x:0.4;--y:0.4;--w:24;--rx:30;--ry:6;--period:24s;--phase:-14s;--beat:4.6s}
.p17{--drift:.2}
.p18{--x:0.1;--y:0.34;--w:126;--travel:0;--period:56s;--phase:-10s;--gap:2}
.p19{--x:0.74;--y:0.4;--w:82;--period:4.00s;--phase:-1.66s}
.p20{--face:url(/images/landing/tear-method.svg);--core:url(/images/landing/tear-method-core.svg)}
.p21{--sky-top:#D9D3E1;--sky-horizon:#ECE6DC}
.p22{--w:1.35;--b:0.25;--drift:0.17;--gap:1}
.p23{--w:1.25;--b:0.12;--drift:0.1;--gap:1.5}
.p24{--x:0.82;--y:0.4;--w:54;--period:4.25s;--phase:-0.54s}
.p25{--x:0.14;--y:0.42;--w:12;--period:3.25s;--phase:-1.76s}
.p26{--gap:3}
.p27{--x:0.64;--y:0.5;--w:10;--period:3.50s;--phase:-3.45s}
.p28{--face:url(/images/landing/tear-journal.svg);--core:url(/images/landing/tear-journal-core.svg)}
.p29{--gap:1.5}
.p30{--sky-top:#D6CDDA;--sky-horizon:#EEE7E0}
.p31{--w:1.4;--b:0.27;--drift:0.17;--gap:1}
.p32{--w:1.25;--b:0.14;--drift:0.1;--gap:1.5}
.p33{--x:0.73;--y:0.33;--w:84;--period:4.00s;--phase:-0.51s}
.p34{--x:0.65;--y:0.5;--w:7;--period:3.00s;--phase:-1.24s}
.p35{--x:0.73;--y:0.55;--w:8;--period:3.50s;--phase:-3.23s}
.p36{--x:0.81;--y:0.5;--w:7;--period:2.75s;--phase:-3.59s}
.p37{--face:url(/images/landing/tear-library.svg);--core:url(/images/landing/tear-library-core.svg)}
.p38{--sky-top:#C8D0E2;--sky-horizon:#E8EAE3}
.p39{--w:1.25;--b:0.13;--drift:0.1;--gap:1.5;--shift:-0.06}
.p40{--x:0.68;--y:0.33;--w:70;--period:4.00s;--phase:-0.25s}
.p41{--x:0.47;--y:0.47;--w:14;--period:3.00s;--phase:-1.05s}
.p42{--x:0.55;--y:0.23;--w:12;--period:3.50s;--phase:-2.56s}
.p43{--x:0.87;--y:0.2;--w:13;--period:3.25s;--phase:-3.31s}
.p44{--x:0.92;--y:0.44;--w:11;--period:2.75s;--phase:-3.85s}
.p45{--x:0.82;--y:0.52;--w:12;--period:3.75s;--phase:-6.09s}
.p46{--x:0.57;--y:0.54;--w:10;--period:3.00s;--phase:-0.67s}
.p47{--x:0.38;--y:0.56;--w:11;--period:4.00s;--phase:-2.55s}
.p48{--tile:url(/images/landing/tile-echo-hermit.svg)}
.p49{--face:url(/images/landing/tear-path.svg);--core:url(/images/landing/tear-path-core.svg)}
.p50{--sky-top:#E2D8C6;--sky-horizon:#EFE9DC}
.p51{--w:1.4;--b:0.186;--drift:0.17;--gap:1}
.p52{--w:1.25;--b:0.09;--drift:0.1;--gap:1.5}
.p53{--w:1.2;--b:0.007;--drift:0.04;--gap:2}
.p54{--x:-0.08;--y:0.565;--w:104;--travel:44;--period:36s;--phase:-6.88s;--gap:2}
.p55{--x:0.84;--y:0.58;--w:46;--travel:-34;--period:28s;--phase:-11.59s;--gap:2}
.p56{--x:0.9;--y:0.1;--w:40;--period:4.40s;--phase:-0.70s}
.p57{--x:0.17;--y:0.31;--w:30;--period:3.80s;--phase:-2.90s}
.p58{--gap:3.5}
.p59{--x:0.31;--y:0.22;--w:40;--period:3.60s;--phase:-0.34s}
.p60{--x:0.445;--y:0.33;--w:44;--period:4.10s;--phase:-2.48s}
.p61{--x:0.58;--y:0.22;--w:52;--period:4.60s;--phase:-4.54s}
.p62{--x:0.715;--y:0.33;--w:44;--period:3.90s;--phase:-5.46s}
.p63{--x:0.845;--y:0.24;--w:24;--period:3.30s;--phase:-5.46s}
.p64{--tile:url(/images/landing/tile-slip-1.svg)}
.p65{--tile:url(/images/landing/tile-slip-2.svg)}
.p66{--tile:url(/images/landing/tile-slip-3.svg)}
.p67{--face:url(/images/landing/tear-closing.svg);--core:url(/images/landing/tear-closing-core.svg)}
.p68{--sky-top:#EBCFBF;--sky-horizon:#F6E4CE}
.p69{--x:0.74;--y:0.45;--w:82;--period:4.00s;--phase:-1.66s}
.p70{--x:0.34;--y:0.2;--w:14;--period:3.00s;--phase:-0.38s}
.p71{--x:0.54;--y:0.29;--w:11;--period:3.50s;--phase:-2.45s}