/* The footer with the ingredients in the air: the bun-coloured footer of an invented burger bar under a red section
   whose wavy edge breathes, with the links, the small print and the brand name huge across the bottom. Four ingredients
   are thrown up from below the edge, one at a time, and fall back down. */
:root {
  --page: #f5e3cd;          /* the footer, the colour of a bun */
  --red: #f91814;           /* the section above and the brand name */
  --rim: #ffffff;           /* the thick outline of the brand name */
  --ink: #4c0016;           /* links and small print on the footer, outlines of the ingredients */
  --light: #f5e3cd;         /* the line in the red section */
  --mustard: #ffd750;       /* the dollop of mustard behind a link pointed at */
  --maroon: #4c0016;        /* the outlines of the dollop and of the ingredients */
  --lettuce: #77c41e;       /* the lettuce leaf */
  --lettuce-light: #a8e14e; /* the light middle of the leaf */
  --lettuce-vein: #4f8f0c;  /* the veins of the leaf */
  --tomato: #e3141f;        /* the skin and the gel of the tomato slice */
  --tomato-light: #ff6a55;  /* the flesh of the tomato slice */
  --seed: #ffe7a3;          /* the tomato seeds */
  --cheese: #ffc614;        /* the cheese slice */
  --cheese-light: #ffe486;  /* the shine on the cheese */
  --cheese-dark: #ed900a;   /* the holes in the cheese */
  --patty: #a5532f;         /* the middle of the patty */
  --patty-dark: #6e2d16;    /* the crust of the patty */
  --patty-char: #3d1409;    /* the grill marks */
  --patty-light: #d98a5c;   /* the juicy specks */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--page);
  color: var(--maroon);
  font-family: 'Bricolage Grotesque Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* the red section above the footer */
.call {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  padding: min(5vh, 40px) 6vw min(3vh, 24px);
  text-align: center;
  background: var(--red);
  color: var(--light);
}

.last {
  margin: 0;
  font-size: clamp(15px, min(2.4vw, 3.6vh), 30px);
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: -0.01em;
}

/* the footer */
.foot {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: min(12vh, 96px) 5vw min(2.2vh, 18px);
  background: var(--page);
  color: var(--ink);
}

/* the wavy bottom edge of the red section, hanging over the footer */
.edge {
  position: absolute;
  left: 0;
  top: calc(100% - 1px);
  width: 100%;
  height: min(10vh, 80px);
  pointer-events: none;
}

.edge path {
  fill: var(--red);
}

.row {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2vw;
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 1.6vw;
  font-size: clamp(15px, min(2vw, 3.2vh), 26px);
  font-weight: 750;
  font-stretch: 80%;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.links a {
  position: relative;
  display: inline-block;
  padding: 0.18em 0.4em;
  color: inherit;
  text-decoration: none;
  outline: none;
}

/* the dollop of mustard that drops behind a link pointed at (the script scales it, the CSS only places it) */
.dollop {
  position: absolute;
  left: -12%;
  top: -18%;
  width: 124%;
  height: 136%;
  overflow: visible;
  transform: scale(0);
  pointer-events: none;
}

.dollop path {
  fill: var(--mustard);
  stroke: var(--maroon);
  stroke-width: 3;
}

.label {
  position: relative;
  display: inline-block;
}

.copy {
  margin: 0;
  font-size: clamp(11px, min(1.25vw, 2.2vh), 16px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}

.copy--bottom {
  display: none;
  text-align: center;
}

.rule {
  position: relative;
  z-index: 3;
  display: block;
  height: 2px;
  margin: min(1.6vh, 14px) 0 min(1.4vh, 12px);
  background: color-mix(in srgb, var(--ink) 25%, transparent);
  transform-origin: 0 50%;
}

.tag {
  position: relative;
  z-index: 3;
  margin: 0;
  font-size: clamp(11px, min(1.25vw, 2.2vh), 16px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* the brand name, huge, sitting on the bottom of the footer */
.brand-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
}

.brand {
  position: relative;
  z-index: 1;
  margin: 0 0 -0.04em;
  font-size: min(43vw, 64vh);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.82;
  letter-spacing: -0.02em;
  color: var(--red);
  -webkit-text-stroke: max(6px, 0.07em) var(--rim);
  paint-order: stroke fill;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}

.brand:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 6px;
  border-radius: 12px;
}

/* one letter or one word that pops up: GSAP moves this element */
.pop {
  display: inline-block;
  transform-origin: 50% 90%;
  will-change: transform;
}

/* the air the ingredients fly in, over the whole stage */
.air {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.item {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  will-change: transform, opacity;
}

.item svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0.35em 0.4em rgba(76, 0, 22, 0.22));
}

.out {
  stroke: var(--maroon);
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.lettuce { fill: var(--lettuce); }
.lettuce-light { fill: var(--lettuce-light); }
.lettuce-vein { fill: none; stroke: var(--lettuce-vein); stroke-width: 3.5; stroke-linecap: round; }
.tomato { fill: var(--tomato); }
.tomato-light { fill: var(--tomato-light); }
.seed { fill: var(--seed); }
.cheese { fill: var(--cheese); }
.cheese-light { fill: var(--cheese-light); }
.cheese-dark { fill: var(--cheese-dark); }
.patty { fill: var(--patty); }
.patty-dark { fill: var(--patty-dark); }
.patty-char { fill: none; stroke: var(--patty-char); stroke-width: 6; stroke-linecap: round; }
.patty-light { fill: var(--patty-light); }

/* on a narrow screen the links go on top of each other with the small print, centred */
@media (max-width: 640px) {
  .row {
    flex-direction: column;
    gap: 0.4em;
  }

  .links {
    justify-content: center;
    gap: 0.1em 3vw;
  }

  .copy--top {
    display: none;
  }

  .copy--bottom {
    display: block;
    margin-top: 0.5em;
  }

  .rule {
    transform-origin: 50% 50%;
  }

  .tag {
    text-align: center;
  }
}