/* 1595 Labs: the technology you can feel (the owner, 2026-10-12). js/tech.js
   switches each part on; these are their looks. Flat colour only: lines,
   dots and squares, never a glow. */

/* 1 the globe behind the opening words */
.hero { position: relative; }
.globe { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero-words { position: relative; z-index: 1; }
.hero-panel { z-index: 1; }

/* 2 headlines: each line swept by a solid block that leaves the words behind
   (burgundy on light, white on the burgundy bands); the older slide-in steps aside */
.bl-wait { visibility: hidden; }
.tech-heads .hero h1 .line { animation: none; }
.tech-heads .section-head.rise h2 { clip-path: none; transition: none; }
.tech-heads .hero h1, .tech-heads .section-head h2, .tech-heads .careers h2, .tech-heads .contact h2 { position: relative; }
.bw { opacity: 0; }
.bl { position: absolute; z-index: 2; background: var(--red); pointer-events: none; transform: scaleX(0); }
.work .bl, .contact .bl { background: var(--white); }

/* 2 the block cursor of a label typing out */
.caret { display: inline-block; width: 0.6em; height: 1.05em; margin-left: 3px; vertical-align: -0.18em; background: currentColor; animation: blink 900ms steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* 3 15 and 95 in particles: the figures underneath stay for their size, unseen */
.dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dust-on .digits { color: transparent; }
.dust-on .panel-now, .dust-on .panel-foot { position: relative; z-index: 1; }

/* 4 industry cards: an edge light that follows the pointer, a scan line, the icon drawn again */
.tech-cards .industry { position: relative; overflow: hidden; isolation: isolate; }
.tech-cards .industry:hover { border-color: var(--line); }
.tech-cards .industry::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), var(--red), transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 250ms; }
.tech-cards .industry:hover::before { opacity: 1; }
.tech-cards .industry::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 36%; z-index: -1; pointer-events: none; transform: translateY(-110%);
  background: linear-gradient(to bottom, rgba(107, 20, 38, 0), rgba(107, 20, 38, 0.06) 88%, rgba(107, 20, 38, 0.5) 100%); }
.tech-cards .industry:hover::after { animation: scan 850ms cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes scan { to { transform: translateY(290%); } }
.tech-cards .industry:hover > i { animation: redraw 650ms steps(9) both; }
@keyframes redraw { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

/* 5 Our expertise: data travelling along the lines between the services */
.services { position: relative; }
.flow { position: absolute; inset: 0; pointer-events: none; }
.flow .track { position: absolute; overflow: hidden; }
.flow .track.x { height: 2px; margin-top: -1px; }
.flow .track.y { width: 2px; margin-left: -1px; }
.flow .packet { position: absolute; left: 0; top: 0; }
.flow .x .packet { width: 30px; height: 2px; margin-left: -30px; background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff); }
.flow .y .packet { width: 2px; height: 30px; margin-top: -30px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); }
.flow .node { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #fff; }
.flow .node::after { content: ""; position: absolute; inset: -1px; border: 1px solid #fff; opacity: 0; animation: ping 3.3s ease-out var(--d, 0s) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: 0.9; } 55%, 100% { transform: scale(3.4); opacity: 0; } }

/* 6 How ideas take shape: a circuit track, current running through the filled part, each step powering on */
.tech-circuit .steps::before { background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 16px); }
.tech-circuit .steps::after { background: repeating-linear-gradient(90deg, var(--red) 0 22px, #B0566D 22px 26px); background-size: 52px 100%; animation: current 800ms linear infinite; }
@keyframes current { to { background-position: 52px 0; } }
.pulse-head { position: absolute; z-index: 2; top: 4px; left: calc(var(--done, 0) * 100%); width: 13px; height: 13px; margin-left: -6px; border: 3px solid var(--red); background: var(--white); transition: left 200ms linear, top 200ms linear; }
.tech-circuit .step .dot::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--red); border-radius: 50%; opacity: 0; }
.tech-circuit .step.reached .dot::after { animation: power 900ms ease-out; }
@keyframes power { from { transform: scale(1); opacity: 1; } to { transform: scale(2.8); opacity: 0; } }

/* 7 the toolkit pills under real physics */
.tools-physics { position: relative; display: block; height: clamp(230px, 17vw, 290px); overflow: hidden; } /* they drop in from the box's own top edge, never over the section above */
.tools-physics span { position: absolute; left: 0; top: 0; white-space: nowrap; user-select: none; cursor: grab; will-change: transform; }
.tools-physics span:active { cursor: grabbing; }

/* 8 a faint blueprint grid with marks where the lines cross, and the live readout */
body.tech-grid {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cpath d='M-5 0h10M0-5v10M155 0h10M160-5v10M-5 160h10M0 155v10M155 160h10M160 155v10' stroke='%236B1426' stroke-opacity='.28'/%3E%3C/svg%3E"),
    linear-gradient(rgba(107, 20, 38, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(107, 20, 38, 0.045) 1px, transparent 1px);
  background-size: 160px 160px, 80px 80px, 80px 80px;
  background-position: center top;
}
.readout { position: fixed; left: 16px; bottom: 16px; z-index: 9; display: flex; align-items: center; gap: 10px; padding: 9px 12px; pointer-events: none;
  border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.92);
  font: 500 11px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); font-variant-numeric: tabular-nums; }
.readout i { width: 6px; height: 6px; background: var(--red); animation: blink 1200ms steps(1) infinite; }
.readout .sep { opacity: 0.4; }

/* 9 the closing headline in pieces, each letter free to move */
.contact h2 { position: relative; }
.contact h2 .word { display: inline-block; white-space: nowrap; }
.contact h2 .ch { display: inline-block; transition: transform 420ms cubic-bezier(.2, .8, .2, 1); }

@media (max-width: 1000px) {
  .tech-circuit .steps::before { background: repeating-linear-gradient(180deg, var(--line) 0 10px, transparent 10px 16px); }
  .tech-circuit .steps::after { background: repeating-linear-gradient(180deg, var(--red) 0 22px, #B0566D 22px 26px); background-size: 100% 52px; animation-name: current-down; }
  .pulse-head { left: 4px; top: calc(var(--done, 0) * 100%); margin: -6px 0 0; }
}
@keyframes current-down { to { background-position: 0 52px; } }
@media (max-width: 560px) {
  .readout { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .caret, .readout i, .flow .node::after, .tech-circuit .steps::after { animation: none; }
  .tech-cards .industry:hover::after, .tech-cards .industry:hover > i, .tech-circuit .step.reached .dot::after { animation: none; }
}