/* ============================================================
   COLLAGE — layout model

   .stage   fixed-aspect canvas that defines the coordinate space
   .piece   absolutely positioned, anchored at its own centre

   A piece never sets `transform` itself. It sets --rot and --scale,
   and the single transform below composes them. That way rotation and
   scale can never clobber each other, and either can be animated,
   overridden per-breakpoint, or driven from TypeScript in isolation.
   ============================================================ */

@property --x     { syntax: "<number>"; inherits: false; initial-value: 50 }
@property --y     { syntax: "<number>"; inherits: false; initial-value: 50 }
@property --w     { syntax: "<number>"; inherits: false; initial-value: 24 }
@property --rot   { syntax: "<angle>";  inherits: false; initial-value: 0deg }
@property --scale { syntax: "<number>"; inherits: false; initial-value: 1 }
@property --z     { syntax: "<integer>";inherits: false; initial-value: 1 }
@property --lift  { syntax: "<number>"; inherits: false; initial-value: 1 }
@property --fs    { syntax: "<number>"; inherits: false; initial-value: 2 }

@layer base, stage, pieces, arrange;

/* ---------- base ---------- */
@layer base {
  :root {
    --ground: #191919;   /* the wall the collage hangs on */
    --paper:  #ffc2e4;   /* the stage surface */
    --ink:    #000000;
    --accent: #97e8ff;   /* used only for arrange-mode chrome */

    --font-main: "Helvetica Neue", Inter, -apple-system, "Segoe UI", sans-serif;
  }

  * { box-sizing: border-box }

  body {
    margin: 0;
    padding: clamp(1rem, 3vw, 3rem);
    background: var(--ground);
    color: var(--ink);
    font-family: var(--font-main);
    -webkit-font-smoothing: antialiased;
  }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px }

  .masthead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1600px;
    margin: 0 auto 1rem;
    font-family: var(--font-main);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .masthead__title { margin: 0; font: inherit }
  .masthead__note { margin: 0; color: #4b5349 }
  kbd {
    font: inherit;
    border-radius: 3px;
    padding: 0.1em 0.35em;
  }
}

/* ---------- stage ---------- */
@layer stage {
  .stage {
    position: relative;
    width: min(100vw, 1200px);
    /* height: 200vh; */
    margin-inline: auto;
    aspect-ratio: 10 / 16;
    background: var(--paper);
    overflow: hidden;

    /* makes 1cqw == 1% of stage width, so type scales with the collage */
    container-type: inline-size;
    container-name: stage;
  }

  /* registration marks — orientation for the eye, and for arranging */
  .stage::before {
    content: "";
    position: absolute;
    inset: 2.5%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 150ms ease;
  }
  .stage[data-arrange="on"]::before { opacity: 1 }
}

/* ---------- pieces ---------- */
@layer pieces {
  .piece {
    position: absolute;
    left: calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width: calc(var(--w) * 1%);
    z-index: var(--z);
    margin: 0;

    transform-origin: 50% 50%;
    transform:
      translate(-50%, -50%)
      rotate(var(--rot))
      scale(calc(var(--scale) * var(--lift)));

    transition: transform 220ms cubic-bezier(.2, .7, .3, 1);
  }

  /* --- image pieces --- */
  .piece--image {
    padding: 0 0 0;
  }

  .piece__img {
    display: block;
    width: 100%;
    height: auto;
  }

  /* --- text pieces --- */
  .piece--text {
        font-family: var(--font-main);
    font-size: calc(var(--fs) * 1cqw);
  }

  .piece--display {
    font-family: var(--font-main);
    font-weight: 800;
    line-height: 0.92;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }

  .piece--body {
    font-family: var(--font-main);
    line-height: 1.35;
  }
  .piece--body code {
    font-family: var(--font-main);
    font-size: 0.9em;
  }

  @media (prefers-reduced-motion: reduce) {
    .piece { transition: none }
    .piece:hover { --lift: 1 }
  }
}

/* ---------- arrange mode (added by main.ts) ---------- */
@layer arrange {
  .stage[data-arrange="on"] .piece { cursor: grab }
  .stage[data-arrange="on"] .piece.is-dragging { cursor: grabbing; --lift: 1 }

  .piece.is-selected {
    outline: 1px solid var(--accent);
    outline-offset: 0.6rem;
  }

  .hud {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 999;
    min-width: 15rem;
    padding: 0.85rem 1rem;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-main);
    font-size: 0.72rem;
    line-height: 1.6;
    white-space: pre;
    border-radius: 2px;
  }
  .hud[hidden] { display: none }
  .hud b { color: #8fd3bd; font-weight: 400 }
}