/* Homunculus homepage demo. All layers share the same 887x1774 source canvas. */
/* 1. Base styles and animation settings */
.homunculus-demo,
.homunculus-demo *,
.homunculus-demo *::before,
.homunculus-demo *::after {
  box-sizing: border-box;
}

.homunculus-demo {
  --homunculus-demo-cycle: 13s;
  --homunculus-demo-stage-height: 400px;
  --homunculus-demo-body-gap: 12px;
  --homunculus-demo-panel-x: 0px;
  --homunculus-demo-panel-y: 12px;

  container: homunculus-demo / inline-size;
  width: 100%;
  color: #202020;
  line-height: 1.4;
}

.homunculus-demo__stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 16px;
  padding: var(--homunculus-demo-body-gap) 14px 20px;
  background: #fff;
  border-radius: 10px;
  isolation: isolate;
}

/* 2. Body image and organ color layers */
.homunculus-demo__figure {
  grid-area: 1 / 1;
  position: relative;
  width: min(calc((var(--homunculus-demo-stage-height) - 2 * var(--homunculus-demo-body-gap)) / 1.9), 70cqw);
  margin: 0;
  aspect-ratio: 10 / 19;
  overflow: hidden; /* Same bottom-whitespace crop as DocDia. */
}

.homunculus-demo__body,
.homunculus-demo__organ-state {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: auto;
}

.homunculus-demo__organ-state {
  opacity: 0;
  pointer-events: none;
  animation: var(--homunculus-demo-state-animation) var(--homunculus-demo-cycle) ease-in-out infinite;
}

.homunculus-demo__organ-state--eye-cyan {
  --homunculus-demo-state-animation: homunculus-demo-eye-cyan;
}

.homunculus-demo__organ-state--eye-red {
  --homunculus-demo-state-animation: homunculus-demo-eye-red;
}

.homunculus-demo__organ-state--heart-red {
  --homunculus-demo-state-animation: homunculus-demo-heart-red;
}

/* 3. Panels: narrow-screen defaults, with wide-screen overrides below */

/* Mobile panels share the figure's grid cell and sit below their organ.
   The figure reserves the height, so neither animation changes the layout. */
.homunculus-demo__panel-slot {
  position: relative;
  grid-area: 1 / 1;
  align-self: stretch;
  width: 100%;
  min-width: 0;
  z-index: 1;
  pointer-events: none;
}

.homunculus-demo__panel {
  position: absolute;
  left: 0;
  right: 0;
  width: min(100%, 260px);
  margin-inline: auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1.5px solid #888888;
  border-radius: 4px;
  background: #eeeeee;
  box-shadow: 0 3px 10px #0000000a;
  color: #151515;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
  opacity: 0;
  visibility: hidden;
  animation: homunculus-demo-panel-eye var(--homunculus-demo-cycle) ease-in-out infinite;
}

/* Narrow-screen panel position: a smaller top value moves the panel upward. */
.homunculus-demo__panel--eye {
  top: 14%;
}

.homunculus-demo__panel--heart {
  top: 51%;
  animation-name: homunculus-demo-panel-heart;
}

.homunculus-demo__panel-title {
  margin: 0 0 4px;
  color: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
}

.homunculus-demo__panel p {
  margin: 0;
}

.homunculus-demo__panel p + p {
  margin-top: 3px;
}

.homunculus-demo__panel time {
  white-space: nowrap;
}

/* 4. Two-tone legend and static status labels */
.homunculus-demo__legend,
.homunculus-demo__statuses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 10px;
  width: min(100%, 340px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.72rem;
  font-weight: 600;
}

.homunculus-demo__legend li,
.homunculus-demo__statuses li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.homunculus-demo__swatch {
  position: relative;
  width: 28px;
  height: 14px;
  border: 1px solid #777777;
  border-radius: 1px;
  background: linear-gradient(to right, var(--homunculus-demo-color) 50%, var(--homunculus-demo-color-light) 50%);
}

.homunculus-demo__swatch::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 1px solid #777777;
}

.homunculus-demo__swatch--circulation {
  --homunculus-demo-color: #ff4040;
  --homunculus-demo-color-light: #ffb4b4;
}

.homunculus-demo__swatch--function {
  --homunculus-demo-color: #00c5cd;
  --homunculus-demo-color-light: #aed6f1;
}

.homunculus-demo__swatch--inflammation {
  --homunculus-demo-color: #ffe100;
  --homunculus-demo-color-light: #fcf3cf;
}

.homunculus-demo__swatch--malignancy {
  --homunculus-demo-color: #319e52;
  --homunculus-demo-color-light: #b4dcbe;
}

.homunculus-demo__swatch--other {
  --homunculus-demo-color: #c49b60;
  --homunculus-demo-color-light: #e6d7b9;
}

.homunculus-demo__swatch--removal {
  --homunculus-demo-color: #b4b4b4;
  --homunculus-demo-color-light: #e6e6e6;
}

.homunculus-demo__statuses {
  width: min(100%, 280px);
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
}

.homunculus-demo__statuses li {
  grid-template-columns: 13px minmax(0, 1fr);
}

.homunculus-demo__statuses li::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 1px solid #64748b;
  border-radius: 50%;
}

/* 5. Wide layout: container at least 720px, excluding mobile and short landscape viewports */

/* Desktop uses independently anchored columns: the figure remains centered. */
@container homunculus-demo (min-width: 720px) {
  @media screen and (width > 850px) and (height > 500px),
         screen and (width > 850px) and (orientation: portrait) {
    .homunculus-demo__stage {
      --homunculus-demo-panel-x: 12px;
      --homunculus-demo-panel-y: 0px;

      display: block;
      min-height: var(--homunculus-demo-stage-height);
      padding: 0;
    }

    .homunculus-demo__figure {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .homunculus-demo__legend,
    .homunculus-demo__statuses {
      position: absolute;
      right: calc(50% + 110px);
      width: 180px;
      text-align: left;
      max-width: calc(50% - 126px);
      grid-template-columns: minmax(0, 1fr);
    }

    .homunculus-demo__legend {
      top: 48px;
    }

    .homunculus-demo__statuses {
      top: 232px;
      padding-top: 0;
      border-top: 0;
    }

    .homunculus-demo__panel-slot {
      position: absolute;
      display: grid;
      grid-template-rows: minmax(100px, auto) auto;
      align-items: start;
      gap: 12px;
      top: 48px;
      left: calc(50% + 38px);
      width: calc(50% - 54px);
      max-width: 260px;
    }

    .homunculus-demo__panel {
      position: relative;
      inset: auto;
      width: 100%;
      margin: 0;
    }
  }
}

/* 6. Animation timeline (13 seconds)
 * 1–1.5s: eye colors fade in; 1.7–2.1s: eye panel fades in.
 * 4.4–4.9s: heart color fades in; 5.1–5.5s: heart panel fades in.
 * Both panels remain until 11.4s, finish fading out at 12s, and restart at 13s.
 */

/* 13-second sequence: original entrances, both panels held until 11.4s, reset at 12s. */
@keyframes homunculus-demo-eye-cyan {
  0%, 7.6922%, 92.3078%, 100% {
    opacity: 0;
  }
  10.7695%, 87.6922% {
    opacity: 1;
  }
}

@keyframes homunculus-demo-eye-red {
  0%, 8.4614%, 92.3078%, 100% {
    opacity: 0;
  }
  11.5387%, 87.6922% {
    opacity: 1;
  }
}

@keyframes homunculus-demo-heart-red {
  0%, 33.8462%, 92.3078%, 100% {
    opacity: 0;
  }
  37.692%, 87.6922% {
    opacity: 1;
  }
}

@keyframes homunculus-demo-panel-eye {
  0%, 13.077%, 92.3078%, 100% {
    opacity: 0;
    visibility: hidden;
    transform: translate(var(--homunculus-demo-panel-x), var(--homunculus-demo-panel-y));
  }
  16.1536%, 87.6922% {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
  }
}

@keyframes homunculus-demo-panel-heart {
  0%, 39.231%, 92.3078%, 100% {
    opacity: 0;
    visibility: hidden;
    transform: translate(var(--homunculus-demo-panel-x), var(--homunculus-demo-panel-y));
  }
  42.3076%, 87.6922% {
    opacity: 1;
    visibility: visible;
    transform: translate(0, 0);
  }
}

/* 7. Homepage container, product-switch reset, and reduced motion */
.product-preview.product-preview--homunculus {
  padding: 0;
  background: #fff;
}

[data-product-panel="homunculus"]:not(.is-active) .homunculus-demo__organ-state,
[data-product-panel="homunculus"]:not(.is-active) .homunculus-demo__panel {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .homunculus-demo__organ-state,
  .homunculus-demo__panel {
    animation: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}