/* Home page only: the one-screen layout, the scene (the bird over the water) and its motion.
   Shared styles are in site.css. Type and spacing are in rem so enlarged browser text scales the page. */

html { background-color: var(--slate); }

/* One grid column; the scene shares the header and content rows and stops above the footer,
   so the reflection never runs under the address. */
body {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  background-color: var(--slate);
}

.site-head { grid-row: 1; grid-column: 1; }
.site-foot { grid-row: 3; grid-column: 1; }

/* The bird over the water, on the right of wide screens; on upright screens above the words. Decoration only. */
.scene {
  position: relative;
  grid-row: 1 / 3;
  grid-column: 1;
  justify-self: end;
  width: 62%;
  pointer-events: none;
}

/* Out of the flow, so the drawing's own height never stretches the rows: the scene is as tall as they are. */
.scene svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* The words keep to the left 40% beside the scene, so enlarged text wraps instead of running into the bird. */
main {
  position: relative;
  z-index: 1;
  grid-row: 2;
  grid-column: 1;
  align-self: center;
  max-width: 40vw;
  padding: 0 1.5rem 0 3.5rem;
}

/* COLORFUL PUZZLE GAMES. in small gold capitals like CONCEPT ARTIST on the card, then the slogan large. */
h1 {
  margin: 0;
  font-size: clamp(2.25rem, 4.6vw, 4.125rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.eyebrow {
  display: block;
  margin-bottom: 1.1em;
  color: var(--gold);
  font-size: max(0.3em, 0.8125rem);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.slogan { display: block; }

main .button { margin-top: 2.75rem; }

/* Still by default: the ripples sit at full size and the bird at rest, which is what Reduce Motion shows. */
.ring { transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: no-preference) {
  /* The ripples spread and fade in turn; the bird pulls back up its dive line and returns. The reflection's image sits
     inside the flip, so the same move mirrors it. */
  .ring { animation: spread 6s linear infinite; opacity: 0; }
  .ring:nth-child(2) { animation-delay: -1s; }
  .ring:nth-child(3) { animation-delay: -2s; }
  .ring:nth-child(4) { animation-delay: -3s; }
  .ring:nth-child(5) { animation-delay: -4s; }
  .ring:nth-child(6) { animation-delay: -5s; }
  .bird, .refl { animation: dive 4.8s ease-in-out infinite; }
}

@keyframes spread {
  0% { transform: scale(0.15); opacity: 0; }
  8% { opacity: 0.9; }
  100% { transform: scale(1); opacity: 0; }
}

/* 12 scene units back up the 40° dive line (DIVE.angle in tools/make-bird.mjs). */
@keyframes dive {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-9.19px, -7.71px); }
}

/* Any screen taller than wide (phones, a tablet held upright): the scene on top, the words below it. */
@media (orientation: portrait) {
  body { grid-template-rows: auto 1fr auto auto; }
  /* Below the header here: with enlarged text the header wraps onto two lines. */
  /* At least half the screen, so a tall header and large words can't squeeze the bird into a strip; the page scrolls instead. */
  .scene { grid-row: 2; justify-self: stretch; width: 100%; min-height: min(50svh, 24rem); }
  main { grid-row: 3; max-width: none; padding: 0.75rem 3.5rem 0.5rem; }
  .site-foot { grid-row: 4; }
  h1 { font-size: min(11vw, 4.125rem); }
  main .button { margin-top: 1.75rem; }
}

@media (max-width: 760px) {
  main { padding-inline: 1.25rem; }
}

/* Small screens on their side (a phone turned over, a laptop zoomed in): still side by side, a little tighter. */
/* Short screens on their side: the drawing fits the scene's height instead of its width, so the bird stays whole
   and clear of the header; everything in it fades out before its edges, so the narrower drawing shows no seam. The
   ripples, centred right of its middle, run past its right edge, so the drawing doesn't clip them. */
@media (orientation: landscape) and (max-height: 500px) {
  .scene svg { inset: 0 auto 0 50%; width: auto; aspect-ratio: 8 / 9; translate: -50% 0; overflow: visible; }
}

@media (max-width: 760px) and (orientation: landscape) {
  .eyebrow { margin-bottom: 0.8em; }
  main .button { margin-top: 1.5rem; }
  .site-foot { flex-direction: row; padding-block: 1rem; }
}

/* Print: the words and the facts only, dark on white. */
@media print {
  html, body { background: none; }
  .scene { display: none; }
  main .button { padding: 0; background: none; }
}