/* The hand-off, drawn with the app icon itself: the exact icon in both
   themes (its paths copied verbatim from brand-mark.svg, navy brackets, blue
   bars and core, on its white tile), never recoloured, faded or resized at
   rest.

   At rest it is always the icon, whole. As the page opens it assembles, as it
   does on the deep navy design: the tile comes up, the two brackets slide
   together along the diagonal on the lift spring, the two bars fade in 80ms
   apart, and the core grows into place while a bloom around the icon rises
   and fades away completely. Only transform and opacity move, and every
   animation holds nothing once it ends (backwards fill only), so what stays
   is the icon, unaltered.

   It plays only where scripting is enabled and motion is welcome; with no
   script, or under reduced motion, nothing moves and the icon simply
   stands. */

.hero-mark {
  --tile: clamp(112px, 17vw, 248px);
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
}

/* The icon's white tile, at logo.png's own proportions: corners at 24.6% of
   the side, the mark across 73.3% of it. */
.mark-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tile);
  aspect-ratio: 1;
  border-radius: 24.6%;
  background: #ffffff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 20px 48px -14px rgba(0, 0, 0, 0.55), 0 48px 96px -40px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: light) {
  .mark-tile {
    box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.05), 0 20px 48px -16px rgba(0, 0, 0, 0.2),
      0 48px 96px -40px rgba(0, 0, 0, 0.18);
  }
}

/* The light the assembly gives off: behind the tile (never over it, so the
   icon itself is untouched), centred on it, invisible at rest. */
.hero-mark::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: calc(var(--tile) * 2);
  height: calc(var(--tile) * 2);
  margin: calc(var(--tile) * -1) 0 0 calc(var(--tile) * -1);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(46, 155, 255, 0.68), rgba(46, 155, 255, 0.16) 55%, transparent);
  content: "";
  opacity: 0;
  pointer-events: none;
}

.mark {
  width: 73.3%;
  height: auto;
  overflow: visible;
}

/* The core grows from its own centre. */
.mark-core {
  transform-box: fill-box;
  transform-origin: center;
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .hero-mark {
    --start: 300ms;
  }

  /* The tile comes up out of the dark. */
  .mark-tile {
    animation: mark-tile 520ms var(--spring-lift) var(--start) backwards,
      mark-appear 360ms var(--ease-out-soft) var(--start) backwards;
  }

  /* The brackets: apart along the diagonal, then together on the spring. */
  .mark-half.is-a {
    animation: mark-upper 640ms var(--spring-lift) calc(var(--start) + 120ms) backwards;
  }

  .mark-half.is-b {
    animation: mark-lower 640ms var(--spring-lift) calc(var(--start) + 120ms) backwards;
  }

  /* The bars fade in as the brackets seat, the second 80ms after the first. */
  .mark-bar.is-a {
    animation: mark-appear 240ms var(--ease-out-soft) calc(var(--start) + 560ms) backwards;
  }

  .mark-bar.is-b {
    animation: mark-appear 240ms var(--ease-out-soft) calc(var(--start) + 640ms) backwards;
  }

  /* The core last, growing into its place, with the bloom around the icon
     rising and fading away to nothing. */
  .mark-core {
    animation: mark-core var(--lift) var(--spring-lift) calc(var(--start) + 760ms) backwards,
      mark-appear 200ms var(--ease-out-soft) calc(var(--start) + 760ms) backwards;
  }

  .hero-mark::before {
    animation: mark-bloom 1500ms var(--ease-out-soft) calc(var(--start) + 760ms) backwards;
  }
}

@keyframes mark-tile {
  from {
    transform: scale(0.94);
  }
}

@keyframes mark-upper {
  from {
    transform: translate(12%, -12%);
  }
}

@keyframes mark-lower {
  from {
    transform: translate(-12%, 12%);
  }
}

@keyframes mark-appear {
  from {
    opacity: 0;
  }
}

@keyframes mark-core {
  from {
    transform: scale(0.6);
  }
}

/* One swell behind the icon, and gone. */
@keyframes mark-bloom {
  0% {
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}