/* Entropy product hero. Scoped to this page: the shared .hero rules in
   wc.css are untouched.

   A still since 22 Oct 2026, at Harry's request. The live mini Entropy that
   used to fade in over this poster is gone, along with its drag-to-rotate
   cursors; the poster is now the hero, painted before any script runs. */

.entropy-hero-live {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .78;
  background: var(--field-stage);
}

/* Duo Sprites poster, the first frame of the live scene. It fills the
   hero from the top. This still has no burned-in label, so it is not
   shifted past the hero's bottom edge. */
.entropy-hero-live::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/entropy-player/scenes/duo-sprites/poster.webp") center top / cover no-repeat;
}

/* Left-weighted veil, same stops as the Lumen hero scrim, so the frame
   never sits at full strength behind the headline and the copy.
   The right side of the hero stays open. */
.entropy-hero .hero-scrim {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .45) 35%, rgba(0, 0, 0, .1) 65%, transparent 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .08) 40%, rgba(0, 0, 0, .55) 100%);
}
.entropy-hero .hero-body { z-index: 1; }

/* The eyebrow, matching the Lumen hero: same gold, same step up from the
   quiet .section-label used elsewhere. */
.entropy-hero .section-label {
  color: var(--gold);
  font-size: .92rem;
}

/* Same gap between the lockup and the headline as the Lumen hero. */
.entropy-hero .hero-copy {
  margin-top: clamp(1.35rem, 2.8vh, 2.15rem);
}

/* Buy Now and the offer price on one row, in flow under the title.
   Same gold .button from wc.css, drawn a bit larger here. On all widths
   it sits in flow under the title, left aligned to the title's left edge. */
.entropy-hero .entropy-hero-lockup {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .85rem 1.15rem;
}

.entropy-hero .entropy-hero-price {
  margin: 0;
  color: var(--gold);
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 2.4vw, 2.15rem);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  text-shadow: 0 1px .9rem rgba(0, 0, 0, .92);
}

.entropy-hero .entropy-hero-buy-button {
  min-height: 3.9rem;
  min-width: 15.5rem;
  padding: 1.05rem 3.2rem;
  font-size: 1.32rem;
  z-index: 2;
}

@media (min-width: 761px) {
  .entropy-hero .entropy-hero-buy-button {
    display: inline-flex;
    margin-top: 1.5rem;
  }

  .entropy-hero .entropy-hero-price {
    margin-top: 1.5rem;
  }
}

@media (max-width: 760px) {
  .entropy-hero-live::before {
    background-image: url("/entropy-player/scenes/duo-sprites/poster-mobile.webp");
  }

  .entropy-hero .entropy-hero-lockup {
    margin-top: 1.75rem;
  }

  .entropy-hero .hero-copy {
    margin-top: 2rem;
  }

  .entropy-hero .entropy-hero-buy-button {
    display: inline-flex;
    width: auto;
    min-width: 0;
    min-height: 3.1rem;
    margin-top: 0;
    padding: .8rem 1.9rem;
    font-size: 1.05rem;
  }

  .entropy-hero .entropy-hero-price {
    margin-top: 0;
  }
}

/* The reel, moved down from the hero into its own section. */
/* The reel sits in the hero's right column. A border and a dark bed keep it
   a distinct object against the particles behind it. */
.entropy-hero .hero-demo { z-index: 2; }