/* ============================================================
   SCREEN 04 — a note from us.

   The page turns ivory here. Not a sheet laid on the invitation and
   not a card floated over it: the window itself is the section, edge
   to edge, and the words stand on it directly.

   The lilies are the supplied artwork. It was drawn as one tall sheet
   with flowers at its head and its foot and the monogram between them,
   and as one picture it can only ever be a rectangle on the page — so
   it is carried in the three pieces the page places for itself. Each
   piece was flat-fielded to this exact ivory when it was cut and
   feathered to nothing on the edges that stay inside the window, so
   there is no boundary anywhere: the head bloom grows in over the
   upper left and runs off both those edges, the foot bloom grows in
   over the lower right and runs off those. Nothing is cropped by a
   frame — they simply leave the window.

     1. Tokens and ground
     2. The screen
     3. The two blooms
     4. The words
     5. The signature
     6. Wider screens
     7. Entrance
     8. Reduced motion
   ============================================================ */

/* ---------- 1. Tokens and ground -------------------------- */
:root {
  /* The artwork's own ivory, measured off its empty ground. Every
     piece cut from it was corrected on to exactly this value, so the
     page and the drawing are one surface. */
  --note-ground: #F0E7DF;
}

html[data-ground="note"],
html[data-ground="note"] body { background: var(--note-ground); }

/* ---------- 2. The screen --------------------------------- */
.screen--note {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100svh;
  overflow: hidden;
  overflow: clip;
  cursor: default;
  background: var(--note-ground);
  color: var(--ink-warm);

  display: grid;
  align-content: center;
  justify-items: center;
  padding:
    clamp(7rem, 20svh, 12rem)
    var(--pad)
    clamp(8rem, 22svh, 13rem);
}

/* ---------- 3. The two blooms ----------------------------- */
/* Placed against the window's own corners and pulled past them, so the
   stems are always cut by the edge of the screen rather than by an edge
   of their own. Nothing is drawn around them and nothing is behind
   them: the page's ivory is the ground the drawing was made on. */
.note__bloom {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
.note__bloom img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

.note__bloom--head {
  top: calc(-1 * clamp(1.5rem, 5svh, 4.5rem));
  left: calc(-1 * clamp(2.5rem, 11vw, 9rem));
  width: clamp(15rem, 52vw, 31rem);
}

.note__bloom--foot {
  right: calc(-1 * clamp(2rem, 9vw, 8rem));
  bottom: calc(-1 * clamp(1rem, 3svh, 3rem));
  width: clamp(13.5rem, 47vw, 28rem);
}

/* ---------- 4. The words ---------------------------------- */
/* One measure, held in the middle of the window with room around it.
   The blooms come in at two opposite corners, so the column keeps the
   diagonal between them clear. */
.note__text {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  text-align: left;
}

.note__head {
  font-family: var(--ui);
  font-weight: 400;
  font-size: var(--t-note);
  letter-spacing: .42em;
  text-indent: .42em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 clamp(1.75rem, 5vw, 2.5rem);
}

.note__p {
  font-family: var(--display);
  font-weight: 400;
  font-variation-settings: 'opsz' 11;
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  line-height: 1.68;
  letter-spacing: .004em;
  color: var(--ink-soft);
  text-wrap: pretty;
  margin: 0;
}
.note__p + .note__p { margin-top: 1.05em; }

/* A quieter, later thought, and the only line here that is spoken:
   it is set as a quotation, in italic, with its marks hung back into
   the margin so the first letter still starts the measure. */
.note__close {
  margin: clamp(2.5rem, 7vw, 3.75rem) 0 0;
  padding: 0;
  border: 0;
}
.note__close p {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-variation-settings: 'opsz' 24;
  font-size: clamp(1.0625rem, 3vw, 1.45rem);
  line-height: 1.55;
  letter-spacing: .006em;
  color: var(--ink-warm);
  text-wrap: pretty;
  margin: 0;
  text-indent: -.42em;
  hanging-punctuation: first;
}

/* ---------- 5. The signature ------------------------------ */
/* The monogram, and the two names under it at the size of a signature
   rather than of a title — it closes the section, it does not open
   one. The mark is the artwork's own, keyed off the ivory it was
   drawn on, so it carries no ground of its own on to the page. */
.note__sign {
  margin: clamp(3rem, 9svh, 5rem) 0 0;
}

.note__mark {
  display: block;
  width: clamp(7.5rem, 26vw, 11rem);
}
.note__mark img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
}

/* Set as it would be written on a card: one name, the ampersand, the
   other — three lines under the mark, at the size of a signature. */
.note__names {
  font-family: var(--ui);
  font-weight: 400;
  font-size: var(--t-note);
  line-height: 1.9;
  color: var(--ink-soft);
  margin: clamp(1.2rem, 4vw, 1.8rem) 0 0;
}
.note__name {
  display: block;
  letter-spacing: .34em;
  text-indent: .34em;
  text-transform: uppercase;
}
.note__amp {
  display: block;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35em;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--ink-faint);
  margin: .1em 0 .16em;
}

/* ---------- 6. Wider screens ------------------------------ */
@media (min-width: 48rem) {
  .note__text { max-width: 38rem; }
}
@media (min-width: 75rem) {
  .note__text { max-width: 42rem; }
  .note__p    { font-size: 1.3rem; }
}

/* ---------- 7. Entrance ----------------------------------- */
/* The blooms settle first, then the words in reading order. Nothing
   moves after that: this is the page the invitation ends on. */
.note__bloom {
  opacity: 0;
  transition: opacity 1600ms cubic-bezier(.32,.08,.24,1);
}
.screen--note.is-in .note__bloom { opacity: 1; }
.note__bloom--foot { transition-delay: 220ms; }

.note__text > * {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 1100ms cubic-bezier(.32,.08,.24,1) calc(600ms + var(--i, 0) * 220ms),
    transform 1100ms cubic-bezier(.32,.08,.24,1) calc(600ms + var(--i, 0) * 220ms);
}
.screen--note.is-in .note__text > * { opacity: 1; transform: none; }

/* ---------- 8. Reduced motion ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  .note__bloom,
  .note__text > * {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    transform: none !important;
  }
  .screen--note.is-in .note__bloom,
  .screen--note.is-in .note__text > * { opacity: 1; }
}