/* ==========================================================
   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)), linear-gradient(rgba(8,10,6,.42), rgba(8,10,6,.42));   /* sheen over a dark tint, so text reads well (33.47: a little deeper for the city background) */
  --glass-filter: blur(9px) saturate(130%);   /* 33.47: was 5px */
  --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; }
}

/* ---------- v33.19 Desktop: smoother home page. The cloud is the largest glass area, and its live blur was redrawn while the
   wire lights and the pandas move, so desktop browsers dropped frames. On wider screens the cloud keeps the same glass colour
   with a slightly deeper tint and no live blur (the photo behind it is already soft, so it looks the same). ---------- */
@media (min-width: 761px) {
  .rx-cloudglass {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: linear-gradient(150deg, rgba(255,255,255,.09), rgba(255,255,255,.025) 65%, rgba(255,255,255,.04)), linear-gradient(rgba(8,10,6,.48), rgba(8,10,6,.48));
  }
}