/* Continuous homepage mail scene and fixed-width typing line. */

.site-home--cf-v2 .hero-address {
  width: 21ch;
  height: 1.4em;
  min-height: 1.4em;
  margin-block: .22em .18em;
  padding-inline-start: 1ch;
  overflow: visible;
  box-sizing: border-box;
  text-align: start;
}

.site-home--cf-v2 .hero-address__typing {
  display: inline-flex;
  grid-area: address;
  align-items: baseline;
  justify-self: start;
  min-width: 0;
  white-space: nowrap;
}

.site-home--cf-v2 .hero-address.is-typing-ready .hero-address__typing::after {
  content: "";
  width: 2px;
  height: .92em;
  margin-inline-start: .16ch;
  background: currentColor;
  transform: translateY(.08em);
  animation: hero-address-caret 720ms step-end infinite;
}

@keyframes hero-address-caret {
  0%, 46% { opacity: 1; }
  47%, 100% { opacity: 0; }
}

.site-home--cf-v2 .hero-mail {
  height: 202px;
}

.site-home--cf-v2 .hero-mail__envelope {
  filter: drop-shadow(0 14px 18px rgba(78, 28, 7, .16));
}

.site-home--cf-v2 .hero-mail__paper {
  fill: #fffbf5;
}

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

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

.site-home--cf-v2 .hero__surface.is-motion-ready .hero-mail .hero-mail__envelope {
  will-change: auto;
  animation-name: var(--mail-loop);
  animation-duration: var(--mail-loop-duration);
  animation-timing-function: linear;
  animation-delay: var(--mail-loop-delay);
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  animation-play-state: paused;
}

.site-home--cf-v2 .hero__surface.is-motion-ready .hero-mail .hero-mail__envelope svg {
  will-change: auto;
  animation: hero-mail-bob var(--mail-bob-duration) ease-in-out var(--mail-bob-delay) infinite alternate;
  animation-play-state: paused;
}

.site-home--cf-v2 .hero__surface.is-motion-ready.is-motion-active .hero-mail .hero-mail__envelope,
.site-home--cf-v2 .hero__surface.is-motion-ready.is-motion-active .hero-mail .hero-mail__envelope svg {
  animation-play-state: running;
  will-change: transform;
}

.site-home--cf-v2 .hero__surface.is-motion-ready.is-motion-active .hero-mail .hero-mail__envelope {
  will-change: transform, opacity;
}

.site-home--cf-v2 .hero-mail__envelope--1 {
  --mail-left: 20%;
  --mail-bottom: 58px;
  --mail-size: 82px;
  --mail-alpha: .74;
  --mail-rest-rotate: -5deg;
  --mail-loop: hero-mail-cross-right;
  --mail-loop-duration: 13.6s;
  --mail-loop-delay: -1.8s;
  --mail-bob-duration: 2.7s;
  --mail-bob-delay: -.7s;
}

.site-home--cf-v2 .hero-mail__envelope--2 {
  --mail-left: 78%;
  --mail-bottom: 20px;
  --mail-size: 116px;
  --mail-alpha: .92;
  --mail-rest-rotate: 5deg;
  --mail-loop: hero-mail-cross-left;
  --mail-loop-duration: 16.2s;
  --mail-loop-delay: -9.6s;
  --mail-bob-duration: 3.4s;
  --mail-bob-delay: -1.8s;
}

.site-home--cf-v2 .hero-mail__envelope--3 {
  --mail-left: 12%;
  --mail-bottom: 4px;
  --mail-size: 58px;
  --mail-alpha: .6;
  --mail-rest-rotate: -8deg;
  --mail-loop: hero-mail-cross-right-low;
  --mail-loop-duration: 11.8s;
  --mail-loop-delay: -7.2s;
  --mail-bob-duration: 2.3s;
  --mail-bob-delay: -.4s;
}

.site-home--cf-v2 .hero-mail__envelope--4 {
  --mail-left: 88%;
  --mail-bottom: 82px;
  --mail-size: 68px;
  --mail-alpha: .66;
  --mail-rest-rotate: 7deg;
  --mail-loop: hero-mail-cross-left-high;
  --mail-loop-duration: 14.7s;
  --mail-loop-delay: -4.1s;
  --mail-bob-duration: 2.9s;
  --mail-bob-delay: -2.1s;
}

.site-home--cf-v2 .hero-mail__envelope--5 {
  --mail-left: 42%;
  --mail-bottom: 20px;
  --mail-size: 94px;
  --mail-alpha: .82;
  --mail-rest-rotate: 2deg;
  --mail-loop: hero-mail-rise;
  --mail-loop-duration: 12.9s;
  --mail-loop-delay: -11.1s;
  --mail-bob-duration: 3.1s;
  --mail-bob-delay: -1.2s;
}

@keyframes hero-mail-cross-right {
  0% {
    opacity: 0;
    transform: translateX(-50%) translate3d(-40vw, 36px, 0) rotate(-10deg) scale(.9);
  }
  18% { opacity: var(--mail-alpha); }
  48% {
    opacity: var(--mail-alpha);
    transform: translateX(-50%) translate3d(38vw, -8px, 0) rotate(2deg) scale(1);
  }
  56% { opacity: 0; }
  100% {
    opacity: 0;
    transform: translateX(-50%) translate3d(110vw, -54px, 0) rotate(8deg) scale(.94);
  }
}

@keyframes hero-mail-cross-right-low {
  0% {
    opacity: 0;
    transform: translateX(-50%) translate3d(-30vw, 18px, 0) rotate(-6deg) scale(.86);
  }
  18% { opacity: var(--mail-alpha); }
  52% {
    opacity: var(--mail-alpha);
    transform: translateX(-50%) translate3d(48vw, -36px, 0) rotate(4deg) scale(1);
  }
  58% { opacity: 0; }
  100% {
    opacity: 0;
    transform: translateX(-50%) translate3d(120vw, -10px, 0) rotate(-4deg) scale(.92);
  }
}

@keyframes hero-mail-cross-left {
  0% {
    opacity: 0;
    transform: translateX(-50%) translate3d(40vw, 30px, 0) rotate(10deg) scale(.9);
  }
  18% { opacity: var(--mail-alpha); }
  50% {
    opacity: var(--mail-alpha);
    transform: translateX(-50%) translate3d(-30vw, -22px, 0) rotate(-3deg) scale(1);
  }
  58% { opacity: 0; }
  100% {
    opacity: 0;
    transform: translateX(-50%) translate3d(-100vw, -62px, 0) rotate(-9deg) scale(.94);
  }
}

@keyframes hero-mail-cross-left-high {
  0% {
    opacity: 0;
    transform: translateX(-50%) translate3d(32vw, 16px, 0) rotate(7deg) scale(.88);
  }
  18% { opacity: var(--mail-alpha); }
  47% {
    opacity: var(--mail-alpha);
    transform: translateX(-50%) translate3d(-38vw, 22px, 0) rotate(-4deg) scale(1);
  }
  56% { opacity: 0; }
  100% {
    opacity: 0;
    transform: translateX(-50%) translate3d(-112vw, -34px, 0) rotate(-7deg) scale(.93);
  }
}

@keyframes hero-mail-rise {
  0% {
    opacity: 0;
    transform: translateX(-50%) translate3d(-10vw, 140px, 0) rotate(-8deg) scale(.86);
  }
  18% { opacity: var(--mail-alpha); }
  50% {
    opacity: var(--mail-alpha);
    transform: translateX(-50%) translate3d(9vw, -20px, 0) rotate(5deg) scale(1);
  }
  58% { opacity: 0; }
  100% {
    opacity: 0;
    transform: translateX(-50%) translate3d(-7vw, -230px, 0) rotate(-5deg) scale(.92);
  }
}

@keyframes hero-mail-bob {
  from { transform: translate3d(0, -4px, 0) rotate(-1.6deg); }
  to { transform: translate3d(0, 7px, 0) rotate(1.6deg); }
}

@media (max-width: 63.999rem) {
  .site-home--cf-v2 .hero-mail__envelope--1 { --mail-size: 72px; }
  .site-home--cf-v2 .hero-mail__envelope--2 { --mail-size: 98px; }
  .site-home--cf-v2 .hero-mail__envelope--3 { --mail-size: 52px; }
  .site-home--cf-v2 .hero-mail__envelope--4 { --mail-size: 60px; }
  .site-home--cf-v2 .hero-mail__envelope--5 { --mail-size: 82px; }
}

@media (max-width: 47.999rem) {
  .site-home--cf-v2 .hero-address {
    width: 21ch;
    margin-block: .25em .2em;
    font-size: 1rem;
    text-align: start;
  }

  .site-home--cf-v2 .hero-mail {
    height: 142px;
  }

  .site-home--cf-v2 .hero-mail__envelope--1 {
    --mail-bottom: 42px;
    --mail-size: 56px;
  }

  .site-home--cf-v2 .hero-mail__envelope--2 {
    --mail-bottom: 12px;
    --mail-size: 76px;
  }

  .site-home--cf-v2 .hero-mail__envelope--3 {
    --mail-size: 42px;
  }

  .site-home--cf-v2 .hero-mail__envelope--4 {
    --mail-bottom: 58px;
    --mail-size: 48px;
  }

  .site-home--cf-v2 .hero-mail__envelope--5 {
    --mail-size: 64px;
  }
}

.site-home--cf-v2 .hero-motion-toggle {
  position: absolute;
  z-index: 4;
  inset: 18px 18px auto auto;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(42, 21, 13, .28);
  border-radius: 50%;
  color: #2a150d;
  background: rgba(255, 251, 245, .38);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.site-home--cf-v2 .hero-motion-toggle[hidden] {
  display: none;
}

.site-home--cf-v2 .hero-motion-toggle:hover {
  border-color: rgba(42, 21, 13, .48);
  background: rgba(255, 251, 245, .7);
}

.site-home--cf-v2 .hero-motion-toggle:focus-visible {
  outline: 3px solid #151414;
  outline-offset: 3px;
}

.site-home--cf-v2 .hero-motion-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-home--cf-v2 .hero-motion-toggle__play {
  display: none;
  fill: currentColor;
  stroke: none;
}

.site-home--cf-v2 .hero-motion-toggle[aria-pressed="true"] .hero-motion-toggle__pause {
  display: none;
}

.site-home--cf-v2 .hero-motion-toggle[aria-pressed="true"] .hero-motion-toggle__play {
  display: block;
}

@media (max-width: 25rem) {
  .site-home--cf-v2 .hero-mail__envelope--3,
  .site-home--cf-v2 .hero-mail__envelope--4 {
    display: none;
  }
}

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

  .site-home--cf-v2 .hero-address.is-typing-ready .hero-address__typing::after {
    display: none;
    animation: none;
  }

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

  .site-home--cf-v2 .hero-mail__envelope--1 {
    --mail-left: 20%;
    --mail-bottom: 32px;
  }

  .site-home--cf-v2 .hero-mail__envelope--2 {
    --mail-left: 51%;
    --mail-bottom: 16px;
  }

  .site-home--cf-v2 .hero-mail__envelope--3 {
    --mail-left: 82%;
    --mail-bottom: 38px;
  }

  .site-home--cf-v2 .hero-mail__envelope--4,
  .site-home--cf-v2 .hero-mail__envelope--5 {
    display: none;
  }
}