
.vfx .fx-rv[data-fx-wait]:not([data-fx-in]), .vfx .fx-rv-group[data-fx-wait]:not([data-fx-in]) > .fx-rv {
  opacity: 0; transform: translate3d(0, var(--fx-y, 28px), 0); filter: blur(8px);
}
.vfx .fx-rv {
  transition: opacity 1s cubic-bezier(.23,1,.32,1) var(--fx-delay, 0ms), transform 1.1s cubic-bezier(.23,1,.32,1) var(--fx-delay, 0ms),
    filter 1s cubic-bezier(.23,1,.32,1) var(--fx-delay, 0ms);
}
/* the mask leaves room for descenders and italic overhang (an italic word was clipped at its right edge) */
.fx-split .fx-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .12em .1em 0; margin: 0 -.12em -.1em 0; }
.fx-split .fx-wi { display: inline-block; }
.vfx .fx-split[data-fx-wait]:not([data-fx-in]) .fx-wi { transform: translate3d(0, 110%, 0); opacity: 0; }
.vfx .fx-split .fx-wi { transition: transform 1s cubic-bezier(.23,1,.32,1) var(--fx-delay, 0ms), opacity .6s ease-out var(--fx-delay, 0ms); }

[data-fx~="parallax"] { will-change: transform; }

/* marquee: two copies of the track move left forever */
.fx-mq { display: flex; overflow: hidden; gap: var(--fx-gap, 48px); }
.fx-mq-track { display: flex; flex: none; gap: var(--fx-gap, 48px); min-width: max-content; animation: fx-mq var(--fx-dur, 32s) linear infinite; }
.fx-mq-right .fx-mq-track { animation-direction: reverse; }
.fx-mq:hover .fx-mq-track { animation-play-state: paused; }
@keyframes fx-mq { to { transform: translate3d(calc(-100% - var(--fx-gap, 48px)), 0, 0); } }

/* pinned stages: stack (cards fall and pile up) and hscroll (a track that slides sideways) */
.fx-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.fx-stack-on .fx-stage { perspective: 1200px; }
.fx-stack-on .fx-stage > * { position: absolute; left: 50%; top: 50%; transform-origin: 50% 100%; margin: 0; will-change: transform; }
.fx-hscroll-on .fx-stage { display: flex; align-items: center; }
.fx-hscroll-on .fx-stage > :first-child { display: flex; flex-wrap: nowrap; width: max-content; will-change: transform; }
[data-fx~="hscroll"]:not(.fx-hscroll-on) { overflow-x: auto; }

/* arc carousel */
[data-fx~="arc"] { position: relative; }
.fx-arc-on { perspective: 1400px; height: var(--fx-h, 560px); overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; }
.fx-arc-on:active { cursor: grabbing; }
.fx-arc-on > * { position: absolute; left: 50%; top: 50%; margin: 0; transform-style: preserve-3d; }
.fx-arc-on img { -webkit-user-drag: none; pointer-events: none; }
.fx-arc-on:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
[data-fx~="arc"]:not(.fx-arc-on) { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; }
.fx-reflect { position: absolute; left: 0; right: 0; top: 100%; height: 60%; overflow: hidden; transform: scaleY(-1); opacity: .32;
  -webkit-mask: linear-gradient(0deg, #000e, transparent 70%); mask: linear-gradient(0deg, #000e, transparent 70%); filter: blur(1.5px); }
.fx-reflect img { display: block; width: 100%; transform: translateY(-40%); }

/* silk: the canvas fills the element behind its content */
[data-fx~="silk"] { position: relative; isolation: isolate; }
.fx-silk { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }

/* spotlight: a soft light that follows the pointer */
[data-fx~="spotlight"] { position: relative; isolation: isolate; }
[data-fx~="spotlight"]::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 30%), var(--fx-spot, rgb(255 255 255 / .14)), transparent 60%); }

/* grain: CSS only, a static film grain over the element */
[data-fx~="grain"] { position: relative; isolation: isolate; }
[data-fx~="grain"]::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: var(--fx-grain, .09); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* the editor's selection */
[data-vt-preview] [data-vt-section] { cursor: pointer; }
[data-vt-preview] [data-vt-selected] { outline: 2px solid #3b82f6; outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .fx-mq-track { animation: none; }
  .vfx .fx-rv, .vfx .fx-split .fx-wi { transition: none; }
}
