/* teas.co.uk — site footer
   Light animated band. Replaces the flat dark-green footer.
   Tokens: paper #fff · mist #eff7f6 · ink #0E0F12 · body #2a3a37 · muted #4b5551
           teal #0b8b7a / #0b6b5f · deep #042220 · pink CTA #e84898 · trust gold #c08a2e
   Two tints only. Three families only: Instrument Serif (display), DM Sans (everything),
   JetBrains Mono (labels: 12px column heads, 11px meta/legal, 10px nothing below).
   Load AFTER the theme stylesheet. Mobile/tablet layers are separate files. */

/* ── motion, copied verbatim from the locked Recipes/Wiki pages. Do not "tidy" the timings. ── */
@keyframes teasHue   { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes teasBlobA { 0% { transform: translate3d(0,0,0) scale(1); } 33% { transform: translate3d(90px,40px,0) scale(1.18); } 66% { transform: translate3d(30px,-52px,0) scale(.92); } 100% { transform: translate3d(0,0,0) scale(1); } }
@keyframes teasBlobB { 0% { transform: translate3d(0,0,0) scale(1.05); } 40% { transform: translate3d(-110px,54px,0) scale(.88); } 75% { transform: translate3d(-40px,-36px,0) scale(1.22); } 100% { transform: translate3d(0,0,0) scale(1.05); } }
@keyframes teasBlobC { 0% { transform: translate3d(0,0,0) scale(.95); } 50% { transform: translate3d(64px,-70px,0) scale(1.3); } 100% { transform: translate3d(0,0,0) scale(.95); } }
@keyframes teasGrid  { from { background-position: 0 0; } to { background-position: 44px 44px; } }
@keyframes teasPulse { 0%,100% { opacity: .40; } 50% { opacity: .95; } }
@keyframes teasPip   { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.35); } }
@keyframes teasSheen { 0% { transform: translate3d(-40%,0,0) rotate(8deg); opacity: 0; } 12% { opacity: .5; } 60% { opacity: .18; } 100% { transform: translate3d(140%,0,0) rotate(8deg); opacity: 0; } }

/* ── shell ── */
.tf-foot {
  position: relative; isolation: isolate; overflow: hidden;
  margin: clamp(36px,4.6vw,56px) auto 0; max-width: 1240px;
  border: 1px solid rgba(4,34,32,.10); border-radius: 34px;
  background: linear-gradient(155deg,#f2faf8 0%,#eff7f6 46%,#f8f4ee 100%);
  color: #0E0F12; font-family: 'DM Sans', system-ui, sans-serif;
}
.tf-foot a { text-decoration: none; color: inherit; }
.tf-blobs { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .72; animation: teasHue 26s linear infinite; }
.tf-blobs i { position: absolute; display: block; border-radius: 50%; }
.tf-blobs i:nth-child(1) { width: 620px; height: 620px; left: -180px; top: -260px; animation: teasBlobA 19s ease-in-out infinite; background: radial-gradient(circle at 42% 42%, rgba(94,234,212,.55), rgba(94,234,212,0) 68%); }
.tf-blobs i:nth-child(2) { width: 560px; height: 560px; right: -160px; top: -140px; animation: teasBlobB 23s ease-in-out infinite; background: radial-gradient(circle at 50% 50%, rgba(255,190,132,.42), rgba(255,190,132,0) 66%); }
.tf-blobs i:nth-child(3) { width: 700px; height: 700px; left: 38%; bottom: -420px; animation: teasBlobC 29s ease-in-out infinite; background: radial-gradient(circle at 50% 50%, rgba(140,196,255,.40), rgba(140,196,255,0) 68%); }
.tf-grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(4,34,32,.055) 1px, transparent 1px); background-size: 22px 22px; animation: teasGrid 7s linear infinite, teasPulse 8s ease-in-out infinite; }
.tf-sheen { position: absolute; top: -20%; bottom: -20%; left: 0; width: 26%; z-index: 0; pointer-events: none; background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.65),rgba(255,255,255,0)); animation: teasSheen 11s ease-in-out infinite; }
.tf-foot > *:not(.tf-blobs):not(.tf-grain):not(.tf-sheen) { position: relative; z-index: 1; }

.tf-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tf-eyebrow { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8a938f; }
.tf-dot { color: rgba(4,34,32,.22); }

/* ── ROW 1 newsletter ── */
.tf-news { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: clamp(18px,2.4vw,34px); align-items: center; padding: clamp(24px,3vw,38px) clamp(20px,3vw,40px); border-bottom: 1px solid rgba(4,34,32,.10); }
.tf-kicker { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px; border: 1px solid rgba(11,139,122,.20); border-radius: 999px; background: rgba(11,139,122,.10); font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #0b6b5f; }
.tf-kicker b { width: 6px; height: 6px; border-radius: 50%; background: #0b8b7a; animation: teasPip 1.9s ease-in-out infinite; }
.tf-h3 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: clamp(26px,3vw,36px); line-height: 1.12; letter-spacing: -.015em; margin: 12px 0 8px; color: #042220; text-wrap: pretty; }
.tf-sub { margin: 0; font-size: 14.5px; line-height: 1.6; color: #4b5551; max-width: 52ch; }
.tf-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; min-width: 0; }
.tf-input { flex: 1 1 200px; min-width: 0; min-height: 48px; padding: 0 18px; border: 1px solid rgba(4,34,32,.14); border-radius: 999px; background: #fff; color: #0E0F12; font-family: inherit; font-size: 14.5px; outline: none; box-shadow: 0 8px 20px -16px rgba(4,34,32,.6); }
.tf-join { flex: 0 0 auto; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: #e84898; color: #fff; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 12px 26px -16px rgba(232,72,152,.9); transition: background .16s ease; }
.tf-join:hover { background: #d43c88; }

/* ── ROW 2 main pages ── */
.tf-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; padding: 16px clamp(20px,3vw,40px); border-bottom: 1px solid rgba(4,34,32,.09); }
.tf-pagepill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border: 1px solid rgba(4,34,32,.12); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .16s ease, border-color .16s ease; }
.tf-pagepill:hover { background: #eff7f6; border-color: rgba(11,139,122,.5); }
.tf-pagepill.is-current { background: #042220; border-color: #042220; color: #fff; font-weight: 700; }

/* ── ROW 3 link grid ── */
.tf-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: clamp(18px,2.2vw,30px); padding: clamp(24px,3vw,38px) clamp(20px,3vw,40px); }
.tf-brandcol { grid-column: 1 / -1; min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 14px 24px; padding-bottom: 22px; border-bottom: 1px solid rgba(4,34,32,.10); }
.tf-col { min-width: 0; }
.tf-lockup { display: flex; align-items: center; gap: 10px; }
.tf-mark { width: 38px; height: 38px; border-radius: 50%; background: #1faa9c; color: #042220; display: inline-flex; align-items: center; justify-content: center; font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 21px; line-height: 1; }
.tf-word { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 24px; letter-spacing: -.005em; color: #042220; }
.tf-tag { font-size: 14px; line-height: 1.6; color: #4b5551; margin: 0; max-width: 46ch; }
.tf-addr { font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.65; color: #6b7671; margin: 0; letter-spacing: .01em; }
.tf-socials { display: flex; gap: 8px; flex-wrap: wrap; }
.tf-socials a { width: 44px; height: 44px; border: 1px solid rgba(4,34,32,.12); border-radius: 50%; background: #fff; color: #2a3a37; display: inline-flex; align-items: center; justify-content: center; transition: border-color .16s ease, color .16s ease; }
.tf-socials a:hover { border-color: rgba(11,139,122,.6); color: #0b8b7a; }

.tf-h4 { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #0b6b5f; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid rgba(4,34,32,.12); }
.tf-acc { display: none; }
.tf-body { display: flex; flex-direction: column; }
.tf-typecols { display: grid; grid-template-columns: 1fr; gap: 0; }
.tf-link { display: flex; align-items: flex-start; min-height: 30px; padding: 4px 0; font-size: 14px; line-height: 1.4; color: #2a3a37; transition: color .14s ease; }
.tf-link:hover { color: #0b8b7a; }

/* ── ROW 4 about + trust, one band ── */
.tf-band { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px; padding: 14px clamp(20px,3vw,40px); border-top: 1px solid rgba(4,34,32,.09); background: rgba(255,255,255,.55); }
.tf-about { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.tf-about a { display: inline-flex; align-items: center; min-height: 36px; font-size: 14px; font-weight: 600; color: #2a3a37; }
.tf-about a:hover { color: #0b8b7a; }
.tf-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; }
.tf-trust li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid rgba(4,34,32,.11); border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 500; color: #2a3a37; white-space: nowrap; }
.tf-tico { display: inline-flex; width: 13px; height: 13px; flex: 0 0 13px; color: #c08a2e; }

/* ── ROW 7 legal ── */
.tf-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding: 16px clamp(20px,3vw,40px) 20px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6b7671; }
.tf-legal-links { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tf-legal-links a { display: inline-flex; align-items: center; min-height: 36px; color: #4b5551; }
.tf-legal-links a:hover { color: #0b8b7a; }

/* focus + reduced motion */
.tf-foot a:focus-visible, .tf-foot button:focus-visible, .tf-foot input:focus-visible { outline: 2px solid #0b8b7a; outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .tf-blobs, .tf-blobs i, .tf-grain, .tf-sheen, .tf-kicker b { animation: none !important; }
  .tf-sheen { opacity: 0; }
}