:root {
  /* Sampled from the bottom edge of the background photo, so the page can be
     extended downwards without a visible seam. */
  --grass: #7b844a;
}

body {
  margin: 0;
  background: var(--grass);

  color: white;
  text-shadow:
    2px 2px 3px black,
    2px -2px 3px black,
    -2px 2px 3px black,
    -2px -2px 3px black;
  text-align: center;
}

/* The whole poster scales with its own width, so every px measurement below is
   expressed as a fraction of the 1086x814 original. */
.page {
  position: relative;
  width: min(1086px, 100vw);
  aspect-ratio: 1086 / 814;
  margin: 0 auto;
  overflow: hidden;
  font-size: min(32px, 2.9466vw);
}

.scene-window {
  position: absolute;
  inset: 0;
}

.scene {
  position: relative;
  width: 100%;
  height: 100%;
  background: no-repeat url('assets/lawnlympic_background.jpg');
  background-size: 100% 100%;
}

.scene img {
  position: absolute;
}

/* Percentages of the scene box: the rings stay on the barn and the figures
   stay on the lawn at every width. */
.rings {
  left: 19.797%;
  top: 29.975%;
  height: 14.742%;
}

.people {
  height: 19.656%;
  bottom: 35.012%;
}

.dogs {
  height: 7.371%;
  left: 32.228%;
}

.kids {
  height: 12.285%;
  left: 21.639%;
}

.spandex {
  left: 14.733%;
}

.toga {
  left: 42.357%;
}

main,
footer {
  position: relative;
  z-index: 1;
}

main {
  width: 53%;
  height: 72%;
  padding-left: 47%;
  padding-top: 1.875em;
}

main p {
  font-size: 1.25em;
}

.lead-in {
  font-style: italic;
  margin-top: 0.5em;               /* 20px at the 40px lead-in size */
}

.menu {
  font-style: italic;
}

h1 {
  font-family: Optima, 'Palatino Linotype', Palatino, Georgia, serif;
  text-transform: uppercase;
  font-size: 2.25em;
  margin: 0.4167em 0 0.2778em 0;   /* 30px / 20px at the 72px title size */
}

.title {
  margin-bottom: 0;
}

.subtitle {
  margin-top: 0;
  font-size: 1.5625em;
}

h2 {
  font-family: Optima, 'Palatino Linotype', Palatino, Georgia, serif;
  font-size: 1.3125em;
  margin: 0 0 0.4762em 0;          /* 20px at the 42px h2 size */
}

p {
  margin: 0;
}

footer {
  width: 100%;
  box-sizing: border-box;   /* mobile adds padding; keep it inside the 100% */
}

/* ---------- phones ----------
   The photo's subject sits in its left half, so crop the right side away and
   let the text stack underneath on matching grass. */
@media (max-width: 760px) {
  .page {
    /* Scene geometry, all as fractions of the page width:
         crop     - where the photo is cut off
         text-top - where the text block begins (it overlaps the photo's grass)
         sky      - the band above the barn's roof peak, measured at 18.7%
                    of the photo's height */
    --crop: 92vw;
    --text-top: 78vw;
    --sky: 22.1vw;

    width: 100%;
    aspect-ratio: auto;
    font-size: clamp(15px, 4.6vw, 21px);
    padding-bottom: 1.6em;
  }

  .scene-window {
    position: relative;
    inset: auto;
    width: 100%;
    height: var(--crop);
    overflow: hidden;
  }

  .scene {
    width: 158%;
    height: auto;
    aspect-ratio: 1086 / 814;
  }

  /* Anchored to the bottom of the photo, so it stays put when the text moves. */
  .scene-window::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 12%;
    background: linear-gradient(to bottom, rgba(123, 132, 74, 0), var(--grass));
  }

  /* Pull the text up over the lawn, close under the figures. */
  main {
    margin-top: calc(var(--text-top) - var(--crop));
    width: auto;
    height: auto;
    padding: 0.2em 0.8em 0;
  }

  /* Centred in the sky band above the barn. Offset back up by --text-top
     because main is the containing block. */
  .intro {
    position: absolute;
    top: calc(-1 * var(--text-top));
    left: 0;
    right: 0;
    height: var(--sky);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .intro p {
    font-size: 1em;
  }

  .intro .lead-in {
    margin-top: 0.15em;
  }

  .intro .lead-in::after {
    content: '\2026';
  }

  main p {
    font-size: 1.15em;
  }

  h1 {
    font-size: min(2em, 8.4vw);
  }

  .subtitle {
    font-size: min(1.4em, 6vw);
  }

  h2 {
    font-size: 1.25em;
  }

  footer {
    padding: 1.1em 0.8em 0;
    font-size: 0.82em;
  }

  footer p {
    margin-bottom: 0.45em;
  }
}

/* ---------- animation ---------- */

/* Every figure is planted on the grass, so all motion pivots at the feet. */
.people {
  transform-origin: bottom center;
  will-change: transform;
}

.spandex {
  animation: victory-bounce 1.6s ease-in-out infinite;
}

.kids {
  /* Offset so the kids and the runner are never mid-air together. */
  animation: podium-hop 1.15s ease-in-out infinite 0.4s;
}

.dogs {
  animation: scamper 0.9s ease-in-out infinite;
}

.toga {
  animation: javelin-windup 3.2s ease-in-out infinite;
}

@keyframes victory-bounce {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  15%      { transform: translateY(0) scale(1.06, 0.94); }
  45%      { transform: translateY(-13.75%) scale(0.97, 1.03); }
  75%      { transform: translateY(0) scale(1.05, 0.95); }
  90%      { transform: translateY(0) scale(1, 1); }
}

@keyframes podium-hop {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20%      { transform: translateY(-14%) rotate(-2.5deg); }
  55%      { transform: translateY(0) scale(1.04, 0.96); }
  75%      { transform: translateY(-6%) rotate(2deg); }
}

@keyframes scamper {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25%      { transform: translateX(5.5%) rotate(1.5deg); }
  50%      { transform: translateX(0) rotate(0deg); }
  75%      { transform: translateX(-5.5%) rotate(-1.5deg); }
}

@keyframes javelin-windup {
  0%, 55%  { transform: rotate(0deg); }                    /* set */
  70%      { transform: rotate(-7deg) translateX(-6%); }   /* wind back */
  80%      { transform: rotate(9deg) translateX(14.5%); }  /* lunge */
  92%      { transform: rotate(-2deg) translateX(3%); }    /* recover */
}

/* The sheen is a gradient clipped to the rings' own silhouette. */
.rings-shine {
  position: absolute;
  left: 19.797%;
  top: 29.975%;
  width: 24.401%;
  height: 14.742%;
  pointer-events: none;
  background: linear-gradient(105deg,
      transparent 42%,
      rgba(255, 255, 255, 0.9) 50%,
      transparent 58%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-mask-image: url('assets/rings.png');
  mask-image: url('assets/rings.png');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  animation: sheen 4.5s ease-in-out infinite;
}

@keyframes sheen {
  0%, 15%   { background-position: 150% 0; }
  60%, 100% { background-position: -50% 0; }
}

.rings {
  animation: rings-glow 4.5s ease-in-out infinite;
}

@keyframes rings-glow {
  0%, 20%, 100% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
  40%           { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.75)); }
}

@media (prefers-reduced-motion: reduce) {
  .people,
  .rings,
  .rings-shine {
    animation: none;
  }

  /* Still frame, so the gold poster glow goes back on. This is also what the
     OG screenshot is captured with. */
  .people {
    filter:
      drop-shadow(2px 2px 3px gold) drop-shadow(-2px 2px 3px gold) drop-shadow(2px -2px 3px gold) drop-shadow(-2px -2px 3px gold);
  }
}