/*
 * Editorial statement — a very large serif line placed directly below the gallery.
 *
 * Markup: <p class="statement-text" data-st-en="..." data-st-ar="...">Let’s build <em>something</em> together.</p>
 * js/statement.js splits it into per-word / per-character spans (.st-word / .st-char)
 * and drives each one's opacity + transform from the SCROLL POSITION (scrubbed in both
 * directions; nothing autoplays). This file only defines the resting look, so no CSS
 * transition may be set on .st-char: it would fight the scrubbing.
 *
 * Without JS (or with reduced motion) the plain text is shown as-is, <em> in italic.
 *
 * Tuning:
 *   --statement-font / --statement-font-ar   the serif families (Instrument Serif and
 *                      Amiri are loaded in index.html)
 *   font-size clamp    size of the line (scales with the viewport)
 *   ENTER / DONE / CONFIG   when and how the letters reveal: top of js/statement.js
 */

.statement {
  --statement-font: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --statement-font-ar: 'Amiri', 'Noto Naskh Arabic', 'Times New Roman', serif;

  position: relative;
  width: 100%;
  padding-block: clamp(6rem, 17vw, 15rem);   /* generous whitespace above and below */
  padding-inline: var(--container-pad);
  overflow: hidden;                           /* tilted letters can never cause sideways scroll */
  background: var(--paper);
  color: var(--ink);
  text-align: center;
}

.statement-inner {
  max-width: 2000px;
  margin-inline: auto;
}

.statement-text {
  margin: 0;
  direction: ltr;
  font-family: var(--statement-font);
  font-size: clamp(2.4rem, 6.6vw, 8.5rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}

.statement-text em {
  font-style: italic;
}

/* ---- Arabic version (html[dir="rtl"], set by the language switcher) ----
   Arabic script has no italics, needs joined letters (so no negative tracking and the
   reveal works per word instead of per letter) and more line height. The emphasised
   word is set bold instead of italic. */
html[dir="rtl"] .statement-text {
  direction: rtl;
  font-family: var(--statement-font-ar);
  font-size: clamp(2rem, 6.4vw, 7rem);
  line-height: 1.4;
  letter-spacing: normal;
  /* Sit on the right side of the page instead of the centre: right-aligned, with a
     small inset from the edge (padding-right is physical, so it is the right in RTL too).
     Raise the padding to pull it back toward the centre, lower it to push it further right. */
  text-align: right;
  padding-right: clamp(0rem, 4vw, 6rem);
}

html[dir="rtl"] .statement-text em,
html[dir="rtl"] .st-word--italic {
  font-style: normal;
  font-weight: 700;
}

/* One elegant line on desktop; on smaller screens it wraps between words. */
@media (min-width: 900px) {
  .statement-text {
    white-space: nowrap;
  }
}

/* Screen-reader copy of the sentence (the visual copy is split into letters). */
.statement-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Words and letters (created by js/statement.js) ---- */

.st-word {
  display: inline-block;
  white-space: nowrap;                        /* a word never breaks in the middle */
}

.st-word--italic {
  font-style: italic;
}

/* Hidden until the script has written the current scroll state (it does so before the
   first paint). No transition here on purpose: the values change with the scroll. */
.st-char {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.3em, 0) scale(0.88);
  transform-origin: 50% 80%;
}

/* Only promote letters to their own layer while the section is near the screen. */
.statement.is-active .st-char {
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .st-char {
    opacity: 1;
    transform: none;
    transition: none;
  }
}