/* Peabud website. Colours are the Pea theme's Material 3 roles
   (lib/core/theme/themes/pea.dart, ColorScheme.fromSeed #86B04A, tonal spot,
   pea-cream overrides). Light and dark follow the phone or computer. */

@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito-bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --primary: #4d662a;
  --on-primary: #ffffff;
  --primary-container: #cfeda2;
  --on-primary-container: #364e14;
  --secondary-container: #dce7c7;
  --on-secondary-container: #414a33;
  --tertiary-container: #bcece6;
  --on-tertiary-container: #1f4e4a;
  --error: #ba1a1a;
  --surface: #f9f4e1;
  --surface-lowest: #ffffff;
  --surface-low: #fff9e7;
  --surface-container: #f3eedb;
  --surface-high: #ede8d6;
  --on-surface: #1d1c11;
  --on-surface-variant: #4c4732;
  --outline: #7d7760;
  --outline-variant: #cec6ab;
  --inverse-surface: #333124;
  --on-inverse-surface: #f6f1de;
  --inverse-primary: #b3d088;

  --font: "Nunito", ui-rounded, system-ui, sans-serif;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --measure: 68ch;
  --r-field: 16px;
  --r-card: 20px;
  --r-hero: 28px;
  --r-pod: 48px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #b3d088;
    --on-primary: #213600;
    --primary-container: #364e14;
    --on-primary-container: #cfeda2;
    --secondary-container: #414a33;
    --on-secondary-container: #dce7c7;
    --tertiary-container: #1f4e4a;
    --on-tertiary-container: #bcece6;
    --error: #ffb4ab;
    --surface: #151409;
    --surface-lowest: #100e05;
    --surface-low: #1d1c11;
    --surface-container: #212014;
    --surface-high: #2c2a1e;
    --on-surface: #e8e2d0;
    --on-surface-variant: #cec6ab;
    --outline: #979178;
    --outline-variant: #4c4732;
    --inverse-surface: #e8e2d0;
    --on-inverse-surface: #333124;
    --inverse-primary: #4d662a;
  }
}

/* ---- Base ------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--outline) var(--surface);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface);
  font: 400 1.0625rem/1.6 var(--font);
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body > main {
  flex: 1 0 auto;
}

::selection {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

img,
svg {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

p,
ul,
ol,
dl {
  margin: 0;
}

p,
li {
  text-wrap: pretty;
}

a {
  color: var(--primary);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.2em;
  border-radius: 4px;
}

a:hover {
  text-decoration-thickness: 0.14em;
}

:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
}

strong {
  font-weight: 700;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 0.75rem 1.25rem;
  background: var(--inverse-surface);
  color: var(--on-inverse-surface);
  font-weight: 700;
  border-radius: 999px;
  text-decoration: none;
}

.skip:focus {
  top: 0.75rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.wrap {
  width: min(100% - 2 * var(--gutter), 72rem);
  margin-inline: auto;
}

/* Day and night art: one of each pair shows. */
.night-only {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .day-only {
    display: none;
  }
  .night-only {
    display: block;
  }
}

/* ---- Header and footer ------------------------------------------------ */

.site-header {
  padding-block: 1rem;
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 48px;
  color: var(--on-surface);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand img {
  width: 40px;
  height: 40px;
  border-radius: 12px;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 1rem;
  color: var(--on-surface-variant);
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  transition: background-color 150ms ease, color 150ms ease;
}

.site-nav a:hover {
  background: var(--surface-container);
  color: var(--on-surface);
}

.site-nav a[aria-current="page"] {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.site-footer {
  margin-top: clamp(4rem, 10vw, 7rem);
  padding-block: 2.5rem 3rem;
  background: var(--surface-container);
  color: var(--on-surface-variant);
  font-size: 0.9375rem;
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding: 0;
  list-style: none;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--on-surface);
  font-weight: 500;
}

/* ---- Store badges (placeholders until the listings exist) ------------- */

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

.store {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-width: 11.5rem;
  min-height: 60px;
  padding: 0.5rem 1.5rem;
  border: 2px dashed var(--outline);
  border-radius: 999px;
  color: var(--on-surface);
  line-height: 1.2;
}

.store small {
  color: var(--on-surface-variant);
  font-size: 0.8125rem;
  font-weight: 500;
}

.store span {
  font-size: 1.125rem;
  font-weight: 700;
}

/* ---- Home: hero ------------------------------------------------------- */

.hero {
  padding-block: clamp(1.5rem, 5vw, 4rem) clamp(2rem, 6vw, 5rem);
}

.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}

.hero h1 {
  font-size: clamp(2.375rem, 1.4rem + 4.2vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

.hero h1 em {
  font-style: normal;
  color: var(--primary);
}

.hero .lede {
  margin-top: 1.25rem;
  max-width: 34ch;
  color: var(--on-surface-variant);
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem);
}

.hero .stores {
  margin-top: 2rem;
}

.hero-note {
  margin-top: 0.875rem;
  color: var(--on-surface-variant);
  font-size: 0.9375rem;
}

.pod-stage {
  position: relative;
  justify-self: center;
  width: min(100%, 34rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface-container);
  /* The peas fall out of the pod but stay inside the disc. */
  overflow: clip;
}

.pod-art {
  position: absolute;
  inset: 4%;
  width: 92%;
  height: 92%;
  overflow: visible;
}

.pod-art--night {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .pod-art--day {
    display: none;
  }
  .pod-art--night {
    display: block;
  }
}

.pod-art g {
  transform-box: fill-box;
}

.pod-art .pod-front {
  transform-origin: 100% 0%;
}

.pod-art .bud {
  transform-origin: 50% 100%;
}

.pod-art .pea {
  transform-origin: 50% 50%;
}

/* ---- Home: the four pods --------------------------------------------- */

.pods {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.pods-intro {
  max-width: 40rem;
  margin-bottom: clamp(0.5rem, 2vw, 1.5rem);
}

.pods-intro h2 {
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
}

.pods-intro p {
  margin-top: 1rem;
  color: var(--on-surface-variant);
  font-size: 1.1875rem;
}

.pod {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding: clamp(1.75rem, 5vw, 4rem);
  border-radius: var(--r-pod);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.pod:nth-of-type(even) {
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.pod:nth-of-type(even) .pod-text {
  order: 2;
}

.pod-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pod-pea {
  display: block;
  flex: none;
  width: 72px;
  height: 72px;
}

.pod-pea img {
  width: 100%;
  height: 100%;
}

.pod h2 {
  font-size: clamp(1.75rem, 1.25rem + 2vw, 2.625rem);
}

.pod-lede {
  margin-top: 1rem;
  max-width: 38ch;
  font-size: 1.1875rem;
}

.peas {
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
}

.peas li {
  position: relative;
  padding-left: 2.25rem;
  max-width: var(--measure);
}

/* Each feature is a pea on the vine: a round mark in the pod's colour. */
.peas li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--primary) 55%, #ffffff) 0 18%, var(--primary) 60%);
}

.peas h3 {
  font-size: 1.1875rem;
  letter-spacing: -0.01em;
}

.peas p {
  margin-top: 0.25rem;
}

.pod a {
  color: inherit;
  font-weight: 700;
}

.pod-more {
  margin-top: 2rem;
}

.pod-more a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.pod-media {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  margin: 0;
}

.pod-media figcaption {
  max-width: 28ch;
  font-size: 0.875rem;
  text-align: center;
  opacity: 0.9;
}

.screen {
  width: 100%;
  max-width: 18rem;
  height: auto;
  border-radius: var(--r-hero);
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.35);
}

/* On dark pods a shadow disappears; an edge separates the screen instead. */
@media (prefers-color-scheme: dark) {
  .screen {
    box-shadow: none;
    outline: 1px solid var(--outline-variant);
    outline-offset: -1px;
  }
}

.screen-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
}

.screen-pair .screen {
  max-width: none;
}

.screen-pair picture:last-child {
  margin-top: 2.5rem;
}

/* ---- Home: closing ---------------------------------------------------- */

.closing {
  margin-top: clamp(3rem, 8vw, 6rem);
  text-align: center;
}

.closing img {
  width: 140px;
  height: 140px;
  margin: 0 auto 1.25rem;
}

.closing h2 {
  font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem);
}

.closing p {
  max-width: 40ch;
  margin: 1rem auto 0;
  color: var(--on-surface-variant);
  font-size: 1.1875rem;
}

.closing .stores {
  justify-content: center;
  margin-top: 2rem;
}

/* ---- Reading pages: privacy, deletion, support, 404 -------------------- */

.doc {
  padding-block: clamp(1.5rem, 5vw, 3.5rem) 0;
}

.doc-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.5rem;
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.doc-head h1 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  letter-spacing: -0.03em;
}

.doc-head p {
  margin-top: 1rem;
  max-width: 46ch;
  color: var(--on-surface-variant);
  font-size: 1.1875rem;
}

.doc-head img {
  width: clamp(88px, 14vw, 140px);
  height: auto;
}

.doc-body {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 5vw, 4rem);
}

.doc-body--single {
  grid-template-columns: minmax(0, 1fr);
}

.toc {
  position: sticky;
  top: 1.5rem;
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  border-radius: var(--r-card);
  background: var(--surface-container);
  font-size: 0.9375rem;
}

.toc h2 {
  font-size: 1rem;
  letter-spacing: 0;
}

.toc ol {
  display: grid;
  gap: 0.125rem;
  margin-top: 0.5rem;
  padding-left: 1.125rem;
}

.toc a {
  display: inline-block;
  padding-block: 0.375rem;
  color: var(--on-surface);
  text-decoration: none;
}

.toc a:hover {
  color: var(--primary);
  text-decoration: underline;
}

.prose {
  max-width: var(--measure);
}

.prose > * + * {
  margin-top: 1rem;
}

.prose h2 {
  margin-top: 3rem;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  scroll-margin-top: 1.5rem;
}

.prose h3 {
  margin-top: 2rem;
  font-size: 1.25rem;
  scroll-margin-top: 1.5rem;
}

.prose h2 + *,
.prose h3 + * {
  margin-top: 0.75rem;
}

.prose > :first-child {
  margin-top: 0;
}

.prose ul,
.prose ol {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.5rem;
}

.prose li::marker {
  color: var(--primary);
}

.prose .table-scroll {
  overflow-x: auto;
  border-radius: var(--r-card);
  background: var(--surface-low);
  outline: 1px solid var(--outline-variant);
  outline-offset: -1px;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

/* Three columns need room; the region scrolls sideways on small phones. */
.prose table.wide {
  min-width: 34rem;
}

.prose caption {
  padding: 1rem 1rem 0;
  font-weight: 700;
  text-align: left;
}

.prose th,
.prose td {
  padding: 0.75rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--outline-variant);
}

.prose tr:last-child > * {
  border-bottom: 0;
}

.prose tbody td:first-child {
  min-width: 9rem;
  font-weight: 700;
}

.prose thead th {
  color: var(--on-surface-variant);
  font-weight: 700;
}

/* A notice: a tonal block with a heading, never a coloured side stripe. */
.notice {
  padding: 1.25rem 1.5rem;
  border-radius: var(--r-card);
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.notice h2,
.notice h3,
.notice p.notice-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
}

.notice > * + * {
  margin-top: 0.5rem;
}

.notice a {
  color: inherit;
  font-weight: 700;
}

.steps {
  counter-reset: step;
  list-style: none;
  padding-left: 0 !important;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding-left: 3rem;
  min-height: 2.25rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  font-size: 1rem;
}

.path {
  font-weight: 700;
}

.email-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 1.5rem;
  border-radius: var(--r-hero);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 1.75rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  font-size: 1.0625rem;
  text-decoration: none;
  transition: border-radius 200ms var(--ease-out), background-color 150ms ease;
}

.button:hover {
  background: color-mix(in srgb, var(--primary) 88%, var(--on-primary));
  text-decoration: none;
}

.button:active {
  border-radius: 12px;
}

.email-cta p {
  flex: 1 1 16rem;
}

.faq {
  display: grid;
  gap: 0.5rem;
}

.faq details {
  border-radius: var(--r-card);
  background: var(--surface-container);
}

.faq details[open] {
  background: var(--surface-low);
  outline: 1px solid var(--outline-variant);
  outline-offset: -1px;
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 0.875rem 1.25rem;
  font-weight: 700;
  font-size: 1.125rem;
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-card);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.25rem;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 200ms var(--ease-out);
}

.faq details[open] summary::after {
  transform: translateY(25%) rotate(-135deg);
}

.faq .answer {
  padding: 0 1.25rem 1.25rem;
}

.faq .answer > * + * {
  margin-top: 0.75rem;
}

.lost {
  display: grid;
  justify-items: center;
  gap: 1.25rem;
  padding-block: clamp(2rem, 8vw, 5rem) 0;
  text-align: center;
}

.lost img {
  width: 180px;
  height: 180px;
}

.lost h1 {
  font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
  letter-spacing: -0.03em;
}

.lost p {
  max-width: 38ch;
  color: var(--on-surface-variant);
  font-size: 1.1875rem;
}

/* ---- Narrow screens --------------------------------------------------- */

@media (max-width: 60rem) {
  .doc-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .toc {
    position: static;
  }
}

@media (max-width: 52rem) {
  .hero .wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  .pod-stage {
    width: min(100%, 24rem);
  }
  .pod,
  .pod:nth-of-type(even) {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 36px;
  }
  .pod:nth-of-type(even) .pod-text {
    order: 0;
  }
  .doc-head img {
    display: none;
  }
  .doc-head {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 26rem) {
  .pod {
    padding: 1.5rem 1.25rem 1.75rem;
    border-radius: 28px;
  }
  .pod-pea {
    width: 56px;
    height: 56px;
  }
  .store {
    width: 100%;
  }
  .stores {
    width: 100%;
  }
  .site-nav a {
    padding: 0 0.75rem;
  }
}

/* ---- The pod opens as you scroll -------------------------------------
   Scroll-driven animation, CSS only. Browsers without scroll timelines and
   people who ask for reduced motion see the pod at rest, closed, and every
   pea already in its place. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .pod-art .pod-front,
    .pod-art .bud,
    .pod-art .pea {
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root);
      animation-range: 0 70vh;
    }

    .pod-art .pod-front {
      animation-name: pod-open;
    }
    .pod-art .bud {
      animation-name: bud-rise;
    }
    .pod-art .pea-1 {
      animation-name: pea-out-1;
    }
    .pod-art .pea-2 {
      animation-name: pea-out-2;
    }
    .pod-art .pea-3 {
      animation-name: pea-out-3;
    }
    .pod-art .pea-4 {
      animation-name: pea-out-4;
    }

    /* Each pod's pea rolls in from the side and lands at the pod's head. */
    .pod-pea {
      animation: pea-roll-in linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }
    .pod:nth-of-type(even) .pod-pea {
      animation-name: pea-roll-in-right;
    }

    /* Stacked layouts put the pod below the fold: open it as it passes
       through the screen instead of from the top of the page. */
    @media (max-width: 52rem) {
      .pod-stage {
        view-timeline: --pod block;
      }
      .pod-art .pod-front,
      .pod-art .bud,
      .pod-art .pea {
        animation-timeline: --pod;
        animation-range: cover 40% cover 90%;
      }
    }
  }
}

@keyframes pod-open {
  0% {
    transform: none;
  }
  45% {
    transform: translateY(6px) rotate(10deg);
  }
  100% {
    transform: translateY(14px) rotate(16deg);
  }
}

@keyframes bud-rise {
  0% {
    transform: none;
  }
  40% {
    transform: translateY(-20px) scaleY(1.04);
  }
  55% {
    transform: translateY(-24px) scale(1.03, 0.98);
  }
  100% {
    transform: translateY(-18px);
  }
}

@keyframes pea-out-1 {
  0%,
  10% {
    transform: none;
    opacity: 1;
  }
  45% {
    transform: translate(-14px, -46px) rotate(-120deg);
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate(-60px, 160px) rotate(-400deg);
    opacity: 0;
  }
}

@keyframes pea-out-2 {
  0%,
  18% {
    transform: none;
    opacity: 1;
  }
  52% {
    transform: translate(-22px, -58px) rotate(-150deg);
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate(-30px, 190px) rotate(-420deg);
    opacity: 0;
  }
}

@keyframes pea-out-3 {
  0%,
  14% {
    transform: none;
    opacity: 1;
  }
  50% {
    transform: translate(22px, -58px) rotate(150deg);
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate(30px, 190px) rotate(420deg);
    opacity: 0;
  }
}

@keyframes pea-out-4 {
  0%,
  6% {
    transform: none;
    opacity: 1;
  }
  42% {
    transform: translate(14px, -46px) rotate(120deg);
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translate(60px, 160px) rotate(400deg);
    opacity: 0;
  }
}

@keyframes pea-roll-in {
  from {
    transform: translateX(-8rem) rotate(-400deg);
  }
  to {
    transform: none;
  }
}

@keyframes pea-roll-in-right {
  from {
    transform: translateX(8rem) rotate(400deg);
  }
  to {
    transform: none;
  }
}