/* Zooz-tech motion: entrance on load (CSS only) and scroll reveal (classes set by site.js).
   Everything is visible without JS, and all of it is off for prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes zt-drop { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
  @keyframes zt-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
  @keyframes zt-mask { from { clip-path: inset(0 0 100% 0); transform: translateY(.4em); } to { clip-path: inset(0 0 -10% 0); transform: none; } }
  @keyframes zt-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-14px) rotate(1.5deg); } }

  /* page load: header drops in, hero headline rises out of a mask, the rest of the hero follows in order */
  header { animation: zt-drop .6s cubic-bezier(.22, 1, .36, 1) both; }
  main > section:first-child h1 { animation: zt-mask .85s cubic-bezier(.22, 1, .36, 1) .15s both; }
  main > section:first-child h1 ~ * { animation: zt-rise .7s cubic-bezier(.22, 1, .36, 1) .4s both; }
  main > section:first-child h1 ~ * ~ * { animation-delay: .52s; }
  main > section:first-child h1 ~ * ~ * ~ * { animation-delay: .64s; }
  main > section:first-child h1 ~ * ~ * ~ * ~ * { animation-delay: .76s; }
  main > section:first-child .wrap > div:not(:first-child),
  main > section:first-child .hide-sm { animation: zt-rise .9s cubic-bezier(.22, 1, .36, 1) .45s both; }
  main > section:first-child svg[aria-hidden="true"] { animation: zt-float 7s ease-in-out 1.4s infinite; transform-origin: center; }

  /* scroll reveal: site.js sets data-zt to the variant for each component */
  .zt-rv { opacity: 0; transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .85s cubic-bezier(.22, 1, .36, 1); transition-delay: var(--zt-d, 0s); will-change: transform, opacity; }
  .zt-rv[data-zt="up"] { transform: translateY(36px); }
  .zt-rv[data-zt="right"] { transform: translateX(64px); }
  .zt-rv[data-zt="left"] { transform: translateX(-64px); }
  .zt-rv[data-zt="card"] { transform: translateY(48px) rotate(var(--zt-r, 0deg)) scale(.95); }
  .zt-rv[data-zt="media"] { transform: scale(.88) translateY(24px); }
  .zt-rv[data-zt="pop"] { transform: scale(.6); transition-timing-function: cubic-bezier(.22, 1, .36, 1), cubic-bezier(.34, 1.56, .64, 1); }
  .zt-rv.zt-in { opacity: 1; transform: none; }

  /* accent lines draw from the right (RTL) */
  .zt-line { position: relative; border-top-color: transparent !important; }
  .zt-line::before { content: ""; position: absolute; top: -2px; right: 0; left: 0; height: 2px; background: #74E86D; transform: scaleX(0); transform-origin: right center; transition: transform 1s cubic-bezier(.22, 1, .36, 1) .15s; }
  .zt-line.zt-in::before { transform: scaleX(1); }

  /* hero numbers: the real value stays in the text, the counting digits are painted on top */
  .zt-count { position: relative; color: transparent !important; }
  .zt-count::after { content: attr(data-n); position: absolute; inset: 0; color: var(--zt-c); }

  /* cards lift a little under the pointer */
  .card-link, .person, .pc { transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
  .card-link:hover, .person:hover, .pc:hover { transform: translateY(-4px); }
}

/* ---------- Homepage intro: the logo, then the page opens out of it ----------
   intro.js adds html.zt-intro before first paint (never for reduced motion or crawlers); site.js builds the layer. */
html.zt-intro body { overflow: hidden; }
html.zt-intro::before { content: ""; position: fixed; inset: 0; z-index: 1000; background: #014122; }
html.zt-intro.zt-intro-built::before { display: none; }
html.zt-intro header, html.zt-intro main > section:first-child, html.zt-intro main > section:first-child * { animation-play-state: paused !important; }

.zt-intro-layer { position: fixed; inset: 0; z-index: 1001; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; background: #014122; color: #FFFFFF; cursor: pointer; overflow: hidden; font-family: 'peax leon', 'Assistant', system-ui, sans-serif; transition: background-color .75s cubic-bezier(.7, 0, .3, 1) .2s; }
.zt-intro-layer:focus { outline: none; }
.zt-intro-layer::after { content: ""; position: absolute; inset: -20%; background: radial-gradient(closest-side, rgba(116, 232, 109, .16), transparent 70%); animation: zt-glow 5s ease-in-out infinite; pointer-events: none; }
.zt-intro-mark { width: min(42vmin, 260px); height: auto; overflow: visible; position: relative; z-index: 1; transition: transform 1s cubic-bezier(.75, 0, .25, 1); }
.zt-intro-mark .tri-a { animation: zt-in-a 1s cubic-bezier(.22, 1, .36, 1) .1s both; }
.zt-intro-mark .tri-b { animation: zt-in-b 1s cubic-bezier(.22, 1, .36, 1) .3s both; }
.zt-intro-mark .stripes line { stroke-dasharray: 130; animation: zt-draw .9s cubic-bezier(.22, 1, .36, 1) both; }
.zt-intro-mark .stripes line:nth-child(1) { animation-delay: .75s; }
.zt-intro-mark .stripes line:nth-child(2) { animation-delay: .9s; }
.zt-intro-mark .spark { transform-box: fill-box; transform-origin: center; animation: zt-spark-in .7s cubic-bezier(.34, 1.56, .64, 1) 1.05s both, zt-twinkle 2.6s ease-in-out 1.9s infinite; }
.zt-intro-mark .part-a, .zt-intro-mark .part-b { transition: transform .75s cubic-bezier(.7, 0, .3, 1) .55s, opacity .4s ease .95s; }
.zt-intro-hint { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 15px; color: #CECCBF; direction: rtl; animation: zt-letter .8s ease 1.5s both; transition: opacity .25s ease; }
.zt-intro-hint .bar { width: 120px; height: 2px; background: rgba(255, 255, 255, .18); border-radius: 2px; overflow: hidden; }
.zt-intro-hint .bar i { display: block; height: 100%; background: #74E86D; transform: scaleX(0); transform-origin: right center; animation: zt-fill var(--zt-wait, 4.2s) linear 1s forwards; }
.zt-intro-skip { position: absolute; top: 20px; left: 20px; z-index: 2; background: none; border: 1px solid rgba(255, 255, 255, .3); color: #FFFFFF; border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 14px; cursor: pointer; }
/* opening: the mark grows past the edges of the screen, the two triangles part, and the page shows through */
.zt-intro-layer.out { background-color: rgba(1, 65, 34, 0); pointer-events: none; }
.zt-intro-layer.out::after, .zt-intro-layer.out .zt-intro-skip { opacity: 0; }
.zt-intro-layer.out .zt-intro-hint { opacity: 0; transform: translateY(16px); }
.zt-intro-layer.out .zt-intro-mark { transform: scale(16); }
.zt-intro-layer.out .part-a { transform: translate(-46px, -46px); opacity: 0; }
.zt-intro-layer.out .part-b { transform: translate(46px, 46px); opacity: 0; }
.zt-intro-layer.out .spark { animation: zt-spark-out .5s ease forwards; }
@keyframes zt-in-a { from { transform: translate(-40px, -40px); opacity: 0; } }
@keyframes zt-in-b { from { transform: translate(40px, 40px); opacity: 0; } }
@keyframes zt-draw { from { stroke-dashoffset: 130; } to { stroke-dashoffset: 0; } }
@keyframes zt-spark-in { from { transform: scale(0) rotate(-90deg); opacity: 0; } }
@keyframes zt-spark-out { to { transform: scale(2.4) rotate(180deg); opacity: 0; } }
@keyframes zt-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.25) rotate(45deg); } }
@keyframes zt-letter { from { opacity: 0; transform: translateY(.6em); } }
@keyframes zt-fill { to { transform: scaleX(1); } }
@keyframes zt-glow { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.12); opacity: 1; } }

/* ---------- Living mark in the homepage hero: flowing stripes, twinkling spark, orbiting tech, data flowing in ---------- */
.zt-live { position: relative; height: 480px; perspective: 900px; }
.zt-live canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.zt-live-stage { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: transform .4s ease-out; }
.zt-live-mark { position: absolute; top: 50%; left: 50%; width: 260px; height: 260px; margin: -130px 0 0 -130px; overflow: visible; filter: drop-shadow(0 20px 40px rgba(0, 0, 0, .35)); }
.zt-live-mark .flow { animation: zt-flow 2.6s linear infinite; }
.zt-live-mark .spark { transform-box: fill-box; transform-origin: center; animation: zt-twinkle 2.8s ease-in-out infinite; }
.zt-live-mark .tri-a { animation: zt-breathe 6s ease-in-out infinite; }
.zt-live-mark.pulse .tri-b { animation: zt-pulse .6s ease-out; }
.zt-orbit { position: absolute; top: 50%; left: 50%; width: 0; height: 0; animation: zt-spin 46s linear infinite; }
.zt-orbit .chip-o { position: absolute; left: 0; top: 0; transform: rotate(var(--a)) translateX(var(--r, 205px)) rotate(calc(var(--a) * -1)); }
.zt-orbit .chip-o span { display: block; white-space: nowrap; transform: translate(-50%, -50%); animation: zt-spin 46s linear infinite reverse; padding: 8px 14px; border-radius: 999px; background: rgba(1, 65, 34, .82); border: 1px solid rgba(116, 232, 109, .45); color: #FFFFFF; font-size: 13px; font-weight: 700; direction: ltr; backdrop-filter: blur(6px); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.zt-orbit .chip-o.core span { background: #74E86D; color: #014122; border-color: #74E86D; }
@keyframes zt-flow { from { transform: translateY(0); } to { transform: translateY(16px); } }
@keyframes zt-breathe { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-2px, -2px); } }
@keyframes zt-pulse { 50% { filter: brightness(1.35); } }
@keyframes zt-spin { to { rotate: 360deg; } }

/* ---------- Client logo strips (two rows moving in opposite directions) ---------- */
.zt-logos { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); direction: ltr; }
.zt-logos ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 44px; }
.zt-logos li { flex: none; height: 64px; display: flex; align-items: center; justify-content: center; }
.zt-logos img { height: 44px; width: auto; max-width: 150px; object-fit: contain; filter: grayscale(1) brightness(.72) contrast(1.15); opacity: .8; transition: filter .3s ease, opacity .3s ease, transform .3s ease; }
.zt-logos li:hover img { filter: none; opacity: 1; transform: scale(1.06); }
.zt-logos .txt { font-weight: 700; font-size: 20px; color: #3F6150; white-space: nowrap; }
.zt-logos.run ul { flex-wrap: nowrap; justify-content: flex-start; width: max-content; padding-inline: 22px; animation: zt-marquee var(--zt-dur, 60s) linear infinite; }
.zt-logos.run.rev ul { animation-direction: reverse; }
.zt-logos.run:hover ul { animation-play-state: paused; }
@keyframes zt-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .zt-logos.run ul { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } }

/* scroll progress bar (element added by site.js); fills from the right in RTL */
.zt-progress { position: fixed; top: 0; right: 0; left: 0; height: 3px; background: #74E86D; transform: scaleX(0); transform-origin: right center; z-index: 200; pointer-events: none; }