/* Igor Andrić — the hero (hero.js). 6 Oct: the film is off the homepage.

   Lazar locked the hero on 1 Oct: Partitura · Original — the photograph untouched, in its own colours, with the
   staves lying over it as strings (drawn by hero.js in one WebGL canvas). On 6 Oct he took every word off it but the
   name and the nav. Locked on 14 Oct: Zavesa — the name at the foot, it goes up into the nav, and the strings close
   over the photograph like a curtain. The review switch and the other layouts were deleted that day.
   Every colour of the type is written by hero.js from the photograph under it — nothing here sets one. */

/* a pinned screen, and the biography rises OVER it: the hero and the statement are one movement. The hero's lines go
   once the page is in the biography, and the statement writes its own staves and letters (write-in.js), as before. */
.hero{height:250vh}
.stage{background:#2C2F31}
.bio{margin-top:-100vh}

/* the photograph itself: what stands before the canvas has drawn, and without WebGL */
.hero-photo{position:absolute;z-index:0;display:block;max-width:none;pointer-events:none;
  opacity:calc(1 - var(--hero-out,0))}
.hero-canvas{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;touch-action:pan-y;
  opacity:0;transition:opacity .4s ease}
.hero-canvas.is-on{opacity:1}

/* the type block is the whole stage, in the same coordinates as the strings */
.hero .hero-type{left:0;right:0;top:0;bottom:0;opacity:1;pointer-events:none}
.hero-type :is(a,button){pointer-events:auto}
.hero .hero-name{position:absolute;margin:0;text-shadow:none;white-space:nowrap}
/* letters stay inline (not inline-block), so Halyard keeps its kerning between them; no transition on their colour —
   hero.js sets it every frame while the name flies */

/* the nav reads the top of the photograph too */
html.hero-nav-ink .nav .nav-links a,
html.hero-nav-ink .nav .burger{color:var(--hero-nav-ink)}

/* ================================================================ 1 · Zavesa */
.hl-1 .hero-name{left:var(--gut);bottom:var(--gut)}
/* a word is one box, so it can fly to the nav (the letters inside stay inline and keep their kerning) */
.hl-1 .hn-w{display:inline-block;white-space:nowrap}
.hl-1 .hn-w{will-change:transform}

/* The dot is off the bar (Lazar, 6 Oct: "the dot goes from the hero"): the top left belongs to the name, which flies
   there and stays — later the home button. The element stays in index.html (menu.js counts on it), only hidden. */
.nav>.mark-dot{display:none}
/* the name the hero's name becomes, at the top left of the nav. hero.js fades it in under the flying name; it takes
   the hand only once it has landed. Until then it holds its place, so the links (and the phone's button) stay right. */
.nav-name{margin:0 auto 0 0;font-weight:var(--fw-bold);letter-spacing:.01em;text-transform:uppercase;
  white-space:nowrap;color:var(--ink);opacity:0;pointer-events:none}
.nav-name.is-on{pointer-events:auto}
html.hero-nav-ink .nav .nav-name{color:var(--hero-nav-ink)}