/* hero-animation.css
   Drop-in brush-reveal animation for any container.
   Cursor style is intentionally unset — inherits from the parent document.
   Accent colour override: set --ha-accent on the container or a parent rule.
   e.g.  .my-panel { --ha-accent: #ff6b6b; }
*/

.ha-wrap {
  position: relative;
  overflow: hidden;
}

.ha-base {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
}

.ha-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
}

.ha-ring {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--ha-accent, rgba(83, 183, 114, 0.9));
  border-radius: 50%;
  pointer-events: none;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 3;
  will-change: transform, opacity;
}

.ha-label {
  position: absolute;
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--ha-accent, rgba(83, 183, 114, 0.9));
  white-space: nowrap;
  pointer-events: none;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 4;
  text-transform: uppercase;
  will-change: transform, opacity;
}

.ha-static-label {
  position: absolute;
  bottom: 24px;
  left: 24px;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  pointer-events: none;
  z-index: 4;
  opacity: 1;
  text-transform: uppercase;
  will-change: opacity;
  transition: opacity 0.2s;
}