/* ==========================================================================
   FRONTLINE21 — THE TEN DECLARATIONS.

   Ten scenes under the MANifesto's code, one every three seconds, thirty
   seconds for a cycle: two for each discipline, each carrying one Frontline21
   declaration written for this sequence. It is the width and the height of
   the screen, and it is the one place on the site where the photograph is
   allowed through the lettering.

   FULL SCREEN INSIDE THE PAGE
   Height is 100svh, the small viewport unit, so a phone's browser chrome
   never crops the picture and never hides the controls. Nothing here calls
   the Fullscreen API, nothing holds the scroll, and the section is an
   ordinary block in the flow: a man scrolls past it exactly as he scrolls
   past anything else. On a short landscape phone a floor keeps the type from
   being squeezed into a letterbox.

   THE DECLARATION IS THE SUBJECT
   Centred in the frame, horizontally and vertically, and set from the length
   of its longest authored line rather than from a caption scale: the
   generator writes --fs-wide and --fs-narrow per frame so every block lands
   at about sixty five percent of the picture's width, whatever its wording.
   The height comes from the phrase breaks, which are authored.

   THERE IS NO PANEL
   The picture is not covered. What sits under the words is a wide, soft
   grade across the middle of the frame — dark enough that red lettering
   holds against a bright highlight, open enough that the faces, the hands
   and the work are all still there. The grade is on the image layer, under
   the type and under the controls, so the transient registration slip on the
   plate cannot move the words.

   THE INK SHOWS THE PICTURE THROUGH
   ink.css paints the printed surface by clipping a density field multiplied
   into the identity red onto the glyphs. Here the red carries an alpha, so
   the picture reads through the letter itself while the wear stays the wear.
   This is the only rule in the project that does that, and it is scoped to
   this carousel: nothing else on the site takes red type below full opacity.
   ========================================================================== */

.declarations {
  position: relative;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  background: var(--ink-deep);
}

.carousel--wall { width: 100%; }

.carousel__stage--wall {
  aspect-ratio: auto;
  height: 100svh;
  /* A short viewport still gets a picture rather than a slot, and a very tall
     one does not turn the sequence into a corridor. */
  min-height: 460px;
  max-height: 1100px;
  border: 0;
  border-left: 0;
  border-right: 0;
}

/* --- The picture ---------------------------------------------------------- */

.frame--wall .frame__plate img {
  object-position: var(--focal-l, 50% 42%);
}

@media (max-width: 767px) {
  .frame--wall .frame__plate img { object-position: var(--focal-p, 50% 42%); }
}

/* The grade. Two soft passes: a vertical one that holds the top and the foot
   of the frame, and a wide elliptical one centred where the words are. Both
   are on the plate, so they travel with the picture and not with the type. */
.frame--wall .frame__plate::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 78% at 50% 50%,
      rgba(9, 11, 11, 0.62) 0%,
      rgba(9, 11, 11, 0.44) 46%,
      rgba(9, 11, 11, 0.10) 78%,
      rgba(9, 11, 11, 0) 100%),
    linear-gradient(to bottom,
      rgba(9, 11, 11, 0.46) 0%,
      rgba(9, 11, 11, 0.06) 26%,
      rgba(9, 11, 11, 0.06) 70%,
      rgba(9, 11, 11, 0.52) 100%);
}

/* THE ADVANCE, RIGHT TO LEFT.

   The sequence moves the way the homepage strip moves: the arriving scene
   comes in from the right and settles. It is the picture that travels, not
   the words — the declaration cross fades in place so it has the whole of
   its three seconds to land, and nothing about the type or the controls is
   moved by a photographic behaviour. The plate is held five percent wide on
   each side so the travel never exposes an edge, and the whole movement is
   inside the interval rather than added to it. */
.frame--wall .frame__plate {
  left: -5%;
  right: -5%;
}

@keyframes f21-wall-advance {
  from { transform: translateX(4.2%); }
  to   { transform: translateX(0); }
}

.frame--wall.is-on .frame__plate {
  animation: f21-wall-advance 760ms var(--ease-out) both;
}

/* --- The declaration ------------------------------------------------------ */

.frame__truth--wall {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.4vh, 30px);
  /* No panel: the grade above is the only thing between the words and the
     photograph. */
  background: none;
  padding: clamp(56px, 9vh, 120px) var(--margin);
  text-align: center;
  line-height: 0.98;
  letter-spacing: -0.005em;
}

.frame__truth--wall .frame__discipline {
  font-family: var(--font-display);
  font-size: clamp(10px, 1.05vw, 14px);
  font-size: clamp(10px, 1.05cqw, 14px);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1;
  color: var(--paper-dim);
}

/* The size is on the printed surface itself, not on the two line sets, for a
   reason that is not cosmetic: ink.js measures the first .ink child of a
   [data-ink] element to choose the print tier and the tile size. With a size
   on each set, the phone was being measured against the desktop's line set
   and the desktop against the phone's, and the tier came out of the wrong
   one. One size per breakpoint on the host, inherited by whichever set is
   drawn, and the measurement is of the type a man is actually looking at. */
.frame__truth--wall {
  font-size: var(--fs-wide-vw, 8vw);
  font-size: var(--fs-wide, 8cqw);
}
.frame__truth--wall .frame__wide,
.frame__truth--wall .frame__narrow { font-size: inherit; }

.frame__truth--wall .ink {
  display: block;
  max-width: 100%;
}

.frame__truth--wall .ink span {
  display: block;
}

/* The local permission: the picture through the letter. The printed tiers in
   ink.css fill the glyph with the density field multiplied into
   --ink-red-print, so giving that token an alpha here is the whole change —
   the wear, the tier and the material are untouched, and no other red type on
   the site is affected. The untreated fallback below the print tiers takes
   the same value, so a small phone sees the same relationship. */
.frame__truth--wall {
  --ink-red-print: rgba(220, 34, 39, 0.88);
  --ink-red: rgba(220, 34, 39, 0.88);
}

/* Which of the two authored breaks is drawn. The stage is the container, and
   at a phone's portrait ratio the narrow set is the one that fits. */
.frame--wall .frame__narrow { display: none; }

@media (max-width: 767px) {
  .frame--wall .frame__wide { display: none; }
  .frame--wall .frame__narrow { display: block; }
  .frame__truth--wall {
    font-size: var(--fs-narrow-vw, 12vw);
    font-size: var(--fs-narrow, 12cqw);
    gap: clamp(10px, 1.8vh, 20px);
  }
}

/* Enlarged text. The declaration itself is set in container-width units, so
   a text-size setting cannot make it overflow; the label above it is in
   pixels and can. If the two together ever exceed the frame, the block
   scrolls inside its own padding rather than being clipped — and the scroll
   is allowed to chain, so reaching the end of it continues down the page.
   Nothing here holds a wheel or a swipe. */
.frame__truth--wall {
  overflow-y: auto;
  overscroll-behavior: auto;
  min-height: 0;
  scrollbar-width: none;
}
.frame__truth--wall::-webkit-scrollbar { display: none; }

/* --- The controls --------------------------------------------------------- */

.carousel__controls--wall {
  top: auto;
  right: auto;
  left: 50%;
  bottom: clamp(18px, 4vh, 44px);
  transform: translateX(-50%);
}

/* Reduced motion: carousel.js never starts the clock and the controls stay,
   so a man moves through the ten himself. The cut loses its cross fade too,
   because a fade is the motion here. */
@media (prefers-reduced-motion: reduce) {
  .frame--wall { transition: none; }
  .frame--wall.is-on .frame__plate { animation: none; }
}