/* =========================================================================
 * Our Story — block 5, the Interactive Comparison.
 *
 * Architecture: two COMPLETE themes of one composition.
 *   .lmx-ic-theme--light — the base layer in the flow (it sets the section
 *                          height);
 *   .lmx-ic-theme--dark  — a copy on top (inset:0), clipped by clip-path from
 *                          the left edge to the slider position --ic-x.
 * To the left of the handle only the dark layer is visible, to the right only
 * the light one; between them there is no transparency, no gradient zone and
 * no blending — only the 2px divider under the handle. One variable, --ic
 * (0…100), on the root: the script writes it and CSS computes everything else
 * (--ic-x). Moving right widens the dark area: 0 is an entirely light block,
 * 100 an entirely dark one.
 *
 * Dark theme: a black-and-teal background, white headings, light grey text and
 * neon teal (a bright core plus a compact glow plus a soft outer halo — only
 * on the teal elements). Light theme: a cool light grey background, dark
 * headings, grey text and saturated teal with a small glow.
 *
 * The decoration appears through the is-live class with finite CSS animations
 * (is-armed hides it until the block enters); the shift of the object and the
 * flow while dragging is CSS driven by --ic on the WRAPPERS
 * (.lmx-ic-objectwrap, .lmx-ic-flowwrap) with a layer of their own: the
 * drop-shadow filters inside the SVG are rasterised once and are not recomputed
 * while moving (movement inside filtered groups was slow). The dark layer uses
 * will-change: clip-path and the handle and the divider have their own layers;
 * nothing moves at rest and there is no rAF.
 *
 * The heights of the decoration, the cells and the heading are tied to
 * --ms-scale with low bounds, and the flow diagram is height-limited by the
 * scale (otherwise it grows with the column width and on laptops the block did
 * not fit into the window).
 *
 * Narrow screens: the heading, the slider, then the panels one under the
 * other; the dark layer is clipped top to bottom down to --ic-y (0 → both
 * panels light, 50 → the attacker one dark, 100 → both dark); --ic-mid (the
 * panel boundary as a fraction of the height) and --ic-ctrl-top (the slider
 * position) are written by the script on ResizeObserver.
 * ====================================================================== */

.lmx-ic-inner{position:relative;display:block;width:100%;min-height:100vh;background:#e8edf0;color:#141a1f;font-family:var(--lmx-ms-font,'Hanken Grotesk',Helvetica,Arial,sans-serif);box-sizing:border-box;overflow:hidden;
  --ms-scale:1;--ic:50;--ic-x:calc(var(--ic) * 1%);
  --ic-teal:#52C7C6;--ic-teal-hi:#a6f6f4;--ic-teal-deep:#0f8c8b;
  --ic-light-bg:#e8edf0;--ic-ink:#141a1f;--ic-body:#4b555d;
  --ic-dark-bg:#04100f;--ic-white:#f4f8f8;--ic-grey:#c3ccd0}
.lmx-ic-inner *{box-sizing:border-box}

/* --- the two themes --------------------------------------------------------- */
.lmx-ic-theme{position:relative;width:100%;min-height:inherit;display:flex;flex-direction:column}
.lmx-ic-theme--light{background:
    radial-gradient(60% 50% at 18% 22%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%),
    radial-gradient(50% 45% at 84% 74%,rgba(191,220,226,.55),rgba(191,220,226,0) 70%),
    radial-gradient(2.5px 2.5px at 18% 12%,rgba(15,140,139,.75),transparent 60%),
    radial-gradient(9px 9px at 18% 12%,rgba(15,140,139,.22),transparent 60%),
    radial-gradient(2.5px 2.5px at 78% 30%,rgba(15,140,139,.65),transparent 60%),
    radial-gradient(9px 9px at 78% 30%,rgba(15,140,139,.2),transparent 60%),
    radial-gradient(2px 2px at 60% 70%,rgba(15,140,139,.6),transparent 60%),
    var(--ic-light-bg)}
.lmx-ic-theme--dark{position:absolute;inset:0;z-index:2;pointer-events:none;will-change:clip-path;
  clip-path:inset(0 calc(100% - var(--ic-x)) 0 0);
  background:
    radial-gradient(60% 55% at 14% 18%,rgba(82,199,198,.18),rgba(82,199,198,0) 70%),
    radial-gradient(55% 50% at 88% 82%,rgba(82,199,198,.13),rgba(82,199,198,0) 70%),
    radial-gradient(2.5px 2.5px at 18% 12%,#c9fbfa,transparent 60%),
    radial-gradient(12px 12px at 18% 12%,rgba(82,199,198,.35),transparent 60%),
    radial-gradient(2.5px 2.5px at 78% 30%,#c9fbfa,transparent 60%),
    radial-gradient(12px 12px at 78% 30%,rgba(82,199,198,.3),transparent 60%),
    radial-gradient(2px 2px at 60% 70%,#b7f4f3,transparent 60%),
    radial-gradient(10px 10px at 60% 70%,rgba(82,199,198,.28),transparent 60%),
    radial-gradient(2px 2px at 92% 12%,#b7f4f3,transparent 60%),
    linear-gradient(180deg,#04100f 0%,#061716 55%,#04100f 100%)}
.lmx-ic-theme > *{position:relative}

/* --- section heading -------------------------------------------------------- */
.lmx-ic-head{padding:max(28px,calc(72px * var(--ms-scale,1))) var(--lmx-section-padding-x) max(10px,calc(24px * var(--ms-scale,1)));text-align:center}
.lmx-ic-eyebrow{margin:0 0 max(10px,calc(18px * var(--ms-scale,1))) !important;font-family:var(--lmx-ms-font) !important;font-size:max(11px,calc(13px * var(--ms-scale,1))) !important;font-weight:500;letter-spacing:.42em;text-transform:uppercase;line-height:1.3 !important}
.lmx-ic-title{margin:0 auto !important;max-width:24ch;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:400 !important;font-size:max(30px,calc(58px * var(--ms-scale,1))) !important;line-height:1.1 !important;letter-spacing:-.02em;text-wrap:balance}

/* --- the two sides ----------------------------------------------------------- */
.lmx-ic-cells{flex:1 1 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.lmx-ic-cell{display:flex;flex-direction:column;min-height:max(260px,calc(480px * var(--ms-scale,1)));padding:max(18px,calc(44px * var(--ms-scale,1))) max(24px,calc(56px * var(--ms-scale,1))) max(18px,calc(36px * var(--ms-scale,1))) var(--lmx-section-padding-x)}
.lmx-ic-cell--right{padding-left:max(24px,calc(56px * var(--ms-scale,1)));padding-right:var(--lmx-section-padding-x)}
.lmx-ic-copy{position:relative;z-index:2;max-width:560px}
.lmx-ic-side-eyebrow{margin:0 0 max(10px,calc(16px * var(--ms-scale,1))) !important;font-family:var(--lmx-ms-font) !important;font-size:max(11px,calc(13px * var(--ms-scale,1))) !important;font-weight:500;letter-spacing:.38em;text-transform:uppercase;line-height:1.3 !important}
.lmx-ic-side-title{margin:0 !important;font-family:var(--lmx-ms-display,'Outfit','Poppins',sans-serif) !important;font-weight:400 !important;font-size:max(26px,calc(44px * var(--ms-scale,1))) !important;line-height:1.1 !important;letter-spacing:-.02em}
.lmx-ic-side-text{margin:max(10px,calc(18px * var(--ms-scale,1))) 0 0 !important;max-width:520px;font-family:var(--lmx-ms-font) !important;font-size:max(14px,calc(18px * var(--ms-scale,1))) !important;line-height:1.55 !important;font-weight:300}

/* The text colours are final in each theme, with no interpolation. */
.lmx-ic-theme--light .lmx-ic-title,
.lmx-ic-theme--light .lmx-ic-side-title{color:var(--ic-ink) !important}
.lmx-ic-theme--light .lmx-ic-side-text{color:var(--ic-body) !important}
.lmx-ic-theme--light .lmx-ic-eyebrow,
.lmx-ic-theme--light .lmx-ic-side-eyebrow{color:var(--ic-teal-deep) !important;text-shadow:0 0 6px rgba(15,140,139,.28)}
.lmx-ic-theme--dark .lmx-ic-title,
.lmx-ic-theme--dark .lmx-ic-side-title{color:var(--ic-white) !important}
.lmx-ic-theme--dark .lmx-ic-side-text{color:var(--ic-grey) !important}
.lmx-ic-theme--dark .lmx-ic-eyebrow,
.lmx-ic-theme--dark .lmx-ic-side-eyebrow{color:var(--ic-teal) !important;text-shadow:0 0 8px rgba(82,199,198,.75)}

/* The decorative area sits under the text, in the flow. */
.lmx-ic-decor{position:relative;flex:1 1 auto;min-height:max(150px,calc(300px * var(--ms-scale,1)));margin-top:max(12px,calc(28px * var(--ms-scale,1)));z-index:1;overflow:hidden}

/* --- left: the object, the fragments, the glitch lines ---------------------- */
.lmx-ic-objectwrap{position:absolute;left:-4%;top:50%;width:min(62%,420px);will-change:transform;transform:translate(calc((var(--ic) - 50) * .5px),-50%);pointer-events:none}
.lmx-ic-object{display:block;width:100%;height:auto}
.lmx-ic-theme--dark .lmx-ic-object{filter:drop-shadow(0 0 3px #7fe9e8) drop-shadow(0 0 12px rgba(82,199,198,.6))}
/* The halo of the object is more compact: the glow belongs to the arcs and the centre, not to a large blob. */
.lmx-ic-theme--dark .lmx-ic-object-halo{opacity:.55}
.lmx-ic-theme--light .lmx-ic-object-halo{opacity:.7}
.lmx-ic-theme--light .lmx-ic-object{opacity:.85;filter:drop-shadow(0 0 2px rgba(15,140,139,.55)) drop-shadow(0 0 7px rgba(15,140,139,.3))}
.lmx-ic-bar{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);background:currentColor;opacity:var(--o)}
.lmx-ic-theme--dark .lmx-ic-bar{color:#e6f1f2;box-shadow:0 0 4px rgba(255,255,255,.25)}
.lmx-ic-theme--dark .lmx-ic-bar--accent{color:var(--ic-teal);box-shadow:0 0 5px #52c7c6,0 0 14px rgba(82,199,198,.6)}
.lmx-ic-theme--light .lmx-ic-bar{color:#1b262b}
.lmx-ic-theme--light .lmx-ic-bar--accent{color:var(--ic-teal-deep);box-shadow:0 0 4px rgba(15,140,139,.5),0 0 10px rgba(15,140,139,.3)}
.lmx-ic-glitch{position:absolute;left:var(--x);top:var(--y);font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;font-size:max(11px,calc(13px * var(--ms-scale,1)));font-weight:500;letter-spacing:.32em;text-transform:uppercase;white-space:nowrap;line-height:1}
.lmx-ic-theme--dark .lmx-ic-glitch{color:#eef7f7;text-shadow:0 0 6px rgba(255,255,255,.4),0 0 14px rgba(82,199,198,.35)}
.lmx-ic-theme--light .lmx-ic-glitch{color:#1b262b;text-shadow:0 0 6px rgba(15,140,139,.18)}

/* Appearance: is-armed hides the lines and the fragments, is-live starts the
   finite animations — typing letter by letter (steps by the number of
   characters, --n), a short line shift and the fragments flying out. After them
   nothing moves. */
.lmx-ic-inner.is-armed .lmx-ic-glitch{clip-path:inset(0 100% 0 0)}
.lmx-ic-inner.is-armed .lmx-ic-bar{opacity:0}
.lmx-ic-inner.is-live .lmx-ic-glitch{animation:lmx-ic-type .5s steps(var(--n,8),end) var(--d,0s) both,lmx-ic-jitter .3s linear calc(var(--d,0s) + .12s) 1}
.lmx-ic-inner.is-live .lmx-ic-bar{animation:lmx-ic-bar .5s cubic-bezier(.2,.7,.2,1) var(--d,0s) both}
@keyframes lmx-ic-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes lmx-ic-jitter{0%{transform:translateX(0)}30%{transform:translateX(-5px)}60%{transform:translateX(4px)}100%{transform:translateX(0)}}
@keyframes lmx-ic-bar{from{opacity:0;transform:translateX(-18px)}to{opacity:var(--o,1);transform:translateX(0)}}

/* --- right: the data flow -------------------------------------------------- */
.lmx-ic-decor--flow{display:flex;align-items:center;justify-content:center}
.lmx-ic-flowwrap{display:block;width:100%;will-change:transform;transform:translate(calc((var(--ic) - 50) * .3px),calc((50 - var(--ic)) * .15px))}
.lmx-ic-flow{display:block;width:100%;height:auto;max-height:max(150px,calc(340px * var(--ms-scale,1)));overflow:visible}
.lmx-ic-flow-label{font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;font-size:11px;font-weight:600;letter-spacing:.32em}
/* Dark theme: a bright core, a compact glow and a soft halo — on the teal elements only. */
.lmx-ic-theme--dark .lmx-ic-flow-lines--0{filter:drop-shadow(0 0 3px rgba(82,199,198,.9)) drop-shadow(0 0 9px rgba(82,199,198,.45))}
.lmx-ic-theme--dark .lmx-ic-flow-lines--1,
.lmx-ic-theme--dark .lmx-ic-flow-lines--2{filter:drop-shadow(0 0 4px rgba(82,199,198,.55))}
.lmx-ic-theme--dark .lmx-ic-flow-nodes{filter:drop-shadow(0 0 3px #7fe9e8) drop-shadow(0 0 10px rgba(82,199,198,.8))}
.lmx-ic-theme--dark .lmx-ic-node{fill:#dffdfc}
.lmx-ic-theme--dark .lmx-ic-node-glow{opacity:.5}
.lmx-ic-theme--dark .lmx-ic-flow-callouts{filter:drop-shadow(0 0 4px rgba(82,199,198,.85))}
.lmx-ic-theme--dark .lmx-ic-flow-label{fill:var(--ic-teal)}
/* Light theme: saturated teal with a small glow. */
.lmx-ic-theme--light .lmx-ic-flow-lines--0{filter:drop-shadow(0 0 2px rgba(15,140,139,.6)) drop-shadow(0 0 6px rgba(15,140,139,.3))}
.lmx-ic-theme--light .lmx-ic-flow-lines--1,
.lmx-ic-theme--light .lmx-ic-flow-lines--2{filter:drop-shadow(0 0 3px rgba(15,140,139,.35))}
.lmx-ic-theme--light .lmx-ic-flow path{stroke:#1a9e9d}
.lmx-ic-theme--light .lmx-ic-flow-nodes{filter:drop-shadow(0 0 2px rgba(15,140,139,.75)) drop-shadow(0 0 7px rgba(15,140,139,.45))}
.lmx-ic-theme--light .lmx-ic-node{fill:#0f8c8b}
.lmx-ic-theme--light .lmx-ic-node-glow{fill:#2eb6b5;opacity:.35}
.lmx-ic-theme--light .lmx-ic-flow-callouts{filter:drop-shadow(0 0 3px rgba(15,140,139,.6))}
.lmx-ic-theme--light .lmx-ic-flow-callouts line{stroke:#1a9e9d}
.lmx-ic-theme--light .lmx-ic-flow-label{fill:#0f8c8b}
.lmx-ic-theme--light .lmx-ic-flow-grid line{stroke:#0f8c8b;stroke-opacity:.22}

/* --- divider, slider, handle ------------------------------------------------- */
.lmx-ic-divider{position:absolute;top:0;bottom:0;left:var(--ic-x);width:2px;margin-left:-1px;z-index:5;pointer-events:none;will-change:transform;background:var(--ic-teal-hi);
  box-shadow:0 0 2px #fff,0 0 8px var(--ic-teal),0 0 22px rgba(82,199,198,.7)}
.lmx-ic-control{position:absolute;inset:0;z-index:6}
.lmx-ic-range{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;background:transparent;touch-action:pan-y;max-width:none}
.lmx-ic-range::-webkit-slider-thumb{-webkit-appearance:none;width:64px;height:100%}
.lmx-ic-range::-moz-range-thumb{width:64px;height:100%;border:0;background:transparent}
.lmx-ic-range::-webkit-slider-runnable-track{height:100%;background:transparent}
.lmx-ic-range::-moz-range-track{height:100%;background:transparent}
.lmx-ic-track{display:none}
.lmx-ic-handle{position:absolute;left:var(--ic-x);top:var(--ic-handle-top,50%);transform:translate(-50%,-50%);will-change:transform;width:max(44px,calc(52px * var(--ms-scale,1)));height:max(44px,calc(52px * var(--ms-scale,1)));border-radius:50%;background:#071716;border:1.5px solid var(--ic-teal-hi);color:#e9fffe;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:7;
  box-shadow:0 0 0 3px rgba(82,199,198,.22),0 0 10px var(--ic-teal),0 0 30px rgba(82,199,198,.6)}
.lmx-ic-handle svg{width:50%;height:50%;display:block;filter:drop-shadow(0 0 4px var(--ic-teal-hi))}
.lmx-ic-range:hover ~ .lmx-ic-handle{border-color:#fff}
.lmx-ic-range:focus-visible ~ .lmx-ic-handle{outline:3px solid #fff;outline-offset:3px;box-shadow:0 0 0 3px rgba(82,199,198,.4),0 0 14px var(--ic-teal),0 0 36px rgba(82,199,198,.9)}

/* --- desktop: the section fits the window, the themes span the full height --- */
@media (min-width:1025px){
.lmx-ic-inner{height:100%;min-height:100%}
.lmx-ic-theme--light{min-height:100%}
}

/* --- narrow screens: the heading, the slider, the panels one under the other - */
@media (max-width:1024px){
.lmx-ic-inner{min-height:0;--ic-mid:.5;--ic-y:calc(clamp(0,var(--ic) / 50,1) * var(--ic-mid) + clamp(0,(var(--ic) - 50) / 50,1) * (1 - var(--ic-mid)))}
.lmx-ic-theme{min-height:0}
/* The dark layer is clipped top to bottom: 0 — both panels light, 50 — the attacker one dark, 100 — both dark. */
.lmx-ic-theme--dark{clip-path:inset(0 0 calc((1 - var(--ic-y)) * 100%) 0)}
.lmx-ic-head{padding:76px var(--lmx-section-padding-x) 104px}
.lmx-ic-title{font-size:36px !important}
.lmx-ic-cells{grid-template-columns:minmax(0,1fr)}
.lmx-ic-cell{min-height:0;padding:26px var(--lmx-section-padding-x) 30px}
.lmx-ic-cell--right{padding-left:var(--lmx-section-padding-x);padding-right:var(--lmx-section-padding-x)}
.lmx-ic-copy,.lmx-ic-side-text{max-width:none}
.lmx-ic-side-title{font-size:30px !important}
.lmx-ic-side-text{font-size:15px !important}
.lmx-ic-decor{min-height:200px;margin-top:18px}
.lmx-ic-flow{max-height:none}
/* The boundary between the themes is a horizontal line at --ic-y; the slider is a bar in the bottom padding of the heading. */
.lmx-ic-divider{left:0;right:0;width:auto;margin:0;top:calc(var(--ic-y) * 100%);bottom:auto;height:2px;margin-top:-1px}
.lmx-ic-control{inset:auto;left:var(--lmx-section-padding-x);right:var(--lmx-section-padding-x);top:var(--ic-ctrl-top,220px);height:64px}
.lmx-ic-range{height:64px}
.lmx-ic-track{display:block;position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,#04100f 0,#04100f var(--ic-x),#e8edf0 var(--ic-x),#e8edf0 100%);box-shadow:0 0 0 1px rgba(82,199,198,.7),0 0 8px rgba(82,199,198,.45)}
.lmx-ic-handle{top:50%}
/* Simpler decoration: fewer fragments, a smaller object, larger flow labels. */
.lmx-ic-bar:nth-of-type(n+19){display:none}
.lmx-ic-objectwrap{width:min(58%,300px)}
.lmx-ic-glitch{font-size:11px;letter-spacing:.26em}
.lmx-ic-flow-label{font-size:13px}
}
@media (max-width:480px){
.lmx-ic-title{font-size:30px !important}
.lmx-ic-side-title{font-size:26px !important}
.lmx-ic-decor{min-height:180px}
.lmx-ic-glitch{font-size:11px;letter-spacing:.2em}
.lmx-ic-flow-label{font-size:15px}
}

/* --- less motion: everything at once in its final state, the slider still works --- */
@media (prefers-reduced-motion:reduce){
.lmx-ic-inner .lmx-ic-glitch,
.lmx-ic-inner .lmx-ic-bar{animation:none !important;clip-path:none !important}
.lmx-ic-inner .lmx-ic-bar{opacity:var(--o,1) !important}
.lmx-ic-inner *{transition:none !important}
.lmx-ic-objectwrap{transform:translateY(-50%) !important}
.lmx-ic-flowwrap{transform:none !important}
}