/* ============================================================
   SiloV · Icon Cloud for the #systems section
   Ported from Magic UI "Icon Cloud" (see assets/ICON-CLOUD-SOURCE.md).
   Loaded after site.css / theme-light.css / legacy.css / hero-layers.css,
   before a11y.css. Scoped under #systems so nothing outside is touched.

   Composition: centred head, the sphere of logo chips as the centrepiece,
   the holographic orb (Lottie) behind the sphere with the two core strings
   as a caption, a live line under the sphere that names the hovered chip,
   the note, then the four infra items as a hairline grid.

   Atmosphere follows the hero: a far halo plane (rate 1.2 backwards) in the
   lower start corner, one masked photo plane (rate 0.6 backwards) on the end
   side, a floor fade. Planes are moved by assets/hero-layers.js because the
   section carries .layer-act and the planes carry data-parallax.

   Without JS: the stage collapses to the orb's static disc plus caption, and
   the list of chips renders as a wrapped grid with the brand name under each.
   ============================================================ */

#systems.ic-sec{
  background:#F7F4FF; isolation:isolate;
  --ic-size:clamp(320px, 40vw, 760px);
  --ic-orb:calc(var(--ic-size) * .26);
  --ic-line:#E8E1FA;
  --ic-shadow:0 8px 18px -4px rgba(60,30,120,.18);
  --ic-edge:inset 0 1px 0 rgba(255,255,255,.8);
}

/* no JS: site.js never adds .in to the page's .reveal elements, so inside this
   section they may only start hidden once the script has marked html.ic-js */
html:not(.ic-js) #systems .reveal{ opacity:1; --rv:0px; transform:none }

/* ---- atmosphere: full section width, clipped by .sec overflow:clip ---- */
#systems .ic-atmo{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden }
#systems .ic-plane{ position:absolute; pointer-events:none; will-change:transform }
/* far plane: lavender halo in the lower start corner, away from every line of text */
#systems .ic-plane-far{
  inset-inline-start:-14%; top:32%; width:58%; height:64%;
  background:radial-gradient(closest-side, rgba(167,139,250,.22), rgba(167,139,250,.11) 42%, rgba(167,139,250,.04) 70%, transparent 100%);
  filter:blur(48px);
}
/* mid plane: the headsets photo, multiplied into the ground and masked to a soft oval on the end side */
#systems .ic-plane-photo{
  inset-inline-end:-4%; top:30%; width:38%; aspect-ratio:1400 / 933;
  background:url("photos/systems-headsets.webp") center / cover no-repeat;
  -webkit-mask-image:radial-gradient(50% 50% at 50% 50%, #000 0%, rgba(0,0,0,.55) 45%, transparent 74%);
  mask-image:radial-gradient(50% 50% at 50% 50%, #000 0%, rgba(0,0,0,.55) 45%, transparent 74%);
  mix-blend-mode:multiply; opacity:.3;
  display:none;   /* the grey headsets read dull on the lavender ground; the owner rated the photos as a weak pick */
}
/* floor: the planes settle into the ground over the last 220px, above every plane */
#systems .ic-floor{
  position:absolute; inset-inline:0; bottom:0; height:220px;
  background:linear-gradient(to bottom, rgba(247,244,255,0), #F7F4FF);
}

/* ---- head: centred over the sphere ---- */
#systems .sec-head{ align-items:center; text-align:center; margin-inline:auto }

/* ---- the cloud ---- */
#systems .ic-cloud{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center }
#systems .ic-stage{
  position:relative; width:var(--ic-size); max-width:100%; height:calc(var(--ic-orb) + 64px);
  touch-action:pan-y; -webkit-user-select:none; user-select:none;
}
#systems .ic-cloud.is-live .ic-stage{ height:var(--ic-size) }
#systems .ic-canvas{ position:absolute; inset:0; width:100%; height:100%; display:none }
#systems .ic-cloud.is-live .ic-canvas{ display:block }
#systems .ic-canvas-back{ z-index:1; pointer-events:none }
#systems .ic-canvas-front{ z-index:3; cursor:grab; -webkit-tap-highlight-color:transparent }
#systems .ic-stage.is-dragging .ic-canvas-front{ cursor:grabbing }
#systems .ic-stage.is-over .ic-canvas-front{ cursor:pointer }

/* the orb: Lottie behind the sphere; a soft lavender disc stands in until it is ready */
#systems .ic-orb{
  position:absolute; left:50%; top:50%; width:var(--ic-orb); height:var(--ic-orb);
  transform:translate(-50%,-50%); z-index:2; pointer-events:none;
}
#systems .ic-orb-fallback{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 40% 36%, rgba(255,255,255,.96) 0%, rgba(214,200,255,.9) 34%, rgba(167,139,250,.55) 66%, rgba(167,139,250,0) 100%);
  filter:blur(calc(var(--ic-orb) * .04));
  transition:opacity .5s ease-out;
}
/* lottie_light carries no effects, so the file's own gaussian blur (sigma 6 and 10 on a 59px
   canvas) is restored here as one CSS blur on the whole orb */
#systems .ic-orb-lottie{
  position:absolute; inset:-6%; opacity:0;
  filter:blur(calc(var(--ic-orb) * .075));
  transition:opacity .6s ease-out;
}
#systems .ic-orb.is-ready .ic-orb-lottie{ opacity:.72 }
#systems .ic-orb.is-ready .ic-orb-fallback{ opacity:.55 }
/* the file's black ring and cream core are recoloured into the page palette (the licence allows
   modification); lottie-web writes the fill as a presentation attribute, so a property wins */
#systems .ic-orb-lottie path[fill="rgb(0,0,0)"]{ fill:#6D3FE0; fill-opacity:.55 }
#systems .ic-orb-lottie path[fill="rgb(255,225,190)"]{ fill:#EFE9FE }

/* caption under the orb, inside the sphere (the old core die strings) */
#systems .ic-core{
  position:absolute; left:50%; top:50%; z-index:4; pointer-events:none;
  transform:translate(-50%, calc(var(--ic-orb) * .5 + 10px));
  text-align:center; line-height:1.15; white-space:nowrap;
}
#systems .ic-core-label{ display:block; font-weight:700; font-size:.95rem; color:#1E1A33; letter-spacing:.01em }
#systems .ic-core-sub{ display:block; margin-top:2px; font-weight:600; font-size:.7rem; letter-spacing:.08em; color:#6D3FE0 }

/* live line: the hovered or focused chip's brand name */
#systems .ic-live{
  min-height:1.6em; margin:2px 0 0; text-align:center;
  font-size:.95rem; font-weight:600; color:#6D3FE0; opacity:0;
  transition:opacity .2s ease-out;
}
#systems .ic-live.is-on{ opacity:1 }

/* the list: the no JS grid, and the image source for the canvases */
#systems .ic-list{
  list-style:none; margin:8px 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:20px 10px; max-width:980px;
}
#systems .ic-item{ display:flex; flex-direction:column; align-items:center; gap:8px; width:92px; text-align:center; outline:0 }
#systems .ic-item img{
  width:52px; height:52px; padding:10px; box-sizing:border-box; object-fit:contain;
  border-radius:50%; background:#fff; border:1px solid var(--ic-line);
  box-shadow:var(--ic-shadow), var(--ic-edge);
}
#systems .ic-name{ font-size:.75rem; line-height:1.3; color:#4A4566 }
/* JS on: the list feeds the canvases and stays reachable for keyboards and readers, off screen */
#systems .ic-cloud.is-live .ic-list{
  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;
}

/* ---- note and the hairline grid of the four infra items ---- */
#systems .orbit-note{ position:relative; z-index:1; margin-top:14px }
#systems .ic-infra{
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:0;
  margin-top:clamp(44px, 5vw, 60px);
}
#systems .ic-infra .infra-item{ padding:6px 26px 4px; border-inline-start:1px solid var(--ic-line) }
#systems .ic-infra .infra-item:first-child{ border-inline-start:0; padding-inline-start:0 }
#systems .ic-infra .infra-item:last-child{ padding-inline-end:0 }
#systems .ic-infra .infra-item::before{ display:none }
#systems .ic-infra .infra-item h3{ color:#6D3FE0; font-size:1.03rem; font-weight:700; line-height:1.35; margin:0 0 8px }
#systems .ic-infra .infra-item p{ font-size:.92rem; line-height:1.62; color:#4A4566; margin:0 }

@media (max-width:1000px){
  #systems .ic-plane-photo{ display:none }
}
@media (max-width:900px){
  #systems .ic-infra{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  #systems .ic-infra .infra-item{ padding:22px 22px 20px }
  #systems .ic-infra .infra-item:nth-child(odd){ border-inline-start:0; padding-inline-start:0 }
  #systems .ic-infra .infra-item:nth-child(even){ padding-inline-end:0 }
  #systems .ic-infra .infra-item:nth-child(-n+2){ padding-top:0 }
  #systems .ic-infra .infra-item:nth-child(n+3){ border-top:1px solid var(--ic-line) }
  #systems .ic-plane-far{ inset-inline-start:-30%; top:28%; width:90%; height:60% }
  #systems .ic-floor{ height:160px }
}
@media (max-width:520px){
  #systems .ic-infra{ grid-template-columns:1fr }
  #systems .ic-infra .infra-item,
  #systems .ic-infra .infra-item:nth-child(even){ border-inline-start:0; padding:20px 0 }
  #systems .ic-infra .infra-item:first-child{ padding-top:0 }
  #systems .ic-infra .infra-item:nth-child(n+2){ border-top:1px solid var(--ic-line) }
  #systems .ic-infra .infra-item:last-child{ padding-bottom:0 }
  #systems .ic-item{ width:76px }
  #systems .ic-item img{ width:46px; height:46px; padding:9px }
}

/* ---- reduced motion: no plane travel; the script draws one static frame ---- */
@media (prefers-reduced-motion:reduce){
  #systems .ic-plane{ transform:none !important }
  #systems .ic-live, #systems .ic-orb-lottie, #systems .ic-orb-fallback{ transition:none }
}
html.a11y-nomotion #systems .ic-plane{ transform:none !important }