/* ============================================================
   The entry screen, mattmckelvy.com.
   Shown once per browsing session, before the homepage. A static
   masthead, a two-sentence statement typed in the site's serif,
   and one text action. Every value comes from site.css tokens:
   ivory canvas, ink and muted text, a hairline rule, the sans for
   chrome, the serif for the voice, the site's easing.
   ============================================================ */

/* while the intro is up, the page behind holds still; the gutter
   keeps the homepage's width identical when the scrollbar returns */
html.intro-open{overflow:hidden;scrollbar-gutter:stable}

.intro{
  position:fixed;left:0;top:0;right:0;z-index:200;
  height:100vh;height:100dvh;
  overflow-y:auto;overscroll-behavior:contain;
  display:grid;grid-template-rows:auto 1fr;
  background:var(--page);color:var(--ink);
  transition:opacity .48s var(--ease) .12s;
}
.intro[hidden]{display:none}
.intro:focus{outline:none}

/* masthead: name and role stacked top left, large enough to read at a glance */
.intro-mast{padding-top:clamp(24px,6vh,60px)}
.intro-name{
  font-family:var(--sans);font-weight:700;font-size:20px;line-height:1.25;
  letter-spacing:-.04px;color:var(--ink);
}
.intro-role{
  margin-top:4px;font-family:var(--sans);font-size:16px;line-height:1.35;
  letter-spacing:-.08px;color:var(--muted);
}

/* the statement: heading scale, left on the grid, a little above centre */
.intro-body{
  align-self:center;
  padding-block:clamp(24px,4vh,48px) max(clamp(40px,9vh,112px),env(safe-area-inset-bottom));
}
.intro-line{display:block}
.intro-line + .intro-line{color:var(--muted);margin-top:.12em}
.it-rest{visibility:hidden}
.intro-static .it-rest{visibility:visible}

/* the caret: a thin ink line after the last character, never a block or an underscore */
.it-caret{position:relative}
.it-caret::after{
  content:"";position:absolute;left:.05em;top:-.02em;bottom:.19em;
  width:max(1px,.028em);background:currentColor;
  opacity:0;transition:opacity .3s var(--ease);
}
.it-caret.on::after{opacity:1}
.intro.is-paused .it-caret.on::after{animation:intro-blink 1.05s ease-in-out infinite}
@keyframes intro-blink{0%,100%{opacity:1}50%{opacity:.15}}
.intro-sr{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* the action: directly under the statement, an editorial link with a standing underline */
.intro-enter{
  display:inline-block;margin:clamp(10px,2.6vh,30px) 0 0 -12px;
  font-family:var(--sans);font-size:20px;line-height:1;letter-spacing:-.04px;
  color:var(--ink);background:none;border:0;border-radius:0;cursor:pointer;
  padding:22px 12px;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;
  text-decoration-color:var(--ink);
  opacity:0;transform:translateY(6px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),text-decoration-color .2s var(--ease);
}
.intro.is-ready .intro-enter{opacity:1;transform:none;pointer-events:auto}
.intro-enter:hover{text-decoration-color:var(--muted-light)}
.intro-enter:focus-visible{outline:2px solid var(--ink);outline-offset:-12px}

/* into the site: the content settles away, then the canvas lifts off the homepage */
.intro-mast,.intro-body{transition:opacity .36s var(--ease),transform .36s var(--ease)}
.intro.is-leaving{opacity:0;pointer-events:none}
.intro.is-leaving .intro-mast{opacity:0}
.intro.is-leaving .intro-body{opacity:0;transform:translateY(-6px)}

@media (prefers-reduced-motion:reduce){
  .intro-enter,.intro.is-leaving .intro-body{transform:none}
  .it-caret{display:none}
}
@media print{ .intro{display:none!important} }