/* Alzam Interactive – data-native motion layer.
   One motion language: data moves along lines, short distances (8–24px), ease-out.
   Everything here is progressive: without JS, without support or with reduced motion,
   the page is static and fully visible. */

:root { --ease-out: cubic-bezier(.2, .7, .2, 1); }

/* ---------- Hero schematic: data lineage ---------- */
.schematic .chip { cursor: pointer; outline: none; }
.schematic .chip-box { transition: stroke .2s ease, stroke-width .2s ease; }

.schematic .row-hit { fill: transparent; transition: fill .2s ease; }
.schematic .flow { transition: opacity .25s ease, stroke-width .25s ease; }
.schematic .chip > *, .schematic .record-row > * { transition: opacity .25s ease; }
.schematic .packet { pointer-events: none; }

.schematic.is-tracing .flow:not(.is-on) { opacity: .14; }
.schematic.is-tracing .flow.is-on { stroke-width: 2.6; }
.schematic.is-tracing .chip:not(.is-on) > *,
.schematic.is-tracing .record-row:not(.is-on) > :not(.row-hit) { opacity: .32; }
.schematic.is-tracing .chip.is-on .chip-box { stroke: var(--ink); stroke-width: 1.5; }
.schematic.is-tracing .record-row.is-on .row-hit { fill: var(--lavender-soft); }
.schematic .chip:focus-visible .chip-box, .schematic.is-tracing .chip.is-on:focus-visible .chip-box { stroke: var(--violet); stroke-width: 3; }
.schematic.is-tracing .packet:not(.is-on) { visibility: hidden; }

/* Packets travel only when motion is welcome */
@media (prefers-reduced-motion: reduce) {
  .schematic .packets { display: none; }
}

/* ---------- Hero: soft spotlight that follows the pointer ---------- */
.hero { position: relative; isolation: isolate; overflow: clip; }
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero::before {
    content: ""; position: absolute; left: 0; top: 0; z-index: -1;
    width: 720px; height: 720px; border-radius: 50%;
    background: radial-gradient(closest-side, rgba(145, 132, 217, .22), rgba(145, 132, 217, .08) 55%, rgba(145, 132, 217, 0));
    transform: translate3d(calc(var(--x, 70vw) - 360px), calc(var(--y, 300px) - 360px), 0);
    opacity: 0; transition: opacity .5s ease; pointer-events: none;
  }
  .hero.is-lit::before { opacity: 1; }
}

/* ---------- Count-up figures ---------- */
.figure strong .is-counting { font-variant-numeric: tabular-nums; }
.figure strong span { font-size: inherit; color: inherit; line-height: inherit; }

/* ---------- Cross-page view transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  main { view-transition-name: page-main; }
  ::view-transition-group(site-header) { animation: none; }
  ::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; }
  ::view-transition-old(page-main) { animation: vt-out .18s ease-in both; }
  ::view-transition-new(page-main) { animation: vt-in .38s var(--ease-out) .06s both; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
}
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Scroll-driven reveals (native only; no fallback needed) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Section headings rise out of a mask */
    .section-head h2, .mission h2, .more-title, .cta-band h2, .service h2 {
      animation: heading-rise linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }

    /* Architecture layers assemble one by one */
    .layers > .layer, .layers > .layer-outputs {
      animation: layer-in linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 35%;
    }

    /* The process line fills as you scroll */
    .process { view-timeline-name: --process; }
    .process li::after {
      background: linear-gradient(to right, var(--violet) 50%, var(--line) 50%) 100% 0 / 200% 100% no-repeat;
      animation: line-fill linear both;
      animation-timeline: --process;
    }
    .process li:nth-child(1)::after { animation-range: cover 18% cover 32%; }
    .process li:nth-child(2)::after { animation-range: cover 28% cover 42%; }
    .process li:nth-child(3)::after { animation-range: cover 38% cover 52%; }
    .process li::before { transition: background-color .3s ease, color .3s ease; }
  }
}
@keyframes heading-rise {
  from { opacity: 0; transform: translateY(20px); clip-path: inset(0 -5% 100% -5%); }
  to { opacity: 1; transform: none; clip-path: inset(-20% -5% -25% -5%); }
}
@keyframes layer-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes line-fill { to { background-position: 0 0; } }
@media (max-width: 860px) {
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .process li::after { background: linear-gradient(to bottom, var(--violet) 50%, var(--line) 50%) 0 100% / 100% 200% no-repeat; }
    }
  }
}

/* ---------- Data packets travelling down between architecture layers ---------- */
@media (prefers-reduced-motion: no-preference) {
  .layer + .layer::before, .layer-outputs::before {
    left: calc(50% - 4px); width: 8px;
    background:
      radial-gradient(circle 3px at 50% 50%, var(--violet) 92%, rgba(84, 70, 201, 0)) 0 -10px / 8px 8px no-repeat,
      linear-gradient(var(--lavender), var(--lavender)) 50% 0 / 1.6px 100% no-repeat;
    animation: packet-down 1.8s cubic-bezier(.5, 0, .5, 1) infinite;
  }
  .layer-model::before { animation-delay: .6s; }
  .layer-outputs::before { animation-delay: 1.2s; }
  .layers.is-paused .layer + .layer::before, .layers.is-paused .layer-outputs::before { animation-play-state: paused; }
}
@keyframes packet-down {
  0% { background-position: 0 -10px, 50% 0; }
  70%, 100% { background-position: 0 24px, 50% 0; }
}

/* ---------- Scroll progress under the sticky header ---------- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .site-header::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
      background: var(--violet); transform-origin: 0 50%; transform: scaleX(0);
      animation: progress linear both; animation-timeline: scroll(root);
      pointer-events: none;
    }
  }
}
@keyframes progress { to { transform: scaleX(1); } }

/* ---------- Spotlight glow on discipline and principle cards (pointer only) ---------- */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .discipline, .principle { position: relative; isolation: isolate; }
  .discipline::before, .principle::before {
    content: ""; position: absolute; inset: -12px -16px; z-index: -1; border-radius: 12px;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(145, 132, 217, .16), rgba(145, 132, 217, 0) 70%);
    opacity: 0; transition: opacity .3s ease; pointer-events: none;
  }
  .discipline:hover::before, .principle:hover::before { opacity: 1; }
}

/* ---------- Primary buttons: a very small pull toward the pointer ---------- */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .js .btn-primary { transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .45s cubic-bezier(.3, 1.4, .5, 1); }
  .js .btn-primary.is-pulled { transition: background-color .15s ease, transform .12s linear; transform: translate3d(var(--px, 0), var(--py, 0), 0); }
}