/* ==========================================================
   home_landscape.css - Raxa home, LANDSCAPE (default)
   Full-screen picture (cover) with clickable module hotspots.
   Picture is assets/bg.jpg (no cards baked in).
   The seven module cards are live HTML/CSS (sharp text, vector icons) drawn over it.
   Hotspots are children of the picture box, so they follow its
   crop and scale on any screen. Positions are % of the picture.
   ========================================================== */
:root {
  --rx-lime: #ffffff;
  /* liquid glass: identical to .sm-glass in the System Management template */
  --glass-bg: linear-gradient(150deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 65%, rgba(255,255,255,.04));
  --glass-filter: blur(5px) saturate(130%);
  --glass-border: rgba(255,255,255,.2);
  --glass-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 28px rgba(0,0,0,.22);
  --glow-rest: 0 0 16px rgba(255,255,255,.22);
  --glow-hover: 0 0 22px rgba(255,255,255,.35);
  /* one cycle of the wire lights, node flashes and cloud glow (they all share it so they stay in step) */
  --light-cycle: 6.8s;
  --light-slow: 2;   /* the per-wire start delays set in index.html are multiplied by this */
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b0d08;
}

/* the whole page */
.rx-lobbyfull {
  position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  /* adaptive background: always covers the whole screen, centred, in any size or orientation */
  background: #171819 url("bg.jpg") center / cover no-repeat;
}

/* the picture box (never distorted):
   - fills the screen (cover) on wide screens
   - on squarer / narrower windows it stops growing so the module tiles are never cut off
     (122vw = keeps the left/right tiles inside the window, 260vh = keeps the top tile inside)
   - the cards + cloud + panda group (not the whole picture) is centered on the screen, up/down and left/right */
.rx-lobbyfull .rx-lobby {
  --W: min(max(100vw, 177.78vh), 110vw, 222vh);
  --cy: 30.6%;   /* vertical centre of the cards + cloud group inside the picture box */
  position: absolute;
  left: 50%;
  top: 50%;   /* the group centre (--cy) lands on the screen centre */
  transform: translate(-50%, calc(var(--cy) * -1));
  width: var(--W);
  aspect-ratio: 1672 / 940;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

@supports (height: 100dvh) {
  .rx-lobbyfull .rx-lobby {
    --W: min(max(100vw, 177.78dvh), 110vw, 222dvh);
  }
}

/* clickable area (invisible until hover / keyboard focus) */
.rx-hit {
  position: absolute;
  display: block;
  border-radius: 2.2% / 4.5%;
  cursor: pointer;
  text-decoration: none;
  color: transparent;
  background: rgba(255,255,255,0);
  border: 1px solid rgba(255,255,255,0);
  box-shadow: 0 0 0 rgba(255,255,255,0);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.rx-hit:hover,
.rx-hit:focus-visible {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.75);
  box-shadow: 0 0 22px rgba(255,255,255,.45), inset 0 1px 0 rgba(255,255,255,.22);
  transform: translateY(-2px);
  outline: none;
}
.rx-hit:active { transform: translateY(0); }

/* visually hidden label for screen readers */
.rx-hit > span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* module positions (portrait file overrides these) */
.rx-hit--customers-ui { left: 44.56%; top: 0.85%; width: 10.17%; height: 12.55%; }
.rx-hit--hr           { left: 19.74%; top: 14.89%; width: 10.17%; height: 12.55%; }
.rx-hit--purchases    { left: 69.38%; top: 14.89%; width: 10.17%; height: 12.55%; }
.rx-hit--sales        { left: 5.98%; top: 30.85%; width: 10.17%; height: 12.55%; }
.rx-hit--reports      { left: 83.13%; top: 30.85%; width: 10.17%; height: 12.55%; }
.rx-hit--inventory    { left: 11.36%; top: 47.87%; width: 10.17%; height: 12.55%; }
.rx-hit--system       { left: 78.35%; top: 47.87%; width: 10.17%; height: 12.55%; }

/* ---------- animated white lights: cloud -> each module ----------
   The SVG sits on top of the picture (same ratio, so it scales with it).
   A bright pulse leaves the cloud, runs along each wire, then the module's connector node flashes. */
.rx-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.rx-wires--port { display: none; }

.rx-pulse {
  fill: none;
  stroke: #ffffff;
  stroke-width: var(--sw, 5.5);
  stroke-linecap: round;
  stroke-dasharray: var(--dash, 12) 300;
  stroke-dashoffset: var(--dash, 12);
  opacity: 0;
  filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 9px #ffffff);
  animation: rxTravel var(--light-cycle) linear infinite;
  animation-delay: calc(var(--delay, 0s) * var(--light-slow));
}
@keyframes rxTravel {
  0%        { stroke-dashoffset: var(--dash, 12); opacity: 0; }
  6%        { opacity: 1; }
  58%       { stroke-dashoffset: -100; opacity: 1; }
  62%, 100% { stroke-dashoffset: -100; opacity: 0; }
}

.rx-node {
  fill: #ffffff;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  filter: drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 14px #ffffff);
  animation: rxNode var(--light-cycle) ease-out infinite;
  animation-delay: calc(var(--delay, 0s) * var(--light-slow));
}
@keyframes rxNode {
  0%, 52% { opacity: 0;  transform: scale(.6); }
  60%     { opacity: 1;  transform: scale(1.25); }
  80%     { opacity: 0;  transform: scale(1.9); }
  100%    { opacity: 0;  transform: scale(1.9); }
}


/* ---------- white liquid-glass cloud behind the pandas ----------
   Cloud-shaped (clip-path) frosted glass; the thin rim is .rx-cloud-edge in the SVG. */
.rx-cloudglass {
  position: absolute; pointer-events: none;
  left: 33.92%; top: 16.07%; width: 31.39%; height: 33.11%;
  clip-path: polygon(0.00% 73.88%, 0.04% 78.70%, 0.67% 83.84%, 1.92% 88.34%, 3.54% 92.03%, 6.25% 95.95%, 8.54% 98.14%, 11.20% 99.49%, 13.87% 100.00%, 86.28% 99.97%, 88.95% 99.45%, 91.23% 98.33%, 93.52% 96.27%, 96.93% 90.91%, 99.12% 84.48%, 99.75% 80.62%, 100.00% 76.45%, 99.47% 70.02%, 98.34% 65.20%, 97.03% 61.66%, 94.23% 55.88%, 90.80% 45.28%, 88.19% 40.23%, 84.38% 35.48%, 78.26% 31.23%, 77.21% 29.18%, 74.45% 21.50%, 72.12% 16.68%, 68.94% 11.66%, 65.51% 7.52%, 61.70% 4.18%, 58.27% 2.09%, 55.03% 0.77%, 49.89% 0.00%, 44.36% 1.00%, 39.02% 3.70%, 33.88% 8.16%, 30.66% 12.02%, 26.49% 19.25%, 21.89% 31.07%, 14.63% 36.89%, 12.35% 39.91%, 10.25% 43.67%, 6.33% 54.79%, 3.11% 60.73%, 1.41% 65.20%, 0.55% 68.73%);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}
.rx-cloud-edge {
  fill: none; stroke: var(--glass-border); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-linejoin: round;
}

/* ---------- animated cloud ----------
   .rx-cloud-glow : the cloud outline breathes (flares as the lights leave for the modules)
   .rx-cloud-run  : bright lights circle the cloud outline */
.rx-cloud-glow {
  fill: none;
  stroke: #ffffff;
  stroke-width: calc(var(--sw, 5.5) * 1.8 * 1px);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  filter: drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 18px #ffffff);
  animation: rxBreath var(--light-cycle) ease-in-out infinite;
}
@keyframes rxBreath {
  0%   { opacity: 0; }
  10%  { opacity: .8; }
  40%  { opacity: .3; }
  70%  { opacity: .12; }
  100% { opacity: 0; }
}

/* TRY: the small lights tracing the cloud outline are switched off. Delete the next line to bring them back. */
.rx-cloud-run { display: none; }
.rx-cloud-run {
  fill: none;
  stroke: #ffffff;
  stroke-width: var(--sw, 5.5);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 44;
  filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 10px #ffffff);
  animation: rxRun var(--light-cycle) linear infinite;
}
@keyframes rxRun {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -50; }
}

.rx-hit .rx-ico, .rx-hit .rx-lbl { display: none; }   /* visual card parts: landscape only (below) */

/* ---------- sharp module cards (landscape) ----------
   Everything is sized from --W (picture width), so cards, text and icons scale with the picture and stay crisp. */
.rx-wire {
  fill: none;
  stroke: #ffffff;
  stroke-width: calc(var(--sw, 5) * .42);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.9)) drop-shadow(0 0 6px rgba(255,255,255,.55));
}
.rx-dot {
  fill: #ffffff;
  filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 8px rgba(255,255,255,.8));
}

@media (orientation: landscape) {
  .rx-hit {
    --u: calc(var(--W) / 1672);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: calc(var(--u) * 8);
    padding: calc(var(--u) * 8) calc(var(--u) * 8);
    border-radius: calc(var(--u) * 20);
    color: #fff;
    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);
  }
  .rx-hit:hover, .rx-hit:focus-visible {
    background: var(--glass-bg);
    border-color: rgba(255,255,255,.8);
    box-shadow: var(--glow-hover);
  }
  .rx-hit .rx-ico {
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: calc(var(--u) * 54); height: calc(var(--u) * 54);
    min-width: 30px; min-height: 30px;
    border-radius: calc(var(--u) * 15);
    background: transparent;
    border: 1px solid rgba(255,255,255,.45);
    box-shadow: var(--glow-rest);
  }
  .rx-hit .rx-ico svg { width: 76%; height: 76%; display: block; shape-rendering: geometricPrecision; }
  .rx-hit .rx-lbl {
    display: block; text-align: center; font-style: normal;
    font: 700 max(9px, calc(var(--u) * 19))/1.15 "Google Sans Flex", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
    letter-spacing: .01em; text-wrap: balance;
    color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.65);
    -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
  }
}

/* ---------- sleeping pandas: gentle breathing + floating z's (landscape only) ----------
   One picture (assets/Sleeping_Pandas_white.webp) sits where the old pandas were (same footprint)
   and breathes slowly on top of the background (assets/bg.jpg). */
.rx-panda, .rx-z { display: none; }
@media (orientation: landscape) {
  .rx-panda {
    display: block; position: absolute; pointer-events: none;
    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;
  }
  /* centred in the cloud (cloud centre = 49.61% / 32.61% of the picture).
     Resting size (breath out). */
  .rx-panda--big { left: 36.75%; top: 17.37%; width: 25.738%; height: 30.520%; }
  .rx-panda--baby { display: none; }   /* the new picture already holds both pandas */
  .rx-z {
    display: block; position: absolute; pointer-events: none; opacity: 0;
    color: #ffffff; font: 700 max(10px, calc(var(--W) / 1672 * 26))/1 "Google Sans Flex", "Segoe UI", system-ui, sans-serif;
    text-shadow: 0 0 6px rgba(255,255,255,.85), 0 0 14px rgba(255,255,255,.5);
    animation: rxZ 6s ease-in-out infinite;
  }
  .rx-z1 { left: 58.5%; top: 25%; animation-delay: 0s; }
  .rx-z2 { left: 60%; top: 20.5%; font-size: max(12px, calc(var(--W) / 1672 * 32)); animation-delay: 2s; }
  .rx-z3 { left: 61.5%; top: 15.5%; font-size: max(14px, calc(var(--W) / 1672 * 38)); animation-delay: 4s; }
}
@keyframes rxBreathe {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  50%      { transform: translateY(-.15%) scale(1.006, 1.016); }
}
/* breath out = smallest, breath in = grows only slightly (used by landscape and portrait) */
@keyframes rxPandaBreath {
  0%, 100% { transform: scale3d(1, 1, 1); }
  50%      { transform: scale3d(1.03, 1.03, 1); }
}
@keyframes rxZ {
  0%   { opacity: 0; transform: translate(0, 6px) rotate(-8deg) scale(.8); }
  20%  { opacity: .95; }
  60%  { opacity: .6; }
  100% { opacity: 0; transform: translate(14px, -26px) rotate(8deg) scale(1.15); }
}
@media (prefers-reduced-motion: reduce) { .rx-panda, .rx-z { animation: none; } }

@media (prefers-reduced-motion: reduce) {
  .rx-pulse, .rx-node, .rx-cloud-glow, .rx-cloud-run { animation: none; opacity: 0; }
}


/* Shared Raxa brand footer (landscape; footer markup lives in index.html). */
.rx-brand-footer {
  position: fixed; z-index: 12;
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 0 .35em; padding: 7px 12px; text-align: center;
  font: 700 clamp(10px, 1.25vw, 15px)/1.35 "Google Sans Flex", "Segoe UI", system-ui, sans-serif;
  letter-spacing: -.015em;
  text-shadow: 0 2px 5px rgba(0,0,0,.98), 0 0 12px rgba(0,0,0,.95);
  pointer-events: none;
}
.rx-brand-footer__lead { color: #ffffff; text-shadow: 0 0 8px rgba(255,255,255,.45), 0 2px 5px rgba(0,0,0,.98); }
.rx-brand-footer__rest { color: rgba(255,255,255,.96); }

/* Compact Login button sizing shared with the portrait layout. */
.rx-loginbtn { width: clamp(140px, 16vw, 190px); height: 44px; font-size: 15px; }
@media (max-width: 420px) {
  .rx-brand-footer { font-size: clamp(10px, 2.7vw, 12px); padding: 5px 8px; }
}

/* ---------- logo inside the cloud (white) - same footprint as the old logo ---------- */
.rx-logo {
  position: absolute; pointer-events: none;
  left: 39.593%; top: 22.872%; width: 20.694%; height: 22.104%;
  background: url("RaXa_Logo_White.webp") center / 100% 100% no-repeat;
}