/* =========================================================================
 * Block 9 — “The Cybersecurity Tools You Already Have”.
 *
 * Two mirrored ribbons of logos running from the centre towards the edges of
 * the screen.
 *
 * Why the card body is drawn in CSS while only the wordmarks come from the
 * sources: the generated PNGs are square and on a white plate, while the cards
 * are portrait. A square image would have to be either squashed — the logo
 * would distort — or cropped — the frame and the teal tick would drift. The
 * logos were cut out with transparency (design-source/b9-logos) and the body
 * is drawn here, so the proportions and the lighting are the same for all
 * seven.
 *
 * The aspect ratio of the body is set by CARD_AR in block9-logos.js (0.66
 * today, it used to be 0.44 as in the original 218×511 reference). It must not
 * be duplicated here: the width and the height arrive from JS in
 * --b9-cw / --b9-ch.
 *
 * The movement is computed by JS, not by a CSS animation: the scale and the
 * rotation have to be functions of the distance from the centre, while an
 * ordinary marquee can only do a linear shift. Every card holds a progress u
 * from 0 (centre) to 1 (edge); all the values are functions of u, so the ribbon
 * is periodic by construction and the seam of the cycle is invisible.
 * ====================================================================== */

.lmx-b9-inner{position:relative;width:100%;min-height:100vh;background:#000 !important;
  font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;
  padding:0 var(--lmx-section-padding-x);box-sizing:border-box;overflow:hidden;
  --block9-scale:1;
  --lmx-h1-font-family:'Outfit','Poppins',sans-serif;
  --b9-accent:#52C7C6;
  /* the base card size is set by JS from the stage height — the values below are needed
     only for the first frame, before the first measurement, and keep the same
     proportion (CARD_AR in block9-logos.js), otherwise narrow cards flash on that frame */
  --b9-ch:220px;
  --b9-cw:145px}
.lmx-b9-inner *{box-sizing:border-box}

/* --- header --------------------------------------------------------------- */
.lmx-b9-head{text-align:center}
.lmx-b9-eyebrow{display:block;color:var(--b9-accent);
  font-size:max(9px,calc(13px * var(--block9-scale,1)));font-weight:700;
  letter-spacing:.24em;text-transform:uppercase}
.lmx-b9-rule{display:block;width:max(28px,calc(56px * var(--block9-scale,1)));height:2px;
  margin:max(8px,calc(16px * var(--block9-scale,1))) auto 0;border-radius:2px;
  background:var(--b9-accent);box-shadow:0 0 12px rgba(82,199,198,.6)}
.lmx-b9-title{margin:max(10px,calc(20px * var(--block9-scale,1))) 0 0 !important;
  font-family:var(--lmx-h1-font-family) !important;font-weight:700 !important;
  font-size:max(26px,calc(62px * var(--block9-scale,1))) !important;
  line-height:1.06 !important;letter-spacing:-.015em;color:#e8ecef !important}

/* --- stage ---------------------------------------------------------------
   The ribbons run from edge to edge of the screen, so the stage extends past
   the section padding. overflow:hidden crops the cards exactly at the window
   edge — leaving the frame is the very moment where the ribbon quietly closes
   its loop. */
.lmx-b9-stage{position:relative;overflow:hidden;
  width:100vw;margin-left:calc(50% - 50vw);
  height:320px}
.lmx-b9-track{position:absolute;inset:0}

.lmx-b9-card{position:absolute;left:50%;top:50%;
  width:var(--b9-cw);height:var(--b9-ch);
  margin:calc(var(--b9-ch) / -2) 0 0 calc(var(--b9-cw) / -2);
  border-radius:calc(var(--b9-ch) * .055);
  background:linear-gradient(155deg,#2b3239 0%,#191e24 40%,#0b0e12 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),
             inset 0 1px 0 rgba(255,255,255,.26),
             0 22px 48px rgba(0,0,0,.72);
  display:flex;align-items:center;justify-content:center;
  opacity:0;will-change:transform,opacity;backface-visibility:hidden}
.lmx-b9-card img{width:78%;height:auto;display:block;opacity:.95}
/* The front face. On a card of the left track the left edge is turned towards
   the viewer (the right one runs to the vanishing point), on the right track
   it is the other way round, so the highlight is mirrored per track;
   otherwise half of the ribbon looks lit from the back. */
.lmx-b9-track[data-dir="-1"] .lmx-b9-card{
  background-image:linear-gradient(95deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.05) 9%,rgba(255,255,255,0) 34%),
                   linear-gradient(155deg,#2b3239 0%,#191e24 40%,#0b0e12 100%)}
.lmx-b9-track[data-dir="1"] .lmx-b9-card{
  background-image:linear-gradient(265deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.05) 9%,rgba(255,255,255,0) 34%),
                   linear-gradient(205deg,#2b3239 0%,#191e24 40%,#0b0e12 100%)}
/* a teal tick at the bottom face — as in the reference */
.lmx-b9-card::after{content:'';position:absolute;left:50%;bottom:6%;
  width:15%;height:2px;transform:translateX(-50%);border-radius:2px;
  background:#6fe9e4;box-shadow:0 0 10px rgba(82,199,198,.95)}

/* --- subtitle ------------------------------------------------------------- */
.lmx-b9-sub{margin:0 auto !important;text-align:center;
  max-width:calc(760px * var(--block9-scale,1));
  font-size:max(12px,calc(17px * var(--block9-scale,1))) !important;
  line-height:1.6 !important;font-weight:300;color:rgba(255,255,255,.62) !important}

.lmx-b9-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

@media (min-width:1025px){
/* The stage is a backdrop across the full height of the block, not a row in
   the flow. In the reference the outermost cards rise level with the heading:
   there is room because the heading is centred and in the middle of the
   corridor the cards degenerate into narrow strips. So the header and the
   subtitle simply lie over the ribbon, pushed to the edges of the block. */
.lmx-b9-inner{display:grid;align-content:space-between;
  grid-template-rows:auto auto;height:100%;min-height:100%;
  padding-top:max(18px,calc(40px * var(--block9-scale,1)));
  padding-bottom:max(18px,calc(34px * var(--block9-scale,1)))}
.lmx-b9-stage{position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);margin:0;
  width:100vw;height:100%}
.lmx-b9-head,.lmx-b9-sub{position:relative;z-index:2}
}
@media (max-width:1024px){
.lmx-b9-inner{display:block !important;height:auto !important;min-height:0 !important;
  padding:90px 42px 70px}
.lmx-b9-stage{height:300px;margin:34px 0}
.lmx-b9-title{font-size:38px !important}
}
@media (max-width:680px){
.lmx-b9-inner{padding:70px 24px 50px}
.lmx-b9-stage{height:250px}
.lmx-b9-title{font-size:28px !important}
}