/* ==========================================================================
   NAUTILUS — NEMO page · Section 3: Architecture
   Theme variables with fallbacks. Prefix .nm-
   ========================================================================== */

.nm-arch *, .nm-arch *::before, .nm-arch *::after{ box-sizing: border-box; }   /* don't rely on the theme for this */

.nm-arch{
  --nm-wine:  var(--theme-color, #79182d);
  --nm-head:  var(--heading-color, #000);
  --nm-text:  var(--font-color, #5c5c5c);
  --nm-line:  var(--border-color, #dcdcdc);
  --nm-hfont: var(--heading-font, 'Exo 2', sans-serif);
  --nm-bfont: var(--body-font, 'Exo 2', sans-serif);
  --nm-hw:    var(--font-weight-heading, 600);
  --nm-ease:  cubic-bezier(.16, 1, .3, 1);
}
.nm-arch-intro{ max-width: 680px; margin: 18px 0 0; font-size: 18px; color: var(--nm-text); }

.nm-arch-grid{
  display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center;
}
@media (max-width: 991px){ .nm-arch-grid{ grid-template-columns: 1fr; gap: 36px; } }

/* ---------- isometric stack ---------- */
.nm-stack{ max-width: 460px; width: 100%; margin: 0 auto; }
.nm-stack-svg{ width: 100%; height: auto; display: block; overflow: visible; }

.nm-slab{ cursor: pointer; }
.nm-slab-t{ fill: #fff; stroke: var(--nm-line); stroke-width: 1.5; stroke-linejoin: round;
  transition: fill .4s ease, stroke .4s ease; }
.nm-slab-l{ fill: #DCDCE0; transition: fill .4s ease; }
.nm-slab-r{ fill: #CACACF; transition: fill .4s ease; }
.nm-slab-lab{
  font-family: var(--nm-hfont); font-weight: var(--nm-hw);
  font-size: 14px; letter-spacing: .2em; fill: var(--nm-head);
  transition: fill .4s ease; pointer-events: none;
}
.nm-slab--core .nm-slab-lab{ fill: var(--nm-wine); }

.nm-slab.is-active .nm-slab-t{ fill: var(--nm-wine); stroke: var(--nm-wine); }
.nm-slab.is-active .nm-slab-l{ fill: color-mix(in srgb, var(--nm-wine) 72%, #000); }
.nm-slab.is-active .nm-slab-r{ fill: color-mix(in srgb, var(--nm-wine) 55%, #000); }
.nm-slab.is-active .nm-slab-lab{ fill: #fff; }

/* build-up: slabs drop in from above, CORE first (section-3.js adds .is-in) */
.nm-slab{
  opacity: 0; transform: translateY(-40px);
  transition: opacity .55s ease, transform .7s var(--nm-ease);
}
.nm-arch-grid.is-in .nm-slab{ opacity: 1; transform: none; }
/* slabs land bottom-up (by position in the pile), whatever their reading order */
.nm-arch-grid.is-in .nm-slab[data-pos="1"]{ transition-delay: .18s; }
.nm-arch-grid.is-in .nm-slab[data-pos="2"]{ transition-delay: .36s; }
.nm-arch-grid.is-in .nm-slab[data-pos="3"]{ transition-delay: .54s; }
.nm-arch-grid.is-built .nm-slab{ transition-delay: 0s !important; }
.nm-arch-grid.is-in .nm-slab.is-active{ transform: translateY(-12px); }

/* ---------- layer list ---------- */
.nm-layers{ list-style: none; margin: 0; padding: 0; }
.nm-layer{
  position: relative; cursor: pointer; outline: none;
  padding: 20px 22px 20px 24px; border-top: 1px solid var(--nm-line);
  transition: background .35s ease;
}
.nm-layer:last-child{ border-bottom: 1px solid var(--nm-line); }
.nm-layer::before{
  content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px;
  background: var(--nm-wine); transform: scaleY(0); transition: transform .45s var(--nm-ease);
}
.nm-layer.is-active{ background: #fff; }
.nm-layer.is-active::before{ transform: scaleY(1); }
.nm-layer:focus-visible{ box-shadow: inset 0 0 0 2px var(--nm-wine); }

.nm-layer-tag{
  display: block; margin-bottom: 8px;
  font-family: var(--nm-hfont); font-weight: var(--nm-hw);
  font-size: 15px; letter-spacing: .18em; color: var(--nm-head);
  transition: color .35s ease;
}
.nm-layer.is-active .nm-layer-tag{ color: var(--nm-wine); }
.nm-layer p{ margin: 0; font-size: 15px; line-height: 1.6; color: var(--nm-text); }

/* ==========================================================================
   The power of FLOW — a large screen plays the current stage of the chain,
   the pipeline below shows it advancing. section-3.js (initFlow) drives the
   sequence by putting .is-run on the active scene and pipeline node, .is-done
   on completed nodes, and .is-sum on the screen for the final frame.
   ========================================================================== */
.nm-flow{
  --fx-pink:  #FF9DB6;          /* accents on dark (same as the licence panel) */
  --fx-hot:   #FF5C8A;
  --fx-risk:  #FF4D6D;
  --fx-dim:   #3A4050;
  --fx-mid:   #8B93A6;
  margin-top: 100px; border-radius: 14px; color: #fff;
  background: #111216;
  background-image: radial-gradient(90% 60% at 100% 0%, rgba(121,24,45,.45), transparent 60%);
  padding: 46px 52px 36px;
}
@media (max-width: 767px){ .nm-flow{ padding: 40px 20px 34px; margin-top: 70px; } }

.nm-flow-eyebrow{
  display: inline-flex; align-items: center; gap: 10px;
  /*font-family: var(--nm-hfont); */ font-weight: var(--nm-hw);
  font-size: 15px; letter-spacing: .22em; text-transform: uppercase; color: var(--fx-pink);
}
.nm-flow-eyebrow::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 0 5px rgba(255,157,182,.15); }
.nm-flow h3{
  margin: 12px 0 10px; font-family: var(--nm-hfont); font-weight: var(--nm-hw);
  font-size: clamp(30px, 3.4vw, 46px); line-height: 1.02; text-transform: uppercase; color: #fff;
}
.nm-flow-head p{ margin: 0 0 24px; max-width: 760px; font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.66); }

/* ---------- screen ---------- */
.fx-screen{
  position: relative; border: 1px solid rgba(255,255,255,.10); border-radius: 12px;
  background: #0B0C10; overflow: hidden;
}
.fx-bar{
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 11px 18px; border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--nm-hfont); font-weight: var(--nm-hw); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.55);
}
.fx-where b{ color: #fff; font-weight: var(--nm-hw); }
.fx-where #fxName{ color: var(--fx-pink); }
.fx-status{ display: inline-flex; align-items: center; gap: 8px; color: var(--fx-pink); white-space: nowrap; }
.fx-status::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: fx-blink 1s ease-in-out infinite; }
.fx-screen.is-sum .fx-status::before{ animation: none; }
@keyframes fx-blink{ 50%{ opacity: .25; } }

.fx-svg{ display: block; width: 100%; height: clamp(200px, 18vw, 250px); }   /* scene stays centred and in proportion */
.fx-s{ opacity: 0; transition: opacity .3s ease; }
.fx-s.is-run{ opacity: 1; }

/* shared drawing styles */
.fx-axis{ stroke: rgba(255,255,255,.22); stroke-width: 1.2; }
.fx-ln{ fill: none; stroke: #C9CED8; stroke-width: 2.2; stroke-linecap: round; }
.fx-cap{ font-family: var(--nm-hfont); font-weight: var(--nm-hw); font-size: 11.5px; letter-spacing: .16em; fill: var(--fx-mid); }
.fx-hot-f{ fill: var(--fx-hot); }
.fx-dish{ fill: rgba(255,255,255,.08); stroke: #C9CED8; stroke-width: 2.2; stroke-linejoin: round; }
.fx-thin{ stroke-width: 1.2; opacity: .7; }
.fx-base{ fill: #2A2F3B; stroke: #C9CED8; stroke-width: 1.6; stroke-linejoin: round; }
.fx-hot{ color: var(--fx-hot); }
.fx-hot-t{ fill: var(--fx-pink); }
.fx-tagc{ fill: rgba(255,92,138,.14); stroke: var(--fx-hot); stroke-width: 1.4; }
.fx-tag{ opacity: 0; }

/* 01 · tracking data: antenna pulses, measurements light up, a scan line sweeps */
.fx-arc{ fill: none; stroke: var(--fx-hot); stroke-width: 2.2; stroke-linecap: round; }
.fx-pulse{ opacity: 0; transform-box: fill-box; transform-origin: left bottom; }
.fx-s1.is-run .fx-pulse{ animation: fx-pulse 1.05s ease-out var(--d) infinite; }
@keyframes fx-pulse{ 0%{ opacity: .95; transform: scale(.4); } 100%{ opacity: 0; transform: scale(2.4); } }
.fx-meas{ fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fx-s1.is-run .fx-meas{ animation: fx-pop 0.68s cubic-bezier(.2,1.6,.4,1) calc(0.34s + var(--d)) forwards; }
@keyframes fx-pop{ 0%{ opacity: 0; transform: scale(0); } 60%{ opacity: 1; transform: scale(1.7); fill: var(--fx-pink); } 100%{ opacity: 1; transform: scale(1); } }
.fx-scan{ stroke: var(--fx-hot); stroke-width: 2; opacity: 0; }
.fx-s1.is-run .fx-scan{ animation: fx-scan 2.36s cubic-bezier(.4,0,.6,1) 0.27s forwards; }
@keyframes fx-scan{ 0%{ opacity: 0; transform: translateX(0); } 8%{ opacity: .9; } 92%{ opacity: .9; } 100%{ opacity: 0; transform: translateX(520px); } }

/* 02 · orbit determination: points snap onto the fit, which draws in */
.fx-fit{ fill: none; stroke: var(--fx-hot); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.fx-s2.is-run .fx-fit{ animation: fx-draw 1.49s ease-in-out 1.22s forwards; }
@keyframes fx-draw{ to{ stroke-dashoffset: 0; } }
.fx-od{ fill: #fff; transform: translateY(var(--o)); }
.fx-s2.is-run .fx-od{ animation: fx-snap 1.28s cubic-bezier(.3,1.35,.5,1) calc(0.2s + var(--d)) forwards; }
@keyframes fx-snap{ to{ transform: translateY(0); fill: var(--fx-pink); } }
.fx-s2.is-run .fx-tag{ animation: fx-in 0.68s ease 2.56s forwards; }
@keyframes fx-in{ from{ opacity: 0; transform: translate(560px,70px) scale(.8); } to{ opacity: 1; transform: translate(560px,70px) scale(1); } }

/* 03 · conjunction screening: radar sweep, blips flash as it passes, one flagged */
.fx-ring{ fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1; }
.fx-wedge{ fill: rgba(255,92,138,.22); }
.fx-beam{ stroke: var(--fx-hot); stroke-width: 2; }
.fx-sweep{ opacity: 0; }
.fx-s3.is-run .fx-sweep{ opacity: 1; animation: fx-spin 1.9s linear infinite; }
@keyframes fx-spin{ to{ transform: rotate(360deg); } }
.fx-blip{ fill: var(--fx-dim); }
.fx-s3.is-run .fx-blip{ animation: fx-blip 1.9s ease-out var(--d) infinite; }
@keyframes fx-blip{ 0%{ fill: #fff; r: 6px; } 40%{ fill: var(--fx-mid); r: 4px; } 100%{ fill: var(--fx-dim); r: 4px; } }
.fx-sat{ fill: #fff; } .fx-satring{ fill: none; stroke: rgba(255,255,255,.4); stroke-width: 1; }
.fx-risk{ fill: var(--fx-risk); opacity: 0; }
.fx-riskring{ fill: none; stroke: var(--fx-risk); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fx-link{ stroke: var(--fx-risk); stroke-width: 1.4; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: .9; }
.fx-risk-t{ fill: var(--fx-risk); opacity: 0; }
.fx-s3.is-run .fx-risk{ animation: fx-on 0.27s ease 1.55s forwards; }
.fx-s3.is-run .fx-riskring{ animation: fx-ripple 1.1s ease-out 1.62s infinite; }
.fx-s3.is-run .fx-r2{ animation-delay: 2.36s; }
.fx-s3.is-run .fx-link{ animation: fx-draw 0.68s ease 1.76s forwards; }
.fx-s3.is-run .fx-risk-t{ animation: fx-on 0.54s ease 2.03s forwards; }
@keyframes fx-on{ to{ opacity: 1; } }
@keyframes fx-ripple{ 0%{ opacity: .95; transform: scale(1); } 100%{ opacity: 0; transform: scale(4.2); } }

/* 04 · manoeuvre optimisation: hops down the cost curve to the optimum */
.fx-cost{ fill: none; stroke: rgba(255,255,255,.38); stroke-width: 2; }
.fx-cand{ fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fx-s4.is-run .fx-cand{ animation: fx-try 0.74s ease calc(0.27s + var(--d)) forwards; }
@keyframes fx-try{ 0%{ opacity: 0; transform: scale(0); } 50%{ opacity: 1; transform: scale(1.5); } 100%{ opacity: .35; transform: scale(1); } }
.fx-s4.is-run .fx-best{ animation: fx-best 0.81s cubic-bezier(.2,1.6,.4,1) calc(0.27s + var(--d)) forwards; }
@keyframes fx-best{ 0%{ opacity: 0; transform: scale(0); } 100%{ opacity: 1; transform: scale(1); fill: var(--fx-hot); } }
.fx-hop{ stroke: var(--fx-pink); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: 0; }
.fx-s4.is-run .fx-hop{ animation: fx-hop 0.47s ease calc(0.07s + var(--d)) forwards; }
@keyframes fx-hop{ to{ opacity: .6; } }
.fx-bestring{ fill: none; stroke: var(--fx-hot); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fx-s4.is-run .fx-bestring{ animation: fx-ripple 1.1s ease-out 2.9s infinite; }
.fx-drop{ stroke: var(--fx-pink); stroke-width: 1.2; stroke-dasharray: 3 4; opacity: 0; }
.fx-opt{ opacity: 0; }
.fx-s4.is-run .fx-drop, .fx-s4.is-run .fx-opt{ animation: fx-on 0.54s ease 2.9s forwards; }

/* 05 · planning: the manoeuvre flies in and docks into its slot */
.fx-pass{ fill: #2A2F3B; stroke: rgba(255,255,255,.14); }
.fx-slot{ fill: none; stroke: var(--fx-pink); stroke-width: 1.4; stroke-dasharray: 5 4; }
.fx-s5.is-run .fx-slot{ animation: fx-slot .7s ease-in-out 3; }
@keyframes fx-slot{ 50%{ opacity: .25; } }
.fx-manr{ fill: var(--fx-hot); }
.fx-man-t{ fill: #fff; letter-spacing: .14em; font-size: 11px; }
.fx-man{ opacity: 0; transform: translate(240px,-120px) rotate(-10deg); transform-box: fill-box; transform-origin: center; }
.fx-s5.is-run .fx-man{ animation: fx-dock 1.28s cubic-bezier(.2,1.25,.4,1) 0.74s forwards; }
@keyframes fx-dock{ 0%{ opacity: 0; transform: translate(240px,-120px) rotate(-10deg); } 25%{ opacity: 1; } 100%{ opacity: 1; transform: none; } }
.fx-s5.is-run .fx-tag5{ animation: fx-in5 0.68s ease 2.09s forwards; }
@keyframes fx-in5{ from{ opacity: 0; transform: translate(268px,112px) scale(.8); } to{ opacity: 1; transform: translate(268px,112px) scale(1); } }
.fx-now{ stroke: #fff; stroke-width: 1.6; stroke-dasharray: 3 3; }
.fx-now-t{ fill: #fff; }

/* final frame: green check badge pops in, then the text */
.nm-flow{ --fx-ok: #3CC48D; }
.fx-okc{ fill: rgba(60,196,141,.14); stroke: var(--fx-ok); stroke-width: 2.4; }
.fx-okk{ fill: none; stroke: var(--fx-ok); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.fx-okr{ fill: none; stroke: var(--fx-ok); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.fx-ok{ opacity: 0; transform-box: fill-box; transform-origin: center; }
.fx-s6.is-run .fx-ok{ animation: fx-okpop .7s cubic-bezier(.2,1.7,.4,1) .15s forwards; }
.fx-s6.is-run .fx-okk{ animation: fx-draw .45s ease-out .6s forwards; }
.fx-s6.is-run .fx-okr{ animation: fx-ripple 1.4s ease-out .8s 2; }
@keyframes fx-okpop{ 0%{ opacity: 0; transform: scale(.3); } 100%{ opacity: 1; transform: scale(1); } }
.fx-sum, .fx-sum2{ opacity: 0; }
.fx-s6.is-run .fx-sum{ animation: fx-on .5s ease .75s forwards; }
.fx-s6.is-run .fx-sum2{ animation: fx-on .5s ease 1s forwards; }
.fx-screen.is-sum .fx-status{ color: var(--fx-ok); }
.fx-screen.is-sum #fxName{ color: var(--fx-ok); }
.fx-sum{ font-family: var(--nm-hfont); font-weight: var(--nm-hw); font-size: 40px; fill: #fff; text-transform: uppercase; }
.fx-sum2{ font-family: var(--nm-hfont); font-size: 17px; fill: rgba(255,255,255,.66); }

/* ---------- pipeline ---------- */
.fx-pipe{ position: relative; margin-top: 20px; }
.fx-track{ position: absolute; left: 10%; right: 10%; top: 19px; height: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.fx-fill{ position: absolute; inset: 0 auto 0 0; width: 0; background: var(--fx-hot); transition: width .6s ease; }
.fx-stream{ position: absolute; inset: 0; opacity: 0;
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(255,157,182,.95) 18px 26px, transparent 26px 44px);
  background-size: 44px 2px; }
.fx.is-running .fx-stream{ opacity: 1; animation: fx-stream .6s linear infinite; }
@keyframes fx-stream{ to{ background-position: 44px 0; } }
.fx-nodes{ position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); }
.fx-node{ display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.fx-dot{ position: relative; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #111216; border: 1.5px solid rgba(255,255,255,.22);
  transition: background .35s, border-color .35s, transform .45s cubic-bezier(.2,1.6,.4,1); }
.fx-n{ font-family: var(--nm-hfont); font-weight: var(--nm-hw); font-size: 12.5px; letter-spacing: .08em; color: rgba(255,255,255,.55); }
.fx-ck{ position: absolute; width: 20px; height: 20px; color: #fff; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .45s cubic-bezier(.2,1.6,.4,1); }
.fx-lab{ font-family: var(--nm-hfont); font-weight: var(--nm-hw); font-size: 13px; line-height: 1.3; color: rgba(255,255,255,.5); max-width: 15ch; transition: color .35s; }
.fx-node.is-run .fx-dot{ border-color: var(--fx-hot); transform: scale(1.18); box-shadow: 0 0 0 7px rgba(255,92,138,.18); }
.fx-node.is-run .fx-n{ color: #fff; }
.fx-node.is-run .fx-lab{ color: #fff; }
.fx-node.is-run .fx-dot::after{ content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--fx-hot);
  animation: fx-ring 1.1s ease-out infinite; }
@keyframes fx-ring{ 0%{ opacity: .9; transform: scale(1); } 100%{ opacity: 0; transform: scale(1.9); } }
.fx-node.is-done .fx-dot{ background: var(--fx-hot); border-color: var(--fx-hot); }
.fx-node.is-done .fx-n{ opacity: 0; }
.fx-node.is-done .fx-ck{ opacity: 1; transform: scale(1); }
.fx-node.is-done .fx-lab{ color: rgba(255,255,255,.82); }

/* fade between runs */
.fx.is-reset .fx-svg, .fx.is-reset .fx-nodes{ opacity: 0; transition: opacity .4s ease; }
.fx.is-reset *{ animation: none !important; }

@media (max-width: 767px){
  .fx-svg{ height: auto; }
  .fx-bar{ padding: 11px 14px; font-size: 10.5px; letter-spacing: .12em; }
  .fx-lab{ display: none; }                     /* the screen bar names the active stage */
  .fx-dot{ width: 34px; height: 34px; } .fx-track{ top: 16px; }
  .fx-n{ font-size: 11px; }
}

@media (prefers-reduced-motion: reduce){
  .nm-arch *{ transition: none !important; animation: none !important; }
  .nm-slab{ opacity: 1; transform: none; }
  /* the final frame is shown static: make its pieces visible without their entrance animation */
  .fx-s6 .fx-ok, .fx-s6 .fx-sum, .fx-s6 .fx-sum2{ opacity: 1; }
  .fx-s6 .fx-okk{ stroke-dashoffset: 0; }
}