/* === glass (בנאי, 30.10.2026) — separate file, loaded last. Real see-through Liquid Glass for the reading cards and
   their inner rows. Does not touch the door / threshold / veil / 3D rules. Every fallback in style.css that uses
   !important (no backdrop-filter, prefers-reduced-transparency, widget high contrast / hide images, forced colours,
   print) still wins over these rules, on purpose.
   Phone (<=900px or touch) and desktop are two separate designs (below). Chromium desktop also gets edge refraction:
   assets/js/glass.js builds one SVG displacement filter per card (html.g-refract, --g-refract). === */

/* ---------- shared ---------- */
:root:root .into-light .split > .copy,
:root:root .into-light .section > .container:not(:has(.split)),
:root:root .site-footer {
  --ink-2: #1f1f22; --g-a: .3;   /* fill strength (see the two designs) */
  border: 0;
  /* Liquid-Glass decoration (Yoav 30.10.2026), white-only layers over the fill, so they can only raise the text
     contrast: a top specular glow, a glass ring etched in the lower corner, a depth sheen and fine diagonal lines */
  background:
    radial-gradient(ellipse 58% 34% at 14% 0%, rgb(255 255 255 / .34), transparent 70%),
    radial-gradient(circle at 94% 94%, transparent 0 64px, rgb(255 255 255 / .42) 65px 66.5px, transparent 68px 86px, rgb(255 255 255 / .24) 87px 88px, transparent 89px 118px, rgb(255 255 255 / .14) 119px 120px, transparent 121px),
    linear-gradient(118deg, transparent 0 38%, rgb(255 255 255 / .16) 46%, transparent 47.5%, transparent 52%, rgb(255 255 255 / .08) 55%, transparent 58%),
    repeating-linear-gradient(118deg, rgb(255 255 255 / .07) 0 1px, transparent 1px 26px),
    linear-gradient(158deg, rgb(255 255 255 / calc(var(--g-a) + .12)) 0%, rgb(255 255 255 / var(--g-a)) 34%, rgb(255 255 255 / calc(var(--g-a) - .02)) 66%, rgb(255 255 255 / calc(var(--g-a) + .04)) 100%);
}
/* the glass thickness: a bevel band several px wide around the edge (::after, masked to a ring with
   mask-composite exclude / -webkit-mask-composite xor): a specular highlight along the top, light on the sides,
   an inner shadow along the bottom, and a lit diagonal rim; the pointer spot of ui.js adds to it. It lies in the
   card's padding only (no text over it). ::before stays the pointer sheen of style.css. */
:root { --g-bev: 10px; }
@media (max-width: 900px), (hover: none) { :root { --g-bev: 7px; } }
html.scene-live:root :is(.into-light .split > .copy, .into-light .section > .container:not(:has(.split)), .site-footer)::after {
  opacity: 1; padding: var(--g-bev);
  background:
    radial-gradient(240px circle at var(--px, 50%) var(--py, 0), rgb(255 255 255 / calc(var(--spec, 0) * .9)), transparent 75%),
    linear-gradient(180deg, rgb(255 255 255 / .95) 0, rgb(255 255 255 / .62) 1.5px, rgb(255 255 255 / .36) calc(var(--g-bev) * .5), rgb(255 255 255 / .1) var(--g-bev),
      transparent calc(var(--g-bev) * 2.2), transparent calc(100% - var(--g-bev) * 2.2), rgb(0 0 0 / .05) calc(100% - var(--g-bev)), rgb(0 0 0 / .11) calc(100% - 1.5px), rgb(0 0 0 / .16) 100%),
    linear-gradient(90deg, rgb(255 255 255 / .5) 0, rgb(255 255 255 / .16) var(--g-bev), transparent calc(var(--g-bev) * 1.6),
      transparent calc(100% - var(--g-bev) * 1.6), rgb(255 255 255 / .1) calc(100% - var(--g-bev)), rgb(255 255 255 / .34) 100%),
    linear-gradient(150deg, rgb(255 255 255 / .9) 0%, rgb(255 255 255 / .35) 14%, rgb(255 255 255 / .08) 42%, rgb(255 255 255 / .04) 58%, rgb(255 255 255 / .22) 84%, rgb(255 255 255 / .5) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
/* inner rows (the 'what we fix' list, promise / peace / add-on cards): thinner glass layered on the card */
:root:root .into-light .fix-list li,
:root:root .into-light :is(.promise-card, .peace-list li, .addon-card),
:root:root .into-light .section:not(.section-alt) .promise-card {
  background: linear-gradient(165deg, rgb(255 255 255 / .34), rgb(255 255 255 / .14) 55%, rgb(255 255 255 / .2));
  border: 1px solid rgb(255 255 255 / .55); border-bottom-color: rgb(255 255 255 / .25);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(0 0 0 / .05), inset 0 10px 16px -12px rgb(255 255 255 / .8),
    0 1px 1px rgb(0 0 0 / .05), 0 10px 22px -14px rgb(0 0 0 / .32); }

/* ---------- desktop design (fine pointer, wider than 900px) ---------- */
@media (min-width: 901px) and (hover: hover) {
  :root:root .into-light .split > .copy,
  :root:root .into-light .section > .container:not(:has(.split)),
  :root:root .site-footer {
    --g-a: .3;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .95),                  /* top specular line */
      inset 0 2px 1px -1px rgb(255 255 255 / .8),
      inset 0 -1px 0 rgb(0 0 0 / .1), inset 0 -3px 2px -2px rgb(0 0 0 / .08), /* the bottom edge of the slab */
      inset 1px 0 0 rgb(255 255 255 / .45), inset -1px 0 0 rgb(255 255 255 / .3),
      inset 0 22px 30px -26px rgb(255 255 255 / .9),          /* light caught inside the top bevel */
      inset 0 -26px 34px -28px rgb(0 0 0 / .16),              /* the thickness: darker lower bevel */
      inset 18px 0 26px -26px rgb(255 255 255 / .55), inset -18px 0 26px -26px rgb(255 255 255 / .35),
      0 1px 2px rgb(0 0 0 / .1), 0 4px 8px -3px rgb(0 0 0 / .1), 0 14px 28px -14px rgb(0 0 0 / .22), 0 34px 60px -30px rgb(0 0 0 / .26), 0 70px 120px -50px rgb(0 0 0 / .42); }
  :root:root .into-light .split > .copy.gv,
  :root:root .into-light .section > .container.gv:not(:has(.split)),
  :root:root .site-footer.gv {
    -webkit-backdrop-filter: blur(7px) saturate(190%) brightness(1.06); backdrop-filter: blur(7px) saturate(190%) brightness(1.06); }
  /* Chromium: the same, plus the edge refraction (SVG feDisplacementMap made per card by glass.js) */
  html.g-refract:root :is(.into-light .split > .copy, .into-light .section > .container:not(:has(.split)), .site-footer).gv[style*="--g-refract"] {
    backdrop-filter: blur(7px) saturate(190%) brightness(1.06) var(--g-refract); }
}

/* ---------- phone / touch design ---------- */
@media (max-width: 900px), (hover: none) {
  :root:root .into-light .split > .copy,
  :root:root .into-light .section > .container:not(:has(.split)),
  :root:root .into-light .split > .copy.gv,
  :root:root .into-light .section > .container.gv:not(:has(.split)),
  :root:root .site-footer, :root:root .site-footer.gv {
    --g-a: .44;   /* .36 -> .44 (30.10): the room's dark door frame behind phone text gave 2.3:1 at the worst pixel */
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .95), inset 0 2px 1px -1px rgb(255 255 255 / .75),
      inset 0 -1px 0 rgb(0 0 0 / .1), inset 0 -3px 2px -2px rgb(0 0 0 / .07),
      inset 0 16px 22px -18px rgb(255 255 255 / .9),
      inset 0 -18px 24px -20px rgb(0 0 0 / .14),
      inset 12px 0 18px -18px rgb(255 255 255 / .5), inset -12px 0 18px -18px rgb(255 255 255 / .35),
      0 1px 1px rgb(0 0 0 / .08), 0 3px 6px -2px rgb(0 0 0 / .09), 0 10px 20px -10px rgb(0 0 0 / .2), 0 36px 60px -30px rgb(0 0 0 / .4); }
  :root:root .into-light .split > .copy.gv,
  :root:root .into-light .section > .container.gv:not(:has(.split)),
  :root:root .site-footer.gv {
    -webkit-backdrop-filter: blur(3px) saturate(185%) brightness(1.05); backdrop-filter: blur(3px) saturate(185%) brightness(1.05); }
}

/* ---------- scroll: the copy rises a little inside its glass as the card comes in (transform only: no layout
   shift; off under reduced motion / 'Stop animations'); the card itself is not moved (deco.js measures it) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.scene-live:not(.wa-still) .into-light :is(.split > .copy, .section > .container:not(:has(.split))) > :is(h2, h3, p, ul, ol) {
      animation: g-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
  }
}
@keyframes g-rise { from { translate: 0 22px; } to { translate: 0 0; } }


/* text on the clearer glass: links one step deeper (still the one blue), so they keep >= 4.5:1 over the darker
   grey floor of the room near the end of the page */
:root:root .into-light :is(.split > .copy, .section > .container) a:not(.btn), :root:root .site-footer a:not(.btn) { color: #001f45; }
/* the footer sits over the room's exit door (dark frame lines): a little more frost there */
:root:root .site-footer, :root:root .site-footer.gv { --g-a: .42; }
/* מבקר #2 (31.10.2026): at 1920 the footer links sat on the dark-grey streaks of the footer's own .glow beams (they paint
   above the glass fill inside the isolated footer, so --g-a could not help: .7 still gave 2.9:1). Half-strength beams:
   every footer text >= 4.5:1 against the darkest background pixel under it (worst 5.07:1, measured; .6 gave 4.44). */
:root:root .site-footer > .glow { opacity: .5; }

/* ---------- the card emblems (Yoav 30.10.2026): the simple flat 2D emblems inside the card, exactly as before the
   3D symbols (style.css v8.7/v8.9 placement: desktop top inline-end corner, phone own row above the heading).
   No pointer tilt, no float, on every device. deco.js's 3D copies are off at the source (scene3d.js DECO = false)
   and nothing is marked .has-deco3d any more. ---------- */
:root .emblem, :root .emblem.emblem-wide { transform: none !important; translate: none !important; animation: none !important;
  transition: none !important; will-change: auto !important; }
/* #27 FLIP (round4.js): compositor layers only while a card opens or closes. .r27-anim is added when the
   animation starts and removed in cleanup() when it ends, so no text card keeps a permanent will-change layer. */
.r27-anim, .r27-anim > *, .r27-anim .r27-in { will-change: transform, opacity; }
/* while it scales, the moving card drops its live blur (re-filtering the backdrop every frame is the main cost on
   phones: Pixel 7 at 4x CPU ~38 -> ~53 fps) and takes a denser fill instead, so its text contrast only goes up */
/* uifix1 (Yoav 31.10.2026): REMOVED. Switching the blur off at the start of the animation and back on at the end made
   the card flash to a flat/white slab and back on real GPUs (Chrome, Safari). The card now keeps exactly the same glass
   (same fill, same backdrop-filter) for the whole open/close. Was:
   :root:root .r27-anim.r27-card { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; --g-a: .62; } */

/* WCAG 1.4.10 / 2.4.11 at 400% zoom (CHECKLISTS_HE #5, 30.10.2026): on very short viewports the sticky header took
   ~30% of the screen; there it scrolls away with the page, and the anchor offset it needed goes with it */
@media (max-height: 420px) {
  /* harden1-copy (mevaker #1): relative, not static, so z-index:20 keeps the header above .page-hero (margin-top:-66px) */
  :root:root .site-header { position: relative; }
  :root:root { scroll-padding-top: 0; }
}
/* round5 review #5 (desktop only): the full-width text cards were 1200px wide while their text is capped at the 46rem
   measure (style.css:25/226), leaving ~340px of empty glass on the reading-start side. The card now hugs the measure
   (58rem = 46rem text + the 3.75rem padding each side + room for the corner emblem), centred. Split cards unchanged. */
@media (min-width: 1021px) {
  :root .into-light .section > .container:not(:has(.split)) { width: min(100% - 2 * var(--gutter), 58rem); }
}

/* iPhone Safari video (Yoav 31.10.2026): on phone the a11y trigger (48px at 76px) and the chat button (48px at 16px)
   stand fixed in the bottom corner, above Safari's bar. Focus moves, #links and opened-card reveals stop the target
   above that stack (WCAG 2.4.11), and the page can always scroll its last line clear of it. Same media as the trigger's
   phone placement (round2_widget.css); desktop unchanged. 136px = 16 + 48 + 12 + 48 + 12 margin. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) and (max-width: 1020px) {
  :root:root { scroll-padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
  :root:root .site-footer { padding-bottom: calc(136px + env(safe-area-inset-bottom, 0px)); }
}