/* Canonical current homepage hero animation layer.
   This file owns the final plant-to-logo loop loaded between base styles.css
   and site-final.css. Historical hero experiments still live in styles.css
   for now, but the active homepage markup should remain scoped to
   .hero-clean-loop and .bio-loop-* classes.

   Phase contract:
   0-15    reset/quiet arrival, instrumentation stays subordinate
   15-35   seed settles and root network begins as one continuous bloom
   35-58   cotyledons, shoot, nodes, resource uptake, and response values resolve
   58-72   apical head carries into the logo assembly without a flash frame
   72-83   arm thrust and identity hold
   83-100  logo leaves fall/reset while the head returns toward seed state

   Keep new timing changes inside these windows so the morph remains complex
   but predictable across future passes. */
.hero-copy > p:not(.eyebrow) {
  max-width: 700px;
}

.hero-proof-strip {
  grid-template-columns: 0.92fr 0.86fr 1.02fr;
}

.hero-proof-strip span {
  min-width: 0;
}

.hero-clean-loop {
  contain: layout paint;
  position: relative;
}

.hero-clean-loop-visual {
  --bio-loop: 16s;
  overflow: visible;
}

.bio-loop-glow {
  animation-timing-function: cubic-bezier(0.26, 0.72, 0.14, 1) !important;
  transform-box: view-box;
  transform-origin: 216px 252px;
}

.bio-loop-bud {
  animation-timing-function: linear !important;
}

.bio-loop-logo-piece {
  filter:
    drop-shadow(0 0 9px rgba(158, 220, 122, 0.1))
    drop-shadow(0 16px 20px rgba(0, 0, 0, 0.24));
}

.bio-loop-final-mark {
  filter:
    drop-shadow(0 0 18px rgba(158, 220, 122, 0.16))
    drop-shadow(0 24px 32px rgba(0, 0, 0, 0.34));
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.bio-loop-resource-panel {
  transform-box: view-box;
  transform-origin: 216px 455px;
}

.bio-loop-nodes {
  animation: bioNodeGroupPresence var(--bio-loop) linear infinite;
}

.bio-loop-grid,
.bio-loop-response-band {
  animation: bioBackgroundPresence var(--bio-loop) ease-in-out infinite;
}

.root-hair {
  animation-name: bioRootHair;
  stroke-width: 0.58px;
}

.bio-loop-bud-core {
  transform-box: fill-box;
  transform-origin: center;
}

.bio-loop-stem,
.bio-loop-stem-glow,
.bio-loop-stem-taper,
.bio-loop-leaf,
.bio-loop-node,
.bio-loop-vein {
  animation-timing-function: cubic-bezier(0.24, 0.66, 0.2, 1) !important;
}

.bio-loop-bud-core,
.bio-loop-bud-fold,
.bio-loop-apical-handoff,
.bio-loop-final-mark {
  animation-timing-function: cubic-bezier(0.22, 0.72, 0.18, 1) !important;
  backface-visibility: hidden;
}

.bio-loop-logo-piece {
  animation-timing-function: linear !important;
  backface-visibility: hidden;
}

@media (max-width: 620px) {
  .hero {
    padding-top: 26px;
  }

  .hero-grid {
    gap: 12px;
  }

  .hero-clean-loop {
    justify-self: center;
    margin: 0 auto;
    max-width: min(202px, calc(100vw - 124px));
    order: -1;
    width: min(202px, calc(100vw - 124px));
  }

  .hero h1 {
    font-size: clamp(31px, 8.5vw, 36px);
    line-height: 1.03;
    margin-bottom: 20px;
  }

  .hero-copy > p:not(.eyebrow) {
    font-size: 14.5px;
    line-height: 1.42;
    max-width: 360px;
  }

  .button-row {
    gap: 8px;
    margin-top: 14px;
  }

  .button-row .button {
    min-height: 46px;
    padding-block: 11px;
  }

  .hero-proof-strip {
    margin-top: 18px;
  }
}

@media (max-height: 760px) and (max-width: 620px) {
  .hero {
    padding-top: 18px;
  }

  .hero-clean-loop {
    max-width: min(176px, calc(100vw - 148px));
    width: min(176px, calc(100vw - 148px));
  }

  .hero h1 {
    font-size: clamp(30px, 8.2vw, 34px);
  }

  .hero-copy > p:not(.eyebrow) {
    font-size: 14px;
  }

  .button-row .button {
    min-height: 44px;
  }
}

@media (max-width: 720px) and (max-height: 820px) {
  .hero {
    padding-top: 22px;
  }

  .hero-grid {
    gap: 12px;
  }

  .hero-clean-loop {
    justify-self: center;
    margin: 0 auto;
    max-width: min(188px, calc(100vw - 220px));
    order: -1;
    width: min(188px, calc(100vw - 220px));
  }

  .hero h1 {
    font-size: clamp(31px, 6vw, 38px);
    line-height: 1.03;
    margin-bottom: 18px;
  }

  .hero-copy > p:not(.eyebrow) {
    font-size: 14.5px;
    line-height: 1.42;
    max-width: 520px;
  }

  .button-row {
    gap: 8px;
    margin-top: 14px;
  }

  .button-row .button {
    min-height: 44px;
    padding-block: 11px;
  }

  .hero-proof-strip {
    margin-top: 18px;
  }
}

@keyframes bioLoopGlow {
  0%,
  9% {
    opacity: 0;
    transform: scale(0.95);
  }

  14% {
    opacity: 0.24;
    transform: scale(0.92);
  }

  22% {
    opacity: 0.42;
    transform: scale(0.98);
  }

  38% {
    opacity: 0.7;
    transform: scale(1.015);
  }

  54% {
    opacity: 0.76;
    transform: scale(1.035);
  }

  58% {
    opacity: 0.28;
    transform: scale(0.96);
  }

  61%,
  86% {
    opacity: 0;
    transform: scale(0.9);
  }

  92% {
    opacity: 0;
    transform: scale(0.92);
  }

  97%,
  100% {
    opacity: 0;
    transform: scale(0.95);
  }
}

@keyframes bioInstrumentDim {
  0%,
  16%,
  61.5%,
  88%,
  100% {
    opacity: 0;
  }

  21% {
    opacity: 0.42;
  }

  30%,
  54% {
    opacity: 0.94;
  }

  58% {
    opacity: 0.46;
  }

  60.4% {
    opacity: 0.12;
  }
}

@keyframes bioReadingA {
  0%,
  19%,
  34%,
  100% {
    opacity: 0;
  }

  22%,
  30% {
    opacity: 1;
  }
}

@keyframes bioReadingB {
  0%,
  29%,
  49%,
  100% {
    opacity: 0;
  }

  34%,
  44% {
    opacity: 1;
  }
}

@keyframes bioReadingC {
  0%,
  45%,
  60%,
  100% {
    opacity: 0;
  }

  50%,
  56.5% {
    opacity: 1;
  }
}

@keyframes bioMetricVpd {
  0%,
  16% {
    transform: scaleX(0.18);
  }

  27% {
    transform: scaleX(0.42);
  }

  40% {
    transform: scaleX(0.68);
  }

  53%,
  59% {
    transform: scaleX(1);
  }

  86%,
  100% {
    transform: scaleX(0.18);
  }
}

@keyframes bioMetricEc {
  0%,
  16% {
    transform: scaleX(0.16);
  }

  29% {
    transform: scaleX(0.4);
  }

  42% {
    transform: scaleX(0.72);
  }

  53%,
  59% {
    transform: scaleX(1);
  }

  86%,
  100% {
    transform: scaleX(0.16);
  }
}

@keyframes bioMetricDli {
  0%,
  16% {
    transform: scaleX(0.2);
  }

  29% {
    transform: scaleX(0.5);
  }

  43% {
    transform: scaleX(0.82);
  }

  53%,
  59% {
    transform: scaleX(1);
  }

  86%,
  100% {
    transform: scaleX(0.2);
  }
}

@keyframes bioBudJourney {
  0%,
  5.8% {
    opacity: 0;
    transform: translate(215px, 116px) scale(0.64);
  }

  6.8% {
    opacity: 0.18;
    transform: translate(215px, 118px) scale(0.58);
  }

  7.8% {
    opacity: 0.54;
    transform: translate(216px, 126px) scale(0.5);
  }

  8.8% {
    opacity: 0.86;
    transform: translate(216px, 144px) scale(0.45);
  }

  10.4% {
    opacity: 0.9;
    transform: translate(217px, 188px) scale(0.38);
  }

  12.4% {
    opacity: 0.82;
    transform: translate(217px, 252px) scale(0.31);
  }

  14.6% {
    opacity: 0.74;
    transform: translate(215px, 316px) scale(0.26);
  }

  17.2% {
    opacity: 0.74;
    transform: translate(214px, 348px) scale(0.24);
  }

  20.5% {
    opacity: 0.78;
    transform: translate(214px, 340px) scale(0.3);
  }

  24.5% {
    opacity: 0.8;
    transform: translate(216px, 318px) scale(0.37);
  }

  29% {
    opacity: 0.84;
    transform: translate(220px, 292px) scale(0.46);
  }

  33.5% {
    opacity: 0.88;
    transform: translate(225px, 268px) scale(0.55);
  }

  38% {
    opacity: 0.92;
    transform: translate(235px, 238px) scale(0.64);
  }

  42.5% {
    opacity: 0.96;
    transform: translate(241px, 210px) scale(0.72);
  }

  46% {
    opacity: 0.99;
    transform: translate(244px, 184px) scale(0.8);
  }

  49% {
    opacity: 1;
    transform: translate(239px, 158px) scale(0.88);
  }

  51.7% {
    opacity: 1;
    transform: translate(229px, 136px) scale(0.98);
  }

  54.2% {
    opacity: 1;
    transform: translate(218px, 121px) scale(1.1);
  }

  57.2%,
  59.4% {
    opacity: 1;
    transform: translate(215px, 116px) scale(1.18);
  }

  60.7% {
    opacity: 0.82;
    transform: translate(215px, 116px) scale(1.34);
  }

  62.1% {
    opacity: 0.28;
    transform: translate(215px, 116px) scale(1.64);
  }

  63.4%,
  100% {
    opacity: 0;
    transform: translate(215px, 116px) scale(1.9);
  }
}

@keyframes bioApicalHandoff {
  0%,
  50% {
    opacity: 0;
    transform: scale(0.36);
  }

  54% {
    opacity: 0.18;
    transform: scale(0.82);
  }

  56.2%,
  58% {
    opacity: 0.44;
    transform: scale(1.04);
  }

  59.1% {
    opacity: 0.36;
    transform: scale(1.28);
  }

  60.4% {
    opacity: 0.08;
    transform: scale(1.72);
  }

  62%,
  100% {
    opacity: 0;
    transform: scale(1.95);
  }
}

@keyframes bioBudCore {
  0%,
  17% {
    fill: rgba(190, 235, 132, 0.96);
    opacity: 1;
    transform: scale(0.92);
  }

  47% {
    fill: rgba(212, 244, 146, 0.98);
    opacity: 1;
    transform: scale(1);
  }

  55.8%,
  58% {
    fill: rgba(225, 248, 158, 1);
    opacity: 1;
    transform: scale(1.14);
  }

  59.1% {
    fill: rgba(225, 248, 158, 0.96);
    opacity: 0.82;
    transform: scale(1.32);
  }

  60.4% {
    fill: rgba(225, 248, 158, 0.9);
    opacity: 0.3;
    transform: scale(1.58);
  }

  62%,
  100% {
    fill: rgba(190, 235, 132, 0.96);
    opacity: 0;
    transform: scale(1.62);
  }
}

@keyframes bioBudFold {
  0%,
  45% {
    opacity: 0;
    transform: scale(0.2, 0.36) rotate(0deg);
  }

  51% {
    opacity: 0.46;
    transform: scale(0.7, 0.92) rotate(0deg);
  }

  55.6%,
  58% {
    opacity: 0.86;
    transform: scale(1.08, 1.22) rotate(0deg);
  }

  59.1% {
    opacity: 0.58;
    transform: scale(1.24, 1.36) rotate(0deg);
  }

  60.4% {
    opacity: 0.2;
    transform: scale(1.44, 1.52) rotate(0deg);
  }

  62%,
  100% {
    opacity: 0;
    transform: scale(0.22, 0.32) rotate(0deg);
  }
}

@keyframes bioStemBase {
  0%,
  16% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  22% {
    opacity: 0.62;
    stroke-dashoffset: 0.58;
  }

  28% {
    opacity: 0.8;
    stroke-dashoffset: 0.16;
  }

  31.5%,
  58% {
    opacity: 0.86;
    stroke-dashoffset: 0;
  }

  60.3%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes bioStemMid {
  0%,
  27.5% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  34.5% {
    opacity: 0.72;
    stroke-dashoffset: 0.78;
  }

  41.5% {
    opacity: 0.82;
    stroke-dashoffset: 0.48;
  }

  48.8%,
  58% {
    opacity: 0.86;
    stroke-dashoffset: 0;
  }

  60.3%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes bioStemTip {
  0%,
  48.2% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  51% {
    opacity: 0.74;
    stroke-dashoffset: 0.42;
  }

  55.6%,
  58% {
    opacity: 0.94;
    stroke-dashoffset: 0;
  }

  60.4%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes bioStemGrow {
  0%,
  17% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  27.5% {
    opacity: 0.56;
    stroke-dashoffset: 0.86;
  }

  38% {
    opacity: 0.74;
    stroke-dashoffset: 0.58;
  }

  45% {
    opacity: 0.82;
    stroke-dashoffset: 0.34;
  }

  51% {
    opacity: 0.84;
    stroke-dashoffset: 0.1;
  }

  55.8%,
  58% {
    opacity: 0.9;
    stroke-dashoffset: 0;
  }

  60.4%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes bioStemGlow {
  0%,
  17% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  30% {
    opacity: 0.2;
    stroke-dashoffset: 0.78;
  }

  47% {
    opacity: 0.34;
    stroke-dashoffset: 0.26;
  }

  55.8%,
  58% {
    opacity: 0.3;
    stroke-dashoffset: 0;
  }

  60.4%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes bioNodeBase {
  0%,
  17%,
  57.4%,
  100% {
    opacity: 0;
    transform: scale(0.32);
  }

  22% {
    opacity: 0.8;
    transform: scale(0.86);
  }

  26%,
  56.6% {
    opacity: 0.9;
    transform: scale(1);
  }
}

@keyframes bioNodeLower {
  0%,
  29%,
  57.6%,
  100% {
    opacity: 0;
    transform: scale(0.32);
  }

  34% {
    opacity: 0.78;
    transform: scale(0.84);
  }

  38%,
  56.8% {
    opacity: 0.86;
    transform: scale(1);
  }
}

@keyframes bioNodeUpper {
  0%,
  40%,
  57.8%,
  100% {
    opacity: 0;
    transform: scale(0.32);
  }

  46% {
    opacity: 0.76;
    transform: scale(0.84);
  }

  50%,
  56.9% {
    opacity: 0.84;
    transform: scale(1);
  }
}

@keyframes bioNodeApical {
  0%,
  47%,
  57.9%,
  100% {
    opacity: 0;
    transform: scale(0.32);
  }

  51% {
    opacity: 0.84;
    transform: scale(0.9);
  }

  55.4%,
  56.9% {
    opacity: 0.94;
    transform: scale(1);
  }
}

@keyframes bioNodeGroupPresence {
  0%,
  56.6% {
    opacity: 1;
  }

  57.4%,
  100% {
    opacity: 0;
  }
}

@keyframes bioCotyledonLeft {
  0%,
  21% {
    opacity: 0;
    transform: scale(0.04, 0.12) rotate(-20deg);
  }

  25% {
    opacity: 0.28;
    transform: translate(-1px, 0) scale(0.28, 0.42) rotate(-17deg);
  }

  30% {
    opacity: 0.72;
    transform: translate(-1px, 0) scale(0.74, 0.84) rotate(-8deg);
  }

  36%,
  54% {
    opacity: 0.88;
    transform: scale(1) rotate(0deg);
  }

  58% {
    opacity: 0.26;
    transform: translate(-10px, -10px) scale(1.04, 0.94) rotate(-12deg);
  }

  60.6% {
    opacity: 0.06;
    transform: translate(-18px, -20px) scale(1.08, 0.9) rotate(-18deg);
  }

  61.8%,
  100% {
    opacity: 0;
    transform: translate(-22px, -24px) scale(1.08, 0.88) rotate(-20deg);
  }
}

@keyframes bioCotyledonRight {
  0%,
  21% {
    opacity: 0;
    transform: scale(0.04, 0.12) rotate(18deg);
  }

  25.5% {
    opacity: 0.26;
    transform: translate(1px, 0) scale(0.28, 0.42) rotate(16deg);
  }

  30.5% {
    opacity: 0.7;
    transform: translate(1px, 0) scale(0.74, 0.84) rotate(8deg);
  }

  36%,
  54% {
    opacity: 0.86;
    transform: scale(1) rotate(0deg);
  }

  58% {
    opacity: 0.24;
    transform: translate(12px, -10px) scale(1.04, 0.94) rotate(12deg);
  }

  60.6% {
    opacity: 0.06;
    transform: translate(20px, -20px) scale(1.08, 0.9) rotate(18deg);
  }

  61.8%,
  100% {
    opacity: 0;
    transform: translate(24px, -26px) scale(1.08, 0.88) rotate(20deg);
  }
}

@keyframes bioLeafLeftLower {
  0%,
  29%,
  100% {
    opacity: 0;
    transform: scale(0.08, 0.2) rotate(-15deg);
  }

  36% {
    opacity: 0.52;
    transform: scale(0.68, 0.8) rotate(-5deg);
  }

  44%,
  56.8% {
    opacity: 0.74;
    transform: scale(1) rotate(0deg);
  }

  59.4% {
    opacity: 0.26;
    transform: translate(-12px, -20px) scale(1.08, 0.98) rotate(-10deg);
  }

  60.8% {
    opacity: 0.06;
    transform: translate(-20px, -30px) scale(1.12, 0.94) rotate(-16deg);
  }

  62%,
  64% {
    opacity: 0;
    transform: translate(-24px, -34px) scale(1.12, 0.92) rotate(-18deg);
  }
}

@keyframes bioLeafRightLower {
  0%,
  31%,
  100% {
    opacity: 0;
    transform: scale(0.08, 0.2) rotate(14deg);
  }

  38% {
    opacity: 0.5;
    transform: scale(0.68, 0.8) rotate(5deg);
  }

  45%,
  56.8% {
    opacity: 0.7;
    transform: scale(1) rotate(0deg);
  }

  59.4% {
    opacity: 0.24;
    transform: translate(10px, -18px) scale(1.08, 0.98) rotate(10deg);
  }

  60.8% {
    opacity: 0.06;
    transform: translate(18px, -28px) scale(1.12, 0.94) rotate(16deg);
  }

  62%,
  64% {
    opacity: 0;
    transform: translate(22px, -34px) scale(1.12, 0.92) rotate(18deg);
  }
}

@keyframes bioLeafLeftUpper {
  0%,
  44%,
  100% {
    opacity: 0;
    transform: scale(0.08, 0.2) rotate(-12deg);
  }

  49% {
    opacity: 0.5;
    transform: scale(0.66, 0.78) rotate(-4deg);
  }

  55.4%,
  57.2% {
    opacity: 0.72;
    transform: scale(1) rotate(0deg);
  }

  59.6% {
    opacity: 0.24;
    transform: translate(-10px, -14px) scale(1.08, 0.98) rotate(-10deg);
  }

  60.8% {
    opacity: 0.06;
    transform: translate(-18px, -22px) scale(1.12, 0.94) rotate(-16deg);
  }

  62%,
  64% {
    opacity: 0;
    transform: translate(-22px, -26px) scale(1.12, 0.92) rotate(-18deg);
  }
}

@keyframes bioLeafRightUpper {
  0%,
  45%,
  100% {
    opacity: 0;
    transform: scale(0.08, 0.2) rotate(11deg);
  }

  50% {
    opacity: 0.46;
    transform: scale(0.66, 0.78) rotate(4deg);
  }

  55.4%,
  57.2% {
    opacity: 0.68;
    transform: scale(1) rotate(0deg);
  }

  59.6% {
    opacity: 0.22;
    transform: translate(10px, -16px) scale(1.08, 0.98) rotate(10deg);
  }

  60.8% {
    opacity: 0.05;
    transform: translate(18px, -24px) scale(1.12, 0.94) rotate(16deg);
  }

  62%,
  64% {
    opacity: 0;
    transform: translate(22px, -28px) scale(1.12, 0.92) rotate(18deg);
  }
}

@keyframes bioLeafApical {
  0%,
  47%,
  100% {
    opacity: 0;
    transform: scale(0.08, 0.18) rotate(-7deg);
  }

  52% {
    opacity: 0.46;
    transform: scale(0.68, 0.82) rotate(-2deg);
  }

  55.4%,
  57.2% {
    opacity: 0.58;
    transform: scale(0.94) rotate(0deg);
  }

  59.6% {
    opacity: 0.18;
    transform: translate(-1px, -8px) scale(1.08, 0.92) rotate(-4deg);
  }

  60.8% {
    opacity: 0.04;
    transform: translate(-2px, -14px) scale(1.12, 0.84) rotate(-6deg);
  }

  62%,
  64% {
    opacity: 0;
    transform: translate(-2px, -18px) scale(1.12, 0.8) rotate(-8deg);
  }
}

@keyframes bioLogoHead {
  0%,
  2.2% {
    opacity: 0.94;
    transform: translate(0, 0) scale(1);
  }

  3.6% {
    opacity: 0.84;
    transform: translate(0.2px, 3px) scale(0.82);
  }

  5% {
    opacity: 0.5;
    transform: translate(0.5px, 6px) scale(0.62);
  }

  6.4% {
    opacity: 0.16;
    transform: translate(0.8px, 8px) scale(0.44);
  }

  7.8% {
    opacity: 0;
    transform: translate(1px, 10px) scale(0.32);
  }

  9.2% {
    opacity: 0;
    transform: translate(1px, 10px) scale(0.28);
  }

  55.4% {
    opacity: 0;
    transform: scale(0.36);
  }

  56.4% {
    opacity: 0.08;
    transform: scale(0.43);
  }

  57.6% {
    opacity: 0.18;
    transform: scale(0.53);
  }

  58.8% {
    opacity: 0.31;
    transform: scale(0.62);
  }

  60% {
    opacity: 0.44;
    transform: scale(0.72);
  }

  61.2% {
    opacity: 0.57;
    transform: scale(0.81);
  }

  62.4% {
    opacity: 0.7;
    transform: scale(0.89);
  }

  63.6% {
    opacity: 0.8;
    transform: scale(0.94);
  }

  64.8% {
    opacity: 0.88;
    transform: scale(0.975);
  }

  66.2% {
    opacity: 0.93;
    transform: scale(0.996);
  }

  67.2%,
  100% {
    opacity: 0.94;
    transform: scale(1);
  }
}

@keyframes bioLogoLeftOuter {
  0%,
  2.2% {
    opacity: 0.94;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  3.8% {
    opacity: 0.76;
    transform: translate(-5px, 18px) scale(0.9) rotate(-5deg);
  }

  5.6% {
    opacity: 0.42;
    transform: translate(-11px, 44px) scale(0.8) rotate(-12deg);
  }

  7.2% {
    opacity: 0.12;
    transform: translate(-16px, 68px) scale(0.71) rotate(-18deg);
  }

  8.5% {
    opacity: 0;
    transform: translate(-18px, 82px) scale(0.66) rotate(-22deg);
  }

  55.4% {
    opacity: 0;
    transform: translate(25px, 30px) scale(0.62) rotate(-9deg);
  }

  56.4% {
    opacity: 0.08;
    transform: translate(23px, 28px) scale(0.65) rotate(-8deg);
  }

  57.6% {
    opacity: 0.18;
    transform: translate(21px, 25px) scale(0.68) rotate(-7.2deg);
  }

  58.9% {
    opacity: 0.31;
    transform: translate(18px, 21px) scale(0.73) rotate(-6deg);
  }

  60.2% {
    opacity: 0.46;
    transform: translate(15px, 18px) scale(0.78) rotate(-4.8deg);
  }

  61.7% {
    opacity: 0.61;
    transform: translate(11px, 13px) scale(0.84) rotate(-3.4deg);
  }

  63.2% {
    opacity: 0.74;
    transform: translate(8px, 9px) scale(0.9) rotate(-2deg);
  }

  64.8% {
    opacity: 0.85;
    transform: translate(4px, 5px) scale(0.96) rotate(-0.8deg);
  }

  66.2% {
    opacity: 0.91;
    transform: translate(2px, 2px) scale(0.985) rotate(-0.35deg);
  }

  67.4%,
  100% {
    opacity: 0.94;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

@keyframes bioLogoRightLeaf {
  0%,
  2.2% {
    opacity: 0.94;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  3.8% {
    opacity: 0.76;
    transform: translate(6px, 17px) scale(0.91) rotate(4.5deg);
  }

  5.6% {
    opacity: 0.44;
    transform: translate(13px, 40px) scale(0.81) rotate(10deg);
  }

  7.2% {
    opacity: 0.12;
    transform: translate(18px, 64px) scale(0.72) rotate(16deg);
  }

  8.5% {
    opacity: 0;
    transform: translate(20px, 76px) scale(0.68) rotate(19deg);
  }

  55.4% {
    opacity: 0;
    transform: translate(-23px, 26px) scale(0.62) rotate(8deg);
  }

  56.4% {
    opacity: 0.09;
    transform: translate(-21px, 24px) scale(0.65) rotate(7.2deg);
  }

  57.6% {
    opacity: 0.2;
    transform: translate(-19px, 22px) scale(0.69) rotate(6.4deg);
  }

  58.9% {
    opacity: 0.33;
    transform: translate(-16px, 18px) scale(0.74) rotate(5.2deg);
  }

  60.2% {
    opacity: 0.48;
    transform: translate(-13px, 15px) scale(0.8) rotate(4.1deg);
  }

  61.7% {
    opacity: 0.62;
    transform: translate(-10px, 11px) scale(0.85) rotate(2.8deg);
  }

  63.2% {
    opacity: 0.74;
    transform: translate(-7px, 8px) scale(0.91) rotate(1.7deg);
  }

  64.8% {
    opacity: 0.85;
    transform: translate(-4px, 4px) scale(0.96) rotate(0.7deg);
  }

  66.2% {
    opacity: 0.91;
    transform: translate(-2px, 2px) scale(0.985) rotate(0.3deg);
  }

  67.4%,
  100% {
    opacity: 0.94;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

@keyframes bioLogoCenterLeaf {
  0%,
  2.2% {
    opacity: 0.96;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  3.8% {
    opacity: 0.78;
    transform: translate(0, 21px) scale(0.92, 0.93) rotate(1.8deg);
  }

  5.6% {
    opacity: 0.46;
    transform: translate(0, 50px) scale(0.82, 0.84) rotate(4deg);
  }

  7.2% {
    opacity: 0.13;
    transform: translate(0, 78px) scale(0.73, 0.77) rotate(6.5deg);
  }

  8.5% {
    opacity: 0;
    transform: translate(0, 96px) scale(0.68, 0.72) rotate(8deg);
  }

  55.4% {
    opacity: 0;
    transform: translate(-4px, 24px) scale(0.62, 0.78) rotate(-2.5deg);
  }

  56.4% {
    opacity: 0.1;
    transform: translate(-4px, 22px) scale(0.65, 0.8) rotate(-2.2deg);
  }

  57.6% {
    opacity: 0.22;
    transform: translate(-3px, 20px) scale(0.69, 0.83) rotate(-1.9deg);
  }

  58.9% {
    opacity: 0.36;
    transform: translate(-3px, 16px) scale(0.74, 0.87) rotate(-1.5deg);
  }

  60.2% {
    opacity: 0.52;
    transform: translate(-2px, 13px) scale(0.8, 0.9) rotate(-1.1deg);
  }

  61.7% {
    opacity: 0.66;
    transform: translate(-2px, 9px) scale(0.86, 0.94) rotate(-0.7deg);
  }

  63.2% {
    opacity: 0.78;
    transform: translate(-1px, 6px) scale(0.92, 0.97) rotate(-0.4deg);
  }

  64.8% {
    opacity: 0.88;
    transform: translate(0, 3px) scale(0.97, 0.99) rotate(-0.18deg);
  }

  66.2% {
    opacity: 0.93;
    transform: translate(0, 1px) scale(0.99, 0.998) rotate(-0.1deg);
  }

  67.4%,
  100% {
    opacity: 0.96;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

@keyframes bioPanelFocus {
  0%,
  17%,
  60%,
  100% {
    opacity: 0;
  }

  23% {
    opacity: 0.5;
  }

  32%,
  55% {
    opacity: 0.92;
  }

  57.2% {
    opacity: 0.36;
  }

  58.8% {
    opacity: 0.08;
  }
}

@keyframes bioBackgroundPresence {
  0%,
  18%,
  60%,
  86%,
  100% {
    opacity: 0;
  }

  22% {
    opacity: 0.3;
  }

  32%,
  53.5% {
    opacity: 1;
  }

  56.5% {
    opacity: 0.34;
  }

  58.5% {
    opacity: 0.04;
  }

  92% {
    opacity: 0;
  }
}

@keyframes bioResponseLine {
  0%,
  22% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  31% {
    opacity: 0.46;
    stroke-dashoffset: 0.72;
  }

  42% {
    opacity: 0.72;
    stroke-dashoffset: 0.32;
  }

  53%,
  57.4% {
    opacity: 0.62;
    stroke-dashoffset: 0;
  }

  59.6%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes bioUptakeWater {
  0%,
  16% {
    transform: scaleX(0.1);
  }

  27% {
    transform: scaleX(0.48);
  }

  42% {
    transform: scaleX(0.78);
  }

  50% {
    transform: scaleX(0.94);
  }

  54%,
  100% {
    transform: scaleX(1);
  }
}

@keyframes bioUptakeNutrients {
  0%,
  16% {
    transform: scaleX(0.08);
  }

  29% {
    transform: scaleX(0.44);
  }

  42% {
    transform: scaleX(0.74);
  }

  50% {
    transform: scaleX(0.94);
  }

  54%,
  100% {
    transform: scaleX(1);
  }
}

@keyframes bioUptakeLight {
  0%,
  16% {
    transform: scaleX(0.08);
  }

  27% {
    transform: scaleX(0.36);
  }

  42% {
    transform: scaleX(0.78);
  }

  50% {
    transform: scaleX(0.96);
  }

  54%,
  100% {
    transform: scaleX(1);
  }
}

@keyframes bioRootZone {
  0%,
  13%,
  60.5%,
  100% {
    opacity: 0;
    transform: translateY(6px) scale(0.9);
  }

  17% {
    opacity: 0.38;
    transform: translateY(3px) scale(0.96);
  }

  22%,
  57.5% {
    opacity: 0.88;
    transform: translateY(0) scale(1);
  }

  59% {
    opacity: 0.2;
    transform: translateY(-2px) scale(0.98);
  }
}

@keyframes bioSubstrate {
  0%,
  13%,
  60.5%,
  100% {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }

  17% {
    opacity: 0.28;
    transform: translateY(4px) scale(0.99);
  }

  22%,
  57.5% {
    opacity: 0.78;
    transform: translateY(0) scale(1);
  }

  59% {
    opacity: 0.16;
    transform: translateY(-2px) scale(0.995);
  }
}

@keyframes bioIrrigation {
  0%,
  21% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  30% {
    opacity: 0.36;
    stroke-dashoffset: 0.48;
  }

  48%,
  57.5% {
    opacity: 0.48;
    stroke-dashoffset: 0;
  }

  60%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes bioRootPrimary {
  0%,
  15% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  19% {
    opacity: 0.5;
    stroke-dashoffset: 0.68;
  }

  23% {
    opacity: 0.68;
    stroke-dashoffset: 0.42;
  }

  27% {
    opacity: 0.78;
    stroke-dashoffset: 0.18;
  }

  32% {
    opacity: 0.86;
    stroke-dashoffset: 0.04;
  }

  38%,
  57.8% {
    opacity: 0.86;
    stroke-dashoffset: 0;
  }

  60.2%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes bioRootFine {
  0%,
  20% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  25% {
    opacity: 0.24;
    stroke-dashoffset: 0.72;
  }

  31% {
    opacity: 0.42;
    stroke-dashoffset: 0.38;
  }

  36% {
    opacity: 0.54;
    stroke-dashoffset: 0.12;
  }

  39%,
  57.8% {
    opacity: 0.62;
    stroke-dashoffset: 0;
  }

  60.2%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes bioRootHair {
  0%,
  26% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  31% {
    opacity: 0.18;
    stroke-dashoffset: 0.78;
  }

  38% {
    opacity: 0.34;
    stroke-dashoffset: 0.42;
  }

  46% {
    opacity: 0.48;
    stroke-dashoffset: 0.14;
  }

  52%,
  57.8% {
    opacity: 0.58;
    stroke-dashoffset: 0;
  }

  60.2%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

/* Final motion tuning: softer identity crossfade and a cleaner upper-leaf gesture. */
@keyframes bioLogoUpperLeft {
  0%,
  2.2% {
    opacity: 0.94;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  3.8% {
    opacity: 0.76;
    transform: translate(-6px, 14px) scale(0.91) rotate(-4.5deg);
  }

  5.6% {
    opacity: 0.44;
    transform: translate(-14px, 34px) scale(0.81) rotate(-10deg);
  }

  7.2% {
    opacity: 0.12;
    transform: translate(-20px, 52px) scale(0.72) rotate(-15deg);
  }

  8.5% {
    opacity: 0;
    transform: translate(-22px, 62px) scale(0.68) rotate(-18deg);
  }

  55.4% {
    opacity: 0;
    transform: translate(20px, 22px) scale(0.64) rotate(-8deg);
  }

  56.4% {
    opacity: 0.08;
    transform: translate(18px, 21px) scale(0.67) rotate(-7.2deg);
  }

  57.6% {
    opacity: 0.18;
    transform: translate(17px, 19px) scale(0.7) rotate(-6.5deg);
  }

  58.9% {
    opacity: 0.31;
    transform: translate(14px, 16px) scale(0.75) rotate(-5.2deg);
  }

  60.2% {
    opacity: 0.46;
    transform: translate(12px, 13px) scale(0.8) rotate(-4.2deg);
  }

  61.7% {
    opacity: 0.61;
    transform: translate(9px, 10px) scale(0.86) rotate(-2.9deg);
  }

  63.2% {
    opacity: 0.74;
    transform: translate(6px, 7px) scale(0.91) rotate(-1.8deg);
  }

  64.8% {
    opacity: 0.85;
    transform: translate(3px, 4px) scale(0.96) rotate(-0.8deg);
  }

  66.2% {
    opacity: 0.91;
    transform: translate(1px, 1px) scale(0.985) rotate(-0.3deg);
  }

  67.4%,
  74.3% {
    opacity: 0.94;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  74.9% {
    opacity: 0.955;
    transform: translate(-0.25px, -1.1px) scale(1.004) rotate(-0.45deg);
  }

  75.4% {
    opacity: 0.97;
    transform: translate(-0.75px, -3px) scale(1.01) rotate(-1.25deg);
  }

  76.1% {
    opacity: 0.985;
    transform: translate(-1.45px, -6.2px) scale(1.024) rotate(-2.45deg);
  }

  77% {
    opacity: 1;
    transform: translate(-2.2px, -9.2px) scale(1.038) rotate(-3.7deg);
  }

  77.7% {
    opacity: 0.995;
    transform: translate(-2.35px, -8.2px) scale(1.034) rotate(-3.25deg);
  }

  78.5% {
    opacity: 0.99;
    transform: translate(-1.8px, -6.6px) scale(1.024) rotate(-2.45deg);
  }

  79.5% {
    opacity: 0.982;
    transform: translate(-1.05px, -4.2px) scale(1.014) rotate(-1.35deg);
  }

  80.6% {
    opacity: 0.97;
    transform: translate(-0.45px, -1.8px) scale(1.005) rotate(-0.55deg);
  }

  81.8% {
    opacity: 0.955;
    transform: translate(-0.12px, -0.45px) scale(1.001) rotate(-0.15deg);
  }

  82.8%,
  100% {
    opacity: 0.94;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
}

/* Smoothness pass: keep the full morph and arm thrust, but avoid expensive
   per-frame filter repainting on the moving SVG/image pieces. */
.bio-loop-stem-taper,
.bio-loop-stem-glow,
.bio-loop-stem,
.bio-loop-leaf,
.bio-loop-node,
.bio-loop-bud-core,
.bio-loop-bud-fold,
.bio-loop-apical-handoff {
  filter: none !important;
}

.bio-loop-logo-piece {
  filter: none !important;
}

.bio-loop-final-mark {
  animation: none !important;
  filter: none !important;
  opacity: 0 !important;
}

.bio-loop-readout .reading-a {
  animation: bioResponseReadingA var(--bio-loop) ease-in-out infinite !important;
}

.bio-loop-readout .reading-b {
  animation: bioResponseReadingB var(--bio-loop) ease-in-out infinite !important;
}

.bio-loop-readout .reading-c {
  animation: bioResponseReadingC var(--bio-loop) ease-in-out infinite !important;
}

/* Root pacing pass: roots should bloom as one living network before the shoot
   takes over, not pop in as separate rushed strokes. */
.bio-loop-root.primary-root {
  animation-name: bioRootPrimaryBloom !important;
  animation-timing-function: linear !important;
}

.bio-loop-root.fine-root:not(.root-hair) {
  animation-name: bioRootFineBloom !important;
  animation-timing-function: linear !important;
}

.bio-loop-root.root-hair {
  animation: bioRootHairBloom var(--bio-loop) linear infinite !important;
  opacity: 0;
  stroke-width: 0.58px;
}

.bio-loop-node.node-lower {
  animation-name: bioNodeLower !important;
}

.bio-loop-node.node-upper {
  animation-name: bioNodeUpper !important;
}

@keyframes bioRootPrimaryBloom {
  0%,
  15% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  19% {
    opacity: 0.16;
    stroke-dashoffset: 0.88;
  }

  24% {
    opacity: 0.36;
    stroke-dashoffset: 0.68;
  }

  30% {
    opacity: 0.58;
    stroke-dashoffset: 0.44;
  }

  37% {
    opacity: 0.74;
    stroke-dashoffset: 0.2;
  }

  45% {
    opacity: 0.84;
    stroke-dashoffset: 0.04;
  }

  50%,
  58.4% {
    opacity: 0.84;
    stroke-dashoffset: 0;
  }

  61%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes bioRootFineBloom {
  0%,
  16% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  21% {
    opacity: 0.1;
    stroke-dashoffset: 0.9;
  }

  27% {
    opacity: 0.24;
    stroke-dashoffset: 0.7;
  }

  34% {
    opacity: 0.4;
    stroke-dashoffset: 0.46;
  }

  42% {
    opacity: 0.54;
    stroke-dashoffset: 0.2;
  }

  50% {
    opacity: 0.62;
    stroke-dashoffset: 0.04;
  }

  54%,
  58.4% {
    opacity: 0.62;
    stroke-dashoffset: 0;
  }

  61%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes bioRootHairBloom {
  0%,
  18% {
    opacity: 0;
    stroke-dashoffset: 1;
  }

  25% {
    opacity: 0.04;
    stroke-dashoffset: 0.92;
  }

  33% {
    opacity: 0.12;
    stroke-dashoffset: 0.72;
  }

  41% {
    opacity: 0.24;
    stroke-dashoffset: 0.46;
  }

  50% {
    opacity: 0.36;
    stroke-dashoffset: 0.18;
  }

  56%,
  58.4% {
    opacity: 0.46;
    stroke-dashoffset: 0;
  }

  61%,
  100% {
    opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes bioResponseReadingA {
  0%,
  22% {
    opacity: 1;
  }

  28%,
  100% {
    opacity: 0;
  }
}

@keyframes bioResponseReadingB {
  0%,
  24%,
  51%,
  100% {
    opacity: 0;
  }

  31%,
  45% {
    opacity: 1;
  }
}

@keyframes bioResponseReadingC {
  0%,
  47% {
    opacity: 0;
  }

  55%,
  100% {
    opacity: 1;
  }
}


@keyframes bioFinalMark {
  0%,
  4.5% {
    opacity: 0.94;
    transform: scale(1);
  }

  6.8% {
    opacity: 0.24;
    transform: scale(0.998);
  }

  8.5%,
  88.5% {
    opacity: 0;
    transform: scale(0.996);
  }

  91.5% {
    opacity: 0.14;
    transform: scale(0.997);
  }

  94.5% {
    opacity: 0.44;
    transform: scale(0.998);
  }

  97.2% {
    opacity: 0.78;
    transform: scale(0.999);
  }

  99.2%,
  100% {
    opacity: 0.94;
    transform: scale(1);
  }
}