@import url("https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,500..900&display=swap");

.s-hero {
  --hero-bg: var(--dark-bg);
  --hero-text: #f5f5f5;
  --hero-muted: #999999;
  --hero-red: var(--brand-red);
  --hero-green: var(--brand-green);
  --hero-teal: var(--brand-teal);
  --hero-sky: var(--brand-sky);
  --hero-blue: var(--brand-blue);
  --hero-pink: var(--brand-pink);
  --hero-display: "Archivo", "Pretendard Variable", Pretendard, "Helvetica Neue", Arial, sans-serif;
  --hero-max: var(--wide-max);
  --hero-pad: var(--wide-pad);
  --hero-ease: cubic-bezier(0.22, 1, 0.36, 1);
  
  --blob-size: max(80vmin, min(94vw, 460px));
  --blob-ring: calc(var(--blob-size) * 0.0625); 
  --blob-spin: 5s; 

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-top: calc(var(--nav-top) + var(--nav-height));
  overflow: hidden;
  background: var(--hero-bg);
  color: var(--hero-text);
}
.s-hero ::selection {
  background: var(--hero-red);
  color: var(--hero-bg);
}
.s-hero :focus-visible {
  outline: 2px solid var(--hero-text);
  outline-offset: 4px;
}

.s-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: calc(var(--hero-max) + var(--hero-pad) * 2);
  margin-inline: auto;
  padding-inline: var(--hero-pad);
}




.s-hero__main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}


.s-hero__stage {
  display: grid;
  grid-template-areas: "stack";
  place-items: center;
  padding-block: 24px;
}
.s-hero__blobs,
.s-hero__copy {
  grid-area: stack;
}







.s-hero__blobs {
  display: grid;
  grid-template-areas: "stack";
  pointer-events: none;
}
.s-hero__blobs-spin {
  display: grid;
  grid-template-areas: "stack";
  grid-area: stack;
  animation: hero-blob-spin var(--blob-spin) linear infinite;
}
.s-hero__blob {
  grid-area: stack;
  display: block;
  width: var(--blob-size);
  aspect-ratio: 1;
  border: var(--blob-ring) solid transparent;
  border-radius: 115% 140% 145% 110% / 125% 140% 110% 125%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: calc(100% + var(--blob-ring) * 2);
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) border-box;
  mix-blend-mode: screen;
  filter: blur(calc(var(--blob-size) * 0.0125));
}
.s-hero__blob--1 {
  background-image: linear-gradient(var(--hero-blue), var(--hero-sky), var(--hero-blue));
  transform: rotate(30deg) scale(1.03);
}
.s-hero__blob--2 {
  background-image: linear-gradient(var(--hero-red), var(--hero-pink), var(--hero-red));
  transform: rotate(60deg) scale(0.95);
}
.s-hero__blob--3 {
  background-image: linear-gradient(var(--hero-green), var(--hero-teal), var(--hero-green));
  transform: rotate(90deg) scale(0.97);
}
.s-hero__blob--4 {
  background-image: linear-gradient(var(--hero-pink), var(--hero-red), var(--hero-pink));
  transform: rotate(120deg) scale(1.02);
}
@keyframes hero-blob-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .s-hero__blobs-spin {
    animation: none;
  }
}




.s-hero__copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: calc(var(--blob-size) - var(--blob-ring) * 5); 
  text-align: center;
}

.s-hero__title {
  font-family: var(--hero-display);
  font-size: calc(var(--blob-size) * 0.085);
  font-weight: 800;
  font-stretch: 78%;
  letter-spacing: -0.02em;
  line-height: 0.92;
  text-transform: uppercase;
  text-wrap: nowrap;
}
.s-hero__dot--red {
  color: var(--hero-red);
}
.s-hero__dot--green {
  color: var(--hero-green);
}
.s-hero__dot--teal {
  color: var(--hero-teal);
}
.s-hero__dot--sky {
  color: var(--hero-sky);
}
.s-hero__dot--blue {
  color: var(--hero-blue);
}
.s-hero__dot--pink {
  color: var(--hero-pink);
}


.s-hero__mask {
  display: block;
  overflow: hidden;
  padding-block: 0.05em;
  margin-block: -0.05em;
}
.s-hero__line {
  display: block;
}
.js .s-hero__line {
  transform: translate3d(0, 110%, 0);
}
.js .s-hero.is-entered .s-hero__line {
  transform: none;
  transition: transform 1.2s var(--hero-ease);
  transition-delay: calc(var(--i) * 110ms + 100ms);
}
.js .s-hero__intro {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}
.js .s-hero.is-entered .s-hero__intro {
  opacity: 1;
  transform: none;
  transition: opacity 1s ease, transform 1.2s var(--hero-ease);
  transition-delay: calc(var(--i) * 120ms + 380ms);
}

.s-hero__desc {
  max-width: 27rem;
  margin-top: calc(var(--blob-size) * 0.04);
  color: var(--hero-muted);
  font-size: clamp(0.875rem, calc(var(--blob-size) * 0.025), 1.1875rem);
  line-height: 1.7;
}




@media (min-width: 900px) {
  .s-hero__desc span {
    display: block; 
  }
}