/* The first screen: a wall in the dark, read by a pool of light.

   The screen is a wall: paper, with his name and his trade set on it in ink and four dated lines at its foot.
   The firm's name stands on it in three lines, raised from the wall and of its colour. Without script that is
   all there is, a page on paper. With script the wall stands in a dark room: a canvas of darkness lies over the
   paper and one lamp opens a pool in it; a second small canvas carries the shadows of the raised letters; a
   butterfly keeps to the light (light.js does all three).

   Type comes from home.css (.first-role, .first-name, .dates) and main.css (.dates-year), both loaded before
   this file. This file sets where things stand and makes the dated lines small. Everything is scoped under .fl.
   Phone first; one block for wider screens at the end. */

/* ---------- the screen: one wall ---------- */

.first.fl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: calc(100vh - var(--bar));
  min-height: max(480px, calc(100svh - var(--bar)));   /* the wall may grow past one screen, never clip its words */
}

.fl-wall {
  position: relative;
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--s5) var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom, 0px));
  overflow: hidden;                         /* the butterfly comes in from beyond the edge */
  touch-action: pan-y pinch-zoom;          /* a vertical swipe is the page's; a touch and a sideways drag are the lamp's */
}
/* The wall is plastered: a fine tooth and the soft clouds of a limewash, a few levels lighter and darker than the
   paper, so they show only where the lamp falls (the darkness lies over them). Two small tiles, painted once
   (wall-grain.png, wall-mottle.png; made by _prep/tools/modules/light/wall_texture.py 2 2). */
.fl.fl-live .fl-wall { background-image: url(wall-grain.png), url(wall-mottle.png); background-size: 64px 64px, 512px 512px; }
/* a little bare wall above the name; it is the first to give way on a short screen */
.fl-wall::before { content: ""; flex: 0 1 clamp(0px, 6vh, 56px); }
.fl.is-dark .fl-wall { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }

/* the darkness. Before the script has drawn it, it is the even dark of a room with no lamp on */
.fl-dark { position: absolute; top: 0; left: 0; z-index: 1; display: none; width: 100%; height: 100%; pointer-events: none; }
.fl.is-dark .fl-dark { display: block; background: rgba(0, 0, 0, .859); }
.fl.fl-live .fl-dark { background: none; }

/* ---------- the words on the wall ---------- */

/* the dated lines: four small lines at the foot of the wall, a year and what happened, no rules */
.fl .fl-dates {
  display: grid;
  row-gap: 3px;
  width: auto;
  margin-top: 0;
  border: 0;
}
.fl .fl-dates li {
  display: grid;
  grid-template-columns: 3.3em minmax(0, 1fr);
  gap: 0 var(--s2);
  align-items: baseline;
  padding: 0;
  border: 0;
  font: 400 var(--size-meta)/1.6 var(--sans);
}
.fl .fl-dates .dates-year { font: inherit; font-variant-numeric: tabular-nums; color: var(--quiet); }

/* ---------- the firm's name, raised from the wall ---------- */

/* Three lines, as the firm's own mark stacks them. Without script it is the wall's colour with a set shadow
   under it, as a room light from above would give. With script the letters themselves are not painted: the
   canvas over them carries the shadows (light.js). On a phone it stands under the name; the bare wall is below it. */
.fl-relief {
  position: relative;
  align-self: center;
  margin: clamp(28px, 6vh, 64px) 0 auto;
  padding: 0 0 var(--s5);
  pointer-events: none;
}
.fl-relief-word {
  display: block;
  font: 600 clamp(50px, 17.5vw, 88px)/.92 var(--sans);
  letter-spacing: -.03em;
  text-align: center;
  white-space: nowrap;
  color: var(--bg);
  text-shadow: 0 -1px 0 #fff, 0 1px 1px rgba(0, 0, 0, .2), 0 3px 5px rgba(0, 0, 0, .14);
}
.fl-relief-word > span { display: block; }
.fl-relief canvas { position: absolute; display: none; max-width: none; pointer-events: none; }
.fl.fl-relief-live .fl-relief-word { color: transparent; text-shadow: none; }
/* The wings throw a little of their colour on the raised letters near them: a soft wash painted inside the
   letters' own shapes (clipped to the text), placed by the script a little beyond the butterfly, away from the
   lamp, as light the wings send back would fall. Only where the lamp reaches it; nothing out of the light. */
.fl.fl-relief-live.fl-live .fl-relief-word {
  background: radial-gradient(closest-side, rgba(25, 194, 201, .4), rgba(47, 107, 255, .24) 40%, rgba(138, 92, 246, .1) 70%, rgba(138, 92, 246, 0)) no-repeat;
  background-size: var(--ts, 0px) var(--ts, 0px); background-position: var(--tx, 0px) var(--ty, 0px);
  -webkit-background-clip: text; background-clip: text; opacity: var(--tl, 0);
}
.fl.fl-relief-live .fl-relief canvas { display: block; }

/* ---------- the butterfly ---------- */

/* Ink, seen from above, a little larger than a letter; under the lamp a sheen crosses its wings (below). The script moves the whole of it (and turns it the way
   it flies) and slides its shadow away from the light; the wings beat by themselves. Each wing is its own
   layer, so a wingbeat costs the page nothing but a little compositing. */
.fl-fly {
  --fly: 40px;                              /* from wingtip to wingtip */
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  width: var(--fly);
  height: calc(var(--fly) * .8);
  margin: calc(var(--fly) * -.4) 0 0 calc(var(--fly) / -2);
  pointer-events: none;
  will-change: transform;
}
.fl.fl-live.is-dark .fl-fly.is-here { display: block; }
.fl-fly-shade, .fl-fly-ink { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }
.fl-fly-shade { opacity: 0; will-change: transform, opacity; }
.fl-wing { position: absolute; top: 0; display: block; width: 50%; height: 100%; }
.fl-wing-r { left: 50%; transform-origin: 0 50%; }
.fl-wing-l { left: 0; transform-origin: 100% 50%; }
.fl-wing svg { display: block; width: 100%; height: 100%; overflow: visible; fill: var(--fg); stroke: var(--bg); stroke-width: 1.6; stroke-linejoin: round; paint-order: stroke; }
.fl-wing-l svg { transform: scaleX(-1); }
.fl-fly-shade .fl-wing svg { fill: #000; stroke: none; filter: blur(1.3px); }
.fl-fly-body { position: absolute; top: 0; left: 40%; width: 20%; height: 100%; overflow: visible; fill: var(--fg); }
.fl-fly-feelers { fill: none; stroke: var(--fg); stroke-width: .9; stroke-linecap: round; }
/* Under the lamp a sheen crosses the black wings, as on a swallowtail: the script slides the two gradients with the
   lamp and says how much light reaches the butterfly (--lit). Out of the light the wings are plain ink. */
.fl-defs { position: absolute; }
.fl-sheen { fill: url(#fl-iri-r); stroke: none; opacity: var(--lit, 0); }
.fl-wing-l .fl-sheen { fill: url(#fl-iri-l); }
/* Scales from the wings: a few specks that fall while it flies and are gone within a second or so. They lie under
   the darkness like everything on the wall, so they show only in the light. */
.fl-dust { display: none; }
.fl.fl-live.is-dark .fl-dust { display: block; }
.fl-dust i { position: absolute; left: 0; top: 0; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; opacity: 0; pointer-events: none; background: currentColor; box-shadow: 0 0 7px currentColor; color: #2f6bff; }
.fl-dust i:nth-child(3n) { color: #19c2c9; }
.fl-dust i:nth-child(3n + 1) { color: #8a5cf6; width: 4px; height: 4px; }

/* in the air the wings beat; settled, they close and open now and then (the script sets .is-wink for one such breath) */
.fl-fly.is-flying .fl-wing { animation: fl-beat .12s linear infinite alternate; will-change: transform; }
.fl-fly.is-wink .fl-wing { animation: fl-wink 1.5s ease-in-out 1; }
@keyframes fl-beat { from { transform: scaleX(1); } to { transform: scaleX(.14); } }
@keyframes fl-wink { 0%, 100% { transform: scaleX(1); } 28% { transform: scaleX(.3); } 55% { transform: scaleX(.92); } 76% { transform: scaleX(.5); } }

/* ---------- a short screen: the words move up ---------- */

@media (max-height: 660px) {
  .fl-wall { padding-block: var(--s4) calc(var(--s4) + env(safe-area-inset-bottom, 0px)); }
  .fl-relief { margin-top: var(--s4); padding-bottom: var(--s4); }
  .fl-relief-word { font-size: clamp(46px, min(17.5vw, 11.5vh), 88px); }
}

/* ---------- wider screens: the name at the top of the page's column, the relief in the middle of the wall,
   the dated lines across its foot ---------- */

@media (min-width: 720px) {
  .fl-wall { padding-inline: max(var(--gutter), calc((100vw - var(--page)) / 2 + var(--gutter))); padding-top: var(--s6); }
  .fl .first-text { margin-bottom: auto; }
  .fl-relief { position: absolute; left: 50%; top: 45%; margin: 0; padding: 0; transform: translate(-50%, -50%); }
  .fl-relief-word { font-size: clamp(72px, min(9.6vw, 17.5vh), 136px); }
  /* the page's own gap: the four start on its columns 1, 4, 7 and 10. Each keeps its own height, hung from the
     top: stretched to the tallest, a line of one line would start half a line under its neighbours of two */
  .fl .fl-dates { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 16px; align-items: start; }
  .fl .fl-dates li { grid-template-columns: minmax(0, 1fr); }      /* the year stands over its line */
  .fl-fly { --fly: 48px; }
}

/* ---------- on paper, with the system's own colours, or without motion ---------- */

@media print { .fl.is-dark .fl-dark, .fl-fly, .fl-dust { display: none !important; } }
@media (forced-colors: active) {
  .fl.is-dark .fl-dark { display: none; }
  .fl-relief canvas, .fl-fly { display: none !important; }
  .fl-relief-word, .fl.fl-relief-live .fl-relief-word { color: CanvasText; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-fly.is-flying .fl-wing, .fl-fly.is-wink .fl-wing { animation: none; }
}