/* ============================================================
   VISIONE SECTION 03 — DEVELOPER WORKSPACE V1
============================================================ */

.vision-dev-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #020203;
  --dev-window-w: 54%;
  --dev-window-h: 64%;
}

.vision-dev-window {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--dev-window-w);
  height: var(--dev-window-h);

  transform: translate(-50%, -50%);

  border: 1px solid rgba(255,255,255,.095);
  border-radius: 8px;

  background: #0b0b0d;

  box-shadow:
    0 28px 90px rgba(0,0,0,.76),
    0 0 0 1px rgba(155,105,225,.025);

  overflow: hidden;

  transition:
    width 1700ms cubic-bezier(.16,.78,.18,1),
    height 1700ms cubic-bezier(.16,.78,.18,1),
    border-radius 1500ms ease,
    box-shadow 1500ms ease;

  will-change: width, height;
}

.vision-dev-stage.is-expanded .vision-dev-window {
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: 3px;
  box-shadow: none;
}


/* TOP BAR */

.vision-dev-toolbar {
  height: 32px;
  padding: 0 12px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  border-bottom: 1px solid rgba(255,255,255,.055);

  background: #101012;
  color: rgba(255,255,255,.48);

  font-family: monospace;
  font-size: 7px;
  letter-spacing: .08em;
}

.vision-dev-app-name {
  color: rgba(255,255,255,.78);
}

.vision-dev-toolbar-meta {
  color: rgba(165,108,255,.75);
}


/* MAIN WORKSPACE */

.vision-dev-layout {
  height: calc(100% - 32px);

  display: grid;
  grid-template-columns: 112px 1fr 115px;

  background: #0a0a0c;
}


/* LEFT SIDEBAR */

.vision-dev-sidebar {
  padding: 13px 9px;

  border-right: 1px solid rgba(255,255,255,.045);

  background: #0e0e10;
}

.vision-dev-panel-label {
  margin-bottom: 12px;

  color: rgba(255,255,255,.26);

  font-family: monospace;
  font-size: 6px;
  letter-spacing: .12em;
}

.vision-dev-file {
  margin-bottom: 3px;
  padding: 6px 7px;

  border-radius: 4px;

  color: rgba(255,255,255,.38);

  font-size: 7px;
}

.vision-dev-file.active {
  color: rgba(220,195,255,.94);
  background: rgba(145,78,236,.11);
}


/* CENTER CANVAS */

.vision-dev-canvas {
  position: relative;
  overflow: hidden;
  background: #09090b;
}

.vision-dev-canvas-grid {
  position: absolute;
  inset: 0;

  opacity: .14;

  background-image:
    radial-gradient(
      circle,
      rgba(255,255,255,.22) 1px,
      transparent 1px
    );

  background-size: 15px 15px;
}


/* ARTBOARD */

.vision-dev-artboard {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 65%;
  aspect-ratio: 16 / 9;

  transform: translate(-50%, -50%);

  border: 1px solid rgba(148,85,238,.72);

  background: #040405;

  box-shadow:
    0 0 30px rgba(121,68,211,.055);
}

.vision-dev-artboard-label {
  position: absolute;

  left: 0;
  top: -15px;

  color: rgba(177,126,255,.64);

  font-family: monospace;
  font-size: 5px;
}

.vision-dev-artboard-copy {
  position: absolute;

  left: 9%;
  top: 50%;

  transform: translateY(-50%);

  display: flex;
  flex-direction: column;
}

.vision-dev-artboard-copy small {
  margin-bottom: 9px;

  color: rgba(163,109,255,.64);

  font-size: 5px;
  letter-spacing: .14em;
}

.vision-dev-artboard-copy strong {
  color: #f5f2f8;

  font-size: clamp(15px, 2vw, 28px);
  line-height: .95;
  letter-spacing: -.045em;
}

.vision-dev-artboard-copy span {
  margin-top: 6px;

  color: rgba(255,255,255,.26);

  font-size: 8px;
}


/* RIGHT PROPERTIES */

.vision-dev-properties {
  padding: 13px 10px;

  border-left: 1px solid rgba(255,255,255,.045);

  background: #0e0e10;
}

.vision-dev-property {
  display: flex;
  justify-content: space-between;

  padding: 7px 0;

  border-bottom: 1px solid rgba(255,255,255,.035);

  color: rgba(255,255,255,.30);

  font-size: 6px;
}

.vision-dev-property strong {
  color: rgba(255,255,255,.57);
  font-weight: 500;
}


/* RESIZE HANDLE */

.vision-dev-resize-handle {
  position: absolute;

  right: 5px;
  bottom: 5px;

  width: 14px;
  height: 14px;

  opacity: .48;

  background:
    linear-gradient(
      135deg,
      transparent 38%,
      rgba(255,255,255,.22) 40%,
      rgba(255,255,255,.22) 46%,
      transparent 48%,
      transparent 60%,
      rgba(255,255,255,.15) 62%,
      rgba(255,255,255,.15) 68%,
      transparent 70%
    );
}


/* CURSOR */

.vision-dev-cursor {
  position: absolute;

  left: 67%;
  top: 64%;

  z-index: 30;

  width: 22px;
  height: 22px;

  opacity: 0;

  pointer-events: none;

  filter:
    drop-shadow(0 2px 4px rgba(0,0,0,.5));

  transform: translate(-4px,-4px);

  transition:
    left 760ms cubic-bezier(.22,.7,.25,1),
    top 760ms cubic-bezier(.22,.7,.25,1),
    opacity 220ms ease,
    transform 220ms ease;
}

.vision-dev-stage.cursor-visible .vision-dev-cursor {
  opacity: 1;
}

.vision-dev-stage.cursor-grab .vision-dev-cursor {
  left: 76%;
  top: 72%;

  transform:
    translate(-3px,-3px)
    scale(.92);
}

.vision-dev-stage.is-expanded .vision-dev-cursor {
  left: calc(100% - 18px);
  top: calc(100% - 18px);

  transform: translate(-4px,-4px);
}

.vision-dev-stage.animation-complete .vision-dev-cursor {
  opacity: 0;
}


/* EXPANDED WORKSPACE */

.vision-dev-stage.is-expanded .vision-dev-layout {
  grid-template-columns: 135px 1fr 140px;
}

.vision-dev-stage.is-expanded .vision-dev-artboard {
  width: 60%;
}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
  .vision-dev-window {
    transition: none;
  }

  .vision-dev-cursor {
    display: none;
  }
}

/* END DEVELOPER WORKSPACE V1 */


/* ============================================================
   SECTION 03 — SCROLL GROW WORKSPACE V2

   Small project window begins in upper-left area.
   Scrolling grows it toward the center/full display.
============================================================ */


/* Cursor is gone completely */

.vision-dev-cursor,
.vision-dev-resize-handle {
  display: none !important;
}


/* ------------------------------------------------------------
   PROJECT WINDOW

   JS will smoothly update:
   width / height / left / top
------------------------------------------------------------ */

.vision-dev-window {
  left: 8% !important;
  top: 10% !important;

  width: 42% !important;
  height: 50% !important;

  transform: none !important;

  border-radius: 8px;

  transition:
    border-radius 180ms linear,
    box-shadow 180ms linear !important;

  will-change:
    left,
    top,
    width,
    height;
}


/*
   Disable old automatic expanded-state sizing.
   Scroll JS now owns the geometry.
*/

.vision-dev-stage.is-expanded
.vision-dev-window {
  width: inherit;
  height: inherit;

  border-radius: inherit;
}


/* ------------------------------------------------------------
   Keep workspace readable while small
------------------------------------------------------------ */

.vision-dev-layout {
  grid-template-columns:
    84px minmax(0, 1fr) 82px;

  transition:
    grid-template-columns 250ms ease;
}


.vision-dev-sidebar {
  padding:
    10px 7px;
}


.vision-dev-properties {
  padding:
    10px 7px;
}


.vision-dev-file {
  padding:
    5px;

  font-size:
    6px;
}


.vision-dev-toolbar {
  height:
    27px;

  padding:
    0 9px;

  font-size:
    6px;
}


.vision-dev-layout {
  height:
    calc(100% - 27px);
}


/* Center artwork stays intentionally small */

.vision-dev-artboard {
  width:
    68%;
}


/* As the program becomes large, JS adds this class */

.vision-dev-stage.is-scroll-large
.vision-dev-layout {
  grid-template-columns:
    125px minmax(0, 1fr) 130px;
}


.vision-dev-stage.is-scroll-large
.vision-dev-toolbar {
  height:
    32px;

  padding:
    0 12px;

  font-size:
    7px;
}


.vision-dev-stage.is-scroll-large
.vision-dev-layout {
  height:
    calc(100% - 32px);
}


.vision-dev-stage.is-scroll-large
.vision-dev-artboard {
  width:
    60%;
}


/* END SECTION 03 — SCROLL GROW WORKSPACE V2 */


/* ============================================================
   SECTION 03 — CORRECT ANIMATION OWNER V3

   Developer program stays OPEN/FULL SIZE.
   ONLY the project artboard inside the canvas expands.
============================================================ */


/* ------------------------------------------------------------
   PROGRAM TOOL — PERMANENTLY OPEN
------------------------------------------------------------ */

.vision-dev-window,
.vision-dev-stage.is-expanded .vision-dev-window,
.vision-dev-stage.is-scroll-large .vision-dev-window {

  left: 0 !important;
  top: 0 !important;

  width: 100% !important;
  height: 100% !important;

  transform: none !important;

  border-radius: 0 !important;

  box-shadow: none !important;

  transition: none !important;
}


/* Keep actual developer interface stable */

.vision-dev-layout,
.vision-dev-stage.is-expanded .vision-dev-layout,
.vision-dev-stage.is-scroll-large .vision-dev-layout {

  grid-template-columns:
    112px minmax(0, 1fr) 115px !important;
}


/* Cursor / resize handle are gone */

.vision-dev-cursor,
.vision-dev-resize-handle {

  display: none !important;

}


/* ------------------------------------------------------------
   PROJECT / ARTBOARD

   THIS is now the animated object.
------------------------------------------------------------ */

.vision-dev-artboard {

  left: 50% !important;
  top: 50% !important;

  width: 60%;

  height: 54%;

  transform:
    translate(-50%, -50%) !important;

  transform-origin:
    center center;

  overflow: hidden;

  will-change:
    width,
    height;

}


/*
   Prevent previous expanded rules from changing
   the project independently.
*/

.vision-dev-stage.is-expanded
.vision-dev-artboard,

.vision-dev-stage.is-scroll-large
.vision-dev-artboard {

  left: 50% !important;
  top: 50% !important;

}


/* END SECTION 03 — CORRECT ANIMATION OWNER V3 */


/* ============================================================
   SECTION 03 — GPU PROJECT GROW V5

   Keep project dimensions fixed.
   Scroll animation uses transform: scale() instead of
   width/height layout changes for much smoother motion.
============================================================ */

.vision-dev-artboard {
  left: 50% !important;
  top: 50% !important;

  width: 60% !important;
  height: 54% !important;

  aspect-ratio: auto !important;

  transform:
    translate3d(-50%, -50%, 0)
    scale(1);

  transform-origin:
    center center;

  will-change:
    transform;

  backface-visibility:
    hidden;

  -webkit-font-smoothing:
    antialiased;

  contain:
    layout paint;
}


/* Disable any old width/height transition ownership */

.vision-dev-artboard,
.vision-dev-stage.is-expanded .vision-dev-artboard,
.vision-dev-stage.is-scroll-large .vision-dev-artboard {
  transition:
    none !important;
}


/* END SECTION 03 — GPU PROJECT GROW V5 */


/* Fixed glow — avoids repainting a large blur every scroll frame */

.vision-dev-artboard {
  box-shadow:
    0 0 42px rgba(121,68,211,.09) !important;
}


/* END FIXED ARTBOARD GLOW V5 */


/* ============================================================
   SECTION 03 — CORNER ANCHORED PROJECT GROW V6

   The project no longer scales from the center.
   Bottom-left stays anchored.
   Top-right expands diagonally outward.
============================================================ */

.vision-dev-artboard,
.vision-dev-stage.is-expanded .vision-dev-artboard,
.vision-dev-stage.is-scroll-large .vision-dev-artboard {

  left: 15% !important;
  top: auto !important;
  bottom: 9% !important;

  width: 60% !important;
  height: 54% !important;

  transform:
    translate3d(0, 0, 0)
    scale(1);

  transform-origin:
    left bottom !important;

  will-change:
    transform;

}


/* END SECTION 03 — CORNER ANCHORED PROJECT GROW V6 */


/* ============================================================
   SECTION 03 — SAFE ARTBOARD BOUNDS V7
============================================================ */

.vision-dev-canvas {
  padding: 10px;
  box-sizing: border-box;
}

.vision-dev-artboard {
  max-width: calc(100% - 26px) !important;
  max-height: calc(100% - 26px) !important;
}

/* END SAFE ARTBOARD BOUNDS V7 */


/* ============================================================
   SECTION 03 — PROJECT POSITION TUNE V10
   Shift project farther left while preserving growth.
============================================================ */

.vision-dev-artboard,
.vision-dev-stage.is-expanded .vision-dev-artboard,
.vision-dev-stage.is-scroll-large .vision-dev-artboard {

  left: 5% !important;

  right: auto !important;

  transform-origin:
    left bottom !important;
}


/* END SECTION 03 — PROJECT POSITION TUNE V10 */


/* ============================================================
   SECTION 03 — BLUE → RED GEOMETRY V11
============================================================ */

.vision-dev-artboard,
.vision-dev-stage.is-expanded .vision-dev-artboard,
.vision-dev-stage.is-scroll-large .vision-dev-artboard {

  left: 4% !important;
  bottom: 7% !important;

  width: 66% !important;
  height: 57% !important;

  transform-origin:
    left bottom !important;

}


/* END BLUE → RED GEOMETRY V11 */