/* ZAROX — cross-document View Transitions (gate language, no template orbs) */
@view-transition {
  navigation: auto;
}

/* One shared mark per page — morphs across hops */
body.cinema-page .gate-frame,
body.core-os .os-brand-mark-img,
body.expo-page .expo-logo img,
.brand-lockup {
  view-transition-name: zx-mark;
}

::view-transition-group(zx-mark) {
  animation-duration: 0.72s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

::view-transition-old(zx-mark),
::view-transition-new(zx-mark) {
  height: 100%;
  width: auto;
  object-fit: contain;
  overflow: clip;
}

/* Root: fly-through forward (gate → CORE / app) */
html:active-view-transition-type(zx-enter) {
  --zx-vt-out: zx-vt-scale-out;
  --zx-vt-in: zx-vt-scale-in;
}

/* Root: return / side hop */
html:active-view-transition-type(zx-cross) {
  --zx-vt-out: zx-vt-fade-drift-out;
  --zx-vt-in: zx-vt-fade-drift-in;
}

html:active-view-transition-type(zx-back) {
  --zx-vt-out: zx-vt-scale-in-out;
  --zx-vt-in: zx-vt-scale-back-in;
}

::view-transition-old(root) {
  animation: var(--zx-vt-out, zx-vt-fade-drift-out) 0.55s cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: var(--zx-vt-in, zx-vt-fade-drift-in) 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes zx-vt-scale-out {
  to {
    opacity: 0;
    transform: scale(1.12);
    filter: brightness(1.15);
  }
}
@keyframes zx-vt-scale-in {
  from {
    opacity: 0;
    transform: scale(0.92);
    clip-path: inset(18% 18% 18% 18%);
  }
  to {
    opacity: 1;
    transform: scale(1);
    clip-path: inset(0 0 0 0);
  }
}
@keyframes zx-vt-scale-in-out {
  to {
    opacity: 0;
    transform: scale(0.94);
  }
}
@keyframes zx-vt-scale-back-in {
  from {
    opacity: 0;
    transform: scale(1.06);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes zx-vt-fade-drift-out {
  to {
    opacity: 0;
    transform: translateX(-3%);
  }
}
@keyframes zx-vt-fade-drift-in {
  from {
    opacity: 0;
    transform: translateX(3%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}