/* ──────────────────────────────────────────────────────────────────────────
 * DesignCanvas — Pawfectly Yours
 *
 * The canvas frame is a soft pink stage. The wrapper inside is sized to the
 * product mockup's aspect ratio (e.g. shirt = 480/540) and contains:
 *   1. ModelSilhouette  (z=0, conditional on Preview-on-Model)
 *   2. Product mockup SVG (z=1)
 *   3. Print-zone dashed border (z=3, when selected)
 *   4. Konva Stage, positioned absolutely at the print zone (z=2, see JSX
 *      inline styles for the exact placement math)
 *
 * Why this layout
 * ───────────────
 * The Konva Stage is the editing canvas. Aligning it visually with the print
 * zone of the product means the user designs *exactly* where the design will
 * print. The Stage's internal coordinate system is unchanged (still 300×300
 * design units with HANDLE_PADDING for transformer handles); only the visual
 * scale changes via CSS, driven by ResizeObserver in DesignCanvas.jsx.
 * ────────────────────────────────────────────────────────────────────────── */

.design-canvas-frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-pink-tint);
  border-radius: var(--radius-xl);
  overflow: hidden;
  /* Subtle grid texture inside the canvas card */
  background-image:
    linear-gradient(rgba(236, 72, 153, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(236, 72, 153, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: center center;
}

/* Wrapper — the host element for both the product mockup and the Konva Stage.
 *
 * Width and height are set inline by JS each time the frame's available area
 * changes. The JS computes the LARGEST size that fits inside the frame while
 * preserving the product mockup's aspect ratio (e.g. shirt = 480/540), so
 * the canvas grows to fill the entire left side of the editor on big monitors
 * and shrinks gracefully on smaller ones.
 *
 * The transition rule below animates width/height/transform changes — BUT
 * only after `.design-canvas-frame--ready` has been added to the parent
 * (one frame after mount). The initial sizing pass (default-state → fitted
 * size) happens in a useLayoutEffect before paint, and we don't want it to
 * animate; the transition only kicks in for subsequent resize events.
 *
 * `will-change` hints the compositor that width/height/transform are about
 * to change so it can promote this layer ahead of the first resize. We only
 * apply it once `--ready` is set so we don't pay the layer-promotion cost
 * for the entire app lifetime when the user never resizes the window. */
.design-canvas-wrapper {
  position: relative;
  /* width and height are set inline from JS — do not set them here */
  transform-origin: center center;
  /* Clip elements to the visible shirt. The Konva stage now extends past
   * the print zone to cover the whole wrapper plus HANDLE_PADDING of
   * slop on each side (so the user can drag/transform anywhere on the
   * shirt). overflow:hidden ensures anything outside the wrapper itself
   * is clipped — a defensive guard against rounding artifacts and a
   * visual containment for elements positioned very close to the
   * wrapper edge. */
  overflow: hidden;
  /* zoom-only transition; layout transitions are added by the --ready class */
  transition: transform 0.18s ease-out;
}

.design-canvas-frame--ready .design-canvas-wrapper {
  /* Animate width/height as well as transform once we're past the initial
   * sizing. cubic-bezier(0.32, 0.72, 0, 1) is a soft ease-out that feels
   * natural for size changes — a hair faster at the start, glides to a
   * stop. 220ms is short enough to feel responsive yet long enough to read
   * as an animation rather than a snap. */
  transition: width 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              height 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              transform 0.18s ease-out;
  will-change: width, height;
}

/* Print-zone border. Always visible at low opacity as a placement guide so
 * the user knows where the design will print, even with nothing selected.
 * When an element is selected the border darkens to give selection feedback.
 * Position + size are set inline via percentages in JSX so the border tracks
 * the print zone exactly. */
.design-canvas-border {
  border-radius: var(--radius-md);
}

/* Konva Stage — absolutely positioned and CSS-scaled to overlay the print
 * zone. The exact position/scale is set inline in JSX from runtime measurements;
 * this rule just provides defaults for cases where inline styles haven't
 * applied yet (e.g. SSR/hydration).
 *
 * The transition on `transform` animates the stage's CSS-scale so resizes
 * are visually continuous — the stage grows/shrinks together with its
 * wrapper rather than snapping to the new scale on the next render.
 * Konva's INTERNAL coords are unaffected; the bound functions, drag
 * positions, and export pipeline still operate in the canonical 300×300
 * space throughout the animation. The `transition` here is gated behind
 * the same `--ready` class as the wrapper so the initial scale doesn't
 * animate. */
.design-canvas-stage {
  position: absolute;
  z-index: 2;
}

.design-canvas-frame--ready .design-canvas-stage {
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              left 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              top 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}

/* During an active drag/transform, suppress the stage transition so input
 * stays maximally responsive. The wrapper's transform stays animated
 * (the user can still resize the window mid-edit) but the stage's CSS
 * scale changes won't lag behind — they apply instantly. We rely on
 * Konva adding `konvajs-content` to its container during interaction;
 * during normal idle state both transitions run as defined above. */

/* Bounds-violation warning chip ------------------------------------------
 *
 * Pinned at the TOP of the canvas frame (Change 22), full-width inside
 * the frame's padding. Previously sat at the bottom, but designs that
 * extended into the lower half of the print area visually conflicted
 * with the chip — the per-element yellow out-of-bounds tint behind the
 * offending element + the warning chip overlapping it read as a single
 * blob of yellow. Anchoring at the top gives the chip its own zone
 * away from typical design placement.
 *
 * Visually distinct from the pink brand color because the cart
 * disable that pairs with it is destructive — amber/orange reads as
 * "caution" without competing with the rest of the pink UI. */
.design-canvas-warning {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-md);
  background: rgba(255, 251, 235, 0.97);
  border: 1px solid #fbbf24;
  color: #92400e;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 6px 14px -4px rgba(146, 64, 14, 0.18);
  pointer-events: none; /* informational only — cart-bar is the action */
  animation: dcw-fade-in 0.18s ease-out;
}

.design-canvas-warning svg {
  flex-shrink: 0;
  color: #d97706;
}

/* Fade-in slides down from above now that the chip is anchored at the
 * top of the frame — visually consistent with "appears from off-screen
 * top" rather than the previous "appears from off-screen bottom". */
@keyframes dcw-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .design-canvas-frame {
    border-radius: var(--radius-lg);
  }
  /* width/height are set from JS now — no media-query overrides needed.
   * The fit-to-frame math automatically produces the right size on any
   * viewport, including mobile portrait/landscape. */
  .design-canvas-warning {
    left: 0.5rem;
    right: 0.5rem;
    top: 0.5rem;
    font-size: 12px;
    padding: 0.5rem 0.7rem;
  }
}
