/* ==========================================================================
   MILA: the glassy liquid footer (Founder, 2026-11-14: "Mila's sites only").
   --------------------------------------------------------------------------
   A frosted pane with a wavy top edge over a soft soil-and-hemp glow. The
   name "Mila" is set huge beneath it, so the glass blurs and bends it. A soft
   light follows the pointer. Colours, type, glass, blur, radius and shadow are
   the site's own tokens (tokens.css, the story's glass); nothing new is named.
   Doctrine §3 bars glass, gradients, shadows and radii over 2px portfolio-wide;
   the Founder ruled this look for Mila's own sites only. OG and Kush Nation
   do not take it.
   Fallbacks: no backdrop-filter, reduced transparency or more contrast give a
   solid ink pane; reduced motion stops the wave and the light; print hides it.
   ========================================================================== */
.foot.lf {
  --lf-pane: color-mix(in srgb, var(--limewash) 8%, var(--story-glass));
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: var(--space-6) calc(min(16vw, 200px) + env(safe-area-inset-bottom));
  background:
    radial-gradient(60% 70% at 12% 100%, color-mix(in srgb, var(--soil) 55%, transparent), transparent 70%),
    radial-gradient(55% 80% at 88% 20%, color-mix(in srgb, var(--hemp) 90%, transparent), transparent 70%),
    var(--ink);
}
.cine .foot.lf, .story .foot.lf { z-index: 1; border-top: 0; }

/* The name beneath the glass */
.lf-word {
  position: absolute; z-index: 0; inset-inline: 0; bottom: -.02em; margin: 0;
  font-family: var(--display); font-weight: var(--w-name); letter-spacing: var(--track-name);
  font-size: min(46vw, 560px); line-height: .8; text-align: center; white-space: nowrap;
  color: var(--root-tone); opacity: .55; user-select: none; pointer-events: none;
}

/* The story's chapter rail steps aside once the footer is in view, so it never sits on the glass */
.rail { transition: opacity var(--dur-quick) var(--ease-out), visibility 0s linear var(--dur-quick); }
.rail.rail-off { opacity: 0; visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .rail { transition: none; } }

/* The pane. The top edge is a wave, drawn as a repeating mask. */
.cine .foot.lf > .wrap.lf-glass, .foot.lf > .wrap.lf-glass {
  --wave-h: 22px;
  position: relative; z-index: 1; width: calc(100% - 2 * var(--edge)); max-width: var(--max);
  padding: calc(var(--space-5) + var(--wave-h)) var(--space-3) var(--space-4);
  background: var(--lf-pane); border: 0; border-radius: var(--story-round);
  -webkit-backdrop-filter: blur(var(--story-blur)) saturate(140%); backdrop-filter: blur(var(--story-blur)) saturate(140%);
  box-shadow: none;
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='22' viewBox='0 0 240 22' preserveAspectRatio='none'%3E%3Cpath d='M0 11 C30 0 90 0 120 11 S210 22 240 11 V22 H0Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask: var(--wave) 0 0 / 240px var(--wave-h) repeat-x, linear-gradient(#000, #000) 0 var(--wave-h) / 100% calc(100% - var(--wave-h)) no-repeat;
          mask: var(--wave) 0 0 / 240px var(--wave-h) repeat-x, linear-gradient(#000, #000) 0 var(--wave-h) / 100% calc(100% - var(--wave-h)) no-repeat;
  animation: lf-flow 14s linear infinite;
}
@keyframes lf-flow {
  from { -webkit-mask-position: 0 0, 0 var(--wave-h); mask-position: 0 0, 0 var(--wave-h); }
  to   { -webkit-mask-position: 240px 0, 0 var(--wave-h); mask-position: 240px 0, 0 var(--wave-h); }
}
/* A soft light under the pointer (footer.js sets --mx and --my) */
.lf-glass::after {
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--limewash) 16%, transparent), transparent 70%);
  opacity: 0; transition: opacity var(--dur-quick) var(--ease-out);
}
.lf-glass.lit::after { opacity: 1; }
.lf-glass > * { position: relative; z-index: 1; }

/* The write-to-us box */
.lf-write { padding: var(--space-3); border: var(--hair) solid var(--rule-on-ink); border-radius: var(--story-round);
  background: color-mix(in srgb, var(--limewash) 6%, transparent); align-self: start; }
.lf-say { margin-bottom: var(--space-2); }
.lf-write a { display: inline-flex; align-items: center; min-height: var(--tap); overflow-wrap: anywhere; }
.foot.lf .foot-fine { border-top-color: var(--rule-on-ink); }
.foot.lf a:focus-visible { outline: 2px solid var(--tailings); outline-offset: 3px; border-radius: 2px; }

@media (max-width: 699px) {
  .foot.lf { padding-block: var(--space-5) calc(22vw + env(safe-area-inset-bottom)); }
  .lf-word { font-size: 54vw; }
}

/* Where there is no backdrop-filter, or the reader asks for less glass: a solid pane */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .foot.lf > .wrap.lf-glass, .cine .foot.lf > .wrap.lf-glass { background: color-mix(in srgb, var(--ink) 94%, var(--limewash)); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .foot.lf > .wrap.lf-glass, .cine .foot.lf > .wrap.lf-glass {
    background: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; border: var(--hair) solid var(--limewash);
  }
  .lf-word { opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
  .foot.lf > .wrap.lf-glass, .cine .foot.lf > .wrap.lf-glass { animation: none; }
  .lf-glass::after { display: none; }
}
@media print { .lf-word, .lf-glass::after { display: none; } .foot.lf { background: none; } }