/* Selected concept 2. CSS windows preserve the generated board unchanged and
   keep the two subjects on the existing independent B3 animation layers. */
.hero-collage{height:460px;display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:32px;align-items:center}
.hero-collage .photo{background:transparent;border:0;border-radius:0;overflow:visible;position:relative;width:min(62%,300px);height:auto;aspect-ratio:991.5/693;inset:auto}
.hero-collage .photo:after{display:none}
.hero-collage .photo-network{grid-row:1;justify-self:start;z-index:0}
.hero-collage .photo-software{grid-row:2;justify-self:end;z-index:1}
.image-window{display:block;position:absolute;inset:0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);
  mask-composite:intersect}
/* Trim only the empty 50px top/bottom of each source half. Keep source aspect
   ratio and full subject detail; no blur, sharpening filter or raster rewrite. */
.image-window>img{position:absolute;top:-7.215007%;left:0;width:200%;height:114.430014%;max-width:none;object-fit:fill}
.photo-software .image-window>img{left:-100%}
.hero-collage .photo figcaption{left:10%;bottom:0;font-size:10px;color:#dcebed;font-weight:650;letter-spacing:.02em;white-space:nowrap}
.hero-collage .photo-software figcaption{left:12%;bottom:4%}
.connection-art{opacity:.4}
.connection-art path:first-of-type{stroke-width:3}
.connection-art circle{r:7px}
.connection-tag{z-index:2;width:110px;height:110px;font-size:10px;padding:24px 0 0 18px;top:24px;right:12px}
.connection-tag i{right:18px;bottom:17px;font-size:20px}

/* Animate light within the unchanged raster subjects, not a replacement image. */
.image-effects{position:absolute;left:0;top:-7.215007%;width:100%;height:114.430014%;pointer-events:none}
.fibre-pulse path{fill:none;stroke:#ffe4ce;stroke-width:4;stroke-linecap:round;stroke-dasharray:32 1100;stroke-dashoffset:40;opacity:0}
.screen-breathe,.screen-sheen{opacity:0}
[data-motion="on"] .fibre-pulse path{animation:fibre-travel 5.6s ease-in-out var(--spark-delay,0s) infinite}
[data-motion="on"] .screen-breathe{animation:screen-breathe 6.4s ease-in-out infinite}
[data-motion="on"] .screen-sheen{animation:screen-sheen 7.5s ease-in-out 1s infinite}
[data-motion="on"][data-hero-visible="false"] .image-effects *{animation-play-state:paused}
@keyframes fibre-travel{0%,10%{stroke-dashoffset:40;opacity:0}22%{opacity:.8}72%{opacity:.65}86%,100%{stroke-dashoffset:-850;opacity:0}}
@keyframes screen-breathe{0%,100%{opacity:.025}50%{opacity:.1}}
@keyframes screen-sheen{0%,18%{transform:translateX(0);opacity:0}28%{opacity:.2}65%{opacity:.2}80%,100%{transform:translateX(1400px);opacity:0}}
/* Stable image planes avoid continuous fractional-pixel resampling. The light
   animation remains active and the one-time image entrance is retained. */
[data-motion="on"] .hero-collage .photo{translate:none;animation:none}
[data-motion="on"].intro-play .hero-collage .photo{animation:photo-enter 850ms var(--motion-ease) 100ms both}
[data-motion="on"].intro-play .hero-collage .photo-software{animation-delay:260ms}
@media(max-width:1100px){.hero-collage{height:425px}.hero-collage .photo{width:min(66%,275px)}.connection-tag{width:100px;height:100px;right:0;font-size:9px;padding:22px 0 0 16px}.connection-tag i{font-size:18px;right:16px;bottom:15px}}
@media(max-width:860px){.hero-collage{height:370px}.hero-collage .photo{width:min(68%,240px)}.hero-collage .photo figcaption{font-size:9px}.connection-art{opacity:.28}.connection-tag{width:80px;height:80px;top:20px;font-size:8px;padding:17px 0 0 12px}.connection-tag i{font-size:15px;right:13px;bottom:12px}}
@media(max-width:640px){.hero-collage{height:340px}.hero-collage .photo{width:min(64%,215px)}.connection-tag{top:8px}}
@media(max-width:360px){.hero-collage{height:320px}.hero-collage .photo{width:min(70%,200px)}.connection-tag{width:72px;height:72px;font-size:7px;padding:15px 0 0 11px}.connection-tag i{font-size:13px;right:11px;bottom:10px}}
@media(prefers-reduced-motion:reduce){.image-effects *{animation:none!important;opacity:0!important}}
@media print{.image-effects{display:none}}