/* HOMEPAGE 1, the first visual: sizes on top of home.css's .hero rules.

   THE LOCKUP. The slogan large and heavy; the project's full title under it
   in plain title case, a size step down at a lighter weight (1 Oct,
   Jacquelyn: no capitals, and the title larger and a little lower).

   FARMER CHEN. Bottom right, no rule and no box: her words, then her name,
   then where and when, each on its own line.

   THE INTRO (18 Oct). One take, about three seconds, slow out of the gate
   and slower to land (one curve for all of it, --hero-ease):
     0     the photograph, pushed in 9% toward the line, settles back over 3.2 s
     .35   the wash comes up under where the words will be
     .55   the claim rises word by word
     1.15  the project's title
     1.7   Farmer Chen's words, a line at a time, then her name
   .is-pre is the first frame and .is-on plays it (index.html sets both). */

.hero__head { max-width: 100%; }

/* one line from about 1100px; below that it breaks after "a".
   18 Oct (owner, option A of five): the display cut. Inter carries an optical
   size axis (opsz 14-32) and the 32 end is drawn for type this big — tighter
   apertures, a closer fit. The browser's own optical sizing would reach it at
   this size anyway; pinning it in font-variation-settings means the line does
   not change if font-optical-sizing is ever turned off. With it, the weight
   goes 750 -> 820 and the tracking -.034em -> -.046em, so the words lock
   together instead of standing apart, and the line sets about 6% larger.
   wght rides in the same declaration (it wins over font-weight for the
   variable face); font-weight is what a fallback face would use. */
.hero__claim {
  font-size: clamp(2.5rem, .9rem + 4.4vw, 4.9rem);
  line-height: 1.02;
  font-weight: 800;
  font-variation-settings: "opsz" 32, "wght" 820;
  letter-spacing: -.046em;
  text-shadow: 0 2px 28px rgb(7 11 9 / .45);
}

.hero__caption {
  margin: clamp(.75rem, .45rem + .8vw, 1.25rem) 0 0;
  max-width: 40rem;
  font-size: clamp(1.0625rem, .9rem + .55vw, 1.4rem);
  font-weight: 450; line-height: 1.35; letter-spacing: -.008em;
  color: rgb(255 255 255 / .9);
  text-wrap: balance;
  text-shadow: 0 1px 18px rgb(7 11 9 / .6), 0 0 2px rgb(7 11 9 / .25);
}
/* the phrase's own break (8 Oct: "... with a / Stress-Responsive Optogenetic
   Bioreactor for Precision Plant Protection"). Each span is a line of its own
   from 1100px, where the line is set to hold: nowrap on the paragraph alone
   would run all of it off the right of the screen. */
.hero__caption span { display: inline-block; }
@media (min-width: 1100px) {
  .hero__caption { max-width: none; white-space: nowrap; }
  .hero__caption span { display: block; }
}
@media (max-width: 479px) {
  .hero__caption span { display: inline; }
}

/* ---------------------------------------------------------------- the foot */
.hero__note {
  max-width: 26rem; text-align: right;
  text-shadow: 0 1px 14px rgb(7 11 9 / .85), 0 0 2px rgb(7 11 9 / .4);
}
.hero__note p {
  font-size: clamp(.9375rem, .84rem + .25vw, 1.0625rem); line-height: 1.55;
  color: rgb(255 255 255 / .95);
}
.hero__note footer {
  margin-top: .75rem;
  display: flex; flex-direction: column; align-items: flex-end; gap: .1rem;
  font-size: .8125rem; line-height: 1.45;
}
.hero__note footer b { color: var(--white); font-weight: 700; }
.hero__note footer span { color: rgb(255 255 255 / .72); }
@media (max-width: 800px) {
  .hero__note { max-width: 22rem; }
}

/* 7 Oct (owner): Farmer Chen's words sit further right, on three lines: one
   span a line from 800px.
   18 Oct (Jacquelyn): the whole quote must be inside the frame, its longest
   line ending on the page's own right margin. It used to reach past the page
   column by (100vw - --max) / 2, which was nothing while .hero__inner was
   capped at --max, but from 1100px that cap is off (home.css) and the first
   line ran off the right of the screen: 22px at 1440, 320px at 1920. The
   foot now ends where the hero's padding ends, like the claim. */
@media (min-width: 801px) {
  .hero__note { max-width: none; }
  .hero__note p span { display: block; white-space: nowrap; }
  /* the marks ride on the first and last lines, not lines of their own */
  .hero__note p::before, .hero__note p::after { content: none; }
  .hero__note p span:first-child::before { content: "\201C"; }
  .hero__note p span:last-child::after { content: "\201D"; }
}

/* ---------------------------------------------------------------- the intro */
.hero { --hero-ease: cubic-bezier(.16, 1, .3, 1); }

/* each word rises and comes up on its own. No clip: a clip round a word
   with a text shadow draws the shadow as a solid box in some renderers */
.hero__claim .hero__w, .hero__claim .hero__w > span { display: inline-block; }

.hero.is-pre .hero__frame--farm img { transform: scale(1.09); transform-origin: 58% 46%; }
.hero.is-pre .hero__frame--farm::after { opacity: 0; }
.hero.is-pre .hero__claim .hero__w > span { opacity: 0; transform: translateY(.42em); }
.hero.is-pre .hero__caption { opacity: 0; transform: translateY(12px); }
.hero.is-pre .hero__note p span,
.hero.is-pre .hero__note footer { opacity: 0; }

.hero.is-on .hero__frame--farm img {
  transform: none;
  transition: opacity .9s ease, transform 3.2s var(--hero-ease);
}
.hero.is-on .hero__frame--farm::after { opacity: 1; transition: opacity 1.6s ease .35s; }
.hero.is-on .hero__claim .hero__w > span {
  opacity: 1; transform: none;
  transition: opacity .9s ease calc(.55s + var(--i) * .11s), transform 1.25s var(--hero-ease) calc(.55s + var(--i) * .11s);
}
.hero.is-on .hero__caption {
  opacity: 1; transform: none;
  transition: opacity 1s ease 1.15s, transform 1.2s var(--hero-ease) 1.15s;
}
.hero.is-on .hero__note p span { opacity: 1; transition: opacity 1.1s ease 1.7s; }
.hero.is-on .hero__note p span:nth-child(2) { transition-delay: 1.9s; }
.hero.is-on .hero__note p span:nth-child(3) { transition-delay: 2.1s; }
.hero.is-on .hero__note footer { opacity: 1; transition: opacity 1s ease 2.45s; }

/* the drift (home.js piece 0) moves these two; nothing else moves them */
.hero.is-drift .hero__frame--farm,
.hero.is-drift .hero__inner { will-change: transform; }