/* =====================================================================
   A-O — index                                       DECISIONS.md § 3
   ---------------------------------------------------------------------
   A black screen and one sentence. That is the whole page, and the
   restraint is the point: the screen exists so the visitor performs a
   gesture, and the gesture is what buys the browser's permission to
   play sound. Anything else on this screen would be a distraction from
   the only thing it asks for.

   Loaded after tokens.css and core.css, and after nothing else — index
   has no slider, no couple, no form, so components.css never arrives.
   ===================================================================== */

#index{
  position:fixed; inset:0;
  background:#000;
  overflow:hidden;
}

/* ------------------------------------------------------------ the video
   `contain`, not `cover`. The teaser is an edit: the author framed every
   shot in it, and cropping his framing to fill an unknown window would
   throw away the part of the work this screen exists to present. Black
   bars on a black page are invisible anyway. */

#teaser{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  background:#000;
  opacity:0;
  transition:opacity 420ms var(--ease-out);
}
#index.is-playing #teaser{ opacity:1; }

/* ---------------------------------------------------------- the sentence
   Verbatim from section 3, capitals included: `press space to enter the
   Astre Occlus`. No text-transform anywhere near it — the contract
   quotes a string, and a string is not a style. */

#enter{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  margin:0;
  font-family:var(--mono);
  font-size:calc(clamp(12px,1.15vw,18px) * var(--ui));
  font-weight:400;
  letter-spacing:.18em;
  line-height:1.9;
  color:var(--grey-3);
  text-align:center;
  white-space:nowrap;
  transition:opacity 300ms var(--ease-out), color 300ms var(--ease-out);
}

/* Idle: a slow breath, so the screen is alive without asking anything
   more loudly than it already does. */
#index.is-idle #enter{ animation:breathe 3.4s ease-in-out infinite; }
@keyframes breathe{
  0%,100%{ opacity:.55; }
  50%    { opacity:1; }
}

/* Loading: the sentence does not vanish and nothing new is added — the
   same line becomes one word, and that word pulses. Section 3 asks for
   a black screen and one sentence; this keeps the count at one. */
#index.is-loading #enter{
  color:var(--vio);
  letter-spacing:.42em;
  animation:pulseWord 900ms steps(1,end) infinite;
}
@keyframes pulseWord{
  0%,100%{ opacity:1; }
  50%    { opacity:.28; }
}

/* Playing, or on the way out: the sentence is gone. */
#index.is-playing #enter,
#index.is-leaving #enter{
  opacity:0;
  animation:none;
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  #index.is-idle #enter,
  #index.is-loading #enter{ animation:none; opacity:1; }
}