/* Landing: the hero and the Get started button. Shared parts live in the theme stylesheet. */

/* The hero: a pencil montage of Pakistan's great wins that draws itself once when the page opens (script.js). It is
   drawn on the page's own mint and fades out at its edges, so the tile shows no box of its own. The tile takes the
   picture's shape: 4:3 on phones, 3:1 from 640px, where the wide picture takes over. */
.hero-art {
  padding: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: none;
}

@media (min-width: 640px) {
  .hero-art { aspect-ratio: 3 / 1; }
}

.hero-art picture,
.hero-art img,
.hero-art canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-art img { object-fit: cover; }

.hero-art canvas {
  position: absolute;
  inset: 0;
}

/* While the drawing loads and plays, the finished picture waits underneath it, and the credit's wash of purple
   waits for the drawing, to follow it like a signature. */
.hero-art.is-waiting img,
.hero-art.is-drawing img { visibility: hidden; }

body:has(.hero-art.is-waiting, .hero-art.is-drawing) :is(.credit-name, .credit .lojicloop) {
  animation-play-state: paused;
}

/* Get started: the way into the app, a sabz pill with the hero tile's soft highlight, like the logo's seal. The
   person symbol sits in its own circle of lighter green, and the words follow it. On phones and tablets it sits
   under the hero, halfway between the drawing's foot and the credit's words; from 1024px, where the masthead leaves
   room beside it, it moves to the top right, level with the masthead and flush with the hero's right edge. */
.account {
  display: flex;
  justify-content: center;
}

.acct {
  --i: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 20px 0 5px;
  border-radius: 99px;
  background: radial-gradient(110% 80% at 100% 0%, #0E9A59, transparent 60%), var(--sabz);
  color: #FFFFFF;
  font: 700 15px/1 var(--font);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-2) var(--ease-out);
}

.acct-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgb(255 255 255 / .16);
}

.acct svg.i { width: 20px; height: 20px; }

.acct:hover { background-color: var(--deep); }

.acct:active { transform: scale(.96); }

/* Below 1024px the page fills the screen above the footer and the button's row takes what the masthead and the hero
   leave, with the pill in its middle. The row is 16px heavier on top to match the footer's touch padding below it
   (its first words start 16px down), so the pill lands halfway between the drawing and the footer's first words,
   and never nearer either than 34px. */
@media (max-width: 1023px) {
  .app-main {
    display: flex;
    flex-direction: column;
  }

  .landing {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  .account {
    flex: 1 0 auto;
    align-items: center;
    padding: 34px 0 18px;
  }
}

@media (min-width: 1024px) {
  .landing {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }

  .landing .mast { grid-area: 1 / 2; }

  .landing .bento { grid-area: 2 / 1 / 3 / 4; }

  .account {
    grid-area: 1 / 3;
    justify-self: end;
  }
}