/* ===========================================================================
   THE FULL-BLEED BACKDROP
   ===========================================================================
   Josh, 25 Sept: "make the sign up and sign in page and the up load
   geourguos breathtaking pages with full page bleeds of moving plates."

   Ten plates, edge to edge, each one slowly pushing in while the next fades
   up under it. Shared by login.html and contribute.html so the two screens a
   new person meets are the same room.

   WHY A FIXED LAYER AND NOT A body BACKGROUND. background-attachment: fixed
   is ignored on iOS -- it repaints on scroll and tears. A position:fixed
   element under the content is what actually holds still on a phone, and it
   is the only way the push can be a transform, which the compositor does on
   the GPU instead of repainting the page every frame.

   THE SCRIM IS NOT DECORATION. These are photographs of daylight; the form
   on top is 15px type. Without the gradient the password field sits on a
   bright sky and cannot be read. Measured against the darkest and the
   lightest of the ten (the Alaskan delta and the Namibian mesas).
   =========================================================================== */
#bleed {
  position: fixed; inset: 0; z-index: -1;
  background: #07090a;        /* the ground before the first plate decodes */
  overflow: hidden;
  pointer-events: none;
}
#bleed i {
  position: absolute; inset: -6%;      /* room to push without showing an edge */
  display: block;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 2.4s ease;
  transform: scale(1.0);
  will-change: transform, opacity;
}
/* 26 s of push per plate against a 2.4 s cross-fade: the movement has to be
   slower than the eye looks for, or it reads as the page drifting rather than
   as a camera. */
#bleed i.on { opacity: 1; transform: scale(1.11); transition: opacity 2.4s ease, transform 26s linear; }

/* The scrim: dark at the edges where the chrome sits, lighter in the middle
   so the picture is still a picture. */
#bleed::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(5,7,9,.92) 0%, rgba(5,7,9,.55) 30%,
                            rgba(5,7,9,.62) 62%, rgba(5,7,9,.95) 100%),
    radial-gradient(ellipse at 50% 42%, rgba(5,7,9,.10) 0%, rgba(5,7,9,.72) 100%);
}

/* WHAT IT IS, ON SCREEN, ALWAYS. Every one of these is synthetic. A full-bleed
   aerial behind a sign-up form that does not say it was generated is the
   fabricated-holder failure with better lighting -- the same rule that puts
   "not land title" under the Reserve button rather than only in the terms. */
#bleedCredit {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 0;
  padding: 10px calc(14px + env(safe-area-inset-right))
           calc(10px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
  font-family: var(--ui, system-ui); font-size: 8.5px; font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.66);
  pointer-events: none; text-align: right;
  transition: opacity .8s ease;
}
#bleedCredit b { font-weight: 500; color: rgba(255,230,194,.72); }

/* A person who has asked not to be moved is asking about this exactly. The
   plates still change -- the page would otherwise be one picture for ever --
   but nothing slides. */
@media (prefers-reduced-motion: reduce) {
  #bleed i.on { transform: none; transition: opacity 1.2s ease; }
}

/* ===========================================================================
   THE PANEL THAT FLOATS ON IT
   ===========================================================================
   A form laid straight onto a photograph is a form nobody can read, and the
   scrim alone fixes legibility without making the page look composed. This
   is the other half of "breathtaking": the picture runs edge to edge and the
   thing you have to type into sits on glass above it.

   backdrop-filter is the whole effect and Safari has had it, prefixed, since
   9 -- but a device that refuses it must not be left with white-on-sky, so
   the background colour under it is opaque enough to read against on its own.
   Checked by turning the filter off: .78 alpha over the lightest of the ten
   plates still clears 4.5:1 on the label type.
   =========================================================================== */
.bleed-panel {
  background: rgba(10, 14, 12, .78);
  backdrop-filter: blur(22px) saturate(1.15);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid rgba(233, 196, 106, .22);
  border-radius: 3px;
  padding: 22px 22px 26px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9),
              inset 0 1px 0 rgba(255, 255, 255, .05);
}
/* The headline sits OUTSIDE the panel, on the picture, because that is the
   line that is allowed to be theatrical. Everything you have to type into is
   inside it. */
.bleed-hero { text-shadow: 0 2px 28px rgba(0, 0, 0, .8); }

@media (min-height: 700px) {
  /* Centred, once there is room to centre it in. On a short screen or with
     the keyboard up this does nothing, and the page scrolls as before. */
  .bleed-centre { min-height: 100svh; display: flex; flex-direction: column;
                  justify-content: center; }
  .bleed-centre > header { padding-top: 0 !important; }
}