/* ------------------------------------------------------------
   Landing page (after the start page)
   Uses the tokens and frame from styles.css. Sizes are in
   grid units (--u) of the same 2000 × 1130 design.
   The top bar is shared with the subpages (contact.css,
   projects.css).
   ------------------------------------------------------------ */

.landing-page,
.contact-page,
.projects-page {
  /* Content starts right away, or after the bar has drawn in */
  --t0: 0.3s;
  /* Units with a floor, so small text stays readable in small
     windows: --mu for the bar (menu text ≥ 13px), --tu for text
     boxes (text ≥ 13.5px). Above that they equal --u. */
  --mu: max(var(--u), calc(13px / 19));
  --tu: max(var(--u), calc(13.5px / 19));

  --bar-height: calc(80 * var(--mu));
  --small-text: max(13.5px, calc(18.5 * var(--u)));

  /* Bar card widths (also used by bar.js) */
  --w-logo: calc(96 * var(--mu));
  --w-projects: calc(289 * var(--mu));
  --w-about: calc(183 * var(--mu));
  --w-contact: calc(174 * var(--mu));
  --w-lang: calc(134 * var(--mu));
}

/* ---------- Top bar ---------- */

/* On subpages: logo + the current page's card */
.bar__start {
  display: flex;
}

.bar {
  position: fixed;
  top: var(--margin);
  left: var(--margin);
  right: var(--margin);
  height: var(--bar-height);
  display: flex;
  justify-content: space-between;
}

/* Bottom line of the bar, draws in like the frame */
.bar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--stroke);
  background: var(--ink);
  transform-origin: left;
  --from: scaleX(0);
  animation: draw 1s cubic-bezier(0.65, 0, 0.35, 1) 0.2s backwards;
}

.logo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--w-logo);
  color: var(--ink);
}

.logo svg {
  width: calc(50 * var(--mu));
  overflow: visible;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.56px;
  transition: stroke-width 0.35s ease;
  animation: appear 0.7s ease 1.3s backwards;
}

/* Contour hover: the outline thickens, the logo gets bolder */
.logo:hover svg,
.logo:focus-visible svg {
  stroke-width: 2.6px;
}

/* Divider right of the logo */
.logo::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--stroke);
  background: var(--ink);
  transform-origin: top;
  --from: scaleY(0);
  animation: draw 0.5s ease 1.1s backwards;
}

.menu {
  display: flex;
}

.cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-size: calc(19 * var(--mu));
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  animation: appear 0.7s ease calc(1.4s + var(--i) * 0.12s) backwards;
}

.cell--projects { width: var(--w-projects); }
.cell--about    { width: var(--w-about); }
.cell--contact  { width: var(--w-contact); }
.cell--lang     { width: var(--w-lang); }

/* Divider left of every menu cell */
.cell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--stroke);
  background: var(--ink);
  transform-origin: top;
  --from: scaleY(0);
  animation: draw 0.5s ease calc(1.2s + var(--i) * 0.12s) backwards;
}

.lang b {
  font-weight: 700;
}

.lang a {
  color: inherit;
  text-decoration: none;
}

/* Hover: text eases into bold. Bold letters are wider, so the
   width axis narrows at the same time and the text keeps its
   size (values measured per label) */
a.cell,
.lang a,
.cta {
  --bold-stretch: 97%;
  transition: font-weight 0.4s ease, font-stretch 0.4s ease;
}

/* The card of the current page stays bold, also while it slides
   in from another page; it turns regular again when sliding back */
.cell[aria-current="page"],
.cell.is-traveling:not(.is-returning) {
  --bold-stretch: 97%;
  font-weight: 700;
  font-stretch: var(--bold-stretch);
}

.cell.is-returning {
  font-weight: 400;
  font-stretch: 100%;
}

.lang a { --bold-stretch: 99%; }
.cta    { --bold-stretch: 91.5%; }

a.cell:hover,
a.cell:focus-visible,
.lang a:hover,
.lang a:focus-visible,
.cta:hover,
.cta:focus-visible {
  font-weight: 700;
  font-stretch: var(--bold-stretch);
}

/* ---------- Content ----------
   The composition is centred in the area below the bar;
   positions inside it start at the top-left of the text box */

.content {
  position: fixed;
  top: calc(var(--margin) + var(--bar-height));
  left: var(--margin);
  right: var(--margin);
  bottom: var(--margin);
}

.composition {
  position: absolute;
  /* Centred without transform, so lines stay on whole pixels */
  top: calc(50% - 354 * var(--u));
  left: calc(50% - 834 * var(--u));
  width: calc(1668 * var(--u));
  height: calc(708 * var(--u));
}

.about-text {
  position: absolute;
  top: 0;
  left: calc(-40 * var(--u));
  /* Grows with the text in small windows; lies above the frame */
  z-index: 1;
  width: calc(710 * var(--tu));
  min-height: calc(213 * var(--tu));
  margin: 0;
  padding: calc(42 * var(--tu)) calc(40 * var(--tu)) calc(34 * var(--tu)) calc(43 * var(--tu));
  box-shadow: inset 0 0 0 var(--stroke) var(--ink); /* not border: browsers round thin borders down */
  background: var(--bg);
  font-size: var(--small-text);
  line-height: 1.22;
  text-align: justify;
  hyphens: auto;
  /* Slightly tighter letters and word spaces give justification more
     room, so the gaps stay close to a normal word space (measured) */
  letter-spacing: -0.003em;
  word-spacing: -0.05em;
  animation: appear 0.7s ease var(--t0) backwards;
}

/* Frame with the project image carousel (carousel.js); the whole
   frame links to the projects page */
.showcase {
  position: absolute;
  /* Image area 640 × 471 = the images' proportions (1599 × 1177) */
  left: calc(753 * var(--u));
  top: calc(100 * var(--u));
  width: calc(720 * var(--u));
  height: calc(551 * var(--u));
  padding: calc(40 * var(--u));
  box-shadow: inset 0 0 0 var(--stroke) var(--ink); /* not border: browsers round thin borders down */
  background: var(--bg);
  /* No fade: the frame simply appears, then the carousel starts */
  animation: show 0.01s steps(1) calc(var(--t0) + 0.9s) backwards;
}

.showcase__frame {
  display: block;
  width: 100%;
  height: 100%;
}

/* The whole image is shown in its own proportions */
.showcase__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.cta {
  position: absolute;
  /* Overlaps the frame's bottom left corner; anchored bottom
     right, so it grows up and left */
  right: calc(832 * var(--u));
  bottom: calc(40 * var(--u));
  z-index: 2;
  width: calc(265 * var(--tu));
  height: calc(100 * var(--tu));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 var(--stroke) var(--ink); /* not border: browsers round thin borders down */
  background: var(--bg);
  color: var(--ink);
  font-size: calc(19 * var(--tu));
  text-decoration: none;
  /* No fade: simply appears after the frame */
  animation: show 0.01s steps(1) calc(var(--t0) + 1.5s) backwards;
}

a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

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

@keyframes show {
  from { visibility: hidden; }
}

/* ---------- Bar transitions (see bar.js) ----------
   The current page's card sits next to the logo, overlapping its
   divider; when leaving, every card slides to its place on the
   next page and the content fades out */

/* Divider right of a card, shown where the card stands alone */
.cell::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--stroke);
  background: var(--ink);
  opacity: 0;
}

.cell[aria-current="page"] {
  margin-left: calc(-1 * var(--stroke));
}

.cell[aria-current="page"]::after,
.cell.is-traveling::after {
  opacity: 1;
}

.bar-leaving .cell {
  transition:
    transform 0.9s cubic-bezier(0.65, 0, 0.35, 1),
    font-weight 0.4s ease,
    font-stretch 0.4s ease;
}

/* The card sliding back hides its right divider just before it
   lands, where the next card's divider takes over */
.cell.is-traveling.is-returning::after {
  opacity: 0;
  transition: opacity 0.2s ease 0.7s;
}

/* Cards crossing the others travel on top as white tiles
   (but leave the bar lines visible) */
.cell.is-traveling {
  z-index: 1;
  background: linear-gradient(var(--bg), var(--bg)) no-repeat 0 var(--stroke) / 100% calc(100% - 2 * var(--stroke));
}

.bar-leaving .content {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* ---------- Bar intro ----------
   The bar only draws in when arriving from the start page
   (main.js leaves a note, the inline script in landing.html
   turns it into .from-start). Otherwise it is simply there. */

.from-start .landing-page {
  --t0: 2s;
}

:root:not(.from-start) .bar::after,
:root:not(.from-start) .logo svg,
:root:not(.from-start) .logo::after,
:root:not(.from-start) .cell,
:root:not(.from-start) .cell::before {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .landing-page *,
  .landing-page *::before,
  .landing-page *::after,
  .contact-page *,
  .contact-page *::before,
  .contact-page *::after,
  .projects-page *,
  .projects-page *::before,
  .projects-page *::after {
    animation: none !important;
    transition: none !important;
  }
}