/* Aplike desktop image-stage design. Canonical desktop composition for
   1200x630 Drupal responsive images: black media stage + separate copy panel.
   This is a component stylesheet, not a late override or patch.
   Exclusions: front, /best and descendants, /about-us and contacts.
   Mobile continues to use the existing layout and can be optimized later. */
@media (min-width:1121px) {
  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene,
  .apx-site--services .apx-services-overview {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    align-items:start;
    --apx-stage-gap:clamp(22px,2.8vw,38px);
    gap:var(--apx-stage-gap);
    margin-block:0 clamp(28px,3.7vw,52px);
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
    overflow:visible;
    isolation:isolate;
  }
  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene::before,
  .apx-site--services .apx-services-overview::before,
  .apx-site--services .apx-services-overview::after { content:none; }

  /* Intentionally no bordered rectangle: the black plate fades into the page
     while the image retains its native 40:21 framing and pixel fidelity. */
  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene__visual,
  .apx-site--services .apx-services-overview__visual {
    position:relative;
    width:min(100%,1200px);
    max-width:1200px;
    min-height:0;
    aspect-ratio:40 / 21;
    margin-inline:auto;
    padding:0;
    display:grid;
    place-items:center;
    border:0;
    border-radius:0;
    overflow:hidden;
    isolation:isolate;
    background:#000;
    box-shadow:none;
    -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 48%,#000 65%,transparent 100%);
    mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 48%,#000 65%,transparent 100%);
  }
  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene__visual::before,
  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene__visual::after,
  .apx-site--services .apx-services-overview__visual::before,
  .apx-site--services .apx-services-overview__visual::after {content:none;}

  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene__visual > picture,
  .apx-site--services .apx-services-overview__visual > picture {
    position:relative;
    inset:auto;
    z-index:1;
    width:100%;
    height:100%;
    max-width:1200px;
    margin:0 auto;
    display:block;
    aspect-ratio:40 / 21;
    overflow:hidden;
    opacity:1;
    filter:none;
    mix-blend-mode:normal;
    -webkit-mask-image:none;
    mask-image:none;
    translate:none;
    scale:1; /* The image alone owns mouse zoom; this frame never tilts or tracks the cursor. */
    transform-origin:50% 50%;
    animation:apxStageBreathing 22s ease-in-out infinite alternate;
    transition:opacity 1.7s cubic-bezier(.2,.78,.23,1),filter 1.7s cubic-bezier(.2,.78,.23,1);
  }
  @keyframes apxStageBreathing {
    from{transform:scale(1.004)}
    to{transform:scale(1.018)}
  }
  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene__visual img,
  .apx-site--services .apx-services-overview__visual img {
    display:block;
    width:100%;
    height:100%;
    max-width:1200px;
    object-fit:contain;
    object-position:center;
    background:#000;
    mix-blend-mode:normal;
    filter:brightness(1.01) saturate(1.04) contrast(1.02);
    transform:scale(1);
    transform-origin:center;
    transition:transform 1.55s cubic-bezier(.18,.8,.22,1),filter 1.1s ease;
  }
  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene__visual:hover img,
  .apx-site--services .apx-services-overview__visual:hover img {
    transform:scale(1.085);
    filter:brightness(1.055) saturate(1.07) contrast(1.035);
  }
  /* The reveal class is applied only by the desktop component controller.
     With JavaScript disabled every Drupal image remains visible. */
  .apx-site .apx-stage--prepared:not(.apx-stage--visible) > picture {
    opacity:.035;
    filter:brightness(.22) saturate(.68) blur(7px);
  }
  .apx-site .apx-stage--prepared.apx-stage--visible > picture {
    opacity:1;
    filter:brightness(1) blur(0);
  }
  /* Full source quality and legibility: the teaser is a separate high-contrast
     glass panel with a single thin illuminated keyline, not another stage. */
  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene__copy,
  .apx-site--services .apx-services-overview__copy {
    --apx-stage-accent:var(--apx-intro-accent,#80eedb);
    position:relative;
    z-index:1;
    width:min(100%,1080px);
    max-width:1080px;
    margin-inline:auto;
    padding:clamp(28px,3vw,42px) clamp(30px,3.6vw,52px);
    border:1px solid color-mix(in srgb,var(--apx-stage-accent) 32%,#b8a9ee 18%);
    border-radius:clamp(20px,2.2vw,28px);
    color:#edf4ff;
    background:
      radial-gradient(ellipse 42% 60% at var(--mx,50%) var(--my,0%), rgba(119,241,218,.13),transparent 85%),
      linear-gradient(118deg,rgba(17,33,50,.97),rgba(30,39,65,.95) 59%,rgba(17,48,54,.95));
    box-shadow:0 24px 56px #02050e64,inset 0 1px #ffffff18;
    backdrop-filter:blur(12px);
    line-height:1.7;
    opacity:1;
    translate:0 0;
    transition:border-color .7s ease,box-shadow .7s ease,opacity 1.25s cubic-bezier(.19,.82,.22,1),
      translate 1.25s cubic-bezier(.19,.82,.22,1),filter 1.25s ease;
  }
  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene__copy::before,
  .apx-site--services .apx-services-overview__copy::before {
    content:"";
    position:absolute;
    left:clamp(30px,3.6vw,52px);
    right:clamp(30px,3.6vw,52px);
    top:0;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--apx-stage-accent),#ffdc76 58%,transparent);
    opacity:.72;
    pointer-events:none;
    background-size:190% 100%;
    animation:apxStagePanelEdge 12s ease-in-out infinite alternate;
  }
  /* A hairline optical link, not another background panel: the scene and
     the CMS-authored teaser remain two independent visual surfaces. */
  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene__copy::after,
  .apx-site--services .apx-services-overview__copy::after{
    content:"";
    position:absolute;
    z-index:0;
    pointer-events:none;
    left:calc(50% - 1px);
    top:calc(-1 * var(--apx-stage-gap));
    width:2px;
    height:var(--apx-stage-gap);
    border-radius:99px;
    background:linear-gradient(180deg,transparent 0%,#77f6e49c 55%,#ffe7a9d9 100%);
    box-shadow:0 0 10px #7bffe357;
    transform-origin:bottom center;
    animation:apxStageSignal 5.4s ease-in-out infinite;
  }
  @keyframes apxStagePanelEdge{from{background-position:0% 50%}to{background-position:100% 50%}}
  @keyframes apxStageSignal{0%,100%{opacity:.4;scale:1 .68}52%{opacity:.9;scale:1 1}}
  /* Floating telemetry inside the editorial text panel: graphics, not copy.
     The light follows the cursor via existing --mx/--my coordinates. */
  .apx-site .apx-stage-copy__circuit{
    position:absolute;z-index:0;pointer-events:none;right:18px;top:12px;
    width:min(29%,225px);height:136px;opacity:.56;
    border-top:1px solid #8cf8e555;border-right:1px solid #ffe28a40;
    border-radius:0 18px 0 0;
    background:
      radial-gradient(circle at 24% 61%,#a7ffe7 0 3px,transparent 5px),
      radial-gradient(circle at 66% 25%,#ffdf85 0 3px,transparent 5px),
      radial-gradient(circle at 87% 79%,#a6a5ff 0 3px,transparent 5px),
      linear-gradient(150deg,transparent 22%,#82ffdf36 22.4%,transparent 23.2%,transparent 51%,#a8e9ff21 51.4%,transparent 52%),
      repeating-linear-gradient(90deg,transparent 0 29px,#8deede12 30px 31px),
      repeating-linear-gradient(0deg,transparent 0 29px,#8deede10 30px 31px);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%,#000 100%);
    mask-image:linear-gradient(90deg,transparent,#000 35%,#000 100%);
    filter:drop-shadow(0 0 10px #82ffe047);
    animation:apxStageCircuitGlow 9s ease-in-out infinite alternate;
  }
  .apx-site .apx-stage-copy__circuit::before{
    content:"";position:absolute;right:19px;top:23px;width:58px;aspect-ratio:1;
    border:1px dashed #8ef9e655;border-radius:50%;box-shadow:0 0 0 13px #81ead70b;
    animation:apxStageCircuitOrbit 26s linear infinite;
  }
  .apx-site .apx-stage-copy__circuit::after{
    content:"";position:absolute;left:20px;bottom:18px;width:70px;height:1px;
    background:linear-gradient(90deg,transparent,#81ffe9,#ffdc78);
    box-shadow:0 0 12px #7ffff077;
  }
  @keyframes apxStageCircuitGlow{0%{opacity:.34;filter:drop-shadow(0 0 4px #82ffe022)}100%{opacity:.7;filter:drop-shadow(0 0 13px #82ffe04a)}}
  @keyframes apxStageCircuitOrbit{to{transform:rotate(360deg)}}
  .apx-site .apx-stage-copy__circuit + :is(h2,h3,p){position:relative;z-index:1}
  .apx-site .apx-intro-scene__copy,
  .apx-site--services .apx-services-overview__copy{
    background:
      radial-gradient(ellipse 48% 80% at var(--mx,65%) var(--my,20%),#61ffdb13,transparent 80%),
      linear-gradient(118deg,rgba(17,33,50,.97),rgba(30,39,65,.95) 59%,rgba(17,48,54,.95));
  }
  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene__copy > p:first-of-type,
  .apx-site--services .apx-services-overview__copy > p:first-of-type{
    font-weight:510;line-height:1.8;letter-spacing:.003em;
  }
  .apx-site .apx-intro-scene__copy :is(h2,h3),
  .apx-site--services .apx-services-overview__copy h2{
    color:#f6fbff;letter-spacing:-.037em;
    text-shadow:0 0 28px #82fdea20;
  }
  .apx-site .apx-intro-scene__copy a,
  .apx-site--services .apx-services-overview__copy a{
    text-decoration-color:#8ef8df75;
    transition:color .6s ease,text-decoration-color .6s ease,text-shadow .6s ease;
  }
  .apx-site .apx-intro-scene__copy a:is(:hover,:focus-visible),
  .apx-site--services .apx-services-overview__copy a:is(:hover,:focus-visible){
    color:#ffe8a2;text-decoration-color:#ffdf78;text-shadow:0 0 16px #ffe68a35;
  }
  /* The copy never vanishes: all server-rendered editorial text stays readable
     even before intersection and when the image or JS cannot load. */
  .apx-site .apx-stage-copy--prepared:not(.apx-stage-copy--visible){
    opacity:.9;
    translate:0 12px;
    filter:brightness(.9);
  }
  .apx-site .apx-stage-copy--visible{
    opacity:1;
    translate:0 0;
    filter:brightness(1);
  }
  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene__copy :is(h2,h3),
  .apx-site--services .apx-services-overview__copy :is(h2,h3){
    text-wrap:balance;
    transition:color .75s ease,text-shadow .75s ease;
  }
  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene__copy:is(:hover,:focus-within) :is(h2,h3),
  .apx-site--services .apx-services-overview__copy:is(:hover,:focus-within) :is(h2,h3){
    text-shadow:0 0 22px #83f8e52c;
  }
  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene__copy:is(:hover,:focus-within),
  .apx-site--services .apx-services-overview__copy:is(:hover,:focus-within){
    border-color:#8ae7df6b;
    box-shadow:0 28px 65px #02050e7c,inset 0 1px #ffffff1e;
  }
  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene__copy > :last-child,
  .apx-site--services .apx-services-overview__copy > :last-child{margin-bottom:0}
  /* The decorative grid and chips would float across this cinematic frame.
     They are not Drupal content (both are aria-hidden). */
  .apx-site--services .apx-services-overview__grid,
  .apx-site--services .apx-services-overview__chips {display:none;}
}
@media (min-width:1121px) and (prefers-reduced-motion:reduce) {
  .apx-site .apx-stage-copy__circuit,.apx-site .apx-stage-copy__circuit::before{animation:none;}
  .apx-site .apx-stage-copy--prepared{opacity:1;filter:none;translate:none;transition:none;}
  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene__copy::before,
  .apx-site--services .apx-services-overview__copy::before,
  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene__copy::after,
  .apx-site--services .apx-services-overview__copy::after{animation:none;}
  .apx-site .apx-stage--prepared > picture {opacity:1;filter:none;}
  .apx-site:not(.apx-site--front):not(.apx-site--best):not(.apx-site--about):not(.apx-site--contact) .apx-intro-scene__visual > picture,
  .apx-site--services .apx-services-overview__visual > picture {animation:none;transition:none;translate:none;transform:none;}
}
@media print {
  .apx-site .apx-stage--prepared > picture {opacity:1;filter:none;}
  .apx-site .apx-stage-copy--prepared{opacity:1;filter:none;translate:none;}
}