/* ------------------------------------------------------------
   Contact page
   Builds on styles.css and the shared bar in landing.css.
   ------------------------------------------------------------ */

/* ---------- Composition ----------
   Positions start at the top-left of the "L" in LET’S */

.contact {
  --talk-size: calc(233 * var(--u));
  /* Top of the e-mail box: as designed, but moved up when the boxes
     grow with the text, so the LinkedIn box stays inside */
  --mail-top: min(calc(466 * var(--u)), calc(666 * var(--u) - 200 * var(--tu)));
  top: calc(50% - 333 * var(--u));
  left: calc(50% - 825 * var(--u));
  width: calc(1650 * var(--u));
  height: calc(666 * var(--u));
}

.talk {
  margin: 0;
  font-weight: inherit;
}

.talk__word {
  position: absolute;
  left: calc(var(--x) * var(--u));
  /* --y is the top of the capital letters */
  top: calc(var(--y) * var(--u) - var(--cap-offset) * var(--talk-size));
  font-size: var(--talk-size);
  line-height: 1;
  white-space: nowrap;
  color: var(--bg);
  /* Doubled: the fill covers the inner half (see styles.css) */
  -webkit-text-stroke: calc(2 * var(--text-stroke)) var(--ink);
  paint-order: stroke fill;
}

/* Until the font has loaded and the intro starts (contact.js) */
.js:not(.intro) .contact {
  visibility: hidden;
}

/* --w is the weight of each letter */
.talk__word,
.talk__word * {
  font-weight: var(--w);
}

.talk__word--talk { --x: 176; --y: 150; z-index: 1; }
.talk__word--lets { --x: -27; --y: 0;   z-index: 2; }

.smiley {
  position: absolute;
  /* Keeps its designed position relative to the e-mail box and
     moves with it when the boxes grow with the text, but never
     up into TALK! (which ends at 311) */
  right: calc(446 * var(--tu) - 28 * var(--u));
  top: max(calc(var(--mail-top) - 100 * var(--u)), calc(330 * var(--u)));
  width: calc(212 * var(--u));
  overflow: visible;
  fill: var(--bg);
  stroke: var(--ink);
  stroke-width: var(--stroke);
  vector-effect: non-scaling-stroke;
}

/* After the letters (they end at about 2.1s): smiley, then boxes */
.intro .smiley {
  animation: appear 0.7s ease 2.3s backwards;
}

.smiley * {
  vector-effect: non-scaling-stroke;
}

/* ---------- Contact boxes ---------- */

.contact-box {
  --bold-stretch: 92%;
  position: absolute;
  display: flex;
  align-items: center;
  height: calc(107 * var(--tu));
  padding-left: calc(42 * var(--tu));
  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;
  white-space: nowrap;
  /* Hover: eases into bold, the width axis keeps the text size */
  transition: font-weight 0.4s ease, font-stretch 0.4s ease;
}

/* No fade: each box simply appears, like the project cards */
.intro .contact-box {
  animation: show 0.01s steps(1) var(--delay) backwards;
}

.contact-box:hover,
.contact-box:focus-visible {
  font-weight: 700;
  font-stretch: var(--bold-stretch);
}

.contact-box--linkedin {
  --bold-stretch: 91.5%;
  --delay: 3.1s;
  /* Hangs below the e-mail box with the same small overlap as in
     the design, at any size */
  right: calc(321 * var(--tu));
  top: calc(var(--mail-top) + 93 * var(--tu));
  width: calc(239 * var(--tu));
  z-index: 1;
}

.contact-box--mail {
  --bold-stretch: 92.5%;
  --delay: 3.35s;
  /* The anchor of the group: right edge, grows to the left */
  right: 0;
  top: var(--mail-top);
  width: calc(446 * var(--tu));
  z-index: 2;
}

.underline {
  text-decoration: underline;
  text-decoration-thickness: var(--stroke);
  text-underline-offset: 0.18em;
}