/* IQAI Visual System
   Shared visual and motion primitives for public-site diagrams.
   Page SVG geometry stays local; behavior and styling conventions live here. */

:root{
  --iq-ink:#111;
  --iq-muted:#666;
  --iq-faint:#9a9a9a;
  --iq-line:#222;
  --iq-line-soft:#a8a8a8;
  --iq-field:#f3f3f3;
  --iq-field-soft:#f7f7f7;

  --iq-stroke-hair:.8;
  --iq-stroke:1;
  --iq-stroke-active:1.4;

  --iq-motion-micro:220ms;
  --iq-motion-fast:360ms;
  --iq-motion-standard:520ms;
  --iq-motion-complex:880ms;
  --iq-motion-pause:1400ms;
  --iq-ease:cubic-bezier(.22,1,.36,1);
}

/* Illustration field */
.iq-visual-field{
  background:var(--iq-field);
  position:relative;
  overflow:hidden;
}
.iq-visual-field--open{border:0}
.iq-visual-field--framed{border:1px solid rgba(17,17,17,.7)}

/* SVG line language */
.iq-line{
  fill:none;
  stroke:var(--iq-line);
  stroke-width:var(--iq-stroke);
  vector-effect:non-scaling-stroke;
}
.iq-line--soft{
  fill:none;
  stroke:var(--iq-line-soft);
  stroke-width:var(--iq-stroke-hair);
  vector-effect:non-scaling-stroke;
}
.iq-line--potential{
  fill:none;
  stroke:#555;
  stroke-width:var(--iq-stroke);
  stroke-dasharray:4 6;
  vector-effect:non-scaling-stroke;
}
.iq-line--active{
  fill:none;
  stroke:var(--iq-ink);
  stroke-width:var(--iq-stroke-active);
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.iq-shape{
  fill:transparent;
  stroke:var(--iq-line);
  stroke-width:var(--iq-stroke);
  vector-effect:non-scaling-stroke;
}
.iq-shape--potential{
  fill:transparent;
  stroke:#666;
  stroke-width:var(--iq-stroke);
  stroke-dasharray:5 6;
  vector-effect:non-scaling-stroke;
}
.iq-lens{
  fill:none;
  stroke:var(--iq-line);
  stroke-width:var(--iq-stroke);
  vector-effect:non-scaling-stroke;
}
.iq-lens--ghost{opacity:.35}

/* Diagram type */
.iq-label{
  font:400 16px "Helvetica Neue",Helvetica,Arial,sans-serif;
  fill:var(--iq-ink);
  letter-spacing:-.02em;
}
.iq-label--small{
  font:400 11px "Helvetica Neue",Helvetica,Arial,sans-serif;
  fill:var(--iq-muted);
}
.iq-label--micro{
  font:400 10px "Helvetica Neue",Helvetica,Arial,sans-serif;
  fill:#777;
  letter-spacing:.08em;
}
.iq-label--focus{
  font:400 28px "Helvetica Neue",Helvetica,Arial,sans-serif;
  fill:var(--iq-ink);
  letter-spacing:-.04em;
}

/* Shared entry choreography.
   Add data-iqai-motion to the diagram root and data-iqai-step to elements/groups.
   Optional inline --iq-delay controls sequence without new CSS. */
[data-iqai-motion].iq-ready [data-iqai-step]{
  opacity:0;
  transform:translateY(7px);
  transform-box:fill-box;
  transform-origin:center;
}
[data-iqai-motion].iq-inview [data-iqai-step]{
  opacity:1;
  transform:none;
  transition:
    opacity var(--iq-motion-fast) ease var(--iq-delay,0ms),
    transform var(--iq-motion-standard) var(--iq-ease) var(--iq-delay,0ms);
}

/* Common transformations */
[data-iqai-motion].iq-ready [data-iqai-from="left"]{transform:translateX(-12px)}
[data-iqai-motion].iq-ready [data-iqai-from="right"]{transform:translateX(12px)}
[data-iqai-motion].iq-ready [data-iqai-from="scale"]{transform:scale(.92)}
[data-iqai-motion].iq-ready [data-iqai-from="small"]{transform:scale(.78)}
[data-iqai-motion].iq-ready [data-iqai-from="large"]{transform:scale(1.08)}

/* Reusable line draw */
[data-iqai-draw]{
  stroke-dasharray:100;
  stroke-dashoffset:100;
}
[data-iqai-motion].iq-inview [data-iqai-draw]{
  animation:iqDraw var(--iq-motion-complex) var(--iq-ease) var(--iq-delay,0ms) forwards;
}
@keyframes iqDraw{to{stroke-dashoffset:0}}

/* Subtle hover: use only on meaningful objects */
@media(hover:hover) and (pointer:fine){
  [data-iqai-hover]{
    transition:
      transform var(--iq-motion-micro) var(--iq-ease),
      opacity var(--iq-motion-micro) ease;
    transform-box:fill-box;
    transform-origin:center;
  }
  [data-iqai-hover]:hover{transform:translateY(-2px)}
}

/* Responsive diagram convention:
   desktop SVG remains art-directed; mobile gets a deliberate alternate composition. */
.iq-mobile-visual{display:none}
@media(max-width:760px){
  .iq-desktop-visual{display:none!important}
  .iq-mobile-visual{display:block}
}

/* Reduced motion keeps the final, readable state. */
@media(prefers-reduced-motion:reduce){
  [data-iqai-motion].iq-ready [data-iqai-step],
  [data-iqai-motion].iq-inview [data-iqai-step]{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
  [data-iqai-draw]{
    stroke-dashoffset:0!important;
    animation:none!important;
  }
}