/* ==========================================================
   home_portrait.css - Raxa home, PORTRAIT 9:16
   Loaded AFTER home_landscape.css, only on tall screens (phones).
   Picture is assets/bg.jpg.
   Positions are % of the portrait picture.
   ========================================================== */
/* same idea as landscape: fill the screen, but never grow so much that a module tile is cut off
   (114vw = keeps the left/right tiles inside the window, 98vh = keeps the lowest tile inside) */
.rx-lobbyfull .rx-lobby {
  --W: min(max(100vw, 56.22vh), 114vw, 98vh);
  --cy: 34.9%;   /* vertical centre of the cards + cloud group inside the picture box */
  width: var(--W);
  aspect-ratio: 940 / 1672;
}
@supports (height: 100dvh) {
  .rx-lobbyfull .rx-lobby {
    --W: min(max(100vw, 56.22dvh), 114vw, 98dvh);
  }
}

/* module positions (x, y, width, height as % of the portrait picture) */
.rx-lobby .rx-hit--customers-ui { left: 39.26%; top: 15.37%; width: 22.13%; height: 8.91%; }  /* Customers UI */
.rx-lobby .rx-hit--hr           { left: 10.96%; top: 20.93%; width: 18.83%; height: 8.85%; }  /* Human Resource */
.rx-lobby .rx-hit--purchases    { left: 70.43%; top: 20.93%; width: 18.94%; height: 8.97%; }  /* Purchases and Expenses */
.rx-lobby .rx-hit--sales        { left: 7.45%;  top: 33.37%; width: 17.23%; height: 8.97%; }  /* Customers and Sales */
.rx-lobby .rx-hit--reports      { left: 75.64%; top: 33.37%; width: 17.02%; height: 8.97%; }  /* Reports and Analytics */
.rx-lobby .rx-hit--inventory    { left: 8.09%;  top: 45.57%; width: 17.23%; height: 8.85%; }  /* Inventory and Logistics */
.rx-lobby .rx-hit--system       { left: 75.11%; top: 45.57%; width: 17.23%; height: 8.85%; }  /* System Management */

/* animated lights: show the portrait wires instead of the landscape ones */
.rx-wires--land { display: none; }
.rx-wires--port { display: block; }

/* background picture (assets/bg.jpg) + the sleeping pandas picture in the same footprint as before */
/* background is on .rx-lobbyfull (home_landscape.css) so it always fills the screen */
/* portrait: crop evenly from both sides (centred) */
.rx-lobbyfull { background-position: center center; }

/* liquid-glass cloud in the phone picture (style is in home_landscape.css) */
.rx-cloudglass {
  left: 25.77%; top: 29.78%; width: 48.59%; height: 18.00%;
  clip-path: polygon(0.00% 73.49%, 0.18% 80.07%, 1.45% 86.25%, 3.66% 91.79%, 6.94% 96.15%, 10.14% 98.57%, 13.86% 99.87%, 17.14% 99.50%, 46.49% 99.50%, 49.59% 100.00%, 52.44% 99.60%, 82.37% 99.57%, 84.32% 99.90%, 88.66% 98.90%, 91.11% 97.57%, 94.09% 94.88%, 96.93% 90.10%, 98.84% 84.45%, 99.82% 78.94%, 100.00% 72.46%, 99.74% 69.53%, 98.25% 62.36%, 96.56% 58.17%, 93.54% 53.09%, 92.23% 46.35%, 89.69% 40.76%, 87.23% 36.78%, 85.07% 34.12%, 82.18% 31.69%, 81.19% 30.37%, 78.28% 29.10%, 76.09% 22.36%, 73.72% 17.08%, 69.78% 10.96%, 67.55% 8.24%, 63.59% 4.75%, 60.11% 2.66%, 55.64% 0.96%, 50.16% 0.00%, 45.00% 0.96%, 40.25% 2.76%, 36.52% 5.08%, 32.82% 8.44%, 30.57% 11.06%, 26.98% 16.58%, 24.20% 22.49%, 21.98% 28.84%, 19.42% 30.37%, 14.10% 35.51%, 11.47% 39.30%, 8.45% 45.22%, 6.88% 53.09%, 3.46% 58.90%, 1.20% 65.32%);
}

.rx-panda--big {
  display: block; position: absolute; pointer-events: none;
  left: 30.14%; top: 31.32%; width: 39.840%; height: 14.932%;  /* centred in the cloud, smallest size (breath out) */
  background-image: url("Sleeping_Pandas_white.webp"); background-repeat: no-repeat; background-size: 100% 100%;
  transform-origin: 50% 50%;
  will-change: transform;
  backface-visibility: hidden;
  animation: rxPandaBreath 10s cubic-bezier(.37,0,.63,1) infinite;  /* keyframes live in home_landscape.css */
}
.rx-panda--baby { display: none; }
@media (prefers-reduced-motion: reduce) { .rx-panda--big { animation: none; } }

/* ==========================================================
   RAXA PHONE PORTRAIT CARDS
   Match the crisp glass-card treatment used by the landscape file,
   with responsive icon and type sizes for phone screens.
   ========================================================== */
.rx-lobbyfull .rx-lobby {
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Each hotspot is also the visible card, just as in landscape. */
.rx-lobby .rx-hit {
  --u: calc(var(--W) / 940);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, calc(var(--u) * 7), 7px);
  padding: clamp(4px, calc(var(--u) * 8), 8px);
  box-sizing: border-box;
  border-radius: clamp(12px, calc(var(--u) * 20), 19px);
  color: #fff;
  text-decoration: none;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
  box-shadow: var(--glass-shadow);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}

.rx-lobby .rx-hit .rx-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: clamp(25px, calc(var(--u) * 54), 38px);
  height: clamp(25px, calc(var(--u) * 54), 38px);
  min-width: 0;
  min-height: 0;
  border-radius: clamp(7px, calc(var(--u) * 13), 11px);
  background: transparent;
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: var(--glow-rest);
}
.rx-lobby .rx-hit .rx-ico svg {
  display: block;
  width: 76%;
  height: 76%;
  shape-rendering: geometricPrecision;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.7));
}
.rx-lobby .rx-hit .rx-lbl {
  display: block;
  max-width: 100%;
  text-align: center;
  font-style: normal;
  font-family: "Google Sans Flex", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: clamp(10px, calc(var(--u) * 19), 14px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.rx-lobby .rx-hit > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.rx-lobby .rx-hit:hover,
.rx-lobby .rx-hit:focus-visible {
  background: var(--glass-bg);
  border-color: rgba(255,255,255,.8);
  box-shadow: var(--glow-hover);
  outline: none;
}
.rx-lobby .rx-hit:active { transform: translateY(0); }

/* Keep the portrait artwork's wire layer active and the landscape layer hidden. */
.rx-wires--land { display: none; }
.rx-wires--port { display: block; }

@media (max-width: 360px) {
  .rx-lobby .rx-hit { gap: 3px; padding: 3px; }
  .rx-lobby .rx-hit .rx-lbl { font-size: clamp(9px, calc(var(--u) * 18), 11px); }
  .rx-lobby .rx-hit .rx-ico { width: 23px; height: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  .rx-lobby .rx-hit { transition: none; }
}


/* Brand tagline beneath the two pandas in the phone artwork */
.rx-lobby .rx-panda-tagline {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 75.8%;
  transform: translateX(-50%);
  width: 82%;
  box-sizing: border-box;
  text-align: center;
  font-family: "Google Sans Flex", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: clamp(11px, calc(var(--W) * .023), 20px);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.025em;
  text-wrap: balance;
  color: #fff;
  text-shadow: 0 2px 5px rgba(0,0,0,.95), 0 0 10px rgba(0,0,0,.8);
  pointer-events: none;
}
.rx-lobby .rx-panda-tagline__lead {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255,255,255,.38), 0 2px 4px rgba(0,0,0,.95);
}
.rx-lobby .rx-panda-tagline__rest { color: #fff; }
@media (max-width: 360px) {
  .rx-lobby .rx-panda-tagline { width: 86%; font-size: clamp(10px, calc(var(--W) * .022), 15px); }
}


/* Tagline is now a shared viewport footer, not part of the portrait artwork. */
.rx-lobby .rx-panda-tagline { display: none !important; }

/* logo inside the cloud (white) - same footprint as the old logo in the phone picture */
.rx-lobby .rx-logo { left: 34.787%; top: 33.911%; width: 32.021%; height: 10.810%; }