.firstview {
  background: #ffdc22;
  height: 100vh;
}
.firstview h1,
.firstview h2,
.firstview p {
  color: #2b2b2b;
  font-weight: bold;
}
article {
  padding: 96px 0;
  min-height: 80vh !important;
  overflow: hidden;
}
article::before {
  content: "";
  position: absolute;
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
section {
  max-width: 960px !important;
  background: transparent !important;
}

h1,
h2 {
  width: fit-content;
  height: fit-content;
  overflow: hidden;
}
h2,
p {
  z-index: 2;
}
h2 {
  color: #2b2b2b;
  background: #ffdc22;
  width: fit-content;
  line-height: 1;
  -webkit-animation: width 0.5s ease-in, color 2s ease-in, opacity 2s ease-in 2s;
}
a {
  color: #ffdc22;
}

p {
  color: #fff;
  font-weight: bold;
  line-height: 2;
}
p > span {
  color: #ffdc22;
}

.content.title {
  width: fit-content;
  overflow: hidden;
  -webkit-transition: all 0.25s ease-in-out 1s;
  margin: 0 0 16px;
}
.content.title::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffdc22;
  z-index: -1;
  -webkit-transition: width 0.5s ease-in-out;
}
.content.title h1,
.content.title h2 {
  -webkit-transition: bottom 0.5s ease-in-out 0.25s,
    opacity 0.5s ease-in-out 0.25s;
}

.manner-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  filter: blur(2px);
  -webkit-transition: transform 40s ease-in-out 0s;
}
[data-emergence="hidden"] .manner-bg {
  transform: scale(1.48) translate(0, 0);
}
[data-emergence="visible"] .manner-bg {
  transform: scale(1.5) translate(0%, -96px);
}
.manner-button {
  background: #ffdc22 !important;
  color: #2b2b2b !important;
  border-radius: 24px;
  -webkit-transition: opacity 0.5s ease-in-out 3.5s;
}
.firstview .manner-button {
  background: #2b2b2b !important;
  color: #ffdc22 !important;
  border-radius: 24px;
}
[data-emergence="hidden"] .content.title h1,
[data-emergence="hidden"] .content.title h2 {
  bottom: -100px;
  opacity: 0;
}
[data-emergence="hidden"] .title::before {
  width: 0;
}
[data-emergence="hidden"] p,
[data-emergence="hidden"] a {
  opacity: 0;
}
.content.text *:nth-child(1) {
  -webkit-transition: opacity 1s ease-in-out 1.25s;
}
.content.text *:nth-child(2) {
  -webkit-transition: opacity 1s ease-in-out 1.5s;
}
.content.text *:nth-child(3) {
  -webkit-transition: opacity 1s ease-in-out 1.75s;
}
.content.text *:nth-child(4) {
  -webkit-transition: opacity 1s ease-in-out 2s;
}
.content.text *:nth-child(5) {
  -webkit-transition: opacity 1s ease-in-out 2.25s;
}
.content.text *:nth-child(6) {
  -webkit-transition: opacity 1s ease-in-out 2.5s;
}
.content.text *:nth-child(7) {
  -webkit-transition: opacity 1s ease-in-out 2.75s;
}
.content.text *:nth-child(8) {
  -webkit-transition: opacity 1s ease-in-out 3s;
}
.content.text *:nth-child(9) {
  -webkit-transition: opacity 1s ease-in-out 3.25s;
}
.content.text *:nth-child(10) {
  -webkit-transition: opacity 1s ease-in-out 3.5s;
}
.content.text *:nth-child(11) {
  -webkit-transition: all 1s ease-in-out 3.75s;
}
[data-emergence="hidden"] .manner-button {
  opacity: 0;
}
[data-emergence="visible"] .manner-button {
  opacity: 1;
}
[data-emergence="visible"] .title h1,
[data-emergence="visible"] .title h2 {
  bottom: 0;
  opacity: 1;
}
[data-emergence="visible"] .title::before {
  width: 100%;
}
[data-emergence="visible"] p,
[data-emergence="visible"] a {
  opacity: 1;
}