/* Libero Phone: a generic flagship handset in CSS 3D, with real thickness.
 * Our own design: edge-to-edge screen with a centred punch-hole, a slim brushed-metal
 * frame, side buttons, and a raised camera plateau with two stacked lenses and a
 * flash column. Built for spinning: every part lives in 3D space.
 * Size it with --lp-w (width); height, thickness and radius follow. */
.lp{--lp-w:300px;--lp-h:calc(var(--lp-w)*2.08);--lp-t:calc(var(--lp-w)*.088);--lp-r:calc(var(--lp-w)*.15);--lp-lit:0;--lp-back-lit:0;
  position:relative;width:var(--lp-w);height:var(--lp-h);transform-style:preserve-3d}
.lp *{box-sizing:border-box}
/* the frame: thin slices stacked through the thickness form a solid, rounded edge */
.lp-slice{position:absolute;inset:0;border-radius:var(--lp-r);background:#1b1b20;backface-visibility:visible}
.lp-slice::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(255,255,255,.16),rgba(255,255,255,0) 26%,rgba(255,255,255,0) 74%,rgba(255,255,255,.16));opacity:var(--lp-lit)}
.lp-chamfer::after{background:linear-gradient(90deg,rgba(255,255,255,.42),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,.42))}
/* front glass */
.lp-front{position:absolute;inset:0;border-radius:var(--lp-r);background:#050507;padding:calc(var(--lp-w)*.03);backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.lp-screen{position:relative;width:100%;height:100%;border-radius:calc(var(--lp-r) - var(--lp-w)*.03);overflow:hidden;background:#111}
.lp-screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;-webkit-user-drag:none;user-select:none}
.lp-hole{position:absolute;top:calc(var(--lp-w)*.038);left:50%;width:calc(var(--lp-w)*.06);height:calc(var(--lp-w)*.06);margin-left:calc(var(--lp-w)*-.03);border-radius:50%;
  background:radial-gradient(circle at 40% 38%,#2b2f4a 0 18%,#07070b 22%);box-shadow:0 0 0 2px #000;z-index:2}
.lp-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.16) 45%,rgba(255,255,255,0) 60%);opacity:var(--lp-glare,.5)}
/* back: brushed midnight with a soft Libero glow */
.lp-back{position:absolute;inset:0;border-radius:var(--lp-r);backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;
  background:radial-gradient(70% 45% at 30% 85%,rgba(214,36,159,.35),transparent 70%),radial-gradient(60% 40% at 75% 25%,rgba(91,43,224,.35),transparent 70%),linear-gradient(160deg,#2a2742,#14121f 60%,#1b1830);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12)}
.lp-back::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,rgba(255,255,255,0) 25%,rgba(255,255,255,.14) 45%,rgba(255,255,255,0) 65%);opacity:var(--lp-back-lit)}
/* the chrome logo */
.lp-logo{position:absolute;left:0;right:0;top:52%;display:grid;justify-items:center;gap:calc(var(--lp-w)*.03);filter:drop-shadow(0 1px 0 rgba(0,0,0,.55)) drop-shadow(0 -1px 0 rgba(255,255,255,.12))}
.lp-logo-word,.lp-logo-sub{--chrome:linear-gradient(110deg,#5d5a70 0%,#a9a6bc 22%,#e9e6f7 38%,#ffffff 47%,#ffd9f0 51%,#cfcbe2 58%,#8a879e 74%,#55526a 100%);
  background:var(--chrome);background-size:280% 100%;background-position:var(--lp-shine,50%) 0}
.lp-logo-word{width:calc(var(--lp-w)*.5);aspect-ratio:893.7/180;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.lp-logo-sub{font:700 calc(var(--lp-w)*.05)/1 "DM Sans",system-ui,sans-serif;letter-spacing:.62em;padding-left:.62em;-webkit-background-clip:text;background-clip:text;color:transparent}
/* camera plateau: raised, with its own stacked edge */
.lp-cam{position:absolute;top:calc(var(--lp-w)*.06);left:calc(var(--lp-w)*.06);width:calc(var(--lp-w)*.36);height:calc(var(--lp-w)*.5);transform-style:preserve-3d}
.lp-cam-slice{position:absolute;inset:0;border-radius:calc(var(--lp-w)*.1);background:#1b1a26}
.lp-cam-top{position:absolute;inset:0;border-radius:calc(var(--lp-w)*.1);background:linear-gradient(150deg,#34324a,#1a1826);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  display:grid;grid-template-columns:1fr calc(var(--lp-w)*.09);grid-template-rows:1fr 1fr;gap:calc(var(--lp-w)*.02);padding:calc(var(--lp-w)*.03)}
.lp-lens{grid-column:1;border-radius:50%;background:radial-gradient(circle at 38% 34%,#5b5f86 0 6%,#1d2033 14%,#06070c 34%,#11121c 52%,#2b2a3c 60%,#0d0d14 64%);
  box-shadow:0 0 0 calc(var(--lp-w)*.008) #3a384f,0 0 0 calc(var(--lp-w)*.016) #0c0b12;aspect-ratio:1;align-self:center;justify-self:center;width:100%}
.lp-side{grid-column:2;grid-row:1 / span 2;display:grid;align-content:center;gap:calc(var(--lp-w)*.03);justify-items:center}
.lp-flash{width:calc(var(--lp-w)*.05);height:calc(var(--lp-w)*.05);border-radius:50%;background:radial-gradient(circle,#fff5d6 0 35%,#c9b98d 60%,#5b5640)}
.lp-sensor{width:calc(var(--lp-w)*.035);height:calc(var(--lp-w)*.035);border-radius:50%;background:#0a0a10;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
/* side buttons stand on the frame */
.lp-btn{position:absolute;width:calc(var(--lp-t)*.46);border-radius:4px;background:#17171c}
.lp-btn-top{background:linear-gradient(180deg,#3a3a44,#202027 18%,#1b1b21 82%,#33333c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
/* floor shadow: sits outside the spinning phone, LiberoPhone scales it to the phone's footprint */
.lp-floor{position:absolute;left:50%;width:var(--lp-w);margin-left:calc(var(--lp-w)/-2);height:calc(var(--lp-w)*.11);border-radius:50%;background:rgba(0,0,0,.62);filter:blur(16px);pointer-events:none}