/* Awdera - holding page
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Netrune';
  src: url('netrune-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Base
   ------------------------------------------------------------------------- */

html {
  background: #000;
  /* The backdrop is deliberately 120vw wide; without this the surplus stays
     scrollable on the root element and phones pan sideways. */
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: #000;
  color: #fff;
  font-size: 16px;
  font-family: "Netrune", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
}

a {
  color: #fff;
  text-decoration: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Hero
   ------------------------------------------------------------------------- */

.hero__backdrop {
  position: absolute;
  display: block;
  width: 120vw;
  height: 100vh;
  margin-left: -10vw;
  bottom: -75%;
}

.hero__grid {
  display: grid;
  width: 100%;
  max-width: 600px;
  grid-template-columns: 1fr 100px 1fr;
  gap: 10px;
  position: relative;
}

.hero__cell {
  display: flex;
  align-items: center;
}

/* Centre the divider within its own column; the outer columns keep the
   alignment they already had. */
.hero__cell--divider {
  justify-content: center;
}

/* The divider hangs off its own grid cell rather than the centre of the whole
   grid, so a growing column can never drag it onto the text. Between layouts
   only the angle changes - the box stays 1x200, so the transition is a clean
   turn instead of a rectangle morphing through the middle. */
.hero__divider {
  position: relative;
}

.hero__divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 200px;
  background: linear-gradient(0deg,
      transparent 0%,
      white 55%,
      transparent 100%);
  transform: translate(-50%, -50%) rotate(15deg);
  transform-origin: 50% 50%;
  transition: transform 0.5s ease-out;
}

/* Brand
   ------------------------------------------------------------------------- */

/* The wordmark carries the page heading; the text of it lives in
   .visually-hidden so crawlers and screen readers still get a real h1. */
.brand {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: 0;
}

.brand__logo {
  display: block;
  width: 100%;
  height: auto;
}

/* Tagline
   ------------------------------------------------------------------------- */

.tagline {
  /* Not the flex row the contact lines are: an anonymous flex item would drop
     the trailing space in "More " and glue the rotating word to it. */
  display: block;
  white-space: nowrap;
  margin: 0 0 14px;
  font-size: 0.75rem;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}

/* The slot is sized per word by the script and animates between sizes, so the
   line resizes once per word instead of once per keystroke. At rest the slot
   hugs its word, which is what keeps the stacked layout properly centred; the
   slack that exists mid-resize is left trailing so the letters being typed stay
   attached to "More" instead of drifting away from it. */
.tagline__slot {
  display: inline-block;
  text-align: left;
  white-space: nowrap;
  transition: width 0.35s ease;
}

/* The swapped word carries the message, so it sits brighter than the line. */
.tagline__word {
  color: rgba(255, 255, 255, 0.85);
}

.tagline__caret {
  display: inline-block;
  width: 1px;
  height: 0.95em;
  margin-left: 3px;
  vertical-align: -0.12em;
  background: #e5041a;
  animation: caret-blink 1s step-end infinite;
}

/* Contacts
   ------------------------------------------------------------------------- */

.contact {
  display: flex;
  align-items: center;
  margin: 1em 0;
}

.contact__icon {
  display: inline-block;
  width: 16px;
  margin-right: 15px;
  flex: none;
}

.contact__link:hover {
  border-bottom: 2px solid #e5041a;
}

/* Stacked layout
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .hero__grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 40px;
  }

  .hero__divider::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .hero__cell {
    justify-content: center;
    text-align: center;
  }

  /* Centre every line on the screen, not just the block as a whole, which needs
     the group to span the full column width to centre against. */
  .hero__group {
    width: 100%;
  }

  .contact {
    justify-content: center;
  }

  .tagline {
    text-align: center;
  }

  /* justify-content and text-align are not animatable properties, so the switch
     to the centred layout itself is instant; this softens its arrival. */
  .hero {
    animation: hero-rise 0.5s ease-out both;
  }
}

/* Keyframes
   ------------------------------------------------------------------------- */

@keyframes caret-blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}