/* ==========================================================================
   The hero scene: the dusk treehouse behind the loading screen and the
   sign-in page

   Both screens wear it in exactly the same place, so when the loading
   screen fades out the sign-in card simply appears over the same evening.
   The art comes from scripts/make-loader.mjs. Every layer is 200 art pixels
   tall on one grid and scales by --hg-px, a whole number of screen pixels,
   so the pixels stay square and crisp.

   Markup (index.html and src/components/SignIn.jsx):

     .hg-sky                 the scrolling page, with the sky, stars and moon
       .hg-title             "Hollow Grove", in the sky above the tree
       .hg-hero              hills, woods and meadow, tiled sideways
         .hg-house           the treehouse, glow, smoke and kids
           .hg-glow, .hg-smoke
         .hg-front           tall grass along the bottom edge
         .hg-fly             fireflies
       .hg-slot              the card or the loading path, over the meadow
   ========================================================================== */

.hg-sky {
  --hg-px: 2px;
  /* Where the hero's top edge sits. On a phone the scene sits under the
     title; on a wide screen it sits on the bottom of the window. */
  --hg-top: calc(max(16px, env(safe-area-inset-top)) + clamp(64px, 18vh - 50px, 150px));
  --hg-h: calc(200 * var(--hg-px));
  position: fixed;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 16px max(24px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  /* Navy at the top, the sunset low behind the hills, and the meadow's own
     dark green below the hero, so the ground goes on under the card. */
  background: linear-gradient(to bottom,
    #0e1430 0,
    #1d2350 calc(var(--hg-top) + 10 * var(--hg-px)),
    #3d3566 calc(var(--hg-top) + 70 * var(--hg-px)),
    #7a4f6e calc(var(--hg-top) + 96 * var(--hg-px)),
    #c98a64 calc(var(--hg-top) + 118 * var(--hg-px)),
    #e0a070 calc(var(--hg-top) + 132 * var(--hg-px)),
    #1b2d24 calc(var(--hg-top) + 132 * var(--hg-px))) local;
  background-color: #1b2d24;
  image-rendering: pixelated;
  isolation: isolate;
}
@media (min-width: 900px) and (min-height: 780px) { .hg-sky { --hg-px: 3px; } }
@media (min-width: 1800px) and (min-height: 1040px) { .hg-sky { --hg-px: 4px; } }

/* Stars, a field of tiny squares that slowly twinkles, and the moon. */
.hg-sky::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: calc(var(--hg-top) + 100 * var(--hg-px));
  z-index: -1;
  background-image:
    linear-gradient(#fff8e8, #fff8e8), linear-gradient(#fff8e8, #fff8e8), linear-gradient(#ffe9b0, #ffe9b0),
    linear-gradient(#fff8e8, #fff8e8), linear-gradient(#fff8e8, #fff8e8), linear-gradient(#ffe9b0, #ffe9b0),
    linear-gradient(#fff8e8, #fff8e8), linear-gradient(#fff8e8, #fff8e8), linear-gradient(#fff8e8, #fff8e8),
    linear-gradient(#ffe9b0, #ffe9b0), linear-gradient(#fff8e8, #fff8e8), linear-gradient(#fff8e8, #fff8e8);
  background-size: var(--hg-px) var(--hg-px);
  background-repeat: no-repeat;
  background-position: 12% 18%, 27% 6%, 41% 30%, 55% 12%, 68% 34%, 79% 4%, 88% 24%, 6% 44%, 33% 50%, 94% 52%, 61% 58%, 19% 66%;
  animation: hg-twinkle 5s steps(4) infinite alternate;
  pointer-events: none;
}
.hg-sky::after {
  content: '';
  position: absolute;
  top: max(calc(var(--hg-top) * 0.3), 20px);
  left: max(5vw, 14px);
  z-index: -1;
  width: calc(18 * var(--hg-px));
  height: calc(18 * var(--hg-px));
  background: url(/loader/moon.png) 0 0 / 100% 100%;
  filter: drop-shadow(0 0 18px rgba(255, 241, 196, 0.45));
  pointer-events: none;
}

/* Narrow phones: the title fills the top, so the moon moves up into the
   top-right corner of the sky, smaller, instead of sitting beside it. */
@media (max-width: 520px) {
  .hg-sky::after {
    top: max(6px, env(safe-area-inset-top));
    left: auto;
    right: 12px;
    width: calc(13 * var(--hg-px));
    height: calc(13 * var(--hg-px));
  }
}
/* Under 360px the title runs nearly edge to edge, with no sky left beside
   it for the moon. */
@media (max-width: 359px) {
  .hg-sky::after { display: none; }
}

.hg-title {
  position: absolute;
  left: 0;
  right: 0;
  top: max(calc(var(--hg-top) - 64px), 12px);
  z-index: 3;
  margin: 0;
  text-align: center;
  font: 800 clamp(38px, 10vw, 56px)/1 'Baloo 2', system-ui, sans-serif;
  letter-spacing: .5px;
  color: #fff8e8;
  text-shadow: 0 4px 0 #4a2f1c, 3px 0 0 #4a2f1c, -3px 0 0 #4a2f1c, 0 -3px 0 #4a2f1c, 3px 4px 0 #4a2f1c, -3px 4px 0 #4a2f1c, 0 8px 18px rgba(14, 20, 48, 0.6);
  pointer-events: none;
}

.hg-hero {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--hg-top);
  height: var(--hg-h);
  z-index: 0;
  background: url(/loader/back.png) calc(50% + 40 * var(--hg-px)) 100% / calc(320 * var(--hg-px)) var(--hg-h) repeat-x;
  pointer-events: none;
}
.hg-hero > * { position: absolute; pointer-events: none; }

/* The house, its trunk at the horizontal middle of the screen. */
.hg-house {
  left: calc(50% - 120 * var(--hg-px));
  bottom: 0;
  width: calc(240 * var(--hg-px));
  height: var(--hg-h);
  background: url(/loader/house.png) 0 0 / 100% 100%;
}
.hg-house > * { position: absolute; display: block; }
.hg-glow {
  inset: 0;
  background: url(/loader/glow.png) 0 0 / 100% 100%;
  mix-blend-mode: screen;
  animation: hg-flicker 3.2s steps(1) infinite;
}
.hg-smoke {
  left: calc(139 * var(--hg-px));
  top: calc(38 * var(--hg-px));
  width: calc(7 * var(--hg-px));
  height: calc(5 * var(--hg-px));
  background: url(/loader/smoke.png) 0 0 / 100% 100%;
  opacity: 0;
  animation: hg-smoke 4.5s steps(18) infinite;
}
.hg-smoke:nth-child(3) { animation-delay: -1.5s; }
.hg-smoke:nth-child(4) { animation-delay: -3s; }

.hg-front {
  inset: 0;
  background: url(/loader/front.png) calc(50% + 100 * var(--hg-px)) 100% / calc(320 * var(--hg-px)) var(--hg-h) repeat-x;
}

/* Fireflies: placed in % by the page, drifting in whole art pixels. */
.hg-fly {
  width: var(--hg-px);
  height: var(--hg-px);
  background: #fff08c;
  box-shadow: 0 0 calc(3 * var(--hg-px)) var(--hg-px) rgba(255, 240, 140, 0.55);
  opacity: 0;
  animation: hg-fly 7s steps(14) infinite;
}

/* The card or the loading path, over the meadow just under the kids. */
.hg-slot {
  position: relative;
  z-index: 2;
  width: min(100%, 380px);
  margin: calc(var(--hg-top) + 178 * var(--hg-px)) auto 0;
  box-sizing: border-box;
}

/* Phones: the card starts mid-tree instead of below it, and never further
   down than about a third of the screen, so the sign-in form sits in reach
   above the browser's toolbar and keyboard. The kid picker does the same. */
@media (max-width: 899px) {
  .hg-slot { margin-top: min(calc(var(--hg-top) + 92 * var(--hg-px)), 34vh); }
}
@media (max-width: 899px) and (max-height: 720px) {
  .hg-slot { margin-top: min(calc(var(--hg-top) + 60 * var(--hg-px)), 24vh); }
}

/* Wide screens: the scene sits along the bottom of the window with the tree
   left of centre, and the slot floats over the sky on the right. */
@media (min-width: 900px) {
  .hg-sky {
    --hg-top: max(calc(100vh - var(--hg-h)), 120px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 24px max(6vw, 40px);
  }
  .hg-sky::after { left: auto; right: max(9vw, 24px); }
  .hg-house { left: calc(36% - 120 * var(--hg-px)); }
  .hg-title { right: auto; left: 36%; transform: translateX(-50%); white-space: nowrap; }
  .hg-slot { margin: auto 0; }
}

@keyframes hg-twinkle { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes hg-flicker { 0%, 100% { opacity: 1; } 22% { opacity: 0.82; } 26% { opacity: 1; } 61% { opacity: 0.9; } 64% { opacity: 1; } }
@keyframes hg-smoke {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: 0.75; }
  100% { opacity: 0; transform: translate(calc(8 * var(--hg-px)), calc(-22 * var(--hg-px))); }
}
@keyframes hg-fly {
  0%, 100% { opacity: 0; transform: translate(0, 0); }
  30%, 70% { opacity: 1; }
  50% { transform: translate(calc(8 * var(--hg-px)), calc(-10 * var(--hg-px))); }
}

@media (prefers-reduced-motion: reduce) {
  .hg-sky::before, .hg-glow, .hg-smoke, .hg-fly { animation: none; }
  .hg-smoke:nth-child(2) { opacity: 0.7; }
  .hg-fly { opacity: 0.8; }
}