:root {
  --blue: color(display-p3 0.23 0.53 0.97);
  --indigo: color(display-p3 0.37 0.33 0.93);
  --teal: color(display-p3 0.34 0.75 0.8);
  --cyan: color(display-p3 0.34 0.74 0.89);
  --darkBlue: color(display-p3 0 0 0.31);
  --royalBlue: color(display-p3 0 0 0.56);
  --white: color(display-p3 1 1 1);

  @media only screen and (prefers-color-scheme: dark) {
    --blue: color(display-p3 0 0 0.31);
    --teal: color(display-p3 0 0 0.56);
  }

  --c0: var(--blue);
  --c1: var(--blue);
  --c2: var(--indigo);
  --c3: var(--blue);
  --c4: var(--teal);
  --c5: var(--white);
  --c6: var(--blue);
  --c7: var(--blue);
  --c8: var(--teal);

  --time: 3s;

  --max-width: 774;

  @media (min-aspect-ratio: 10/7) {
    --max-width: 1560;
    --max-height: 1000;
  }

  @media only screen and (max-width: 700px) {
    --max-width: 700;
  }
}

@property --c0 {
  syntax: "<color>";
  inherits: false;
  initial-value: color(display-p3 0.23 0.53 0.97);
}
@property --c1 {
  syntax: "<color>";
  inherits: false;
  initial-value: color(display-p3 0.23 0.53 0.97);
}
@property --c2 {
  syntax: "<color>";
  inherits: false;
  initial-value: color(display-p3 0.23 0.53 0.97);
}
@property --c3 {
  syntax: "<color>";
  inherits: false;
  initial-value: color(display-p3 0.23 0.53 0.97);
}
@property --c4 {
  syntax: "<color>";
  inherits: false;
  initial-value: color(display-p3 0.23 0.53 0.97);
}
@property --c5 {
  syntax: "<color>";
  inherits: false;
  initial-value: color(display-p3 0.23 0.53 0.97);
}
@property --c6 {
  syntax: "<color>";
  inherits: false;
  initial-value: color(display-p3 0.23 0.53 0.97);
}
@property --c7 {
  syntax: "<color>";
  inherits: false;
  initial-value: color(display-p3 0.23 0.53 0.97);
}
@property --c8 {
  syntax: "<color>";
  inherits: false;
  initial-value: var(--blue);
}
.mona-sans {
  font-family: "Mona Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

html {
  color: white;
  font-size: 16px;
  font-weight: 300;
  background-color: var(--blue);
  text-rendering: geometricPrecision;
  font-family: Mona Sans;
  margin: 0;
  padding: 0;

  background-image: radial-gradient(at 0% 0%, var(--c0) 0px, transparent 50%), radial-gradient(at 52% 0%, var(--c1) 0px, transparent 50%), radial-gradient(at 100% 0%, var(--c2) 0px, transparent 50%),
    radial-gradient(at 0% 100%, var(--c3) 0px, transparent 50%), radial-gradient(at 51% 51%, var(--c4) 0px, transparent 50%), radial-gradient(at 100% 51%, var(--c5) 0px, transparent 50%), radial-gradient(at 0% 52%, var(--c6) 0px, transparent 50%),
    radial-gradient(at 52% 100%, var(--c7) 0px, transparent 50%), radial-gradient(at 100% 100%, var(--c8) 0px, transparent 50%);

  background-size: 100% 100%;

  transition: --c0 var(--time) linear, --c1 var(--time) linear, --c2 var(--time) linear, --c3 var(--time) linear, --c4 var(--time) linear, --c5 var(--time) linear, --c6 var(--time) linear, --c7 var(--time) linear, --c8 var(--time) linear;
}

@media only screen and (min-width: 744px) {
  html {
    background-attachment: fixed;
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  min-height: 100dvh;
  overflow-x: clip;
}

* {
  text-box: trim-both cap alphabetic;
}

a {
  color: var(--white);
  text-decoration: none;
}

hr {
  border: 0;
  outline: 0;
  background: white;
  width: 100%;
  height: 0.5px;
}

@media (min-aspect-ratio: 10/7) or (max-width: 700px) {
  hr {
    display: none;
  }
}

#background {
  display: none;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  text-box: trim-both cap alphabetic;
}

hr {
  width: 100%;
}

/* mobile vertical scroll snap */

.snap-point {
  display: none;
}

/* @media only screen and (max-width: 700px) {
  body {
    scroll-snap-type: y mandatory;
  }
  .snap-point {
    position: absolute;
    top: 50px;
    display: block;
    width: 5px;
    height: 5px;
    background: magenta;
    scroll-snap-align: start;
  }
} */

.wrapper {
  scroll-snap-align: start;
}

/* wrapper */

.wrapper {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-columns: 1fr;
  gap: min(calc(20 / var(--max-width) * 100vw), 20px);
  width: calc(var(--max-width) * 1px - 40px);
  max-width: calc(100vw - 40px);
  box-sizing: content-box;
  margin: min(calc(40 / var(--max-width) * 100vw), 40px) 0;
  opacity: 0;
  transition: opacity 0.3s 0.25s ease-in-out;
  &.active {
    opacity: 1;
  }
}

@media (min-aspect-ratio: 10/7) {
  .wrapper {
    display: grid;
    grid-template-columns: 1fr 8fr 1fr;
    grid-template-areas: "header main footer";
    gap: min(calc(30 / var(--max-height) * 100vh), 30px);
    height: auto;
    max-height: 100vh;
    width: calc(100vw - 60px);
    max-width: calc(var(--max-width) * 1px);
    margin: min(calc(40 / var(--max-width) * 100vw), 40px) 0;
  }
}

@media only screen and (max-width: 700px) {
  .wrapper {
    max-width: 100vw;
    padding: 80px 0 100px 0;
    gap: 30px;
    margin: min(calc(40 / var(--max-width) * 100vw), 40px) 0;
  }
}

/* header, footer */

header,
footer {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 20px;

  h1 {
    font-family: "Mona Sans", sans-serif;
    font-weight: 500;
    font-variation-settings: "wdth" 75;
    text-transform: uppercase;
    line-height: 1em;
    font-size: min(calc(174 / var(--max-width) * 100vw), 174px);
    letter-spacing: -0.02em;
  }

  h2 {
    position: relative;
    z-index: 2;
    text-transform: uppercase;
    line-height: 1em;
    letter-spacing: 0.2em;
    font-size: min(calc(13 / var(--max-width) * 100vw), 13px);
    font-variation-settings: "wdth" 125;
    font-weight: 300;
  }
  svg {
    z-index: 1;
  }
}

.top-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  gap: min(calc(12 / var(--max-width) * 100vw), 12px);
}

footer h2 {
  letter-spacing: 0.6em;
}

footer {
  display: flex;
  flex-direction: column;
  text-align: center;
  gap: 20px;
  transform: rotateZ(180deg);
}

.footer-svg {
  display: contents;
}

.svg-wrapper {
  position: relative;
  height: 100%;
  aspect-ratio: 1.05;
  svg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 140%;
    height: auto;
  }
}

@media (min-width: 700px) and (min-aspect-ratio: 10/7) {
  .wrapper {
    display: contents;
  }

  header {
    position: fixed;
    top: 0;
    left: 0;
    width: 18vw;
    height: 100lvh;
    display: flex;
    justify-content: center;
    align-items: center;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    transform-origin: center;
  }
  footer {
    position: fixed;
    top: 0;
    right: 0;
    width: 13vw;
    height: 100lvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    writing-mode: vertical-lr;
    transform: rotateZ(0deg);
  }
  header,
  footer {
    h1 {
      font-size: min(calc(188 / var(--max-height) * 100vh), 188px);
    }
    h2 {
      font-size: min(calc(13 / var(--max-height) * 100vh), 13px);
      text-shadow: -0.5px 0.5px 3px color(display-p3 0 0 0.31);
    }
    svg {
      display: none;
    }
  }
  footer {
    h1 {
      display: none;
    }
    svg {
      position: absolute;
      display: block;
      width: 12vw;
      height: 200px;
      margin: 0;
    }
  }
  .footer-svg {
    position: relative;
    display: block;
    width: min(calc(130 / var(--max-height) * 100vh), 130px);
    height: 100px;
  }
}

@media only screen and (min-width: 1600px) {
  main {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 700px) {
  header,
  footer {
    padding: 0 20px;
    h1 {
      font-size: min(calc(150 / var(--max-width) * 100vw), 150px);
    }
    h2 {
      font-size: 11px;
      line-height: 1.4em;
    }
    h2.cred {
      font-size: 10px;
    }
  }
  .top-row {
    gap: min(calc(20 / var(--max-width) * 100vw), 20px);
  }
  .svg-wrapper {
    position: relative;
    height: 100%;
    aspect-ratio: 1.05;
    svg {
      position: absolute;
      bottom: 0;
      left: 0;
      width: auto;
      height: 120%;
      aspect-ratio: 1.28;
    }
  }
}

/* main */

main {
  text-box: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: min(calc(26 / var(--max-width) * 100vw), 26px) min(calc(20 / var(--max-width) * 100vw), 20px);
}

main img {
  width: 100%;
  height: auto;
  text-box: none;
}

main img.square {
  grid-row-end: span 2;
}

.center {
  display: contents;
}

@media (min-aspect-ratio: 10/7) {
  .center {
    display: contents;
  }
  main {
    margin: 0 auto 0 16vw;
    width: min(calc(1120 / var(--max-width) * 100vw), 1120px);
    padding: 30px 0;
    grid-area: main;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
  #no-5 {
    order: 5;
  }
}

@media (min-aspect-ratio: 10/7) and (min-width: 1600px) {
  footer,
  header {
    width: 240px;
  }
  header {
    left: calc((100vw - 1120px - 480px) / 2);
  }
  footer {
    right: calc((100vw - 1120px - 480px) / 2);
  }
  main {
    margin: 0 auto;
  }
}

@media only screen and (max-width: 700px) {
  .center {
    display: block;
    overflow-x: scroll;
    scroll-snap-type: x proximity;
    padding: 10px 0;
  }
  main {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 20px;
    > * {
      position: relative;
      &:before {
        content: "";
        position: absolute;
        left: -40px;
        top: 0;
        width: 1px;
        height: 1px;
        scroll-snap-align: start;
      }
      min-width: 290px;
      max-width: 290px;
      height: auto;
      &:first-child {
        padding-left: 20px;
      }
      &:last-child {
        padding-right: 20px;
      }
    }
    #infoblock {
      display: none;
    }
  }
  main img.square {
    grid-row-end: span 1;
  }
}

/* misc */

#appstore,
#bluesky {
  display: block;
  height: min(calc(40 / var(--max-width) * 100vw), 40px);
  aspect-ratio: 3.48;

  margin: auto;

  text-indent: -100vw;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: contain;
}

#appstore {
  background-image: url("/assets/apple-app-store.svg");
}

#bluesky {
  background-image: url("/assets/bluesky.svg");
}

#infoblock {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  p {
    margin: auto;
    font-size: min(calc(14 / var(--max-width) * 100vw), 14px);
    font-weight: 400;
    font-variation-settings: "wdth" 90;
    letter-spacing: 0.2em;
    grid-column-end: span 2;
    text-align: center;
    text-wrap: balance;
  }
}

#mobile-infoblock {
  display: none;
}

@media only screen and (max-width: 700px) {
  #mobile-infoblock {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    p {
      font-size: 14px;
      grid-column-end: span 2;
      text-align: center;
      margin: 0 20px;
    }
    margin: 0 20px 10px 20px;
  }
  #appstore,
  #bluesky {
    height: min(calc(80 / var(--max-width) * 100vw), 80px);
  }
}