/* CONTEXT
   module: websites/pgpro365
   purpose: The laptop and phone picture and its animation (lib/devices.mjs). Everything is sized in em from the width of the picture, so it scales as one piece and stays sharp on any screen, 4K included. The animation is CSS only, slow and calm, and stops for visitors who ask for reduced motion.
   route: none   permission: none   tenant: not applicable   audience: public
   tests: lib/check.mjs (size) */

.stage { --t: #0f766e; --ink: #0f172a; --mute: #64748b; --line: #e2e8f0; --card: #fff; --soft: #f1f5f9;
  container-type: inline-size; position: relative; width: min(1180px, 100%); margin-inline: auto; aspect-ratio: 100 / 57; perspective: 1500px; --mx: 0; --my: 0; }
.chip, .stage-note { z-index: 3; }
.glow { position: absolute; inset: 0; background: radial-gradient(38% 50% at 33% 55%, rgb(45 212 191 / .28), transparent 70%), radial-gradient(22% 45% at 80% 50%, rgb(99 102 241 / .26), transparent 70%); filter: blur(24px); }
.dev { position: absolute; transform-style: preserve-3d; animation: bob 7s ease-in-out infinite; }
.l-wrap { left: -1%; top: 3%; width: 80%; height: 52em; font-size: 1.2cqw; transform-style: flat; perspective: 1100em; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; outline: none; }
.l-wrap:active { cursor: grabbing; }
.l-wrap:focus-visible { outline: .2em solid #5eead4; outline-offset: .6em; border-radius: 1em; }
.p-wrap { right: -1%; top: 18%; width: 17%; font-size: .67cqw; animation-duration: 8.5s; animation-delay: -3s; }
.floor { position: absolute; left: 8%; right: 8%; bottom: -9%; height: 7%; background: radial-gradient(closest-side, rgb(45 212 191 / .5), transparent); filter: blur(10px); }
.screen { display: grid; grid-template-columns: 11em 1fr; height: 100%; background: #f8fafc; border-radius: .6em; overflow: hidden; color: var(--ink); }
.side { background: #fff; border-right: .1em solid var(--line); padding: 1em .8em; display: flex; flex-direction: column; gap: .35em; font-size: .92em; }
.who { display: flex; align-items: center; gap: .5em; margin-bottom: .9em; font-size: 1.05em; }
.who img { width: 2em; height: 2em; border-radius: .5em; }
.n { padding: .5em .7em; border-radius: .5em; color: var(--mute); font-weight: 600; animation: navoff 18s infinite both; }
.n1 { animation-name: nav; } .n2 { animation-name: nav; animation-delay: 6s; } .n3 { animation-name: nav; animation-delay: 12s; }
.n0 { animation: none; }
.main { display: flex; flex-direction: column; min-width: 0; }
.top { display: flex; align-items: center; justify-content: space-between; padding: .8em 1.1em; border-bottom: .1em solid var(--line); background: #fff; position: relative; height: 3.1em; }
.t { position: absolute; left: 1.1em; font-size: 1.15em; opacity: 0; animation: fade 18s infinite both; }
.t2 { animation-delay: 6s; } .t3 { animation-delay: 12s; }
.avatar { margin-left: auto; display: grid; place-items: center; width: 2em; height: 2em; border-radius: 50%; background: var(--t); color: #fff; font-weight: 700; font-size: .85em; }
.slides { position: relative; flex: 1; }
.slide { position: absolute; inset: 0; padding: 1em 1.1em; display: flex; flex-direction: column; gap: .9em; opacity: 0; animation: slide 18s infinite both; }
.s2 { animation-delay: 6s; } .s3 { animation-delay: 12s; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7em; }
.k { background: var(--card); border: .1em solid var(--line); border-radius: .7em; padding: .7em .8em; display: flex; flex-direction: column; }
.k span { font-size: .8em; color: var(--mute); } .k b { font-size: 1.6em; letter-spacing: -.02em; } .k i { font-size: .72em; font-style: normal; color: var(--mute); }
.k.warn b { color: #b45309; }
.panels { display: grid; grid-template-columns: 1.25fr 1fr; gap: .8em; flex: 1; min-height: 0; }
.panel { background: var(--card); border: .1em solid var(--line); border-radius: .7em; padding: .8em .9em; display: flex; flex-direction: column; gap: .5em; }
.panel.wide { flex: 1; }
.panel .ph { margin: 0; font-size: .95em; font-weight: 700; }
.chart { display: flex; align-items: flex-end; gap: .7em; flex: 1; padding-top: .3em; }
.col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3em; height: 100%; justify-content: flex-end; }
.pair { display: flex; align-items: flex-end; gap: .2em; height: 82%; width: 100%; justify-content: center; }
.cbar { width: 38%; border-radius: .25em .25em 0 0; transform-origin: bottom; animation: grow 18s infinite both; }
.cbar.b { background: #99f6e4; } .cbar.c { background: var(--t); }
.s1 .cbar[data-h="62"] { height: 62%; } .s1 .cbar[data-h="54"] { height: 54%; } .s1 .cbar[data-h="70"] { height: 70%; } .s1 .cbar[data-h="61"] { height: 61%; }
.s1 .cbar[data-h="74"] { height: 74%; } .s1 .cbar[data-h="69"] { height: 69%; } .s1 .cbar[data-h="81"] { height: 81%; } .s1 .cbar[data-h="72"] { height: 72%; }
.s1 .cbar[data-h="88"] { height: 88%; } .s1 .cbar[data-h="80"] { height: 80%; } .s1 .cbar[data-h="92"] { height: 92%; } .s1 .cbar[data-h="71"] { height: 71%; }
.col i { font-size: .7em; font-style: normal; color: var(--mute); }
.meter { display: grid; grid-template-columns: 6.5em 1fr 2.6em; align-items: center; gap: .5em; font-size: .8em; }
.meter em { height: .7em; background: var(--soft); border-radius: 1em; overflow: hidden; display: block; }
.fill { display: block; height: 100%; background: var(--t); border-radius: 1em; transform-origin: left; animation: growx 18s infinite both; }
.fill[data-w="94"] { width: 94%; } .fill[data-w="88"] { width: 88%; } .fill[data-w="79"] { width: 79%; } .fill[data-w="71"] { width: 71%; }
.meter b { text-align: right; }
.beds { display: grid; grid-template-columns: repeat(8, 1fr); gap: .5em; flex: 1; align-content: start; }
.bed { display: grid; place-items: center; aspect-ratio: 1.5; border-radius: .5em; font-size: .75em; font-weight: 700; font-style: normal; }
.bed i { font-style: normal; } .bed.full { background: #ccfbf1; color: #115e59; } .bed.due { background: #fef3c7; color: #92400e; } .bed.free { background: var(--soft); color: var(--mute); border: .1em dashed #cbd5e1; }
.s2 .bed { animation: pop 18s infinite both; animation-delay: 6s; }
.legend { margin: .2em 0 0; font-size: .75em; color: var(--mute); display: flex; gap: .5em; align-items: center; }
.legend .bed { width: 1.4em; aspect-ratio: 1; display: inline-block; }
.row { display: flex; justify-content: space-between; align-items: center; padding: .55em .2em; border-top: .1em solid var(--line); font-size: .85em; }
.row:first-of-type { border-top: 0; }
.row span:first-child { display: flex; flex-direction: column; } .row i { font-style: normal; font-size: .85em; color: var(--mute); }
.dp { font-size: .75em; font-weight: 700; padding: .2em .7em; border-radius: 2em; background: #ccfbf1; color: #115e59; }
.dp.due { background: #fef3c7; color: #92400e; } .dp.prog { background: #e0e7ff; color: #3730a3; }
.s3 .row { animation: slidein 18s infinite both; animation-delay: 12s; }

.hi { margin: 0; font-weight: 800; font-size: 1.25em; }
.due-card { background: linear-gradient(135deg, #14b8a6, #0f766e); color: #fff; border-radius: 1em; padding: 1em; display: flex; flex-direction: column; }
.due-card span { font-size: .9em; opacity: .9; } .due-card b { font-size: 2em; letter-spacing: -.02em; } .due-card i { font-style: normal; font-size: .85em; opacity: .9; }
.plist { background: #fff; border: .1em solid var(--line); border-radius: .9em; padding: .7em .8em; font-size: .9em; }
.plist .ph5 { font-weight: 700; margin: 0 0 .3em; font-size: .85em; color: var(--mute); text-transform: uppercase; letter-spacing: .06em; } .plist p { margin: .25em 0; }
.ribbon { position: absolute; top: -1.1em; right: -.2em; z-index: 3; background: #f59e0b; color: #1f1300; font-weight: 800; font-size: 1.15em; white-space: nowrap; padding: .35em .9em; border-radius: 2em; box-shadow: 0 .4em 1em rgb(0 0 0 / .25); }
.chip { position: absolute; display: flex; align-items: center; gap: .6em; background: var(--card); color: var(--ink); border: .1em solid var(--line); border-radius: 2em; padding: .7em 1.1em; font-weight: 700; font-size: 1.15cqw; box-shadow: 0 1em 2em rgb(2 20 25 / .25); animation: float 6s ease-in-out infinite; }
.c1 { left: 1%; bottom: 12%; } .c2 { left: 34%; top: -8%; animation-delay: 1.5s; } .c3 { left: 4%; top: -8%; animation-delay: 3s; }
.dot { width: .8em; height: .8em; border-radius: 50%; background: #f59e0b; } .dot.ok { background: #10b981; }
.stage-note { position: absolute; left: 0; right: 0; bottom: -4.2em; margin: 0; text-align: center; font-size: max(.72rem, .85cqw); color: #94a3b8; }

@keyframes slide { 0% { opacity: 0; transform: translateY(.8em); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-.5em); } }
@keyframes fade { 0% { opacity: 0; } 3%, 31% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes nav { 0%, 31% { background: #ccfbf1; color: #115e59; } 34%, 100% { background: transparent; color: var(--mute); } }
@keyframes navoff { 0%, 100% { background: transparent; } }
@keyframes grow { 0%, 3% { transform: scaleY(.1); } 14%, 100% { transform: scaleY(1); } }
@keyframes growx { 0%, 3% { transform: scaleX(.05); } 16%, 100% { transform: scaleX(1); } }
@keyframes pop { 0%, 4% { transform: scale(.5); opacity: 0; } 14%, 100% { transform: none; opacity: 1; } }
@keyframes slidein { 0%, 4% { transform: translateX(-1.5em); opacity: 0; } 14%, 100% { transform: none; opacity: 1; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.6em; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.9em); } }
@media (prefers-reduced-motion: reduce) {
  .dev, .phone, .chip, .slide, .t, .n, .cbar, .fill, .bed, .row { animation: none !important; }
  .s1, .t1 { opacity: 1; } .n1 { background: #ccfbf1; color: #115e59; }
}
@media (max-width: 700px) {
    .stage { aspect-ratio: auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 3rem 4%; padding-bottom: 1rem; }
  .dev { position: relative; }
  .l-wrap { left: auto; top: auto; width: 100%; font-size: 1.5cqw; }
  .p-wrap { left: auto; right: auto; top: auto; width: 52%; font-size: 2.04cqw; }
  .c1 { left: 0; top: 46%; bottom: auto; } .c2 { left: auto; right: 0; top: 0; } .c3 { display: none; }
  .stage-note { position: static; margin: 0; width: 100%; }
  .floor { bottom: -4%; }
}

.ptabs { display: flex; gap: .3em; margin-bottom: .8em; padding: .25em; border-radius: 2em; background: #e2e8f0; }
.pt { flex: 1; text-align: center; font-size: .82em; font-weight: 700; padding: .4em .2em; border-radius: 2em; color: #64748b; animation: ptab 14s infinite both; }
.pt2 { animation-delay: 7s; }
.pviews { position: relative; flex: 1; min-height: 0; }
.pv { position: absolute; inset: 0; display: flex; flex-direction: column; gap: .8em; opacity: 0; animation: pview 14s infinite both; }
.v2 { animation-delay: 7s; }
@keyframes ptab { 0%, 48% { background: #fff; color: #0f766e; box-shadow: 0 .1em .4em rgb(0 0 0 / .15); } 52%, 100% { background: transparent; color: #64748b; box-shadow: none; } }
@keyframes pview { 0% { opacity: 0; transform: translateY(.6em); } 4%, 46% { opacity: 1; transform: none; } 50%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pt, .pv { animation: none !important; } .v1 { opacity: 1; } .pt1 { background: #fff; color: #0f766e; } }