/* ==========================================================================
   NAAM Hospitals — Depth Orbital Visuals (v2.6)

   Scope is intentionally narrow. This stylesheet powers only two replaced
   decorative animations:

     1. Doctors page hero  ->  .nx3--care     ("Connected specialist care")
     2. Facilities section ->  .nx3--systems  ("Digital Hospital Systems")

   Everything is namespaced under .nx3, so no existing rule, component or
   layout in naam-public.css is touched, overridden or depended on. The box
   keeps the footprint of the visual it replaces (470 x 440, centered), so
   surrounding spacing and the existing legend below the Doctors visual are
   unchanged.

   GEOMETRY
   The whole scene is expressed in one unit, --u, where 100u is the stage
   width. Orbit radii, node sizes, the core, the perspective distance and the
   type all derive from it, so the scene scales as a single rigid composition
   at any width instead of relying on breakpoints. Where container queries are
   available --u is 1cqw, which tracks the real rendered width even when a
   parent column squeezes the box below its max-width. Older browsers fall
   back to fixed values per breakpoint.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Shell
   -------------------------------------------------------------------------- */

.nx3 {
  --u: 4.7px;                 /* 100u = 470px reference stage */
  --dur: 30s;
  --nx3-accent: #8fe6e2;
  --nx3-line: rgba(163, 240, 235, .34);
  --nx3-line-hi: rgba(203, 250, 245, .92);
  --nx3-core: calc(18.3 * var(--u));
  --nx3-tilt-x: 0deg;
  --nx3-tilt-y: 0deg;

  position: relative;
  width: 100%;
  max-width: 470px;
  min-height: 440px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: calc(6.8 * var(--u));
  background:
    radial-gradient(circle at 50% 44%, rgba(143, 230, 226, .15) 0%, rgba(143, 230, 226, .05) 34%, transparent 70%),
    linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}

.nx3 * { box-sizing: border-box; }

/* Ambient light from above. */
.nx3::before {
  content: "";
  position: absolute;
  inset: -30% -20% auto -20%;
  height: 78%;
  background: radial-gradient(ellipse at 50% 0%, rgba(163, 240, 235, .17), transparent 62%);
  pointer-events: none;
}

/* Slow specular pass across the glass. */
.nx3::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -40%;
  width: 46%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .07), transparent);
  transform: rotate(17deg) translateX(-160%);
  animation: nx3Sheen 11s cubic-bezier(.65, .05, .35, 1) infinite;
  pointer-events: none;
  z-index: 6;
}

/* --------------------------------------------------------------------------
   2. Ground plane — perspective grid that anchors the scene in space
   -------------------------------------------------------------------------- */

.nx3-floor {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 210%;
  height: 62%;
  transform: translateX(-50%) perspective(430px) rotateX(66deg);
  transform-origin: 50% 100%;
  background-image:
    repeating-linear-gradient(90deg, rgba(163, 240, 235, .17) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(0deg, rgba(163, 240, 235, .13) 0 1px, transparent 1px 46px);
  -webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 96%, #000 4%, rgba(0, 0, 0, .55) 44%, transparent 80%);
  mask-image: radial-gradient(ellipse 62% 78% at 50% 96%, #000 4%, rgba(0, 0, 0, .55) 44%, transparent 80%);
  animation: nx3FloorDrift 9s linear infinite;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   3. Stage + scene (real perspective, real depth sorting)
   -------------------------------------------------------------------------- */

.nx3-stage {
  position: absolute;
  inset: 0;
  perspective: calc(244.7 * var(--u));
  perspective-origin: 50% 46%;
}

.nx3-scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--nx3-tilt-x)) rotateY(var(--nx3-tilt-y));
  transition: transform .5s cubic-bezier(.22, .78, .3, 1);
}

/* --------------------------------------------------------------------------
   4. Central core
   -------------------------------------------------------------------------- */

.nx3-core {
  position: absolute;
  left: 50%;
  top: 46%;
  width: var(--nx3-core);
  height: var(--nx3-core);
  margin: calc(var(--nx3-core) / -2) 0 0 calc(var(--nx3-core) / -2);
  transform-style: preserve-3d;
  animation: nx3Levitate 7.4s ease-in-out infinite;
}

.nx3-core-glow {
  position: absolute;
  inset: -66%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 230, 226, .40) 0%, rgba(143, 230, 226, .12) 44%, transparent 71%);
  filter: blur(9px);
  animation: nx3Breathe 6.2s ease-in-out infinite;
  pointer-events: none;
}

/* Broadcast pulses — reads as an active hub without adding clutter. */
.nx3-core-ping {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(163, 240, 235, .42);
  opacity: 0;
  animation: nx3Ping 4.6s cubic-bezier(.2, .6, .3, 1) infinite;
  pointer-events: none;
}
.nx3-core-ping:nth-of-type(2) { animation-delay: -2.3s; }

.nx3-core-body {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 32%;
  color: #fff;
  background: linear-gradient(158deg, #1c9db4 0%, #0d7396 52%, #095072 100%);
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow:
    0 26px 52px rgba(0, 20, 34, .44),
    0 0 0 9px rgba(143, 230, 226, .06),
    inset 0 1.5px 0 rgba(255, 255, 255, .52),
    inset 0 -20px 34px rgba(2, 34, 54, .42);
}

/* Bevelled top light — the cue that sells a solid object rather than a disc. */
.nx3-core-body::before {
  content: "";
  position: absolute;
  inset: 5% 5% 46%;
  border-radius: 42% 42% 60% 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0));
  pointer-events: none;
}

/* Travelling gloss across the face. */
.nx3-core-body::after {
  content: "";
  position: absolute;
  top: -35%;
  left: -70%;
  width: 62%;
  height: 190%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
  transform: rotate(22deg);
  animation: nx3CoreGlint 6.8s ease-in-out infinite;
  pointer-events: none;
}

.nx3-core-body svg {
  position: relative;
  z-index: 2;
  width: 46%;
  height: 46%;
  filter: drop-shadow(0 4px 9px rgba(0, 22, 38, .45));
}

.nx3-core-shadow {
  position: absolute;
  left: 50%;
  bottom: -44%;
  width: 128%;
  height: 26%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(1, 22, 36, .5), transparent 70%);
  filter: blur(5px);
  animation: nx3ShadowPulse 7.4s ease-in-out infinite;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. Orbits

   Each ring is a real plane in 3D:  rotateZ(--tz) rotateX(--tx)
   The node counter-rotates by exactly the inverse of the chain, so the icon
   stays upright and camera-facing while its path is a true 3D ellipse with
   correct perspective scaling and depth sorting against the core.
   -------------------------------------------------------------------------- */

.nx3-ring {
  position: absolute;
  left: 50%;
  top: 46%;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
  transform-style: preserve-3d;
  transform: rotateZ(var(--tz)) rotateX(var(--tx));
}

.nx3-path {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--nx3-line);
  box-shadow: inset 0 0 26px rgba(143, 230, 226, .07);
}

/* A light head that runs the ring in step with its node. */
.nx3-path-sweep {
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 60%, rgba(203, 250, 245, .06) 68%, var(--nx3-line-hi) 90%, transparent 97%);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
  opacity: .8;
  transform: rotateZ(var(--a0));
  animation: nx3Spin var(--dur) linear infinite;
}

.nx3-orbiter {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateZ(var(--a0));
  animation: nx3Spin var(--dur) linear infinite;
}

.nx3-arm {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate3d(var(--r), 0, 0);
  transform-style: preserve-3d;
}

.nx3-sat {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sw);
  height: var(--sh);
  margin: calc(var(--sh) / -2) 0 0 calc(var(--sw) / -2);
  transform-style: preserve-3d;
  transform: rotateZ(calc(var(--a0) * -1));
  animation: nx3SpinRev var(--dur) linear infinite;
}

.nx3-face {
  position: absolute;
  inset: 0;
  transform: rotateX(calc(var(--tx) * -1)) rotateZ(calc(var(--tz) * -1));
  animation: nx3Depth var(--dur) linear infinite;
  animation-delay: var(--depth-delay);
}

/* Per-ring geometry.

   The three planes share one 30s period and sit 120deg apart, so the whole
   constellation turns as a single coordinated system and the nodes can never
   collide with one another at any point in the cycle. Distinct roll angles
   (--tz) make the planes cross, which is what turns three ellipses into one
   legible three-dimensional object rather than a stack of rings.

   --depth-delay = -(--dur) * (--a0 / 360), so each node's depth grading is in
   step with where it actually is on its own path. */

.nx3--care .nx3-ring--1 { --r: calc(27.23 * var(--u)); --tx: 52deg; --tz: 3deg;   --a0: 198deg; --depth-delay: -16.50s; }
.nx3--care .nx3-ring--2 { --r: calc(32.34 * var(--u)); --tx: 51deg; --tz: 43deg;  --a0: 287deg; --depth-delay: -23.92s; }
.nx3--care .nx3-ring--3 { --r: calc(39.79 * var(--u)); --tx: 56deg; --tz: -22deg; --a0: 65deg;  --depth-delay: -5.42s;  }

.nx3--systems .nx3-ring--1 { --r: calc(29.61 * var(--u)); --tx: 50deg; --tz: -1deg; --a0: 34deg;  --depth-delay: -2.83s;  }
.nx3--systems .nx3-ring--2 { --r: calc(31.90 * var(--u)); --tx: 49deg; --tz: -27deg; --a0: 164deg; --depth-delay: -13.67s; }
.nx3--systems .nx3-ring--3 { --r: calc(35.87 * var(--u)); --tx: 50deg; --tz: 50deg;  --a0: 236deg; --depth-delay: -19.67s; }

/* A small independent radius breath per ring keeps the coordinated system
   from reading as one rigid body, without ever closing the node spacing. */
.nx3-ring--1 .nx3-arm { animation: nx3ArmBreath 5.6s ease-in-out infinite; }
.nx3-ring--2 .nx3-arm { animation: nx3ArmBreath 6.9s ease-in-out infinite; }
.nx3-ring--3 .nx3-arm { animation: nx3ArmBreath 8.2s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   6. Atmosphere — drifting motes give the empty volume a sense of scale
   -------------------------------------------------------------------------- */

.nx3-motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.nx3-motes i {
  position: absolute;
  bottom: -8px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--nx3-accent);
  opacity: 0;
  box-shadow: 0 0 8px rgba(143, 230, 226, .8);
  animation: nx3Rise linear infinite;
}
.nx3-motes i:nth-child(1) { left: 12%; animation-duration: 11s;   animation-delay: -1s;   }
.nx3-motes i:nth-child(2) { left: 27%; animation-duration: 14s;   animation-delay: -6s;   width: 2px; height: 2px; }
.nx3-motes i:nth-child(3) { left: 41%; animation-duration: 9.5s;  animation-delay: -3.4s; }
.nx3-motes i:nth-child(4) { left: 58%; animation-duration: 13s;   animation-delay: -8.2s; width: 2px; height: 2px; }
.nx3-motes i:nth-child(5) { left: 72%; animation-duration: 10.5s; animation-delay: -4.8s; }
.nx3-motes i:nth-child(6) { left: 86%; animation-duration: 15s;   animation-delay: -11s;  width: 2px; height: 2px; }
.nx3-motes i:nth-child(7) { left: 33%; animation-duration: 16s;   animation-delay: -13s;  }
.nx3-motes i:nth-child(8) { left: 65%; animation-duration: 12.5s; animation-delay: -2.2s; width: 2px; height: 2px; }

/* --------------------------------------------------------------------------
   7. Variant: Doctors hero — "Connected specialist care"
   -------------------------------------------------------------------------- */

.nx3--care {
  --nx3-core: calc(19.15 * var(--u));
  --sw: calc(11.49 * var(--u));
  --sh: calc(11.49 * var(--u));
}

.nx3--care .nx3-face {
  display: grid;
  place-items: center;
  border-radius: calc(4.04 * var(--u));
  color: #ecfffd;
  background: linear-gradient(152deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06));
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow:
    0 16px 32px rgba(0, 22, 38, .34),
    inset 0 1px 0 rgba(255, 255, 255, .48);
  -webkit-backdrop-filter: blur(9px);
  backdrop-filter: blur(9px);
}

.nx3--care .nx3-face svg {
  width: calc(5.11 * var(--u));
  height: calc(5.11 * var(--u));
  color: #b6f4ef;
}

/* A hairline accent under each node ties it to the ring it rides. */
.nx3--care .nx3-face::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1.9 * var(--u));
  width: calc(4.7 * var(--u));
  height: 2px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--nx3-accent), transparent);
  opacity: .7;
}

/* --------------------------------------------------------------------------
   8. Variant: Facilities — "Digital Hospital Systems"
   -------------------------------------------------------------------------- */

.nx3--systems {
  border: 1px solid rgba(255, 255, 255, .13);
  --nx3-core: calc(18.3 * var(--u));
  --sw: calc(28.30 * var(--u));
  --sh: calc(10.64 * var(--u));
}

/* Vertical data column behind the core: the "everything reports here" idea. */
.nx3-column {
  position: absolute;
  left: 50%;
  top: 8%;
  width: calc(20.43 * var(--u));
  height: 76%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(149, 238, 227, .13) 42%, rgba(149, 238, 227, .04) 78%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  filter: blur(6px);
  animation: nx3Breathe 5.4s ease-in-out infinite;
  pointer-events: none;
}

.nx3--systems .nx3-face {
  display: grid;
  grid-template-columns: calc(6.38 * var(--u)) minmax(0, 1fr);
  align-items: center;
  gap: calc(1.91 * var(--u));
  padding: calc(1.7 * var(--u)) calc(2.34 * var(--u));
  border-radius: calc(3.62 * var(--u));
  color: #fff;
  background: linear-gradient(150deg, rgba(15, 122, 145, .94), rgba(9, 84, 112, .92));
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow:
    0 16px 34px rgba(0, 20, 34, .38),
    inset 0 1px 0 rgba(255, 255, 255, .38);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}

.nx3--systems .nx3-face b {
  display: grid;
  place-items: center;
  width: calc(6.38 * var(--u));
  height: calc(6.38 * var(--u));
  border-radius: calc(2.13 * var(--u));
  color: #a9f0ea;
  background: rgba(255, 255, 255, .12);
}
.nx3--systems .nx3-face b svg { width: calc(3.62 * var(--u)); height: calc(3.62 * var(--u)); }

.nx3--systems .nx3-face > span { min-width: 0; }

.nx3--systems .nx3-face strong {
  display: block;
  font-size: clamp(10px, calc(2.66 * var(--u)), 13px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: .03em;
  color: #fff;
}
.nx3--systems .nx3-face small {
  display: block;
  margin-top: 2px;
  font-size: clamp(8px, calc(1.91 * var(--u)), 9.5px);
  line-height: 1.2;
  color: rgba(255, 255, 255, .74);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   9. Motion
   -------------------------------------------------------------------------- */

@keyframes nx3Spin {
  from { transform: rotateZ(var(--a0)); }
  to   { transform: rotateZ(calc(var(--a0) + 360deg)); }
}

@keyframes nx3SpinRev {
  from { transform: rotateZ(calc(var(--a0) * -1)); }
  to   { transform: rotateZ(calc(var(--a0) * -1 - 360deg)); }
}

@keyframes nx3ArmBreath {
  0%, 100% { transform: translate3d(var(--r), 0, 0); }
  50%      { transform: translate3d(calc(var(--r) + 1.28 * var(--u)), 0, 0); }
}

/* Depth grading: brightest at the near pass, dimmed and softened at the far
   pass. This is what makes a CSS orbit read as genuinely three-dimensional. */
@keyframes nx3Depth {
  0%   { opacity: .94; filter: brightness(1); }
  25%  { opacity: 1;   filter: brightness(1.16); }
  50%  { opacity: .94; filter: brightness(1); }
  75%  { opacity: .62; filter: brightness(.7) blur(.7px); }
  100% { opacity: .94; filter: brightness(1); }
}

@keyframes nx3Levitate {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -9px, 14px); }
}

@keyframes nx3Breathe {
  0%, 100% { opacity: .74; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.07); }
}

@keyframes nx3ShadowPulse {
  0%, 100% { opacity: .62; transform: translateX(-50%) scale(1); }
  50%      { opacity: .38; transform: translateX(-50%) scale(.84); }
}

@keyframes nx3Ping {
  0%   { opacity: 0;   transform: scale(.9); }
  16%  { opacity: .38; }
  100% { opacity: 0;   transform: scale(2.1); }
}

@keyframes nx3CoreGlint {
  0%, 100% { transform: rotate(22deg) translateX(0); opacity: 0; }
  38%      { opacity: .9; }
  70%      { transform: rotate(22deg) translateX(300%); opacity: 0; }
}

@keyframes nx3Sheen {
  0%, 100% { transform: rotate(17deg) translateX(-160%); }
  55%      { transform: rotate(17deg) translateX(420%); }
}

@keyframes nx3FloorDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 46px, 0 46px; }
}

@keyframes nx3Rise {
  0%   { opacity: 0; transform: translateY(0) scale(.6); }
  12%  { opacity: .85; }
  78%  { opacity: .5; }
  100% { opacity: 0; transform: translateY(-420px) scale(1.15); }
}

/* --------------------------------------------------------------------------
   10. Performance — pause entirely while the visual is off-screen
   -------------------------------------------------------------------------- */

.nx3[data-nx3-paused="true"] *,
.nx3[data-nx3-paused="true"]::after { animation-play-state: paused !important; }

/* --------------------------------------------------------------------------
   11. Fluid sizing

   With container query support the stage measures itself, so the verified
   node spacing holds at every width — including when a parent column is
   narrower than the 470px max-width.
   -------------------------------------------------------------------------- */

@supports (container-type: inline-size) {
  .nx3 {
    container-type: inline-size;
    container-name: nx3;
    aspect-ratio: 470 / 440;
    min-height: 0;
    --u: 1cqw;
  }

  /* Below this width the secondary line stops being legible; the system name
     carries the meaning on its own. */
  @container nx3 (max-width: 375px) {
    .nx3--systems .nx3-face small { display: none; }
    .nx3--systems .nx3-face { align-items: center; }
  }
}

/* Fallback for browsers without container queries: fixed scale steps. */
@supports not (container-type: inline-size) {
  @media (max-width: 1100px) { .nx3 { --u: 4.30px; max-width: 430px; min-height: 403px; } }
  @media (max-width: 900px)  { .nx3 { --u: 4.10px; max-width: 410px; min-height: 384px; } }
  @media (max-width: 760px)  { .nx3 { --u: 3.60px; max-width: 360px; min-height: 337px; } }
  @media (max-width: 560px)  {
    .nx3 { --u: 3.20px; max-width: 320px; min-height: 300px; }
    .nx3--systems .nx3-face small { display: none; }
  }
  @media (max-width: 400px)  { .nx3 { --u: 2.90px; max-width: 290px; min-height: 272px; } }
}

/* --------------------------------------------------------------------------
   12. Reduced motion — the composition still reads, nothing moves
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .nx3 *,
  .nx3::after {
    animation: none !important;
    transition: none !important;
  }
  .nx3-motes,
  .nx3-core-ping { display: none !important; }
  .nx3-scene { transform: none !important; }
  .nx3-face { opacity: 1 !important; filter: none !important; }
}