/* The platform in brief: what PostLever does, in four verbs, each drawn
   happening on a tile of its own with one line under it and a link to the
   homepage stage that tells it in full. The homepage owns the depth.

   Each drawing's markup is its finished state, so without script, or for a
   reader who prefers less motion, it is simply there. platform.js marks a
   drawing data-pf-play="ready" (its opening's first frame, set with no
   transition), then "on" once it is seen, and data-pf-opened once its opening
   has played, after which its parts answer the pointer straight away rather
   than waiting their turn in the opening. The tile is data-pointed while a
   pointer that can hover is on it (hover-card.js). */

.pf-art {
  --pf-hover: 520ms cubic-bezier(0.165, 0.84, 0.44, 1);
  --pf-primary: #2563EB;
}

/* The section's words, with the link to the homepage's whole story under them. */
.pf-head { margin-bottom: var(--space-10); }
.pf-head .section-lead { max-width: 36rem; }
/* The link runs on from the lead's words, in their size. */
.pf-head .section-lead .link-more { font-size: inherit; line-height: inherit; }

/* ---- the row ----
   Four in a three-column row strands the fourth on a line of its own, so
   they go two by two until all four fit across. */

.pf-row {
  display: grid;
  gap: var(--space-8) var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) {
  .pf-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1080px) {
  .pf-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- the tiles ----
   The picture on a tile of its own, with the words under it rather than both
   inside a card. The drawing is centred and held to the size it was drawn for,
   so a wide tile gains air around it rather than a stretched picture. Each
   tile is white under its own colour, never a flat fill: soft glows bleeding
   behind the drawing, a wedge of fine hairlines or a wash, so a row of them is
   not one tint four times. The edge holds the tile's shape on the white band. */

.pf-tile {
  --card-radius: 20px;
  --card-edge: #E3E8EF;
  --card-glow: rgba(37, 99, 235, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
}
.pf-tile > .pf-art { max-width: 240px; }

.pf-tile-plan {
  --card-ground:
    radial-gradient(60% 70% at 22% 18%, rgba(99, 102, 241, 0.22), rgba(99, 102, 241, 0) 70%),
    radial-gradient(60% 70% at 82% 86%, rgba(56, 189, 248, 0.2), rgba(56, 189, 248, 0) 70%),
    #FFFFFF;
}
.pf-tile-send {
  /* The hairlines fade out away from the lower left corner */
  --card-ground:
    linear-gradient(45deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 62%),
    repeating-linear-gradient(135deg, rgba(99, 102, 241, 0.32) 0 1px, transparent 1px 7px),
    radial-gradient(70% 80% at 20% 80%, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0) 70%),
    #FFFFFF;
}
.pf-tile-protect {
  --card-ground:
    radial-gradient(65% 75% at 25% 30%, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0) 70%),
    radial-gradient(60% 70% at 80% 75%, rgba(56, 189, 248, 0.18), rgba(56, 189, 248, 0) 70%),
    #FFFFFF;
}
.pf-tile-optimize {
  --card-ground:
    radial-gradient(70% 80% at 85% 15%, rgba(56, 189, 248, 0.22), rgba(56, 189, 248, 0) 70%),
    linear-gradient(160deg, rgba(99, 102, 241, 0.08), rgba(56, 189, 248, 0.14)),
    #FFFFFF;
}

/* ---- the words under each tile ----
   Set the way Apple sets them: the claim in the page's ink running straight
   on into the detail in its muted grey, as one paragraph rather than a heading
   over a block of text. The claim is still the heading, so the four can be
   found by someone moving between headings. */

.pf-caption {
  margin-top: var(--space-5);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text-muted);
  text-wrap: pretty;
}
.pf-caption-title {
  display: inline;
  margin: 0;
  font: inherit;
  font-weight: var(--font-semibold);
  color: var(--color-text);
}
.pf-more { margin-top: var(--space-3); font-size: var(--text-sm); }

/* ---- Plan: a hand goes round the day once, placing each send in its hour ---- */

.pf-plan-sends,
.pf-plan-send,
.pf-plan-rounds,
.pf-plan-hand {
  transform-box: view-box;
  transform-origin: 100px 50px;
}
.pf-plan-hand { transform: rotate(360deg); }

.pf-art[data-pf-play="ready"] .pf-plan-send { opacity: 0; transform: scale(1.18); }
.pf-art[data-pf-play="ready"] .pf-plan-hand { transform: none; }

.pf-art[data-pf-play="on"] .pf-plan-send {
  transition: opacity 360ms ease var(--pf-delay), transform 360ms ease var(--pf-delay);
}
.pf-art[data-pf-play="on"] .pf-plan-hand { transition: transform 2400ms linear; }

.pf-tile[data-pointed] .pf-plan-sends { transform: scale(1.06); }
.pf-art[data-pf-play] .pf-plan-sends { transition: transform var(--pf-hover); }
/* Each time the pointer comes back, the hand goes round the day once more */
.pf-art[data-pf-play] .pf-plan-rounds { transition: transform 1400ms cubic-bezier(0.165, 0.84, 0.44, 1); }

/* ---- Send: one send leaving along three lanes, each provider lighting as it is reached ---- */

.pf-send-reach { stroke-dasharray: 1; stroke-dashoffset: 0; }
.pf-send-pill { stroke: var(--pf-primary); }
.pf-send-halo { transform-box: fill-box; transform-origin: center; }

.pf-art[data-pf-play="ready"] .pf-send-reach { stroke-dashoffset: 1; }
.pf-art[data-pf-play="ready"] .pf-send-pill { stroke: #AFC0E4; }

.pf-art[data-pf-play="on"] .pf-send-reach {
  transition: stroke-dashoffset 520ms ease var(--pf-delay);
}
.pf-art[data-pf-play="on"] .pf-send-pill {
  transition: stroke 220ms ease calc(var(--pf-delay) + 520ms);
}

.pf-tile[data-pointed] .pf-send-halo { transform: scale(1.35); }
.pf-art[data-pf-play] .pf-send-halo { transition: transform var(--pf-hover); }

/* ---- Protect: Yahoo's share slowed while Gmail and Outlook keep their full pace ---- */

/* The darker amber, which holds 4.5:1 as small text on white. */
.pf-protect-slowed {
  fill: #B45309;
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0.4);
}
.pf-protect-recovered { opacity: 0; }

.pf-art[data-pf-play="ready"] .pf-protect-slowed { fill: var(--pf-primary); transform: none; }
.pf-art[data-pf-play="ready"] .pf-protect-label,
.pf-art[data-pf-play="ready"] .pf-protect-full { opacity: 0; }

/* Long enough to see every ISP at full pace before one is slowed. */
.pf-art[data-pf-play="on"] .pf-protect-slowed {
  transition: transform 600ms ease 700ms, fill 240ms ease 700ms;
}
.pf-art[data-pf-play="on"] .pf-protect-label { transition: opacity 240ms ease 700ms; }
.pf-art[data-pf-play="on"] .pf-protect-full { transition: opacity 240ms ease 1300ms; }
.pf-art[data-pf-play="on"] .pf-protect-recovered { transition: opacity 240ms ease; }
.pf-art[data-pf-play="on"][data-pf-opened] .pf-protect-slowed {
  transition: transform var(--pf-hover), fill 240ms ease;
}
.pf-art[data-pf-play="on"][data-pf-opened] .pf-protect-label,
.pf-art[data-pf-play="on"][data-pf-opened] .pf-protect-full { transition: opacity 240ms ease; }

/* Pointed at once it has opened, the slowed ISP recovers to full pace */
.pf-tile[data-pointed] .pf-art[data-pf-opened] .pf-protect-slowed { fill: var(--pf-primary); transform: none; }
.pf-tile[data-pointed] .pf-art[data-pf-opened] .pf-protect-label { opacity: 0; }
.pf-tile[data-pointed] .pf-art[data-pf-opened] .pf-protect-recovered { opacity: 1; }

/* ---- Optimize: three creatives tested, the winner called and lifted forward ---- */

.pf-opt-creative[data-pf-loser] { opacity: 0.5; }
.pf-opt-creative[data-pf-winner] { transform: translateY(-4px); }
.pf-opt-result {
  transform-box: fill-box;
  transform-origin: left center;
}
.pf-opt-result[data-pf-loser] { opacity: 0.4; }

.pf-art[data-pf-play="ready"] .pf-opt-creative { opacity: 1; transform: none; }
.pf-art[data-pf-play="ready"] .pf-opt-ring { opacity: 0; }
.pf-art[data-pf-play="ready"] .pf-opt-result { opacity: 1; transform: scaleX(0); }

/* Long enough for every result to be in before the winner is called. */
.pf-art[data-pf-play="on"] .pf-opt-creative {
  transition: opacity 320ms ease 1100ms, transform 320ms ease 1100ms;
}
.pf-art[data-pf-play="on"] .pf-opt-ring { transition: opacity 320ms ease 1100ms; }
.pf-art[data-pf-play="on"] .pf-opt-result {
  transition: transform 600ms ease var(--pf-delay), opacity 320ms ease 1100ms;
}
.pf-art[data-pf-play="on"][data-pf-opened] .pf-opt-creative {
  transition: opacity var(--pf-hover), transform var(--pf-hover);
}
.pf-art[data-pf-play="on"][data-pf-opened] .pf-opt-ring { transition: opacity var(--pf-hover); }
.pf-art[data-pf-play="on"][data-pf-opened] .pf-opt-result {
  transition: transform var(--pf-hover), opacity 520ms ease;
}

/* Pointed at once it is called, the winner pulls further ahead */
.pf-tile[data-pointed] .pf-art[data-pf-opened] .pf-opt-creative[data-pf-loser] { opacity: 0.3; }
.pf-tile[data-pointed] .pf-art[data-pf-opened] .pf-opt-result[data-pf-loser] { opacity: 0.25; transform: scaleX(0.6); }
.pf-tile[data-pointed] .pf-art[data-pf-opened] .pf-opt-result[data-pf-winner] { transform: scaleX(var(--pf-ahead)); }