/* landing.css — the homepage only.
 *
 * Laid out like a search engine's front page: a light menu bar in two groups,
 * one small centred group (the mark, the name, the tagline, a link to the
 * news), and a two-row footer. Colours come from design.css; the name is set
 * in its display face, Cinzel.
 *
 * Motion is a single sequence on load, about 2.5 s, run once:
 *   1. the hexagon draws its outline and fills,
 *   2. the three satellites leave the hexagon and settle where the logo has them,
 *   3. "Centram" gathers toward the centre,
 *   4. the tagline opens outward from the middle,
 *   5. the News link appears last.
 * Every animation sits inside the no-preference query below, so with reduced
 * motion — or without CSS animation at all — the page is simply there.
 * Timings are the custom properties on .intro; change them there.
 */

.landing {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* minmax(0, …) so the column never grows to fit content: while the name
     is gathering it is wider than a phone, and an auto column would follow
     it and scroll the whole page sideways. */
  grid-template-columns: minmax(0, 1fr);
}

/* ---- Menu bar -------------------------------------------------------- */
/* The shared site header, minus the brand: on this page the mark in the
   centre is the brand. The nav spans the bar; .site-head__push starts the
   right-hand group. */
.site-head--landing .site-head__nav { flex: 1; align-items: center; }
.site-head--landing .site-head__push { margin-left: auto; }

/* ---- Centre ---------------------------------------------------------- */
.landing__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* More room below than above, so the group sits on the optical middle of
     the screen rather than its geometric one. */
  padding: 24px var(--pad-x) clamp(64px, 14vh, 160px);
  /* The name starts its gather wider than a phone screen. Clip, not hidden:
     clip makes no scroll container, so nothing here can scroll sideways. */
  overflow-x: clip;
}

.mark {
  display: block;
  width: clamp(56px, 6.2vw, 80px);
  height: auto;
  overflow: visible;
  color: var(--bone);
  margin-bottom: clamp(14px, 1.8vw, 20px);
}
.mark.is-replayable { cursor: pointer; }
.mark__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 10;
  stroke-linejoin: round;
}
.mark__fill { fill: currentColor; }

/* Sized like a search engine's logo: about 270 px wide on a laptop. Cinzel is
   all capitals and wide (about 5.6x its size for "CENTRAM"). */
.landing__name {
  margin: 0;
  max-width: none;
  font-family: var(--display);
  font-size: clamp(34px, 4.8vw, 56px);
  font-weight: 600;
  line-height: 1;
  /* Letter-spacing also lands after the last letter, which would push the
     centred word left; an equal indent before the first letter cancels it. */
  letter-spacing: .04em;
  text-indent: .04em;
}

.landing__tagline {
  margin: 10px 0 0;
  max-width: none;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.4;
  color: var(--bone-2);
}

/* News: a plain underlined link with an up-right arrow, not a button. The
   underline sits on the word only; the arrow is the sign that it leads away. */
.landing__news {
  margin-top: clamp(26px, 4.5vh, 40px);
  display: inline-flex;
  align-items: baseline;
  gap: .28em;
  padding: 4px 2px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--bone);
  border-bottom: 0;           /* design.css underlines links with a border */
}
.landing__news-label {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
}
.landing__news-arrow { display: inline-block; font-size: .9em; }
.landing__news:hover { color: var(--flux); }

/* The footer is page.css's .foot, shared with every other page. */

@media (max-width: 640px) {
  .site-head--landing .site-head__nav { justify-content: center; }
  .site-head--landing .site-head__push { margin-left: 0; }
}

/* ---- Motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .intro {
    --t-draw: .1s;      /* hexagon outline starts */
    --t-core: .55s;     /* hexagon fills */
    --t-sats: .75s;     /* first satellite leaves the core */
    --t-name: .95s;     /* "Centram" gathers */
    --t-tagline: 1.5s;  /* tagline opens */
    --t-news: 2.2s;     /* News link appears */
  }

  /* 1. The hexagon. pathLength="1" on the outline makes a dash of 1 the whole
        perimeter, so the offset runs 1 -> 0 whatever the drawing's size. */
  .mark.play .mark__core .mark__line {
    stroke-dasharray: 1;
    animation: mark-draw .8s cubic-bezier(.65, 0, .35, 1) var(--t-draw) both;
  }
  .mark.play .mark__core .mark__fill {
    transform-box: fill-box;
    transform-origin: center;
    animation: mark-core .5s cubic-bezier(.22, 1, .36, 1) var(--t-core) both;
  }

  /* 2. The satellites start at the hexagon's centre (minus their own offset)
        and travel out along it, overshooting slightly before they settle. */
  .mark.play .mark__body {
    transform-box: fill-box;
    transform-origin: center;
    animation: mark-sat .9s cubic-bezier(.2, 1.25, .35, 1)
               calc(var(--t-sats) + var(--i) * .1s) both;
  }

  /* Hover answers the pointer: the satellites drift a little further out
     along the same lines. A separate element from the one the load
     animation holds, so the two never fight over transform. */
  .mark__sat { transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
  @media (hover: hover) {
    .mark:hover .mark__sat {
      transform: translate(calc(var(--dx) * .1), calc(var(--dy) * .1));
    }
  }

  /* 3. The name gathers toward the centre. */
  .intro .landing__name {
    animation: name-gather 1s cubic-bezier(.16, 1, .3, 1) var(--t-name) both;
  }

  /* 4. The tagline opens from the middle outward. */
  .intro .landing__tagline {
    animation: tagline-open .8s cubic-bezier(.65, 0, .35, 1) var(--t-tagline) both;
  }

  /* 5. The link, last. Hidden rather than only transparent until then, so it
        cannot be tabbed to or clicked while invisible. */
  .intro .landing__news {
    animation: news-in .6s cubic-bezier(.22, 1, .36, 1) var(--t-news) both;
  }
  .landing__news { transition: color .2s; }
  .landing__news-arrow { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
  .landing__news:hover .landing__news-arrow,
  .landing__news:focus-visible .landing__news-arrow { transform: translate(2px, -2px); }
}

@keyframes mark-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes mark-core {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: none; }
}
@keyframes mark-sat {
  from {
    opacity: 0;
    transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1))
               scale(.25) rotate(-120deg);
  }
  35%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
@keyframes name-gather {
  from { opacity: 0; letter-spacing: .34em; text-indent: .34em; }
  to   { opacity: 1; letter-spacing: .04em; text-indent: .04em; }
}
@keyframes tagline-open {
  from { opacity: .3; clip-path: inset(-20% 50% -20% 50%); }
  to   { opacity: 1;  clip-path: inset(-20% 0 -20% 0); }
}
@keyframes news-in {
  from { visibility: hidden; opacity: 0; transform: translateY(8px); }
  to   { visibility: visible; opacity: 1; transform: none; }
}