/* ============================================================
   Christian.OS — SCENE layer (premium staging)
   Drop-in: add AFTER os.css, plus <script src="scene.js"></script>
   before os-core.js. Stages the Mac like a room shot:
   terracotta wall + warm light pool, teal saltillo tile floor,
   contact shadow, CRT glass sheen. Tokens only.
   ============================================================ */

/* richer wall: keep terracotta but add a warm light pool + depth.
   We layer on top of body.os's existing background via ::before/props. */
.scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}

/* warm spotlight pooled behind the machine (hero lighting) */
.scene .light{
  position:absolute;left:50%;top:38%;width:130vmax;height:130vmax;transform:translate(-50%,-50%);
  background:radial-gradient(circle at center,
    rgba(255,228,196,.34) 0%,
    rgba(231,150,90,.16) 26%,
    rgba(168,71,42,0) 56%);
}
/* vertical sky→wall grade for depth (lighter up high) */
.scene .grade{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(255,230,200,.16) 0%, rgba(125,51,32,0) 34%, rgba(74,22,10,.34) 100%);
}

/* ---- teal saltillo tile floor (palette flipped: terracotta wall, teal floor) ---- */
.scene .desk{
  position:absolute;left:0;right:0;bottom:0;height:31vh;min-height:180px;
  background-color:#2f6d5b;
  background-image:
    linear-gradient(rgba(16,42,38,.55) 2px, transparent 2px),
    linear-gradient(90deg, rgba(16,42,38,.55) 2px, transparent 2px),
    radial-gradient(circle at 34% 28%, rgba(190,230,220,.16), transparent 58%);
  background-size:88px 88px, 88px 88px, 88px 88px;
  background-position:center bottom;
}
/* far edge of the floor catches the light */
.scene .desk::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg, rgba(210,240,232,0), rgba(210,240,232,.6) 50%, rgba(210,240,232,0));
}
/* tile sheen + depth toward the front */
.scene .desk::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10) 0 2px, transparent 3px),
    linear-gradient(180deg, transparent 52%, rgba(8,28,25,.5) 100%);
}

/* grounding contact shadow where the Mac meets the floor */
.scene .ground{
  position:absolute;left:50%;bottom:23vh;width:min(54vw,720px);height:84px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(8,24,20,.5) 0%, rgba(8,24,20,.26) 42%, rgba(8,24,20,0) 72%);
  filter:blur(3px);
}

/* ---- CRT glass reflection sheen (over the live screen) ---- */
.screen .glass{position:absolute;inset:0;z-index:9001;pointer-events:none;border-radius:9px;overflow:hidden;}
.screen .glass::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(118deg,
    rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 14%,
    rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%,
    rgba(255,255,255,.05) 92%);
}
/* soft top-left glare blob */
.screen .glass::after{
  content:"";position:absolute;left:-14%;top:-30%;width:62%;height:80%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.12), rgba(255,255,255,0) 62%);
  transform:rotate(-16deg);
}

/* hide the whole scene on the mobile hardware-shell layout */
@media (max-width:760px){ .scene{display:none;} .screen .glass{display:none;} }