/* ═══════════════════════════════════════════════════
   FOOTER — exposure fade, smoke, spectrum word.
   Matches the Amethyst/1Med case-study treatment exactly:
   ghosted mark + WebGL smoke removed in favor of the same
   CSS-blob smoke and "Define the Brief" picker used there.
═══════════════════════════════════════════════════ */
.site-footer {
  overflow: clip;
  isolation: isolate;
  border-radius: 0 0 var(--shell-radius) var(--shell-radius);
}

/* Exposure-driven reveal. --p is set per element by JS. */
.site-footer .fr {
  opacity: var(--p, 0);
  transform: translateY(calc((1 - var(--p, 0)) * 18px));
  filter: blur(calc((1 - var(--p, 0)) * 16px));
  will-change: opacity, transform, filter;
}

@media (prefers-reduced-motion: reduce) {
  .site-footer .fr { opacity: 1; transform: none; filter: none; }
}

/* ═══════════════════════════════════════════════════
   FOOTER SMOKE — drifting cyan haze. Exact port from
   the Amethyst/1Med experiment, replacing the WebGL
   particle version and the ghosted mark entirely.
═══════════════════════════════════════════════════ */
.footer-inner, .footer-bottom-bar { position: relative; z-index: 1; }

.footer-smoke {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Fades the smoke in over the first ~22% of the footer's height so
     there's no hard color line right where #Content's rounded corner
     first exposes it — it eases in instead of snapping on. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 100%);
}

.footer-smoke-blob {
  position: absolute;
  width: 55vw;
  max-width: 640px;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(70px);
  mix-blend-mode: screen;
  will-change: transform;
}

.footer-smoke-blob--1 {
  top: -25%;
  left: -12%;
  background: radial-gradient(circle, rgba(255,107,2,0.18) 0%, rgba(255,107,2,0.05) 45%, transparent 72%);
  animation: footerSmokeDrift1 22s ease-in-out infinite;
}

.footer-smoke-blob--2 {
  bottom: -30%;
  right: -8%;
  width: 46vw;
  max-width: 520px;
  background: radial-gradient(circle, rgba(210,90,40,0.13) 0%, rgba(210,90,40,0.04) 45%, transparent 72%);
  animation: footerSmokeDrift2 27s ease-in-out infinite;
}

.footer-smoke-blob--3 {
  top: 15%;
  left: 42%;
  width: 36vw;
  max-width: 400px;
  background: radial-gradient(circle, rgba(255,150,40,0.09) 0%, transparent 72%);
  animation: footerSmokeDrift3 18s ease-in-out infinite;
}

@keyframes footerSmokeDrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(6%, 8%) scale(1.08); }
}
@keyframes footerSmokeDrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-8%, -6%) scale(1.1); }
}
@keyframes footerSmokeDrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-5%, 10%) scale(0.95); }
}

@media (prefers-reduced-motion: reduce) {
  .footer-smoke-blob { animation: none; }
}

/* ═══════════════════════════════════════════════════
   DEFINE THE BRIEF — the block itself is /includes/brief-block.php, styled
   only by /assets/css/brief.css so it is identical to the case study block.
   Do not restyle it here. This file only widens the footer column so the
   block gets the same width as on a case study page.
═══════════════════════════════════════════════════ */
.footer-cta { max-width: 1300px; width: 100%; }

/* ═══════════════════════════════════════════════════
   FOOTER SIZING — desktop needs room for the whole
   picker; mobile swaps to a single plain CTA button.
═══════════════════════════════════════════════════ */
@media (min-width: 601px) {
  /* Sized to the brief block (same as the case study block): about 80px
     above the eyebrow and 80px below the service list. */
  .site-footer { height: 560px; }
  /* #Content's margin-bottom is what creates the scroll distance that
     reveals the fixed footer (Betheme slide-under method). It has to
     match .site-footer's height exactly or the reveal falls out of sync. */
  #Content { margin-bottom: 560px; }

  .footer-inner {
    /* Vertically centered by default, which made the gap above
       "Start a Project" balloon depending on content height. Anchoring
       to the top with an explicit padding gives a fixed, predictable gap. */
    align-items: flex-start;
    padding-top: 80px;
    padding-bottom: 12px;
  }
}

/* Desktop/tablet: full picker, no plain label or button. */
.footer-cta-btn--mobile,
.footer-cta-label--mobile { display: none; }

/* Mobile only: the picker doesn't hold up at that width — swap it for
   a single plain CTA button instead. Desktop is untouched. Mobile
   gets its own much shorter footer height + matching reveal-scroll
   distance rather than inheriting the desktop height sized for the picker. */
/* 701 to 900px: long service names wrap, so a little more room. */
@media (min-width: 701px) and (max-width: 900px) {
  .site-footer { height: 600px; }
  #Content { margin-bottom: 600px; }
}

/* 601 to 700px: the service list drops to two columns and gets taller. */
@media (min-width: 601px) and (max-width: 700px) {
  .site-footer { height: 700px; }
  #Content { margin-bottom: 700px; }
}

@media (max-width: 600px) {
  .site-footer { height: 260px; }
  #Content { margin-bottom: 260px; }

  .footer-inner {
    align-items: center;
    justify-content: center;
    padding: 24px var(--gutter);
  }

  .footer-cta .brief-wrap { display: none; }
  .footer-cta-label--mobile { display: block; }
  .footer-cta-btn--mobile { display: inline-flex; }
}