/* CONTEXT
   module: websites/pgpro365
   purpose: The physical look of the laptop and phone in the hero picture (lib/hardware.mjs): real 3D geometry in CSS with proportions taken from real devices (a 16:10 laptop with thin bezels and a notch, a phone 71.5 by 147.6 units with the thickness of a real phone), aluminium and titanium materials, keycaps, trackpad, speaker grilles, hinge, side buttons, camera island, status bar and glass reflections. Rounded edges are built by stacking thin layers, so corners stay round when the device turns. Sized in em, so it scales as one piece and stays sharp at 4K.
   route: none   permission: none   tenant: not applicable   audience: public
   tests: lib/check.mjs (size) */

/* Laptop: the origin is the middle of the keyboard deck; y is up (negative), z is towards the viewer. Width 66.7em, deck depth 46em, lid 43.4em tall. */
.l3d { position: absolute; left: 50%; top: 44em; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, -8deg)) rotateY(var(--ry, 0deg)); }
.l3d.smooth { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.hinge { position: absolute; left: 0; top: 0; transform-style: preserve-3d; transform: translate3d(0, 0, -23em); }
.lidbox { position: absolute; left: -33.35em; bottom: 0; width: 66.7em; height: 43.4em; transform-origin: 50% 100%; transform: rotateX(13deg); transform-style: preserve-3d; }
.lid { position: absolute; inset: 0; box-sizing: border-box; padding: .6em; border-radius: 1.4em 1.4em .6em .6em; background: #04060a; box-shadow: inset 0 0 0 .1em #1b2230; }
.glass { position: relative; height: 100%; border-radius: .9em; overflow: hidden; background: #f8fafc; }
.notch { position: absolute; top: 0; left: 50%; translate: -50% 0; z-index: 4; width: 7.4em; height: 1.5em; background: #04060a; border-radius: 0 0 1em 1em; }
.notch::after { content: ""; position: absolute; top: .45em; left: 50%; translate: -50% 0; width: .55em; height: .55em; border-radius: 50%; background: radial-gradient(#27456e, #02040a 70%); }
.glare { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(118deg, rgb(255 255 255 / .17), rgb(255 255 255 / .04) 30%, transparent 42%); }
.ll, .lback { position: absolute; display: block; inset: 0; border-radius: 1.4em 1.4em .6em .6em; }
.ll { background: linear-gradient(#aab6c6, #8793a6); transform: translateZ(calc(var(--i) * -.14em)); }
.ll1 { --i: 1; } .ll2 { --i: 2; } .ll3 { --i: 3; } .ll4 { --i: 4; } .ll5 { --i: 5; }
.lback { transform: translateZ(-.72em) rotateY(180deg); background: linear-gradient(135deg, #dce4ed, #a6b3c4); }
.lback::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6em; height: 6em; translate: -50% -50%; border-radius: 1.6em; background: linear-gradient(135deg, #2dd4bf, #0b5f58); }
.base { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.bt, .bs { position: absolute; display: block; left: -33.35em; top: -23em; width: 66.7em; height: 46em; border-radius: .9em .9em 2.2em 2.2em; }
.bt { transform: rotateX(90deg); background: repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 .12em, rgb(0 0 0 / .018) .12em .26em), linear-gradient(#ecf0f6, #cdd6e1); box-shadow: inset 0 0 0 .1em rgb(255 255 255 / .65), inset 0 -.4em .8em rgb(0 0 0 / .08); }
.bs { background: linear-gradient(#b8c3d1, #8692a5); transform: rotateX(90deg) translateZ(calc(var(--i) * -.2em)); }
.bs1 { --i: 1; } .bs2 { --i: 2; } .bs3 { --i: 3; } .bs4 { --i: 4; } .bs5 { --i: 5; } .bs6 { --i: 6; }
.barrel { position: absolute; display: block; left: -31em; top: -.6em; width: 62em; height: 1.2em; border-radius: .6em; background: linear-gradient(#3a4455, #0a0d14 55%, #3a4455); transform: translateZ(-22.6em); }
.spk { position: absolute; top: 3.4em; width: 4em; height: 22.6em; background: radial-gradient(circle, #5a6577 .1em, transparent .12em) 0 0 / .6em .6em; opacity: .6; }
.spk.l { left: 1.2em; } .spk.r { right: 1.2em; }
.keys { position: absolute; left: 6.6em; right: 6.6em; top: 3.2em; height: 22.6em; box-sizing: border-box; padding: .7em; display: grid; grid-template-rows: .55fr repeat(5, 1fr); gap: .4em; border-radius: .9em; background: #0b1018; box-shadow: inset 0 0 1.2em #000, 0 0 0 .1em rgb(255 255 255 / .35); }
.kr { display: grid; grid-template-columns: repeat(60, 1fr); gap: .4em; }
.kc { display: grid; place-items: center; min-width: 0; border-radius: .35em; font: 600 .78em/1 ui-sans-serif, system-ui, sans-serif; color: #c3ccd9; background: linear-gradient(#272f3f, #171d29); box-shadow: 0 .12em 0 #04070c, inset 0 .08em 0 rgb(255 255 255 / .13); }
.kr:first-child .kc { font-size: .6em; }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; } .s7 { grid-column: span 7; }
.s8 { grid-column: span 8; } .s9 { grid-column: span 9; } .s11 { grid-column: span 11; } .s24 { grid-column: span 24; }
.pad { position: absolute; left: 50%; bottom: 2.6em; width: 25em; height: 14.4em; translate: -50% 0; border-radius: 1em; background: linear-gradient(#e1e8f0, #c9d2de); box-shadow: inset 0 0 0 .12em #adb8c7, inset 0 .15em .5em rgb(0 0 0 / .08); }
.thumb { position: absolute; left: 50%; bottom: 0; translate: -50% 0; width: 11em; height: .9em; border-radius: .9em .9em 0 0; background: linear-gradient(#aab6c5, transparent); }
.hint { position: absolute; left: 50%; bottom: -2.2em; translate: -50% 0; padding: .45em 1.2em; border-radius: 2em; background: rgb(255 255 255 / .1); border: .1em solid rgb(255 255 255 / .22); color: #cfe9e5; font-size: 1.15em; font-weight: 650; pointer-events: none; transition: opacity .4s; }
.l-wrap.touched .hint { opacity: 0; }

/* Phone: 71.5 by 147.6 units, about 8 units thick (here 2.2em on a 25em width), titanium frame. */
.phone { position: relative; width: 100%; aspect-ratio: 71.5 / 147.6; transform-style: preserve-3d; transition: transform .35s cubic-bezier(.2, .8, .2, 1); transform: rotateY(calc(-12deg + var(--mx) * 6deg)) rotateX(calc(4deg - var(--my) * 4deg)) rotateZ(1.5deg); }
.p-wrap:hover .phone { transform: rotateY(calc(-7deg + var(--mx) * 6deg)) rotateX(calc(2deg - var(--my) * 4deg)) rotateZ(1deg) scale(1.04); }
.pbody { position: absolute; inset: 0; transform-style: preserve-3d; }
.pl, .pback, .pfront { position: absolute; display: block; inset: 0; border-radius: 3.5em; }
.pl { background: linear-gradient(120deg, #9aa3b0, #dfe3e9 38%, #868e9b 68%, #c4c9d2); transform: translateZ(calc(var(--i) * -.17em)); }
.pl1 { --i: 1; } .pl2 { --i: 2; } .pl3 { --i: 3; } .pl4 { --i: 4; } .pl5 { --i: 5; } .pl6 { --i: 6; }
.pl7 { --i: 7; } .pl8 { --i: 8; } .pl9 { --i: 9; } .pl10 { --i: 10; } .pl11 { --i: 11; } .pl12 { --i: 12; }
.pback { transform: translateZ(-2.2em) rotateY(180deg); background: linear-gradient(135deg, #6b7280, #8b93a1); }
.pfront { box-sizing: border-box; padding: .28em; background: linear-gradient(120deg, #aab2be, #e4e8ee 40%, #8f97a4 70%, #cdd2da); box-shadow: inset 0 0 0 .05em #6b7280; }
.pbez { position: relative; box-sizing: border-box; height: 100%; padding: .5em; border-radius: 3.25em; background: #030507; }
.pscreen { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 2.8em; background: #f8fafc; color: var(--ink); }
.pbtn { position: absolute; display: block; width: .3em; border-radius: .15em; background: linear-gradient(90deg, #7b8390, #d6dbe2, #7b8390); transform: translateZ(-1.1em); }
.pb-a { left: -.12em; top: 15%; height: 2.6%; } .pb-u { left: -.12em; top: 21%; height: 5.4%; } .pb-d { left: -.12em; top: 28.5%; height: 5.4%; } .pb-p { right: -.12em; top: 25%; height: 8.6%; }
.island { position: absolute; top: 1.2em; left: 50%; translate: -50% 0; z-index: 6; width: 7.4em; height: 2.2em; border-radius: 2em; background: #000; }
.island::after { content: ""; position: absolute; right: .75em; top: 50%; translate: 0 -50%; width: .85em; height: .85em; border-radius: 50%; background: radial-gradient(#1f3a63, #02040a 70%); }
.status { flex: none; display: flex; align-items: center; justify-content: space-between; height: 4.1em; padding: 1.3em 2.3em 0; font-weight: 800; }
.sys { display: inline-flex; align-items: center; gap: .5em; }
.sig { display: inline-flex; align-items: flex-end; gap: .12em; height: .9em; }
.sig i { width: .26em; border-radius: .05em; background: #0f172a; } .sig i:nth-child(1) { height: .4em; } .sig i:nth-child(2) { height: .56em; } .sig i:nth-child(3) { height: .72em; } .sig i:nth-child(4) { height: .9em; }
.bat { position: relative; width: 1.9em; height: .9em; border: .1em solid #0f172a; border-radius: .3em; }
.bat::before { content: ""; position: absolute; inset: .1em .35em .1em .1em; border-radius: .12em; background: #0f172a; }
.pcontent { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: .2em 1em 2.4em; }
.homebar { position: absolute; bottom: .75em; left: 50%; translate: -50% 0; width: 8em; height: .3em; border-radius: 1em; background: #0f172a; opacity: .85; }
.pglare { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: linear-gradient(125deg, rgb(255 255 255 / .3), transparent 35%, transparent 72%, rgb(255 255 255 / .1)); }
@media (prefers-reduced-motion: reduce) { .phone { transform: none !important; } }