/* The footer. The page's paper turns into a dusk wash (a ragged, bleeding top edge, apricot melting
   into lilac and dusty blue), small balloons drift up through it, and the red balloon takes you back
   to the top. Every picture is baked by bake.js into img/; the url()s are relative to this file, so
   the footer works from any page that links it. Sprite aspect ratios below mirror img/manifest.json.
   Motion runs only while the footer is on screen (footer.js adds .is-live). */

.site-foot {
  --sky: 168px;                 /* the band at the top where the balloons drift */
  position: relative;
  isolation: isolate;
  margin-top: clamp(56px, 9vw, 120px);
  padding: var(--sky) var(--gutter) max(28px, env(safe-area-inset-bottom));
  color: var(--ink);
  font-family: var(--body);
  /* laid out and painted only once it nears the screen, so its paintings (about 70 KB) don't come
     with every page's first screen (auto: the real height is remembered once it has been seen) */
  content-visibility: auto;
  contain-intrinsic-size: auto 620px;
}
/* the dusk wash: a tall crop for phones and tablets, a wide one for desktop (each visitor loads one) */
.site-foot::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background: url("img/dusk-m.webp") 50% 0 / cover no-repeat;
  pointer-events: none;
}

/* ------------------------------------------------------------------ balloons drifting up */
.foot-sky { position: absolute; left: 0; right: 0; top: 0; height: var(--sky); overflow: hidden; z-index: -1; pointer-events: none; }
.foot-drift {
  position: absolute; bottom: 0; left: var(--x);
  width: var(--w); aspect-ratio: var(--ar);
  opacity: 0;
  animation: foot-rise var(--t) linear var(--d) infinite paused;
}
.foot-drift > i {
  display: block; width: 100%; height: 100%;
  background: no-repeat 50% 0 / 100% 100%;
  transform-origin: 50% 22%;
  animation: foot-sway var(--st) ease-in-out var(--sd) infinite alternate paused;
}
.foot-drift--mustard { --x: 4%;  --w: 43px; --ar: 107 / 200; --t: 29s; --d: -4s;  --st: 5.6s; --sd: -2s;   --o: .95; --rest: -22%; }
.foot-drift--teal    { --x: 27%; --w: 34px; --ar: 86 / 162;  --t: 36s; --d: -22s; --st: 4.8s; --sd: -1s;   --o: .8;  --rest: -62%; }
.foot-drift--cream   { --x: 44%; --w: 46px; --ar: 116 / 255; --t: 33s; --d: -14s; --st: 6.2s; --sd: -3.4s; --o: .95; --rest: -30%; }
.foot-drift--blue    { --x: 16%; --w: 31px; --ar: 77 / 144;  --t: 41s; --d: -31s; --st: 5.1s; --sd: -.6s;  --o: .7;  --rest: -95%; }
.foot-drift--coral   { --x: 60%; --w: 37px; --ar: 93 / 173;  --t: 38s; --d: -9s;  --st: 4.4s; --sd: -2.8s; --o: .85; --rest: -48%; }
.foot-drift--mustard > i { background-image: url("img/drift-mustard.webp"); }
.foot-drift--teal > i    { background-image: url("img/drift-teal.webp"); }
.foot-drift--cream > i   { background-image: url("img/drift-cream.webp"); }
.foot-drift--blue > i    { background-image: url("img/drift-blue.webp"); }
.foot-drift--coral > i   { background-image: url("img/drift-coral.webp"); }
@media (max-width: 599px) { .foot-drift--blue { display: none; } } /* phones have room for four */

.site-foot.is-live .foot-drift,
.site-foot.is-live .foot-drift > i,
.site-foot.is-live .foot-up-bob { animation-play-state: running; }

/* each one rises from the bottom of the band to just under the top of the footer, fading in and out */
@keyframes foot-rise {
  0%   { transform: translate3d(0, 45%, 0); opacity: 0; }
  16%  { opacity: var(--o, 1); }
  70%  { opacity: var(--o, 1); }
  100% { transform: translate3d(0, calc(100% + 8px - var(--sky)), 0); opacity: 0; }
}
@keyframes foot-sway {
  from { transform: translateX(-5px) rotate(-4deg); }
  to   { transform: translateX(5px) rotate(3.5deg); }
}

/* ------------------------------------------------------------------ brand */
.foot-mark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; border-radius: 6px; }
.foot-tag { width: 30px; aspect-ratio: 300 / 380; background: url("../../img/logo.webp") no-repeat center / contain; transform: rotate(-8deg); }
.foot-word { font: 400 clamp(1.75rem, 8.5vw, 2.1rem)/1 var(--display); }
.foot-line { margin: 14px 0 0; max-width: 27ch; font: 500 1.1rem/1.5 var(--body); color: var(--ink-soft); }

/* ------------------------------------------------------------------ links: a painted ink line draws itself underneath */
.foot-h { margin: 0 0 4px; font: 400 1.3rem/1.2 var(--display); color: var(--ink); }
.foot-group ul { margin: 0; padding: 0; list-style: none; }
.foot-group a { position: relative; display: inline-block; padding: 7px 0; font: 500 1.02rem/1.3 var(--body); color: var(--ink-soft); text-decoration: none; }
.foot-group a::after, .foot-up-label::after {
  content: "";
  position: absolute; left: -3px; right: -5px; bottom: 0; height: 8px;
  background: url("img/ink-1.webp") no-repeat 0 50% / 100% 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .5s cubic-bezier(.33, .8, .35, 1);
  pointer-events: none;
}
.foot-group li:nth-child(3n+2) a::after { background-image: url("img/ink-2.webp"); }
.foot-group li:nth-child(3n) a::after, .foot-up-label::after { background-image: url("img/ink-3.webp"); }
.foot-group a:hover, .foot-group a:focus-visible { color: var(--ink); }
.foot-group a:hover::after, .foot-group a:focus-visible::after,
.foot-up:hover .foot-up-label::after, .foot-up:focus-visible .foot-up-label::after { clip-path: inset(0 0 0 0); }

.foot-mark:focus-visible, .foot-group a:focus-visible, .foot-dab:focus-visible, .foot-up:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.foot-group a:focus-visible { border-radius: 4px; }

/* ------------------------------------------------------------------ socials: painted dabs, a little wobble on hover */
.foot-social { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.foot-dab { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; }
.foot-dab > span { width: 56px; height: 56px; background: no-repeat center / 100% 100%; transform: rotate(var(--tilt, 0deg)); }
.foot-dab--instagram > span { --tilt: -5deg; background-image: url("img/social-instagram.webp"); }
.foot-dab--facebook > span  { --tilt: 3deg;  background-image: url("img/social-facebook.webp"); }
.foot-dab--youtube > span   { --tilt: -2deg; background-image: url("img/social-youtube.webp"); }
.foot-dab--linkedin > span  { --tilt: 5deg;  background-image: url("img/social-linkedin.webp"); }
.foot-dab:hover > span, .foot-dab:focus-visible > span { animation: foot-wobble .6s ease-out both; }
@keyframes foot-wobble {
  0%   { transform: rotate(var(--tilt, 0deg)); }
  30%  { transform: rotate(calc(var(--tilt, 0deg) - 10deg)) scale(1.07); }
  60%  { transform: rotate(calc(var(--tilt, 0deg) + 6deg)) scale(1.07); }
  100% { transform: rotate(calc(var(--tilt, 0deg) - 3deg)) scale(1.06); }
}

/* ------------------------------------------------------------------ back to top: the red balloon over its label */
.foot-up {
  --up-art-w: 92px; --up-art-h: calc(var(--up-art-w) * 299 / 206);
  display: inline-flex; flex-direction: column; align-items: center;
  padding: 10px 8px 4px;
  color: var(--ink); text-decoration: none;
  border-radius: 16px;
  -webkit-tap-highlight-color: transparent;
}
.foot-up-art { display: block; width: var(--up-art-w); height: var(--up-art-h); transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.foot-up-bob { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; animation: foot-bob 5.2s ease-in-out infinite alternate paused; }
.foot-up-balloon { display: block; width: 100%; height: 100%; background: url("img/up.webp") no-repeat 50% 0 / 100% 100%; }
.foot-up.is-away .foot-up-balloon { visibility: hidden; }
.foot-up:hover .foot-up-art, .foot-up:focus-visible .foot-up-art { transform: translateY(-7px); }
.foot-up-label { position: relative; margin-top: 1px; padding-bottom: 7px; font: 600 1.02rem/1.25 var(--body); text-align: center; text-wrap: balance; }
@keyframes foot-bob {
  from { transform: translateY(0) rotate(-2.4deg); }
  to   { transform: translateY(-6px) rotate(2.2deg); }
}
/* the balloon that flies off (footer.js puts it on <body>, fixed to the window) */
.foot-up-ghost { position: fixed; z-index: 1000; pointer-events: none; background: no-repeat 50% 0 / 100% 100%; will-change: transform; }
/* where focus lands after the trip back up */
[data-foot-top]:focus { outline: none; }

.foot-legal { margin: 0; font-size: .9rem; color: var(--ink-soft); }

/* ------------------------------------------------------------------ layout
   Phones: the wordmark with "Back to top" beside it (its balloon floats above, in the sky band), the
   line, the two link groups side by side, the dabs, the © line. The two wrappers step aside
   (display: contents) so their children share one grid, and nothing collides at large text sizes. */
.foot-inner {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  grid-template-areas: "mark up" "line line" "nav nav" "social social" "legal legal";
  align-items: center;
}
.foot-brand, .foot-end { display: contents; }
.foot-mark { grid-area: mark; }
.foot-line { grid-area: line; }
.foot-nav { grid-area: nav; margin-top: 30px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.foot-up { grid-area: up; justify-self: end; margin: calc(-10px - var(--up-art-h)) -8px 0 12px; }
.foot-social { grid-area: social; margin-top: 30px; }
.foot-legal { grid-area: legal; margin-top: 30px; }

/* tablets: the dabs move up beside the link groups */
@media (min-width: 600px) and (max-width: 899px) {
  .foot-inner { grid-template-areas: "mark up" "line line" "nav social" "legal legal"; }
  .foot-nav { grid-template-columns: repeat(2, max-content); column-gap: clamp(40px, 9vw, 80px); }
  .foot-social { justify-self: end; align-self: end; }
}

/* desktop: one row. Brand on the left, the link groups in the middle, and on the right the balloon's
   label level with the headings (the balloon rises above it into the sky) with the dabs below */
@media (min-width: 900px) {
  .site-foot { --sky: 190px; }
  .site-foot::before { background-image: url("img/dusk-d.webp"); }
  .foot-inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: "brand nav end" "legal legal legal";
    align-items: start;
    column-gap: clamp(36px, 5vw, 90px);
  }
  .foot-brand { display: block; grid-area: brand; }
  .foot-nav { margin-top: 0; grid-template-columns: repeat(2, max-content); gap: 0 clamp(32px, 4vw, 72px); }
  .foot-end { display: flex; grid-area: end; justify-self: end; flex-direction: column; align-items: center; gap: 14px; padding-top: 2px; }
  .foot-up { margin: calc(-10px - var(--up-art-h)) 0 0; }
  .foot-social { margin-top: 0; }
  .foot-legal { margin-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .foot-drift, .foot-drift > i, .foot-up-bob { animation: none; }
  .foot-drift { opacity: var(--o, 1); transform: translateY(var(--rest, -40%)); }
  .foot-up-art, .foot-group a::after, .foot-up-label::after { transition: none; }
  .foot-dab:hover > span, .foot-dab:focus-visible > span { animation: none; }
}