@font-face {
  font-family:Barlow;
  src:url('/fonts/barlow-condensed-black.ttf') format('truetype');
  font-style:normal;
  font-weight:900;
  font-display:swap;
}

@font-face {
  font-family:Space;
  src:url('/fonts/space-grotesk-regular.ttf') format('truetype');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

:root {
  --acid:#0b0b1c;
  --ink:#f5f1ff;
  --violet:#712bff;
  --line:rgba(191,177,255,.21);
  --mx:0;
  --my:0;
  color:var(--ink);
  background:var(--acid);
  font-family:Space,Arial,sans-serif;
  font-synthesis:none;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
}

a {
  color:inherit;
  text-decoration:none;
}

button {
  font:inherit;
  color:inherit;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button[hidden] {
  display:none;
}

::selection {
  background:var(--ink);
  color:var(--acid);
}

a:focus-visible,button:focus-visible {
  outline:2px solid var(--ink);
  outline-offset:6px;
}

.skip-link {
  position:fixed;
  top:12px;
  left:12px;
  padding:14px;
  background:var(--ink);
  color:var(--acid);
  transform:translateY(-160%);
  z-index:20;
}

.skip-link:focus {
  transform:none;
}

.poster {
  position:relative;
  isolation:isolate;
  min-height:760px;
  min-height:max(760px,100svh);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--acid);
}

.grain {
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.055;
  z-index:9;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}

.masthead {
  position:relative;
  z-index:5;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:25px 40px 16px;
}

.studio {
  display:flex;
  align-items:center;
  gap:9px;
  font:900 20px/.85 Barlow,sans-serif;
  letter-spacing:-.5px;
}

.studio img {
  width:31px;
  height:31px;
  object-fit:contain;
  mix-blend-mode:multiply;
}

.studio-small {
  display:block;
  font:400 9px/1 Space,sans-serif;
  letter-spacing:3px;
  margin-top:5px;
}

.header-tools {
  display:flex;
  align-items:center;
  gap:26px;
}

.languages {
  display:flex;
  gap:10px;
  font-size:11px;
  align-items:center;
}

.languages a {
  padding:10px 0;
  opacity:.5;
}

.languages a[aria-current] {
  opacity:1;
  text-decoration:underline;
  text-underline-offset:5px;
}

.languages a:hover {
  opacity:1;
}

.languages>span {
  opacity:.3;
}

.motion-toggle {
  border:1px solid var(--line);
  background:transparent;
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .2s;
}

.motion-toggle:hover {
  background:rgba(196,177,255,.1);
}

.motion-toggle svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
}

.motion-toggle .play-icon {
  display:none;
}

.motion-toggle[aria-pressed=true] .play-icon {
  display:block;
}

.motion-toggle[aria-pressed=true] .pause-icon {
  display:none;
}

.hero {
  position:relative;
  flex:1;
  min-height:620px;
  display:flex;
  align-items:center;
  flex-direction:column;
}

.title-wrap {
  width:100%;
  text-align:center;
  z-index:1;
  margin-top:10px;
  pointer-events:none;
}

.eyebrow {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  font-size:9px;
  letter-spacing:2.8px;
  margin:0 0 8px;
}

.eyebrow span {
  font-size:17px;
  line-height:1;
}

h1 {
  display:flex;
  justify-content:center;
  gap:0;
  margin:0;
  font:900 clamp(120px,23.2vw,340px)/.8 Barlow,Impact,sans-serif;
  letter-spacing:-.025em;
}

h1 span {
  display:block;
  animation:letter-in .95s cubic-bezier(.18,.75,.25,1) both;
}

h1 span:nth-child(2) {
  animation-delay:.06s;
}

h1 span:nth-child(3) {
  animation-delay:.12s;
}

h1 span:nth-child(4) {
  animation-delay:.18s;
}

h1 span:nth-child(5) {
  animation-delay:.24s;
}

h1 span:nth-child(6) {
  animation-delay:.3s;
}

.universe {
  position:absolute;
  inset:0;
  pointer-events:none;
  --cy:52%;
}

.portal {
  position:absolute;
  left:50%;
  top:var(--cy);
  width:clamp(240px,25vw,350px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--violet);
  transform:translate(-50%,-50%);
  box-shadow:inset 0 0 70px rgba(245,214,255,.18);
}

.portal-rings {
  position:absolute;
  inset:16px;
  border:1px solid rgba(196,177,255,.19);
  border-radius:50%;
  animation:breathe 6s ease-in-out infinite;
}

.portal-rings:before,.portal-rings:after {
  content:"";
  position:absolute;
  inset:16px;
  border:1px solid rgba(196,177,255,.15);
  border-radius:50%;
}

.portal-rings:after {
  inset:38px;
}

.orbit {
  position:absolute;
  left:50%;
  top:var(--cy);
  width:min(68vw,900px);
  height:210px;
  border:1px solid rgba(196,177,255,.38);
  border-radius:50%;
  transform:translate(-50%,-50%) rotate(-13deg);
}

.orbit-two {
  width:min(48vw,620px);
  height:310px;
  transform:translate(-50%,-50%) rotate(32deg);
  opacity:.4;
}

.orbit i {
  position:absolute;
  left:12%;
  top:13%;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--ink);
  box-shadow:0 0 0 6px var(--acid);
  animation:orbital-dot 6s ease-in-out infinite alternate;
}

.orbit-two i {
  left:auto;
  right:6%;
  top:20%;
  width:5px;
  height:5px;
  animation-delay:-3s;
}

.lane {
  position:absolute;
  top:26%;
  bottom:19%;
  width:1px;
  background:linear-gradient(transparent,var(--line),transparent);
  overflow:hidden;
}

.lane:after {
  content:"";
  position:absolute;
  top:-30%;
  width:1px;
  height:19%;
  background:var(--ink);
  animation:lane-flow 5s linear infinite;
  opacity:.35;
}

.lane-one {
  left:30%;
}

.lane-two {
  left:50%;
  opacity:.4;
}

.lane-three {
  left:70%;
}

.lane-two:after {
  animation-delay:-2s;
}

.lane-three:after {
  animation-delay:-3.5s;
}

.ship-position {
  position:absolute;
  left:50%;
  top:var(--cy);
  width:clamp(230px,24vw,340px);
  transform:translate(calc(-50% + var(--mx)*18px),calc(-50% + var(--my)*12px));
  transition:transform .8s cubic-bezier(.2,.65,.3,1);
  z-index:2;
}

.ship-float {
  position:relative;
  animation:ship-float 6s ease-in-out infinite;
}

.ship {
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(9px 15px 0 rgba(22,75,255,.5));
  transform:rotate(-12deg);
}

.thruster {
  position:absolute;
  left:43%;
  bottom:19%;
  width:8%;
  height:15%;
  z-index:-1;
  background:linear-gradient(var(--ink),transparent);
  filter:blur(5px);
  transform:rotate(-12deg);
  opacity:.25;
  animation:thrust 2s ease-in-out infinite alternate;
}

.star {
  position:absolute;
  line-height:1;
  animation:star-turn 24s linear infinite;
}

.star-one {
  left:21%;
  top:43%;
  font-size:52px;
}

.star-two {
  right:21%;
  top:63%;
  font-size:29px;
  animation-direction:reverse;
}

.star-three {
  right:29%;
  top:34%;
  font:400 27px Space,sans-serif;
  animation:none;
}

.flight-note,.orbit-note {
  position:absolute;
  font-size:10px;
  letter-spacing:2px;
}

.flight-note {
  left:15%;
  top:65%;
  display:flex;
  align-items:center;
  gap:15px;
}

.tiny-cross {
  font-size:20px;
}

.orbit-note {
  right:12%;
  top:41%;
  line-height:1.55;
  transform:rotate(90deg);
  transform-origin:center;
  opacity:.65;
}

.download {
  position:relative;
  z-index:3;
  text-align:center;
  margin-top:auto;
  padding:0 20px 24px;
  animation:rise-in 1s .45s both;
}

.tagline {
  margin:0 0 18px;
  font-size:17px;
  letter-spacing:-.5px;
}

.get-button {
  display:inline-flex;
  gap:25px;
  min-width:280px;
  align-items:center;
  justify-content:space-between;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--acid);
  padding:12px 12px 12px 14px;
  border-radius:100px;
  font-size:16px;
  transition:transform .3s,box-shadow .3s,background .3s;
  box-shadow:0 0 0 0 var(--ink);
}

.button-arrow {
  display:grid;
  place-items:center;
  position:relative;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--acid);
  color:var(--ink);
  overflow:hidden;
  transition:transform .3s;
}

.button-arrow svg {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
}

.get-button:hover {
  transform:translateY(-4px);
  box-shadow:0 7px 0 rgba(29,100,255,.35);
}

.get-button:hover .button-arrow {
  transform:rotate(-35deg);
}

.get-button:active {
  transform:translateY(0);
  box-shadow:none;
}

.store-note {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  font-size:10px;
  opacity:.65;
  margin:12px 0 0;
}

.store-note svg {
  width:10px;
  height:12px;
  fill:none;
  stroke:currentColor;
  stroke-width:1;
}

.footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  position:relative;
  z-index:5;
  margin:0 40px;
  padding:18px 0 22px;
  border-top:1px solid var(--line);
  font-size:10px;
}


.footer-center {
  font-size:8px;
  letter-spacing:1.6px;
  opacity:.55;
}

.footer-links {
  display:flex;
  gap:20px;
}

.footer-links a {
  padding:5px 0;
}

.footer-links a:hover {
  text-decoration:underline;
  text-underline-offset:4px;
}

@keyframes letter-in {
  from {
    opacity:0;
    transform:translateY(60px) rotate(5deg);
  }
  to {
    opacity:1;
    transform:none;
  }
}

@keyframes scene-in {
  from {
    opacity:0;
    transform:translateY(30px) scale(.96);
  }
  to {
    opacity:1;
    transform:none;
  }
}

@keyframes rise-in {
  from {
    opacity:0;
    transform:translateY(18px);
  }
  to {
    opacity:1;
    transform:none;
  }
}

@keyframes ship-float {
  0%,100% {
    transform:translateY(0) rotate(-3deg);
  }
  50% {
    transform:translateY(-18px) rotate(4deg);
  }
}

@keyframes star-turn {
  to {
    transform:rotate(360deg);
  }
}

@keyframes lane-flow {
  to {
    transform:translateY(800%);
  }
}

@keyframes breathe {
  0%,100% {
    transform:scale(1);
    opacity:.8;
  }
  50% {
    transform:scale(.9);
    opacity:.4;
  }
}

@keyframes thrust {
  from {
    opacity:.12;
    scale:1 .8;
  }
  to {
    opacity:.3;
    scale:1 1.2;
  }
}

@keyframes orbital-dot {
  to {
    transform:translate(24px,12px);
  }
}

[data-motion=paused] *,[data-motion=paused] *:before,[data-motion=paused] *:after {
  animation-play-state:paused!important;
}

[data-motion=paused] .ship-position {
  transform:translate(-50%,-50%);
  transition:none;
}

[data-entered=true] .title-wrap span,[data-entered=true] .download {
  animation:none;
  opacity:1;
}

@media(min-width:1600px) {
  .title-wrap {
    margin-top:20px;
  }
  .hero {
    max-height:1100px;
  }
  .universe {
    --cy:54%;
  }
}

@media(max-width:700px) {
  .poster {
    min-height:max(720px,100svh);
  }
  .masthead {
    padding:22px 22px 12px;
  }
  .header-tools {
    gap:18px;
  }
  .hero {
    min-height:580px;
  }
  .title-wrap {
    margin-top:25px;
  }
  .eyebrow {
    font-size:8px;
    letter-spacing:2px;
    margin-bottom:12px;
  }
  h1 {
    font-size:24.5vw;
  }
  .universe {
    --cy:47%;
  }
  .portal {
    width:245px;
  }
  .ship-position {
    width:260px;
  }
  .orbit {
    width:88vw;
    height:160px;
    transform:translate(-50%,-50%) rotate(-22deg);
  }
  .orbit-two {
    width:70vw;
    height:235px;
    transform:translate(-50%,-50%) rotate(32deg);
  }
  .lane {
    top:23%;
    bottom:27%;
  }
  .lane-one {
    left:25%;
  }
  .lane-three {
    left:75%;
  }
  .star-one {
    left:12%;
    top:32%;
    font-size:32px;
  }
  .star-two {
    right:10%;
    top:62%;
    font-size:25px;
  }
  .star-three {
    right:14%;
    top:28%;
    font-size:22px;
  }
  .flight-note {
    left:7%;
    top:64%;
    font-size:8px;
    gap:8px;
  }
  .orbit-note {
    right:1%;
    top:39%;
    font-size:8px;
  }
  .download {
    padding-bottom:29px;
  }
  .tagline {
    font-size:15px;
    margin-bottom:16px;
  }
  .get-button {
    min-width:255px;
  }
  .footer {
    margin:0 22px;
    font-size:9px;
    padding:16px 0 20px;
  }
  .footer-center {
    letter-spacing:.7px;
  }
  .footer-links {
    gap:15px;
  }
}

@media(max-width:380px) {
  .masthead {
    padding-inline:18px;
  }
  .title-wrap {
    margin-top:22px;
  }
  .ship-position {
    width:235px;
  }
  .portal {
    width:220px;
  }
  .footer {
    margin-inline:18px;
  }
  .orbit-note {
    display:none;
  }
  .eyebrow {
    letter-spacing:1.4px;
  }
}

@media(min-width:701px) and (max-height:800px) {
  .poster {
    min-height:720px;
  }
  .hero {
    min-height:570px;
  }
  h1 {
    font-size:min(21vw,260px);
  }
  .title-wrap {
    margin-top:4px;
  }
  .universe {
    --cy:48%;
  }
  .portal {
    width:240px;
  }
  .ship-position {
    width:265px;
  }
  .orbit {
    height:170px;
  }
  .orbit-two {
    height:250px;
  }
  .download {
    padding-bottom:18px;
  }
  .tagline {
    margin-bottom:12px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
  }
  .ship-position {
    transform:translate(-50%,-50%);
  }
  .get-button:hover {
    transform:none;
  }
}

@media(max-width:700px) and (max-height:740px) {
  .poster {
    min-height:max(640px,100svh);
  }
  .hero {
    min-height:500px;
  }
  .title-wrap {
    margin-top:12px;
  }
  .universe {
    --cy:47%;
  }
  .ship-position {
    width:220px;
  }
  .portal {
    width:205px;
  }
  .orbit {
    height:135px;
  }
  .orbit-two {
    height:205px;
  }
  .download {
    padding-bottom:18px;
  }
  .tagline {
    margin-bottom:12px;
  }
  .star-one {
    top:33%;
  }
  .star-two {
    top:61%;
  }
}

.button-label {
  display:flex;
  align-items:center;
  gap:12px;
}

.app-icon {
  width:36px;
  height:36px;
  border-radius:9px;
}

.get-button {
  max-width:100%;
}

@media(max-width:380px) {
  .get-button {
    gap:14px;
    font-size:14px;
    min-width:260px;
  }
  .button-label {
    gap:10px;
  }
}

:root{--acid:#0b0b1c;--ink:#f5f1ff;--violet:#712bff;--electric:#3e6bff;--line:rgba(191,177,255,.21);background:var(--acid);color:var(--ink)}body,.poster{background:radial-gradient(ellipse at 50% 49%,rgba(94,39,255,.22),transparent 37%),var(--acid);color:var(--ink)}.portal{background:radial-gradient(circle at 35% 35%,#923eff,#5421e9 60%,#2920b8)}.orbit i,.orbit-two i{background:var(--electric)}.get-button{border-color:#f5f1ff;background:#f5f1ff;color:#171127;box-shadow:0 0 0 0 rgba(55,95,255,.5)}.button-arrow{background:#315cff;color:white}.get-button:hover{box-shadow:0 7px 0 rgba(63,103,255,.36)}.ship{filter:drop-shadow(10px 15px 0 rgba(61,89,255,.4))}.studio img{mix-blend-mode:screen;filter:invert(1);border-radius:50%}.skip-link{background:#702cff;color:white}