/* =========================================================
   DEFINE COMPONENT
   Comes after the Empathize section. Fixed 1165 x 876 artboard that
   js/define/main.js scales to fit. Behaviour: js/define/main.js
   (All class names are prefixed "define-" because .layer / .card etc.
   are already used by other components.)
   ========================================================= */

.define-section {
  /* sits above the fixed dots / grid-lines layers */
  position: relative;
  z-index: 1;
  overflow-x: clip;

  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* Takes up the *scaled* size of the artboard so the page layout is correct */
.define-fit {
  position: relative;
  flex: none;
  width: calc(1165px * var(--define-fit, 1));
  height: calc(876px * var(--define-fit, 1));
}

/* ---------- artboard ---------- */
.define-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 1165px;
  height: 876px;
  overflow: hidden;
  transform: scale(var(--define-fit, 1));
  transform-origin: 0 0;
}

.define-stage img {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

.define-layer { position: absolute; display: block; }

/* 1. notepaper — x 41, y 74, 748 x 857 */
.define-notepaper { left: 41px; top: 74.28px; width: 748.24px; height: 857.06px; }

/* 2. knight — rotate() pivots on the image's top-left corner.
      The shadow sits on the un-rotated wrapper so it always falls straight down. */
.define-knight {
  left: 178.87px; top: 277.89px;
  width: 264px; height: 464.5px;
  filter: drop-shadow(0 10px 2px rgb(0 0 0 / .25));
}
.define-knight img {
  width: 100%; height: 100%;
  transform-origin: 0 0;
  transform: rotate(22.1155deg);
  cursor: pointer;
}

/* 3. target — 519 x 519, rotated -15deg around its top-left corner.
      Resting pose is set here; main.js takes over the img transform on hover. */
.define-target {
  left: 425.61px; top: 134.44px;
  width: 519.42px; height: 519.42px;
  filter: drop-shadow(0 20px 2px rgb(0 0 0 / .25));
}
.define-target img {
  width: 100%; height: 100%;
  transform-origin: 0 0;
  transform: rotate(-15deg);
  will-change: transform;
  cursor: pointer;
}

/* 4. compass — animated SVG, natural size 421 x 397 */
.define-compass { left: 743.49px; top: 394.26px; width: 421px; height: 397px; }

/* 5. chat card — animated SVG, 508 x 212 (460 x 164 card + shadow area) */
.define-card { left: 396.52px; top: 627.91px; width: 508px; height: 212px; }

/* 6. handwritten "Define" title in the empty top-right corner. Same visible height as the Empathize
      title (45.5); this artboard is drawn at 1.04x, so 45.5 / 1.04 = 43.75 tall, 84.2 wide (129 x 67 artwork). */
.define-title { left: 400px; top: 61px; width: 84.2px; height: 43.75px; rotate: -30deg; }