/* Decorative palm-heart growth scene for the contact form information panel. */
.modal-content .info-container {
  position: relative;
}

.palm-growth-scene {
  position: absolute;
  top: 22rem;
  right: 0;
  bottom: auto;
  left: 0;
  display: grid;
  height: 23rem;
  min-height: 0;
  place-items: center;
  pointer-events: none;
  opacity: 0.92;
}

.palm-growth-scene svg {
  width: min(96%, 22rem);
  max-height: 21rem;
  overflow: visible;
}

.palm-growth-ground {
  fill: #062d43;
  stroke: #5fc4b9;
  stroke-width: 1.5;
}

.palm-growth-trunk {
  fill: none;
  stroke: #8ebc43;
  stroke-linecap: round;
  stroke-width: 19;
}

.palm-growth-trunk-detail,
.palm-growth-root {
  fill: none;
  stroke: #c1df63;
  stroke-linecap: round;
  stroke-width: 2.6;
  opacity: 0.8;
}

.palm-growth-trunk-pattern {
  fill: none;
  stroke: #d5ff64;
  stroke-linecap: round;
  stroke-width: 2;
  opacity: 0.72;
}

.palm-growth-crown {
  fill: #d5ff64;
  stroke: #75bc4a;
  stroke-width: 2;
}

.palm-growth-frond {
  fill: none;
  stroke: #37aa82;
  stroke-linecap: round;
  stroke-width: 13;
  transform-box: fill-box;
  transform-origin: center bottom;
}

.palm-growth-leaflet {
  fill: none;
  stroke: #58ba72;
  stroke-linecap: round;
  stroke-width: 5;
  transform-box: fill-box;
  transform-origin: center;
}

.palm-growth-leaflet-alt {
  stroke: #92cf4d;
}

.palm-growth-frond-alt {
  stroke: #74c34c;
}

.palm-growth-heart {
  fill: #d5ff64;
}

.palm-growth-can-body {
  fill: #075178;
  stroke: #78d5c7;
  stroke-width: 2;
}

.palm-growth-can-lid {
  fill: #d4eef0;
  stroke: #78d5c7;
  stroke-width: 2;
}

.palm-growth-can-rim,
.palm-growth-can-rib,
.palm-growth-can-seam {
  fill: none;
  stroke: #a9e7dc;
  stroke-linecap: round;
}

.palm-growth-can-rim {
  stroke-width: 2.4;
}

.palm-growth-can-rib {
  stroke-width: 1.4;
  opacity: 0.72;
}

.palm-growth-can-seam {
  stroke: #65b9cf;
  stroke-width: 1.2;
  opacity: 0.76;
}

.palm-growth-can-label {
  fill: none;
  stroke: #d5ff64;
  stroke-width: 2;
}

@media (max-width: 900px) {
  .palm-growth-scene {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .palm-growth-scene {
    display: none;
  }
}

/* High-detail generated botanical asset used in the same animated scene. */
.palm-growth-scene:has(.palm-growth-image) {
  top: 24.75rem;
  height: 26rem;
}

.palm-growth-image {
  display: block;
  width: min(100%, 22rem);
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1rem 1.1rem rgba(0, 12, 23, 0.36));
  transform-origin: center bottom;
}

/* Layered young palmito plant: trunk, canopy, can and brand mark animate independently. */
.palm-growth-scene:has(.palm-layer-stack) {
  top: 24.75rem;
  height: 26rem;
}

.palm-layer-stack {
  position: relative;
  width: min(100%, 22rem);
  height: 100%;
  aspect-ratio: 2 / 3;
}

.palm-plant-layer,
.palm-can-stack,
.palm-can-logo {
  opacity: 0;
}

.palm-plant-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.palm-plant-base {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0 47%, #000 55% 100%);
  mask-image: linear-gradient(to bottom, transparent 0 47%, #000 55% 100%);
  transform-origin: center bottom;
}

.palm-plant-crown {
  -webkit-mask-image: linear-gradient(to bottom, #000 0 50%, transparent 60% 100%);
  mask-image: linear-gradient(to bottom, #000 0 50%, transparent 60% 100%);
  transform-origin: 50% 52%;
}

.palm-can-stack {
  position: absolute;
  right: 8%;
  bottom: 3%;
  width: 28%;
  transform-origin: center bottom;
}

.palm-can-image {
  display: block;
  width: 100%;
  filter: drop-shadow(0 0.6rem 0.7rem rgba(0, 12, 23, 0.36));
}