@font-face {
  font-family: "Scrambles";
  src: url("../fonts/Scrambles-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/* =========================
   GLOBAL RESET
   ========================= */

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

html {
  width: 100%;
  min-height: 100%;
  background-color: #42cbd3;
}

body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;

  font-family: "Scrambles", sans-serif;
  color: white;
  text-align: center;

  background-color: #42cbd3;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================
   HOME BACKGROUND STAGE
   Background image is 1820 x 2048.
   Page height = viewport width * 2048 / 1820.
   This shows the full image without squeezing.
   ========================= */

.home-stage {
  position: relative;

  width: 100%;
  min-height: max(100vh, calc(100vw * 1.1253));

  overflow: hidden;

  background-color: #42cbd3;
  background-image: url("../assets/bg/temp-bg.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

/* =========================
   HERO / TOP LOGO
   ========================= */

.hero {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding-top: clamp(38px, 4.7vw, 92px);
}

.main-logo {
  width: min(70vw, 980px);
  height: auto;

  user-select: none;
  pointer-events: none;

  animation: fadeIn 1.1s ease-out both;
}

.scroll-indicator {
  width: clamp(92px, 10vw, 150px);
  height: auto;

  margin-top: clamp(-8px, 0.5vw, 8px);

  opacity: 0.9;
  animation: bounce 1.6s infinite;
  transition: opacity 0.35s ease;
}

.scroll-indicator.hide {
  opacity: 0;
}

/* =========================
   PAGE LINK ICONS
   ========================= */

.arch-wrap {
  position: absolute;
  z-index: 3;

  left: 50%;
  top: 47.5%;

  width: min(88vw, 1240px);

  transform: translateX(-50%);
  opacity: 0;

  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}

.arch-wrap.visible {
  opacity: 1;
}

.arch {
  position: relative;
  width: 100%;
  height: 440px;
}

.icon {
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;

  text-decoration: none;
  outline: none;

  opacity: 0;
}

.arch-wrap.visible .icon {
  animation: riseIn 0.7s forwards ease-out;
}

.icon img {
  width: clamp(175px, 19vw, 335px);
  max-width: none;
  height: auto;

  object-fit: contain;

  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

.icon:hover img,
.icon:focus-visible img {
  transform: translateY(-10px) scale(1.05);
}

/* 1920 x 1080 first-target placement */

.icon-demo {
  left: 12%;
  top: 58%;
  transform: translate(-50%, -50%);
  animation-delay: 0.05s;
}

.icon-film {
  left: 38%;
  top: 28%;
  transform: translate(-50%, -50%);
  animation-delay: 0.18s;
}

.icon-illustration {
  left: 62%;
  top: 30%;
  transform: translate(-50%, -50%);
  animation-delay: 0.32s;
}

.icon-about {
  left: 88%;
  top: 55%;
  transform: translate(-50%, -50%);
  animation-delay: 0.46s;
}

/* =========================
   HOVER LABEL
   ========================= */

.label-bar {
  min-height: 86px;

  display: flex;
  justify-content: center;
  align-items: center;

  pointer-events: none;
}

.label-bar span {
  font-family: "Scrambles", sans-serif;
  font-size: clamp(2.4rem, 5vw, 6rem);
  letter-spacing: 2px;
  color: #263166;

  opacity: 0;
  transform: translateY(6px) scale(0.98);

  transition:
    opacity 0.18s ease,
    transform 0.18s ease;

  white-space: nowrap;
}

.label-bar span.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* =========================
   FOOTER
   ========================= */

.footer {
  position: absolute;
  z-index: 3;

  left: 0;
  right: 0;
  bottom: clamp(18px, 2vw, 34px);

  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-icons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1px;
}

.footer-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.footer-icons img {
  width: clamp(46px, 4.8vw, 72px);
  height: auto;
  display: block;
  filter: none;
}

/* =========================
   ANIMATIONS
   ========================= */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(36px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }
}

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 28px));
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* =========================
   1366 / 1421 / STANDARD LAPTOP
   ========================= */

@media (min-width: 901px) and (max-width: 1550px) {
  .hero {
    padding-top: 52px;
  }

  .main-logo {
    width: min(72vw, 860px);
  }

  .scroll-indicator {
    width: 128px;
    margin-top: -2px;
  }

  .arch-wrap {
    top: 48%;
    width: min(88vw, 1080px);
  }

  .arch {
    height: 390px;
  }

  .icon img {
    width: clamp(165px, 19vw, 280px);
  }

  .footer-icons img {
    width: 58px;
  }
}

/* =========================
   TABLET
   ========================= */

@media (max-width: 900px) {
  .home-stage {
    min-height: max(100vh, calc(100vw * 2.23));
    background-size: auto 100%;
    background-position: top center;
  }

  .hero {
    padding-top: 34px;
  }

  .main-logo {
    width: 95vw;
  }

  .scroll-indicator {
    width: 100px;
    margin-top: -8px;
  }

  .arch-wrap {
    top: 52%;
    width: 92vw;
  }

  .arch {
    height: 410px;
  }

  .icon img {
    width: clamp(110px, 26vw, 190px);
  }

  .icon-demo {
    left: 16%;
    top: 56%;
  }

  .icon-film {
    left: 39%;
    top: 33%;
  }

  .icon-illustration {
    left: 63%;
    top: 34%;
  }

  .icon-about {
    left: 84%;
    top: 56%;
  }

  .label-bar span {
    font-size: 3rem;
  }

  .footer-icons img {
    width: 48px;
  }
}

/* =========================
   PHONE
   ========================= */

@media (max-width: 560px) {
  .home-stage {
    min-height: max(100vh, calc(100vw * 4.45));
    background-size: auto 100%;
    background-position: top center;
  }

  .hero {
    padding-top: 28px;
  }

  .main-logo {
    width: 118vw;
    max-width: none;
  }

  .scroll-indicator {
    width: 92px;
    margin-top: -4px;
  }

  .arch-wrap {
    top: 52%;
    width: 94vw;
  }

  .arch {
    height: 360px;
  }

  .icon img {
    width: clamp(92px, 30vw, 128px);
  }

  .icon-demo {
    left: 14%;
    top: 58%;
  }

  .icon-film {
    left: 39%;
    top: 35%;
  }

  .icon-illustration {
    left: 64%;
    top: 36%;
  }

  .icon-about {
    left: 86%;
    top: 58%;
  }

  .label-bar {
    min-height: 44px;
  }

  .label-bar span {
    font-size: 2rem;
  }

  .footer {
    bottom: 16px;
  }

  .footer-icons {
    gap: 5px;
  }

  .footer-icons img {
    width: 42px;
  }
}

/* =========================
   VERY SMALL PHONE
   ========================= */

@media (max-width: 390px) {
  .main-logo {
    width: 125vw;
  }

  .scroll-indicator {
    width: 84px;
  }

  .arch {
    height: 330px;
  }

  .icon img {
    width: 94px;
  }

  .label-bar span {
    font-size: 1.7rem;
  }
}