/* ============================================================
   SECTION 03 — LIVE BUILDER V1
   Sidebar + visual artboard + live BUILD terminal
============================================================ */


/* ------------------------------------------------------------
   CENTER VISUAL STATES
------------------------------------------------------------ */

.vision-project-window-content {
  overflow: hidden;
}

.vision-builder-visual {
  position: absolute;
  inset: 0;

  opacity: 0;

  transform:
    translate3d(0, 7px, 0)
    scale(.995);

  transition:
    opacity 520ms ease,
    transform 720ms cubic-bezier(.16,.84,.20,1);

  pointer-events: none;
}

.vision-builder-visual.active {
  opacity: 1;

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


/* ------------------------------------------------------------
   PLACEHOLDER IMAGE AREA
------------------------------------------------------------ */

.vision-builder-placeholder {
  position: absolute;
  inset: 0;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 74% 43%,
      rgba(147,83,236,.25),
      transparent 28%
    ),
    linear-gradient(
      125deg,
      rgba(18,18,21,1),
      rgba(7,7,8,1) 55%,
      rgba(13,9,17,1)
    );
}

.vision-builder-placeholder::before,
.vision-builder-placeholder::after {
  content: "";

  position: absolute;

  border: 1px solid rgba(255,255,255,.05);

  transform: rotate(-18deg);
}

.vision-builder-placeholder::before {
  width: 42%;
  height: 120%;

  right: 6%;
  top: -10%;
}

.vision-builder-placeholder::after {
  width: 28%;
  height: 95%;

  right: 20%;
  top: 4%;

  border-color: rgba(160,99,244,.11);
}

.vision-builder-placeholder > span {
  position: absolute;

  right: 6%;
  bottom: 8%;

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

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

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


/* different placeholder treatments */

.vision-builder-visual-hero
.vision-builder-placeholder {
  background:
    radial-gradient(
      circle at 26% 72%,
      rgba(153,89,240,.18),
      transparent 32%
    ),
    linear-gradient(
      140deg,
      #050506,
      #101015 55%,
      #070708
    );
}

.vision-builder-visual-services
.vision-builder-placeholder {
  background:
    linear-gradient(
      90deg,
      rgba(5,5,6,.96),
      rgba(5,5,6,.60)
    ),
    radial-gradient(
      circle at 76% 46%,
      rgba(156,92,242,.26),
      transparent 25%
    ),
    #08080a;
}


/* ------------------------------------------------------------
   TYPOGRAPHY ON ARTBOARD
------------------------------------------------------------ */

.vision-builder-copy {
  position: absolute;

  left: 8%;
  top: 50%;

  z-index: 2;

  width: 52%;

  transform: translateY(-50%);
}

.vision-builder-copy small {
  display: block;

  margin-bottom: 8px;

  color: rgba(177,120,255,.76);

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

.vision-builder-copy strong {
  display: block;

  color: #f5f3f8;

  font-size: clamp(
    17px,
    2.3vw,
    31px
  );

  line-height: .94;

  letter-spacing: -.05em;

  font-weight: 600;
}

.vision-builder-copy > span {
  display: block;

  margin-top: 10px;

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

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


/* ------------------------------------------------------------
   SIDEBAR ACTIVE STATE
------------------------------------------------------------ */

.vision-dev-file {
  position: relative;

  transition:
    color 220ms ease,
    background-color 220ms ease;
}

.vision-dev-file.active {
  color: rgba(255,255,255,.93);
}

.vision-dev-file.active::before {
  content: "";

  position: absolute;

  left: -8px;
  top: 50%;

  width: 3px;
  height: 3px;

  transform: translateY(-50%);

  border-radius: 50%;

  background: #a766ff;

  box-shadow:
    0 0 7px rgba(167,102,255,.65);
}


/* ------------------------------------------------------------
   BUILD TERMINAL
------------------------------------------------------------ */

.vision-builder-terminal-meta {
  display: flex;
  align-items: center;
  gap: 5px;

  margin:
    5px
    0
    7px;

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

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size: 4px;
  letter-spacing: .10em;
}

.vision-builder-live-dot {
  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: #8ee69b;

  box-shadow:
    0 0 6px rgba(112,221,134,.40);
}


.vision-builder-terminal {
  position: relative;

  width: 100%;
  height: calc(100% - 30px);

  overflow: hidden;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
}


.vision-builder-terminal-output {
  margin: 0;

  white-space: pre-wrap;

  overflow-wrap: anywhere;
  word-break: break-word;

  color: rgba(198,203,211,.66);

  font: inherit;
  font-size: 4.2px;

  line-height: 1.52;

  letter-spacing: -.01em;
}


.vision-builder-terminal-cursor {
  display: inline-block;

  width: 3px;
  height: 6px;

  margin-left: 1px;

  vertical-align: -1px;

  background: rgba(173,115,255,.85);

  animation:
    visionBuilderCursorBlink
    .78s
    steps(1)
    infinite;
}


@keyframes visionBuilderCursorBlink {

  0%,
  48% {
    opacity: 1;
  }

  49%,
  100% {
    opacity: 0;
  }

}


/* terminal semantic colors */

.vision-builder-terminal-output
.terminal-success {
  color: rgba(134,226,151,.80);
}


@media (prefers-reduced-motion: reduce) {

  .vision-builder-visual {
    transition: none;
  }

  .vision-builder-terminal-cursor {
    animation: none;
  }

}


/* ============================================================
   SECTION 03 — BUILD TERMINAL V2
   Larger / cleaner developer-console presentation
============================================================ */

.vision-builder-terminal {
  height: calc(100% - 27px);
  padding-top: 2px;
  box-sizing: border-box;
}

.vision-builder-terminal-output {
  font-size: 6.2px !important;
  line-height: 1.48 !important;
  letter-spacing: -.025em !important;

  color: rgba(218, 222, 230, .78) !important;

  tab-size: 2;
}

.vision-builder-terminal-cursor {
  width: 4px !important;
  height: 8px !important;

  background: rgba(177, 112, 255, .95) !important;

  box-shadow:
    0 0 5px rgba(166, 93, 255, .35);
}

.vision-builder-terminal-meta {
  margin-bottom: 9px !important;

  font-size: 5px !important;
}

.vision-builder-terminal-meta::after {
  content: "JS / DOM";

  margin-left: auto;

  color: rgba(169, 108, 255, .55);

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size: 4.5px;

  letter-spacing: .08em;
}


/* subtle terminal rail */

.vision-dev-properties {
  overflow: hidden;
}

.vision-builder-terminal::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  top: 0;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(166, 98, 255, .30),
      rgba(166, 98, 255, .04),
      transparent
    );
}


/* END BUILD TERMINAL V2 */


/* ============================================================
   SECTION 03 — TERMINAL WINDOW V3
   Wider BUILD panel + recognizable terminal treatment
============================================================ */


/* ------------------------------------------------------------
   WORKSPACE COLUMNS

   LEFT  = compact project navigation
   CENTER = primary canvas
   RIGHT = larger terminal
------------------------------------------------------------ */

.vision-dev-layout {
  grid-template-columns:
    14%
    minmax(0, 1fr)
    22% !important;
}


/* ------------------------------------------------------------
   RIGHT BUILD PANEL
------------------------------------------------------------ */

.vision-dev-properties {
  position: relative;

  padding:
    13px
    11px
    11px !important;

  box-sizing: border-box;

  background:
    linear-gradient(
      180deg,
      rgba(13,13,16,.98),
      rgba(7,7,9,.99)
    ) !important;

  border-left:
    1px solid
    rgba(158,98,239,.14) !important;
}


/* BUILD heading */

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

  color:
    rgba(184,135,255,.58);
}


/* ------------------------------------------------------------
   TERMINAL CHROME
------------------------------------------------------------ */

.vision-builder-terminal-meta {
  position: relative;

  height: 18px;

  margin:
    0
    0
    0 !important;

  padding:
    0
    7px
    0
    30px;

  box-sizing: border-box;

  display: flex;
  align-items: center;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-bottom: 0;

  border-radius:
    4px
    4px
    0
    0;

  background:
    rgba(255,255,255,.025);

  font-size:
    4.8px !important;
}


/* Mac-style terminal dots */

.vision-builder-terminal-meta::before {
  content: "●  ●  ●";

  position: absolute;

  left: 7px;
  top: 50%;

  transform:
    translateY(-52%);

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

  font-size: 4px;

  letter-spacing: 1px;
}


/* terminal language */

.vision-builder-terminal-meta::after {
  content:
    "terminal / javascript";

  margin-left: auto;

  color:
    rgba(168,105,255,.62);

  font-size:
    4.3px;

  letter-spacing:
    .045em;
}


/* Existing green LIVE dot */

.vision-builder-live-dot {
  width: 3px;
  height: 3px;
}


/* ------------------------------------------------------------
   TERMINAL BODY
------------------------------------------------------------ */

.vision-builder-terminal {
  position: relative;

  width: 100%;

  height:
    calc(100% - 46px) !important;

  padding:
    9px
    8px
    12px;

  box-sizing:
    border-box;

  overflow:
    hidden;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius:
    0
    0
    4px
    4px;

  background:
    linear-gradient(
      180deg,
      rgba(3,3,5,.98),
      rgba(5,4,7,.99)
    );

  box-shadow:
    inset
    0
    1px
    0
    rgba(255,255,255,.018);
}


/* remove old rail */

.vision-builder-terminal::before {
  display: none !important;
}


/* ------------------------------------------------------------
   CODE
------------------------------------------------------------ */

.vision-builder-terminal-output {
  font-size:
    6.5px !important;

  line-height:
    1.52 !important;

  color:
    rgba(221,225,234,.84) !important;

  white-space:
    pre-wrap;

  overflow-wrap:
    anywhere;

  word-break:
    normal !important;
}


/* Give commands a terminal-ish prompt feel */

.vision-builder-terminal-output::selection {
  background:
    rgba(155,90,244,.30);
}


/* Cursor */

.vision-builder-terminal-cursor {
  width:
    4px !important;

  height:
    8px !important;

  background:
    rgba(172,106,255,.96) !important;

  box-shadow:
    0
    0
    6px
    rgba(156,86,255,.38);
}


/* END SECTION 03 — TERMINAL WINDOW V3 */


/* ============================================================
   SECTION 03 — TERMINAL FONT V4
   Large readable code
============================================================ */

.vision-builder-terminal-output {
  font-size: 8.4px !important;
  line-height: 1.42 !important;
  font-weight: 500 !important;

  color:
    rgba(235, 238, 244, .92) !important;

  letter-spacing:
    -.025em !important;
}


/* slightly larger terminal status */

.vision-builder-terminal-meta {
  font-size:
    5.6px !important;
}

.vision-builder-terminal-meta::after {
  font-size:
    5px !important;
}


/* Bigger blinking coding cursor */

.vision-builder-terminal-cursor {
  width:
    5px !important;

  height:
    10px !important;
}


/* END TERMINAL FONT V4 */


/* ============================================================
   SECTION 03 — SEAMLESS HOME RESET V5
============================================================ */

.vision-project-window-content {
  transition:
    opacity
    420ms
    ease !important;
}

.vision-project-window-content.vision-builder-resetting {
  opacity: .18;
}


/* END SEAMLESS HOME RESET V5 */