/* The title screen: a faint composition of images, formulas and line drawings around the
   title; the title itself; the front matter (authors, abstract) on the second screen; and the
   scrolling "stage" that cross-fades the two (driven by js/post.js).

   The composition is written per post (the --art file given to tools/tex2post.py). Each item
   is placed by its centre, in percentages of the screen: --x/--y on wide screens, --mx/--my
   on phones (items without them get data-phone="hide"); --i staggers the fade-in. */

.title-block { text-align: center; }
.landing {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 3rem 0;
}
.title-block p { text-align: center; margin: 0; }

/* everything is sized in em of .landing-art, which scales with the window */
.landing-art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--muted);
  font-size: min(1.4vw, 2.2vh);
}
.landing-text { position: relative; z-index: 1; }
.landing .scroll-cue { z-index: 1; }
.art {
  position: absolute;
  left: var(--x);
  top: var(--y);
  margin: 0;
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  opacity: 0;
  animation: art-in 1.6s ease-out forwards;
  animation-delay: calc(0.25s + var(--i, 0) * 0.12s);
}
@keyframes art-in { to { opacity: var(--o, 1); } }

/* round images (the site uses portraits; any picture works) */
.art-image { --o: 0.5; width: var(--w, 6.6em); text-align: center; }
.art-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  filter: grayscale(1) contrast(1.05);
  box-shadow: 0 0 0 1px var(--rule);
  background: #fff;
}
.art-image figcaption {
  margin-top: 0.4em;
  font-size: 0.72em;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.art-formula { --o: 0.6; font-size: var(--size, 1em); white-space: nowrap; }
.art-drawing { --o: 0.45; width: var(--w, 8em); }
.art-drawing svg { display: block; width: 100%; height: auto; overflow: visible; }
:root[data-theme="dark"] .art-image { --o: 0.38; }
:root[data-theme="dark"] .art-image img { filter: grayscale(1) invert(1) brightness(0.9); }

@media (max-width: 1000px), (max-aspect-ratio: 1/1) {
  .landing-art { font-size: 15px; }
  .art { left: var(--mx); top: var(--my); }
  .art[data-phone="hide"] { display: none; }
  .art-image { width: 4.6em; }
  .art-formula { font-size: 1em; }
}
@media (prefers-reduced-motion: reduce) {
  .art { animation: none; opacity: var(--o, 1); }
}

/* amsart: title in bold capitals (here in Charter), larger on its own screen */
.title-block h1 {
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 1.2rem + 1.6vw, 2.3rem);
  font-weight: 700;
  line-height: 1.27;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 auto;
  max-width: min(34rem, 56vw);
  text-wrap: balance;
}
/* a formula in the title keeps its letters, and does not open up the line spacing */
.title-block h1 .katex { text-transform: none; letter-spacing: 0; line-height: 1; }
.title-block h1 .katex .strut { display: none; }
@media (max-width: 1000px), (max-aspect-ratio: 1/1) {
  .title-block h1 { max-width: 34rem; }
}
.scroll-cue {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  color: var(--muted);
  transform: translateX(-50%);
  animation: cue 2.4s ease-in-out infinite;
}
.scroll-cue:hover { color: var(--fg); text-decoration: none; }
.scroll-cue svg { width: 1.6rem; height: 1.6rem; }
@keyframes cue {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 0.4rem); }
}

/* the front matter on the second screen, in Charter: authors in small capitals, then the
   abstract in italic (\emph turns upright, as in LaTeX), then the date */
.front-note {
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.45;
  max-width: 31rem;
  margin: 0 auto;
}
.front-note p { text-wrap: balance; hyphens: manual; -webkit-hyphens: manual; }
.front-note .authors {
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 1.1em;
  margin-bottom: 1em !important;
}
.front-note .abstract { font-style: italic; text-wrap: pretty; }
.front-note .abstract em { font-style: normal; }
.front-note .abstract-head {
  display: block;
  font-style: normal;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  font-size: 0.85em;
  color: var(--muted);
  margin-bottom: 0.3em;
}
.front-note .date {
  margin-top: 1.1em !important;
  font-size: 0.85em;
  color: var(--muted);
}

/* The stage: without JavaScript, the title and then the front matter, one below the other.
   With it, the stage is 2.5 screens tall and its screen stays pinned while the title fades
   out and the front matter fades into its place (--stage-title and --stage-note, 0 to 1) */
.landing .front-note { margin-top: 3rem; }
.cue-note { display: none; }
.js .landing-stage { position: relative; height: 250vh; height: 250svh; }
.js .landing-stage > .landing {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  padding: 0;
}
.js .landing-text { position: absolute; left: 50%; top: 50%; margin: 0; }
.js .landing h1.landing-text {
  width: min(34rem, 56vw);
  max-width: none;
  opacity: var(--stage-title, 1);
  transform: translate(-50%, calc(-50% - (1 - var(--stage-title, 1)) * 2.5rem));
}
.js .landing .front-note {
  width: min(31rem, calc(100vw - 2.5rem));
  opacity: var(--stage-note, 0);
  transform: translate(-50%, calc(-50% + (1 - var(--stage-note, 0)) * 2rem));
}
.js .landing-stage:not(.note-on) .front-note { pointer-events: none; }
.js .cue-note { display: grid; }
.scroll-cue { transition: opacity 0.3s; }
.js .landing-stage:not(.note-on) .cue-note,
.js .landing-stage.note-on .cue-title { opacity: 0; pointer-events: none; }
.stage-anchor { display: block; scroll-margin-top: 0; }
.js .stage-anchor { position: absolute; top: 105vh; top: 105svh; }
@media (max-width: 1000px), (max-aspect-ratio: 1/1) {
  .js .landing h1.landing-text { width: min(34rem, calc(100vw - 2.5rem)); }
  .js .art-formula .katex { opacity: var(--stage-title, 1); }
}
@media (max-width: 600px) {
  .landing .front-note { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .landing h1.landing-text, .js .landing .front-note { transform: translate(-50%, -50%); }
}