/* =========================================================
   GYEOP · HOME
========================================================= */


/* =========================================================
   HERO
========================================================= */

.hero {
  position: relative;

  min-height: 100svh;

  display: grid;

  grid-template-rows:
    auto
    1fr
    auto;

  padding:
    34px
    clamp(26px, 5vw, 80px)
    32px;

  overflow: hidden;
}


.home-nav {
  position: relative;
  z-index: 20;
}


.hero__content {
  display: grid;

  grid-template-columns:
    minmax(380px, 0.85fr)
    minmax(520px, 1.15fr);

  align-items: center;

  gap: clamp(20px, 3vw, 60px);
}


.hero__copy {
  position: relative;
  z-index: 10;

  padding-left:
    clamp(0px, 4vw, 60px);
}


.hero__copy h1 {
  margin: 0;

  font-size:
    clamp(54px, 6vw, 94px);

  font-weight: 300;

  line-height: 1.13;

  letter-spacing: -0.065em;

  word-break: keep-all;

  opacity: 0;

  animation:
    home-fade-up
    1s
    0.14s
    ease
    forwards;
}


.hero__copy p {
  margin:
    clamp(34px, 5vh, 54px)
    0
    0;

  color: var(--muted);

  font-size:
    clamp(16px, 1.35vw, 20px);

  font-weight: 300;

  line-height: 1.85;

  letter-spacing: -0.025em;

  opacity: 0;

  animation:
    home-fade-up
    0.9s
    0.3s
    ease
    forwards;
}


/* =========================================================
   CTA
========================================================= */

.hero-cta {
  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 48px;

  margin-top:
    clamp(40px, 6vh, 64px);

  padding-bottom: 12px;

  font-size: 15px;
  font-weight: 500;

  opacity: 0;

  animation:
    home-fade-up
    0.9s
    0.45s
    ease
    forwards;
}


.hero-cta::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 1px;

  background: var(--ink);

  transform-origin: left;

  transition: transform 0.3s ease;
}


.hero-cta:hover::before {
  transform: scaleX(0.75);
}


.hero-cta__arrow {
  font-size: 21px;

  transition: transform 0.3s ease;
}


.hero-cta:hover .hero-cta__arrow {
  transform: translate(4px, -4px);
}


.learn-more {
  display: flex;

  align-items: center;

  gap: 9px;

  width: max-content;

  margin-top: 25px;

  color: var(--muted);

  font-size: 11px;

  opacity: 0;

  animation:
    home-fade-up
    0.9s
    0.62s
    ease
    forwards;
}


/* =========================================================
   VISUAL
========================================================= */

.hero-visual {
  position: relative;

  width: 100%;

  height: min(72vh, 670px);
  min-height: 520px;

  transition: transform 0.35s ease-out;
}


.hero-paths {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;
}


.trajectory {
  fill: none;

  stroke-width: 2.1;

  stroke-linecap: round;

  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}


.trajectory--a {
  stroke: var(--sage);

  animation:
    home-draw-path
    1.7s
    0.55s
    cubic-bezier(.65, 0, .35, 1)
    forwards;
}


.trajectory--b {
  stroke: var(--ink);

  opacity: 0.74;

  animation:
    home-draw-path
    1.7s
    0.82s
    cubic-bezier(.65, 0, .35, 1)
    forwards;
}


.connection {
  fill: var(--coral);

  transform-origin: 460px 300px;

  opacity: 0;

  animation:
    home-connection
    0.55s
    2.15s
    ease
    forwards;
}


.connection-halo {
  fill: var(--coral-soft);

  transform-origin: 460px 300px;

  opacity: 0;

  animation:
    home-halo
    0.7s
    2.15s
    ease
    forwards;
}


/* =========================================================
   CITY LABELS
========================================================= */

.path-note {
  position: absolute;

  display: flex;

  align-items: center;

  gap: 8px;

  color: var(--muted);

  font-family:
    "DM Sans",
    sans-serif;

  font-size: 11px;

  letter-spacing: 0.05em;

  white-space: nowrap;

  opacity: 0;

  animation:
    home-fade-up
    0.7s
    2.1s
    ease
    forwards;
}


.path-note--seoul {
  left: 5%;
  top: 16%;
}


.path-note--melbourne {
  right: 4%;
  top: 22%;
}


.path-note--busan {
  left: 4%;
  bottom: 22%;
}


.path-note--sydney {
  right: 4%;
  bottom: 20%;
}


.mini-dot {
  width: 5px;
  height: 5px;

  flex: 0 0 5px;

  border-radius: 50%;
}


.mini-dot--green {
  background: var(--sage);
}


.mini-dot--dark {
  background: var(--ink);

  opacity: 0.48;
}


/* =========================================================
   CONNECTION LABEL
========================================================= */

.connection-copy {
  position: absolute;

  left: 67%;
  top: 48%;

  padding-left: 30px;

  opacity: 0;

  transform: translateY(12px);

  animation:
    home-fade-up
    0.8s
    2.35s
    ease
    forwards;
}


.connection-copy::before {
  content: "";

  position: absolute;

  left: 0;
  top: 3px;

  width: 1px;
  height: 42px;

  background: rgba(24, 37, 31, 0.25);
}


.connection-city {
  display: block;

  margin-bottom: 8px;

  color: var(--coral);

  font-family:
    "DM Sans",
    sans-serif;

  font-size: 10px;
  font-weight: 600;

  letter-spacing: 0.10em;

  white-space: nowrap;
}


.connection-copy strong {
  font-size: 14px;
  font-weight: 400;

  white-space: nowrap;
}


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

.hero__footer {
  display: flex;

  justify-content: space-between;

  align-items: flex-end;

  gap: 30px;

  color: var(--muted);

  opacity: 0;

  animation:
    home-fade
    0.9s
    0.8s
    ease
    forwards;
}


.categories {
  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

  font-size: 11px;
}


.categories i {
  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: var(--coral);

  opacity: 0.55;
}


.domain {
  font-family:
    "DM Sans",
    sans-serif;

  font-size: 10px;

  letter-spacing: 0.08em;
}


/* =========================================================
   STORY
========================================================= */

.story {
  min-height: 100svh;

  display: flex;

  align-items: center;

  padding:
    clamp(90px, 12vh, 150px)
    var(--page-padding);

  background: var(--ink);

  color: var(--paper);
}


.story__inner {
  width: 100%;
  max-width: 1180px;

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(520px, 1.25fr)
    minmax(300px, 0.75fr);

  grid-template-areas:
    "label label"
    "headline copy";

  column-gap:
    clamp(70px, 8vw, 130px);

  align-items: center;
}


.story .section-label {
  grid-area: label;

  margin-bottom:
    clamp(48px, 8vh, 85px);
}


.story__headline {
  grid-area: headline;
}


.story__headline h2 {
  margin: 0;

  font-size:
    clamp(48px, 5vw, 76px);

  font-weight: 300;

  line-height: 1.2;

  letter-spacing: -0.055em;
}


.story__headline h2 span {
  display: block;
}


.story__copy {
  grid-area: copy;
}


.story__copy p {
  margin: 0;

  color: rgba(243, 239, 230, 0.55);

  font-size: 15px;

  font-weight: 300;

  line-height: 2;
}


.story__copy strong {
  display: block;

  margin-top: 38px;

  font-size:
    clamp(18px, 1.35vw, 21px);

  font-weight: 300;

  line-height: 1.8;
}


.story__secondary {
  margin-top: 28px !important;
}


.story__cta {
  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 45px;

  margin-top: 50px;

  padding-bottom: 10px;

  font-size: 13px;
}


.story__cta::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  height: 1px;

  background: rgba(243, 239, 230, 0.55);
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes home-fade {

  to {
    opacity: 1;
  }

}


@keyframes home-fade-up {

  from {
    opacity: 0;
    transform: translateY(14px);
  }

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

}


@keyframes home-draw-path {

  to {
    stroke-dashoffset: 0;
  }

}


@keyframes home-connection {

  from {
    opacity: 0;
    transform: scale(0.2);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }

}


@keyframes home-halo {

  from {
    opacity: 0;
    transform: scale(0.3);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }

}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .hero {
    padding:
      25px
      23px
      24px;
  }


  .hero__content {
    grid-template-columns: 1fr;
  }


  .hero__copy {
    padding-top: 55px;
    padding-left: 0;
  }


  .hero__copy h1 {
    font-size:
      clamp(43px, 12vw, 66px);
  }


  .hero-visual {
    position: absolute;

    width: 67vw;
    height: 45vh;

    min-height: 330px;

    right: -16vw;
    bottom: 8vh;

    opacity: 0.72;

    pointer-events: none;
  }


  .path-note,
  .connection-copy {
    display: none;
  }


  .domain {
    display: none;
  }


  .story {
    min-height: auto;

    padding:
      100px
      24px;
  }


  .story__inner {
    display: block;
  }


  .story__headline {
    margin-bottom: 55px;
  }

}