/* ============================================================
   VISIONE — SECTION 03
   EMPTY SCREEN + MOVING PURPLE LIGHT V1

   Completely isolated from hero / builder / templates.
============================================================ */


/* ------------------------------------------------------------
   SECTION
------------------------------------------------------------ */

.vision-system-section {
  position: relative;

  width: 100%;

  min-height: 980px;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #070807 0%,
      #030303 15%,
      #020202 84%,
      #050505 100%
    );

  isolation: isolate;
}


/* soft transition away from builder */

.vision-system-section::before {
  content: "";

  position: absolute;
  inset: 0 0 auto 0;

  height: 180px;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(16,18,14,.72),
      rgba(8,8,8,.22) 42%,
      transparent 100%
    );

  z-index: 1;
}


/* ------------------------------------------------------------
   SCENE
------------------------------------------------------------ */

.vision-system-scene {
  --light-x: 50%;
  --light-y: 50%;

  position: relative;

  width: 100%;
  min-height: 980px;

  display: grid;
  place-items: center;

  overflow: hidden;

  background:

    radial-gradient(
      circle at var(--light-x) var(--light-y),
      rgba(171, 111, 255, .10) 0,
      rgba(125, 72, 208, .055) 11%,
      rgba(92, 45, 160, .022) 25%,
      transparent 48%
    ),

    radial-gradient(
      ellipse at 50% 53%,
      rgba(35, 22, 48, .18),
      rgba(8, 7, 10, .04) 40%,
      transparent 68%
    );
}


/* ------------------------------------------------------------
   PARTICLE CANVAS
------------------------------------------------------------ */

.vision-system-particles {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 2;

  pointer-events: none;
}


/* ------------------------------------------------------------
   ENVIRONMENTAL PURPLE BLOOM
------------------------------------------------------------ */

.vision-system-atmosphere {
  position: absolute;

  left: 50%;
  top: 51%;

  width: min(1040px, 78vw);
  aspect-ratio: 1.55 / 1;

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

  border-radius: 50%;

  background:

    radial-gradient(
      ellipse at 50% 50%,
      rgba(178, 116, 255, .24) 0%,
      rgba(136, 78, 225, .16) 24%,
      rgba(91, 43, 165, .075) 47%,
      transparent 76%
    );

  filter:
    blur(78px);

  opacity: .84;

  z-index: 2;

  pointer-events: none;

  animation:
    visionAtmosphereBreathe
    8s ease-in-out infinite alternate;
}


@keyframes visionAtmosphereBreathe {

  from {
    opacity: .64;

    transform:
      translate(-50%, -50%)
      scale(.96);
  }

  to {
    opacity: .88;

    transform:
      translate(-50%, -50%)
      scale(1.035);
  }

}


/* ------------------------------------------------------------
   MOVING LIGHT SOURCE — WIDE VOLUMETRIC WASH V4

   Not a glowing circle.
   This is a broad soft light field that sweeps around
   the perimeter and spills across a large part of the frame.
------------------------------------------------------------ */

.vision-system-moving-light {
  position: absolute;

  left: 0;
  top: 0;

  width: 900px;
  height: 560px;

  margin:
    -280px 0 0 -450px;

  border-radius:
    50%;

  pointer-events:
    none;

  z-index:
    3;

  background:

    radial-gradient(
      ellipse at center,
      rgba(242, 225, 255, .38) 0%,
      rgba(215, 180, 255, .30) 8%,
      rgba(174, 118, 255, .23) 20%,
      rgba(131, 72, 224, .16) 36%,
      rgba(91, 42, 170, .08) 52%,
      rgba(62, 27, 119, .035) 66%,
      transparent 82%
    );

  filter:
    blur(54px);

  mix-blend-mode:
    screen;

  opacity:
    .92;

  will-change:
    transform;
}


/* giant secondary spill */

.vision-system-moving-light::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 1300px;
  height: 820px;

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

  border-radius:
    50%;

  background:

    radial-gradient(
      ellipse at center,
      rgba(170, 102, 255, .12) 0%,
      rgba(125, 68, 218, .075) 30%,
      rgba(83, 39, 151, .035) 52%,
      transparent 76%
    );

  filter:
    blur(85px);

  opacity:
    .85;
}


/* elongated bright region — avoids the "glowing orb" look */

.vision-system-moving-light::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 620px;
  height: 210px;

  transform:
    translate(-50%, -50%)
    rotate(-8deg);

  border-radius:
    50%;

  background:

    radial-gradient(
      ellipse at center,
      rgba(245, 231, 255, .28) 0%,
      rgba(200, 158, 255, .20) 18%,
      rgba(152, 94, 239, .10) 42%,
      transparent 74%
    );

  filter:
    blur(38px);

  opacity:
    .95;
}


/* ------------------------------------------------------------
   EMPTY WINDOW
------------------------------------------------------------ */

.vision-system-window {
  position: relative;

  z-index: 5;

  width:
    min(980px, calc(100vw - 220px));

  aspect-ratio:
    16 / 8.85;

  border:
    1px solid rgba(222, 207, 237, .22);

  border-radius:
    8px;

  background:
    rgba(4, 4, 6, .92);

  box-shadow:

    /* hard physical edge */
    0 0 0 1px rgba(255,255,255,.025),

    /* purple edge illumination */
    0 0 24px rgba(164, 103, 255, .16),

    /* larger physical bloom */
    0 0 80px rgba(121, 64, 211, .12),

    /* environment shadow */
    0 55px 130px rgba(0,0,0,.78);

  overflow:
    hidden;

  transform:
    translateZ(0);
}


/* subtle outer glass edge */

.vision-system-window::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 5;

  border-radius:
    inherit;

  pointer-events:
    none;

  box-shadow:

    inset 0 1px 0
      rgba(255,255,255,.08),

    inset 1px 0 0
      rgba(255,255,255,.025),

    inset -1px 0 0
      rgba(126,87,169,.04);
}


/* quiet reflection across black glass */

.vision-system-window::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:

    linear-gradient(
      118deg,
      rgba(255,255,255,.025) 0%,
      transparent 19%,
      transparent 63%,
      rgba(178,128,239,.022) 83%,
      transparent 100%
    );

  opacity:
    .72;
}


/* ------------------------------------------------------------
   ACTUAL EMPTY SCREEN

   Intentionally contains ZERO CONTENT.
------------------------------------------------------------ */

.vision-system-screen {
  position: absolute;

  inset:
    7px;

  border-radius:
    4px;

  background:

    radial-gradient(
      circle at 50% 46%,
      rgba(21, 15, 29, .15),
      transparent 42%
    ),

    linear-gradient(
      180deg,
      rgba(7,7,9,.98),
      rgba(2,2,3,1)
    );

  overflow:
    hidden;
}


/*
   Extremely fine screen texture.
   Almost invisible, just prevents dead flat black.
*/

.vision-system-screen::before {
  content: "";

  position:
    absolute;

  inset:
    0;

  opacity:
    .08;

  background-image:

    linear-gradient(
      rgba(255,255,255,.018) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(255,255,255,.014) 1px,
      transparent 1px
    );

  background-size:
    38px 38px;

  mask-image:
    radial-gradient(
      ellipse at center,
      black,
      transparent 82%
    );
}


/* ------------------------------------------------------------
   FRONT HAZE

   Gives particles/light a volumetric feeling instead
   of looking like a neon box shadow.
------------------------------------------------------------ */

.vision-system-haze {
  position: absolute;

  z-index: 6;

  width:
    min(1260px, 88vw);

  height:
    460px;

  left:
    50%;

  top:
    53%;

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

  pointer-events:
    none;

  opacity:
    .20;

  background:

    radial-gradient(
      ellipse at center,
      rgba(188, 140, 255, .17),
      rgba(124, 75, 194, .06) 48%,
      transparent 76%
    );

  filter:
    blur(42px);

  mix-blend-mode:
    screen;
}


/* ------------------------------------------------------------
   DESKTOP SCALE
------------------------------------------------------------ */

@media (min-width: 1450px) {

  .vision-system-section,
  .vision-system-scene {
    min-height:
      1040px;
  }

  .vision-system-window {
    width:
      min(1080px, calc(100vw - 250px));
  }

}


/* ------------------------------------------------------------
   DESKTOP FIRST

   We intentionally do NOT expose this new experience
   on phones yet. Mobile version comes after desktop approval.
------------------------------------------------------------ */

@media (max-width: 700px) {

  .vision-system-section {
    display:
      none !important;
  }

}


/* ------------------------------------------------------------
   ACCESSIBILITY
------------------------------------------------------------ */

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

  .vision-system-atmosphere {
    animation:
      none;
  }

  .vision-system-moving-light {
    opacity:
      .58;
  }

}


/* END SECTION 03 — LIGHT EXPERIENCE V1 */


/* ============================================================
   SECTION 03 — PERSISTENT PURPLE EDGE AMBIENCE V3
   Constant low-level illumination beneath traveling light.
============================================================ */

.vision-system-window {
  box-shadow:
    0 0 0 1px rgba(255,255,255,.028),

    0 0 18px rgba(190,145,255,.13),

    0 0 48px rgba(156,94,247,.14),

    0 0 105px rgba(112,55,205,.13),

    0 0 190px rgba(83,35,157,.07),

    0 55px 130px rgba(0,0,0,.78);
}


/* very soft permanent light bed behind the entire display */

.vision-system-window::before {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 1px 0 0 rgba(255,255,255,.025),
    inset -1px 0 0 rgba(126,87,169,.04),

    0 0 44px rgba(177,112,255,.055);
}


/* END SECTION 03 — PERSISTENT PURPLE EDGE AMBIENCE V3 */


/* ============================================================
   SECTION 03 — OPPOSITE LIGHT BLEED V6

   Broad secondary illumination opposite the main moving wash.
   Intentionally much softer than the primary source.
============================================================ */

.vision-system-opposite-light {
  position: absolute;

  left: 0;
  top: 0;

  width: 1100px;
  height: 720px;

  margin:
    -360px 0 0 -550px;

  z-index: 2;

  pointer-events: none;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(194, 151, 255, .18) 0%,
      rgba(158, 104, 244, .14) 16%,
      rgba(119, 65, 211, .09) 34%,
      rgba(84, 39, 160, .045) 54%,
      transparent 78%
    );

  filter:
    blur(82px);

  mix-blend-mode:
    screen;

  opacity: .72;

  will-change:
    transform;
}


/*
   Even larger atmospheric spill.

   This is what gives us that reference-image feeling where
   purple illumination remains visible beyond the main source.
*/

.vision-system-opposite-light::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width: 1450px;
  height: 900px;

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

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(151, 92, 239, .085),
      rgba(104, 52, 187, .045) 42%,
      transparent 74%
    );

  filter:
    blur(105px);
}


/* END SECTION 03 — OPPOSITE LIGHT BLEED V6 */


/* ============================================================
   SECTION 03 — VISIBLE OPPOSITE BLEED V7

   Stronger counter-light.
   This should CLEARLY be visible opposite the main moving wash.
============================================================ */

.vision-system-opposite-light {
  width: 1000px !important;
  height: 500px !important;

  margin:
    -250px 0 0 -500px !important;

  z-index:
    4 !important;

  opacity:
    .94 !important;

  filter:
    blur(58px) !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(230, 207, 255, .30) 0%,
      rgba(199, 158, 255, .26) 10%,
      rgba(166, 111, 255, .20) 24%,
      rgba(128, 72, 224, .14) 42%,
      rgba(91, 42, 168, .075) 60%,
      transparent 82%
    ) !important;

  mix-blend-mode:
    screen !important;
}


/*
   Very wide surrounding spill.
*/

.vision-system-opposite-light::before {
  width:
    1450px !important;

  height:
    760px !important;

  background:
    radial-gradient(
      ellipse at center,
      rgba(176, 118, 255, .16) 0%,
      rgba(130, 73, 222, .10) 32%,
      rgba(86, 39, 162, .05) 55%,
      transparent 80%
    ) !important;

  filter:
    blur(90px) !important;

  opacity:
    1 !important;
}


/*
   Additional elongated hot wash so it reads as
   illuminated air rather than another glowing circle.
*/

.vision-system-opposite-light::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

  width:
    650px;

  height:
    150px;

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

  border-radius:
    50%;

  background:
    radial-gradient(
      ellipse at center,
      rgba(232, 211, 255, .23),
      rgba(181, 129, 255, .14) 28%,
      rgba(125, 67, 220, .055) 55%,
      transparent 78%
    );

  filter:
    blur(34px);

  opacity:
    .9;
}


/* END SECTION 03 — VISIBLE OPPOSITE BLEED V7 */


/* ============================================================
   SECTION 03 — PHYSICAL DISPLAY FRAME V8

   Makes the empty black rectangle read as a real floating
   display while preserving the existing lighting system.
============================================================ */


/* ------------------------------------------------------------
   OUTER DISPLAY BODY
------------------------------------------------------------ */

.vision-system-window {
  border:
    1px solid rgba(220, 203, 239, .34) !important;

  border-radius:
    9px !important;

  background:
    linear-gradient(
      180deg,
      rgba(31, 28, 36, .98) 0%,
      rgba(12, 11, 15, .99) 7%,
      rgba(5, 5, 7, 1) 100%
    ) !important;

  box-shadow:

    /* crisp illuminated top edge */
    0 -1px 0 rgba(238, 222, 255, .18),

    /* thin purple shell */
    0 0 0 1px rgba(153, 102, 220, .10),

    /* existing atmospheric edge glow */
    0 0 18px rgba(190,145,255,.13),
    0 0 48px rgba(156,94,247,.14),
    0 0 105px rgba(112,55,205,.13),
    0 0 190px rgba(83,35,157,.07),

    /* physical depth */
    0 32px 65px rgba(0,0,0,.46),
    0 55px 130px rgba(0,0,0,.78) !important;
}


/* ------------------------------------------------------------
   TOP BEZEL / DISPLAY LIP
------------------------------------------------------------ */

.vision-system-window::before {
  content: "";

  position: absolute;

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

  height: 20px;

  z-index: 8;

  pointer-events: none;

  border-bottom:
    1px solid rgba(188, 151, 225, .14);

  border-radius:
    8px 8px 0 0;

  background:
    linear-gradient(
      180deg,
      rgba(40, 36, 46, .96) 0%,
      rgba(21, 19, 25, .98) 38%,
      rgba(10, 9, 12, .99) 100%
    );

  box-shadow:

    inset 0 1px 0
      rgba(255,255,255,.12),

    inset 0 -1px 0
      rgba(118,78,157,.13),

    0 1px 5px
      rgba(0,0,0,.72);
}


/* tiny illuminated seam across upper bezel */

.vision-system-window::after {
  content: "";

  position: absolute;

  left: 4%;
  right: 4%;
  top: 2px;

  height: 1px;

  z-index: 9;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(184, 132, 255, .13) 12%,
      rgba(230, 207, 255, .27) 50%,
      rgba(184, 132, 255, .13) 88%,
      transparent
    );

  box-shadow:
    0 0 8px rgba(164, 105, 244, .18);
}


/* ------------------------------------------------------------
   RECESSED BLACK DISPLAY PANEL
------------------------------------------------------------ */

.vision-system-screen {
  inset:
    22px 6px 6px 6px !important;

  border-radius:
    3px 3px 5px 5px !important;

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

  background:
    #020203 !important;

  box-shadow:

    /* recessed screen */
    inset 0 1px 8px rgba(0,0,0,.92),

    inset 0 0 0 1px rgba(0,0,0,.88),

    /* tiny purple reflection from the frame */
    inset 0 0 20px rgba(102,57,159,.025);

  overflow:
    hidden;
}


/* remove visible grid feeling — keep screen mostly pure black */

.vision-system-screen::before {
  opacity:
    .025 !important;

  background-image:
    linear-gradient(
      rgba(255,255,255,.012) 1px,
      transparent 1px
    );

  background-size:
    100% 4px !important;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.75),
      transparent 85%
    );
}


/* subtle black-glass reflection */

.vision-system-screen::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:

    linear-gradient(
      118deg,
      rgba(255,255,255,.018) 0%,
      transparent 16%,
      transparent 70%,
      rgba(172,117,231,.012) 88%,
      transparent 100%
    ),

    radial-gradient(
      ellipse at 50% -15%,
      rgba(255,255,255,.022),
      transparent 48%
    );

  opacity:
    .9;
}


/* END SECTION 03 — PHYSICAL DISPLAY FRAME V8 */


/* ============================================================
   SECTION 03 — WINDOW CONTROLS V9
============================================================ */

.vision-system-controls {
  position: absolute;

  top: 6px;
  right: 9px;

  z-index: 12;

  display: flex;
  align-items: center;
  gap: 6px;

  pointer-events: none;
}


.vision-control {
  position: relative;

  width: 8px;
  height: 8px;

  display: block;

  border-radius: 50%;

  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.18),
    0 0 5px rgba(0,0,0,.28);
}


/* minimize */

.vision-control-min {
  background:
    #f1bf52;
}


/* maximize */

.vision-control-max {
  background:
    #5dca67;
}


/* close */

.vision-control-close {
  background:
    #ee6259;
}


/*
   Tiny glyphs become visible mostly through highlight,
   like real window controls at this scale.
*/

.vision-control::after {
  content: "";

  position: absolute;

  left: 50%;
  top: 50%;

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

  opacity:
    .52;
}


.vision-control-min::after {
  width: 4px;
  height: 1px;

  background:
    rgba(70,46,13,.8);
}


.vision-control-max::after {
  width: 3px;
  height: 3px;

  border:
    1px solid rgba(20,72,29,.72);

  border-radius:
    1px;
}


.vision-control-close::after {
  width: 4px;
  height: 4px;

  background:
    linear-gradient(
      45deg,
      transparent 42%,
      rgba(93,30,27,.8) 43%,
      rgba(93,30,27,.8) 57%,
      transparent 58%
    ),
    linear-gradient(
      -45deg,
      transparent 42%,
      rgba(93,30,27,.8) 43%,
      rgba(93,30,27,.8) 57%,
      transparent 58%
    );
}


/* END SECTION 03 — WINDOW CONTROLS V9 */


/* ============================================================
   SECTION 03 — CLEAN MAC WINDOW CONTROLS V10
   Minimal macOS-style traffic lights.
============================================================ */

.vision-system-controls {
  position: absolute !important;

  top: 6px !important;
  left: 11px !important;
  right: auto !important;

  z-index: 20 !important;

  display: flex !important;
  align-items: center !important;

  gap: 7px !important;

  height: 9px;

  pointer-events: none;
}


/* Clean physical dots */

.vision-control {
  position: relative;

  display: block !important;

  width: 9px !important;
  height: 9px !important;

  flex: 0 0 9px;

  border-radius: 50% !important;

  border:
    1px solid rgba(0,0,0,.32) !important;

  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.22),
    0 1px 2px rgba(0,0,0,.45) !important;
}


/* Remove ALL old fake symbols */

.vision-control::before,
.vision-control::after {
  content: none !important;

  display: none !important;
}


/* ------------------------------------------------------------
   Correct macOS order:
   RED — YELLOW — GREEN
------------------------------------------------------------ */

.vision-control-close {
  order: 1;

  background:
    #ff5f57 !important;
}


.vision-control-min {
  order: 2;

  background:
    #febc2e !important;
}


.vision-control-max {
  order: 3;

  background:
    #28c840 !important;
}


/* Very subtle colored glow — NOT neon */

.vision-control-close {
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.22),
    0 0 3px rgba(255,95,87,.18) !important;
}

.vision-control-min {
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.22),
    0 0 3px rgba(254,188,46,.13) !important;
}

.vision-control-max {
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.22),
    0 0 3px rgba(40,200,64,.13) !important;
}


/* END SECTION 03 — CLEAN MAC WINDOW CONTROLS V10 */


/* SECTION 03 — MAC CONTROLS SIZE TUNE V11 */

.vision-system-controls {
  top: 5px !important;
  left: 12px !important;
  gap: 8px !important;
  height: 11px !important;
}

.vision-control {
  width: 11px !important;
  height: 11px !important;
  flex-basis: 11px !important;
}

/* END MAC CONTROLS SIZE TUNE V11 */


/* ============================================================
   SECTION 03 — RESPONSIVE MAC DISPLAY FIT V12

   Keeps the full physical display visible on shorter laptops
   without touching the internal project animation.
============================================================ */

.vision-system-window {
  width:
    min(
      980px,
      calc(100vw - 220px),
      calc((100vh - 190px) * 1.807)
    ) !important;
}


/*
   Slightly reduce section height on shorter laptop screens
   so the display isn't buried below the viewport.
*/

@media (max-height: 850px) {

  .vision-system-section,
  .vision-system-scene {
    min-height:
      820px !important;
  }

}


@media (max-height: 760px) {

  .vision-system-section,
  .vision-system-scene {
    min-height:
      730px !important;
  }

  .vision-system-window {
    width:
      min(
        900px,
        calc(100vw - 180px),
        calc((100vh - 155px) * 1.807)
      ) !important;
  }

}


/*
   Very short laptop viewport.
   Still keep useful breathing room around the monitor.
*/

@media (max-height: 680px) {

  .vision-system-section,
  .vision-system-scene {
    min-height:
      660px !important;
  }

  .vision-system-window {
    width:
      min(
        820px,
        calc(100vw - 150px),
        calc((100vh - 125px) * 1.807)
      ) !important;
  }

}


/* END SECTION 03 — RESPONSIVE MAC DISPLAY FIT V12 */


/* ============================================================
   SECTION 03 — LAPTOP FIT SIZE TUNE V13
   Same responsive behavior, just slightly larger.
============================================================ */

.vision-system-window {
  width:
    min(
      1080px,
      calc(100vw - 160px),
      calc((100vh - 125px) * 1.807)
    ) !important;
}


@media (max-height: 850px) {

  .vision-system-window {
    width:
      min(
        1040px,
        calc(100vw - 140px),
        calc((100vh - 115px) * 1.807)
      ) !important;
  }

}


@media (max-height: 760px) {

  .vision-system-window {
    width:
      min(
        980px,
        calc(100vw - 120px),
        calc((100vh - 105px) * 1.807)
      ) !important;
  }

}


/* END SECTION 03 — LAPTOP FIT SIZE TUNE V13 */