@import "./helpers";
@import "./reset.css";

:root {
  --font-system: -apple-system, blinkmacsystemfont, segoe ui, roboto, oxygen,
    ubuntu, cantarell, fira sans, droid sans, helvetica neue, sans-serif;
  --inspect-color: #f00;

  // colors
  --color-black: #000;
  --color-white: #efefef;
  --color-orange: #ff4d00;

  // easings
  --custom-ease-out: cubic-bezier(0, 1, 0.5, 1.02);

  // Layout
  --header-height: #{tovw(152px, "desktop-large")};
}

html {
  line-height: 1.5;
  box-sizing: border-box;
  text-rendering: geometricprecision;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  // tweak if site is light mode.
  color-scheme: dark;
  background-color: black;
}

body {
  font-family: var(--font-basement-grotesque, var(--font-system));
  transition: opacity #{$duration / 3 + "s"} ease-in;
}

body.inspect * {
  outline: 1px solid var(--inspect-color) !important;
}

body:not(.user-is-tabbing) button:focus,
body:not(.user-is-tabbing) input:focus,
body:not(.user-is-tabbing) select:focus,
body:not(.user-is-tabbing) textarea:focus {
  outline: none;
}

.wrapper {
  width: 100%;
  padding: 0 tovw(32px, "desktop-large", 16px);
}

.canvas {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 10;
}

.link {
  position: relative;
  white-space: nowrap;
  color: theme("colors.white");
  transition: color 250ms ease-in-out;
  text-decoration: none;
  pointer-events: all;

  &::before,
  &::after {
    position: absolute;
    top: 100%;
    left: 0;
    background: currentcolor;
    width: 100%;
    height: tovw(1px);
    pointer-events: none;
  }

  &::before {
    content: "";
    transform: scale3d(0, 1, 1);
    transform-origin: 100% 50%;
    transition: transform 250ms ease-in-out;
  }
}

@media (hover: hover) {
  .link {
    &:hover::before,
    &:focus::before {
      transform: scale3d(1, 1, 1);
      transform-origin: 0 50%;
    }
  }
}

::selection {
  color: #000;
  background-color: #ff4d00;
}
