/* Card visuals for "Co pro vás stavíme": glass layers around one blue object, built in CSS 3D so the
   object can be picked out and zoomed (shared-object zoom). Every size is in cqi of the .viz box. */

.viz {
  position: relative; container-type: inline-size;
  aspect-ratio: 1.18; perspective: 1400px; perspective-origin: 50% 40%;
  pointer-events: none;
}
.viz-scene {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateX(var(--rx, 12deg)) rotateY(var(--ry, -24deg)) rotateZ(var(--rz, 0deg));
  transition: transform 1s var(--ease);
}
.viz-scene > * { position: absolute; }

/* glass panel */
.gl {
  border-radius: 1.8cqi;
  background:
    linear-gradient(158deg, rgb(255 255 255 / 0.13) 0%, rgb(255 255 255 / 0.035) 42%, rgb(140 165 220 / 0.05) 100%),
    rgb(14 18 26 / 0.88);
  border: 1px solid rgb(220 230 255 / 0.2);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 0 0 1px rgb(255 255 255 / 0.02), 0 2.4cqi 5cqi -1cqi rgb(0 0 0 / 0.7);
}
/* skeleton content */
.sk { position: absolute; height: 1.4cqi; border-radius: 1cqi; background: rgb(220 228 245 / 0.2); }
.sk.b { background: rgb(220 228 245 / 0.34); }
.sk.t { height: 1cqi; background: rgb(220 228 245 / 0.13); }
.dots { position: absolute; left: 3cqi; top: 2.4cqi; display: flex; gap: 1cqi; }
.dots i { width: 1.4cqi; height: 1.4cqi; border-radius: 50%; background: rgb(220 228 245 / 0.42); }
.bx { position: absolute; border: 1px solid rgb(220 230 255 / 0.14); border-radius: 1cqi; background: rgb(255 255 255 / 0.02); }
.gl .bar-top { position: absolute; left: 0; right: 0; top: 6.5cqi; height: 1px; background: rgb(220 230 255 / 0.12); }

/* the blue object */
.viz-core, .hv-core {
  border-radius: 1.2cqi; background: var(--core-fill); box-shadow: var(--core-glow);
}
.viz-core::after, .hv-core::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0) 42%);
}
/* light the object throws on what is behind it */
.viz-pool {
  width: 70cqi; height: 50cqi; left: 20cqi; top: 22cqi; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--core-rgb) / 0.32), rgb(var(--core-rgb) / 0));
  transform: translateZ(-80px); transition: opacity .6s;
}

/* ------------------------------------------------ 01 web: a floating app */
.viz[data-viz="web"] { --rx: 14deg; --ry: -26deg; }
.w-win { left: 6cqi; top: 7cqi; width: 82cqi; height: 58cqi; transform: translateZ(-4cqi); }
.w-win .side { position: absolute; left: 3cqi; top: 10cqi; width: 15cqi; bottom: 4cqi; border-right: 1px solid rgb(220 230 255 / 0.1); }
.w-c1 { left: 0; top: 54cqi; width: 36cqi; height: 24cqi; transform: translateZ(7cqi); }
.w-c2 { left: 56cqi; top: 60cqi; width: 38cqi; height: 21cqi; transform: translateZ(4cqi); }
.viz[data-viz="web"] .viz-core { left: 32cqi; top: 27cqi; width: 44cqi; height: 13cqi; transform: translateZ(11cqi); }

/* ------------------------------------------ 02 ai: documents into a cube */
.viz[data-viz="ai"] { --rx: -14deg; --ry: -34deg; }
.a-d1 { left: 2cqi; top: 12cqi; width: 30cqi; height: 40cqi; transform: translateZ(-10cqi) rotateY(14deg); }
.a-d2 { left: 12cqi; top: 34cqi; width: 30cqi; height: 40cqi; transform: translateZ(6cqi) rotateY(14deg); }
.a-d3 { left: 36cqi; top: 4cqi; width: 28cqi; height: 36cqi; transform: translateZ(-26cqi); }
.cube { transform-style: preserve-3d; width: var(--s); height: var(--s); }
.cube > i { position: absolute; inset: 0; border-radius: 0.4cqi; backface-visibility: visible; }
.cube > i:nth-child(1) { transform: translateZ(calc(var(--s) / 2)); }
.cube > i:nth-child(2) { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); }
.cube > i:nth-child(3) { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); }
.cube > i:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); }
.cube > i:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); }
.cube > i:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); }
.cube.glass > i { border: 1px solid rgb(150 185 255 / 0.4); background: rgb(90 130 255 / 0.05); }
.cube.blue > i { background: linear-gradient(150deg, #4f84ff, #1a5cff 55%, #0f44e0); box-shadow: inset 0 0 0 1px rgb(170 200 255 / 0.55); }
.cube.blue > i:nth-child(5) { background: linear-gradient(150deg, #8fb0ff, #3f78ff); }
.cube.blue > i:nth-child(3), .cube.blue > i:nth-child(4) { background: linear-gradient(150deg, #2a66ff, #0b37b8); }
.a-frame { --s: 40cqi; left: 50cqi; top: 34cqi; transform: translateZ(0); }
.viz[data-viz="ai"] .viz-core { --s: 19cqi; left: 60.5cqi; top: 44.5cqi; border-radius: 0; background: none; box-shadow: none; }
.viz[data-viz="ai"] .viz-core::after { display: none; }
.viz[data-viz="ai"] .viz-core > i { box-shadow: inset 0 0 0 1px rgb(170 200 255 / 0.55), 0 0 4cqi rgb(var(--core-rgb) / 0.55); }
.viz[data-viz="ai"] .viz-pool { left: 38cqi; top: 34cqi; }

/* ------------------------------------------- 03 systems: layers in a row */
.viz[data-viz="sys"] { --rx: 4deg; --ry: -42deg; }
.s-l { top: 11cqi; width: 34cqi; height: 60cqi; }
.s-l1 { left: 22cqi; transform: translateZ(18cqi); }
.s-l2 { left: 34cqi; transform: translateZ(6cqi); }
.s-l4 { left: 58cqi; transform: translateZ(-18cqi); }
.viz[data-viz="sys"] .viz-core { left: 46cqi; top: 11cqi; width: 34cqi; height: 60cqi; transform: translateZ(-6cqi); border-radius: 1.8cqi; }
.s-l1, .s-l2 { background: linear-gradient(158deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.03) 50%, rgb(140 165 220 / 0.06)), rgb(14 18 26 / 0.42); }
.viz[data-viz="sys"] .viz-pool { left: 30cqi; top: 20cqi; }

/* ------------------------------------------------- 04 data: a dashboard */
.viz[data-viz="data"] { --rx: 16deg; --ry: -22deg; }
.d-panel { left: 4cqi; top: 6cqi; width: 90cqi; height: 66cqi; transform: translateZ(-2cqi); }
.d-bars { position: absolute; left: 5cqi; bottom: 7cqi; width: 44cqi; height: 30cqi; display: flex; align-items: flex-end; gap: 2.4cqi; }
.d-bars i { flex: 1; border-radius: 0.6cqi 0.6cqi 0 0; background: linear-gradient(rgb(220 228 245 / 0.34), rgb(220 228 245 / 0.12)); }
.d-bars i.gap { background: none; }
.d-ring { position: absolute; right: 7cqi; top: 12cqi; width: 26cqi; height: 26cqi; }
.d-ring circle { fill: none; stroke-width: 5; }
.d-c1 { left: 60cqi; top: 58cqi; width: 34cqi; height: 20cqi; transform: translateZ(9cqi); }
/* the blue bar: sits in the chart's fifth slot, a hair in front of the panel */
.viz[data-viz="data"] .viz-core { left: 39.9cqi; top: 35cqi; width: 5.33cqi; height: 30cqi; transform: translateZ(0.6cqi); border-radius: 0.6cqi 0.6cqi 0 0; }
.viz[data-viz="data"] .viz-pool { left: 10cqi; top: 20cqi; }

/* ================================================= SHARED-OBJECT ZOOM */
.zoom-layer { position: fixed; inset: 0; z-index: 120; cursor: progress; }
.zoom-scrim { position: absolute; inset: 0; background: rgb(3 4 8 / 0.62); opacity: 0; }
.zoom-card { position: fixed !important; margin: 0 !important; z-index: 1; overflow: visible !important; transform-origin: 50% 50%; }
.zoom-card { transition: background-color .3s, border-color .3s, box-shadow .3s; }
.zoom-card.is-open { background: transparent; border-color: transparent; box-shadow: none; }
.zoom-card .svc-copy, .zoom-card .svc-frame { transition: opacity .22s ease-out, transform .3s var(--ease); }
.zoom-card.is-open .svc-copy { opacity: 0; transform: translateX(-2%); }
.zoom-card.is-open .svc-frame { opacity: 0; }
.zoom-card .viz-scene { transition: none; }
.zoom-core { position: fixed; inset: 0; z-index: 2; background: var(--zoom-fill); will-change: transform; transform-origin: 50% 50%; }
.zoom-skin { position: fixed; z-index: 3; background: var(--core-fill); box-shadow: var(--core-glow); }
.zoom-bloom {
  position: fixed; inset: -10%; z-index: 4; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.9) 0%, rgb(170 200 255 / 0.55) 22%, rgb(60 110 255 / 0.18) 55%, rgb(26 92 255 / 0) 100%);
}

/* the rest of the page steps back while one card is picked */
.svc-grid .svc { transition: transform .5s var(--ease), opacity .25s; }
/* opacity and scale only: a blur over three 3D pictures was the most expensive frame of the whole transition */
.is-zooming .svc-grid .svc:not(.is-picked) { transform: scale(0.955); opacity: 0.25; transition-duration: .2s; }
.is-zooming .svc.is-picked { visibility: hidden; }

/* arriving on a service page: the page starts fully blue and the blue shrinks into the hero's object */
.zoom-cover { display: none; }
.zoom-arrive .zoom-cover { display: block; position: fixed; inset: 0; z-index: 120; background: var(--zoom-fill); transform-origin: 50% 50%; will-change: transform; }
.zoom-cover-bloom {
  position: absolute; inset: -10%; opacity: 0.7;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.9) 0%, rgb(170 200 255 / 0.55) 22%, rgb(60 110 255 / 0.18) 55%, rgb(26 92 255 / 0) 100%);
}