/* Home: intro cards, then the opener text over the glitch background.
   Values taken from the deployed build of moondisaster.org (pre-opener and
   opener), which differ slightly from the later source files. The Directed-by and Emmy cards are new, and use the same
   card and fade as the MIT CAV logo. home.js runs the timing. */

/* A full-screen "screen", centred (CrtPage in question.tsx). */
.crt {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 100vh;
  font-family: var(--font-header);
  background-position: center; background-size: cover;
  overflow: hidden;
}
.crt[hidden] { display: none; }

/* Intro cards */
.intro-card { opacity: 0; }
/* As the original: 500px wide (70vw on phones), its top at 40% of the height. */
.intro-card__logo { width: 500px; position: absolute; top: 40vh; }
.intro-card__logo img { display: block; width: 100%; height: auto; }
/* New cards: centred on the same point as the MIT CAV logo. */
.intro-card__middle {
  position: absolute; top: calc(40vh + 500px * 201 / 1017 / 2); transform: translateY(-50%);
  text-align: center;
}
.intro-card__credit { width: 40rem; max-width: 90vw; }
.intro-card__credit-label {
  margin: 0 0 1.5rem; font-family: "Druk Wide Web", sans-serif; font-size: 1rem;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.intro-card__credit-names { margin: 0; font-size: 3rem; line-height: 3.2rem; text-transform: uppercase; }
.intro-card__emmy { width: 300px; }
.intro-card__emmy img { display: block; width: 100%; height: auto; }
/* Note about the original site at the foot of the first card, placed and
   styled as the one on da.moondisaster.org's first card. */
.intro-card__notice { position: absolute; bottom: 5vh; text-align: center; line-height: 24px; }
.intro-card__notice p { margin: 0; }

/* Opener */
.opener { width: 0; height: 2px; cursor: pointer; }
.opener__text {
  height: 100%; width: 100%;
  text-align: left; text-transform: uppercase;
  font-size: 2rem; line-height: 2rem;
  position: relative;
  padding: 5rem 2rem 0 8rem;
  font-family: "Druk Wide Web", sans-serif;
}
.opener__stage { transition: opacity 1s; opacity: 1; margin: 5rem 0 0 0; }
.opener__big { font-size: 5rem; margin: 0 0 4rem 0; }
.opener__block { font-family: var(--font-header); line-height: 1.7em; max-width: 40rem; }
.opener__block p { line-height: 3rem; }
.opener__italic {
  font-family: "Druk XCond Cy Web", sans-serif; font-style: italic;
  letter-spacing: 0.5rem; font-size: 5rem; text-align: right;
  position: absolute; bottom: 10%; left: 8rem;
}
.opener__continue { position: absolute; bottom: 4rem; right: 4rem; }
.opener__button { width: 160px; height: 160px; font-size: 1.5rem; }

@media (min-width: 1280px) {
  .opener__text { margin: 0 50px; }
  .opener__italic { bottom: 15%; font-size: 6rem; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .opener__text { margin: 0 50px; font-size: 1.8rem; line-height: 1.8rem; padding: 5rem 2rem 0 8rem; }
  .opener__block { max-width: 34rem; }
  .opener__block p { line-height: 2.5rem; }
  .opener__italic { font-size: 6rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .opener__text { margin: 0 50px; font-size: 1.5rem; line-height: 1.5rem; padding: 3rem 2rem 0 8rem; }
  .opener__big { font-size: 4rem; }
  .opener__block { max-width: 28rem; }
  .opener__block p { line-height: 2.3rem; }
  .opener__italic { font-size: 5rem; }
}
@media (max-width: 767px) {
  .intro-card__logo { width: 70vw; }
  .intro-card__middle { top: calc(40vh + 70vw * 201 / 1017 / 2); }
  .intro-card__credit-label { font-size: 0.8rem; }
  .intro-card__credit-names { font-size: 2rem; line-height: 2.2rem; }
  .intro-card__emmy { width: 50vw; }
  .intro-card__notice { padding: 0 1.5rem; font-size: 14px; line-height: 18px; bottom: 2vh; }
  .opener__text { margin: 0 50px; font-size: 1.4rem; line-height: 1.2rem; padding: 3rem 1.5rem 0 1.5rem; }
  .opener__big { font-size: 3rem; margin: 0 0 2rem 0; }
  .opener__block { max-width: 24rem; }
  .opener__block p { margin: 1rem 0; line-height: 1.5rem; }
  .opener__italic { left: 1.5rem; font-size: 4rem; line-height: 3.5rem; }
  .opener__continue { right: 2rem; bottom: 4.5rem; }
  .opener__button { width: 60px; height: 60px; font-size: 0.7rem; }
}