/* Framework mechanism CSS - NOT a design system. Contains only the two rules
   the framework's own JS logic requires to function; carries no colors,
   fonts, layout, or any other design opinion. Never edited per-site - the AI
   designs 100% of the site's actual visual appearance in data/styles.css. */

/* app/main.js's IntersectionObserver adds .is-visible when a [data-animate]
   element scrolls into view. Without this rule the element has no initial
   hidden state and no transition, so nothing would ever appear to animate. */
[data-animate] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* app/main.js's editor bridge adds this class to every [data-block-id]
   element when the admin panel enables edit mode, so an operator can see
   and click which block they're about to edit. */
.edit-mode-block {
  outline: 2px dashed rgba(99, 102, 241, 0.5);
  outline-offset: 4px;
  cursor: pointer;
  transition: outline-color 0.15s;
}
.edit-mode-block:hover {
  outline-color: rgba(99, 102, 241, 1);
}