/* Shared Work/Contact version of the homepage end-of-transmission footer.
   The mark never moves. Event light changes only local material masks and the
   local edge layers. Every animated property is transform/opacity and the event
   scheduler parks outside the viewport. */

#site-footer.site-footer-copy {
  --footer-mark-x: 27%;
  --footer-mark-y: 52%;
  --footer-source: .56;
  --footer-glow: .055;
  --footer-room: .018;
  --footer-material: 0;
  --footer-edge-1: 0;
  --footer-edge-2: 0;
  --footer-light-x: 34%;
  --footer-light-y: 50%;
  --footer-accent: #4fe08a;
  --footer-accent-rgb: 79, 224, 138;
  --footer-secondary: #b26bff;
  --footer-secondary-rgb: 178, 107, 255;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  margin-top: clamp(72px, 10vw, 150px);
  overflow: hidden;
  color: var(--chalk, #ececee);
  background: #050506;
  border-top: 1px solid rgba(236,236,238,.08);
}

/* The Work page closes in the colours of the clients above it: Lilypad blue
   into Flux violet. Type, hierarchy, and interaction stay BTN-owned. */
#site-footer.site-footer-copy.site-footer--clients {
  --footer-accent: #00e4ee;
  --footer-accent-rgb: 0, 228, 238;
  --footer-secondary: #9b7fe1;
  --footer-secondary-rgb: 155, 127, 225;
}

#site-footer.site-footer-copy .footer-atmo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(236,236,238,.012) 0 1px, transparent 1px 4px),
    radial-gradient(72% 54% at 32% 50%, rgba(var(--footer-accent-rgb),var(--footer-room)), transparent 74%),
    radial-gradient(64% 48% at 74% 54%, rgba(var(--footer-secondary-rgb),calc(var(--footer-room) * .72)), transparent 76%),
    radial-gradient(135% 105% at 50% 46%, transparent 28%, rgba(0,0,0,.72) 100%);
}

#site-footer.site-footer-copy .footer-screen {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: min(820px, calc(100svh - 72px));
}

#site-footer.site-footer-copy .footer-ended {
  position: absolute;
  z-index: 5;
  top: clamp(58px, 9vh, 92px);
  left: 50%;
  transform: translateX(-50%);
  color: rgba(236,236,238,.42);
  font: 10px/1 var(--font-ui, 'Share Tech Mono', monospace);
  letter-spacing: 4px;
  text-transform: uppercase;
  white-space: nowrap;
}

#site-footer.site-footer-copy .footer-tube {
  position: absolute;
  inset: 0;
}

#site-footer.site-footer-copy .footer-neon {
  position: absolute;
  z-index: 4;
  left: clamp(48px, 7vw, 112px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-family: var(--font-display, sans-serif);
  font-size: clamp(64px, 8.8vw, 138px);
  font-weight: 400;
  line-height: .82;
  letter-spacing: -.015em;
  text-transform: uppercase;
}

#site-footer.site-footer-copy .footer-neon::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 38%;
  top: 50%;
  width: min(520px, 42vw);
  height: min(270px, 38vh);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: var(--footer-glow);
  background: radial-gradient(ellipse 68% 46% at 50% 50%, rgba(236,236,238,.3), rgba(var(--footer-accent-rgb),.08) 34%, rgba(var(--footer-secondary-rgb),.03) 58%, transparent 78%);
  transition: opacity 760ms ease-out;
}

#site-footer.site-footer-copy .footer-neon-glow,
#site-footer.site-footer-copy .footer-neon-text {
  display: block;
  color: rgba(236,236,238,var(--footer-source));
  transition: color 760ms ease-out, opacity 760ms ease-out;
}

#site-footer.site-footer-copy .footer-neon-glow {
  position: absolute;
  inset: 0;
  opacity: calc(var(--footer-glow) * 2.8);
  filter: blur(9px);
  text-shadow: 0 0 24px rgba(236,236,238,.48), 0 0 58px rgba(var(--footer-accent-rgb),.13);
}

#site-footer.site-footer-copy .footer-neon-text {
  position: relative;
  text-shadow: 0 1px 0 rgba(236,236,238,.18), 0 0 20px rgba(var(--footer-accent-rgb),.055);
}

#site-footer.site-footer-copy .footer-lurk {
  position: absolute;
  z-index: 2;
  left: var(--footer-mark-x);
  top: var(--footer-mark-y);
  width: clamp(430px, 54vw, 760px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#site-footer.site-footer-copy .footer-lurk-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(2.4);
  pointer-events: none;
}

#site-footer.site-footer-copy .footer-lurk-mark-base { opacity: 0; }

#site-footer.site-footer-copy .footer-lurk-mark-material,
#site-footer.site-footer-copy .footer-lurk-mark-edge {
  mix-blend-mode: screen;
  transition: opacity 620ms cubic-bezier(.16,.84,.24,1);
}

#site-footer.site-footer-copy .footer-lurk-mark-material {
  opacity: var(--footer-material);
  filter: grayscale(.65) sepia(.08) hue-rotate(128deg) saturate(1.5) brightness(2.1);
  -webkit-mask-image: radial-gradient(ellipse 28% 22% at var(--footer-light-x) var(--footer-light-y), #000 0 18%, rgba(0,0,0,.9) 38%, rgba(0,0,0,.22) 68%, transparent 86%);
  mask-image: radial-gradient(ellipse 28% 22% at var(--footer-light-x) var(--footer-light-y), #000 0 18%, rgba(0,0,0,.9) 38%, rgba(0,0,0,.22) 68%, transparent 86%);
}

#site-footer.site-footer-copy .footer-lurk-mark-edge-1 {
  opacity: var(--footer-edge-1);
  filter: grayscale(1) brightness(3.1) drop-shadow(0 0 5px rgba(var(--footer-accent-rgb),.28));
  -webkit-mask-image: radial-gradient(ellipse 18% 12% at var(--footer-light-x) var(--footer-light-y), #000 0 16%, rgba(0,0,0,.88) 38%, transparent 78%);
  mask-image: radial-gradient(ellipse 18% 12% at var(--footer-light-x) var(--footer-light-y), #000 0 16%, rgba(0,0,0,.88) 38%, transparent 78%);
}

#site-footer.site-footer-copy .footer-lurk-mark-edge-2 {
  opacity: var(--footer-edge-2);
  filter: grayscale(1) sepia(.15) hue-rotate(205deg) saturate(2) brightness(2.8) drop-shadow(0 0 7px rgba(var(--footer-secondary-rgb),.28));
  -webkit-mask-image: radial-gradient(ellipse 14% 10% at calc(var(--footer-light-x) + 14%) calc(var(--footer-light-y) - 12%), #000 0 14%, rgba(0,0,0,.84) 42%, transparent 80%);
  mask-image: radial-gradient(ellipse 14% 10% at calc(var(--footer-light-x) + 14%) calc(var(--footer-light-y) - 12%), #000 0 14%, rgba(0,0,0,.84) 42%, transparent 80%);
}

#site-footer.site-footer-copy .footer-guide {
  position: absolute;
  z-index: 6;
  right: clamp(40px, 7vw, 112px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(10px, 1.35vh, 14px);
  min-width: clamp(188px, 17vw, 250px);
  font-family: var(--font-ui, 'Share Tech Mono', monospace);
  text-transform: uppercase;
}

#site-footer.site-footer-copy .footer-guide-label {
  display: block;
  margin-bottom: 4px;
  padding: 0 3px 10px;
  border-bottom: 1px solid rgba(236,236,238,.1);
  color: rgba(var(--footer-accent-rgb),.52);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 2.5px;
}

#site-footer.site-footer-copy .footer-guide a,
#site-footer.site-footer-copy .footer-guide .footer-cta {
  position: relative;
  display: grid;
  grid-template-columns: 34px 1fr;
  align-items: center;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 6px 3px;
  border: 0;
  border-radius: 0;
  background: none;
  color: rgba(236,236,238,.62) !important;
  opacity: .46;
  font: inherit;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.25;
  letter-spacing: 3px;
  text-align: left;
  cursor: pointer;
  transition: color .24s ease, opacity .24s ease, transform .12s ease;
}

#site-footer.site-footer-copy .footer-guide a::before,
#site-footer.site-footer-copy .footer-guide .footer-cta::before {
  content: attr(data-channel);
  color: rgba(236,236,238,.28);
  font-size: 9px;
  line-height: 1;
  letter-spacing: 1.5px;
}

#site-footer.site-footer-copy .footer-guide a::after,
#site-footer.site-footer-copy .footer-guide .footer-cta::after {
  content: '';
  position: absolute;
  left: 34px;
  right: 0;
  bottom: 0;
  height: 1px;
  opacity: 0;
  transform: scaleX(.16);
  transform-origin: left;
  background: linear-gradient(90deg, rgba(var(--footer-accent-rgb),.72), rgba(var(--footer-secondary-rgb),.28), transparent);
}

@media (hover: hover) {
  #site-footer.site-footer-copy .footer-guide a:hover,
  #site-footer.site-footer-copy .footer-guide .footer-cta:hover { opacity: .9; color: rgba(236,236,238,.94) !important; }
}

#site-footer.site-footer-copy .footer-guide a:focus-visible,
#site-footer.site-footer-copy .footer-guide .footer-cta:focus-visible {
  outline: 1px solid rgba(var(--footer-accent-rgb),.74);
  outline-offset: 4px;
  opacity: 1;
}

#site-footer.site-footer-copy .footer-guide a:active,
#site-footer.site-footer-copy .footer-guide .footer-cta:active { transform: translateY(1px); }

#site-footer.site-footer-copy .footer-base {
  position: relative;
  z-index: 7;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 72px;
  padding: 20px clamp(24px, 4vw, 56px);
  border-top: 1px solid rgba(236,236,238,.08);
  color: rgba(236,236,238,.38);
  font: 9px/1 var(--font-ui, 'Share Tech Mono', monospace);
  letter-spacing: 2px;
  text-transform: uppercase;
}

#site-footer.site-footer-copy .footer-reel {
  color: rgba(var(--footer-accent-rgb),.66);
  font-family: var(--font-terminal, 'VT323', monospace);
  font-size: 14px;
  letter-spacing: 1px;
}

#site-footer.site-footer-copy:not(.footer-revealed) .footer-ended { opacity: 0; transform: translate(-50%, 12px); }
#site-footer.site-footer-copy:not(.footer-revealed) .footer-neon { opacity: 0; transform: translateY(calc(-50% + 12px)); }
#site-footer.site-footer-copy:not(.footer-revealed) .footer-guide { opacity: 0; transform: translateY(calc(-50% + 12px)); }
#site-footer.site-footer-copy:not(.footer-revealed) .footer-base { opacity: 0; transform: translateY(12px); }

#site-footer.site-footer-copy.footer-revealed .footer-ended,
#site-footer.site-footer-copy.footer-revealed .footer-neon,
#site-footer.site-footer-copy.footer-revealed .footer-guide,
#site-footer.site-footer-copy.footer-revealed .footer-base {
  opacity: 1;
  transition: opacity .48s ease-out, transform .48s cubic-bezier(.16,1,.3,1);
}

#site-footer.site-footer-copy.footer-revealed .footer-ended { transform: translateX(-50%); }
#site-footer.site-footer-copy.footer-revealed .footer-neon { transform: translateY(-50%); }
#site-footer.site-footer-copy.footer-revealed .footer-guide { transform: translateY(-50%); }
#site-footer.site-footer-copy.footer-revealed .footer-base { transform: none; }

@media (max-width: 760px) {
  #site-footer.site-footer-copy { min-height: 900px; }
  #site-footer.site-footer-copy .footer-screen { min-height: 830px; }
  #site-footer.site-footer-copy .footer-ended { top: 58px; }
  #site-footer.site-footer-copy .footer-neon {
    left: 50%;
    top: 34%;
    transform: translate(-50%, -50%);
    font-size: clamp(48px, 15vw, 68px);
  }
  #site-footer.site-footer-copy:not(.footer-revealed) .footer-neon {
    transform: translate(-50%, calc(-50% + 12px));
  }
  #site-footer.site-footer-copy.footer-revealed .footer-neon { transform: translate(-50%, -50%); }
  #site-footer.site-footer-copy .footer-lurk {
    --footer-mark-x: 50%;
    --footer-mark-y: 42%;
    width: min(108vw, 520px);
  }
  #site-footer.site-footer-copy .footer-guide {
    left: 50%;
    right: auto;
    top: 72%;
    width: min(78vw, 270px);
    transform: translate(-50%, -50%);
  }
  #site-footer.site-footer-copy:not(.footer-revealed) .footer-guide {
    transform: translate(-50%, calc(-50% + 12px));
  }
  #site-footer.site-footer-copy.footer-revealed .footer-guide { transform: translate(-50%, -50%); }
  #site-footer.site-footer-copy .footer-base {
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  #site-footer.site-footer-copy { --footer-source: .74; --footer-glow: .09; --footer-room: .03; }
  #site-footer.site-footer-copy,
  #site-footer.site-footer-copy * { animation: none !important; transition: none !important; }
  #site-footer.site-footer-copy .footer-lurk-mark-material { opacity: .12; }
  #site-footer.site-footer-copy:not(.footer-revealed) .footer-ended,
  #site-footer.site-footer-copy:not(.footer-revealed) .footer-neon,
  #site-footer.site-footer-copy:not(.footer-revealed) .footer-guide,
  #site-footer.site-footer-copy:not(.footer-revealed) .footer-base { opacity: 1; }
}