/* =========================================================== */
/* AG tail — Footer watermark (§19) + premium footer reveal +   */
/* branded scrollbar (teal) + corner-curl removal.                */
/* Watermark follows AG-FOOTER-STANDARD.md Section 19 canonical         */
/* mechanics exactly: real text, position:absolute BEHIND the footer    */
/* content, bleeding off the bottom edge, clipped by the footer's own   */
/* overflow:hidden. Sized to the footer content width by the inline     */
/* fit routine below the main script block. Fill = the standard's        */
/* image-in-text variant (background-clip:text) with a 3-wave SVG that   */
/* drifts gently (background-position pan, kept faint + slow) so it      */
/* reads as a quiet texture cut into the page, not a graphic on top.     */
/* Footer reveal: the whole <footer> is position:fixed at desktop       */
/* widths (see reference_footer_scroll_reveal_pattern memory) so it     */
/* emerges from behind the last section as you scroll past it, rather   */
/* than just appearing in-flow like a normal page bottom. #ea-main      */
/* reserves a margin-bottom (set by JS) equal to the footer's real      */
/* height so there is no gap. NEVER do this with a transform/translateY */
/* scroll-lag - it opens a real white gap since transform doesn't       */
/* affect layout. Mobile keeps the footer normal in-flow.                */
/* =========================================================== */

/* Corner-curl / page-fold decoration removed sitewide (Quinten 2026-07-16) */
.ea-img-curl, .ea-lightbox-curl { display: none !important; }

#ea-main { position: relative; z-index: 1; background: var(--color-offwhite); }

/* Footer watermark — behind the content, bleeding off the bottom edge */
.ea-footer { position: relative; overflow: hidden; }
.ea-footer > *:not(.ea-footer-wm) { position: relative; z-index: 1; }   /* footer content always above the watermark + clickable */
.ea-footer-wm {
  position: absolute; left: 50%; bottom: -0.14em; transform: translateX(-50%);
  z-index: 0;
  font-family: 'Mercury', Georgia, serif; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em;
  /* fallback size = footer content width * factor; the inline fit routine converges this exactly */
  font-size: calc(min(100vw - 2 * var(--space-container), var(--container-max)) * 0.141);
  line-height: 0.82; white-space: nowrap;
  /* 3 wave bands, visible only through the letters via background-clip:text (real DOM
     text, so no SVG clipPath font-race risk — see reference_svg_clippath_text_font_race).
     background-size:cover + no-repeat is the ONLY combination confirmed safe here — a
     percentage width (`100% 100%`) OR a repeat-x tile (any tile width) silently breaks
     when combined with background-clip:text: big chunks of the text render blank, not
     just the corners. The repeat-x version looked fine on one wide desktop test (enough
     tiles to hide the bug) but reproduced the SAME gap at tablet and mobile widths, incl.
     independent of the mobile scaleY transform (confirmed by isolated testing 2026-07-25
     across multiple sizes) — so no tiling approach is safe here, at any viewport.
     Motion comes from panning background-position-x back and forth WITHIN the single
     cover-fitted image instead (no repeat involved) — cover scales the 4:1 SVG up
     substantially to cover the much-wider-than-tall text box, leaving plenty of extra
     width on both sides to pan through without ever showing an edge. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 100'%3E%3Crect width='400' height='100' fill='%232D3E4A'/%3E%3Cpath d='M0,50 C40,35 80,65 120,50 C160,35 200,65 240,50 C280,35 320,65 360,50 C380,42 400,50 400,50 L400,100 L0,100 Z' fill='%235FA8A3' opacity='0.7'/%3E%3Cpath d='M0,62 C40,77 80,47 120,62 C160,77 200,47 240,62 C280,77 320,47 360,62 C380,70 400,62 400,62 L400,100 L0,100 Z' fill='%233F5563' opacity='0.65'/%3E%3Cpath d='M0,74 C40,59 80,89 120,74 C160,59 200,89 240,74 C280,59 320,89 360,74 C380,82 400,74 400,74 L400,100 L0,100 Z' fill='%231F2B34' opacity='0.6'/%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  background-position-x: 20%;
  background-position-y: center;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  opacity: 0.16;
  pointer-events: none; user-select: none;
  animation: ea-wm-wave-pan 14s ease-in-out infinite alternate;
}
/* mobile: stretch the single line vertically -> taller letters, SAME width (one line, in view) */
@media (max-width: 640px) {
  .ea-footer-wm { transform: translateX(-50%) scaleY(1.6); transform-origin: 50% 100%; }
}
@keyframes ea-wm-wave-pan { from { background-position-x: 20%; } to { background-position-x: 80%; } }
@media (prefers-reduced-motion: reduce) {
  .ea-footer-wm { animation: none; background-position-x: 50%; }
}

/* Premium footer reveal — desktop only. Fixed footer + #ea-main's JS-computed
   margin-bottom (below) is what creates the reveal; nothing here animates. */
@media (min-width: 901px) {
  .ea-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; }
}

/* Branded scrollbar — teal thumb, >=901 only (native on mobile) */
@media (min-width: 901px) {
  html { scrollbar-color: var(--color-teal) transparent; scrollbar-width: thin; }
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: var(--color-teal); border-radius: 8px;
    border: 3px solid var(--color-offwhite);
  }
  ::-webkit-scrollbar-thumb:hover { background: var(--color-charcoal); }
}