/* ============================================================
   Komo laptop — CSS 3D, matte black, scroll-linked open
   --open : 0 (half-open, engraved lid)  →  1 (fully open, screen)
   ============================================================ */
.lp-stage{
  position:absolute;left:50%;bottom:clamp(2vh,7vh,9vh);
  transform:translateX(-50%);
  z-index:5;
  perspective:3400px;perspective-origin:50% 34%;
  pointer-events:none;
}
.laptop{
  position:relative;
  transform-style:preserve-3d;
  transform:rotateX(6deg) scale(var(--lp-scale,1));
  --open:1;
  --lid:calc(-181deg + var(--open) * 77deg); /* open=1 -> -104deg, open=0 -> -181deg (fully shut) */
}

/* grounding shadow */
.lp-shadow{
  position:absolute;left:50%;bottom:-26px;width:78%;height:46px;
  transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, rgba(11,15,20,.30), rgba(11,15,20,0) 72%);
  filter:blur(4px);
  opacity:calc(.5 + var(--open)*.45);
  transition:opacity .1s linear;
}

/* base / keyboard deck */
.lp-base{
  position:relative;width:520px;height:332px;
  transform-style:preserve-3d;
  transform:rotateX(77deg);
  transform-origin:50% 100%;
  background:
    linear-gradient(180deg,#252C35 0%,#171C23 38%,#0F141A 100%);
  border-radius:16px 16px 18px 18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.03);
}
/* front lip / thickness of the base */
.lp-base::after{
  content:"";position:absolute;left:0;right:0;bottom:-9px;height:14px;
  background:linear-gradient(180deg,#0C1015,#05080B);
  border-radius:0 0 18px 18px;
  transform:rotateX(-74deg);transform-origin:top;
  box-shadow:0 6px 14px rgba(0,0,0,.35);
}
.lp-hinge{position:absolute;left:7%;right:7%;top:-5px;height:10px;border-radius:6px;
  background:linear-gradient(180deg,#05080B,#11161C);transform:translateZ(1px);}
.lp-keyboard{
  position:absolute;left:6.5%;right:6.5%;top:7%;height:50%;border-radius:7px;
  background:linear-gradient(180deg,#0B0F14,#0E1318);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 0 0 0 1px rgba(0,0,0,.5);
  padding:5px;
  display:grid;grid-template-rows:repeat(5,1fr);gap:4px;
}
.lp-krow{display:grid;grid-auto-flow:column;gap:4px;}
.lp-key{background:linear-gradient(180deg,#1A2027,#10151B);border-radius:3px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.02);}
.lp-trackpad{
  position:absolute;left:32%;width:36%;bottom:6.5%;height:30%;border-radius:8px;
  background:linear-gradient(180deg,#10151B,#0C1116);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.045);
}

/* lid — a 3D slab with real thickness so the screen never vanishes edge-on */
.lp-lid{
  position:absolute;left:0;bottom:100%;width:520px;height:322px;
  transform-origin:50% 100%;
  transform:rotateX(var(--lid));
  transform-style:preserve-3d;
  --lpd:11px;           /* screen-panel thickness */
}
.lp-slab{position:absolute;inset:0;transform-style:preserve-3d;}
.lp-sf{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;border-radius:5px;}

/* the screen (faces the viewer when open) */
.lp-screen{
  transform:rotateY(180deg) translateZ(calc(var(--lpd) / 2));
  background:#04070A;
  box-shadow:inset 0 0 0 1px #11161c;
}
/* the outer shell of the lid (squared corners back the rounded screen so no bg shows through) */
.lp-back{
  transform:translateZ(calc(var(--lpd) / 2));
  border-radius:1px;
  background:linear-gradient(152deg,#1B222A 0%,#10161D 50%,#0A0F15 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;
}
.lp-back::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.06),transparent 32%,transparent 70%,rgba(255,255,255,.03));}

/* the four metal edges that give the panel its thickness */
.lp-edge{position:absolute;background:linear-gradient(180deg,#1b222b,#0a0e13);backface-visibility:visible;}
.lp-edge-top{top:0;left:0;width:100%;height:var(--lpd);transform:translateY(-50%) rotateX(90deg);}
.lp-edge-bottom{bottom:0;left:0;width:100%;height:var(--lpd);transform:translateY(50%) rotateX(90deg);}
.lp-edge-left{top:0;left:0;width:var(--lpd);height:100%;transform:translateX(-50%) rotateY(90deg);}
.lp-edge-right{top:0;right:0;width:var(--lpd);height:100%;transform:translateX(50%) rotateY(90deg);}

/* engraved Komo mark on the outer shell — only fades in as the lid shuts */
.lp-lid-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;
  opacity:calc((0.40 - var(--open)) * 4);}
.lp-lid-mark .mk{width:150px;height:112px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.45));}
.lp-lid-mark .mk path{stroke:#5c6775;stroke-opacity:.95;}
.lp-lid-mark .mk circle{fill:#17b890;}

/* black screen surface (content can be added later) */
.lp-display{
  position:absolute;inset:8px;border-radius:8px;overflow:hidden;
  box-shadow:inset 0 0 0 1px #11161c;
  background:linear-gradient(160deg,#070B10 0%,#04070A 100%);
}

/* fully-open static (mobile / reduced motion) */
.laptop.is-static{--open:1;}

/* short windows: drop the laptop lower so it never collides with the hero CTA */
@media (max-height:840px){ .lp-stage{bottom:-4vh;} }
@media (max-height:720px){ .lp-stage{bottom:-14vh;} }
@media (max-height:600px){ .lp-stage{bottom:-26vh;} }