/* =========================================================================
 * The “Layers Of Expertise” tower — the shared stage of the home page (block
 * 7) and of the MXDR service pages (block 4). The rules were moved from
 * assets/css/home/block7-layers.css one to one; the only difference is that the
 * scale comes from --lmx-tower-scale, which every block ties to its own
 * variable (--block7-scale on the home page, --ms-scale on a service page).
 *
 * The coordinates and the timing come from the Figma prototype (frame
 * 36996:16269, SMART_ANIMATE transition 0.6 s, easing EASE_IN =
 * cubic-bezier(.42, 0, 1, 1)); the slabs are coaxial in X and differ only in Y.
 * The layer geometry lives in inc/layers-tower.php.
 * ====================================================================== */

/* stage: sized by height, the width follows from aspect-ratio; pushed to the
   left, leaving a band on the right for the callouts */
.lmx-b7-stage{position:relative;height:min(76vh,calc(700px * var(--lmx-tower-scale,1)));width:auto;aspect-ratio:705 / 922;margin:0 auto 0 0}

/* --- the central laser ----------------------------------------------------
   The texture is a raster fill of the author's node 37002:16482, with the
   brightness converted into alpha. A segment runs from the centre of one slab
   to the centre of the next, with a z-index below every slab; ::before is the
   soft glow around it. */
.lmx-b7-laser{position:absolute;left:50%;width:12.142%;margin-left:calc(12.142% / -2);
  z-index:1;pointer-events:none;
  background:url(../../../../../uploads/2026/08/lmx-b7-laser.png) center/100% 100% no-repeat;
  transform-origin:top center;transform:scaleY(0);opacity:0;
  transition:transform .6s cubic-bezier(.42,0,1,1),opacity .35s ease}
.lmx-b7-laser::before{content:'';position:absolute;left:50%;top:0;width:210%;height:100%;
  transform:translateX(-50%);z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(82,199,198,.34) 0%,rgba(82,199,198,.12) 45%,rgba(82,199,198,0) 78%);
  filter:blur(6px)}
.lmx-b7-stage.is-open .lmx-b7-laser{transform:scaleY(1);opacity:1}
.lmx-b7-laser[data-g="1"]{transition-delay:.04s}
.lmx-b7-laser[data-g="2"]{transition-delay:.08s}
.lmx-b7-laser[data-g="3"]{transition-delay:.12s}
.lmx-b7-laser[data-g="4"]{transition-delay:.16s}
.lmx-b7-laser[data-g="5"]{transition-delay:.20s}

/* --- layers ---------------------------------------------------------------- */
.lmx-b7-layer{position:absolute;transform:translateY(var(--dy));transition:transform .6s cubic-bezier(.42,0,1,1),opacity .28s ease,filter .28s ease}
.lmx-b7-layer img{display:block;width:100%;height:auto;user-select:none;pointer-events:none}
.lmx-b7-stage.is-open .lmx-b7-layer{transform:translateY(0)}
/* the cascade: the top module moves first, the lower ones follow */
.lmx-b7-layer[data-i="1"]{transition-delay:.04s}
.lmx-b7-layer[data-i="2"]{transition-delay:.08s}
.lmx-b7-layer[data-i="3"]{transition-delay:.12s}
.lmx-b7-layer[data-i="4"]{transition-delay:.16s}
.lmx-b7-layer[data-i="5"]{transition-delay:.20s}
.lmx-b7-layer[data-i="6"]{transition-delay:.24s}

/* --- the label on the front face (only the blank slabs of the service pages)
   The coordinates and the angle come from inc/layers-tower.php
   (lmx_tower_plate_text). The size is in cqw — relative to the slab width — so
   the label scales together with the image. */
.lmx-b7-layer.has-face{container-type:inline-size}
/* The label stands on the FRONT FACE of the slab — the vertical panel between
   the baked-in number and the corner (the same place where the text is baked
   into the home slabs): left/top in lmx_render_layers_tower() is the middle of
   that face band, the label is centred on that point and rotated along the
   panel. A long label takes two lines (lmx_tower_face_layout) and the size is
   chosen to fit the band. */
.lmx-b7-face{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:translate(-50%,-50%) rotate(var(--rot,12deg));transform-origin:50% 50%;font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;font-weight:500;font-size:var(--fs,2.2cqw);line-height:1.08;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;color:#f2f5f6;text-shadow:0 1px 1px rgba(0,0,0,.7);pointer-events:none}
.lmx-b7-face-line{display:block}

/* --- callouts -------------------------------------------------------------- */
.lmx-b7-lab{position:absolute;left:100%;top:34%;display:flex;align-items:center;gap:max(6px,calc(12px * var(--lmx-tower-scale,1)));white-space:nowrap;opacity:0;transform:translateX(-10px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.lmx-b7-lab-line{display:block;width:max(24px,calc(58px * var(--lmx-tower-scale,1)));height:1px;background:linear-gradient(90deg,rgba(82,199,198,.7),rgba(82,199,198,.15));flex:0 0 auto}
.lmx-b7-lab-txt{display:flex;flex-direction:column;gap:2px;font-size:max(8px,calc(12px * var(--lmx-tower-scale,1)));letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62);transition:color .28s ease}
/* Stages with a single long description line (the service pages: a level's
   description is one ACF field) wrap the callout text; on the home page the
   lines are given in pairs. */
.lmx-b7-stage--wrap .lmx-b7-lab{white-space:normal;align-items:flex-start}
.lmx-b7-stage--wrap .lmx-b7-lab-line{margin-top:.55em}
.lmx-b7-stage--wrap .lmx-b7-lab-txt span{display:block;width:max(150px,calc(240px * var(--lmx-tower-scale,1)));line-height:1.45}
.lmx-b7-stage.is-done .lmx-b7-lab{opacity:1;transform:translateX(0)}
.lmx-b7-layer[data-i="1"] .lmx-b7-lab{transition-delay:.05s}
.lmx-b7-layer[data-i="2"] .lmx-b7-lab{transition-delay:.15s}
.lmx-b7-layer[data-i="3"] .lmx-b7-lab{transition-delay:.25s}
.lmx-b7-layer[data-i="4"] .lmx-b7-lab{transition-delay:.35s}
.lmx-b7-layer[data-i="5"] .lmx-b7-lab{transition-delay:.45s}
.lmx-b7-layer[data-i="6"] .lmx-b7-lab{transition-delay:.55s}

/* --- hover -----------------------------------------------------------------
   No blur: the highlighted layer becomes SHARPER — a gain in brightness and a
   dense glow along the edge, while the others are simply dimmed. */
.lmx-b7-stage.is-done .lmx-b7-layer{cursor:pointer}
.lmx-b7-stage.has-hover .lmx-b7-layer{opacity:.7}
.lmx-b7-stage.has-hover .lmx-b7-layer.is-hot{opacity:1;filter:brightness(1.28) drop-shadow(0 0 5px rgba(82,199,198,.85))}
.lmx-b7-stage.has-hover .lmx-b7-layer.is-hot .lmx-b7-lab-txt{color:#fff}

/* --- callouts in a column (callouts: column, Our Story) --------------------
   Long callouts do not fit next to the slabs: they are printed as a list beside
   the stage (the block sets the column layout), appear together with the stage
   callouts and light up together with their slab (is-hot is set by
   layers-tower.js). */
.lmx-b7-callouts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;justify-content:space-between;gap:max(14px,calc(24px * var(--lmx-tower-scale,1)));min-width:0}
.lmx-b7-callout{position:relative;margin:0;padding:2px 0 2px max(16px,calc(24px * var(--lmx-tower-scale,1)));border-left:1px solid rgba(82,199,198,.35);opacity:0;transform:translateX(-10px);transition:opacity .5s ease,transform .5s ease,border-color .28s ease}
.lmx-b7-stage.is-done + .lmx-b7-callouts .lmx-b7-callout{opacity:1;transform:none}
.lmx-b7-callout[data-i="1"]{transition-delay:.05s}
.lmx-b7-callout[data-i="2"]{transition-delay:.15s}
.lmx-b7-callout[data-i="3"]{transition-delay:.25s}
.lmx-b7-callout[data-i="4"]{transition-delay:.35s}
.lmx-b7-callout[data-i="5"]{transition-delay:.45s}
.lmx-b7-callout[data-i="6"]{transition-delay:.55s}
.lmx-b7-callout-num{display:block;font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;font-size:max(10px,calc(12px * var(--lmx-tower-scale,1)));letter-spacing:.16em;color:#52C7C6}
.lmx-b7-callout-title{display:block;margin-top:max(4px,calc(6px * var(--lmx-tower-scale,1)));font-family:'Outfit','Poppins',sans-serif;font-weight:400;font-size:max(17px,calc(21px * var(--lmx-tower-scale,1)));line-height:1.25;letter-spacing:-.01em;color:#fff;transition:color .28s ease}
.lmx-b7-callout-text{display:block;margin-top:max(6px,calc(10px * var(--lmx-tower-scale,1)));font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;font-weight:300;font-size:max(13.5px,calc(15px * var(--lmx-tower-scale,1)));line-height:1.55;color:rgba(255,255,255,.7)}
.lmx-b7-callout.is-hot{border-color:#52C7C6}
.lmx-b7-callout.is-hot .lmx-b7-callout-title{color:#52C7C6}

/* The list of levels for narrow screens (only on stages with mobile_list). */
.lmx-b7-mlist{display:none;list-style:none;margin:22px 0 0;padding:0}
.lmx-b7-mlist-item{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:3px;padding:12px 0;border-top:1px solid rgba(255,255,255,.1)}
.lmx-b7-mlist-num{grid-row:1/3;font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.14em;color:#52C7C6;padding-top:2px}
.lmx-b7-mlist-title{font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.lmx-b7-mlist-desc{font-family:'Hanken Grotesk',Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62);line-height:1.5}

/* Below 1440px the callouts start running into the column of indicator dots on
   the right. The stage is measured by height, so it is enough to tighten it —
   the width is recomputed through aspect-ratio and the labels move left with
   it. */
@media (max-width:1440px){
.lmx-b7-stage{height:min(68vh,calc(700px * var(--lmx-tower-scale,1)))}
}
@media (max-width:1024px){
.lmx-b7-stage{height:auto;width:100%;margin:0 auto}
.lmx-b7-lab{display:none}
.lmx-b7-mlist{display:block}
}

/* Less motion — the final state straight away, without the assembly. */
@media (prefers-reduced-motion:reduce){
.lmx-b7-layer{transform:translateY(0)}
.lmx-b7-lab{opacity:1;transform:none}
.lmx-b7-callout{opacity:1;transform:none;transition:none}
}