/* Styles for page-motion.js: the page turn between pages of the site. */

/* ---------- Tones ---------- */

/* The turn takes the reader's theme: paper and ink on the light site, black and
   bone on the dark one. A black curtain dropped over a paper page read as the
   site going dark rather than moving on. Red is the same in both. */
html {
  --turn-ground: #f5f4f2;
  --turn-step-1: #ebe9e5;
  --turn-step-2: #dfddd8;
  --turn-line: rgba(20, 20, 22, .16);
  --turn-text: #565656;
  --turn-mark: url(/public/assets/halcyon-logo.png);
}

html.dark {
  --turn-ground: #0b0b0c;
  --turn-step-1: #17171a;
  --turn-step-2: #232326;
  --turn-line: rgba(244, 243, 241, .14);
  --turn-text: #9a9a9a;
  --turn-mark: url(/public/assets/halcyon-logo-on-dark.png);
}

/* ---------- The cover a page is painted under ---------- */

/* theme-boot.js marks <html> with .arriving before the first paint when the
   page was reached from another page of the site. This draws the frame the
   last page ended on (the ground, four rings, the mark) from that class alone,
   so the page is never seen before the reveal. page-motion.js then puts a live
   copy over it in exactly the same place and takes the class away. The rings
   are given soft half-pixel edges: hard one-pixel stops in a gradient render
   as a dotted line rather than a circle.

   If the script never comes (blocked, failed, slow beyond reason), the cover
   lifts itself after three seconds. A page left covered because a script did
   not run would be far worse than one with no transition. */
html.arriving::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 500;
  pointer-events: none;
  background:
    var(--turn-mark) 50% 50% / 56px auto no-repeat,
    radial-gradient(circle at 50% 50%, transparent calc(14vmax - 1.5px), var(--turn-line) calc(14vmax - 1px), var(--turn-line) calc(14vmax - .5px), transparent 14vmax),
    radial-gradient(circle at 50% 50%, transparent calc(21vmax - 1.5px), var(--turn-line) calc(21vmax - 1px), var(--turn-line) calc(21vmax - .5px), transparent 21vmax),
    radial-gradient(circle at 50% 50%, transparent calc(28vmax - 1.5px), var(--turn-line) calc(28vmax - 1px), var(--turn-line) calc(28vmax - .5px), transparent 28vmax),
    radial-gradient(circle at 50% 50%, transparent calc(35vmax - 1.5px), var(--turn-line) calc(35vmax - 1px), var(--turn-line) calc(35vmax - .5px), transparent 35vmax),
    var(--turn-ground);
  animation: page-turn-failsafe 0s linear 3s forwards;
}

/* The home page's own entrance would play a second time on top of this one. */
html.arriving .intro-wipe { display: none; }

@keyframes page-turn-failsafe { to { visibility: hidden; } }

/* ---------- The live overlay ---------- */

.page-turn {
  position: fixed;
  inset: 0;
  z-index: 500;
  overflow: hidden;
  pointer-events: none;
}

/* Leaving, it also takes the clicks, so a second link cannot start a second turn. */
.page-turn.is-leaving { pointer-events: auto; }

.page-turn i,
.page-turn-mark { position: absolute; left: 50%; top: 50%; translate: -50% -50%; }

/* Leaving: the ground grows from the centre as a disc. Qualified to outrank the
   centring rule above, which would otherwise shrink it to a box in the middle
   of the screen with the disc clipped out of that. */
.page-turn .page-turn-cover {
  inset: 0;
  translate: none;
  background: var(--turn-ground);
  clip-path: circle(0% at 50% 50%);
}

/* Arriving: three empty circles, each with a shadow that fills the screen
   around it. Stacked ground over two lighter steps, they open in that order,
   each showing the next tone until the last shows the page. */
.page-turn-hole {
  width: 0;
  height: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 150vmax var(--tone);
}
.page-turn-hole.hole-1 { z-index: 3; --tone: var(--turn-ground); }
.page-turn-hole.hole-2 { z-index: 2; --tone: var(--turn-step-1); }
.page-turn-hole.hole-3 { z-index: 1; --tone: var(--turn-step-2); }

/* A red line riding the boundary between the pages: the edge of the disc as
   one page is covered, the edge of the last circle as the next is opened. */
.page-turn-edge {
  z-index: 4;
  opacity: 0;
  width: 0;
  height: 0;
  box-sizing: border-box;
  border: 2px solid var(--red);
  border-radius: 50%;
}

.page-turn.is-leaving .page-turn-hole { display: none; }

/* Sizes match the stylesheet cover above ring for ring. */
.page-turn-rings { position: absolute; inset: 0; z-index: 5; }
.page-turn-rings i {
  border: 1px solid var(--turn-line);
  border-radius: 50%;
}
.page-turn-rings i:nth-child(1) { width: 28vmax; height: 28vmax; }
.page-turn-rings i:nth-child(2) { width: 42vmax; height: 42vmax; }
.page-turn-rings i:nth-child(3) { width: 56vmax; height: 56vmax; }
.page-turn-rings i:nth-child(4) { width: 70vmax; height: 70vmax; }

/* A shipment on the second ring: a red dot carried round it while the page
   is left, as the ships ride the wave behind the site. Leaving only. */
.page-turn-rings .page-turn-orbit {
  width: 42vmax;
  height: 42vmax;
  border: 0;
  opacity: 0;
}
.page-turn-orbit::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 5px rgba(227, 6, 19, .16);
}

.page-turn-mark { z-index: 6; width: 56px; }
.page-turn-mark img { display: block; width: 100%; height: auto; }
.page-turn-mark .on-dark,
.dark .page-turn-mark .on-light { display: none; }
.dark .page-turn-mark .on-dark { display: block; }

/* Where the reader is going, set as the site's labels are: a red rule, then
   the name in mono capitals. Leaving only. */
.page-turn-label {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: calc(50% + 50px);
  translate: -50% 0;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 40px);
  font: 500 11px var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--turn-text);
  opacity: 0;
}
.page-turn-label::before {
  content: "";
  width: 23px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--red);
}