/* ============================================================================
   LEGO — rising-button (lego.rising-button)
   Converted from Clone 08 (CG-11), the verified rising-fill mechanism.
   Mechanism values are frozen [ref]; presentation is configurable via tokens.

   Scope: [data-lego="rising-button"] only. Zero html/body/:root/* rules.
   No page-level z-index claims (z-index 2 is local to the button's context).
   ============================================================================ */

[data-lego="rising-button"] {
  /* ---- presentation tokens (override from any ancestor; defaults local) ---- */
  --lego-rb-fill: #ffd001;            /* [ref] default accent */
  --lego-rb-fill-text: #000;          /* label/state color over the fill */
  --lego-rb-text: inherit;            /* resting label color (harness skin) */
  --lego-rb-bg: transparent;
  --lego-rb-border: currentColor;
  --lego-rb-radius: 100vw;            /* [ref] */
  --lego-rb-height: 2.8rem;           /* [ref] */
  --lego-rb-padding: 0.88rem 1.25rem; /* [ref] */
  --lego-rb-focus: currentColor;
  --lego-rb-icon-bg: #fffef7;         /* [ref] icon circle */
  --lego-rb-icon-text: #000;
  --lego-rb-icon-hover-bg: #000;      /* [ref] inversion on hover */
  --lego-rb-icon-hover-text: var(--lego-rb-fill);

  /* ---- structure (mechanism requirements) ---- */
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  box-sizing: border-box;
  height: var(--lego-rb-height);
  padding: var(--lego-rb-padding);
  border: 1px solid var(--lego-rb-border);
  border-radius: var(--lego-rb-radius);
  background-color: var(--lego-rb-bg);
  color: var(--lego-rb-text);
  font: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s; /* [ref] */
}

[data-lego="rising-button"]:focus-visible {
  outline: 2px solid var(--lego-rb-focus);
  outline-offset: 3px;
}

/* ---- the fill rect: height 0% -> 100%, 0.7s cubic-bezier(0.625, 0.05, 0, 1) ---- */
[data-lego="rising-button"] .lego-rb__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 0%;
  background-color: var(--lego-rb-fill);
  pointer-events: none;
  transition: height 0.7s cubic-bezier(0.625, 0.05, 0, 1); /* [ref] */
}

[data-lego="rising-button"] .lego-rb__label {
  position: relative;
  z-index: 2;
}

/* ---- icon variant (optional circle that inverts over the fill) ---- */
[data-lego="rising-button"] .lego-rb__icon {
  position: relative;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  box-sizing: border-box;
  border-radius: 100vw;
  background-color: var(--lego-rb-icon-bg);
  color: var(--lego-rb-icon-text);
  transition:
    background-color 0.6s cubic-bezier(0.25, 0.1, 0.25, 1),
    color 0.6s cubic-bezier(0.25, 0.1, 0.25, 1); /* [ref] */
}

[data-lego="rising-button"] .lego-rb__icon svg {
  width: 0.88rem;
  height: 0.88rem;
  display: block;
}

/* ---- hover: fine pointers only (touch keeps the control plain and usable) ---- */
@media (hover: hover) and (pointer: fine) {
  [data-lego="rising-button"]:hover .lego-rb__fill {
    height: 100%; /* [ref] */
  }

  [data-lego="rising-button"]:hover {
    color: var(--lego-rb-fill-text); /* [ref] readable label over the fill */
  }

  [data-lego="rising-button"]:hover .lego-rb__icon {
    background-color: var(--lego-rb-icon-hover-bg);   /* [ref] */
    color: var(--lego-rb-icon-hover-text);            /* [ref] */
  }
}

/* ---- reduced motion: near-instant travel, state still conveyed ---- */
@media (prefers-reduced-motion: reduce) {
  [data-lego="rising-button"] {
    transition-duration: 0.15s;
  }

  [data-lego="rising-button"] .lego-rb__fill {
    transition-duration: 0.15s;
  }

  [data-lego="rising-button"] .lego-rb__icon {
    transition-duration: 0.15s, 0.15s;
  }
}