@font-face {
  font-family: "Velvelyne Book";
  src: url("./assets/fonts/Velvelyne-Book.woff") format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Velvelyne Regular";
  src: url("./assets/fonts/Velvelyne-Regular.woff") format("woff");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  --manifesto-bg: #3a2324;
  --manifesto-orange: #f03501;
  --manifesto-pink: #edbbc9;
  --frame-size: 16px;
}

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

html,
body {
  min-height: 100%;
  background: var(--manifesto-bg);
}

body {
  color: #ffe0d6;
  font-family: "Rubik", Arial, Helvetica, sans-serif;
}

.site-frame {
  position: fixed;
  inset: 0;
  z-index: 3000;
  border: var(--frame-size) solid var(--manifesto-orange);
  pointer-events: none;
}

.manifesto-v2-page {
  padding: var(--frame-size);
}

.manifesto-v2-canvas {
  position: relative;
  width: min(100%, 1440px);
  margin: 0 auto;
  aspect-ratio: 1440 / 4319;
  background: var(--manifesto-bg);
  overflow: hidden;
}

.manifesto-v2-outline,
.manifesto-v2-hand,
.manifesto-v2-decor {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}

.manifesto-v2-outline {
  left: 6.181%;
  top: 3.357%;
  width: 87.639%;
  opacity: 0;
  z-index: 0;
}

.manifesto-v2-hand--hero-left {
  left: -19.722%;
  top: 7.363%;
  width: 39.375%;
  opacity: 0;
  transform: translateX(-18%) translateY(4%) rotate(-8deg);
  z-index: 3;
}

.manifesto-v2-hand--hero-top {
  left: 57.431%;
  top: -4.168%;
  width: 32.5%;
  opacity: 0;
  transform: translateY(-18%) rotate(-6deg);
  z-index: 3;
}

.manifesto-v2-hand--hero-right {
  left: 76.597%;
  top: 11.53%;
  width: 29.444%;
  opacity: 0;
  transform: translateX(18%) translateY(4%) rotate(8deg);
  z-index: 3;
}

.manifesto-v2-title {
  position: absolute;
  top: 6.067%;
  left: 50%;
  width: 91.389%;
  transform: translateX(-50%);
  font-family: "Velvelyne Book", Arial, Helvetica, sans-serif;
  font-size: clamp(46px, 10.55vw, 151.887px);
  line-height: 0.81;
  letter-spacing: -0.07em;
  text-transform: uppercase;
  text-align: center;
  z-index: 1;
}

.manifesto-v2-title__line {
  display: block;
}

.manifesto-v2-title__soft {
  color: var(--manifesto-pink);
}

.manifesto-v2-title__accent {
  color: var(--manifesto-orange);
}

.manifesto-v2-copy {
  position: absolute;
  inset: 19.055% 0 auto 0;
  height: 64.807%;
}

.manifesto-v2-copy__inner {
  position: absolute;
  left: 13.681%;
  width: 72.639%;
  font-family: "Velvelyne Book", Arial, Helvetica, sans-serif;
  font-size: clamp(20px, calc(4.93vw - 4px), 66.947px);
  line-height: 0.96;
  letter-spacing: -0.07em;
  text-align: center;
  color: #ffe0d6;
}

.manifesto-v2-copy__inner p + p {
  margin-top: 6.15%;
}

.manifesto-v2-copy__inner p {
  opacity: 0;
}

.manifesto-v2-copy__inner .char {
  display: inline;
  opacity: 0.14;
}

.line-wrap {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.line-inner {
  display: block;
  transform: translateY(108%);
  transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
}

.line-inner.is-revealed {
  transform: translateY(0);
}

.manifesto-v2-decor--line-top-left {
  left: 4.861%;
  top: 2.715%;
  width: 33.958%;
}

.manifesto-v2-decor--network {
  left: -20.7%;
  top: 4.56%;
  width: 40.694%;
}

.manifesto-v2-decor--spiral {
  left: 81.9%;
  top: 17.92%;
  width: 20%;
}

.manifesto-v2-decor--earth {
  left: -9.35%;
  top: 25.27%;
  width: 24.097%;
}

.manifesto-v2-decor--line-globe {
  left: 14.36%;
  top: 30.34%;
  width: 64.861%;
}

.manifesto-v2-decor--curve-right {
  left: 84.792%;
  top: 42.999%;
  width: 11.319%;
}

.manifesto-v2-decor--book {
  left: -6.8%;
  top: 44.79%;
  width: 23.264%;
}

.manifesto-v2-decor--line-book {
  left: 10.139%;
  top: calc(47.771% - 5px);
  width: 38.958%;
}

.manifesto-v2-decor--like {
  left: 82.3%;
  top: 56.85%;
  width: 25.625%;
}

.manifesto-v2-decor--left-bottom {
  left: -7.15%;
  top: 70.1%;
  width: 30.417%;
}

.manifesto-v2-button {
  position: absolute;
  left: 50%;
  top: 83.862%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28.5%;
  min-width: 280px;
  padding: 1.15% 1.35%;
  border-radius: 5px;
  background: var(--manifesto-pink);
  color: var(--manifesto-bg);
  font-family: "Velvelyne Regular", Arial, Helvetica, sans-serif;
  font-size: clamp(21px, 2.62vw, 37px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  z-index: 2;
  transition:
    transform 0.22s ease,
    background-color 0.22s ease,
    color 0.22s ease;
}

.manifesto-v2-button:hover {
  background: var(--manifesto-orange);
  color: #ffe0d6;
  transform: translateX(-50%) scale(1.045);
}

.manifesto-v2-hand--bottom-left {
  left: -10.486%;
  top: 80.157%;
  width: 49.861%;
  z-index: 3;
}

.manifesto-v2-hand--bottom-right-arm {
  left: 57.847%;
  top: 73.489%;
  width: 56.944%;
}

.manifesto-v2-quote {
  position: absolute;
  top: 87.659%;
  left: 50%;
  transform: translateX(-50%);
  width: 94.375%;
  font-family: "Velvelyne Book", Arial, Helvetica, sans-serif;
  font-size: clamp(46px, 10.55vw, 151.887px);
  line-height: 0.81;
  letter-spacing: -0.07em;
  text-transform: uppercase;
  text-align: center;
  color: var(--manifesto-orange);
}

.manifesto-v2-quote__line {
  display: block;
  overflow: hidden;
}

.quote-line-inner {
  display: block;
  transform: translateY(112%);
  transition: transform 0.78s cubic-bezier(0.22, 1, 0.36, 1);
}

.manifesto-v2-quote.is-revealed .manifesto-v2-quote__line:nth-child(1) .quote-line-inner {
  transition-delay: 0s;
  transform: translateY(0);
}

.manifesto-v2-quote.is-revealed .manifesto-v2-quote__line:nth-child(2) .quote-line-inner {
  transition-delay: 0.08s;
  transform: translateY(0);
}

.manifesto-v2-quote.is-revealed .manifesto-v2-quote__line:nth-child(3) .quote-line-inner {
  transition-delay: 0.16s;
  transform: translateY(0);
}

.manifesto-v2-quote__soft {
  color: var(--manifesto-pink);
}

.manifesto-v2-author {
  position: absolute;
  top: 97.824%;
  left: 50%;
  transform: translateX(-50%);
  width: 36.458%;
  color: var(--manifesto-orange);
  font-size: clamp(12px, 1.67vw, 24px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-align: center;
}

.manifesto-v2-hand--quote-right {
  left: 65.208%;
  top: 91.549%;
  width: 49.444%;
  opacity: 0;
  transform: translateX(18%) translateY(6%) rotate(6deg);
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease;
}

.manifesto-v2-hand--bottom-left {
  opacity: 0;
  transform: translateX(-18%) translateY(4%) rotate(-5deg);
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease;
}

.quote-hands-revealed .manifesto-v2-hand--bottom-left,
.quote-hands-revealed .manifesto-v2-hand--quote-right {
  opacity: 1;
  transform: translateX(0) translateY(0) rotate(0deg);
}

.quote-hands-revealed .manifesto-v2-hand--quote-right {
  transition-delay: 0.14s;
}

.svg-draw {
  opacity: 0;
  transition:
    clip-path 1.25s cubic-bezier(0.22, 1, 0.36, 1) var(--draw-delay, 0s),
    opacity 0.35s ease var(--draw-delay, 0s);
}

.svg-draw--horizontal {
  clip-path: inset(0 100% 0 0);
}

.svg-draw--vertical {
  clip-path: inset(0 0 100% 0);
}

.svg-draw.is-drawn {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

body.is-ready .manifesto-v2-hand--hero-left,
body.is-ready .manifesto-v2-hand--hero-top,
body.is-ready .manifesto-v2-hand--hero-right {
  opacity: 1;
  transform: translateX(0) translateY(0) rotate(0deg);
  transition:
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.5s ease;
}

body.is-ready .manifesto-v2-hand--hero-top {
  transition-delay: 0.08s;
}

body.is-ready .manifesto-v2-hand--hero-right {
  transition-delay: 0.16s;
}

@media (max-width: 900px) {
  :root {
    --frame-size: 8px;
  }

  .manifesto-v2-page {
    padding: var(--frame-size);
  }

  .manifesto-v2-canvas {
    aspect-ratio: auto;
    width: 100%;
    padding-top: 88px;
    padding-bottom: 104px;
    min-height: auto;
  }

  .manifesto-v2-title,
  .manifesto-v2-copy,
  .manifesto-v2-button,
  .manifesto-v2-quote,
  .manifesto-v2-author {
    position: static;
    transform: none;
    width: auto;
  }

  .manifesto-v2-title {
    position: absolute;
    z-index: 1;
    top: calc(16.9rem - 120px);
    left: 50%;
    width: 74%;
    max-width: 74%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
    font-size: clamp(34px, 10.2vw, 62px);
    line-height: 0.86;
    text-align: center;
  }

  .manifesto-v2-outline {
    display: block;
    position: absolute;
    top: calc(10.7rem - 35px);
    left: 7.5%;
    width: 85%;
    opacity: 1;
  }

  .manifesto-v2-hand--hero-left,
  .manifesto-v2-hand--hero-top,
  .manifesto-v2-hand--hero-right {
    position: absolute;
  }

  .manifesto-v2-hand--hero-left {
    top: 9.2rem;
    left: -12%;
    width: 30%;
  }

  .manifesto-v2-hand--hero-top {
    top: calc(-1.9rem - 35px);
    right: 12%;
    left: auto;
    width: 29%;
  }

  .manifesto-v2-hand--hero-right {
    top: 18.8rem;
    right: -12%;
    left: auto;
    width: 28%;
  }

  .manifesto-v2-copy {
    position: relative;
    margin-top: calc(29rem - 200px);
    padding: 0 1rem;
    height: auto;
  }

  .manifesto-v2-copy__inner {
    position: relative;
    z-index: 1;
    left: auto;
    width: min(100%, 86%);
    margin: 0 auto;
    font-size: clamp(28px, 8vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.025em;
  }

  .manifesto-v2-copy__inner p {
    position: relative;
    z-index: 1;
  }

  .manifesto-v2-copy__inner p + p {
    margin-top: 3.25rem;
  }

  .manifesto-v2-decor--line-top-left,
  .manifesto-v2-decor--line-globe,
  .manifesto-v2-decor--line-book,
  .manifesto-v2-decor--curve-right {
    display: none;
  }

  .manifesto-v2-decor--spiral,
  .manifesto-v2-decor--left-bottom {
    position: absolute;
    opacity: 0.95;
  }

  .manifesto-v2-decor--network {
    position: absolute;
    top: 12.4rem;
    left: -8%;
    width: 21%;
    opacity: 0.95;
  }

  .manifesto-v2-decor--earth {
    position: absolute;
    top: 43.5rem;
    left: -6%;
    width: 21%;
    opacity: 0.95;
  }

  .manifesto-v2-decor--spiral {
    top: 61rem;
    right: -12%;
    left: auto;
    width: 23%;
  }

  .manifesto-v2-decor--book {
    position: absolute;
    top: 88.5rem;
    left: -4%;
    width: 18%;
    opacity: 0.95;
  }

  .manifesto-v2-decor--like {
    position: absolute;
    top: 108rem;
    right: -9%;
    left: auto;
    width: 20%;
    opacity: 0.95;
  }

  .manifesto-v2-decor--left-bottom {
    top: 126rem;
    left: -3%;
    width: 21%;
  }

  .manifesto-v2-button {
    position: relative;
    z-index: 3;
    display: flex;
    margin: 7.5rem auto 0;
    min-width: 0;
    width: fit-content;
    padding: 1rem 1.3rem;
    font-size: 1.45rem;
    left: auto;
    top: auto;
    transform: none;
    margin-left: auto;
    margin-right: auto;
  }

  .manifesto-v2-button:hover {
    transform: scale(1.045);
  }

  .manifesto-v2-hand--bottom-left,
  .manifesto-v2-hand--bottom-right-arm,
  .manifesto-v2-hand--quote-right {
    position: absolute;
  }

  .manifesto-v2-hand--bottom-left {
    left: -13%;
    top: calc(100% - 32rem);
    width: 46%;
  }

  .manifesto-v2-hand--bottom-right-arm {
    right: -20%;
    left: auto;
    top: calc(100% - 38.5rem);
    width: 48%;
  }

  .manifesto-v2-quote {
    margin-top: 10rem;
    padding: 0 1rem;
    font-size: clamp(36px, 10.8vw, 68px);
  }

  .manifesto-v2-author {
    margin-top: 1.25rem;
    width: auto;
    font-size: 1rem;
  }

  .manifesto-v2-hand--quote-right {
    display: none;
  }
}

@media (max-width: 560px) {
  .manifesto-v2-title {
    top: calc(17.5rem - 120px);
    left: 50%;
    width: 76%;
    max-width: 76%;
    padding: 0;
    transform: translateX(-50%);
    font-size: clamp(28px, 9.2vw, 42px);
    line-height: 0.9;
  }

  .manifesto-v2-outline {
    top: calc(10.35rem - 35px);
    left: 5.5%;
    width: 89%;
  }

  .manifesto-v2-hand--hero-left {
    top: 9.9rem;
    left: -14%;
    width: 31%;
  }

  .manifesto-v2-hand--hero-top {
    top: calc(-2.6rem - 35px);
    right: 13%;
    width: 28%;
  }

  .manifesto-v2-hand--hero-right {
    top: 18.6rem;
    right: -14%;
    width: 30%;
  }

  .manifesto-v2-copy {
    margin-top: calc(28rem - 200px);
    padding: 0 0.8rem;
  }

  .manifesto-v2-copy__inner {
    width: min(100%, 88%);
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.025em;
  }

  .manifesto-v2-copy__inner p + p {
    margin-top: 3rem;
  }

  .manifesto-v2-decor--network {
    top: 14.2rem;
    left: -10%;
    width: 26%;
  }

  .manifesto-v2-decor--earth {
    top: 43rem;
    left: -8%;
    width: 24%;
  }

  .manifesto-v2-decor--spiral {
    top: 60rem;
    right: -15%;
    width: 26%;
  }

  .manifesto-v2-decor--book {
    top: 90rem;
    left: -3%;
    width: 18%;
  }

  .manifesto-v2-decor--like {
    top: 110rem;
    right: -11%;
    width: 22%;
  }

  .manifesto-v2-decor--left-bottom {
    top: 128rem;
    left: -5%;
    width: 24%;
  }

  .manifesto-v2-button {
    display: flex;
    margin: 7rem auto 0;
    width: fit-content;
    min-width: 0;
    padding: 1rem 1.05rem;
    font-size: 1.12rem;
    margin-left: auto;
    margin-right: auto;
  }

  .manifesto-v2-quote {
    margin-top: 9.5rem;
    font-size: clamp(28px, 10.4vw, 48px);
  }

  .manifesto-v2-hand--bottom-left {
    left: -16%;
    top: calc(100% - 29rem);
    width: 50%;
  }

  .manifesto-v2-hand--bottom-right-arm {
    right: -24%;
    top: calc(100% - 35.5rem);
    width: 56%;
  }

  .manifesto-v2-hand--quote-right {
    display: none;
  }
}