/* Site-wide rules carried over from the live nexros theme. */

/* Thin page scrollbar: live reserves 10px, not the browser default, so text wraps identically. */
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-thumb { border: 2px solid #fff0; background: #2e2e2e; background-clip: padding-box; }
body::-webkit-scrollbar-thumb:hover { border: 0; }
body::-webkit-scrollbar-track { box-shadow: inset 0 0 6px rgb(0 0 0 / .2); }

/* ---- Effects (see assets/effects.js) ---- */
.fx-particles { position: relative; }
.fx-particles > .fx-particles__canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }

.fx-rotator > * { display: none; transition: transform .6s ease, opacity .6s ease; }
.fx-rotator:not(.is-ready) > :first-child, .fx-rotator > .is-active { display: inline-block; }
.fx-rotator > .is-out { transform: translateY(-12px); opacity: 0; }
.fx-rotator > .is-in { transform: translateY(12px); opacity: 0; transition: none; }

.fx-vcarousel { overflow: hidden; }
.fx-vcarousel > * { will-change: transform; }

/* Scroll-driven fill for headings (live pxl heading "linear" style): wrap the text in <span class="fx-linear">. */
.fx-linear {
  background-image: linear-gradient(84deg, #fff -12%, #fff 20%, #fff 50%, var(--fx-linear-dim, rgb(191 189 189 / .6)) 50%, var(--fx-linear-dim, rgb(191 189 189 / .6)) 100%);
  background-size: 200% 100%; background-position: 0% 100%; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fx-linear { animation: fx-linear-fill linear both; animation-timeline: view(); animation-range: entry 30% cover 50%; }
  }
}
@keyframes fx-linear-fill { from { background-position: 100% 100%; } to { background-position: 0% 100%; } }