/* Listings Junkie — motion surfaces. Pairs with /js/effects.js; harmless without it. */

/* Dot grid behind every hero band. */
.dotgrid { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.dotgrid canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hero .dotgrid::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(to bottom, transparent, var(--dark)); }
.hero::before { background: radial-gradient(ellipse at top, rgba(29, 78, 216, .28), transparent 65%); background-size: 100% 520px; background-repeat: no-repeat; }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at top, rgba(29, 78, 216, .10), transparent 60%); }
.page-hero--dark::before { background: radial-gradient(ellipse at top, rgba(29, 78, 216, .3), transparent 65%); }
.listing-head::before { background: radial-gradient(ellipse at top, rgba(29, 78, 216, .3), transparent 65%); }

/* Star border: a light that laps the edge of a button. The canvas overhangs by 48px so the glow is not clipped;
   the body clips sideways so that overhang can never add a horizontal scrollbar. */
body { overflow-x: clip; }
.star-border { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; border: 0; border-radius: var(--star-border-radius, 12px); background: var(--star-border-surface, #0c0c0f); color: var(--star-border-text, #fafafa) !important; line-height: 1.2; text-decoration: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.star-border::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; box-shadow: inset 0 0 0 var(--star-border-thickness, 1px) var(--star-border-track, rgba(255, 255, 255, .1)); pointer-events: none; }
.star-border__canvas { position: absolute; top: -48px; left: -48px; z-index: -1; width: calc(100% + 96px); height: calc(100% + 96px); pointer-events: none; }
.star-border:focus-visible { outline: 2px solid var(--star-border-track, rgba(255, 255, 255, .1)); outline-offset: 3px; }
.star-border, .star-border:hover { transform: none; }
.star-border--cta { padding: 16px 28px; font-size: 14px; font-weight: 900; width: fit-content; flex: none; }
@media (max-width: 639px) { .header__cta { display: none; } }
.star-border--hero { padding: 15px 24px; font-size: 14px; font-weight: 800; }

/* Spotlight: a soft light that follows the pointer across a card, with a brighter rim. */
.spot { position: relative; isolation: isolate; overflow: hidden; }
.spot__light { position: absolute; inset: 0; z-index: -1; border-radius: inherit; opacity: 0; pointer-events: none; }
.spot__edge { position: absolute; inset: 0; z-index: 1; border-radius: inherit; padding: 1px; opacity: 0; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }

/* Fold text: the hero title, word by word on a hinge. Copied from the reference. */
.fold-text { display: inline-block; color: var(--fold-text-color, currentColor); font-size: var(--fold-text-font-size, inherit); font-weight: var(--fold-text-font-weight, inherit); line-height: 0.95; letter-spacing: -0.04em; white-space: pre-wrap; user-select: text; }
.fold-text-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.fold-text-visual { display: inline; }
.fold-text-line { display: block; }
.fold-text-whitespace { display: inline; }
.fold-text-segment { display: inline-block; line-height: inherit; perspective: var(--fold-perspective, 700px); transform-style: preserve-3d; vertical-align: baseline; }
.fold-text-segment[data-fold-split='line'] { display: block; }
.fold-text-piece { position: relative; display: inline-block; color: inherit; line-height: inherit; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform, opacity; }
.fold-text-piece::after { content: ''; position: absolute; inset: -0.08em -0.02em; pointer-events: none; opacity: var(--fold-crease, 0); mix-blend-mode: multiply; border-radius: 0.08em; }
.fold-text-piece[data-fold-hinge='top']::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.22) 42%, rgba(255, 255, 255, 0.26) 100%); }
.fold-text-piece[data-fold-hinge='bottom']::after { background: linear-gradient(0deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.22) 42%, rgba(255, 255, 255, 0.26) 100%); }
.fold-text-piece[data-fold-hinge='left']::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.22) 42%, rgba(255, 255, 255, 0.26) 100%); }
.fold-text-piece[data-fold-hinge='right']::after { background: linear-gradient(270deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0.22) 42%, rgba(255, 255, 255, 0.26) 100%); }
@media (prefers-reduced-motion: reduce) {
  .fold-text-piece { transform: none !important; }
  .fold-text-piece::after { opacity: 0 !important; }
}