/* =====================================================================================
   GLASS-1009: crisp liquid-glass + depth layer for cargado.com (staging: B, nav blur held off)
   Matt, 10/9/2026 ~10:15 AM CT: "can anything be even more 3D or liquid glass but sharper?"

   OPT-IN. Does nothing until <html> carries data-cg-glass:
     <html data-cg-glass="a">  restrained (A)
     <html data-cg-glass="b">  bolder (B)
   Remove the attribute and the page is byte-for-byte the current look.

   Scope rules (why this file is safe to host site-wide):
   - Colors and effects only: background, border-color, box-shadow, backdrop-filter, one pseudo-element
     rim per surface. No width/height/margin/padding/inset/display/font changes, so zero layout shift
     (verified by a rect diff of every element on the page, see README).
   - Nothing filters, blurs, scales or 3D-transforms a text layer. backdrop-filter only blurs what is BEHIND
     a surface; the surface's own text renders normally.
   - One motion change, deliberately bundled: the hero floats' `bob 6s infinite` is stopped. It parks every
     float (and its text) at fractional translateY values (e.g. -5.14px) and forces each blurred surface to
     re-rasterize every frame. cargado-brand already rules "Floats hold still" (adopted 10/1/2026).
   - backdrop-filter only on surfaces that sit over imagery or moving content: the 5 dark hero floats (they
     already had blur(10px)), the Light/Dark toggle, the "Example lanes and figures" pill, and the sticky nav
     only when data-cg-glass-nav="on" (held off for now, see section 3).
     Never on the product window (opaque, 1100x616: blur there is pure cost).

   Colors are cargado-brand tokens (adopted 10/1/2026): Azul 900 #1E3A85 (30,58,133), Azul 950 #0F204B
   (15,32,75), Slate 50 #F8FAFC, Slate 200 #E2E8F0 (226,232,240), Slate 300 #CBD5E1 (203,213,225),
   Slate 900 #0F172A (15,23,42), Slate 950 #020617, Sky 300 #7DD3FC (125,211,252), shadow tints from
   --sh-card / --sh-card-dk / --sh-pw (20,38,92) and (4,10,30). No new brand colors.
   ===================================================================================== */

/* ---------- DNA tokens: A (restrained) ---------- */
html[data-cg-glass] {
  --g-bf: blur(14px) saturate(150%);
  --g-bf-nav: blur(18px) saturate(140%);               /* brand sticky-nav recipe */
  /* specular (1px inner top highlight) */
  --g-spec-dk: rgba(255,255,255,.22);
  --g-spec-lt: rgba(255,255,255,1);
  /* refraction rim: 1px gradient ring, bright top-left, Sky-tinted low edge */
  --g-ring-hi: rgba(255,255,255,.55);
  --g-ring-mid: rgba(255,255,255,.06);
  --g-ring-sky: rgba(125,211,252,.22);
  --g-ring-lo: rgba(255,255,255,.18);
  /* sheen: faint top-down light on dark glass (kept low: it costs text contrast) */
  --g-sheen: rgba(255,255,255,.05);
  /* tints */
  --g-float-bg: linear-gradient(180deg, rgba(30,58,133,.78) 0%, rgba(15,32,75,.84) 100%);
  --g-float-bg-dk: linear-gradient(180deg, rgba(30,41,59,.90) 0%, rgba(15,23,43,.94) 100%);
  --g-toggle-bg: rgba(15,32,75,.44);
  --g-toggle-bg-dk: rgba(2,6,24,.58);
  --g-note-bg: rgba(15,32,75,.58);
  --g-nav-bg: rgba(30,58,133,.82);
  --g-edge-dk: rgba(255,255,255,.18);
  /* layered depth: contact + mid + ambient, blue-tinted, never gray */
  --g-sh-dk: 0 1px 2px rgba(4,10,30,.22), 0 4px 10px -4px rgba(4,10,30,.30), 0 20px 40px -18px rgba(4,10,30,.50);
  --g-sh-lt: 0 1px 2px rgba(15,23,42,.08), 0 4px 10px -4px rgba(20,38,92,.20), 0 20px 40px -18px rgba(20,38,92,.40);
  --g-sh-pw: 0 0 0 1px rgba(255,255,255,.12), 0 1px 2px rgba(4,10,30,.25), 0 12px 28px -12px rgba(4,10,30,.36), 0 40px 80px -32px rgba(4,10,30,.55);
  --g-sh-pw-ring: rgba(255,255,255,.85);
  --g-sh-card: 0 1px 2px rgba(4,10,30,.10), 0 8px 18px -10px rgba(4,10,30,.30), 0 28px 56px -28px rgba(4,10,30,.60);
  --g-sh-nav: inset 0 -1px 0 rgba(255,255,255,.14);
}
/* ---------- DNA tokens: B (bolder) ---------- */
html[data-cg-glass="b"] {
  --g-bf: blur(20px) saturate(180%);
  --g-bf-nav: blur(22px) saturate(170%);
  --g-spec-dk: rgba(255,255,255,.34);
  --g-ring-hi: rgba(255,255,255,.80);
  --g-ring-mid: rgba(255,255,255,.08);
  --g-ring-sky: rgba(125,211,252,.38);
  --g-ring-lo: rgba(255,255,255,.30);
  --g-sheen: rgba(255,255,255,.08);
  --g-float-bg: linear-gradient(180deg, rgba(30,58,133,.76) 0%, rgba(15,32,75,.86) 100%);
  --g-toggle-bg: rgba(15,32,75,.38);
  --g-note-bg: rgba(15,32,75,.52);
  --g-nav-bg: rgba(30,58,133,.74);
  --g-edge-dk: rgba(255,255,255,.26);
  --g-sh-dk: 0 1px 1px rgba(4,10,30,.30), 0 6px 14px -6px rgba(4,10,30,.42), 0 32px 60px -24px rgba(4,10,30,.62);
  --g-sh-lt: 0 1px 1px rgba(15,23,42,.10), 0 6px 14px -6px rgba(20,38,92,.28), 0 32px 60px -24px rgba(20,38,92,.52);
  --g-sh-pw: 0 0 0 1px rgba(255,255,255,.22), 0 1px 2px rgba(4,10,30,.32), 0 16px 32px -14px rgba(4,10,30,.45), 0 56px 100px -36px rgba(4,10,30,.70);
  --g-sh-pw-ring: rgba(255,255,255,1);
  --g-sh-card: 0 1px 1px rgba(4,10,30,.14), 0 10px 22px -10px rgba(4,10,30,.38), 0 40px 72px -30px rgba(4,10,30,.70);
  --g-sh-nav: inset 0 -1px 0 rgba(255,255,255,.20), 0 10px 24px -14px rgba(4,10,30,.50);
}

/* ---------- Fallbacks: solid surfaces, depth kept ----------
   Reduced transparency, reduced motion, and engines without backdrop-filter all get opaque brand fills.
   Rims and shadows stay (they are not transparency); translucency and blur go. */
@media (prefers-reduced-transparency: reduce) {
  html[data-cg-glass] { --g-bf: none; --g-bf-nav: none; --g-sheen: transparent;
    --g-float-bg: linear-gradient(#1E3A85, #1E3A85); --g-float-bg-dk: linear-gradient(#0F172B, #0F172B);
    --g-toggle-bg: #0F204B; --g-toggle-bg-dk: #020617; --g-note-bg: #0F172A; --g-nav-bg: #1E3A85; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-cg-glass] { --g-bf: none; --g-bf-nav: none; --g-sheen: transparent;
    --g-float-bg: linear-gradient(#1E3A85, #1E3A85); --g-float-bg-dk: linear-gradient(#0F172B, #0F172B);
    --g-toggle-bg: #0F204B; --g-toggle-bg-dk: #020617; --g-note-bg: #0F172A; --g-nav-bg: #1E3A85; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-cg-glass] { --g-bf: none; --g-bf-nav: none; --g-sheen: transparent;
    --g-float-bg: linear-gradient(#1E3A85, #1E3A85); --g-float-bg-dk: linear-gradient(#0F172B, #0F172B);
    --g-toggle-bg: #0F204B; --g-toggle-bg-dk: #020617; --g-note-bg: #0F172A; --g-nav-bg: #1E3A85; }
}
/* test hook only (harness forces the fallback in Chromium to prove it renders); harmless in production */
html[data-cg-glass][data-cg-glass-test="solid"] { --g-bf: none; --g-bf-nav: none; --g-sheen: transparent;
  --g-float-bg: linear-gradient(#1E3A85, #1E3A85); --g-float-bg-dk: linear-gradient(#0F172B, #0F172B);
  --g-toggle-bg: #0F204B; --g-toggle-bg-dk: #020617; --g-note-bg: #0F172A; --g-nav-bg: #1E3A85; }

/* =====================================================================================
   1. Hero app-moment floats  (.pw-wrap > .float; f4/f6 are the white variants on Home)
   ===================================================================================== */
html[data-cg-glass] .dv2 [data-pw].pw-wrap > .float {
  animation: none;                                    /* floats hold still: crisp text, no per-frame re-blur */
  isolation: isolate;
}
/* dark glass floats, light hero */
html[data-cg-glass] .dv2 [data-pw].pw-wrap > .float:not(.f4):not(.f6) {
  background: linear-gradient(180deg, var(--g-sheen) 0%, transparent 38%), var(--g-float-bg);
  border-color: var(--g-edge-dk);
  box-shadow: inset 0 1px 0 var(--g-spec-dk), var(--g-sh-dk);
  -webkit-backdrop-filter: var(--g-bf);
  backdrop-filter: var(--g-bf);
}
/* white floats, light hero: opaque (contrast), machined edge + real depth */
html[data-cg-glass] .dv2 [data-pw].pw-wrap > .float:is(.f4, .f6) {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  border-color: #E2E8F0;
  box-shadow: inset 0 1px 0 var(--g-spec-lt), inset 0 -1px 0 rgba(15,23,42,.04), var(--g-sh-lt);
}
/* dark hero mode (.dv2[data-theme=dark]): every float is a dark card */
html[data-cg-glass] .dv2[data-theme="dark"] [data-pw].pw-wrap > .float,
html[data-cg-glass] .dv2[data-theme="dark"] [data-pw].pw-wrap > .float:is(.f4, .f6) {
  background: linear-gradient(180deg, var(--g-sheen) 0%, transparent 38%), var(--g-float-bg-dk);
  border-color: rgba(148,163,184,.22);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), var(--g-sh-dk);
}
html[data-cg-glass] .dv2[data-theme="dark"] [data-pw].pw-wrap > .float:is(.f4, .f6) {
  /* opaque in the page's dark CSS; keep it opaque (a 6-10% see-through let window rows ghost through crisply) */
  background: linear-gradient(180deg, #1E293B 0%, #0F172B 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* refraction rim: a 1px gradient ring laid exactly over the 1px border, under the content */
html[data-cg-glass] .dv2 [data-pw].pw-wrap > .float::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(155deg, var(--g-ring-hi) 0%, var(--g-ring-mid) 34%, var(--g-ring-sky) 72%, var(--g-ring-lo) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
html[data-cg-glass] .dv2 [data-pw].pw-wrap > .float:is(.f4, .f6)::before {
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(226,232,240,.0) 40%, rgba(203,213,225,.9) 100%);
}
html[data-cg-glass] .dv2[data-theme="dark"] [data-pw].pw-wrap > .float::before,
html[data-cg-glass] .dv2[data-theme="dark"] [data-pw].pw-wrap > .float:is(.f4, .f6)::before {
  background: linear-gradient(155deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.03) 34%, rgba(125,211,252,.16) 72%, rgba(255,255,255,.10) 100%);
}

/* =====================================================================================
   2. Product window frame (.pw-pan only; never .pw or anything inside it)
   ===================================================================================== */
html[data-cg-glass] .dv2 .pw-pan {
  box-shadow: var(--g-sh-pw);
  isolation: isolate;
}
/* machined specular edge on the bezel's outer 1px; sits above the scaled .pw, covers no content */
html[data-cg-glass] .dv2 .pw-pan::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(180deg, var(--g-sh-pw-ring) 0%, rgba(255,255,255,.10) 22%, rgba(255,255,255,0) 60%, rgba(255,255,255,.22) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
html[data-cg-glass] .dv2[data-theme="dark"] .pw-pan::after {
  background: linear-gradient(180deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,.06) 22%, rgba(255,255,255,0) 60%, rgba(255,255,255,.10) 100%);
}

/* =====================================================================================
   3. Sticky nav (.navbar5_component). No pseudo-element: Webflow's .w-nav clearfix owns ::before/::after.
   Nav frosted blur is HELD OFF (Matt, 10/9/2026 ~11:30 AM CT: stage B "except the nav bar's frosted blur",
   pending his iPhone and Mac Safari check). Off = the page's own solid nav background, untouched; only the
   bottom rim and drop shadow (--g-sh-nav) are added, and they do not depend on the blur.
   Turn the blur ON later with one change: add data-cg-glass-nav="on" to <html> (same head script).
   ===================================================================================== */
html[data-cg-glass] .navbar5_component.w-nav {
  box-shadow: var(--g-sh-nav);
}
html[data-cg-glass][data-cg-glass-nav="on"] .navbar5_component.w-nav {
  background-color: var(--g-nav-bg);
  -webkit-backdrop-filter: var(--g-bf-nav);
  backdrop-filter: var(--g-bf-nav);
}
/* Home's existing dark-hero rule keeps the nav transparent at the very top; respect it */
html[data-cg-glass][data-cg-hero="dark"].cg-hero-top .section_home_hero_new .navbar5_component {
  background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}

/* =====================================================================================
   4. Light/Dark toggle (.cg-theme): a real glass pill over the hero art
   ===================================================================================== */
html[data-cg-glass] .dv2 [data-pw].pw-wrap > .cg-theme {
  background: var(--g-toggle-bg);
  border-color: rgba(255,255,255,.36);
  box-shadow: inset 0 1px 0 var(--g-spec-dk), var(--g-sh-dk);
  -webkit-backdrop-filter: var(--g-bf);
  backdrop-filter: var(--g-bf);
}
html[data-cg-glass] .dv2 [data-pw].pw-wrap > .cg-theme button[aria-pressed="true"] {
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(15,32,75,.10), 0 1px 2px rgba(4,10,30,.30), 0 4px 10px -4px rgba(4,10,30,.40);
}
html[data-cg-glass] .dv2[data-theme="dark"] [data-pw].pw-wrap > .cg-theme {
  background: var(--g-toggle-bg-dk);
  border-color: rgba(148,163,184,.40);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), var(--g-sh-dk);
}
html[data-cg-glass] .dv2[data-theme="dark"] [data-pw].pw-wrap > .cg-theme button[aria-pressed="true"] {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(0,0,0,.35), 0 4px 10px -4px rgba(0,0,0,.45);
}

/* =====================================================================================
   5. "Example lanes and figures." pill (.pwnote)
   ===================================================================================== */
html[data-cg-glass] .dv2 .pwx > .pwnote {
  /* the page's JS writes background inline on this <p>; !important on this one property only */
  background-color: var(--g-note-bg) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 0 0 1px rgba(255,255,255,.12), 0 1px 2px rgba(4,10,30,.25), 0 6px 14px -8px rgba(4,10,30,.45);
  -webkit-backdrop-filter: var(--g-bf);
  backdrop-filter: var(--g-bf);
}

/* =====================================================================================
   6. "Capacity, connected to your TMS" card (.cov): edge light + depth, no blur (it sits on flat Slate 50)
   ===================================================================================== */
html[data-cg-glass] .cg-cov .cov {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), var(--g-sh-card);
  isolation: isolate;
}
html[data-cg-glass] .cg-cov .cov::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  border-radius: inherit; padding: 1px;
  background: linear-gradient(160deg, var(--g-ring-hi) 0%, var(--g-ring-mid) 30%, var(--g-ring-sky) 75%, var(--g-ring-lo) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}