/* ============================================================================
   LOGO EXPRESSIONS — decorative uses of the official Digital Flow symbol.

   Additive only. Every element here is aria-hidden, pointer-events: none and
   absolutely positioned, so no approved layout, copy or animation is moved.
   The symbol geometry is never redrawn: each expression is the published
   brand file (assets/brand/symbol-flat-warm-white-*.png) used either as an
   <img> or as a CSS mask, with only the fill and the surroundings changing.

   Colours are the canonical tokens from tokens.css, at full value or with
   alpha over Carbon. To remove an expression, delete its block here and its
   one element in index.html; nothing else depends on it.

     1. Liquid Current  -> #people, top-right corner of the card
     2. Monolith Relief -> #contact-close, behind the final CTA card
     3. Lit Matrix      -> #how-it-works, right of the section heading
     4. Liquid Current  -> header brand mark
     5. Signal Rings    -> Digital Guide chat launcher
   ============================================================================ */

.lx-seal,
.lx-monolith,
.lx-matrix,
.lx-launcher,
.lx-brand__current {
  pointer-events: none;
  user-select: none;
}

/* ------------------------------------------- 1. LIQUID CURRENT (People) --
   A seal that sits ON the card's top-right corner: its centre is on the
   corner arc itself (the 24px radius pulls the border 7px in from the box
   corner), so half of it floats outside the card and half rests on it.
   Inside the Carbon disc the symbol is filled by a current of Acid Green with
   an Electric Yellow crest that runs down through the bars continuously.
   .people clips at its own edge (flow-seam), so the disc radius is kept inside
   the section's side padding at every breakpoint. */
.lx-seal {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 2;
  width: 104px;
  height: 104px;
  transform: translate(50%, -50%);
}
/* No disc, no border, no backing: the symbol alone, with a soft glow. */
.lx-seal__disc {
  position: absolute;
  inset: 0;
  filter: drop-shadow(0 0 14px rgba(182, 255, 46, .30));
}
.lx-seal__current {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg,
    rgba(182, 255, 46, .62) 0%, rgba(182, 255, 46, .82) 14%,
    #B6FF2E 24%, #F2FF24 30%, #B6FF2E 36%,
    rgba(182, 255, 46, .85) 52%, rgba(182, 255, 46, .66) 66%,
    #B6FF2E 84%, rgba(182, 255, 46, .62) 100%);
  background-size: 100% 200%;
  background-position: 0 -60%;
  -webkit-mask: url("assets/brand/symbol-flat-warm-white-512.png") center / contain no-repeat;
          mask: url("assets/brand/symbol-flat-warm-white-512.png") center / contain no-repeat;
}
@media (min-width: 1340px) {
  .lx-seal { width: 156px; height: 156px; }
}
@media (max-width: 760px) {
  .lx-seal { top: 12px; right: 12px; width: 66px; height: 66px; }
}

/* ----------------------------------------------------- 2. MONOLITH RELIEF --
   Oversized, cropped by the section, pressed into the surface tone on tone.
   No signal colour. It sits under the CTA card (z-index -1 inside .close's own
   stacking context), so the card and its copy are never affected. */
.lx-monolith {
  position: absolute;
  top: 50%;
  right: clamp(-240px, -11vw, -110px);
  z-index: -1;
  width: clamp(520px, 54vw, 780px);
  aspect-ratio: 1;
  transform: translateY(-47%);
  filter:
    drop-shadow(0 -1px 0 rgba(244, 240, 231, .17))
    drop-shadow(0 4px 6px rgba(0, 0, 0, .55));
}
.lx-monolith__mark {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(242, 238, 230, .058) 0%, rgba(242, 238, 230, .022) 100%);
  -webkit-mask: url("assets/brand/symbol-flat-warm-white-512.png") center / contain no-repeat;
          mask: url("assets/brand/symbol-flat-warm-white-512.png") center / contain no-repeat;
}
@media (max-width: 760px) {
  .lx-monolith { width: 440px; right: -190px; }
}

/* --------------------------------------------------------- 3. LIT MATRIX --
   The symbol as lit points, in the empty right half of the section header.
   Warm White points, a Cream scan line, and six small signal-colour clusters.
   Desktop only: below 1100px the heading needs that space. */
.lx-matrix {
  position: absolute;
  top: 26px;
  right: max(40px, calc((100% - 1120px) / 2));
  width: 220px;
  height: 220px;
  display: none;
}
@media (min-width: 1100px) {
  .lx-matrix { display: block; }
}
.lx-matrix__dots {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(242, 238, 230, .40) 0%, rgba(242, 238, 230, .40) 42%,
    #F4F0E7 50%,
    rgba(242, 238, 230, .40) 58%, rgba(242, 238, 230, .40) 100%);
  background-size: 300% 100%;
  background-position: 50% 0;
  -webkit-mask-image: url("assets/brand/symbol-flat-warm-white-512.png"),
                      radial-gradient(circle, #000 1.1px, transparent 1.5px);
  -webkit-mask-size: 100% 100%, 5px 5px;
  -webkit-mask-repeat: no-repeat, repeat;
  -webkit-mask-composite: source-in;
          mask-image: url("assets/brand/symbol-flat-warm-white-512.png"),
                      radial-gradient(circle, #000 1.1px, transparent 1.5px);
          mask-size: 100% 100%, 5px 5px;
          mask-repeat: no-repeat, repeat;
          mask-composite: intersect;
}
.lx-matrix__dots i { position: absolute; width: 15px; }
.lx-matrix__dots i:nth-child(1) { left: 44px;  top: 100px; height: 15px; background: var(--df-hot-pink, #FF3D9A); }
.lx-matrix__dots i:nth-child(2) { left: 68px;  top: 125px; height: 15px; background: var(--df-acid-green, #B6FF2E); }
.lx-matrix__dots i:nth-child(3) { left: 90px;  top: 58px;  height: 10px; background: var(--df-electric-yellow, #F2FF24); }
.lx-matrix__dots i:nth-child(4) { left: 111px; top: 150px; height: 15px; background: var(--df-acid-green, #B6FF2E); }
.lx-matrix__dots i:nth-child(5) { left: 133px; top: 80px;  height: 15px; background: var(--df-electric-orange, #FF6A1A); }
.lx-matrix__dots i:nth-child(6) { left: 155px; top: 116px; height: 10px; background: var(--df-electric-yellow, #F2FF24); }

/* ------------------------------------------------------ 4. LIQUID CURRENT --
   The header mark is unchanged; a band of Acid Green with an Electric Yellow
   core runs down through its bars once every few seconds, then rests. */
.lx-brand {
  position: relative;
  display: block;
  flex: none;
  line-height: 0;
}
.lx-brand__current {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(182, 255, 46, 0) 0%, rgba(182, 255, 46, 0) 36%,
    #B6FF2E 46%, #F2FF24 50%, #B6FF2E 54%,
    rgba(182, 255, 46, 0) 64%, rgba(182, 255, 46, 0) 100%);
  background-size: 100% 300%;
  background-position: 0 0;
  -webkit-mask: url("shared/brand/symbol-flat-warm-white-128.png") center / contain no-repeat;
          mask: url("shared/brand/symbol-flat-warm-white-128.png") center / contain no-repeat;
}

/* ------------------------------------------- 5. SIGNAL RINGS (Guide chat) --
   Replaces the speech-balloon picture inside the Digital Guide launcher. The
   button itself (#guide-launcher: size, position, click, focus ring) belongs
   to guide/ui and is untouched; only what is drawn inside it changes. The
   rings stay inside the launcher's own 20-22px offset from the viewport. */
.lx-launcher {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.lx-launcher__disc {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* no disc, no border, no backing: the symbol alone, rings show through */
}
.lx-launcher__disc img {
  display: block;
  width: 58%;
  height: 58%;
}
.lx-launcher__ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid var(--df-acid-green, #B6FF2E);
  transform: translate(-50%, -50%);
  opacity: var(--lx-hi);
}
.lx-launcher__ring--1 { width: 96%; height: 96%; --lx-lo: .30; --lx-hi: .90; }
.lx-launcher__ring--2 { width: 128%; height: 128%; --lx-lo: .12; --lx-hi: .50; }
.lx-launcher__ring--3 { width: 156%; height: 156%; --lx-lo: .05; --lx-hi: .24; }

/* ----------------------------------------------------------------- motion --
   Everything above is the resting state, which is also the reduced-motion
   state. Motion is opt-in below and touches opacity, transform and
   background-position only. */
@media (prefers-reduced-motion: no-preference) {
  .lx-launcher__ring { animation: lxPulse 4.8s ease-in-out infinite; }
  .lx-launcher__ring--2 { animation-delay: .6s; }
  .lx-launcher__ring--3 { animation-delay: 1.2s; }

  .lx-seal__current { animation: lxRun 7s linear infinite; }
  @keyframes lxRun {
    from { background-position: 0 0; }
    to   { background-position: 0 -200%; }
  }
  @keyframes lxPulse {
    0%, 100% { opacity: var(--lx-lo); }
    50%      { opacity: var(--lx-hi); }
  }

  /* Seal and matrix arrive with their section's own one-shot reveal. */
  .people .lx-seal {
    opacity: 0;
    transform: translate(50%, -50%) scale(.84);
    transition:
      opacity .9s cubic-bezier(.22, .61, .36, 1) 1.05s,
      transform 1.1s cubic-bezier(.22, .61, .36, 1) 1.05s;
  }
  .people.is-revealed .lx-seal {
    opacity: 1;
    transform: translate(50%, -50%) scale(1);
  }
  .paths .lx-matrix {
    opacity: 0;
    transition: opacity 1.4s cubic-bezier(.22, .61, .36, 1) .6s;
  }
  .paths.is-revealed .lx-matrix { opacity: 1; }

  .lx-matrix__dots { animation: lxScan 6.5s ease-in-out infinite; }
  @keyframes lxScan {
    from { background-position: 100% 0; }
    to   { background-position: 0% 0; }
  }

  .lx-brand__current { animation: lxCurrent 7s cubic-bezier(.45, 0, .25, 1) infinite; }
  @keyframes lxCurrent {
    0%        { background-position: 0 100%; }
    38%, 100% { background-position: 0 0; }
  }
}