/* =========================
   Base layout
   ========================= */
:root {
  --cycle-duration: 20s;
}

body {
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
}

.controls {
  display: none;
  position: fixed;
  top: 20px;
  right: 20px;
  background: white;
  padding: 15px 20px;
  border-radius: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 100;
  width: min(92vw, 360px);
}

.controls.on {
  display: block;
}

.controls-close {
  position: absolute;
  top: 0px;
  right: 3px;
  border: 0;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #666;
  padding: 2px 4px;
}

.controls-close:hover {
  color: #111;
}

.controls-title {
  color: #111;
  margin: 0;
  font-size: 16px;
}

.controls label {
  font-weight: bold;
  color: #333;
  font-size: 13px;
}

.controls-grid {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  gap: 8px 10px;
  align-items: center;
  margin-top: 8px;
}

.controls select,
.controls input[type="number"] {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 0;
  font-size: 14px;
  background-color: white;
  width: 100%;
  box-sizing: border-box;
}

.controls input[type="checkbox"] {
  justify-self: start;
}

.range-control {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.range-control input[type="range"] {
  width: 100%;
  margin: 0;
}

.range-control output {
  min-width: 38px;
  text-align: right;
  font-size: 12px;
  color: #555;
}

.controls select:hover,
.controls input[type="number"]:hover {
  border-color: #999;
}

.pattern {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

.pattern.single-view {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: visible;
}

.motif {
  position: absolute;
  left: var(--motif-left, 0px);
  top: var(--motif-top, 0px);
  transform: translate(-50%, -50%);
  animation: float var(--float-duration, 5s) ease-in-out infinite;
  animation-delay: var(--animation-delay, 0s);
  transform-origin: center;
  overflow: visible;
}

.pattern.single-view .motif {
  position: relative;
  left: auto;
  top: auto;
  transform: none;
}

.motif.mirror-x {
  scale: -1 1;
}

.motif.mirror-y {
  scale: 1 -1;
}

.motif.mirror-x.mirror-y {
  scale: -1 -1;
}

.motif svg {
  opacity: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  overflow: visible;
  transform-origin: center;
  animation: presence var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay: var(--bloom-delay, 0s);
  animation-fill-mode: both;
  display: block;
}

.motif.color svg path {
  fill: currentColor;
}

.color.yellow {
  color: #CC8F3C;
}

.color.red {
  color: #C22B2B;
}

.color.blue {
  color: #0F2D8E;
}

.color.light-green {
  color: #829658;
}

.color.dark-green {
  color: #325042;
}

.color.pink {
  color: #F0C1CB;
}

.color.black {
  color: #151515;
}






/* =========================
   Global keyframes
   ========================= */
@keyframes presence {
  0% {
    transform: scale(0.05) rotate(6deg) translate(0px, 0px);
    opacity: 0;
  }
  10% {
    transform: scale(1) rotate(3deg) translate(2px, -3px);
    opacity: 0.5;
  }
  30% {
    transform: scale(1) rotate(3deg) translate(-2px, 2px);
    opacity: 1;
  }
  45% {
    transform: scale(1.05) rotate(1deg) translate(1px, -2px);
    opacity: 1;
  }
  50% {
    transform: scale(1) rotate(0deg) translate(0px, 0px);
    opacity: 1;
  }
  90% {
    transform: scale(1) rotate(-1deg) translate(2px, -3px);
    opacity: 1;
  }
  92% {
    transform: scale(1) rotate(-2deg) translate(-2px, 2px);
    opacity: 0.5;
  }
  95% {
    transform: scale(0.05) rotate(-3deg) translate(1px, -2px);
    opacity: 0.5;
  }
  99% {
    transform: scale(0.05) rotate(-3deg) translate(0px, 0px);
    opacity: 0;
  }
  100% {
    transform: scale(0.05) rotate(-6deg) translate(0px, 0px);
    opacity: 0;
  }
}

@keyframes float {
  0%   { transform: translate(0px, 0px) rotate(0deg); }
  25%  { transform: translate(2px, -3px) rotate(2deg); }
  50%  { transform: translate(-2px, 2px) rotate(-0.5deg); }
  75%  { transform: translate(1px, -2px) rotate(0.5deg); }
  100% { transform: translate(0px, 0px) rotate(0deg); }
}

/* =========================
   Shared collapse utility
   ========================= */
.assembly-collapse {
  transform-box: fill-box;
  transform-origin: var(--assembly-origin, center center);
  animation: assemblyCollapse var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay: var(--bloom-delay, 0s);
  animation-fill-mode: both;
}

.motif-type-1 .assembly-collapse,
.motif-type-2 .assembly-collapse,
.motif-type-3 .assembly-collapse,
.motif-type-4 .assembly-collapse,
.motif-type-5 .assembly-collapse,
.motif-type-6 .assembly-collapse {
  animation: none;
  opacity: 1;
  transform: scale(1);
}

@keyframes assemblyCollapse {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  2.5% {
    opacity: 0;
    transform: scale(1);
  }
  3.5% {
    opacity: 1;
    transform: scale(1);
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  95% {
    opacity: 1;
    transform: scale(1);
  }
  97.8% {
    opacity: 1;
    transform: scale(1);
  }
  98.3% {
    opacity: 1;
    transform: scale(calc(1 + (var(--assembly-pop-scale, 1.08) - 1) * 0.55));
  }
  98.9% {
    opacity: 0.96;
    transform: scale(calc(1 + (var(--assembly-pop-scale, 1.08) - 1) * 0.3));
  }
  99.3% {
    opacity: 0.82;
    transform: scale(0.72);
  }
  99.65% {
    opacity: 0.58;
    transform: scale(0.5);
  }
  99.85% {
    opacity: 0.3;
    transform: scale(0.28);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

/* =========================
   Motif 1 overrides (eames_01)
   ========================= */
.motif-type-1 {
  --m1-tree-origin: 61.1px 23.2px;
  --m1-disc1-origin: 61.1px 23.2px;
  --m1-disc2-origin: 41.1px 51.6px;
  --m1-disc3-origin: 88.5px 48.6px;
  --m1-disc4-origin: 21.7px 145.5px;
  --m1-disc5-origin: 109.8px 138.7px;
  --m1-disc6-origin: 67px 175.9px;
  --m1-branch1-origin: top center;
  --m1-branch2-origin: right center;
  --m1-branch3-origin: left center;
  --m1-branch4-origin: right center;
  --m1-branch5-origin: left center;
  --assembly-origin: center center;
  --assembly-pop-scale: 1.05;
}

.motif-type-1 svg {
  animation: assemblyCollapse var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay: var(--bloom-delay, 0s);
  animation-fill-mode: both;
  opacity: 1;
}

.motif-type-1 #disc1 {
  transform-origin: var(--m1-disc1-origin);
  animation: m1GrowDisc1 var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) 1;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-1 #tree {
  animation: none !important;
  transform-origin: var(--m1-tree-origin) !important;
  opacity: 1;
}

.motif-type-1 #disc2 {
  transform-origin: var(--m1-disc2-origin);
}

.motif-type-1 #disc3 {
  transform-origin: var(--m1-disc3-origin);
}

.motif-type-1 #disc4 {
  transform-origin: var(--m1-disc4-origin);
}

.motif-type-1 #disc5 {
  transform-origin: var(--m1-disc5-origin);
}

.motif-type-1 #disc6 {
  transform-origin: var(--m1-disc6-origin);
}

.motif-type-1 #branch1 {
  transform-box: fill-box;
  transform-origin: var(--m1-branch1-origin);
  animation: m1GrowBranchY var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-1 #branch2 {
  transform-box: fill-box;
  transform-origin: var(--m1-branch2-origin);
  animation: m1GrowBranchX var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-1 #branch3 {
  transform-box: fill-box;
  transform-origin: var(--m1-branch3-origin);
  animation: m1GrowBranchX var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-1 #branch4 {
  transform-box: fill-box;
  transform-origin: var(--m1-branch4-origin);
  animation: m1GrowBranchX var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-1 #branch5 {
  transform-box: fill-box;
  transform-origin: var(--m1-branch5-origin);
  animation: m1GrowBranchX var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-1 #disc2,
.motif-type-1 #disc3,
.motif-type-1 #disc4,
.motif-type-1 #disc5,
.motif-type-1 #disc6 {
  animation: m1GrowDiscBourgeon var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

@keyframes m1GrowDisc1 {
  0%   { opacity: 0; transform: scale(0.05); }
  8%   { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes m1GrowTree {
  0%   { opacity: 0; transform: scaleX(0.05) scaleY(0.05); }
  12%  { opacity: 1; transform: scaleX(0.05) scaleY(1); }
  24%  { opacity: 1; transform: scaleX(1) scaleY(1); }
  70%  { opacity: 1; transform: scaleX(1) scaleY(1); }
  82%  { opacity: 1; transform: scaleX(0.05) scaleY(1); }
  90%  { opacity: 0; transform: scaleX(0.05) scaleY(0.05); }
  100% { opacity: 0; transform: scaleX(0.05) scaleY(0.05); }
}

@keyframes m1GrowDiscBourgeon {
  0%   { opacity: 0; transform: scale(0.05); }
  5%   { opacity: 0; transform: scale(0.05); }
  17%  { opacity: 1; transform: scale(1); }
  97%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes m1GrowBranchY {
  0%   { opacity: 0; transform: scaleY(0.05); }
  5%   { opacity: 0; transform: scaleY(0.05); }
  13%  { opacity: 1; transform: scaleY(1); }
  97%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

@keyframes m1GrowBranchX {
  0%   { opacity: 0; transform: scaleX(0.05); }
  5%   { opacity: 0; transform: scaleX(0.05); }
  13%  { opacity: 1; transform: scaleX(1); }
  97%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

/* =========================
   Motif 2 overrides (eames_02)
   ========================= */
.motif-type-2 {
  --m2-disc1-origin: 51.1px 119.4px;
  --m2-disc2-origin: 111.668px 73.647px;
  --m2-disc3-origin: 19.475px 77.845px;
  --m2-disc4-origin: 52.351px 22.547px;
  --m2-branch1-origin: 51.079px 113.015px;
  --m2-branch2-origin: left center;
  --m2-branch3-origin: right center;
  --assembly-origin: center center;
  --assembly-pop-scale: 1.05;
}

.motif-type-2 svg {
  animation: assemblyCollapse var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay: var(--bloom-delay, 0s);
  animation-fill-mode: both;
  opacity: 1;
}

.motif-type-2 #disc1 {
  transform-origin: var(--m2-disc1-origin);
  animation: m2GrowDisc1 var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) 1;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-2 #tree {
  animation: none !important;
  opacity: 1;
}

.motif-type-2 #branch1 {
  transform-box: fill-box;
  transform-origin: var(--m2-branch1-origin);
  animation: m2GrowBranchY var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-2 #branch2 {
  transform-box: fill-box;
  transform-origin: var(--m2-branch2-origin);
  animation: m2GrowBranchX var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-2 #branch3 {
  transform-box: fill-box;
  transform-origin: var(--m2-branch3-origin);
  animation: m2GrowBranchX var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-2 #disc2 {
  transform-box: view-box;
  transform-origin: var(--m2-disc2-origin);
}

.motif-type-2 #disc3 {
  transform-box: view-box;
  transform-origin: var(--m2-disc3-origin);
}

.motif-type-2 #disc4 {
  transform-box: view-box;
  transform-origin: var(--m2-disc4-origin);
}

.motif-type-2 #disc2,
.motif-type-2 #disc3,
.motif-type-2 #disc4 {
  animation: m2GrowDiscBourgeon var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

@keyframes m2GrowDisc1 {
  0%   { opacity: 0; transform: scale(0.05); }
  8%   { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes m2GrowBranchY {
  0%   { opacity: 0; transform: scaleY(0.05); }
  5%   { opacity: 0; transform: scaleY(0.05); }
  13%  { opacity: 1; transform: scaleY(1); }
  97%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

@keyframes m2GrowBranchX {
  0%   { opacity: 0; transform: scaleX(0.05); }
  5%   { opacity: 0; transform: scaleX(0.05); }
  13%  { opacity: 1; transform: scaleX(1); }
  97%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes m2GrowDiscBourgeon {
  0%   { opacity: 0; transform: scale(0.05); }
  5%   { opacity: 0; transform: scale(0.05); }
  17%  { opacity: 1; transform: scale(1); }
  97%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* =========================
   Motif 3 overrides (eames_03)
   ========================= */
.motif-type-3 {
  --m3-disc1-origin: 61.799px 21.817px;
  --m3-disc2-origin: 42.763px 68.555px;
  --m3-disc3-origin: 84.358px 64.819px;
  --m3-disc4-origin: 22.703px 109.751px;
  --m3-disc5-origin: 106.027px 106.281px;
  --m3-disc6-origin: 66.419px 146.586px;
  --m3-branch1-origin: 61.799px 21.817px;
  --m3-branch2-origin: 61.799px 60.500px;
  --m3-branch3-origin: 61.799px 68.500px;
  --m3-branch4-origin: 61.799px 105.500px;
  --m3-branch5-origin: 61.799px 105.500px;
  --assembly-origin: center center;
  --assembly-pop-scale: 1.08;
}

.motif-type-3 svg {
  animation: assemblyCollapse var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay: var(--bloom-delay, 0s);
  animation-fill-mode: both;
  opacity: 1;
}

.motif-type-3 #disc1 {
  transform-box: view-box;
  transform-origin: var(--m3-disc1-origin);
  animation: m3GrowDisc1 var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) 1;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-3 #tree {
  animation: none !important;
  opacity: 1;
}

.motif-type-3 #branch1 {
  transform-box: view-box;
  transform-origin: var(--m3-branch1-origin);
  animation: m3GrowBranchY var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-3 #branch2,
.motif-type-3 #branch4,
.motif-type-3 #branch5 {
  transform-box: view-box;
  transform-origin: var(--m3-branch2-origin);
  animation: m3GrowBranchX var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-3 #branch4 {
  transform-origin: var(--m3-branch4-origin);
}

.motif-type-3 #branch5 {
  transform-origin: var(--m3-branch5-origin);
}

.motif-type-3 #branch3 {
  transform-box: view-box;
  transform-origin: var(--m3-branch3-origin);
  animation: m3GrowBranchY var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-3 #disc2 {
  transform-box: view-box;
  transform-origin: var(--m3-disc2-origin);
}

.motif-type-3 #disc3 {
  transform-box: view-box;
  transform-origin: var(--m3-disc3-origin);
}

.motif-type-3 #disc4 {
  transform-box: view-box;
  transform-origin: var(--m3-disc4-origin);
}

.motif-type-3 #disc5 {
  transform-box: view-box;
  transform-origin: var(--m3-disc5-origin);
}

.motif-type-3 #disc6 {
  transform-box: view-box;
  transform-origin: var(--m3-disc6-origin);
}

.motif-type-3 #disc2,
.motif-type-3 #disc3,
.motif-type-3 #disc4,
.motif-type-3 #disc5,
.motif-type-3 #disc6 {
  animation: m3GrowDiscBourgeon var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

@keyframes m3GrowDisc1 {
  0%   { opacity: 0; transform: scale(0.05); }
  8%   { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes m3GrowBranchY {
  0%   { opacity: 0; transform: scaleY(0.05); }
  5%   { opacity: 0; transform: scaleY(0.05); }
  13%  { opacity: 1; transform: scaleY(1); }
  97%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

@keyframes m3GrowBranchX {
  0%   { opacity: 0; transform: scaleX(0.05); }
  5%   { opacity: 0; transform: scaleX(0.05); }
  13%  { opacity: 1; transform: scaleX(1); }
  97%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes m3GrowDiscBourgeon {
  0%   { opacity: 0; transform: scale(0.05); }
  5%   { opacity: 0; transform: scale(0.05); }
  17%  { opacity: 1; transform: scale(1); }
  97%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* =========================
   Motif 4 overrides (eames_04)
   ========================= */
.motif-type-4 {
  --m4-disc1-origin: 52.6px 20.5px;
  --m4-disc2-origin: 90px 69.2px;
  --m4-disc3-origin: 59.1px 109.4px;
  --m4-disc4-origin: 22.8px 73.9px;
  --m4-branch1-origin: left center;
  --m4-branch2-origin: top center;
  --m4-branch3-origin: right center;
  --assembly-origin: center center;
  --assembly-pop-scale: 1.08;
}

.motif-type-4 svg {
  animation: assemblyCollapse var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay: var(--bloom-delay, 0s);
  animation-fill-mode: both;
  opacity: 1;
}

.motif-type-4 #disc1 {
  transform-box: view-box;
  transform-origin: var(--m4-disc1-origin);
  animation: m4GrowDisc1 var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) 1;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-4 #tree {
  animation: none !important;
  opacity: 1;
}

.motif-type-4 #branch1 {
  transform-box: fill-box;
  transform-origin: var(--m4-branch1-origin);
  animation: m4GrowBranchX var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-4 #branch2 {
  transform-box: fill-box;
  transform-origin: var(--m4-branch2-origin);
  animation: m4GrowBranchY var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-4 #branch3 {
  transform-box: fill-box;
  transform-origin: var(--m4-branch3-origin);
  animation: m4GrowBranchX var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-4 #disc2 {
  transform-box: view-box;
  transform-origin: var(--m4-disc2-origin);
}

.motif-type-4 #disc3 {
  transform-box: view-box;
  transform-origin: var(--m4-disc3-origin);
}

.motif-type-4 #disc4 {
  transform-box: view-box;
  transform-origin: var(--m4-disc4-origin);
}

.motif-type-4 #disc2,
.motif-type-4 #disc3,
.motif-type-4 #disc4 {
  animation: m4GrowDiscBourgeon var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

@keyframes m4GrowDisc1 {
  0%   { opacity: 0; transform: scale(0.05); }
  8%   { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes m4GrowBranchY {
  0%   { opacity: 0; transform: scaleY(0.05); }
  5%   { opacity: 0; transform: scaleY(0.05); }
  13%  { opacity: 1; transform: scaleY(1); }
  97%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

@keyframes m4GrowBranchX {
  0%   { opacity: 0; transform: scaleX(0.05); }
  5%   { opacity: 0; transform: scaleX(0.05); }
  13%  { opacity: 1; transform: scaleX(1); }
  97%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes m4GrowDiscBourgeon {
  0%   { opacity: 0; transform: scale(0.05); }
  5%   { opacity: 0; transform: scale(0.05); }
  17%  { opacity: 1; transform: scale(1); }
  97%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* =========================
   Motif 5 overrides (eames_05)
   ========================= */
.motif-type-5 {
  --m5-branch1-origin: left center;
  --m5-branch2-origin: center bottom;
  --m5-branch3-origin: left center;
  --m5-branch4-origin: right center;
  --m5-branch5-origin: center top;
  --m5-branch6-origin: left center;
  --m5-branch7-origin: right center;
  --m5-branch8-origin: right center;
  --m5-branch9-origin: left center;

  --m5-disc1-origin: 23.1px 54.8px;
  --m5-disc2-origin: 160.7px 51.3px;
  --m5-disc3-origin: 150.6px 5.8px;
  --m5-disc4-origin: 81.4px 11px;
  --m5-disc5-origin: 159.7px 144.3px;
  --m5-disc6-origin: 84.2px 148.5px;
  --m5-disc7-origin: 74.7px 82.7px;
  --m5-disc8-origin: 122.2px 77.7px;

  --assembly-origin: center center;
  --assembly-pop-scale: 1.1;
}

.motif-type-5 svg {
  animation: assemblyCollapse var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay: var(--bloom-delay, 0s);
  animation-fill-mode: both;
  opacity: 1;
}

.motif-type-5 #tree {
  animation: none !important;
  opacity: 1;
}

.motif-type-5 #branch1,
.motif-type-5 #branch3,
.motif-type-5 #branch4,
.motif-type-5 #branch6,
.motif-type-5 #branch7,
.motif-type-5 #branch8,
.motif-type-5 #branch9 {
  transform-box: fill-box;
  animation: m5GrowBranchXLevel2 var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-5 #branch2,
.motif-type-5 #branch5 {
  transform-box: fill-box;
  animation: m5GrowBranchYLevel2 var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-5 #branch1 {
  animation: m5GrowBranchXLevel1 var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
}

.motif-type-5 #branch6,
.motif-type-5 #branch7,
.motif-type-5 #branch3 {
  animation: m5GrowBranchXLevel3 var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
}

.motif-type-5 #branch1 { transform-origin: var(--m5-branch1-origin); }
.motif-type-5 #branch2 { transform-origin: var(--m5-branch2-origin); }
.motif-type-5 #branch3 { transform-origin: var(--m5-branch3-origin); }
.motif-type-5 #branch4 { transform-origin: var(--m5-branch4-origin); }
.motif-type-5 #branch5 { transform-origin: var(--m5-branch5-origin); }
.motif-type-5 #branch6 { transform-origin: var(--m5-branch6-origin); }
.motif-type-5 #branch7 { transform-origin: var(--m5-branch7-origin); }
.motif-type-5 #branch8 { transform-origin: var(--m5-branch8-origin); }
.motif-type-5 #branch9 { transform-origin: var(--m5-branch9-origin); }

.motif-type-5 #disc1 {
  transform-box: view-box;
  transform-origin: var(--m5-disc1-origin);
  animation: m5GrowDisc1 var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) 1;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-5 #disc2,
.motif-type-5 #disc3,
.motif-type-5 #disc4,
.motif-type-5 #disc5,
.motif-type-5 #disc6,
.motif-type-5 #disc7,
.motif-type-5 #disc8 {
  transform-box: view-box;
  animation: m5GrowDiscLevel3 var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-5 #disc2 {
  animation: m5GrowDiscLevel2 var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
}

.motif-type-5 #disc5,
.motif-type-5 #disc6 {
  animation: m5GrowDiscLevel4 var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
}

.motif-type-5 #disc2 { transform-origin: var(--m5-disc2-origin); }
.motif-type-5 #disc3 { transform-origin: var(--m5-disc3-origin); }
.motif-type-5 #disc4 { transform-origin: var(--m5-disc4-origin); }
.motif-type-5 #disc5 { transform-origin: var(--m5-disc5-origin); }
.motif-type-5 #disc6 { transform-origin: var(--m5-disc6-origin); }
.motif-type-5 #disc7 { transform-origin: var(--m5-disc7-origin); }
.motif-type-5 #disc8 { transform-origin: var(--m5-disc8-origin); }

@keyframes m5GrowDisc1 {
  0%   { opacity: 0; transform: scale(0.05); }
  8%   { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes m5GrowBranchY {
  0%   { opacity: 0; transform: scaleY(0.05); }
  5%   { opacity: 0; transform: scaleY(0.05); }
  13%  { opacity: 1; transform: scaleY(1); }
  97%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

@keyframes m5GrowBranchX {
  0%   { opacity: 0; transform: scaleX(0.05); }
  5%   { opacity: 0; transform: scaleX(0.05); }
  13%  { opacity: 1; transform: scaleX(1); }
  97%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes m5GrowBranchXLevel1 {
  0%   { opacity: 0; transform: scaleX(0.05); }
  5%   { opacity: 0; transform: scaleX(0.05); }
  13%  { opacity: 1; transform: scaleX(1); }
  97%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes m5GrowBranchYLevel2 {
  0%   { opacity: 0; transform: scaleY(0.05); }
  13%  { opacity: 0; transform: scaleY(0.05); }
  21%  { opacity: 1; transform: scaleY(1); }
  97%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}

@keyframes m5GrowBranchXLevel2 {
  0%   { opacity: 0; transform: scaleX(0.05); }
  13%  { opacity: 0; transform: scaleX(0.05); }
  21%  { opacity: 1; transform: scaleX(1); }
  97%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes m5GrowBranchXLevel3 {
  0%   { opacity: 0; transform: scaleX(0.05); }
  21%  { opacity: 0; transform: scaleX(0.05); }
  29%  { opacity: 1; transform: scaleX(1); }
  97%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes m5GrowDiscBourgeon {
  0%   { opacity: 0; transform: scale(0.05); }
  5%   { opacity: 0; transform: scale(0.05); }
  17%  { opacity: 1; transform: scale(1); }
  97%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes m5GrowDiscLevel2 {
  0%   { opacity: 0; transform: scale(0.05); }
  13%  { opacity: 0; transform: scale(0.05); }
  25%  { opacity: 1; transform: scale(1); }
  97%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes m5GrowDiscLevel3 {
  0%   { opacity: 0; transform: scale(0.05); }
  21%  { opacity: 0; transform: scale(0.05); }
  33%  { opacity: 1; transform: scale(1); }
  97%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes m5GrowDiscLevel4 {
  0%   { opacity: 0; transform: scale(0.05); }
  29%  { opacity: 0; transform: scale(0.05); }
  41%  { opacity: 1; transform: scale(1); }
  97%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* =========================
   Motif 6 overrides
   ========================= */
.motif-type-6 {
  --m6-disc1-origin: 22.3px 47.8px;
  --m6-disc2-origin: 46.5px 21.6px;
  --m6-disc3-origin: 51.5px 66.2px;
  --m6-branch1-origin: left center;
  --m6-branch2-origin: 51.6px 45.4px;
  --m6-branch3-origin: 38.7px 46.5px;
  --assembly-origin: center center;
  --assembly-pop-scale: 1.08;
}

.motif-type-6 svg {
  animation: assemblyCollapse var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-delay: var(--bloom-delay, 0s);
  animation-fill-mode: both;
  opacity: 1;
}

.motif-type-6 #disc1 {
  transform-origin: var(--m6-disc1-origin);
  animation: m6GrowDisc1 var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) 1;
  animation-delay: var(--bloom-delay, 0s);
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-6 #branch1 {
  transform-box: view-box;
  transform-origin: var(--m6-branch1-origin);
  animation: m6GrowBranch1 var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-6 #branch2 {
  transform-box: view-box;
  transform-origin: var(--m6-branch2-origin);
  animation: m6GrowBranch2 var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-6 #branch3 {
  transform-box: view-box;
  transform-origin: var(--m6-branch3-origin);
  animation: m6GrowBranch3 var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-6 #disc2 {
  transform-box: view-box;
  transform-origin: var(--m6-disc2-origin);
  animation: m6GrowDisc2 var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

.motif-type-6 #disc3 {
  transform-box: view-box;
  transform-origin: var(--m6-disc3-origin);
  animation: m6GrowDisc3 var(--cycle-duration, 20s) cubic-bezier(.2,.8,.2,1) infinite;
  animation-fill-mode: both;
  opacity: 0;
}

@keyframes m6GrowDisc1 {
  0% {
    opacity: 0;
    transform: scale(0.05);
  }
  3.5% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes m6GrowBranch1 {
  0% {
    opacity: 0;
    transform: scaleX(0.05);
  }
  5% {
    opacity: 0;
    transform: scaleX(0.05);
  }
  13% {
    opacity: 1;
    transform: scaleX(1);
  }
  97% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(1);
  }
}

@keyframes m6GrowBranch2 {
  0% {
    opacity: 0;
    transform: scaleY(0.05);
  }
  5% {
    opacity: 0;
    transform: scaleY(0.05);
  }
  13% {
    opacity: 1;
    transform: scaleY(1);
  }
  97% {
    opacity: 1;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform: scaleY(1);
  }
}

@keyframes m6GrowBranch3 {
  0% {
    opacity: 0;
    transform: scaleY(0.05);
  }
  5% {
    opacity: 0;
    transform: scaleY(0.05);
  }
  13% {
    opacity: 1;
    transform: scaleY(1);
  }
  97% {
    opacity: 1;
    transform: scaleY(1);
  }
  100% {
    opacity: 0;
    transform: scaleY(1);
  }
}

@keyframes m6GrowDisc2 {
  0% {
    opacity: 0;
    transform: scale(0.05);
  }
  5% {
    opacity: 0;
    transform: scale(0.05);
  }
  17% {
    opacity: 1;
    transform: scale(1);
  }
  97% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

@keyframes m6GrowDisc3 {
  0% {
    opacity: 0;
    transform: scale(0.05);
  }
  5% {
    opacity: 0;
    transform: scale(0.05);
  }
  17% {
    opacity: 1;
    transform: scale(1);
  }
  97% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}