/* ==========================================================================
   Slime Games – front page
   Bootstrap supplies the reset and the grid; everything below is the page.
   ========================================================================== */

:root {
  /* The sand column: the 900px game canvas plus 50px of sand each side. */
  --game-canvas-width: 1000px;

  /* How far the splash art overhangs the column (from the mockup: ~1.11x). */
  --splash-scale: 1.11;

  /* Splash canvas aspect, from the PSD (5296 x 4752). */
  --splash-ratio: calc(4752 / 5296);

  /* How far up the splash the column starts, hidden behind the sand ooze. */
  --column-overlap: 0.28;

  --sky-top:   #e7f0fd;
  --sky:       #89c3fc;
  --sand:      #fddb75;
  --gold:      #ffc83d;
  --ink:       #7a4a12;
  --focus:     #1462c8;
}

*,
*::before,
*::after {
  box-sizing: border-box;   /* Bootstrap does this too; game pages don't load Bootstrap */
}

html {
  background: var(--sky);
}

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(to bottom, var(--sky-top) 0, var(--sky) 55vh, var(--sky) 100%);
  overflow-x: hidden;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   Page frame: everything is centred on the column.
   -------------------------------------------------------------------------- */

.page {
  --column-w: min(var(--game-canvas-width), 100%);
  --splash-w: min(calc(var(--column-w) * var(--splash-scale)), 100%);
  --splash-h: calc(var(--splash-w) * var(--splash-ratio));

  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  padding: .5rem 1rem;
  background: var(--ink);
  color: #fff;
  border-radius: .5rem;
  z-index: 10;
}
.skip-link:focus {
  top: 1rem;
}

/* --------------------------------------------------------------------------
   Splash
   -------------------------------------------------------------------------- */

.splash {
  position: relative;
  z-index: 2;              /* above the sand column, so the ooze spills over it */
  width: var(--splash-w);
  aspect-ratio: 5296 / 4752;
  margin-top: clamp(.5rem, 2vw, 1.5rem);
  pointer-events: none;    /* the art is decorative; only the ball links take clicks */
}

.splash picture {
  display: contents;       /* the <img> inside positions against .splash */
}

.splash__layer {
  position: absolute;
  height: auto;
  display: block;
  opacity: 0;
  transform: translateY(1.5%);
  transition:
    opacity   .6s ease-out,
    transform .6s ease-out;
  transition-delay: calc(var(--step) * 380ms);
}

/* Placement: each layer's crop box as a percentage of the PSD canvas. */
.splash__layer--bg      { left:  0.264%; top:  0.000%; width: 99.490%; transform: none; }
.splash__layer--sun     { left: 13.463%; top: 15.614%; width: 72.451%; }
.splash__layer--shadows { left:  3.040%; top: 47.327%; width: 87.462%; transform: none; }
.splash__layer--slimes  { left:  8.330%; top: 34.700%; width: 83.720%; }
.splash__layer--logo    { left: 27.039%; top:  2.083%; width: 45.279%;
                          transform: scale(.88);
                          transform-origin: 50% 60%;
                          transition-timing-function: ease-out, cubic-bezier(.34, 1.4, .64, 1); }

/* The reveal: splash.js adds is-ready to .page once the layers have decoded. */
.js .page.is-ready .splash__layer,
.no-js .splash__layer {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .splash__layer {
    transition: none;
    transform: none;
  }
}

/* The six balls: real images from the PSD, each a link to its game. They sit
   between the slimes and the logo, and reveal on the slimes' step. */
.splash__balls {
  position: absolute;
  inset: 0;
  z-index: 5;
}

.ball {
  position: absolute;
  display: block;
  pointer-events: auto;
  border-radius: 50%;
  /* Reveal (delayed, on the slimes' step) lives on the link... */
  opacity: 0;
  transform: translateY(1.5%);
  transition:
    opacity   .6s ease-out,
    transform .6s ease-out;
  transition-delay: calc(var(--step) * 380ms);
}

/* ...and the hover/press response lives on the image, so it's never delayed. */
.ball img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .18s ease-out, filter .18s ease-out;
}

/* A generous hit area so the small balls stay tappable when the art is small. */
.ball::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

/* Placement: each ball's crop box as a percentage of the PSD canvas. */
.ball--volleyball { left: 46.66%; top: 31.73%; width:  5.85%; }
.ball--soccer     { left: 51.47%; top: 48.65%; width: 14.24%; }
.ball--bowling    { left: 82.01%; top: 64.90%; width:  7.21%; }
.ball--basketball { left: 18.62%; top: 39.33%; width:  5.72%; }
.ball--cricket    { left: 81.34%; top: 44.57%; width:  3.57%; }
.ball--keepyuppy  { left: 71.09%; top: 31.63%; width:  7.01%; }

.js .page.is-ready .ball,
.no-js .ball {
  opacity: 1;
  transform: none;
}

.ball:hover img,
.ball:focus-visible img {
  transform: translateY(-4%) scale(1.1);
  filter: drop-shadow(0 6px 6px rgba(122, 74, 18, .35));
}

.ball:active img {
  transform: scale(.96);
  filter: drop-shadow(0 1px 1px rgba(122, 74, 18, .3));
}

.ball:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .ball,
  .ball img {
    transition: none;
    transform: none;
  }
  .ball:hover img,
  .ball:focus-visible img {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Sand column
   -------------------------------------------------------------------------- */

.sand {
  position: relative;
  z-index: 1;
  width: var(--column-w);
  flex: 1 0 auto;
  background: var(--sand);
  /* Slide up behind the ooze, then pad back down so content clears it. */
  margin-top: calc(var(--splash-h) * -1 * var(--column-overlap));
  padding-top: calc(var(--splash-h) * var(--column-overlap) + clamp(1.5rem, 4vw, 3rem));
  padding-bottom: 2rem;
  display: flex;
  flex-direction: column;
}

/* The column takes its turn in the reveal (step 1), straight after the
   background, so its straight top edge is never seen against bare sky. */
.js .sand {
  opacity: 0;
  transition: opacity .6s ease-out;
  transition-delay: calc(var(--step) * 380ms);
}
.js .page.is-ready .sand {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .js .sand {
    transition: none;
  }
}

.games {
  padding: 0 clamp(1rem, 4%, 2rem);
}

.games__heading {
  margin: 0 0 clamp(1.25rem, 3.5vw, 2.25rem);
  text-align: center;
  font-family: "Lilita One", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: clamp(2rem, 6.5vw, 3.6rem);
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--gold);
  /* Outlined bubble lettering, matching the mockup's heading. */
  -webkit-text-stroke: .075em var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 .07em 0 var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
}

/* The two little sand dashes either side of the heading. */
.games__heading::before,
.games__heading::after {
  content: "";
  flex: 0 0 auto;
  width: .9em;
  height: .28em;
  border-radius: 1em;
  background: var(--gold);
  box-shadow: 0 0 0 .07em var(--ink), 0 .07em 0 .07em var(--ink);
}

.games__grid {
  padding: 0;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   Game buttons
   -------------------------------------------------------------------------- */

.game {
  display: block;
  border-radius: 14%;        /* roughly the frame's corner, for the focus ring */
  transform: translateY(0) scale(1);
  transition: transform .18s ease-out, filter .18s ease-out;
  filter: drop-shadow(0 3px 0 rgba(122, 74, 18, .18));
}

.game img {
  display: block;
  width: 100%;
  height: auto;
}

.game:hover,
.game:focus-visible {
  transform: translateY(-4px) scale(1.03);
  filter: drop-shadow(0 8px 10px rgba(122, 74, 18, .28));
}

.game:active {
  transform: translateY(0) scale(.98);
  filter: drop-shadow(0 1px 0 rgba(122, 74, 18, .18));
  transition-duration: .08s;
}

.game:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .game {
    transition: none;
  }
  .game:hover,
  .game:focus-visible {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.foot {
  margin-top: auto;
  padding: 2.5rem 1rem 0;
  text-align: center;
  color: var(--ink);
  font-size: .9rem;
}

.foot p {
  margin: 0;
}