/* Mailcore homepage hero mail motion. Versioned and scoped to the v2 homepage. */

.site-home--cf-v2 .hero-address {
  position: relative;
  display: inline-grid;
  grid-template-areas: "address";
  width: 21ch;
  height: 1.35em;
  overflow: hidden;
  color: #2a150d;
  font: 650 .94em/1.3 "JetBrains Mono", ui-monospace, monospace;
  letter-spacing: -.035em;
  text-align: start;
  vertical-align: -.2em;
  white-space: nowrap;
}

.site-home--cf-v2 .hero-address__item {
  grid-area: address;
  align-self: center;
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 220ms ease, transform 220ms ease;
}

.site-home--cf-v2 .hero-address:not(.is-address-ready) .hero-address__item:first-child,
.site-home--cf-v2 .hero-address.is-address-ready .hero-address__item.is-current {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.site-home--cf-v2 .hero__copy {
  padding-bottom: 168px;
}

.site-home--cf-v2 .hero-mail {
  position: absolute;
  z-index: 1;
  inset: auto 0 18px;
  height: 184px;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 24%, #000 100%);
}

.site-home--cf-v2 .hero-mail__defs {
  position: absolute;
  overflow: hidden;
}

.site-home--cf-v2 .hero-mail__envelope {
  --mail-alpha: .9;
  --mail-rest-rotate: 0deg;
  position: absolute;
  left: var(--mail-left);
  bottom: var(--mail-bottom);
  width: var(--mail-size);
  opacity: var(--mail-alpha);
  filter: drop-shadow(0 18px 22px rgba(78, 28, 7, .18));
  transform: translateX(-50%) translate3d(0, 0, 0) rotate(var(--mail-rest-rotate));
  transform-origin: center;
}

.site-home--cf-v2 .hero-mail__envelope svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.site-home--cf-v2 .hero-mail__paper {
  fill: rgba(255, 251, 245, .98);
}

.site-home--cf-v2 .hero-mail__pocket {
  fill: #f4ded0;
}

.site-home--cf-v2 .hero-mail__flap {
  fill: #fff7ee;
}

.site-home--cf-v2 .hero__surface.is-motion-active:not(.has-mail-arrived) .hero-mail__envelope {
  will-change: transform, opacity;
  animation: hero-mail-arrive var(--mail-arrive-duration) cubic-bezier(.2, .75, .25, 1) var(--mail-arrive-delay) both;
}

.site-home--cf-v2 .hero__surface.is-motion-active:not(.has-mail-rested) .hero-mail__envelope--2 svg {
  will-change: transform;
  animation: hero-mail-hover var(--mail-hover-duration) ease-in-out var(--mail-hover-delay) 2 alternate;
}

.site-home--cf-v2 .hero-mail__envelope--1 {
  --mail-left: 22%;
  --mail-bottom: 34px;
  --mail-size: 116px;
  --mail-alpha: .68;
  --mail-rest-rotate: -5deg;
  --mail-start-x: -320px;
  --mail-start-y: 46px;
  --mail-start-rotate: -13deg;
  --mail-arrive-duration: 980ms;
  --mail-arrive-delay: 160ms;
  --mail-hover-duration: 5.8s;
  --mail-hover-delay: 1.2s;
}

.site-home--cf-v2 .hero-mail__envelope--2 {
  --mail-left: 53%;
  --mail-bottom: 18px;
  --mail-size: 184px;
  --mail-alpha: .98;
  --mail-rest-rotate: 1.5deg;
  --mail-start-x: -390px;
  --mail-start-y: 52px;
  --mail-start-rotate: -10deg;
  --mail-arrive-duration: 1080ms;
  --mail-arrive-delay: 0ms;
  --mail-hover-duration: 6.4s;
  --mail-hover-delay: 1.1s;
}

.site-home--cf-v2 .hero-mail__envelope--3 {
  --mail-left: 82%;
  --mail-bottom: 46px;
  --mail-size: 92px;
  --mail-alpha: .54;
  --mail-rest-rotate: 7deg;
  --mail-start-x: 300px;
  --mail-start-y: 38px;
  --mail-start-rotate: 15deg;
  --mail-arrive-duration: 920ms;
  --mail-arrive-delay: 340ms;
  --mail-hover-duration: 5.2s;
  --mail-hover-delay: 1.3s;
}

@keyframes hero-mail-arrive {
  0% {
    opacity: 0;
    transform: translateX(-50%) translate3d(var(--mail-start-x), var(--mail-start-y), 0) rotate(var(--mail-start-rotate)) scale(.9);
  }
  68% {
    opacity: var(--mail-alpha);
    transform: translateX(-50%) translate3d(10px, -6px, 0) rotate(0deg) scale(1.02);
  }
  100% {
    opacity: var(--mail-alpha);
    transform: translateX(-50%) translate3d(0, 0, 0) rotate(var(--mail-rest-rotate)) scale(1);
  }
}

@keyframes hero-mail-hover {
  from { transform: translate3d(0, 0, 0) rotate(-.7deg); }
  to { transform: translate3d(0, -6px, 0) rotate(.7deg); }
}

@media (max-width: 63.999rem) {
  .site-home--cf-v2 .hero-mail {
    inset-block-end: 14px;
    height: 162px;
  }

  .site-home--cf-v2 .hero-mail__envelope--1 {
    --mail-left: 19%;
    --mail-size: 98px;
    --mail-start-x: -240px;
  }

  .site-home--cf-v2 .hero-mail__envelope--2 {
    --mail-left: 52%;
    --mail-size: 156px;
    --mail-start-x: -280px;
  }

  .site-home--cf-v2 .hero-mail__envelope--3 {
    --mail-left: 84%;
    --mail-size: 78px;
    --mail-start-x: 220px;
  }
}

@media (max-width: 47.999rem) {
  .site-home--cf-v2 .hero__surface {
    min-height: 720px;
  }

  .site-home--cf-v2 .hero__copy {
    padding-bottom: 138px;
  }

  .site-home--cf-v2 .hero-address {
    display: grid;
    width: min(21ch, 100%);
    margin: 5px auto 0;
    font-size: .9em;
    text-align: center;
    vertical-align: 0;
  }

  .site-home--cf-v2 .hero-mail {
    inset-block-end: 10px;
    height: 128px;
  }

  .site-home--cf-v2 .hero-mail__envelope--1 {
    --mail-left: 14%;
    --mail-bottom: 26px;
    --mail-size: 76px;
    --mail-start-x: -150px;
  }

  .site-home--cf-v2 .hero-mail__envelope--2 {
    --mail-left: 54%;
    --mail-bottom: 12px;
    --mail-size: 124px;
    --mail-start-x: -190px;
  }

  .site-home--cf-v2 .hero-mail__envelope--3 {
    --mail-left: 88%;
    --mail-bottom: 34px;
    --mail-size: 62px;
    --mail-start-x: 140px;
  }
}

@media (max-width: 25rem) {
  .site-home--cf-v2 .hero__surface {
    min-height: 740px;
  }

  .site-home--cf-v2 .hero-mail__envelope--1 {
    --mail-left: 11%;
    --mail-size: 64px;
  }

  .site-home--cf-v2 .hero-mail__envelope--2 {
    --mail-left: 55%;
    --mail-size: 108px;
  }

  .site-home--cf-v2 .hero-mail__envelope--3 {
    --mail-left: 91%;
    --mail-size: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-home--cf-v2 .hero-address__item {
    transition: none;
  }

  .site-home--cf-v2 .hero-address.is-address-ready .hero-address__item {
    opacity: 0;
    transform: none;
  }

  .site-home--cf-v2 .hero-address.is-address-ready .hero-address__item:first-child {
    opacity: 1;
  }

  .site-home--cf-v2 .hero__surface.is-motion-active .hero-mail__envelope,
  .site-home--cf-v2 .hero__surface.is-motion-active .hero-mail__envelope svg {
    animation: none;
    will-change: auto;
  }
}

@media (forced-colors: active) {
  .site-home--cf-v2 .hero-mail {
    display: none;
  }
}