/* ---------- Work intro (strategic text) ----------
   Sits between the welcome video (.hero) and "Selected Work" (.work), as
   that section's opening paragraph — not a standalone "Info" section (that
   one doesn't exist yet; the nav "Info" link is a placeholder until it's
   built, see index.html). One flowing paragraph, same size as the
   "Selected Work" heading. On the shared 12-column grid (css/grid.css), no
   padding/gap tweaks of its own. */
.work-intro {
  /* Same gap under the video that "Selected Work" used to have there
     (--content-top-space, css/base.css). */
  padding-top: var(--content-top-space);
  /* No padding under it: the gap down to the line above "Work" is .work's padding-top (css/work.css), the
     same one Info has between its headline and its line. */
  padding-bottom: 0;
}

.work-intro-text {
  grid-column: 1 / -1;
  font-family: var(--font-body);
  /* Same in every property as the "Selected Work" heading (.work-title,
     css/work.css) and the project pages' headline (.project-title) —
     client request, change them together. The colour is inherited from
     body's animated `color`, so it follows the theme fade with no
     transition of its own. */
  font-size: clamp(28px, 2.5vw, 56px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}


/* 046: from 768 px (where the cards keep their desktop columns, css/work.css) the paragraph is split like the
   work grid under it: the question in columns 1-5, the answer from column 6 (where BNE Merch starts) to the end.
   The inner grid has the same 12 columns and gutter as .grid, so the columns line up with the cards. Below
   768 px both blocks stack. */
.work-intro-answer {
  display: block;
  /* Phones: a blank line (one line of the text) between the question and the answer; from 768 px the grid below
     lays them out and the margin is gone. */
  margin-top: 1.1em;
}

@media (min-width: 768px) {
  .work-intro-text {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--grid-gutter);
    /* each block keeps its own height: the question's reserved height is measured on the block itself */
    align-items: start;
  }

  .work-intro-text .work-intro-question {
    grid-column: 1 / span 5;
  }

  .work-intro-text .work-intro-answer {
    margin-top: 0;
    grid-column: 6 / span 7;
  }
}

/* ---------- Rotating last word of the question (042, js/rotating-word.js) ----------
   "What do you want to <word>?": the word and its "?" are one unit (nowrap, so they never split across
   lines). The script splits it into letters (.rw-char, --i = position) and toggles .is-out / .is-in on
   the unit: each letter rises out (opacity, a little blur) staggered left to right, then the next phrase
   comes in the same way. --rw-step (set by the script) shrinks the stagger for long phrases so a change
   never lasts longer than with a short word. No rotation, no bounce. Without JavaScript the unit is just
   the text "say?". The question block is display:block: the script gives it the height of the tallest
   phrase, so nothing below it moves. */
.work-intro-question {
  display: block;
}

/* 044: the text hidden for screen readers is not selectable, so copying the paragraph gives the visible
   word once (it stays in the accessibility tree). */
.work-intro-question .visually-hidden {
  -webkit-user-select: none;
  user-select: none;
}

.rotating-word {
  display: inline-block;
  white-space: nowrap;
  --rw-dur: 300ms;
  --rw-rise: 0.35em;
}

/* 045: the changing word is grey, the "?" and the rest keep the text colour: it says "this part changes" without
   adding anything. Retouch: a lighter grey (#8c8c8c in both themes) so it stands out more from the text colour. The "?" is left without a colour rule so it
   inherits the paragraph's animated colour. The 0.3 s fade is the one of the Info labels. */
.rw-word {
  color: #8c8c8c;
  transition: color 0.3s ease;
}

.rw-char {
  display: inline-block;
}

.rotating-word.is-out .rw-char {
  animation: rw-out var(--rw-dur) cubic-bezier(0.4, 0, 1, 1) both;
  animation-delay: calc(var(--i) * var(--rw-step, 40ms));
}

.rotating-word.is-in .rw-char {
  animation: rw-in var(--rw-dur) cubic-bezier(0, 0, 0.2, 1) both;
  animation-delay: calc(var(--i) * var(--rw-step, 40ms));
}

@keyframes rw-out {
  from { opacity: 1; transform: translateY(0); filter: blur(0); }
  to { opacity: 0; transform: translateY(calc(var(--rw-rise) * -1)); filter: blur(4px); }
}

@keyframes rw-in {
  from { opacity: 0; transform: translateY(var(--rw-rise)); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Reduced motion: no rise, no blur, no stagger; the whole word fades out and in with the same rhythm. */
@media (prefers-reduced-motion: reduce) {
  .rotating-word.is-out .rw-char {
    animation: rw-fade-out 450ms linear both;
    animation-delay: 0s;
  }

  .rotating-word.is-in .rw-char {
    animation: rw-fade-in 450ms linear both;
    animation-delay: 0s;
  }

  @keyframes rw-fade-out { from { opacity: 1; } to { opacity: 0; } }
  @keyframes rw-fade-in { from { opacity: 0; } to { opacity: 1; } }
}