/* ==========================================================
   Broken Stones Canvas — bs-canvas.css
   Objects are placed on a coordinate grid by bs-canvas.js.
   Edit :root vars to restyle. Animations are at the bottom.
   ========================================================== */

:root {
  --bs-bg:      #000000;
  --bs-text:    #f5f5f0;
  --bs-border:  rgba(245, 245, 240, 0.3);
  --bs-hover:   #ffffff;
}

/* ---- Canvas pages: black background, no scroll ---- */
body.bs-canvas-page {
  background: var(--bs-bg);
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* ---- Grid container on canvas pages: black background ---- */
body.bs-canvas-page .new-grid-container {
  background: var(--bs-bg) !important;
}


/* =========================================================
   Objects
   ========================================================= */

.bs-obj {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.bs-obj-linked {
  cursor: pointer;
}


/* =========================================================
   Text object  (.bs-text-heading / .bs-text-nav / .bs-text-default)
   ========================================================= */

.bs-text {
  font-family: 'Courier New', Consolas, monospace;
  color: var(--bs-text);
  font-weight: 700;
  text-align: center;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.bs-text-heading {
  letter-spacing: 0.12em;
}

.bs-text-nav {
  letter-spacing: 0.18em;
  border: 1px solid var(--bs-border);
  transition: border-color 0.2s ease, color 0.2s ease;
}

.bs-obj-linked:hover .bs-text-nav {
  border-color: var(--bs-hover);
  color: var(--bs-hover);
}


/* =========================================================
   Enter animations
   Add new ones here — name becomes available in the builder
   ========================================================= */

/* fade */
.bs-anim-enter.bs-anim-fade {
  animation: bsFadeIn 0.7s ease forwards;
}
@keyframes bsFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* slide-up */
.bs-anim-enter.bs-anim-slide-up {
  animation: bsSlideUp 0.55s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes bsSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* slide-down */
.bs-anim-enter.bs-anim-slide-down {
  animation: bsSlideDown 0.55s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes bsSlideDown {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* slide-left */
.bs-anim-enter.bs-anim-slide-left {
  animation: bsSlideLeft 0.55s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes bsSlideLeft {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* slide-right */
.bs-anim-enter.bs-anim-slide-right {
  animation: bsSlideRight 0.55s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes bsSlideRight {
  from { opacity: 0; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* scale-in */
.bs-anim-enter.bs-anim-scale-in {
  animation: bsScaleIn 0.5s cubic-bezier(.2, .8, .3, 1) forwards;
}
@keyframes bsScaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}