/* ==========================================================================
   Valen — Wallet connection page ("/")
   Loaded after style.css, by views/login.ejs only.

   The page is an arched entrance seen from its forecourt: a masonry wall, a
   raised arch with two reveals stepping back into it, and a tiled passage that
   runs to the entry itself (logo, headline, Connect Wallet). Wall, floor and
   vault share one vanishing point, the centre of the arch, so the joints of
   the forecourt run on into the passage. Nothing here is an image: every
   shape is an element with a background and a shadow.

   The scene is laid out on a 1120 x 720 design grid. --u is one unit of that
   grid: everything scales with it and keeps its proportions.

     1. Stage and materials
     2. Scene
     3. Wall
     4. Arch
     5. Corridor
     6. Door: the entry
     7. Forecourt
     8. Smaller screens
     9. Wallet selection (modal)
   ========================================================================== */

/* ---------- 1. Stage and materials ---------- */

/* One scene, centred on the arch and filling the page. The single column is
   the width of the page, so the scene (which is far wider) stays centred and
   runs off both sides equally.

   The page is exactly as tall as the window and never scrolls: the scene is
   scaled to the window's height (see --u), and only the parts of the wall and
   floor that are meant to run off the edges are cut. A window shorter than the
   scene at its smallest (a phone on its side) is the one case that scrolls. */
.login {
  /* Stone is the app's panel colour: faces that stand forward are a little
     lighter, faces turned from the light a little darker. Joints and edges
     are the app's borders. */
  --stone: var(--panel);
  --stone-raised: color-mix(in srgb, var(--panel-secondary) 55%, var(--panel));
  --stone-bright: var(--panel-secondary);
  --stone-shade: color-mix(in srgb, var(--panel) 55%, var(--background));
  --stone-deep: color-mix(in srgb, var(--panel) 18%, var(--background));
  --stone-black: #07090C;
  --joint: var(--border);
  --edge: var(--border-strong);
  --lit: 150, 186, 255; /* light from inside: the app's blue, paler */

  /* One unit of the scene's 1120 x 720 design grid. The scene is sized by the
     height of the window, so it always fills it; on a narrow screen by the
     width of the arch instead, so the arch always fits. The wall and the
     floor run off the edges either way. */
  --u: clamp(0.72px, min((100dvh - 40px) / 720, (100vw - 24px) / 540), 1.3px);

  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  height: 100vh;
  height: 100dvh;
  min-height: calc(720 * 0.72px); /* the scene at its smallest */
  overflow: hidden;
}

/* Coursed masonry in running bond, drawn with three gradients: the bed joints,
   and the upright joints of the odd and of the even courses (each a one-pixel
   quarter of a conic gradient). Courses are counted up from the bottom edge.
     --course           height of one course
     --block            length of one block
     --masonry-light    optional gradients laid over the stone (lighting)
     --masonry-ground   the stone itself (default --stone) */
.masonry {
  background:
    var(--masonry-light, none),
    linear-gradient(var(--joint) 1px, transparent 1px) 0 100% / 100% var(--course),
    conic-gradient(at 1px 50%, transparent 270deg, var(--joint) 0) 50% 100% / var(--block) calc(var(--course) * 2),
    conic-gradient(at 1px 50%, transparent 270deg, var(--joint) 0) calc(50% + var(--block) / 2) calc(100% - var(--course)) / var(--block) calc(var(--course) * 2),
    var(--masonry-ground, var(--stone));
}

/* A floor of square, two-tone tiles, laid flat and seen in perspective: the
   element is hinged on its upper edge and tipped towards the viewer, so its
   joints run to a vanishing point straight above the middle of the hinge.
     --tile         side of one tile
     --eye          how far the vanishing point is above the hinge
     --tilt         how flat the floor lies to the eye (the nearer 90deg, the flatter)
     --floor-light  optional gradients laid over the tiles (lighting)
   The joints that run across are seen edge on, so they are drawn thick. */
.tiles {
  --floor-hinge: 0%;
  --floor-from: to bottom;

  background:
    var(--floor-light, none),
    linear-gradient(var(--floor-from), var(--edge) calc(var(--tile) * 0.09), transparent 0) 0 var(--floor-hinge) / 100% var(--tile),
    linear-gradient(90deg, var(--edge) 1px, transparent 1px) 0 0 / var(--tile) 100%,
    conic-gradient(rgba(255, 255, 255, 0.032) 25%, transparent 0 50%, rgba(255, 255, 255, 0.032) 0 75%, transparent 0) 0 var(--floor-hinge) / calc(var(--tile) * 2) calc(var(--tile) * 2),
    var(--stone-shade);
  transform-origin: 50% var(--floor-hinge);
  transform: perspective(calc(var(--eye) * tan(var(--tilt)))) rotateX(var(--tilt));
}

/* The same floor hinged on its lower edge and laid back, away from the viewer. */
.tiles--away {
  --floor-hinge: 100%;
  --floor-from: to top;
}

/* A cornice of three courses (three empty spans): a cap, a fascia and a row
   of dentils, each standing a little further out than the one below.
   Sizes are in the scene's unit, --u. */
.cornice {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cornice span {
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.cornice span:nth-child(1) {
  width: 100%;
  height: calc(11 * var(--u));
  background: var(--stone-raised);
  border-radius: 1px;
}

.cornice span:nth-child(2) {
  width: calc(100% - 12 * var(--u));
  height: calc(13 * var(--u));
  background: var(--stone);
}

.cornice span:nth-child(3) {
  width: calc(100% - 28 * var(--u));
  height: calc(10 * var(--u));
  background:
    repeating-linear-gradient(90deg, var(--stone-raised) 0 calc(9 * var(--u)), transparent 0 calc(18 * var(--u))),
    var(--stone-deep);
  box-shadow: inset 0 0 0 1px var(--edge), 0 calc(6 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.45);
}

/* ---------- 2. Scene ---------- */

.archway {
  /* The opening, in design units (plain numbers) and as lengths. The head of
     the arch is a semicircle, so its radius is half the width. */
  --n-open: 400;
  --n-jamb: 284; /* height of the straight sides, floor to springing */
  --open: calc(var(--n-open) * var(--u));
  --half: calc(var(--open) / 2);
  --jamb: calc(var(--n-jamb) * var(--u));

  --ring: calc(34 * var(--u));          /* face of the arch */
  --step: calc(12 * var(--u));          /* each reveal */
  --surround: calc(var(--ring) + var(--step) * 2);
  --course: calc(var(--jamb) / 6);      /* height of one course of stone */
  --block: calc(var(--course) * 2);     /* length of one block */

  /* Perspective. The eye is level with the springing of the arch, looking
     straight down the passage; --tilt is how flat the floor lies to the eye.
     A point m units behind the face of the wall is drawn at
     1 / (1 + m * --depth) of its size, shrunk towards the centre of the arch. */
  --tilt: 76deg;
  --n-tile: 50;                         /* one floor tile, square */
  --tile: calc(var(--n-tile) * var(--u));
  --depth: calc(cos(var(--tilt)) / var(--n-jamb));
  --n-bay: calc(var(--n-tile) * 3);     /* ribs every three tiles */
  --bays: 4;                            /* the door stands this many bays in */
  --n-far: calc(var(--n-bay) * var(--bays));

  /* The floors (see .tiles) look from the same eye. */
  --eye: var(--jamb);

  /* The wall either side of the arch, in repeating bays. */
  --n-first: 262;  /* from the centre of the arch to the first bay */
  --n-pitch: 260;  /* width of one bay */
  --n-pier: 56;    /* width of the pilaster at the head of each bay */

  position: relative;
  flex: none;
  width: calc(1120 * var(--u));
  height: calc(720 * var(--u));
}

/* The far edges and corners of the page fall away into the dark, so the eye
   stays on the entry. The clear middle is always wider than the arch.
   (Above the scene, below the wallet modal.) */
.login::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  background:
    radial-gradient(ellipse max(62vw, calc(820 * var(--u))) 84vh at 50% 48%, transparent 34%, rgba(9, 11, 16, 0.5) 68%, rgba(9, 11, 16, 0.9) 100%),
    linear-gradient(to bottom, rgba(9, 11, 16, 0.5), transparent 14%);
  pointer-events: none;
}

/* ---------- 3. Wall ---------- */

/* The wall runs far past both edges of the page. Coursed masonry (.masonry);
   courses are counted up from the floor, so the springing of the arch falls on
   a joint. Light gathers round the doorway. */
.wall {
  --masonry-light:
    radial-gradient(ellipse 22% 80% at 50% 100%, rgba(255, 255, 255, 0.05), transparent 72%),
    linear-gradient(to bottom, rgba(9, 11, 16, 0.4), transparent 30%);

  position: absolute;
  top: calc(12 * var(--u));
  left: calc(-1040 * var(--u));
  width: calc(3200 * var(--u));
  height: calc(598 * var(--u));
}

/* Above the cornice the wall goes on up, out of the top of the page: an attic
   of plain masonry with one string course, darker as it rises. */
.wall-attic {
  --masonry-light: linear-gradient(to top, rgba(9, 11, 16, 0.25), rgba(9, 11, 16, 0.9) 70%);

  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: calc(560 * var(--u));
}

.wall-attic::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: calc(var(--course) * 2 - 4 * var(--u));
  left: 0;
  height: calc(8 * var(--u));
  background: var(--stone-raised);
  box-shadow: inset 0 0 0 1px var(--edge), 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.4);
  opacity: 0.7;
}

/* The cornice (.cornice) runs the whole length of the wall. */
.wall-cornice {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 3;
}

/* A plain frieze under the cornice, closed by a fine moulding. */
.wall-frieze {
  position: absolute;
  top: calc(34 * var(--u));
  right: 0;
  left: 0;
  height: calc(21 * var(--u));
  background:
    linear-gradient(to top, var(--edge) 1px, transparent 0 calc(4 * var(--u)), var(--joint) 0 calc(4 * var(--u) + 1px), transparent 0),
    linear-gradient(to bottom, var(--stone-shade), var(--stone));
  box-shadow: inset 0 0 0 1px var(--edge), 0 calc(5 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.35);
}

/* A raised band right across the wall at the springing of the arch. */
.wall-band {
  position: absolute;
  right: 0;
  bottom: calc(var(--jamb) - 4 * var(--u));
  left: 0;
  height: calc(9 * var(--u));
  background: var(--stone-raised);
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.4);
}

/* Base course: taller blocks standing proud of the wall. */
.wall-base {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(26 * var(--u));
  background:
    linear-gradient(90deg, var(--joint) 1px, transparent 1px) 50% 0 / var(--block) 100%,
    var(--stone-raised);
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 calc(-6 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.3);
}

/* ----- Bays -----
   Either side of the arch the wall repeats in bays, as far as the page goes
   and further. Each bay has a pilaster at the end nearer the arch, an arched
   niche below the band and three slit openings above it. Bay --k is counted
   outwards from the arch; --x is how far the middle of its niche is from the
   centre of the arch (negative on the left). */
.bay {
  --n-inner: calc(var(--n-first) + (var(--k) - 1) * var(--n-pitch));
  --x: calc(var(--side) * (var(--n-inner) + var(--n-pier) + (var(--n-pitch) - var(--n-pier)) / 2));

  position: absolute;
  top: calc(55 * var(--u));
  bottom: calc(26 * var(--u));
  width: calc(var(--n-pitch) * var(--u));
}

.bay--right {
  --side: 1;

  left: calc(50% + var(--n-inner) * var(--u));
}

.bay--left {
  --side: -1;

  right: calc(50% + var(--n-inner) * var(--u));
}

/* The pilaster: a flat pier the height of the wall, with a long panel sunk
   into its face, a cap under the frieze and a block where the band meets it. */
.bay-pier {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: calc(var(--n-pier) * var(--u));
  background:
    linear-gradient(90deg, rgba(4, 5, 8, 0.25), transparent 30%, rgba(255, 255, 255, 0.02) 50%, transparent 70%, rgba(4, 5, 8, 0.25)),
    var(--stone-raised);
  box-shadow: inset 0 0 0 1px var(--edge), 0 0 calc(14 * var(--u)) rgba(0, 0, 0, 0.45);
}

.bay--left .bay-pier {
  right: 0;
  left: auto;
}

.bay-pier::before {
  content: '';
  position: absolute;
  inset: calc(26 * var(--u)) calc(14 * var(--u)) calc(16 * var(--u));
  background: linear-gradient(to bottom, var(--stone-shade), var(--stone));
  box-shadow: inset 0 0 0 1px var(--joint), inset 0 calc(6 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.045);
}

/* cap, and the block at the band (two shadows of one element) */
.bay-pier::after {
  content: '';
  position: absolute;
  top: 0;
  right: calc(-5 * var(--u));
  left: calc(-5 * var(--u));
  height: calc(13 * var(--u));
  background: linear-gradient(to bottom, var(--stone-bright), var(--stone-raised));
  box-shadow:
    inset 0 0 0 1px var(--edge),
    0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.4),
    0 calc(598 * var(--u) - 55 * var(--u) - var(--jamb) - 7 * var(--u)) 0 0 var(--stone-raised),
    0 calc(598 * var(--u) - 55 * var(--u) - var(--jamb) - 7 * var(--u)) 0 1px var(--edge);
}

/* The niche: an arched recess with a raised stone surround. What is seen
   inside it is drawn in the same perspective as the passage: its back wall is
   the opening again, a little smaller and nearer the centre of the arch, so
   the niches further out show more of their far side. */
.niche {
  --n-width: 124;
  --n-height: 216;
  --n-sill: 14;    /* above the base course */
  --frame: calc(14 * var(--u));

  position: absolute;
  bottom: calc(var(--n-sill) * var(--u));
  left: calc((var(--n-pier) + (var(--n-pitch) - var(--n-pier)) / 2 - var(--n-width) / 2) * var(--u) - var(--frame));
  width: calc(var(--n-width) * var(--u) + var(--frame) * 2);
  height: calc(var(--n-height) * var(--u) + var(--frame));
  padding: var(--frame) var(--frame) 0;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035), transparent 45%),
    repeating-conic-gradient(from 281.25deg at 50% 100%, var(--edge) 0 0.5deg, transparent 0 22.5deg) 0 0 / 100% calc(var(--n-width) / 2 * var(--u) + var(--frame)) no-repeat,
    var(--stone-raised);
  border-radius: 999px 999px 0 0;
  box-shadow: inset 0 0 0 1px var(--border-hover), 0 0 0 1px rgba(0, 0, 0, 0.45), 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.5);
}

.bay--left .niche {
  right: calc((var(--n-pier) + (var(--n-pitch) - var(--n-pier)) / 2 - var(--n-width) / 2) * var(--u) - var(--frame));
  left: auto;
}

/* a sill under the niche */
.niche::after {
  content: '';
  position: absolute;
  right: calc(-7 * var(--u));
  bottom: calc(-9 * var(--u));
  left: calc(-7 * var(--u));
  height: calc(9 * var(--u));
  background: linear-gradient(to bottom, var(--stone-bright), var(--stone-raised));
  box-shadow: inset 0 0 0 1px var(--border-hover), 0 calc(5 * var(--u)) calc(10 * var(--u)) rgba(0, 0, 0, 0.5);
}

/* The recess itself: its sides, head and floor (what shows round the back wall). */
.niche-recess {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--stone-black), var(--stone-deep) 60%, var(--stone-shade));
  border-radius: 999px 999px 0 0;
  box-shadow: inset 0 0 0 1px var(--edge);
}

/* The back wall, 70 units behind the face: lit faintly from below. */
.niche-back {
  --s: calc(1 / (1 + 70 * var(--depth)));
  /* the eye is this far above the head of the niche */
  --n-rise: calc(var(--n-jamb) - 26 - var(--n-sill) - var(--n-height));

  position: absolute;
  top: calc(var(--n-rise) * -1 * (1 - var(--s)) * var(--u));
  left: calc((var(--n-width) / 2 - var(--x)) * (1 - var(--s)) * var(--u));
  width: calc(var(--s) * 100%);
  height: calc(var(--s) * 100%);
  background:
    radial-gradient(ellipse 90% 60% at 50% 100%, rgba(var(--lit), 0.13), transparent 72%),
    linear-gradient(to bottom, var(--stone-black), var(--stone-deep));
  border-radius: 999px 999px 0 0;
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 calc(10 * var(--u)) calc(18 * var(--u)) rgba(0, 0, 0, 0.6);
}

/* A plain block standing in the niche, as for a figure that is not there. */
.niche-back::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 26%;
  width: 48%;
  height: calc(30 * var(--u));
  background: linear-gradient(to bottom, var(--stone-raised), var(--stone-shade));
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 calc(-8 * var(--u)) calc(20 * var(--u)) rgba(var(--lit), 0.08);
}

/* Three slit openings above the band: narrow, round-headed, each in a thin
   raised surround, over a short ledge. */
.bay-slits {
  position: absolute;
  top: calc(64 * var(--u));
  left: calc(var(--n-pier) * var(--u));
  display: flex;
  justify-content: center;
  gap: calc(30 * var(--u));
  width: calc((var(--n-pitch) - var(--n-pier)) * var(--u));
  height: calc(128 * var(--u));
}

.bay--left .bay-slits {
  right: calc(var(--n-pier) * var(--u));
  left: auto;
}

.bay-slits i {
  width: calc(15 * var(--u));
  background: linear-gradient(to bottom, var(--stone-black), var(--stone-deep));
  border-radius: 999px 999px 0 0;
  box-shadow:
    inset 0 0 0 1px var(--edge),
    inset calc(3 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.7),
    0 0 0 calc(5 * var(--u)) var(--stone-raised),
    0 0 0 calc(5 * var(--u) + 1px) var(--border-hover),
    0 calc(4 * var(--u)) calc(12 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.4);
}

.bay-slits::after {
  content: '';
  position: absolute;
  bottom: calc(-15 * var(--u));
  left: 50%;
  width: calc(132 * var(--u));
  height: calc(8 * var(--u));
  margin-left: calc(-66 * var(--u));
  background: linear-gradient(to bottom, var(--stone-bright), var(--stone-raised));
  box-shadow: inset 0 0 0 1px var(--border-hover), 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.45);
}

/* ---------- 4. Arch ---------- */

/* The face of the arch stands proud of the wall. A very large radius on its
   two upper corners is cut down by the browser to half the width: a true
   semicircle at any size. Its head is cut into wedge-shaped stones (joints
   radiating from the centre of the arch), its sides into courses. */
.arch {
  --outer: calc(var(--half) + var(--surround));

  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 2;
  width: calc(var(--outer) * 2);
  height: calc(var(--outer) + var(--jamb));
  padding: var(--ring) var(--ring) 0;
  background:
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035), transparent 40%),
    /* joints between the wedge stones, and every other stone a shade lighter */
    repeating-conic-gradient(from 277.5deg at 50% 100%, var(--edge) 0 0.3deg, transparent 0 15deg) 0 0 / 100% var(--outer) no-repeat,
    repeating-conic-gradient(from 277.5deg at 50% 100%, rgba(255, 255, 255, 0.022) 0 15deg, transparent 0 30deg) 0 0 / 100% var(--outer) no-repeat,
    /* courses of the sides, the same two shades */
    repeating-linear-gradient(to bottom, var(--edge) 0 1px, transparent 0 var(--course)) 0 100% / 100% var(--jamb) no-repeat,
    repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.022) 0 var(--course), transparent 0 calc(var(--course) * 2)) 0 100% / 100% var(--jamb) no-repeat,
    var(--stone-raised);
  border-radius: 999px 999px 0 0;
  box-shadow:
    inset 0 0 0 1px var(--border-hover),
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 calc(8 * var(--u)) calc(36 * var(--u)) rgba(0, 0, 0, 0.6);
  transform: translateX(-50%);
}

/* A moulding cut round the face of the arch, a little in from its outer edge. */
.arch::before {
  content: '';
  position: absolute;
  inset: calc(7 * var(--u)) calc(7 * var(--u)) 0;
  border-radius: 999px 999px 0 0;
  box-shadow: inset 0 0 0 1px var(--joint), inset 0 2px 0 rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.arch-keystone {
  position: absolute;
  top: calc(-9 * var(--u));
  left: 50%;
  z-index: 1;
  width: calc(32 * var(--u));
  height: calc(var(--ring) + 15 * var(--u));
  background: linear-gradient(to bottom, var(--panel-secondary), var(--stone-raised));
  border-radius: 1px;
  /* narrower at the foot, as a keystone is */
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
  transform: translateX(-50%);
}

/* The keystone's outline (a clipped element cannot carry a border). */
.arch-keystone::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--border-hover);
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%, 0 0, 1px 1px, calc(16% + 1px) calc(100% - 1px), calc(84% - 1px) calc(100% - 1px), calc(100% - 1px) 1px, 1px 1px);
}

/* Impost blocks: where the head of the arch sits on its sides. */
.arch-impost {
  position: absolute;
  top: calc(var(--outer) - 6 * var(--u));
  z-index: 1;
  width: calc(var(--surround) + 10 * var(--u));
  height: calc(12 * var(--u));
  background: linear-gradient(to bottom, var(--panel-secondary), var(--stone-raised));
  box-shadow: inset 0 0 0 1px var(--border-hover), 0 calc(4 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, 0.45);
}

.arch-impost--left { left: calc(-5 * var(--u)); }
.arch-impost--right { right: calc(-5 * var(--u)); }

/* Two reveals, each a step further back and further from the light. */
.arch-reveal {
  height: 100%;
  padding: var(--step) var(--step) 0;
  background: linear-gradient(to bottom, var(--stone-deep), var(--stone-shade) 55%);
  border-radius: 999px 999px 0 0;
  box-shadow: inset 0 0 0 1px var(--edge), inset 0 calc(6 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.55);
}

.arch-reveal .arch-reveal {
  background: linear-gradient(to bottom, var(--stone-black), var(--stone-deep) 55%);
}

/* The opening. Its own background is the vault of the passage: the joints of
   the arch's head carried back to the vanishing point. */
.arch-opening {
  position: relative;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% var(--half), rgba(var(--lit), 0.1), transparent 62%),
    repeating-conic-gradient(from 277.5deg at 50% var(--half), var(--joint) 0 0.3deg, transparent 0 15deg),
    var(--stone-deep);
  border-radius: 999px 999px 0 0;
  box-shadow: inset 0 0 0 1px var(--edge);
}

/* ---------- 5. Corridor ---------- */

.corridor {
  position: absolute;
  inset: 0;
}

/* A side wall is a flat sheet of masonry hinged on the edge of the opening and
   turned away into the passage. Its perspective is chosen so that it vanishes
   at the centre of the arch and keeps step with the floor. */
.corridor-wall {
  --turn: acos(calc(cos(var(--tilt)) * var(--n-open) / (2 * var(--n-jamb))));
  --thick: calc(7 * var(--u)); /* upright joints are seen edge on, so they are drawn thick */

  position: absolute;
  top: var(--half);
  left: 0;
  width: calc((var(--n-far) + 60) * var(--u));
  height: var(--jamb);
  background:
    linear-gradient(90deg, transparent 30%, rgba(var(--lit), 0.1)),
    linear-gradient(90deg, rgba(0, 0, 0, 0.25), transparent 70%),
    linear-gradient(var(--edge) 1px, transparent 1px) 0 0 / 100% var(--course),
    conic-gradient(at var(--thick) 50%, transparent 270deg, var(--edge) 0) 0 0 / calc(var(--tile) * 2) calc(var(--course) * 2),
    conic-gradient(at var(--thick) 50%, transparent 270deg, var(--edge) 0) var(--tile) var(--course) / calc(var(--tile) * 2) calc(var(--course) * 2),
    var(--stone-shade);
  transform-origin: 0 0;
  transform: perspective(calc(var(--half) * tan(var(--turn)))) rotateY(var(--turn));
}

/* The other wall is the same sheet, drawn the other way round. */
.corridor-wall--right {
  right: 0;
  left: auto;
  background:
    linear-gradient(270deg, transparent 30%, rgba(var(--lit), 0.1)),
    linear-gradient(270deg, rgba(0, 0, 0, 0.25), transparent 70%),
    linear-gradient(var(--edge) 1px, transparent 1px) 0 0 / 100% var(--course),
    conic-gradient(at calc(100% - var(--thick)) 50%, var(--edge) 90deg, transparent 0) 100% 0 / calc(var(--tile) * 2) calc(var(--course) * 2),
    conic-gradient(at calc(100% - var(--thick)) 50%, var(--edge) 90deg, transparent 0) calc(100% - var(--tile)) var(--course) / calc(var(--tile) * 2) calc(var(--course) * 2),
    var(--stone-shade);
  transform-origin: 100% 0;
  transform: perspective(calc(var(--half) * tan(var(--turn)))) rotateY(calc(var(--turn) * -1));
}

/* The floor of the passage (.tiles--away): hinged on the threshold and laid
   back, lighter towards the door. */
.corridor-floor {
  --floor-light: linear-gradient(to top, transparent 35%, rgba(var(--lit), 0.12));

  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc((var(--n-far) + 60) * var(--u));
}

/* A rib across the passage at the end of each bay: the outline of the opening
   again, smaller, as it is seen further away. */
.corridor-rib,
.arch-door {
  --s: calc(1 / (1 + var(--bay) * var(--n-bay) * var(--depth)));

  position: absolute;
  top: calc((1 - var(--s)) * var(--half));
  left: calc((1 - var(--s)) * 50%);
  width: calc(var(--s) * 100%);
  height: calc(var(--s) * 100%);
  border-radius: 999px 999px 0 0;
}

/* Each rib has a little thickness, and the passage is darker beyond it. */
.corridor-rib {
  background: rgba(4, 5, 8, 0.16);
  box-shadow:
    inset 0 0 0 1px var(--border-hover),
    inset 0 0 0 calc(6 * var(--u) * var(--s)) rgba(30, 34, 38, 0.55),
    inset 0 0 0 calc(6 * var(--u) * var(--s) + 1px) var(--edge);
}

/* ---------- 6. Door: the entry ---------- */

/* The entry stands at the end of the passage: a panel of the app, with a thin
   seam of light around it. */
.arch-door {
  --bay: var(--bays);

  display: flex;
  flex-direction: column;
  align-items: center;
  /* the top padding keeps the emblem clear of the curve of the door's head */
  padding: calc(var(--s) * var(--half) * 0.3) 16px 20px;
  container-type: inline-size;
  background: linear-gradient(to bottom, var(--panel-secondary), var(--panel) 46%);
  box-shadow:
    inset 0 0 0 1px var(--border-hover),
    0 0 0 1px rgba(var(--lit), 0.28),
    0 0 calc(26 * var(--u)) rgba(var(--lit), 0.16),
    0 0 calc(80 * var(--u)) rgba(var(--lit), 0.08);
  text-align: center;
  transition: box-shadow 0.5s ease;
}

/* Pointing at the action brings the light up: round the door, and on the
   floor of the forecourt. */
.archway:has(.button-primary:hover) .arch-door,
.archway:has(.button-primary:focus-visible) .arch-door {
  box-shadow:
    inset 0 0 0 1px var(--border-hover),
    0 0 0 1px rgba(var(--lit), 0.5),
    0 0 calc(30 * var(--u)) rgba(var(--lit), 0.28),
    0 0 calc(90 * var(--u)) rgba(var(--lit), 0.14);
}

.archway:has(.button-primary:hover) .forecourt-light,
.archway:has(.button-primary:focus-visible) .forecourt-light {
  opacity: 1;
}

/* The entry scales with the scene, but never below a readable size.

   The emblem: the Valen helmet alone, centred in the space between the head
   of the door and the headline. The image is the logo file as supplied; over it lie two layers
   cut to the helmet's own outline (the same file, used as a mask), so nothing
   shows outside the helmet. */
.login-emblem {
  position: relative;
  flex: none;
  height: clamp(40px, calc(52 * var(--u)), 60px);
  aspect-ratio: 434 / 704; /* the logo's own proportions */
  margin: auto 0;
  /* a little depth: the emblem stands just off the door */
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.1)) drop-shadow(0 3px 5px rgba(0, 0, 0, 0.6));
}

.login-emblem img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Metal: a fixed sheen, lighter where the light falls from the upper left and
   darker in the lower right, so the grey reads as silver even at rest. */
.login-emblem-metal {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.14) 34%, rgba(4, 5, 8, 0.2) 68%, rgba(255, 255, 255, 0.16) 100%);
  -webkit-mask: url('/assets/valen-logo.png') center / 100% 100% no-repeat;
  mask: url('/assets/valen-logo.png') center / 100% 100% no-repeat;
}

/* Glint: a narrow slanted band of light that crosses the helmet once, quickly,
   and then rests for several seconds before the next. */
.login-emblem-metal::before {
  content: '';
  position: absolute;
  top: -15%;
  bottom: -15%;
  left: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24) 30%, rgba(255, 255, 255, 0.62) 50%, rgba(255, 255, 255, 0.24) 70%, transparent);
  transform: translateX(-170%) skewX(-24deg);
  /* the negative delay brings the first glint about a second and a half after the page opens */
  animation: emblem-glint 8s ease-in-out -5.5s infinite;
}

@keyframes emblem-glint {
  0%, 88% { transform: translateX(-170%) skewX(-24deg); }
  100%    { transform: translateX(310%) skewX(-24deg); }
}

.login-title {
  margin: 0;
  font-size: max(22px, calc(26 * var(--u)));
  line-height: 1.25;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}

.login-text {
  margin: 6px 0 0;
  font-size: max(var(--fs-nav), calc(13.5 * var(--u)));
  line-height: 1.5;
  font-weight: 400;
  color: var(--text-secondary);
}

/* Solid, neutral primary action. */
.button-primary {
  align-self: stretch;
  height: max(40px, calc(40 * var(--u)));
  margin-top: 22px;
  background: var(--text);
  border-radius: var(--radius);
  font-size: max(var(--fs-title), calc(14.5 * var(--u)));
  font-weight: 500;
  color: var(--background);
  transition: background-color 0.12s ease;
}

.button-primary:hover {
  background: #DADCE0;
}

/* Under the button: the wallet signed in, but is not allowed to use Valen. */
.login-error {
  margin: 10px 0 0;
  font-size: var(--fs-base);
  line-height: 18px;
  font-weight: 400;
  color: var(--red);
}

/* In a narrower door the supporting line is set a size smaller, to stay on one line. */
@container (max-width: 218px) {
  .login-text {
    font-size: var(--fs-base);
  }
}

/* ---------- 7. Forecourt ---------- */

/* The floor in front of the wall, in the same perspective as the passage: its
   joints run on through the threshold. It runs the whole width of the page
   and out of the bottom of it, fading as it comes towards the viewer. */
.forecourt {
  position: absolute;
  top: calc(610 * var(--u));
  right: calc(-1040 * var(--u));
  left: calc(-1040 * var(--u));
  height: calc(460 * var(--u));
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 10%, rgba(0, 0, 0, 0.5) 34%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 10%, rgba(0, 0, 0, 0.5) 34%, transparent 78%);
}

.forecourt-floor {
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--tile) * 64);
  height: calc(var(--tile) * 13);
  margin-left: calc(var(--tile) * -32);
}

/* A border course along the foot of the wall, one tile deep: a shade lighter
   than the paving, in the shadow of the wall, with a firm joint at its edge. */
.forecourt-kerb {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: var(--tile);
  background:
    linear-gradient(to bottom, rgba(4, 5, 8, 0.55), transparent 85%),
    rgba(255, 255, 255, 0.04);
  box-shadow: 0 calc(4 * var(--u)) 0 var(--border-hover);
}

/* The faint light of the niches, lying on the floor below each one. */
.forecourt-glow {
  --from: calc((var(--n-first) + var(--n-pier) + (var(--n-pitch) - var(--n-pier)) / 2 - 62) * var(--u));
  --pools: repeating-linear-gradient(var(--towards), #000 0 calc(124 * var(--u)), transparent 0 calc(var(--n-pitch) * var(--u)));

  position: absolute;
  top: 0;
  width: calc(50% - var(--from));
  height: 100%;
  background: linear-gradient(to bottom, rgba(var(--lit), 0.1), transparent 34%);
  -webkit-mask-image: var(--pools);
  mask-image: var(--pools);
}

.forecourt-glow--right {
  --towards: 90deg;

  left: calc(50% + var(--from));
}

.forecourt-glow--left {
  --towards: 270deg;

  right: calc(50% + var(--from));
}

/* Light from the passage, lying on the floor in front of the opening. */
.forecourt-light {
  position: absolute;
  top: 0;
  left: calc(50% - var(--half));
  width: var(--open);
  height: 100%;
  background: linear-gradient(to bottom, rgba(var(--lit), 0.24), transparent 46%);
  opacity: 0.6;
  transition: opacity 0.5s ease;
}

/* A threshold slab, one tile deep, the width of the arch. */
.forecourt-slab {
  position: absolute;
  top: 0;
  left: calc(50% - var(--half) - var(--surround));
  width: calc(var(--open) + var(--surround) * 2);
  height: var(--tile);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.09));
  /* its front edge catches the light, and throws a shadow on the floor below */
  box-shadow:
    inset 0 0 0 1px var(--border-hover),
    inset 0 calc(-5 * var(--u)) 0 rgba(255, 255, 255, 0.1),
    0 calc(16 * var(--u)) 0 rgba(0, 0, 0, 0.6),
    0 calc(16 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.5);
}

/* ---------- 8. Smaller screens ---------- */

/* On a phone the passage is two bays shorter, so the door stays large enough
   to use. (The scene already sizes itself by the arch: see --u.) */
@media (max-width: 760px) {
  .archway {
    --bays: 2;
  }

  .corridor-rib:nth-child(n + 5) {
    display: none;
  }

  .arch-door {
    padding: calc(var(--s) * var(--half) * 0.3) 12px 14px;
  }

  .button-primary {
    margin-top: 14px;
  }
}

/* ---------- 9. Wallet selection (modal) ---------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 9, 0.7);
}

.modal-panel {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 0 8px 8px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 4px 0 8px;
}

.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--text-secondary);
  transition: color 0.12s ease, background-color 0.12s ease;
}

.modal-close:hover {
  background: var(--panel-secondary);
  color: var(--text);
}

.wallet-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wallet-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 48px;
  padding: 0 12px 0 10px;
  background: var(--panel-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-nav);
  text-align: left;
  transition: border-color 0.12s ease, opacity 0.12s ease;
}

.wallet-option:hover:not(:disabled) {
  border-color: var(--border-hover);
}

.wallet-option:disabled {
  cursor: default;
  opacity: 0.5;
}

/* The wallet being connected stays fully visible while the others dim. */
.wallet-option.is-busy {
  border-color: var(--border-hover);
  opacity: 1;
}

.wallet-option-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.wallet-option-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wallet-option-state {
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--text-secondary);
  white-space: nowrap;
}

.wallet-empty {
  padding: 4px 8px 8px;
  font-weight: 400;
  color: var(--text-secondary);
}

.wallet-empty p {
  margin: 0 0 12px;
}

.wallet-install {
  display: flex;
  gap: 8px;
}

.wallet-install a {
  flex: 1;
  height: 32px;
  background: var(--panel-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-weight: 500;
  line-height: 30px;
  color: var(--text);
  text-align: center;
  transition: border-color 0.12s ease;
}

.wallet-install a:hover {
  border-color: var(--border-hover);
}

.modal-status {
  margin: 8px 8px 4px;
  font-weight: 400;
  color: var(--text-secondary);
}

.modal-status.is-error {
  color: var(--red);
}


/* The page is complete without motion: the emblem keeps its fixed sheen and
   loses only the passing glint. */
@media (prefers-reduced-motion: reduce) {
  .login *,
  .login *::before,
  .login *::after {
    transition: none !important;
  }

  .login-emblem-metal::before {
    display: none;
    animation: none;
  }
}