$body: #1c2329;
$none: rgba(#fff, 0);
$card: #ece8e5;
$yellow: #f8e703;
$dy: darken($yellow, 5);
$dy2: darken($yellow, 10);
$ly: lighten($yellow, 10);
$red: red;
$orange: orange;
$magenta: rgb(255, 0, 255);
$purple: purple;
$indigo: indigo;

$card2: lighten($body, 10);
$card3: lighten($body, 20);

//card2
$y: 0.3rem;
$y: 0;
$scale: 0.72;
$z: 25rem;
$s2: 0.5s;
$d: 1s;
$sz: -35rem;
$test: 90deg;

$angle: 10deg;

$s: 3s;

$top: 90vh;

$animate: all 0.25s ease-in-out;

@mixin pos-abs {
  position: absolute;
  left: 0;
  top: 0;
}

html {
  font-size: 1.75vh;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  font-family: "Inter", sans-serif;
  margin: 0;
  overflow: hidden;
  color: #fff;
  text-align: center;
}

// for 3d

.scroll {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  transform-style: preserve-3d;
  perspective: 100rem;
  perspective-origin: calc(50% - 5.5px) 30rem;
  background: repeating-linear-gradient(
    -45deg,
    lighten($body, 10),
    lighten($body, 10) 0.1rem,
    lighten($body, 15) 0.1rem,
    lighten($body, 15) 0.5rem
  );
  box-shadow: inset 0 0 1rem $body;
}

// sky

@media (orientation: landscape) {
  .home .scroll:after {
    @include pos-abs;
    content: "";
    width: 100%;
    height: 50vh;
    background: linear-gradient($purple, $none);
    mix-blend-mode: soft-light;
    pointer-events: none;
  }
}

*,
*:before,
*:after {
  transform-style: preserve-3d;
  box-sizing: border-box;
  -webkit-tap-highlight-color: $none;
}

img {
  width: 100%;
  display: block;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0;
}

h3 {
  font-size: 1.5em;
}

h2 {
  display: none;
}

section {
  background: radial-gradient(darken($card, 20), $card);
}

.title {
  background: currentColor;
  font-size: 2em;
  padding: 1rem;
  color: $card3;
  font-weight: 800;
  text-align: center;
  box-shadow: inset 0 -0.3rem $body,
    //
    inset 0 0.3rem $body,
    //
    0 -0.3rem currentColor,
    //
    0 0.3rem currentColor,
    //
    0 3rem 5rem $body,
    //
    0 6rem 5rem $body,
    //
    0 9rem 5rem $body,
    //
    0 12rem 5rem $body;
  margin: 0 -3rem;

  &:before {
    width: 200%;
    content: "";
    height: 60rem;
    transform: rotateX(90deg);
    position: absolute;
    left: -50%;
    transform-origin: bottom;
  }

  &:before {
    bottom: 4.6rem;
    background: radial-gradient($body, lighten($body, 10));
  }

  * {
    color: $body;
  }

  h1 {
    font-size: 1em;
  }
}

.tags > * {
  background: rgba($body, 0.1);
  padding: 0.2rem 0.5rem;
  border-radius: 1rem;
}

footer {
  letter-spacing: 0.1rem;
  color: $body;
  background: $card3;
  padding: 1rem;
  box-shadow: 0 0 2rem $body;

  &:before {
    content: "";
    height: 0.3rem;
    top: -0.6rem;
    background: $card3;
    width: 100%;
    position: absolute;
    left: 0;
    box-shadow: 0 0 2rem $body;
  }
}

.back-btn {
  position: absolute;
  top: 1rem;
  left: 1rem;
  color: $card;
  text-decoration: none;
  line-height: 1;
  background: rgba($card, 0.1);
  border-radius: 1rem;
  gap: 0.5rem;
  font-family: Consolas;
  transition: $animate;
  border: 0.2rem solid $none;

  &:hover {
    box-shadow: 0 0 0 1px rgba($card, 0.5), inset 0 0 0 2rem rgba($card, 0.5);
    color: $body;
  }
}

.link {
  color: inherit;
}

//scroll bar

::-webkit-scrollbar {
  width: 1rem;
}

::-webkit-scrollbar-track {
  background: $body;
}

::-webkit-scrollbar-thumb {
  background: rgba($card, 0.2);
  border-radius: 0.5rem;
  border: solid 0.2rem $body;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba($card, 0.5);
}

.w-100 {
  width: 100%;
}

.d-flex {
  display: flex;
}

.gap-1 {
  gap: 1rem;
}

.gap-2 {
  gap: 2rem;
}

.align-items-center {
  align-items: center;
}

.card,
.card2 {
  .card-row *:nth-of-type(1) {
    flex: 1 1 auto;
  }
}

.p-05 {
  padding: 0.4rem;
}

.px-05 {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

.px-10 {
  padding-left: 0.7rem;
  padding-right: 0.7rem;
}

.pt-10 {
  padding-top: 0.7rem;
}

.py-05 {
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
}

.py-10 {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}

mt-05 {
  margin-top: 0.3rem;
}

.colour-yellow .bg-current {
  background: $yellow;
}

.colour-yellow {
  color: $yellow;
}

.colour-red {
  color: $red;
}

.colour-orange {
  color: $orange;
}

.colour-magenta {
  color: $magenta;
}

.colour-purple {
  color: $purple;
}

.colour-indigo {
  color: $indigo;
}

.pos-abs {
  position: absolute;
  top: 0;
  left: 0;
}

.z-1 {
  z-index: 1;
  position: relative;
}

.m-10 {
  margin: 1rem;
}

.pointer {
  cursor: pointer;
}

.border {
  border: 0.3rem solid $body;
}

.text-left {
  text-align: left;
}

.flex-reverse {
  flex-direction: row-reverse;
}

.flex-column {
  flex-direction: column;
}

.font-24 {
  font-size: 1.8rem;
}

.justify-content-center {
  justify-content: center;
}

sig {
  &,
  * {
    height: 9.25em;
    overflow: hidden;
    border-radius: 0.5em;
  }

  &,
  &:before,
  *:before {
    position: absolute;
    left: 0;
    top: 0;
  }

  right: 0;
  bottom: 0;
  width: 6.9em;
  transform: skewX(10deg) scaleY(0.45) rotate(2deg);
  margin: auto;
  z-index: 2;

  &:before,
  *:before {
    width: 5em;
    height: 5em;
    background: currentColor;
    transform: translate3d(-2.5em, 0, 0) rotate(-45deg);
    box-shadow: -3em 3em 0 0 currentColor;
    border-radius: 0.5em 2em 0.5em 2em;
    content: "";
  }

  * {
    width: 5em;
    transform: translate3d(3.75em, 0, 0) scaleY(0.95);
    display: block;

    &:before {
      transform: translate3d(-3em, -2em, 0) rotate(-45deg);
      box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor;
      border-radius: 0.5em;
    }
  }
}

.page-sig {
  position: absolute;
  top: 0.2rem;
  right: 25px;

  @media (orientation: portrait) {
    top: 0.1rem;
    right: 1.2rem;
  }

  width: 10em;
  height: 10em;
  font-size: 0.3rem;
  color: lighten($body, 10);
  mix-blend-mode: color-dodge;

  &:hover {
    color: darken($card, 10);
  }
}
.card,
.card2 {
  background: #fff;
  border-radius: 1rem;
  transform-origin: center;
  text-align: left;
  transition: all $s2 ease-in-out;

  .front {
    font-weight: 600;
    transform: translate3d(0, 0, 0.1rem);
    box-shadow: inset 0 0 0 0.75rem $card;
    padding: 0.75rem;
  }

  .front,
  .back {
    border-radius: 1rem;
    overflow: hidden;
    //shine
    &:after {
      @include pos-abs;
      content: "";
      height: 120%;
      width: 400%;
      background: linear-gradient(
        75deg,
        $body,
        rgba($body, 0.25) 50%,
        $none,
        $none,
        rgba(#fff, 0.25),
        $none,
        $none,
        rgba(#fff, 0.25) 75%,
        #fff
      );
      opacity: 0.5;
      z-index: 1;
      pointer-events: none;
      transform: translate3d(-37rem, 0, 0);
    }
  }

  .back,
  .back > div {
    height: 100%;
    width: 100%;
  }

  .back {
    transform: translate3d(0, 0, -0.1rem) rotateY(180deg);
    border-radius: 1rem;
    font-size: 0.8rem;
    padding: 0.5rem;
    background: linear-gradient(20deg, $card, #fff, $card);
    display: flex;
    align-content: stretch;
    @include pos-abs;

    & > div {
      border-radius: 0.5rem;
      background: linear-gradient(-80deg, $dy, $ly, $dy);
      overflow: hidden;

      &:before,
      &:after {
        content: "";
        @include pos-abs;
      }

      &:after {
        width: 100%;
        height: 100%;
        background: linear-gradient(
            45deg,
            currentColor 25%,
            $none 25%,
            $none 75%,
            currentColor 75%,
            currentColor
          ),
          linear-gradient(
            -45deg,
            currentColor 25%,
            $none 25%,
            $none 75%,
            currentColor 75%,
            currentColor
          );
        background-size: 1rem 1rem;
      }
    }
  }

  sig {
    filter: brightness(0.8);
  }

  .photo {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
  }
}

.card {
  .card-row {
    color: $body;
  }

  .border-bottom {
    border-bottom: 0.3rem solid $body;
  }

  h1 {
    margin-bottom: 0.5rem;
  }

  h2 {
    font-size: 1.5em;
  }

  .photo {
    & > * {
      @include pos-abs;
      height: 100%;
      width: 100%;
      transform: translate3d(0, 0, -2rem) rotateY(0deg);
      perspective: 100rem;
    }

    .l1 {
      transform: translate3d(0, 0, -10rem) scale(1.2) rotateX(-15deg);
    }

    .l2 {
      transform: translate3d(0, 0, -20rem) scale(1.5);
    }

    .photo-bg {
      position: absolute;
      left: -100%;
      top: -100%;
      height: 300%;
      width: 300%;
      background: #b5b5b3;
      transform: translate3d(0, 0, -30rem) scale(2);
      background-image: url("../images/emptybackfade.png");
    }
  }
}

.card {
  animation: rotate $s $d forwards;
}

.photo > * {
  animation: rotate2 $s $d forwards;
}

.front,
.back {
  &:after {
    animation: shine1 $s $d forwards;
  }
}

.shadow {
  animation: shadowhover $s $d linear forwards;
}

@keyframes nothing {
  50% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes rotate2 {
  33% {
    transform: translate3d(10rem, 0, -10rem) rotateY(-45deg) scale(1.2);
  }

  50% {
    transform: translate3d(-10rem, 0, 0) rotateY(45deg);
  }
}

@keyframes rotate {
  50% {
    transform: translate3d(0, ($y - 5), ($z / 2)) scale(0.75) rotateY(-200deg);
  }

  100% {
    transform: translate3d(0, $y, $z) scale(0.72) rotateY(-360deg);
    /* transform: translate3d(0,$y,$z) scale(.72) rotateY(-180deg);*/
  }
}

@keyframes shine1 {
  17%,
  45% {
    transform: translate3d(0, 0, 0);
  }

  21%,
  46% {
    transform: translate3d(-70rem, 0, 0);
  }

  100% {
    transform: translate3d(-55rem, 0, 0);
  }
}

.shadow,
.other-shadow {
  position: absolute;
  width: 100%;
  height: 100%;

  &:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: -5rem;
    top: 5rem;
    background: #000;
    transform: translate3d(0, 0, -10rem);
    border-radius: 2rem;
    opacity: 0.8;
    filter: blur(3rem);
  }
}

.home {
  @for $i from 1 through 12 {
    #card#{$i}cb:checked ~ {
      .carousel > div > #card#{$i} {
        .shadow,
        .other-shadow {
          margin: auto;
          height: 50rem;
          width: 30rem;
          left: 10rem;
          right: 0;
          filter: blur(3rem);
          transform-origin: 100% 100%;
          transform-style: flat;
          transform: translate3d(-15rem, 0, $sz)
            rotateX($test)
            skewX(30deg)
            scaleX(1.5);
          transition: all $s2 ease-in-out;
          bottom: -16.1rem;

          &:before {
            content: "";
            width: 100%;
            height: 100%;
            @include pos-abs;
            background: linear-gradient($none, #000);
            border-radius: 2rem;
            transform: translate3d(0, 0, $sz);
            opacity: 0;
          }
        }
      }
    }
  }
}

.home #card1cb:checked ~ .carousel > div > #card1 {
  .shadow,
  .other-shadow {
    bottom: -11.5rem;
  }
}

@keyframes shadowhover {
  10% {
    opacity: 0;
  }

  11% {
    transform: translate3d(0rem, 35rem, $sz) rotateY(-90deg) skewY(20deg)
      scaleY(0.2);
    opacity: 0.1;
  }

  28% {
    transform: translate3d(0rem, 0, $sz) rotateY(-180deg) scaleY(0.5);
    opacity: 0.2;
  }

  38% {
    transform: translate3d(0, 0, $sz) rotateY(-90deg) skewY(-20deg);
    opacity: 0.1;
  }

  50% {
    transform: translate3d(0, 0, $sz) rotateY(-70deg) skewY(-15deg);
    opacity: 0.1;
  }

  100% {
    transform: translate3d(0, 0, $sz) rotateY(20deg);
    opacity: 0.3;
  }
}

@keyframes wiggle {
  50% {
    transform: rotate(1deg);
  }
}

.other-shadow {
  display: none;
}

#card1rotate:checked ~ .carousel > div > #card1 {
  .rotate {
    transform: translate3d(0, 0, 40rem) rotateY(180deg);
  }

  .shadow {
    opacity: 0 !important;
  }

  .other-shadow {
    display: block;

    &:before,
    &:after {
      animation: shadowhoverqr $s / 4.5 forwards linear;
    }
  }
}

.home #card1cb:checked ~ .carousel > div > #card1 {
  .rotate {
    transition: all 0.5s ease-in-out;
    pointer-events: none;
  }

  label {
    width: 100%;
    height: 100%;
    @include pos-abs;
    transform: translate3d(0, 0, 5rem);
    cursor: help;
  }
}

.back img {
  z-index: 1;
  @include pos-abs;
  bottom: 0;
  right: 0;
  margin: auto;
  border: 0.7rem solid $card;
  mix-blend-mode: hard-light;
  box-shadow: 0 0 0 0.7rem $body;
}

.card .back > div:before {
  background: $body;
  border: 0.7rem solid $yellow;
  box-shadow: 0 0 0 0.7rem $card;
  width: 6.15rem;
  height: 6.6rem;
  margin: auto;
  bottom: 0;
  right: 0;
  z-index: 2;
  display: none;
}

@keyframes shadowhoverqr {
  50% {
    transform: translate3d(0, 0, $sz) rotateY(20deg) skewX(60deg) scaleY(0.7);
    opacity: 0.1;
  }

  100% {
    transform: translate3d(0, 0, $sz) rotateY(20deg) skewX(0deg) scaleY(0.5);
    opacity: 0.1;
  }
}
@for $i from 0 through 3 {
  .carousel-card-holder:nth-of-type(#{$i}n) .card2 {
    .front,
    .back {
      &:after {
        transform: translate3d(#{-35 - ($i * 2)}rem, 0, 0);
      }
    }
  }
}

.card2 {
  .card-row * {
    color: #fff;
  }

  .front {
    background: $body;
    box-shadow: inset 0 0 0 0.5rem $card;
  }

  .front,
  .back {
    &:after {
      transform: translate3d(-37rem, 0, 0);
    }
  }

  .border-bottom {
    border-bottom: 0.3rem solid darken($body, 5);
  }

  .header {
    border-bottom: 0.25rem solid currentColor;
    padding-bottom: 0.5rem;
    margin-bottom: 0.5rem;
  }

  .back {
    color: currentColor;
    background: currentColor;
    box-shadow: inset 0 0 0 0.5rem $card;

    & > div {
      background: linear-gradient(
        -80deg,
        rgba($body, 0.1),
        rgba($card, 0.2),
        rgba($body, 0.1)
      );

      &:before {
        content: "";
        width: 5rem;
        height: 5rem;
        margin: auto;
        bottom: 0;
        right: 0;
        transform: rotate(45deg);
        background: currentColor;
        z-index: 1;
        border: solid 0.75rem #fff;
        border-radius: 1rem;
      }
    }
  }

  .photo {
    & > * {
      border-radius: 1rem;
      border: 0.2rem solid $body;
      background: radial-gradient($body, #000);
      overflow: hidden;
    }

    .l2 {
      filter: blur(2rem) brightness(0.9);
      transform: scale(1.2);
    }

    & * {
      @include pos-abs;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 100%;
    }
  }
}

@keyframes rotate22 {
  50% {
    transform: translate3d(0, 0, -1rem) rotateY(-200deg) rotateX(5deg);
  }

  100% {
    transform: rotateY(-360deg) rotateX(2deg);
  }
}

@keyframes shine22 {
  15%,
  65% {
    transform: translate3d(0, 0, 0);
  }

  21%,
  71% {
    transform: translate3d(-70rem, 0, 0);
  }

  50% {
    transform: translate3d(-55rem, 0, 0);
  }
}
.card3 {
  height: 40rem;
  margin: 5rem -3rem -5rem;
  color: $body;
  font-size: 1.2rem;
  transition: all 0.5s ease-in-out;

  h3 {
    font-weight: 500;
  }

  .front {
    transform: translate3d(0, 0, 0.1rem);
    background: $body;
    box-shadow: inset 0 0 0.5rem rgba($card, 0.1);
    padding: 0.5rem;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: solid 4px #000;

    .border-left {
      border-left: 0.2rem solid rgba($card, 0.1);
      padding: 0 2rem;
      margin-left: 1rem;
    }

    .photo {
      flex: 1 1 auto;
      position: relative;
      overflow: hidden;
      box-shadow: inset 0 0 1rem $body;
      border-radius: 1rem;
      margin: 0.5rem;

      img:nth-of-type(1) {
        position: absolute;
        top: -100%;
        left: -100%;
        right: -100%;
        bottom: -100%;
        width: 100%;
        height: 100%;
        margin: auto;
        filter: blur(2rem);
        opacity: 0.5;
        -webkit-mask-image: linear-gradient(#000, $none);
      }

      img:nth-of-type(2) {
        margin: auto;
        max-height: 98%;
        max-width: 98%;
        width: fit-content;
        @include pos-abs;
        bottom: 0;
        right: 0;
        box-shadow: 0 0 2rem $body, 0 0 4rem $body;
        border-radius: 1rem;
      }

      img {
        filter: saturate(1.1);
      }
    }
  }

  .card-row {
    background: $card;
    margin: 0.5rem;
    padding: 1.5rem 1rem 0.25rem;
    border-radius: 50% 50% 0.75rem 0.75rem / 0.25rem 0.25rem 0.75rem 0.75rem;
  }

  .front {
    border-radius: 2rem;
    overflow: hidden;

    &:after {
      @include pos-abs;
      content: "";
      height: 120%;
      width: 400%;
      background: linear-gradient(
        60deg,
        $body,
        rgba($body, 0.25) 50%,
        $none,
        $none,
        rgba(#fff, 0.1),
        $none,
        $none,
        rgba(#fff, 0.25) 75%,
        #fff
      );
      opacity: 0.5;
      z-index: 1;
      pointer-events: none;
      animation: none !important;
      transform: translate3d(-50%, 0, 0);
      transition: all 0.5s ease-in-out;
    }
  }

  &:hover {
    transform: translate3d(0, 0, 1rem);

    .front:after {
      transform: translate3d(-55%, 0, 0);
    }
  }
}
//carousel

.home .carousel {
  @media (orientation: landscape) {
    &:before,
    &:after {
      content: "";
      display: block;
      width: 50vw;
      height: 100vh;
      top: 0;
      background: linear-gradient($magenta, $none);
      animation: back 5s infinite linear;
      position: absolute;
      right: 0;
      transform: translate3d(15rem, -14rem, -33rem) skewX(-45deg);
      opacity: 0.1;
    }

    &:after {
      transform: translate3d(-28rem, -14rem, -33rem) skewX(-45deg);
      background: linear-gradient($magenta, $none);
      opacity: 0.03;
      animation: back 10s infinite linear reverse;
    }
  }
}

@keyframes back {
  33% {
    opacity: 0.05;
    -webkit-mask-image: linear-gradient(45deg, #000, $none);
  }

  66% {
    opacity: 0.1;
    -webkit-mask-image: linear-gradient(-45deg, #000, $none);
  }
}

input {
  position: absolute;
  opacity: 0;
}

.top-bit {
  height: $top;
  width: 100%;

  &:before {
    content: "";
    position: absolute;
    left: -35%;
    top: -51.5%;
    width: 165%;
    height: 152%;
    background: radial-gradient(darken($body, 10), $none, rgba($card, 0.1)),
      $body;
    transform: translate3d(0, 0, -60rem);
  }

  .art &:before {
    background: linear-gradient(#000, $none),
      //
      radial-gradient(darken($body, 10), $none, rgba($card, 0.1)),
      //
      $body;
  }
}

.prev-next-btns {
  height: $top;
  display: flex;
  align-items: center;
  width: 90%;
  @include pos-abs;
  right: 0;
  margin: auto;
  transition: $animate;

  & > * {
    flex: 1 1 auto;
  }

  .art & {
    height: $top + 10;
  }
}
// the carousel
// the carousel
// the carousel

@for $i from 1 through 12 {
  #c#{$i}:checked ~ {
    #p#{$i} {
      display: block;
    }
  }

  #card#{$i}cb:checked ~ {
    .carousel > div > #card#{$i} {
      width: 24rem;
      @include pos-abs;
      right: 0;
      margin: auto;
      transform: translate3d(0, 60rem, $z) scale(0.72);
      animation: carousel-top 0.5s forwards;
      top: 2rem;

      .hover {
        &,
        .front:after {
          transition: all 0.5s ease-in-out;
        }
      }

      &:hover {
        & > .hover {
          transform: translate3d(0, 0, 1rem);

          .front:after {
            left: -2rem;
          }
        }

        @media (min-width: 1000px) {
          & ~ .prev-next-btns > * > * {
            filter: blur(0.1rem);
          }
        }

        .shadow {
          left: 5rem;
        }
      }

      .art & {
        transform: translate3d(0, 0, $z);
        top: 29rem;
      }

      .card,
      .card2 {
        animation: rotate $s forwards;

        h2 {
          display: block;
        }
      }

      .card .photo > * {
        animation: rotate2 $s forwards;
      }
      //shine
      .front,
      .back {
        &:after {
          animation: shine1 $s forwards;
          opacity: 1;
        }
      }

      .shadow {
        display: none;
      }

      .home & {
        .shadow {
          display: block;
          transform: translate3d(-15rem, 0, $sz)
            rotateX($test)
            skewX(30deg)
            scaleX(1.5);

          &:after,
          &:before {
            animation: shadowhover $s 0.1s forwards linear;
            opacity: 0;
          }
        }
      }

      .card2 {
        margin-top: 2rem;

        .front,
        .back {
          &:after {
            opacity: 0.5;
          }
        }
      }

      .card3 {
        top: 0;
        bottom: 0;
        aspect-ratio: 1.1/1;
        height: 99vmin;

        @media (orientation: portrait) {
          height: 144vmin;
        }

        max-height: 99vh;
        max-width: 99vw;
        left: calc(0rem - 12rem - 100%);
        right: calc(0rem - 12rem - 100%);
        margin: auto;
        position: absolute;
        //shine
        .front,
        .back {
          &:after {
            opacity: 0.3;
          }
        }
      }

      @keyframes carousel-top {
        70% {
          transform: translate3d(0, -5rem, $z) scale(0.72);
        }

        100% {
          transform: translate3d(0, $y, $z) scale(0.72);
        }
      }
    }

    .carousel > * > .prev-next-btns > * > #next#{$i}btn,
    .carousel > * > .prev-next-btns > * > #prev#{$i}btn {
      display: block;
    }
  }
}

.btn-next,
.btn-prev {
  font-size: 0;
  width: 4rem;
  height: 2rem;
  border-radius: 1rem 0 0 1rem;
  border: 0.2rem solid $none;
  background: lighten($body, 10);
  display: none;
  position: relative;
  margin: auto;
  transform: translate3d(0, 0, 55rem);
  transition: $animate;

  &:after {
    content: ">";
    width: 1rem;
    height: 1rem;
    @include pos-abs;
    bottom: 0;
    margin: auto;
    font-family: "Xanh Mono", monospace;
    font-size: 1rem;
    line-height: 1;
  }

  &:hover,
  &:focus {
    box-shadow: 0 0 0 1px rgba($card, 0.5), inset 0 0 0 2rem rgba($card, 0.5);
    color: $body;
  }
}

.btn-prev {
  border-radius: 0 1rem 1rem 0;

  &:after {
    content: "<";
    right: 0;
    left: auto;
  }
}

.the-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: $top 10vw 6rem;
  margin: auto;
  margin-top: -$top;

  .carousel-card-holder {
    width: 24rem;
    text-decoration: none;
    transform: translate3d(0, $y, ($z / 1.5)) scale(0.75) rotateY(2deg)
      rotateX(2deg);
    transform: translate3d(0, $y, ($z / 1.5)) scale(0.75);
    margin: -2rem 0;
    transition: all 0.5s ease-in-out;
  }

  .art & {
    padding: ($top + 10) 10vw 8rem;
    margin-top: -$top - 8;

    .carousel-card-holder {
      width: 30rem;
    }
  }
}

.card,
.card2,
.photo > *,
.angle,
.front:after,
.back:after,
.shadow {
  animation: nothing 0.25s forwards;
}

@for $i from 1 through 12 {
  #card#{$i}cb:not(:checked) ~ {
    .carousel > div > #card#{$i} {
      &:hover {
        .card2,
        .card {
          animation: hover-card $s2 forwards;
          filter: saturate(1.5);

          .front,
          .back {
            &:after {
              animation: hover-shine $s2 forwards;
            }
          }
        }

        .shadow:after {
          animation: hover-shadow2 $s2 forwards;
        }
      }
    }
  }
}

@keyframes hover-card {
  33% {
    transform: translate3d(0, 0, -1rem) rotateY(-10deg) rotateX(5deg);
  }

  66% {
    transform: translate3d(0, 0, -1rem) rotateY(10deg) rotateX(-5deg);
  }

  100% {
    transform: translate3d(0, 0, 5rem) rotateY(0deg) rotateX(0deg);
  }
}

@keyframes hover-shine {
  33% {
    transform: translate3d(-27rem, 0, 0);
  }

  66% {
    transform: translate3d(-47rem, 0, 0);
  }
}

@keyframes hover-shadow2 {
  33% {
    transform: translate3d(0, 0, -10rem) rotateY(-10deg) rotateX(5deg);
  }

  66% {
    transform: translate3d(0, 0, -10rem) rotateY(10deg) rotateX(-5deg);
  }

  100% {
    transform: translate3d(-1rem, 0, -15rem) rotateY(0deg) rotateX(0deg)
      scale(1.1);
  }
}
@media (orientation: landscape) {
  @for $i from 1 through 7 {
    #card#{$i}cb:checked ~ {
      .carousel > div > #card#{$i} > .blobby-bits {
        display: block;
        animation: blobby-in 5s ease-out forwards;
      }
    }
  }

  $texturecolour: lighten($card, 10), $card;

  @function texture($a, $b, $c, $d, $e, $f, $g) {
    $value: "#{random(100)}rem #{random( $g)}rem 0   #{nth($texturecolour, random(length($texturecolour)))}";

    @for $i from 2 through $b {
      $z: random($a);
      $texturecolour: darken($c, 5), $d;

      $value: "#{$value} , #{$z - 50}rem #{random( $g)}rem 0 #{random($e) / $f}rem   #{nth($texturecolour, random(length($texturecolour)))}";
    }

    @return unquote($value);
  }

  $texture: texture(120, 50, $yellow, $card, 10, 10, 150);
  $texture2: texture(120, 70, $card, $card, 20, 20, 150);
  $rain: texture(200, 200, $purple, $magenta, 2, 50, 200);

  .top-bit:after {
    content: "";
    position: absolute;
    top: -20rem;
    left: 90vw;
    display: block;
    width: 0.1rem;
    height: 10rem;
    transform: translate3d(0, 0, -30rem) rotate(45deg);
    box-shadow: $rain;
    opacity: 0.05;
    animation: back 5s infinite;
  }

  .blobby-bits {
    width: 0.2rem;
    height: 0.2rem;
    right: 0;
    @include pos-abs;
    margin: auto;
    transform: translate3d(0, 20rem, 0) scale(0);
    display: none;

    &:after,
    &:before {
      width: 0.2rem;
      height: 0.2rem;
      @include pos-abs;
      content: "";
      box-shadow: $texture;
      opacity: 0.025;
      transform: translate3d(0, 0, -10rem);
      border-radius: 50%;
      animation: sway 20s ease-in-out infinite;
    }

    &:after {
      box-shadow: $texture2;
      transform: translate3d(0, 0, 27rem);
      animation: sway2 25s ease-in-out infinite;
    }
  }

  @keyframes sway {
    33% {
      transform: translate3d(-1rem, 0, -5rem);
    }

    66% {
      transform: translate3d(1rem, 0, -10rem);
    }
  }

  @keyframes sway2 {
    33% {
      transform: translate3d(2rem, 0, 27rem);
    }

    66% {
      transform: translate3d(-2rem, 0, 20rem);
    }
  }

  @keyframes blobby-in {
    100% {
      transform: translate3d(0, 0, 0) scale(1);
    }
  }
}
@media (orientation: portrait) {
  html {
    font-size: 1.8vh;
  }

  .the-cards {
    padding: 50rem 7vw 6rem;
  }
}