@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/Geist-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  --background: #f5f5f5;
  --accent: #fe4d07;
  --foreground: #000;
  --trail-size: clamp(88px, 8vw, 132px);
}

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

html,
body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--background);
}

body {
  font-family: "Geist", Arial, sans-serif;
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.page {
  position: relative;
  isolation: isolate;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

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

.domain,
.year {
  position: absolute;
  z-index: 6;
  left: 50%;
  margin: 0;
  color: var(--accent);
  font-size: 22px;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transform: translateX(-50%);
}

.domain {
  top: 16.8518519%;
}

.year {
  top: 81.6666667%;
}

.corner {
  position: absolute;
  z-index: 6;
  pointer-events: none;
}

.corner--desktop {
  display: block;
}

.corner--mobile {
  display: none;
}

.corner--top-left,
.corner--bottom-left {
  left: 10.8333333%;
}

.corner--top-right,
.corner--bottom-right {
  right: 10.8333333%;
}

.corner--top-left,
.corner--top-right {
  top: 14.6296296%;
}

.corner--bottom-left,
.corner--bottom-right {
  bottom: 14.6296296%;
}

.hero {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.hero__word {
  position: absolute;
  z-index: 3;
  font-size: clamp(64px, 5vw, 96px);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
  white-space: nowrap;
  transform: translate(-50%, -0.083em);
}

.hero__word--portfolio {
  top: 35%;
  left: 37.734375%;
}

.hero__word--coming {
  z-index: 5;
  top: 46.8518519%;
  left: 60.2083333%;
}

.hero__word--soon {
  z-index: 5;
  top: 58.7037037%;
  left: 42.0572917%;
}

.hero__motion {
  position: absolute;
  z-index: 4;
  top: calc(50% - 0.5px);
  left: calc(50% + 0.5px);
  width: 305px;
  height: 307px;
  transform: translate3d(-50%, -50%, 0);
  will-change: transform;
}

.hero__glow,
.hero__object {
  position: absolute;
  display: block;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hero__glow {
  z-index: -1;
  width: 753px;
  height: 631px;
}

.hero__glow img {
  display: block;
}

.hero__object {
  width: 305px;
  height: 307px;
  overflow: hidden;
}

.hero__object img {
  display: block;
  width: 305px;
  height: 307px;
}

.trail {
  position: fixed;
  z-index: 20;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.trail__image {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--trail-size);
  height: var(--trail-size);
  object-fit: contain;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) rotate(var(--rotation));
  animation: trail-out 480ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  will-change: opacity, transform, scale;
}

@keyframes trail-out {
  0% {
    opacity: 0.96;
    scale: 0.7;
  }
  20% {
    opacity: 1;
    scale: 1;
  }
  100% {
    opacity: 0;
    scale: 0.88;
  }
}

@media (hover: hover) and (pointer: fine) {
  html,
  body,
  .page {
    cursor: none;
  }
}

@media (max-width: 1279px) and (min-width: 901px), (max-height: 760px) and (orientation: landscape) {
  .hero__word {
    font-size: clamp(58px, 6.25vw, 80px);
  }

  .hero__motion {
    scale: 0.8;
  }

  .domain,
  .year {
    font-size: 19px;
  }

  .corner--desktop {
    scale: 0.8;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  :root {
    --trail-size: clamp(76px, 25.6vw, 108px);
  }

  .domain,
  .year {
    font-size: 18px;
  }

  .domain {
    top: calc(7.3891626% + env(safe-area-inset-top) * 0.2);
  }

  .year {
    top: auto;
    bottom: calc(7.1428571% + env(safe-area-inset-bottom) * 0.2);
  }

  .corner--desktop {
    display: none;
  }

  .corner--mobile {
    display: block;
  }

  .corner--top-left,
  .corner--bottom-left {
    left: max(8px, env(safe-area-inset-left));
  }

  .corner--top-right,
  .corner--bottom-right {
    right: max(8px, env(safe-area-inset-right));
  }

  .corner--top-left,
  .corner--top-right {
    top: calc(6.0344828% + env(safe-area-inset-top) * 0.2);
  }

  .corner--bottom-left,
  .corner--bottom-right {
    bottom: calc(5.9113301% + env(safe-area-inset-bottom) * 0.2);
  }

  .hero__word {
    font-size: clamp(52px, 13.8666667vw, 82px);
  }

  .hero__word--portfolio {
    top: 38.1773399%;
    left: 30.8%;
  }

  .hero__word--coming {
    top: 47.693532%;
    left: 71.6%;
  }

  .hero__word--soon {
    top: 57.2097291%;
    left: 30.9333333%;
  }

  .hero__motion {
    top: calc(50% - 0.5px);
    left: calc(50% + 0.128px);
    width: 184.744px;
    height: 186.213px;
  }

  .hero__glow {
    width: 456.738px;
    height: 382.738px;
  }

  .hero__object {
    width: 184.744px;
    height: 186.213px;
  }

  .hero__object img {
    width: 184.744px;
    height: 186.213px;
  }
}

@media (min-width: 540px) and (max-width: 900px) and (orientation: portrait) {
  .hero__motion {
    scale: 1.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trail__image {
    animation-duration: 220ms;
    animation-timing-function: linear;
  }

  @keyframes trail-out {
    from {
      opacity: 0.85;
      scale: 1;
    }
    to {
      opacity: 0;
      scale: 1;
    }
  }
}