/* ─────────────────────────────────────────────────────────────
   Card icons — dimensional, 3D-feel scenes.
   Each icon is a small composition rendered with gradient-filled
   layered planes, a soft radial bloom (glow), drop-shadows and
   gradient strokes — the depth/atmosphere of the reference set,
   done in pure SVG (no 3D lib). On card hover the scene blooms:
   the glow swells, layered planes part in parallax, accent nodes
   pulse and the projected mesh shimmers, and the whole thing lifts.

   Shared gradient/filter defs live in a hidden <svg> sprite that
   each page injects once (#cogPlane, #cogPlaneDeep, #cogStroke,
   #cogGlow, #cogSoft, #cogDrop).

   Layer roles (classes used inside the icon SVGs):
     .ic-aura      — soft radial bloom behind the motif
     .ic-mesh      — hairline gradient perspective net / projection
     .ic-fill      — faint ink fill for ghosted bodies
     .ic-acc       — accent stroke highlight
     .ic-acc-f     — solid accent node (glows + pulses on hover)
     .ic-plane     — deep gradient base plane (3D stack)
     .ic-plane-2   — mid gradient plane
     .ic-plane-top — bright gradient top plane
   Shared by homepage + services.
   ───────────────────────────────────────────────────────────── */
.card-ico {
  flex: none; display: block;
  color: var(--text-primary);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
  overflow: visible;
  width: 30px; height: 30px;
  transition: color 260ms ease, transform 300ms cubic-bezier(.22,1,.36,1);
}
.card-ico [fill="currentColor"] { stroke: none; }

.card-ico .ic-aura {
  fill: url(#cogGlow); stroke: none; opacity: .8; filter: url(#cogSoft);
  transform-box: fill-box; transform-origin: center;
  transition: opacity .32s ease, transform .5s cubic-bezier(.22,1,.36,1);
}
.card-ico .ic-mesh  { stroke: url(#cogStroke); stroke-width: .9; opacity: .42; transition: opacity .32s ease; }
.card-ico .ic-fill  { fill: currentColor; stroke: none; opacity: .07; }
.card-ico .ic-acc   { stroke: var(--accent); }
.card-ico .ic-acc-f { fill: var(--accent); stroke: none; filter: url(#cogDrop); }

/* 3D gem planes */
.card-ico .ic-plane,
.card-ico .ic-plane-2,
.card-ico .ic-plane-top {
  transform-box: fill-box; transform-origin: center;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.card-ico .ic-disc {
  fill: url(#cogPlane); fill-opacity: .3; stroke: #6366F1; stroke-width: 1;
  mix-blend-mode: multiply; transition: fill-opacity .32s ease;
}
.anchor:hover .ic-disc, .pcell:hover .ic-disc { fill-opacity: .46; }
.card-ico .ic-plane     { fill: url(#cogPlaneDeep); stroke: #4338CA; stroke-width: .7; filter: url(#cogDrop); }
.card-ico .ic-plane-2   { fill: url(#cogPlane);     stroke: #6366F1; stroke-width: .7; }
.card-ico .ic-plane-top { fill: url(#cogPlane);     stroke: #A5B4FC; stroke-width: .8; filter: url(#cogDrop); }

/* Homepage — “Why Cogniron” anchors: hero scene icons */
.anchor .card-ico { width: 62px; height: 54px; margin-bottom: 18px; }
.anchor:hover .card-ico { color: var(--accent); transform: translateY(-3px); }
.anchor:hover .ic-aura { opacity: 1; transform: scale(1.14); }
.anchor:hover .ic-mesh { animation: cogShimmer 2s ease-in-out infinite; }
.anchor:hover .ic-acc-f { animation: cogPulse 1.7s ease-in-out infinite; }
.anchor:hover .ic-plane-top { transform: translateY(-2.5px); }
.anchor:hover .ic-plane { transform: translateY(2.5px); }

/* Services — “Inside Every Pod” cells: scene icons */
.pcell .card-ico { width: 52px; height: 45px; margin-bottom: 14px; }
.pcell:hover .card-ico { color: var(--accent); transform: translateY(-3px); }
.pcell:hover .ic-aura { opacity: 1; transform: scale(1.14); }
.pcell:hover .ic-mesh { animation: cogShimmer 2s ease-in-out infinite; }
.pcell:hover .ic-acc-f { animation: cogPulse 1.7s ease-in-out infinite; }
.pcell:hover .ic-plane-top { transform: translateY(-2.5px); }
.pcell:hover .ic-plane { transform: translateY(2.5px); }

/* Services — “Five Service Lines”: compact inline marker */
.dl-head .card-ico { width: 26px; height: 26px; }
.dl-row:hover .card-ico,
.dl-row:focus-within .card-ico,
.dl-row.is-open .card-ico { color: var(--accent); }

/* Service detail — “What your Pod delivers” framework columns */
.sl-col .card-ico { width: 40px; height: 34px; margin-bottom: 12px; }
.sl-col:hover .card-ico { color: var(--accent); }
.sl-col:hover .ic-aura { opacity: 1; transform: scale(1.12); }
.sl-col:hover .ic-mesh { animation: cogShimmer 2s ease-in-out infinite; }
.sl-col:hover .ic-acc-f { animation: cogPulse 1.7s ease-in-out infinite; }
.sl-col:hover .ic-plane-top { transform: translateY(-2px); }
.sl-col:hover .ic-plane { transform: translateY(2px); }
.sl-col:hover .ic-disc { fill-opacity: .46; }

@keyframes cogPulse   { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
@keyframes cogShimmer { 0%,100% { opacity: .4; } 50% { opacity: .9; } }

@media (prefers-reduced-motion: reduce) {
  .card-ico, .card-ico * { transition: color .24s ease !important; animation: none !important; }
  .anchor:hover .card-ico, .pcell:hover .card-ico { transform: none; }
}