/* ==========================================================================
   NSR prototype - polish layer (round 2)
   The first build was correct but flat and heavy: black with no depth, crowded display type, thin dim diagrams,
   unfinished-looking placeholders. This file holds the visual refinements that sit on top of home.css:
   light and depth in the dark sections, quieter hairlines with a few deliberate Infrared accents, calmer furniture.
   Nothing here changes the copy, the structure or the motion.
   ========================================================================== */

/* ---------- depth: a faint pool of light in each dark section, so the black is a space rather than a fill ------------------- */
.doors, .pillars, .approach, .decide, .founders, .faq, .closing { position: relative; isolation: isolate; }
.doors::before, .pillars::before, .approach::before, .decide::before, .founders::before, .faq::before, .closing::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
}
/* each glow is an ellipse that has faded to nothing before it reaches the section's edges, so no seam shows where one section hands over to the next */
.doors::before { background: radial-gradient(ellipse 52% 40% at 88% 40%, rgba(184, 188, 186, 0.085), rgba(184, 188, 186, 0) 100%); }
.pillars::before { background: radial-gradient(ellipse 50% 44% at 10% 46%, rgba(184, 188, 186, 0.07), rgba(184, 188, 186, 0) 100%), radial-gradient(ellipse 40% 30% at 92% 70%, rgba(255, 59, 104, 0.055), rgba(255, 59, 104, 0) 100%); }
.approach::before { background: radial-gradient(ellipse 50% 42% at 92% 46%, rgba(184, 188, 186, 0.08), rgba(184, 188, 186, 0) 100%); }
.decide::before { background: radial-gradient(ellipse 52% 38% at 84% 58%, rgba(255, 59, 104, 0.085), rgba(255, 59, 104, 0) 100%), radial-gradient(ellipse 40% 32% at 8% 32%, rgba(184, 188, 186, 0.05), rgba(184, 188, 186, 0) 100%); }
.founders::before { background: radial-gradient(ellipse 50% 42% at 6% 50%, rgba(184, 188, 186, 0.07), rgba(184, 188, 186, 0) 100%); }
.faq::before { background: radial-gradient(ellipse 52% 38% at 90% 38%, rgba(184, 188, 186, 0.07), rgba(184, 188, 186, 0) 100%); }
.closing::before { background: radial-gradient(ellipse 52% 34% at 8% 68%, rgba(255, 59, 104, 0.09), rgba(255, 59, 104, 0) 100%), radial-gradient(ellipse 45% 30% at 90% 30%, rgba(184, 188, 186, 0.06), rgba(184, 188, 186, 0) 100%); }

/* ---------- furniture ----------------------------------------------------------------------------------------------- */
/* the prototype note steps out of the way of the copy: centred at the bottom, small and quiet */
.proto-flag { left: 50%; transform: translateX(-50%); bottom: 14px; opacity: 0.6; font-size: 10px; padding: 4px 8px; }
@media (max-width: 768px) { .proto-flag { left: 50%; bottom: 8px; } }

/* the floating call button gets lift, so it reads as floating over the copy instead of sitting in it */
#cta { box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38); }
body[data-theme="light"] #cta, body[data-theme="signal"] #cta { box-shadow: 0 12px 30px rgba(9, 10, 11, 0.18); }

/* section numbers: a longer dash and a touch more size, in the accent colour */
.sec-head .idx::before, .pillars-intro .idx::before, .founders-text .idx::before { width: 40px; }
.idx { font-size: 12.5px; }

/* body copy a notch larger and softer-leaded: the lighter display type lets the text carry more of the page */
.f-body { font-size: 18px; line-height: 1.6; }

/* ---------- hero: a short accent rule over the paragraph ----------------------------------------------------------- */
.hero-aside::before { content: ""; display: block; width: 44px; height: 3px; border-radius: var(--r-pill); background: var(--infrared); margin-bottom: -6px; }

/* ---------- doors: a hint of life when you point at one ----------------------------------- */
.door { border-radius: var(--r-sheet); transition: background-color 0.4s var(--e-soft), transform 0.16s var(--e-out); }
.door:active { transform: scale(0.985); }
@media (hover: hover) { .door:hover { background-color: rgba(243, 241, 236, 0.022); } }

/* ---------- the factual zone on paper: a short accent segment on each rule, as the pillars have ------------------------ */
.expect-row { position: relative; }
.expect-row::before { content: ""; position: absolute; left: 0; top: -2px; width: 56px; height: 3px; border-radius: var(--r-pill); background: var(--accent); }
.rel-row { position: relative; }
.rel-row::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 3px; border-radius: var(--r-pill); background: var(--accent); }

/* ---------- faq: a quieter plus ----------------------------------------------------------------------------------- */
.faq summary::after, .faq summary::before { width: 14px; height: 1px; }

/* ---------- pinned "project or ongoing": the whole stage has to fit one screen, from a 1280x720 laptop up ----------------------------------
   With the roomier type the stage overflowed on short screens and the closing line was pushed out of sight. The heading now sits on one line,
   and the sizes and spacing follow the screen height. */
html.js:not(.native) .relation { padding-top: clamp(84px, 11svh, 132px); padding-bottom: clamp(14px, 2.6svh, 32px); }
html.js:not(.native) .relation .sec-head h2 { max-width: none; font-size: clamp(26px, min(3.5vw, 5.8svh), 64px); }
html.js:not(.native) .relation .relation-lede { font-size: clamp(15px, 2.1svh, 18px); line-height: 1.5; }
html.js:not(.native) .rel-row { padding: clamp(8px, 1.6svh, 16px) 0; }
html.js:not(.native) .relation .relation-lede { max-width: 46rem; margin-bottom: 10px; }


/* ---------- the atmosphere is one switch ------------------------------------------------------------------------------
   The glow behind the hero object, the light pools in the dark sections, the film grain and the soft shadow on the floating button go past the
   written NSR rules (avoid gradients, shadows and glows). They are on by default because the first build looked flat. Remove data-atmos="on" from
   the <html> tag in index.html and all of them go at once, leaving the flat, strictly on-brand look. */
html:not([data-atmos="on"]) #halo-clip,
html:not([data-atmos="on"]) #grain,
html:not([data-atmos="on"]) .doors::before, html:not([data-atmos="on"]) .pillars::before, html:not([data-atmos="on"]) .approach::before,
html:not([data-atmos="on"]) .decide::before, html:not([data-atmos="on"]) .founders::before, html:not([data-atmos="on"]) .faq::before,
html:not([data-atmos="on"]) .closing::before { display: none; }
html:not([data-atmos="on"]) #cta, html:not([data-atmos="on"]) body[data-theme="light"] #cta, html:not([data-atmos="on"]) body[data-theme="signal"] #cta { box-shadow: none; }


/* ---------- round 4: rhythm and feel ------------------------------------------------------------------------------------------------------------------ */
/* the second door sits lower than the first, so the pair reads as a stagger, not a table */
@media (min-width: 1025px) { .door-found { margin-top: clamp(48px, 9vh, 104px); } }

/* things that are touched answer the touch at once (Apple: respond on press, not on release) and settle quickly (Emil: UI stays under 300 ms, hover under 200) */
.text-link:active { opacity: 0.7; transition: opacity 0.08s linear; }
@media (hover: hover) and (pointer: fine) {
  .faq summary { transition: color 0.16s var(--e-ui); }
  .faq summary:hover { color: var(--accent-text); }
}
.faq summary:active { opacity: 0.75; }
#menu nav.big a:active, #menu .svc-group a:active { opacity: 0.7; }
.to-top:active, .door-go:active { transform: scale(0.96); }