/* ========================================
   CSS Custom Properties
   ======================================== */

:root {
  --color-text: #212121;
  --color-text-muted: #909090;
  --color-background: #f3f9fa;
  --color-accent: #00abc9;
  --color-accent-hover: #005362;

  --font-family: 'brandon-grotesque', sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;

  --transition-fast: 0.2s ease-out;
}

/* ========================================
   Base Styles
   ======================================== */

html {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-background);
  margin: 0;
  padding: 0;
}

/* ========================================
   Typography
   ======================================== */

h1,
h2 {
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
}

h1 {
  font-size: 60px;
  margin-bottom: 20px;
}

h2 {
  font-size: 24px;
  margin-bottom: 50px;
}

/* ========================================
   Links
   ======================================== */

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-accent-hover);
}

section a {
  margin-right: 5px;
}

section a.last {
  margin-right: 0;
}

/* ========================================
   Layout Components
   ======================================== */

.home {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  text-align: center;
}

/* ========================================
   Animations
   ======================================== */

.animated {
  animation: fadeIn 1s both;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ========================================
   Letter Animation (Typewriter Effect)
   ======================================== */

/* The static tagline is the fallback for no-JS and reduced-motion visitors.
   JS swaps in the animated version by adding .is-animating. */
.letter-animation:not(.is-animating) .text-wrapper {
  display: none;
}

.letter-animation.is-animating .tagline-fallback {
  display: none;
}

.letter-animation .text-wrapper {
  position: relative;
  display: inline-block;
  padding: 0.1em 0.05em 0.15em 0;
}

.letter-animation .line {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5px;
  height: 100%;
  background-color: var(--color-text);
  transform-origin: 0 50%;
  opacity: 0;
}

.letter-animation .letter {
  display: inline-block;
  line-height: 1em;
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {
  .animated {
    animation: none;
  }
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 480px) {
  h1 {
    font-size: 48px;
  }

  h2 {
    font-size: 22px;
  }
}