@font-face {
  font-family: 'Aktura';
  src: url('../Fonts/Aktura-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Kihim';
  src: url('../Fonts/Kihim-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

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

html, body {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
  transition: opacity 0.48s ease;
}

body.fade-out {
  opacity: 0;
}

.home-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(100%);
  opacity: 0;
  transition: opacity 0.7s ease;
  pointer-events: none;
  user-select: none;
}

.site-title {
  position: relative;
  z-index: 2;
  font-family: 'Aktura', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: clamp(5rem, 16vw, 14rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #000;
  cursor: pointer;
  user-select: none;
  display: flex;
}

.site-title span {
  display: inline-block;
  opacity: 0;
  color: #0000FF;
  transition: color 0.15s ease;
}

.site-title:active span {
  color: #4D4DFF;
}