/* /story/chrome.css — the site's shared chrome, transplanted for the story.

   Povestea NU linkeaza site.css, si nu din obisnuinta. Masurat pe markup-ul
   de aici (1 sep 2026), site.css ar ateriza peste scena in patru locuri:

   1. .hero__logo si .hero__name — de cate 3 ori in povestea asta. Din 1 sep
      site.css le stie si el (sunt alias pentru .pagehead__*, dupa ce
      index.html si-a pierdut blocul <style> propriu), deci ar repicta exact
      cartonul de titlu al filmului.
   2. .wrap (x3), .band, .prose, .label, .cta-row, .btn (x4) — le are si
      povestea. site.css le stilizeaza nescoped; aici sunt intentionat legate
      de .prefoot, ca sa nu atinga scena.
   3. :root-ul din site.css ar deveni global si ar stinge gradul propriu:
      --hair si --violet sunt redeclarate aici cu ALTE valori (4 folosiri
      fiecare in scrollcraft.css). De asta variabilele stau pe radacinile
      chrome-ului, niciodata pe :root.
   4. * { box-sizing } si body { font / color / line-height } ar cadea sub
      scena fixa a lui scrollcraft.

   Deci cele trei componente comune — meniul plutitor, banda prefoot si
   subsolul — plus cortina de tranzitie raman aici ca o copie SCOPED a
   regulilor din site.css. Dupa E-05 sunt doua copii, nu trei.

   Cand se schimba blocurile topnav/prefoot/footer/xfilm din site.css,
   re-copiaza-le aici — si verifica, nu te baza pe ochi:
     node bin/render-diff.mjs http://127.0.0.1:8099 bin/rezultate/x.json
   apoi compara /services/ (site.css) cu /story/ (fisierul asta). Ce ramane
   diferit e mostenire din gradul povestii sau stare de pagina, nu declaratii
   divergente. Cunoscut si netratat: letter-spacing-ul povestii (-0.09px la
   1440px) se scurge in prefoot si subsol, fiindca aici se fixeaza font-family,
   font-size, line-height si color pe .prefoot/.ft, dar nu si letter-spacing. */

.topnav, .prefoot, .ft, .xfilm, .story-end {
  --navy:      #06111D;
  --navy2:     #0A1828;
  --deep:      #036699;
  --blue:      #0387BF;
  --sky:       #A4DCEB;
  --ink:       #F2EFE8;
  --ink-soft:  #B9C6D2;
  --ink-mute:  #8FA1B2;
  --hair:      rgba(164, 220, 235, 0.14);
  --hair2:     rgba(164, 220, 235, 0.30);
  --edge:      rgba(164, 220, 235, 0.42);
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --measure: 62ch;

  /* Oglinda lui E-09 / E-10 / E-18 / E-06 din site.css. Aceleasi valori, ca
     prefoot-ul si subsolul povestii sa nu se desprinda de restul sitului. */
  --mono-sm: 0.76rem;
  --mono-md: 0.8rem;
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --link:        var(--sky);
  --link-struct: var(--ink-soft);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --t-fast:   160ms;
}

/* Inelul de focus si linkul de sarit, aliniate la sit (E-07 / E-02).

   Masurat pe 1 sep 2026: scrollcraft.css da inelului `var(--sc-accent)`, iar
   blocul <style> din story/index.html redefineste --sc-accent la #0387BF si
   repeta `:focus-visible { outline-color: var(--sc-accent) }`. Deci povestea
   are un al doilea inel (#0387BF) fata de sit (--sky, #A4DCEB) - si acelasi
   <style> pune linkul de sarit alb pe #0387BF, adica 4.02:1 la 12.8px, exact
   caderea pe care E-02 o repara pe butonul primar.

   Blocul acela e in markup, care nu e al nostru, si vine DUPA fisierul asta in
   cascada. De aceea selectorii de aici sunt prefixati cu `html`: (0,1,1) bate
   (0,1,0), fara !important. Solutia curata ramane in markup - vezi predarea:
   story/index.html, `:focus-visible { outline-color: ... }` si `.skip { color }`.
   Culorile sunt scrise literal fiindca variabilele chrome-ului stau intentionat
   pe radacinile lui, nu pe :root (nota din capul fisierului), iar focusul si
   linkul de sarit cad in afara lor. #A4DCEB e --sky, #06111D e --navy. */
html :focus-visible {
  outline: 2px solid #A4DCEB;
  outline-offset: 3px;
}

/* Navy pe #0387BF = 4.72:1; alb pe #0387BF = 4.02:1 si cade. */
html .skip { color: #06111D; }

/* ---------------------------------------------- shared shell pieces ---- */

.prefoot .wrap, .ft .wrap, .topnav .wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: var(--gutter);
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
  box-sizing: border-box;
}

.prefoot .label {
  font-family: var(--mono);
  font-size: var(--mono-sm);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sky);
  margin: 0 0 1.1rem;
}

.prefoot h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem);
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 1.2rem;
  letter-spacing: -0.01em;
  max-width: 28ch;
  text-wrap: balance;
}

.prefoot .prose { max-width: var(--measure); }
.prefoot .prose p { margin: 0 0 1.1rem; }
.prefoot .prose p:last-child { margin-bottom: 0; }

.prefoot .cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

.prefoot .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.25rem;
  border-radius: 3px;
  text-decoration: none;
  font-size: 0.97rem;
  border: 1px solid transparent;
}
/* Oglinda lui E-02 / E-03 din site.css: alb pe --blue e 4.02:1 la 15.5px. */
.prefoot .btn-p { background: var(--deep); color: #fff; }
.prefoot .btn-p:hover { background: var(--blue); color: var(--navy); }
.prefoot .btn-s { border-color: var(--edge); color: var(--ink); }
.prefoot .btn-s:hover { border-color: var(--sky); background: rgba(164, 220, 235, 0.05); }

/* Oglinda lui E-06: aceeasi curba, aceeasi durata, doar culoare/bordura. */
.prefoot .btn,
.topnav__home,
.topnav ul a,
.ft a,
.ft__nav a {
  transition: color var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}

/* --------------------------------------------------- prefoot + footer -- */

.prefoot {
  background: var(--navy2);
  border-block: 1px solid var(--hair);
  padding-block: clamp(3.5rem, 9vw, 7rem);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  line-height: 1.7;
  color: var(--ink-soft);
  -webkit-font-smoothing: antialiased;
}

.ft {
  background: var(--navy2);
  border-top: 1px solid var(--hair);
  padding-block: clamp(2.5rem, 6vw, 4rem);
  font-family: var(--sans);
  font-size: 0.86rem;
  line-height: 1.8;
  color: var(--ink-mute);
  -webkit-font-smoothing: antialiased;
}

.ft__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem 2.5rem;
}

.ft strong { color: var(--ink-soft); font-weight: 600; }
.ft a { color: var(--link-struct); }

.ft__nav ul { list-style: none; margin: 0; padding: 0; }
.ft__nav li { margin-bottom: 0.15rem; }
.ft__nav a { color: var(--link-struct); text-decoration: none; border-bottom: 1px solid transparent; }
.ft__nav a:hover { color: var(--ink); border-bottom-color: var(--edge); }

.ft__head {
  font-family: var(--mono);
  font-size: var(--mono-sm);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--sky);
  margin: 0 0 var(--s2);
}

.ft__ids { font-family: var(--mono); font-size: var(--mono-md); letter-spacing: 0.02em; }
:where(.ft__ids) { font-variant-numeric: tabular-nums; }

/* The story is a fixed stage; the credits are the one thing in flow after
   the scroll track, so they ride up OVER the film's last frame like end
   titles. Solid ground and a z above every stage layer (grain 3, bars 50,
   rail 60), below the curtain (100). */
.story-end {
  position: relative;
  z-index: 70;
  background: var(--navy);
  border-top: 1px solid var(--hair);
}

/* ---------------------------------------------------- floating menu ----- */

.topnav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 70; /* above the letterbox bars (50) and rail (60) */
  padding-top: max(0.9rem, env(safe-area-inset-top));
  padding-bottom: 2.2rem;
  background: linear-gradient(to bottom, rgba(6,17,29,0.62) 0%, rgba(6,17,29,0) 100%);
  pointer-events: none;
}
.topnav .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  pointer-events: auto;
  font-family: var(--mono);
  font-size: var(--mono-sm);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.topnav__home {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-block: 0.55rem;
}
.topnav__home:hover { border-bottom-color: var(--sky); }
.topnav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.1rem;
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.6rem;
  border-left: 1px solid rgba(164,220,235,0.30);
}
.topnav ul a {
  color: var(--link-struct);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  display: inline-block;
  padding-block: 0.55rem;
}
.topnav ul a:hover { color: var(--ink); border-bottom-color: var(--sky); }
.topnav ul a[aria-current="page"] { color: var(--sky); border-bottom-color: var(--sky); }

/* ------------------------------------------------------- scroll hint ---- */

.hero__hint {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(0.62rem, 1vw, 0.78rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #A9B4BD;
  margin: 1.4rem 0 0;
}
.hero__hint::after { content: "  ↓"; letter-spacing: 0; }

/* --------------------------------------- the curtain between pages ----- */
/* Exact copy of site.css: the film overlay transition.js builds, plus the
   morph states either side of the navigation. */

.xfilm {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--navy);
  animation: xfilm-in 200ms ease both;
}

.xfilm video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes xfilm-in { from { opacity: 0; } to { opacity: 1; } }

body > * {
  transition: filter 200ms ease;
}
html.is-leaving body > *:not(.xfilm) {
  filter: blur(6px) brightness(0.55);
}
html.is-leaving .xfilm {
  filter: none;
  animation: xfilm-in 180ms ease both;
}
html.is-arriving body > * {
  animation: page-rise 460ms ease both;
}
@keyframes page-rise {
  from { transform: translateY(6px); }
  to   { transform: none; }
}

.xfilm--hold { animation: none; opacity: 1; }
.xfilm--out {
  opacity: 0;
  transition: opacity 500ms ease;
}
html.is-leaving body > *:not(.xfilm) {
  transition-duration: 200ms;
}

@media (prefers-reduced-motion: reduce) {
  .xfilm { display: none; }
  body > *,
  html.is-leaving body > *:not(.xfilm),
  html.is-arriving body > * { filter: none; transform: none; animation: none; transition: none; }
}

/* --------------------------------------------------- small screens ------ */

@media (max-width: 700px) {
  .prefoot .cta-row { gap: 0.6rem; }
  .prefoot .cta-row:not(nav) .btn {
    flex: 1 1 100%;
    justify-content: center;
    min-height: 46px;
    font-size: 1rem;
  }
  .prefoot { padding-block: clamp(2.8rem, 12vw, 4.5rem); }
}

@media (max-height: 540px) and (orientation: landscape) {
  .topnav { padding-bottom: 1rem; }
}

/* Pragul degetului, oglinda lui E-12: 51.99rem (832px), acolo unde incep
   grilele de doua coloane pe restul sitului - nu 700px. Suprascrierile de
   marime mono de aici au plecat: --mono-sm tine podeaua la orice latime. */
@media (max-width: 51.99rem), ((max-height: 540px) and (orientation: landscape)) {
  .ft { font-size: 0.92rem; }
  .ft a,
  .ft__nav a { display: inline-block; padding-block: 0.4rem; }
  .ft__nav li { margin-bottom: 0; }
}

/* ---- plecarea de pe /story/ -------------------------------------------------
   Orice `filter` creeaza un containing block nou, deci tot ce e position:fixed
   inauntru - scena, placile de text, benzile, rail-ul de capitole - se
   re-ancoreaza la elementul filtrat in clipa in care incepe plecarea, si sare.
   `opacity` intuneca la fel de bine si nu re-ancoreaza nimic. (B-13) */
html.is-leaving body > *:not(.xfilm) { filter: none; opacity: 0.45; }
@media (prefers-reduced-motion: reduce) {
  html.is-leaving body > *:not(.xfilm) { opacity: 1; }
}