/* Include padding and borders in each element's size. */
* {
  box-sizing: border-box;
}

/* Set the shared colors and page background. */
html {
  background: #d1d1cf;
  --accent: #9b3b24;
  --accent-dark: #84321f;
  --logo-scale: 0.666666667; /* Use two thirds of the previous logo and box size. */

  /* Cursor timings are shared with main.js through these CSS variables. */
  --cursor-reveal-duration: 200ms; /* Fade in after the logo has landed. */
  --cursor-blink-duration: 650ms; /* One full visible/hidden blink. */
  --cursor-travel-duration: 420ms; /* Move from the description to the email. */
  --cursor-dot-duration: 360ms; /* Move the dot below the final k. */
  --cursor-shape-duration: 240ms; /* Shrink the vertical cursor into a dot. */
  --cursor-stretch-duration: 500ms; /* Expand the dot into the underline. */
  --cursor-width: 4px; /* Width of the cursor while typing. */
  --contact-line-height: 1px; /* Thickness of both the dot and the underline. */
  --contact-line-inset: 0.25rem; /* Space at each end of the underline. */
  --contact-line-bottom: 0.5rem; /* Distance above the bottom of the link. */
}

/* Center the page with a soft gradient and space on small screens. */
body {
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: 2rem;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 38%, #f4f4f1 0%, transparent 65%),
    linear-gradient(150deg, #dededb 0%, #c3c3c1 100%);
  color: #202120;
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Keep the logo and contact details slightly above the center. */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  transform: translateY(-3vh);
  text-align: center;
}

/* Scale the box and its padding together so the wordmark keeps its proportions. */
h1 {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: calc(clamp(10rem, 21.333333vw, 14rem) * var(--logo-scale));
  max-width: 100%;
  aspect-ratio: 1;
  padding: calc(1.333333rem * var(--logo-scale));
  margin: 0;
  animation: arrive 650ms ease-out both;
}

/* Rotate the background while keeping the logo still. */
h1::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: #202120;
  content: "";
  transition: background-color 260ms ease, transform 350ms ease;
}

/* Use the logo hover effect only with a mouse or similar pointer. */
@media (hover: hover) and (pointer: fine) {
  h1:hover::before {
    background: var(--accent);
    transform: rotate(-2deg);
  }
}

/* Scale the SVG logo without changing its proportions. */
.wordmark {
  display: block;
  width: 100%;
  height: auto;
}

/* Keep consistent spacing between the description and email link. */
.details {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; /* Let desktop text use all available space. */
  min-width: 0;
  gap: 1rem;
  margin-top: clamp(2rem, 5vw, 2.75rem);
  /* Fade without moving, so the cursor's first position stays correct. */
  animation: fade-in 650ms 120ms ease-out both;
}

/* Use one line when it fits; wrap and balance naturally on smaller screens. */
.tagline {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  color: #414240;
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.65;
  text-wrap: balance;
}

/* Measure the final text with its normal wrapping before animation starts. */
.typing-reference {
  display: block;
  visibility: hidden;
}

/* Center fixed line frames so typing and mistakes cannot change their position. */
.typing-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Reserve the full natural width and height of each finished line. */
.typing-line {
  position: relative;
  display: block;
  width: var(--line-width);
  white-space: pre;
  text-align: left;
  flex: none;
}

.typing-line-reference { visibility: hidden; }

/* Letters use normal font spacing, with no individual spans or width settings. */
.typing-line-text {
  position: absolute;
  left: 0;
  top: 0;
  white-space: pre;
}

/* The shared cursor is decorative and must not block clicks. */
.typing-cursor {
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: var(--cursor-width);
  height: 1em;
  background: #414240;
  pointer-events: none;
  opacity: 0; /* Stay hidden until the logo has finished arriving. */
}

/* Fade in first, then let JavaScript start the blinking animation. */
.typing-cursor.revealing {
  animation: fade-in var(--cursor-reveal-duration) ease-out both;
}

.typing-cursor.visible { opacity: 1; }

/* Blink while the cursor types or waits. */
.typing-cursor.blink {
  animation: cursor-blink var(--cursor-blink-duration) steps(1) infinite;
}

/* Move smoothly from the description to the email address. */
.typing-cursor.travelling {
  transition: transform var(--cursor-travel-duration) ease;
}

/* Turn the cursor into a small dot. */
.typing-cursor.morphing {
  background: var(--accent-dark);
  transition: transform var(--cursor-dot-duration) ease,
    width var(--cursor-shape-duration) ease,
    height var(--cursor-shape-duration) ease,
    border-radius var(--cursor-shape-duration) ease;
}

/* Stretch the dot into the email underline. */
.typing-cursor.stretching {
  transition: transform var(--cursor-stretch-duration) ease,
    width var(--cursor-stretch-duration) ease,
    height var(--cursor-stretch-duration) ease,
    border-radius var(--cursor-stretch-duration) ease;
}

/* Blink gently without moving the layout. */
@keyframes cursor-blink {
  50% {
    opacity: 0;
  }
}

/* Give the orange email link a click area at least 44px tall. */
.contact {
  position: relative;
  display: inline-block;
  padding: 0.75rem 0.25rem;
  min-height: 44px;
  color: var(--accent-dark);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-decoration: none;
}

/* Show the fixed underline after the cursor changes shape. */
.contact::after {
  position: absolute;
  right: var(--contact-line-inset);
  bottom: var(--contact-line-bottom);
  left: var(--contact-line-inset);
  height: var(--contact-line-height);
  background: currentColor;
  content: "";
  transform: scaleX(1);
  transform-origin: left;
}

/* Change only the color on hover and keyboard focus. */
.contact:hover,
/* Use a clear outline for keyboard focus. */
.contact:focus-visible {
  color: #202120;
}

/* Always show the underline on the finished or static page. */
.contact.complete::after {
  transform: scaleX(1);
}

/* Wait to show the underline until the cursor draws it. */
.contact.typing::after {
  transform: scaleX(0);
}

.contact:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
  border-radius: 2px;
}

/* Fade in the contact details without changing their measured position. */
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Fade in the logo with a small upward movement. */
@keyframes arrive {
  from {
    opacity: 0;
    translate: 0 8px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Respect the user's reduced motion setting. */
@media (prefers-reduced-motion: reduce) {

  h1,
  .details {
    animation: none;
  }

  .typing-cursor {
    display: none;
  }

  .contact,
  .contact::after,
  h1::before {
    transition: none;
  }

  h1:hover::before {
    transform: none;
  }

}

/* Keep text available to screen readers without showing it twice. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}