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

   The screen is a wall: paper, with the firm's mark set on it in ink (its slogan is under the screen, home.css).
   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).

   The mark's size comes from home.css (.first-name, .first-logo), loaded before this file. This file sets where
   things stand. Everything is scoped under .fl.
   Phone first; one block for wider screens at the end. */

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

/* On a phone the mark and the relief fill little of a whole screen, so the wall is shorter there and the slogan
   under it shows sooner (owner, 2026-10-19); from 720px it takes the whole screen. */
.first.fl {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  min-height: max(440px, 68vh);
  min-height: max(440px, 68svh);   /* the wall may grow past this, 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 mark, kept small so the mark sits high (owner, 2026-10-19); it is the first to give
   way on a short screen */
.fl-wall::before { content: ""; flex: 0 1 clamp(0px, 1.5vh, 12px); }
.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 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 a set distance under the mark (the mark is
   small and high, so close under it the name would sit too high); the bare wall is below it, so a taller wall
   moves only what comes after the screen. */
.fl-relief {
  position: relative;
  align-self: center;
  margin: clamp(40px, 7vh, 64px) 0 auto;
  padding: var(--s5) 0;
  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 { padding-block: var(--s4); }
  .fl-relief-word { font-size: clamp(46px, min(17.5vw, 11.5vh), 88px); }
}

/* ---------- wider screens: the mark at the top of the page's column, the relief in the middle of the wall ---------- */

@media (min-width: 720px) {
  .first.fl { min-height: calc(100vh - var(--bar)); min-height: max(480px, calc(100svh - var(--bar))); }
  .fl-wall { padding-inline: max(var(--gutter), calc((100vw - var(--page)) / 2 + var(--gutter))); padding-top: var(--s5); }
  .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); }
  .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; }
}