@import "../styles/mixins";

.section {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 4.8rem 0;
  position: relative;

  @include breakpoint(tablet, min) {
    padding: 6.4rem 0;
  }

  @include breakpoint(desktop, min) {
    padding: 4.8rem 0;
  }
}

.letter {
  display: flex;
  flex-direction: column;
  max-width: 80rem;
  padding: 3.2rem 0.8rem;

  @include breakpoint(phone, min) {
    padding: 3.2rem;
  }

  @include breakpoint(tablet, min) {
    padding: 4.8rem 5.6rem 4.8rem;
  }
}

.banner {
  align-items: center;
  background: #000;
  border-radius: 0.8rem;
  display: flex;
  justify-content: center;
  padding: 4rem 0;
  margin: 0 0 6.4rem;
}

.banner::before {
  background: url(/images/goodbye_hero.png) no-repeat center;
  background-size: 16rem;
  content: "";
  display: block;
  height: 16rem;
  width: 16rem;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .banner::before {
    background-image: url(/images/goodbye_hero@2x.png);
  }
}

.letter header {
  margin-bottom: 3.2rem;
}

.letter h1 {
  font-size: 4.8rem;
  line-height: 4.8rem;
  margin: 2.4rem 0 1.6rem;
}

.letter .tagline {
  color: var(--color-gray-primary);
  font-size: 2rem;
  line-height: 2.8rem;
  margin: 1.6rem 0;
}

.letter time {
  color: var(--color-gray-primary);
  display: block;
  font-size: 1.4rem;
  margin-top: 4.8rem;
}

.letter h2 {
  margin: 8rem 0 2.4rem;
}

.letter p {
  font-size: 1.7rem;
  line-height: 2.4rem;
  margin: 2.8rem 0;
}

.letter ol p,
.letter ul p {
  margin: 0.8rem 0;
}

.letter a {
  color: var(--color-blue);
  font-weight: 600;
  text-decoration: none;
}

.letter a:hover,
.letter a:focus {
  text-decoration: underline;
}

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

.shutdownBlock h2 {
  margin: 3.2rem 0;
}

.shutdownBlock p {
  font-size: 1.6rem;
  line-height: 2.13rem;
}

.shutdownPill {
  align-items: center;
  align-self: flex-start;
  border: solid 1px var(--color-gray-secondary);
  border-radius: 1.6rem;
  display: flex;
  flex-direction: row;
  font-size: 1.4rem;
  font-weight: 600;
  margin-top: 1.6rem;
  padding: 0.6rem 1.2rem;
}

.shutdownPill::before {
  border-radius: 0.8rem;
  content: "";
  display: block;
  height: 0.8rem;
  margin-right: 1.2rem;
  width: 0.8rem;
}

.shutdownPill:nth-of-type(1)::before {
  background: var(--color-green);
}

.shutdownPill:nth-of-type(2)::before {
  background: var(--color-yellow);
}

.shutdownPill:nth-of-type(3)::before {
  background: var(--color-red);
}

.shutdownPill:nth-of-type(4)::before {
  background: var(--color-blue);
}

.shutdownPill:nth-of-type(1) {
  transform: rotate(-1deg);
}

.shutdownPill:nth-of-type(2) {
  transform: rotate(1deg);
}

.shutdownPill:nth-of-type(3) {
  transform: rotate(-1deg);
}

.shutdownPill:nth-of-type(4) {
  transform: rotate(1deg);
}

.shutdownPill span {
  color: var(--color-gray-primary);
  font-size: 1.4rem;
  font-weight: 400;
  margin-left: 0.6rem;
}

.letter hr {
  background: var(--color-gray-tertiary);
  border: none;
  height: 0.1rem;
  margin: 6.4rem 0;
  width: 100%;
}

.letter .edit {
  border-left: 0.4rem solid var(--color-yellow);
  font-size: 1.6rem;
  line-height: 2.2rem;
  padding-left: 1.6rem;
}

.letter .edit > span {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
}

.letter .edit > span span {
  color: var(--color-gray-primary);
  font-weight: 400;
  margin-left: 0.4rem;
}

/* ========================================================================== */
/* Stack */
/* ========================================================================== */

.requestStack {
  align-items: center;
  display: flex;
  height: 24rem;
  justify-content: center;
  margin: 6.4rem auto;
  position: relative;
  width: 100%;
}

.request {
  animation-duration: 20s;
  animation-iteration-count: infinite;
  animation-timing-function: var(--animation-curve-basic);
  align-items: center;
  background-color: var(--color-white);
  border: 0.1rem solid var(--color-gray-secondary);
  border-radius: 1.2rem;
  box-shadow: var(--shadow-basic);
  display: flex;
  font-size: 1.5rem;
  line-height: 2rem;
  height: 20rem;
  max-width: 44rem;
  padding: 1.6rem 2.4rem;
  position: absolute;
}

.request::after {
  background-size: 2.4rem;
  background-repeat: no-repeat;
  bottom: 1.6rem;
  content: "";
  display: block;
  height: 2.4rem;
  position: absolute;
  right: 1.6rem;
  width: 2.4rem;
}

.request--1 {
  animation-name: request1;
  transform: rotate(1deg);
}

.request--1::after {
  background-image: url(/images/sender_names/cat.svg);
}

@keyframes request1 {
  0% {
    opacity: 0;
    transform: scale(0.9) rotate(1deg);
  }
  5%,
  28.3% {
    opacity: 1;
    transform: rotate(1deg);
  }
  33.3%,
  100% {
    opacity: 0;
    transform: scale(0.9) rotate(1deg);
  }
}

.request--2 {
  animation-name: request2;
  transform: rotate(-2deg);
}

.request--2::after {
  background-image: url(/images/sender_names/pizza.svg);
}

@keyframes request2 {
  0%,
  28.3% {
    opacity: 0;
    transform: scale(0.9) rotate(-2deg);
  }
  33.3%,
  61.6% {
    opacity: 1;
    transform: rotate(-2deg);
  }
  66.6%,
  100% {
    opacity: 0;
    transform: scale(0.9) rotate(-2deg);
  }
}

.request--3 {
  animation-name: request3;
  transform: rotate(1deg);
}

.request--3::after {
  background-image: url(/images/sender_names/icecream.svg);
}

@keyframes request3 {
  0% {
    opacity: 1;
    transform: rotate(1deg);
  }
  5%,
  61.6% {
    opacity: 0;
    transform: scale(0.9) rotate(1deg);
  }
  66.6%,
  100% {
    opacity: 1;
    transform: rotate(1deg);
  }
}
