@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&family=VT323&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'IBM Plex Mono', monospace;
  color: #2a2520;
  background-color: #ede4d3;
  line-height: 1.75;
  font-size: 1.05rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Paper grain texture via SVG filter */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
  opacity: 0.4;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
}

a {
  color: #2a2520;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Attractor canvas background */
#laniakea-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Layout */
.container {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem 2rem;
}

/* Homepage */
h1 {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

.centered {
  text-align: center;
}

.nav-links {
  margin-bottom: 2.5rem;
  font-size: 1.1rem;
  line-height: 2.4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 2.5rem;
}

.inline-emoji {
  height: 1.2em;
  width: auto;
  max-height: 1.2em;
  max-width: 1.2em;
  vertical-align: -7px;
  display: inline-block;
}

.bio-section {
  margin-bottom: 2.5rem;
}

.bio {
  background-color: #fff;
  border: 2px solid #2a2520;
  padding: 1.5rem;
  border-radius: 4px;
  margin-bottom: 1.5rem;
}

.bio p {
  margin-bottom: 0;
  max-width: 680px;
}

.bio-photo {
  margin-bottom: 0;
}

.bio-photo img {
  max-width: 280px;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.contact {
  margin-top: 3rem;
  margin-bottom: 10rem;
}

.contact a {
  display: inline-block;
}

/* Back link on subpages */
.back-link {
  display: inline-block;
  margin-bottom: 2rem;
  font-size: 0.95rem;
  color: #6b6058;
}

.back-link:hover {
  color: #2a2520;
}

/* Page headings */
h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

/* Items (research/projects) */
.item {
  margin-bottom: 2.5rem;
}

.item h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.item p {
  color: #4a4340;
  max-width: 680px;
}

/* Responsive */
@media (max-width: 600px) {
  .container {
    padding: 2.5rem 1.25rem;
  }

  h1 {
    font-size: 1.8rem;
  }

  h2 {
    font-size: 1.5rem;
  }
}

/* ===================================================
   PIXEL ART GARDEN
   "welcome to my OFFICE (it's a garden and I work here)"
   =================================================== */

.pixel-garden {
  /* "I planted this garden myself. with CSS. I'm very proud." */
  position: relative;
  width: 100%;
  height: 120px;
  overflow: hidden;
  margin-top: auto;
}

/* --- Flower Beds (box-shadow pixel art) --- */

.flower-bed {
  position: absolute;
  bottom: -32px;
}

.flower-bed-left {
  /* "my purple babies. I water them with mass-produced tears of joy" */
  left: 0px;
}

.flower-bed-right {
  /* "the cyan zone. very exclusive. bees only." */
  right: 0px;
}

/* Left flower bed: 5 purple/lavender flowers */
.flower-bed-left::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: transparent;
  /* "mmm this purple one smells like lavender bubble bath" */
  box-shadow:
    /* Flower 1 — left purple bloom */
    0px -56px 0 0 #9370db,
    4px -60px 0 0 #b19cd9,
    -4px -60px 0 0 #b19cd9,
    0px -64px 0 0 #9370db,
    4px -56px 0 0 #b19cd9,
    -4px -56px 0 0 #b19cd9,
    0px -52px 0 0 #ffdb58,
    /* Stem 1 */
    0px -48px 0 0 #3a7d44,
    0px -44px 0 0 #3a7d44,
    0px -40px 0 0 #3a7d44,
    0px -36px 0 0 #3a7d44,
    0px -32px 0 0 #3a7d44,
    4px -40px 0 0 #4a9e54,
    -4px -36px 0 0 #4a9e54,

    /* Flower 1a — extra purple bloom */
    20px -44px 0 0 #9370db,
    24px -48px 0 0 #b19cd9,
    16px -48px 0 0 #b19cd9,
    20px -52px 0 0 #9370db,
    24px -44px 0 0 #b19cd9,
    16px -44px 0 0 #b19cd9,
    20px -40px 0 0 #ffdb58,
    /* Stem 1a */
    20px -36px 0 0 #3a7d44,
    20px -32px 0 0 #3a7d44,
    24px -32px 0 0 #4a9e54,

    /* Flower 2 — middle purple bloom */
    40px -68px 0 0 #9370db,
    44px -72px 0 0 #b19cd9,
    36px -72px 0 0 #b19cd9,
    40px -76px 0 0 #9370db,
    44px -68px 0 0 #b19cd9,
    36px -68px 0 0 #b19cd9,
    40px -64px 0 0 #ffdb58,
    /* Stem 2 */
    40px -60px 0 0 #3a7d44,
    40px -56px 0 0 #3a7d44,
    40px -52px 0 0 #3a7d44,
    40px -48px 0 0 #3a7d44,
    40px -44px 0 0 #3a7d44,
    40px -40px 0 0 #3a7d44,
    40px -36px 0 0 #3a7d44,
    40px -32px 0 0 #3a7d44,
    44px -52px 0 0 #4a9e54,
    36px -44px 0 0 #4a9e54,

    /* Flower 3a — extra purple bloom */
    60px -52px 0 0 #9370db,
    64px -56px 0 0 #b19cd9,
    56px -56px 0 0 #b19cd9,
    60px -60px 0 0 #9370db,
    64px -52px 0 0 #b19cd9,
    56px -52px 0 0 #b19cd9,
    60px -48px 0 0 #ffdb58,
    /* Stem 3a */
    60px -44px 0 0 #3a7d44,
    60px -40px 0 0 #3a7d44,
    60px -36px 0 0 #3a7d44,
    60px -32px 0 0 #3a7d44,
    64px -40px 0 0 #4a9e54,
    56px -36px 0 0 #4a9e54,

    /* Flower 4 — right purple bloom */
    80px -48px 0 0 #9370db,
    84px -52px 0 0 #b19cd9,
    76px -52px 0 0 #b19cd9,
    80px -56px 0 0 #9370db,
    84px -48px 0 0 #b19cd9,
    76px -48px 0 0 #b19cd9,
    80px -44px 0 0 #ffdb58,
    /* Stem 3 */
    80px -40px 0 0 #3a7d44,
    80px -36px 0 0 #3a7d44,
    80px -32px 0 0 #3a7d44,
    84px -36px 0 0 #4a9e54;
}

/* Left flower bed grass */
.flower-bed-left::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  box-shadow:
    /* Grass tufts around flowers */
    -8px -32px 0 0 #4a9e54,
    -8px -36px 0 0 #6ab85c,
    8px -32px 0 0 #3a7d44,
    12px -32px 0 0 #6ab85c,
    12px -36px 0 0 #4a9e54,
    24px -32px 0 0 #4a9e54,
    24px -36px 0 0 #3a7d44,
    32px -32px 0 0 #6ab85c,
    48px -32px 0 0 #4a9e54,
    48px -36px 0 0 #6ab85c,
    56px -32px 0 0 #3a7d44,
    64px -32px 0 0 #6ab85c,
    64px -36px 0 0 #4a9e54,
    72px -32px 0 0 #4a9e54,
    88px -32px 0 0 #6ab85c,
    88px -36px 0 0 #3a7d44;
}

/* Right flower bed: 5 cyan/ladyslipper flowers — mirrored X offsets */
.flower-bed-right::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: transparent;
  /* "ooh the cyan ones are ZESTY today" */
  box-shadow:
    /* Flower 1 — far right cyan bloom (was X=0, now X=0 from right origin) */
    0px -48px 0 0 #40e0d0,
    -4px -52px 0 0 #5fd8c8,
    4px -52px 0 0 #5fd8c8,
    0px -56px 0 0 #40e0d0,
    -4px -48px 0 0 #5fd8c8,
    4px -48px 0 0 #5fd8c8,
    0px -44px 0 0 #ffdb58,
    /* Stem 1 */
    0px -40px 0 0 #3a7d44,
    0px -36px 0 0 #3a7d44,
    0px -32px 0 0 #3a7d44,
    -4px -36px 0 0 #4a9e54,

    /* Flower 1a — extra cyan bloom (X=-18) */
    -18px -40px 0 0 #40e0d0,
    -22px -44px 0 0 #5fd8c8,
    -14px -44px 0 0 #5fd8c8,
    -18px -48px 0 0 #40e0d0,
    -22px -40px 0 0 #5fd8c8,
    -14px -40px 0 0 #5fd8c8,
    -18px -36px 0 0 #ffdb58,
    /* Stem 1a */
    -18px -32px 0 0 #3a7d44,
    -14px -32px 0 0 #4a9e54,

    /* Flower 2 — center-right cyan bloom (was X=36, now X=-36) */
    -36px -64px 0 0 #40e0d0,
    -40px -68px 0 0 #5fd8c8,
    -32px -68px 0 0 #5fd8c8,
    -36px -72px 0 0 #40e0d0,
    -40px -64px 0 0 #5fd8c8,
    -32px -64px 0 0 #5fd8c8,
    -36px -60px 0 0 #ffdb58,
    /* Stem 2 */
    -36px -56px 0 0 #3a7d44,
    -36px -52px 0 0 #3a7d44,
    -36px -48px 0 0 #3a7d44,
    -36px -44px 0 0 #3a7d44,
    -36px -40px 0 0 #3a7d44,
    -36px -36px 0 0 #3a7d44,
    -36px -32px 0 0 #3a7d44,
    -40px -48px 0 0 #4a9e54,
    -32px -40px 0 0 #4a9e54,

    /* Flower 2a — extra cyan bloom (X=-50) */
    -50px -48px 0 0 #40e0d0,
    -54px -52px 0 0 #5fd8c8,
    -46px -52px 0 0 #5fd8c8,
    -50px -56px 0 0 #40e0d0,
    -54px -48px 0 0 #5fd8c8,
    -46px -48px 0 0 #5fd8c8,
    -50px -44px 0 0 #ffdb58,
    /* Stem 2a */
    -50px -40px 0 0 #3a7d44,
    -50px -36px 0 0 #3a7d44,
    -50px -32px 0 0 #3a7d44,
    -46px -36px 0 0 #4a9e54,

    /* Flower 3 — inner cyan bloom (was X=68, now X=-68) */
    -68px -56px 0 0 #40e0d0,
    -72px -60px 0 0 #5fd8c8,
    -64px -60px 0 0 #5fd8c8,
    -68px -64px 0 0 #40e0d0,
    -72px -56px 0 0 #5fd8c8,
    -64px -56px 0 0 #5fd8c8,
    -68px -52px 0 0 #ffdb58,
    /* Stem 3 */
    -68px -48px 0 0 #3a7d44,
    -68px -44px 0 0 #3a7d44,
    -68px -40px 0 0 #3a7d44,
    -68px -36px 0 0 #3a7d44,
    -68px -32px 0 0 #3a7d44,
    -72px -44px 0 0 #4a9e54,
    -64px -36px 0 0 #4a9e54;
}

/* Right flower bed grass — mirrored X offsets */
.flower-bed-right::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  box-shadow:
    /* Grass tufts around flowers */
    8px -32px 0 0 #6ab85c,
    4px -32px 0 0 #4a9e54,
    -8px -32px 0 0 #3a7d44,
    -8px -36px 0 0 #6ab85c,
    -16px -32px 0 0 #4a9e54,
    -28px -32px 0 0 #6ab85c,
    -28px -36px 0 0 #3a7d44,
    -44px -32px 0 0 #4a9e54,
    -52px -32px 0 0 #6ab85c,
    -52px -36px 0 0 #4a9e54,
    -60px -32px 0 0 #3a7d44,
    -76px -32px 0 0 #6ab85c,
    -84px -32px 0 0 #4a9e54,
    -84px -36px 0 0 #6ab85c;
}

/* --- Orange Flower Bed (left side, projects page) --- */
/* "the citrus grove. vitamin C for your eyes." */

.flower-bed-orange {
  left: 0px;
}

.flower-bed-orange::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: transparent;
  /* "tangerine dreams in pixel form" */
  box-shadow:
    /* Flower 1 — left orange bloom */
    0px -56px 0 0 #ff8c00,
    4px -60px 0 0 #ffa500,
    -4px -60px 0 0 #ffa500,
    0px -64px 0 0 #ff8c00,
    4px -56px 0 0 #ffa500,
    -4px -56px 0 0 #ffa500,
    0px -52px 0 0 #ffdb58,
    /* Stem 1 */
    0px -48px 0 0 #3a7d44,
    0px -44px 0 0 #3a7d44,
    0px -40px 0 0 #3a7d44,
    0px -36px 0 0 #3a7d44,
    0px -32px 0 0 #3a7d44,
    4px -40px 0 0 #4a9e54,
    -4px -36px 0 0 #4a9e54,

    /* Flower 1a — extra orange bloom */
    20px -44px 0 0 #ff8c00,
    24px -48px 0 0 #ffa500,
    16px -48px 0 0 #ffa500,
    20px -52px 0 0 #ff8c00,
    24px -44px 0 0 #ffa500,
    16px -44px 0 0 #ffa500,
    20px -40px 0 0 #ffdb58,
    /* Stem 1a */
    20px -36px 0 0 #3a7d44,
    20px -32px 0 0 #3a7d44,
    24px -32px 0 0 #4a9e54,

    /* Flower 2 — middle orange bloom */
    40px -68px 0 0 #ff8c00,
    44px -72px 0 0 #ffa500,
    36px -72px 0 0 #ffa500,
    40px -76px 0 0 #ff8c00,
    44px -68px 0 0 #ffa500,
    36px -68px 0 0 #ffa500,
    40px -64px 0 0 #ffdb58,
    /* Stem 2 */
    40px -60px 0 0 #3a7d44,
    40px -56px 0 0 #3a7d44,
    40px -52px 0 0 #3a7d44,
    40px -48px 0 0 #3a7d44,
    40px -44px 0 0 #3a7d44,
    40px -40px 0 0 #3a7d44,
    40px -36px 0 0 #3a7d44,
    40px -32px 0 0 #3a7d44,
    44px -52px 0 0 #4a9e54,
    36px -44px 0 0 #4a9e54,

    /* Flower 3a — extra orange bloom */
    60px -52px 0 0 #ff8c00,
    64px -56px 0 0 #ffa500,
    56px -56px 0 0 #ffa500,
    60px -60px 0 0 #ff8c00,
    64px -52px 0 0 #ffa500,
    56px -52px 0 0 #ffa500,
    60px -48px 0 0 #ffdb58,
    /* Stem 3a */
    60px -44px 0 0 #3a7d44,
    60px -40px 0 0 #3a7d44,
    60px -36px 0 0 #3a7d44,
    60px -32px 0 0 #3a7d44,
    64px -40px 0 0 #4a9e54,
    56px -36px 0 0 #4a9e54,

    /* Flower 4 — right orange bloom */
    80px -48px 0 0 #ff8c00,
    84px -52px 0 0 #ffa500,
    76px -52px 0 0 #ffa500,
    80px -56px 0 0 #ff8c00,
    84px -48px 0 0 #ffa500,
    76px -48px 0 0 #ffa500,
    80px -44px 0 0 #ffdb58,
    /* Stem 3 */
    80px -40px 0 0 #3a7d44,
    80px -36px 0 0 #3a7d44,
    80px -32px 0 0 #3a7d44,
    84px -36px 0 0 #4a9e54;
}

/* Orange flower bed grass */
.flower-bed-orange::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  box-shadow:
    /* Grass tufts around flowers */
    -8px -32px 0 0 #4a9e54,
    -8px -36px 0 0 #6ab85c,
    8px -32px 0 0 #3a7d44,
    12px -32px 0 0 #6ab85c,
    12px -36px 0 0 #4a9e54,
    24px -32px 0 0 #4a9e54,
    24px -36px 0 0 #3a7d44,
    32px -32px 0 0 #6ab85c,
    48px -32px 0 0 #4a9e54,
    48px -36px 0 0 #6ab85c,
    56px -32px 0 0 #3a7d44,
    64px -32px 0 0 #6ab85c,
    64px -36px 0 0 #4a9e54,
    72px -32px 0 0 #4a9e54,
    88px -32px 0 0 #6ab85c,
    88px -36px 0 0 #3a7d44;
}

/* --- Pink Flower Bed (right side, projects page) --- */
/* "the rosé section. fancy and floral." */

.flower-bed-pink {
  right: 0px;
}

.flower-bed-pink::before {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: transparent;
  /* "hot pink? more like HOT DANG pink" */
  box-shadow:
    /* Flower 1 — far right pink bloom */
    0px -48px 0 0 #ff69b4,
    -4px -52px 0 0 #ffb6c1,
    4px -52px 0 0 #ffb6c1,
    0px -56px 0 0 #ff69b4,
    -4px -48px 0 0 #ffb6c1,
    4px -48px 0 0 #ffb6c1,
    0px -44px 0 0 #ffdb58,
    /* Stem 1 */
    0px -40px 0 0 #3a7d44,
    0px -36px 0 0 #3a7d44,
    0px -32px 0 0 #3a7d44,
    -4px -36px 0 0 #4a9e54,

    /* Flower 1a — extra pink bloom */
    -18px -40px 0 0 #ff69b4,
    -22px -44px 0 0 #ffb6c1,
    -14px -44px 0 0 #ffb6c1,
    -18px -48px 0 0 #ff69b4,
    -22px -40px 0 0 #ffb6c1,
    -14px -40px 0 0 #ffb6c1,
    -18px -36px 0 0 #ffdb58,
    /* Stem 1a */
    -18px -32px 0 0 #3a7d44,
    -14px -32px 0 0 #4a9e54,

    /* Flower 2 — center-right pink bloom */
    -36px -64px 0 0 #ff69b4,
    -40px -68px 0 0 #ffb6c1,
    -32px -68px 0 0 #ffb6c1,
    -36px -72px 0 0 #ff69b4,
    -40px -64px 0 0 #ffb6c1,
    -32px -64px 0 0 #ffb6c1,
    -36px -60px 0 0 #ffdb58,
    /* Stem 2 */
    -36px -56px 0 0 #3a7d44,
    -36px -52px 0 0 #3a7d44,
    -36px -48px 0 0 #3a7d44,
    -36px -44px 0 0 #3a7d44,
    -36px -40px 0 0 #3a7d44,
    -36px -36px 0 0 #3a7d44,
    -36px -32px 0 0 #3a7d44,
    -40px -48px 0 0 #4a9e54,
    -32px -40px 0 0 #4a9e54,

    /* Flower 2a — extra pink bloom */
    -50px -48px 0 0 #ff69b4,
    -54px -52px 0 0 #ffb6c1,
    -46px -52px 0 0 #ffb6c1,
    -50px -56px 0 0 #ff69b4,
    -54px -48px 0 0 #ffb6c1,
    -46px -48px 0 0 #ffb6c1,
    -50px -44px 0 0 #ffdb58,
    /* Stem 2a */
    -50px -40px 0 0 #3a7d44,
    -50px -36px 0 0 #3a7d44,
    -50px -32px 0 0 #3a7d44,
    -46px -36px 0 0 #4a9e54,

    /* Flower 3 — inner pink bloom */
    -68px -56px 0 0 #ff69b4,
    -72px -60px 0 0 #ffb6c1,
    -64px -60px 0 0 #ffb6c1,
    -68px -64px 0 0 #ff69b4,
    -72px -56px 0 0 #ffb6c1,
    -64px -56px 0 0 #ffb6c1,
    -68px -52px 0 0 #ffdb58,
    /* Stem 3 */
    -68px -48px 0 0 #3a7d44,
    -68px -44px 0 0 #3a7d44,
    -68px -40px 0 0 #3a7d44,
    -68px -36px 0 0 #3a7d44,
    -68px -32px 0 0 #3a7d44,
    -72px -44px 0 0 #4a9e54,
    -64px -36px 0 0 #4a9e54;
}

/* Pink flower bed grass */
.flower-bed-pink::after {
  content: "";
  display: block;
  width: 4px;
  height: 4px;
  background: transparent;
  position: absolute;
  bottom: 0;
  left: 0;
  box-shadow:
    /* Grass tufts around flowers */
    8px -32px 0 0 #6ab85c,
    4px -32px 0 0 #4a9e54,
    -8px -32px 0 0 #3a7d44,
    -8px -36px 0 0 #6ab85c,
    -16px -32px 0 0 #4a9e54,
    -28px -32px 0 0 #6ab85c,
    -28px -36px 0 0 #3a7d44,
    -44px -32px 0 0 #4a9e54,
    -52px -32px 0 0 #6ab85c,
    -52px -36px 0 0 #4a9e54,
    -60px -32px 0 0 #3a7d44,
    -76px -32px 0 0 #6ab85c,
    -84px -32px 0 0 #4a9e54,
    -84px -36px 0 0 #6ab85c;
}

/* --- Garden Text --- */
.garden-text {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'VT323', monospace;
  font-size: 0.955rem;
  color: #6b6058;
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
}

/* --- The Pixel Art Bee --- */
/* "I'm a professional pollinator. I have a degree in flowers." */

.bee {
  position: absolute;
  width: 33px;
  height: 27px;
  animation: bee-flight 60s linear infinite;
  /* "I am speed. I am grace. I am a bee in your face." */
  z-index: 10;
  pointer-events: none;
}

/* Bee PNG image — faces right natively, flipped via scaleX(-1) to face left */
.bee-img {
  display: block;
  width: 33px;
  height: 27px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* --- Bee Flight Path --- */
/* "buckle up buttercup, here's my commute" */
/* PNG faces right natively: scaleX(1) = facing right, scaleX(-1) = facing left */
/* Left bed flowers at X offsets 0, 40, 80 from left:0 */
/* Right bed flowers at negative X offsets 0, -36, -68 from right:0 */
/* Bee is 33px wide, offset by ~13px to center on 4px flower stem */
/* Bee bottom = |Y_offset| - |flower_bed_bottom| */
/* Left edge clamped to 0px, right edge clamped to calc(100% - 33px) */
/* Crossing (10%→50%) and return (58.1%→99.9%) balanced for equal speed */

@keyframes bee-flight {
  /* --- Left bed flowers (facing right) --- */
  /* "clocking in at flower 1. purple. classic." */
  0% {
    left: 0px;
    bottom: 24px;
    transform: scaleX(1);
  }
  /* "ooh flower 2 is TALL. worth the climb." */
  5% {
    left: 27px;
    bottom: 36px;
    transform: scaleX(1);
  }
  /* "flower 3, the short one. I don't judge." */
  10% {
    left: 67px;
    bottom: 16px;
    transform: scaleX(1);
  }

  /* --- Straight line crossing to right bed (facing right) --- */
  /* "just cruising across the garden. nice and easy." */
  50% {
    left: calc(100% - 81px);
    bottom: 24px;
    transform: scaleX(1);
  }

  /* --- Right bed flowers (facing right, visiting inner to outer) --- */
  /* "entering the cyan zone" — flower 3 (innermost, X=-68) */
  50.1% {
    left: calc(100% - 81px);
    bottom: 24px;
    transform: scaleX(1);
  }
  /* flower 2 (X=-36) */
  54% {
    left: calc(100% - 49px);
    bottom: 32px;
    transform: scaleX(1);
  }
  /* flower 1 (X=0, outermost — clamped so bee stays in viewport) */
  58% {
    left: calc(100% - 33px);
    bottom: 16px;
    transform: scaleX(1);
  }

  /* --- Flip to face left, then straight line crossing back --- */
  /* "heading home! do bees have homes? I have a garden. close enough." */
  58.1% {
    left: calc(100% - 33px);
    bottom: 16px;
    transform: scaleX(-1);
  }

  /* "aaaand we're back. seamless. professional. 10/10 bee work." */
  99.9% {
    left: 0px;
    bottom: 24px;
    transform: scaleX(-1);
  }
  100% {
    left: 0px;
    bottom: 24px;
    transform: scaleX(1);
  }
}

/* --- Responsive Garden --- */
/* "I look great on phones too. I'm a responsive bee." */

@media (max-width: 600px) {
  .pixel-garden {
    height: 100px;
  }

  .bee {
    width: 26px;
    height: 21px;
  }

  .bee-img {
    width: 26px;
    height: 21px;
  }
}

/* --- Accessibility --- */
/* "some folks don't like motion and that's okay. I'll just... sit here." */

@media (prefers-reduced-motion: reduce) {
  .bee {
    animation: none;
    left: 0px;
    bottom: 24px;
    transform: scaleX(1);
  }
}