.ngaze-fade-up {
  opacity: 0;
  transform: translateY(24px);
}

.ngaze-fade-up.naf-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 500ms ease, transform 500ms ease;
}

.ngaze-magnetic {
  display: inline-block;
  transition: transform 0.2s ease;
  will-change: transform;
}

@keyframes ngaze-vt-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes ngaze-vt-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

::view-transition-old(root) {
  animation: 200ms ease ngaze-vt-fade-out;
}

::view-transition-new(root) {
  animation: 300ms ease ngaze-vt-fade-in;
}

/* ── FROSTED GLASS NAV ─────────────────────────────── */

.ngaze-glass-nav {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  background: rgba(255, 255, 255, 0.75) !important;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08) !important;
}

.ngaze-glass-nav.is-dark,
.ngaze-glass-nav.has-dark-bg {
  background: rgba(0, 0, 0, 0.45) !important;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.1) !important;
}

/* ── INFINITE TICKER ───────────────────────────────── */

.ngaze-ticker {
  overflow: hidden !important;
  white-space: nowrap !important;
}

.ngaze-ticker .ngaze-ticker-inner,
.ngaze-ticker > * {
  display: inline-flex !important;
  animation: ngaze-ticker-scroll var(--ngaze-ticker-dur, 20s) linear infinite;
  white-space: nowrap;
}

.ngaze-ticker:hover .ngaze-ticker-inner,
.ngaze-ticker:hover > * {
  animation-play-state: paused;
}

@keyframes ngaze-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ngaze-ticker-slow .ngaze-ticker-inner,
.ngaze-ticker-slow > * {
  animation-duration: 30s;
}

.ngaze-ticker-fast .ngaze-ticker-inner,
.ngaze-ticker-fast > * {
  animation-duration: 12s;
}

.ngaze-ticker-medium .ngaze-ticker-inner,
.ngaze-ticker-medium > * {
  animation-duration: 20s;
}

/* ── CSS SCROLL REVEAL ─────────────────────────────── */

@supports (animation-timeline: view()) {
  .ngaze-reveal {
    animation: ngaze-reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
}

@keyframes ngaze-reveal-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}