/* The original three worlds, presented as a fan of physical phones. */
.page-index .home-hero::before { background: linear-gradient(90deg, #160d2aff 0%, #160d2af7 28%, #160d2a70 43%, #160d2a00 60%), linear-gradient(0deg, #160d2a70, transparent 26%); }
.home-phone-composition { position: absolute; right: max(12px, calc((100vw - 1440px) / 2)); top: 0; width: 760px; height: 100%; isolation: isolate; }
.hh-aura { position: absolute; inset: -5% -7% -5% 5%; z-index: -2; background: radial-gradient(ellipse at 53% 46%, #9469e338 0%, #b04ee11d 30%, transparent 63%); }
.hh-orbit { position: absolute; left: 50%; top: 49%; border: 1px solid #c49cec17; border-radius: 50%; z-index: -1; pointer-events: none; }
.hh-orbit-one { width: 590px; height: 520px; transform: translate(-50%, -50%) rotate(-20deg); }
.hh-orbit-two { width: 675px; height: 585px; transform: translate(-50%, -50%) rotate(-20deg); border-color: #c49cec0b; }
.hh-flow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.home-phone { --phone-safe-top: 26px; position: absolute; padding: 8px; border: 1.5px solid #c8b7dc; border-radius: 37px; background: linear-gradient(122deg, #cfbfdf 0%, #6e587f 7%, #1c1428 14%, #685077 52%, #c4b4d5 88%, #7c678e 100%); box-shadow: 4px 3px 0 #705880, 7px 6px 0 #261a35, 15px 22px 45px #08021070, inset 0 0 0 2px #140b20; }
.home-phone--blue { left: 50%; top: 50%; width: 300px; z-index: 3; transform: translate(-50%, -50%) perspective(1200px) rotateY(-7deg) rotate(6deg); }
.home-phone--pink { left: 7%; top: 51%; width: 200px; z-index: 1; border-color: #b58ac3; background: linear-gradient(122deg, #cba4cf, #6a3f78 15%, #24152f 45%, #bc96cd 88%, #775282); transform: translateY(-50%) perspective(1000px) rotateY(8deg) rotate(-12deg); }
.home-phone--sunset { right: 6%; top: 51%; width: 200px; z-index: 1; border-color: #d3bb9d; background: linear-gradient(122deg, #ead1b5, #8d7053 13%, #302137 47%, #ddc5ac 88%, #9a7e6d); transform: translateY(-50%) perspective(1000px) rotateY(-8deg) rotate(14deg); }
.home-phone-screen { position: relative; overflow: hidden; border: 2px solid #09060e; border-radius: 28px; aspect-ratio: 9 / 18.4; background: #110a21; isolation: isolate; }
.home-phone-screen > img { display: block; width: 100%; height: calc(100% - var(--phone-safe-top)); margin-top: var(--phone-safe-top); object-fit: cover; object-position: center; border: 0; border-radius: 0; box-shadow: none; }
.home-phone--blue .home-phone-screen { background: #102144; }
.home-phone--pink .home-phone-screen { background: #482439; }
.home-phone--sunset .home-phone-screen { background: #67442e; }
.home-phone-screen::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(112deg, #ffffff12, #fff0 35%, #ffffff08 63%, #fff0 76%); }
.home-phone-camera { position: absolute; z-index: 3; left: 50%; top: 11px; width: 73px; height: 19px; transform: translateX(-50%); border-radius: 22px; background: #07060d; box-shadow: 0 1px 1px #ffffff18; }
.home-phone-camera::after { content: ''; position: absolute; right: 10px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #58547e, #171728 55%, #03030a); }
.home-phone-home { position: absolute; z-index: 3; bottom: 10px; left: 50%; width: 72px; height: 3px; transform: translateX(-50%); border-radius: 3px; background: #f5eaffaa; }
.home-phone-side { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(#c9b7d8, #665475, #baa4ca); }
.home-phone-volume { left: -4px; top: 20%; height: 35px; box-shadow: 0 43px 0 #8f799f; }
.home-phone-power { right: -5px; top: 29%; height: 54px; }
.home-phone--pink, .home-phone--sunset { --phone-safe-top: 21px; padding: 6px; border-radius: 28px; }
.home-phone--pink .home-phone-screen, .home-phone--sunset .home-phone-screen { border-radius: 21px; }
.home-phone--pink .home-phone-camera, .home-phone--sunset .home-phone-camera { width: 53px; height: 14px; top: 8px; }
.home-phone--pink .home-phone-camera::after, .home-phone--sunset .home-phone-camera::after { width: 5px; height: 5px; top: 4px; right: 8px; }
.home-phone--pink .home-phone-home, .home-phone--sunset .home-phone-home { width: 48px; height: 2px; bottom: 7px; }
.hh-note { position: absolute; z-index: 4; display: block; font-family: Georgia, serif; line-height: 1; pointer-events: none; animation: hh-note-float 6s ease-in-out infinite; }
.hh-note-lime { top: 13%; left: 8%; font-size: 74px; color: #ceff83; text-shadow: 0 0 27px #c6ff6440, 3px 3px 0 #668d3d55; --hh-angle: -17deg; }
.hh-note-lilac { right: 7%; top: 9%; font-size: 58px; color: #e0b6ff; text-shadow: 0 0 28px #c58bea35, 3px 3px 0 #8951ab55; --hh-angle: 14deg; animation-delay: -2s; }
.hh-note-small { right: 4%; bottom: 24%; font-size: 40px; color: #aa92f2; --hh-angle: 20deg; animation-delay: -4s; }
.hh-spark { position: absolute; z-index: 4; line-height: 1; pointer-events: none; }
.hh-spark-one { left: 27%; top: 7%; font-size: 22px; color: #d0ff8b; }
.hh-spark-two { right: 4%; top: 46%; font-size: 30px; color: #d1b2e9; }
.hh-spark-three { left: 5%; bottom: 24%; font-size: 14px; color: #caa1e6; }
.home-phone-composition .hh-gem { position: absolute; z-index: 4; left: 7%; bottom: 14%; width: 62px; height: 62px; object-fit: contain; transform: rotate(-16deg); filter: drop-shadow(0 6px 17px #a2b2ff38); animation: hh-gem-float 7s ease-in-out infinite; }
.hh-platforms { position: absolute; z-index: 2; left: 22%; bottom: 9%; width: 110px; height: 78px; transform: rotate(-16deg); }
.hh-platforms i { position: absolute; width: 75px; height: 34px; border: 1px solid #c492ec; background: #a86bd811; border-radius: 4px; transform: skewX(-24deg) rotate(-7deg); }
.hh-platforms i:nth-child(1) { left: 0; top: 36px; opacity: .3; }
.hh-platforms i:nth-child(2) { left: 13px; top: 18px; opacity: .6; }
.hh-platforms i:nth-child(3) { left: 26px; top: 0; border-color: #c6ff64; background: #c6ff641a; box-shadow: 0 0 22px #c6ff6420; }
.hh-ball { position: absolute; z-index: 4; width: 77px; height: 97px; right: 10%; bottom: 10%; animation: hh-ball-float 5.5s ease-in-out infinite; }
.home-phone-composition .hh-ball > img { display: block; width: 53px; height: 53px; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 0 15px #dacbff66); }
.hh-ball > i { position: absolute; width: 73px; height: 33px; left: 2px; bottom: 10px; border: 1px solid #d4ff91; border-radius: 4px; background: #c6ff6414; box-shadow: 0 0 23px #c6ff6424; transform: perspective(85px) rotateX(53deg) rotate(-11deg); }
@keyframes hh-note-float { 0%, 100% { transform: translateY(0) rotate(var(--hh-angle)); } 50% { transform: translateY(-12px) rotate(calc(var(--hh-angle) + 5deg)); } }
@keyframes hh-gem-float { 0%, 100% { transform: translateY(0) rotate(-16deg); } 50% { transform: translateY(-10px) rotate(-8deg); } }
@keyframes hh-ball-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

@media (min-width: 1101px) and (max-width: 1250px) {
  .home-phone-composition { width: 640px; right: 12px; }
  .home-phone--blue { width: 258px; }
  .home-phone--pink, .home-phone--sunset { width: 174px; }
  .hh-note-lime { font-size: 61px; }
  .hh-note-lilac { font-size: 50px; }
}
@media (max-width: 1100px) {
  .page-index .home-hero { display: flex; flex-direction: column; }
  .page-index .home-hero::before { display: none; }
  .page-index .home-hero__content { min-height: 0; }
  .page-index .home-hero__copy { width: min(100%, 650px); max-width: 650px; padding-block: 46px 28px; }
  .page-index .home-hero__description { max-width: 520px; }
  .page-index .home-hero h1 span { display: inline; }
  .page-index .home-hero__art { position: relative; order: 2; z-index: -1; width: 100%; height: 600px; margin-top: 0; background: radial-gradient(ellipse at 50% 40%, #3b216c88, #160d2a 68%); }
  .page-index .home-hero__art::before { display: none; }
  .home-phone-composition { position: relative; width: min(100%, 700px); height: 100%; right: auto; margin: 0 auto; }
  .home-phone--blue { width: 265px; }
  .home-phone--pink, .home-phone--sunset { width: 181px; }
  .home-phone--pink { left: 9%; }
  .home-phone--sunset { right: 9%; }
  .hh-note-lime { top: 9%; left: 8%; }
  .hh-note-lilac { top: 6%; right: 7%; }
  .hh-spark-one { top: 3%; }
  .hh-orbit-one { width: 80%; height: 80%; }
  .hh-orbit-two { width: 94%; height: 94%; }
}
@media (max-width: 700px) {
  .page-index .home-hero__art { height: clamp(420px, 125vw, 540px); }
  .home-phone-composition { max-width: 500px; }
  .home-phone--blue { --phone-safe-top: 22px; width: clamp(164px, 49vw, 230px); padding: 6px; border-radius: 28px; }
  .home-phone--pink, .home-phone--sunset { --phone-safe-top: 16px; width: clamp(105px, 32vw, 146px); padding: 4px; border-radius: 20px; }
  .home-phone--blue .home-phone-screen { border-radius: 21px; }
  .home-phone--pink .home-phone-screen, .home-phone--sunset .home-phone-screen { border-radius: 14px; border-width: 1px; }
  .home-phone--blue .home-phone-camera { width: 55px; height: 15px; top: 8px; }
  .home-phone--blue .home-phone-camera::after { width: 5px; height: 5px; top: 5px; right: 8px; }
  .home-phone--pink .home-phone-camera, .home-phone--sunset .home-phone-camera { width: 35px; height: 10px; top: 6px; }
  .home-phone--pink .home-phone-camera::after, .home-phone--sunset .home-phone-camera::after { width: 4px; height: 4px; top: 3px; right: 6px; }
  .home-phone--blue .home-phone-home { width: 50px; height: 2px; bottom: 7px; }
  .home-phone--pink .home-phone-home, .home-phone--sunset .home-phone-home { width: 31px; height: 2px; bottom: 5px; }
  .home-phone-volume { height: 24px; box-shadow: 0 30px 0 #8f799f; }
  .home-phone-power { height: 37px; }
  .hh-note-lime { font-size: 47px; left: 6%; top: 6%; }
  .hh-note-lilac { font-size: 39px; right: 6%; top: 3%; }
  .hh-note-small { font-size: 29px; right: 4%; bottom: 21%; }
  .hh-spark-one { font-size: 15px; left: 25%; top: 3%; }
  .hh-spark-two { font-size: 20px; right: 3%; }
  .hh-spark-three { font-size: 11px; }
  .home-phone-composition .hh-gem { width: 41px; height: 41px; left: 5%; bottom: 13%; }
  .hh-platforms { transform: rotate(-16deg) scale(.7); transform-origin: left bottom; left: 20%; bottom: 7%; }
  .hh-ball { width: 59px; height: 79px; right: 8%; bottom: 6%; }
  .home-phone-composition .hh-ball > img { width: 40px; height: 40px; }
  .hh-ball > i { width: 55px; height: 26px; }
}
@media (max-width: 440px) {
  .page-index .home-hero h1 span { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .hh-note, .hh-gem, .hh-ball { animation: none; }
}