/* ==========================================================================
   vcx-noise-scoped.css
   Section-bounded noise + LIGHT teal-tinted backdrop.

   Brand palette applied: near-white teal-tinted base (pale #5BBAA7 tint),
   soft teal spotlights (site primary teal #5BBAA7 + deeper #2D8A82),
   teal dot-grid, dark film grain with multiply blend (lightbg tuning).

   Usage: add  data-vcx-texture  to any <section> you want textured.
   JS companion (vcx-noise-scoped.js) injects the .vcx-bg-texture layer.

   Applied places on home: dual-entry routes (.vcx-routes) + bento grid
   (.vcx-bento-section). Creates a soft teal-washed pocket that makes
   pure-white cards separate cleanly while keeping the palette inside
   the brand (white + turquoise + cream flow).

   Readability: all text was already styled for a light base, so the
   original ink-green/gray colours stay and hit WCAG AA without flips.
   ========================================================================== */

/* Host section — positioning context for the texture layer. */
/* No overflow:hidden / isolation:isolate (would break floats / trap blend). */
[data-vcx-texture] {
  position: relative;
}

/* Content inside the section sits above the texture layer. */
[data-vcx-texture] > *:not(.vcx-bg-texture) {
  position: relative;
  z-index: 1;
}

/* The injected texture layer itself.                                         */
/* Base: very pale teal-tinted white — close enough to pure white that dark  */
/* text stays crisp, distinct enough from #FFFFFF cards that the cards       */
/* separate visually. Also warmer than the site's cream so the section       */
/* reads as its own "calm teal pocket" without a harsh boundary.             */
.vcx-bg-texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: #F4FBF8; /* pale teal wash (3% saturation of #5BBAA7 family) */
}

/* Spotlight + dot-grid layer.                                                */
/* Three stacked images:                                                      */
/*   1. Soft teal glow top-center — site primary #5BBAA7                      */
/*   2. Deeper teal glow bottom-right — site accent #2D8A82                   */
/*   3. Teal dot grid — low alpha, keeps structure on-brand                   */
.vcx-bg-texture__gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 70% at 50% -8%,
      rgba(91, 186, 167, 0.26),
      transparent 62%),
    radial-gradient(ellipse 80% 60% at 60% 115%,
      rgba(45, 138, 130, 0.18),
      transparent 65%),
    radial-gradient(rgba(45, 138, 130, 0.14) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px;
  background-position: 0 0, 0 0, 0 0;
}

/* Canvas hosting the animated film grain.                                    */
/* Dark grain (0..55 in JS) on light teal bg; mix-blend-mode: multiply        */
/* only darkens where grain is dark — invisible on pure-white card surfaces, */
/* subtle texture on the teal backdrop.                                       */
.vcx-bg-texture__noise {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  mix-blend-mode: multiply;
  opacity: 0.50;
}

/* --- Variant: routes section (home dual-entry) ------------------------- */
/* Two large cards — slightly stronger top teal so the section has lift    */
/* directly under the hero cream area.                                     */
.vcx-routes[data-vcx-texture] .vcx-bg-texture__gradient {
  background:
    radial-gradient(ellipse 90% 75% at 50% -10%,
      rgba(91, 186, 167, 0.32),
      transparent 64%),
    radial-gradient(ellipse 80% 60% at 65% 115%,
      rgba(45, 138, 130, 0.20),
      transparent 65%),
    radial-gradient(rgba(45, 138, 130, 0.14) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px;
  background-position: 0 0, 0 0, 0 0;
}

/* --- Variant: bento grid ------------------------------------------------ */
/* Five cards competing — softer spotlights so the cards lead the eye.     */
.vcx-bento-section[data-vcx-texture] .vcx-bg-texture__gradient {
  background:
    radial-gradient(ellipse 80% 65% at 50% -6%,
      rgba(91, 186, 167, 0.22),
      transparent 64%),
    radial-gradient(ellipse 75% 55% at 55% 115%,
      rgba(45, 138, 130, 0.14),
      transparent 66%),
    radial-gradient(rgba(45, 138, 130, 0.11) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px;
  background-position: 0 0, 0 0, 0 0;
}

/* --- Force pure-white cards inside the teal-pocket sections ------------- */
/* Cards stay #FFFFFF so they read as crisper than the tinted backdrop.   */
/* Bento cards are already #fff in base CSS.                              */
.vcx-routes[data-vcx-texture] .vcx-route,
.vcx-routes[data-vcx-texture] .vcx-route--primary,
.vcx-routes[data-vcx-texture] .vcx-route--private {
  background: #FFFFFF !important;
  border-color: rgba(45, 138, 130, 0.14);
}

/* Moderate shadow — white cards on pale-teal bg still need lift but less   */
/* dramatic than on dark bg (over-dark shadow on light bg looks muddy).     */
.vcx-routes[data-vcx-texture] .vcx-route {
  box-shadow: 0 1px 2px rgba(26, 47, 42, 0.06),
              0 10px 28px rgba(26, 47, 42, 0.08);
}
.vcx-routes[data-vcx-texture] .vcx-route:hover {
  box-shadow: 0 2px 4px rgba(26, 47, 42, 0.10),
              0 18px 44px rgba(45, 138, 130, 0.16);
}
.vcx-routes[data-vcx-texture] .vcx-route--primary .vcx-route__inner {
  padding: 44px 48px 40px;
}

/* --- Primary CTA: deep teal so white text is readable ------------------ */
/* Previously #5BBAA7 with white = 2.33:1 (WCAG AA fail). Matches the     */
/* c563295 fix on .btn-primary: #1A5A54 base = 7.5:1 with white (AAA      */
/* normal). Hover brightens one step to #236B64 → #2D8A82 (still AA).    */
.vcx-routes[data-vcx-texture] .vcx-route__cta--primary {
  background: #1A5A54 !important;
  background-image: linear-gradient(135deg, #1A5A54 0%, #236B64 100%) !important;
  color: #FFFFFF !important;
  border-color: #1A5A54 !important;
}
.vcx-routes[data-vcx-texture] .vcx-route--primary:hover .vcx-route__cta--primary {
  background: #236B64 !important;
  background-image: linear-gradient(135deg, #236B64 0%, #2D8A82 100%) !important;
  border-color: #236B64 !important;
  color: #FFFFFF !important;
}

/* Keep the ghost CTA on the private card readable — nudge its accent to */
/* teal on hover so the colour family matches the primary on hover.      */
.vcx-routes[data-vcx-texture] .vcx-route--private:hover .vcx-route__cta--ghost {
  border-color: #2D8A82 !important;
  color: #2D8A82 !important;
}

/* --- Text on backdrop: NO flip needed ---------------------------------- */
/* Backdrop is now light (#F4FBF8), so the original ink-green/gray text    */
/* colours from vcx-premium-2.css (#1A2F2A title, #4A5A52 lede, #3D8E7E    */
/* eyebrow, etc.) hit WCAG AA naturally. We only strengthen the rule      */
/* hairline because a teal-on-teal hairline at 22% alpha becomes ghostly.  */
.vcx-routes[data-vcx-texture] .vcx-routes__rule {
  background: rgba(45, 138, 130, 0.32);
}

/* --- Section-edge fade: cream body → teal pocket → cream body --------- */
/* Both colours are light so the transition stays smooth; the fade band   */
/* smooths the hue shift from warm cream (#F4F7F6) to teal-wash.          */
.vcx-routes[data-vcx-texture]::before,
.vcx-routes[data-vcx-texture]::after,
.vcx-bento-section[data-vcx-texture]::before,
.vcx-bento-section[data-vcx-texture]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 40px;
  pointer-events: none;
  z-index: 1;
}
.vcx-routes[data-vcx-texture]::before,
.vcx-bento-section[data-vcx-texture]::before {
  top: 0;
  background: linear-gradient(180deg, rgba(246, 242, 234, 0.85), transparent);
}
.vcx-routes[data-vcx-texture]::after,
.vcx-bento-section[data-vcx-texture]::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(246, 242, 234, 0.85), transparent);
}

/* --- Respect reduced-motion preference ---------------------------------- */
/* Keep the spotlight + grid (they're static) but drop the animated canvas. */
@media (prefers-reduced-motion: reduce) {
  .vcx-bg-texture__noise { display: none !important; }
}

/* --- Mobile tuning ------------------------------------------------------ */
/* Smaller viewports get lighter grain + tighter spotlights.                */
@media (max-width: 720px) {
  .vcx-bg-texture__noise { opacity: 0.38; }

  .vcx-routes[data-vcx-texture] .vcx-bg-texture__gradient {
    background:
      radial-gradient(ellipse 120% 60% at 50% -12%,
        rgba(91, 186, 167, 0.28),
        transparent 66%),
      radial-gradient(ellipse 120% 50% at 60% 115%,
        rgba(45, 138, 130, 0.16),
        transparent 70%),
      radial-gradient(rgba(45, 138, 130, 0.12) 1px, transparent 1px);
    background-size: auto, auto, 18px 18px;
  }
  .vcx-bento-section[data-vcx-texture] .vcx-bg-texture__gradient {
    background:
      radial-gradient(ellipse 120% 55% at 50% -8%,
        rgba(91, 186, 167, 0.20),
        transparent 66%),
      radial-gradient(ellipse 120% 45% at 55% 115%,
        rgba(45, 138, 130, 0.12),
        transparent 70%),
      radial-gradient(rgba(45, 138, 130, 0.10) 1px, transparent 1px);
    background-size: auto, auto, 18px 18px;
  }
}

/* --- Print guard -------------------------------------------------------- */
@media print {
  .vcx-bg-texture { display: none !important; }
  .vcx-routes[data-vcx-texture] .vcx-route,
  .vcx-routes[data-vcx-texture] .vcx-route--primary,
  .vcx-routes[data-vcx-texture] .vcx-route--private {
    background: #FFFFFF !important;
    box-shadow: none !important;
  }
}