/* The hero caption (design/hero.md): the headline over the light wall and window left of the
   arch, with no backdrop of any kind. ui/hero.js fits it into the text zone the scene measures
   (--zone-right, --hero-size); it steps aside once the visitor moves into the room, and the
   "About Cyril" tab brings it back. */
.hero {
  position: fixed;
  left: var(--gutter);
  top: 48px;
  width: calc(var(--zone-right, 40vw) - var(--gutter));
  pointer-events: none; /* clicks fall through to the room */
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
/* Cinematic title moment (Cyril, 8 Nov 2026): while the block shows, the left of the room is
   darkened like a film title card, and the text is paper on it. The darkening is one wide,
   edge-less grade from the left edge (full until 30% of the width, then eased out by 70%), and
   it fades with the text: aside, zoomed in, stacked or on the phone the room is fully clear. */
.hero-shade {
  position: fixed; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(20, 14, 10, 1.000) 0%, rgba(20, 14, 10, 1.000) 30%, rgba(20, 14, 10, 0.957) 35%, rgba(20, 14, 10, 0.844) 40%, rgba(20, 14, 10, 0.676) 45%, rgba(20, 14, 10, 0.500) 50%, rgba(20, 14, 10, 0.324) 55%, rgba(20, 14, 10, 0.156) 60%, rgba(20, 14, 10, 0.043) 65%, rgba(20, 14, 10, 0.000) 70%);
  opacity: 0.52; /* the strength: worst-case contrast measured at 1920, 1440, 1280 and 1200 x 1000 */
  transition: opacity var(--dur-slow) var(--ease-out);
}
html:not([data-view="desk"]) .hero-shade, html.hero-aside .hero-shade { opacity: 0; }
html.hero-stacked .hero-shade { display: none; }
.hero, .hero :is(.hero-kicker, .hero-hint) { color: var(--paper); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
html:not([data-view="desk"]) .hero { opacity: 0; }
html.hero-aside .hero { opacity: 0; transform: translateX(-24px); }

.hero-heading {
  margin: 0;
  font: 400 var(--hero-size, var(--text-display)) / 1.02 var(--font-display);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero-heading:focus { outline: none; box-shadow: none; } /* focused by the tab so a screen reader reads it */
.hero-line { margin: var(--space-5) 0 0; max-width: 34ch; font-size: 1rem; line-height: 1.5; text-wrap: pretty; }
.hero-kicker .kicker-name { display: block; }
.hero-kicker .kicker-part { white-space: nowrap; }
.hero-hint {
  display: inline-block;
  margin: var(--space-5) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--gold);
  font-size: var(--text-small);
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* The tab: a paper tab on the left edge, shown only while the block is aside at the desk. */
.hero-tab {
  position: fixed; left: 0; top: 50%; z-index: 4; width: 40px; height: 136px; margin-top: -68px;
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0;
  border: 0; border-right: 2px solid var(--gold); border-radius: 0 10px 10px 0; cursor: pointer;
  background: var(--paper-raised) url("../../public/assets/scene/paper.webp") 0 0 / 256px auto; color: var(--ink);
  box-shadow: var(--shadow-1);
  transform: translateX(-110%); visibility: hidden;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-fast), visibility 0s linear var(--dur-base);
}
html.hero-aside[data-view="desk"] .hero-tab {
  transform: none; visibility: visible;
  transition: transform var(--dur-base) var(--ease-out) 120ms, box-shadow var(--dur-fast);
}
html.hero-aside[data-view="desk"] .hero-tab:hover { transform: translateX(4px); box-shadow: var(--shadow-2); }
.hero-tab .arch-glyph { width: 12px; height: 14px; flex: none; }
.hero-tab-text { writing-mode: vertical-rl; rotate: 180deg; font: 600 13px / 1 var(--font-body); white-space: nowrap; }

/* Phones and portrait screens: the scene on top, the text below it. Nothing to step aside, no tab. */
@media (max-width: 767px), (orientation: portrait) {
  .hero {
    position: static; transform: none; width: auto;
    /* Padding, not margin: a top margin would collapse through body and add a blank page end. */
    padding: calc(60svh + var(--space-5)) var(--gutter) var(--space-7);
  }
  .hero-tab, .hero-shade { display: none; }
  .hero, .hero :is(.hero-kicker, .hero-hint) { color: var(--ink); text-shadow: none; }
  .hero-heading { font-size: var(--text-h1); }
  .hero-line { font-size: var(--text-small); }
  .hero-hint { margin-top: var(--space-4); }
}
/* The same stacked layout on a landscape screen whose text zone cannot hold the block (ui/hero.js). */
html.hero-stacked .hero { position: static; transform: none; width: auto; padding: calc(60svh + var(--space-5)) var(--gutter) var(--space-7); }
html.hero-stacked .hero-tab { display: none; }
html.hero-stacked .hero, html.hero-stacked .hero :is(.hero-kicker, .hero-hint) { color: var(--ink); text-shadow: none; }
html.hero-stacked .hero-heading { font-size: var(--text-h1); }
html.hero-stacked .hero-hint { margin-top: var(--space-4); }