/* CLIXHOUSE website: style/manifesto.css
   The manifesto page, "Nada menos." / "Nothing less.": night to day as you scroll, the poem and the
   Monroe High story, the crew in every scene (crew/manifesto.js stages them). Loaded after the site's
   own CSS (tokens, base, parts) and only by this page.
   Three colours only: Noche, Luz, Papel. No gradients, no shadows, no outlines. The fonts, the
   colours and the header and footer are the site's; what is here is the page's own layout. */

/* the page's own measures, on the page's <main> (the header and footer keep the site's) */
.manifesto {
  --gutter: clamp(1.375rem, 5.2vw, 5.5rem);
  --vh: 1vh;
  --svh: 100vh;
  /* the poem: one line per screen, as big as the screen allows */
  --fs-line: min(clamp(2.3rem, 1.05rem + 5.3vw, 6.25rem), calc(var(--vh) * 10.6));
  --fs-story: clamp(1.5rem, 0.95rem + 2.3vw, 3.25rem);
  --r-soft: clamp(1.25rem, 0.9rem + 1.2vw, 2.25rem);
  display: block;
  overflow: clip;
  background: var(--noche);
  color: var(--papel);
}
@supports (height: 100svh) {
  .manifesto { --svh: 100svh; --vh: 1svh; }
}
/* the ground behind a pulled-down page is the night, as the page opens on it */
html:has(.manifesto) { background: var(--noche); }

.manifesto p { margin: 0; }
.manifesto svg { display: block; }

/* ---------------------------------------------------------------- the site's header, over the night
   The header opens over the first scene, with no band of its own, and goes as the scene lets go (the
   crew's script moves it with the sticky stage). Its name and links are cream on the night and turn
   black each on its own, all at once, when the light has reached all of it (.lit: the name is always
   whole). It takes no room of its own. */
[data-page="studio"] .site-header {
  margin-bottom: calc(var(--head-h) * -1);
  background: transparent;
  color: var(--papel);
}
[data-page="studio"] .site-header.away { visibility: hidden; }
[data-page="studio"] .site-header .lit { color: var(--noche); }   /* the name, and each link, when the light has reached all of it */
[data-page="studio"] .menu-panel { color: var(--noche); }
/* keyboard focus: the site's ring is black, which the night swallows; while the header is on the night
   (the crew's script sets .on-day once the light has reached all of it) the ring is cream. The open
   menu's panel is cream itself, so its ring stays black. */
[data-page="studio"] .site-header:not(.on-day) :focus-visible { outline-color: var(--papel); }
[data-page="studio"] .site-header .menu-panel :focus-visible { outline-color: var(--noche); }
/* the drawn name is the site's own wordmark, painted in whatever colour the header is (the picture
   stays there, unseen, for its words and its size) */
[data-page="studio"] .brand { position: relative; }
[data-page="studio"] .brand img { opacity: 0; }
[data-page="studio"] .brand::after {
  content: "";
  position: absolute;
  inset: 0.6875rem 0;
  background: currentColor;
  -webkit-mask: url("../art/wordmark-ink.svg") center / 100% 100% no-repeat;
  mask: url("../art/wordmark-ink.svg") center / 100% 100% no-repeat;
}
[data-page="studio"] .nav-wide a:hover { color: var(--noche); }
/* the buttons: cream with black words, on the night and in the day (the language switch already is);
   WhatsApp's circle black */
[data-page="studio"] .site-header .pill { background: var(--papel); color: var(--noche); }
[data-page="studio"] .site-header .wa-head .icon-wa path:last-child { fill: var(--papel); }

/* on a phone the floating WhatsApp button sits over the foot of the page: the footer keeps its words clear of it */
@media (max-width: 999px) {
  [data-page="studio"] .site-footer { padding-bottom: 6.5rem; }
}

/* ---------------------------------------------------------------- scenes */
.scene { position: relative; }
.stage {
  position: relative;
  height: var(--svh);
  min-height: 34rem;
  overflow: hidden;
}
/* with scripts and motion the first two scenes are tall: the page holds the picture still while the
   light moves; without, each is one screen and one still picture */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .scene.tall .stage { position: sticky; top: 0; }
  .dawn { height: calc(var(--svh) * 2.7); }
  .summit { height: calc(var(--svh) * 3.1); }
}

.layer { position: absolute; inset: 0; z-index: 0; }   /* each its own stack: the later one lies over the earlier */
.layer.night { background: var(--noche); color: var(--papel); }
.layer.day { color: var(--noche); }              /* its sky is painted by the scene, down to the ground */
.layer .crew { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; }
.layer .words { z-index: 1; }
.layer.night .sole { display: none; }
/* the cut between black shapes is the colour of whatever is behind them: night on the night */
.layer.night .crew [stroke="#F2E300"] { stroke: var(--noche); }
.dawn .layer.day { clip-path: circle(0 at 50% 110%); }
.summit .layer.day { z-index: 1; }

.words {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  top: calc(var(--vh) * 17 + 2.5rem);
}
.line {
  font-weight: 800;
  font-size: var(--fs-line);
  line-height: 1.02;
  letter-spacing: -0.034em;
  max-width: 11.5em;
  text-wrap: balance;
}
.summit .line + .line { margin-top: 0.42em; }

.hint {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(var(--vh) * 4);
  width: 1.75rem;
  height: 1.75rem;
  margin-left: -0.875rem;
  color: var(--papel);
  transition: opacity 0.4s ease;
}
.hint svg { width: 100%; height: 100%; }
.hint.gone { opacity: 0; }

/* ---------------------------------------------------------------- everyone, and the name */
.everyone {
  position: relative;
  z-index: 1;
  background: var(--luz);
  color: var(--noche);
  border-radius: var(--r-soft) var(--r-soft) 0 0;
  margin-top: calc(var(--r-soft) * -1);
  padding: clamp(4.5rem, 12vw, 9rem) var(--gutter) clamp(4rem, 9vw, 8rem);
}
.everyone .line { max-width: 13em; }
.name-scene {
  position: relative;
  margin: clamp(2.5rem, 7vw, 6rem) auto 0;
  max-width: 78rem;
  aspect-ratio: 1400 / 560;
}
.name-scene .crew { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tagline {
  margin-top: clamp(1.25rem, 3vw, 2.5rem);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 1rem + 6.6vw, 8.5rem);
  line-height: 0.98;
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------- whose house? */
.chant {
  position: relative;
  z-index: 2;
  background: var(--noche);
  color: var(--papel);
  border-radius: var(--r-soft) var(--r-soft) 0 0;
  margin-top: calc(var(--r-soft) * -1);
  padding: clamp(5rem, 13vw, 10rem) var(--gutter) clamp(5rem, 12vw, 9.5rem);
}
.story {
  font-weight: 800;
  font-size: var(--fs-story);
  line-height: 1.12;
  letter-spacing: -0.028em;
}
.story-lead { display: block; max-width: 17em; text-wrap: balance; }
.shout {
  display: block;
  margin-top: clamp(1.75rem, 4.5vw, 3.5rem);
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  line-height: 0.94;
}
.shout .call, .shout .answer { display: block; white-space: nowrap; }
/* each line as wide as the column (measured: the call is 5.61 em wide, the answer 4.71 em) */
.shout .call { font-size: min(calc((100vw - 2 * var(--gutter)) / 5.66), 15rem); }
.shout .answer { font-size: min(calc((100vw - 2 * var(--gutter)) / 4.76), 17.8rem); color: var(--luz); margin-top: 0.04em; }

/* ---------------------------------------------------------------- people still showed up */
.stands {
  position: relative;
  z-index: 3;
  background: var(--luz);
  color: var(--noche);
  border-radius: var(--r-soft) var(--r-soft) 0 0;
  margin-top: calc(var(--r-soft) * -1);
  padding: clamp(4.5rem, 11vw, 8.5rem) var(--gutter) 0;
}
.stands .line { font-size: min(clamp(2.1rem, 1rem + 4.6vw, 5.5rem), calc(var(--vh) * 9.5)); max-width: 12em; }
.stands .line .s { display: block; }
.stands-scene {
  position: relative;
  margin: clamp(2rem, 5vw, 3rem) 0 0 auto;
  width: min(100%, 64rem);
  aspect-ratio: 1180 / 660;
}
.stands-scene .crew { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* the last words, then the site's footer: its black floor rises out of this yellow */
main.manifesto > .end {
  position: relative;
  z-index: 3;
  background: var(--luz);
  color: var(--noche);
  padding: clamp(3.5rem, 9vw, 7rem) var(--gutter) clamp(0.5rem, 2vw, 1.5rem);
}
.thats {
  font-weight: 800;
  font-size: clamp(2.1rem, 1rem + 4.6vw, 5.5rem);
  line-height: 1;
  letter-spacing: -0.034em;
}
.thats .said { display: block; }
.thats .name { display: block; margin-top: 0.22em; }
.thats .name .wm { width: 100%; height: auto; }

/* who we are, under the last words: still on the yellow, then the footer's black floor */
main.manifesto > .who { position: relative; z-index: 3; background: var(--luz); color: var(--noche); padding-bottom: clamp(9rem, 13vw, 12rem); }   /* head-room for the crew on the footer's edge */

/* ---------------------------------------------------------------- arrivals
   The words come as they come into view (once): a small rise and a fade; the answer is shouted.
   (Its own mark, data-arrive, not the site's data-land: the page's script and timing are its own.) */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-arrive] {
    opacity: 0;
    transform: translateY(0.35em);
    transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1);
  }
  [data-arrive].in { opacity: 1; transform: none; }
  .shout .call, .shout .answer { opacity: 0; transform-origin: 0 100%; }
  .shout.in .call { animation: call 0.5s cubic-bezier(.3,.8,.3,1) both; }
  .shout.in .answer { animation: answer 0.62s cubic-bezier(.2,.9,.25,1) 0.55s both; }
  .chant.shake { animation: shake 0.5s ease-out 0.62s both; }
}
@keyframes call {
  0% { opacity: 0; transform: translateY(-0.4em) scale(1, 1.06); }
  60% { opacity: 1; transform: translateY(0.03em) scale(1.01, 0.96); }
  100% { opacity: 1; transform: none; }
}
@keyframes answer {
  0% { opacity: 0; transform: translateY(-0.7em) scale(0.98, 1.1); }
  45% { opacity: 1; transform: translateY(0.05em) scale(1.03, 0.9); }
  70% { transform: translateY(-0.02em) scale(0.99, 1.03); }
  100% { opacity: 1; transform: none; }
}
@keyframes shake {
  0%, 100% { transform: none; }
  20% { transform: translateY(7px); }
  45% { transform: translateY(-4px); }
  70% { transform: translateY(2px); }
}

/* ---------------------------------------------------------------- desktop */
@media (min-width: 900px) {
  .words { right: auto; width: min(52vw, 46rem); top: calc(var(--vh) * 19 + 2rem); }
  .summit .words { width: min(50vw, 44rem); }
  .everyone .line { max-width: 14em; }
  .stands .line { max-width: 11em; }
  .stands-scene { margin-top: calc(clamp(2rem, 5vw, 3rem) - 9rem); }
}
@media (max-width: 720px) {
  .name-scene { aspect-ratio: 1040 / 600; }
  .stands-scene { width: calc(100% + var(--gutter)); margin-right: calc(var(--gutter) * -1); }
}