@import url("./tokens.css");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  font-family: var(--font-main);
  background-color: #1b120c;
}


.landing {
  position: relative;
  height: 100vh;
  background: url("https://images.unsplash.com/photo-1606313564200-e75d5e30476c")
    center/cover no-repeat;
  color: var(--color-text);
}

.overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to bottom,
      rgba(27,18,12,.85) 0%,
      rgba(0,0,0,.35) 35%,
      rgba(0,0,0,.7) 100%
    );
}


.header {
  position: relative;
  z-index: 2;
  padding: var(--space-md);
  text-align: center;
}

.logo-text {
  font-family: var(--font-brand);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 0.4px;
  color: var(--color-text);
}

.content {
  position: relative;
  z-index: 2;
  height: calc(100% - 160px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 var(--space-lg);
}

.content h1 {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: var(--space-lg);
}

.actions {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  align-items: center;
}

.btn {
  width: 100%;
  max-width: 420px;
  padding: 14px;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .3px;
  text-align: center;
  font-size: 12px;
}

.btn.primary {
  background: var(--color-primary);
  color: #1b120c;
}

.btn.outline {
  border: 1px solid var(--color-primary);
  color: var(--color-text);
}

.social-title {
  margin-top: 40px;
  margin-bottom: -5px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  text-align: center;
}

.social {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 18px;
}

.social a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.32);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Base */
.icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: rgba(255,255,255,.8);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Optical tuning */
.icon.threads {
  width: 16px;
}

.icon.x {
  width: 13px;
  transform: translateX(1px);
}

.icon.tiktok {
  width: 16px;
  transform: translateY(0.5px);
}

.icon.fb {
  width: 16px;
  transform: translateY(-1.5px);
}

.icon.ig {
  width: 16px;
}


@media (hover: hover) and (pointer: fine) {
  .social a:hover {
    border-color: var(--color-primary);
  }

  .social a:hover .icon {
    stroke: var(--color-primary);
  }
}


@media (hover: none) {
  .social a,
  .social a:active,
  .social a:focus,
  .social a:focus-visible {
    border-color: rgba(255,255,255,.35) !important;
  }

  .social a .icon {
    stroke: rgba(255,255,255,.8) !important;
  }
}