/* Refervia elevation layer: additive visual polish for the static landing pages.
 * Changes no copy and no behaviour. Every effect is opt-out under prefers-reduced-motion.
 * Patterns adapted from Magic UI (MIT, github.com/magicuidesign/magicui): shimmer button,
 * magic card (cursor spotlight), dot pattern; plus standard CSS scroll-reveal. See
 * docs/design/elevation-research.md. */
:root {
  --rv-blue: #2D6FE8;
  --rv-teal: #00C7A7;
  --rv-navy: #0F1F3D;
}

/* Typography + interaction polish */
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: rgba(0, 199, 167, .22); color: inherit; }
:focus-visible { outline: 2px solid var(--rv-blue); outline-offset: 3px; border-radius: 6px; }

/* Hero: a slow aurora glow and a faint dot grid, painted behind the content */
section[data-screen-label="Hero"] { position: relative; isolation: isolate; }
section[data-screen-label="Hero"]::before {
  content: ""; position: absolute; inset: -6% -4% 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 46% at 12% 22%, rgba(45, 111, 232, .13), transparent 70%),
    radial-gradient(34% 42% at 88% 14%, rgba(0, 199, 167, .15), transparent 70%),
    radial-gradient(30% 38% at 62% 86%, rgba(45, 111, 232, .07), transparent 70%);
  animation: rvAurora 22s ease-in-out infinite alternate;
}
section[data-screen-label="Hero"]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(15, 31, 61, .09) 1px, transparent 1.2px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 80%);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000 30%, transparent 80%);
}
@keyframes rvAurora {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2%, -2%, 0) scale(1.05); }
  100% { transform: translate3d(-2%, 1%, 0) scale(1.02); }
}

/* Header: frosted glass once the page scrolls (class set by rv-elevate.js) */
.rv-hdr-glass {
  backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
  box-shadow: 0 1px 0 rgba(15, 31, 61, .06), 0 8px 24px -16px rgba(15, 31, 61, .25);
  transition: box-shadow .3s ease;
}

/* Cards: cursor-following spotlight + a hairline brand ring on hover (Magic UI "magic card").
 * .rv-spot is added by rv-elevate.js to white rounded cards; --mx/--my follow the pointer. */
.rv-spot { transition: box-shadow .35s ease; }
.rv-spot:hover {
  background-image: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(45, 111, 232, .075), transparent 62%) !important;
  box-shadow: 0 0 0 1px rgba(45, 111, 232, .16), 0 22px 44px -18px rgba(15, 31, 61, .22) !important;
}

/* Scroll reveal: only below-the-fold blocks, only once JS has marked them. Content never
 * depends on JS: without it, nothing is hidden. */
.rv-reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.rv-reveal.rv-in { opacity: 1; transform: none; }

/* Subtle, on-brand scrollbar */
@supports (scrollbar-color: auto) { html { scrollbar-color: rgba(15, 31, 61, .28) transparent; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  section[data-screen-label="Hero"]::before { animation: none; }
  .rvp .btn.primary::after, a[style*="background:#2D6FE8"][style*="border-radius:999px"]::after { animation: none; display: none; }
  .rv-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Hero product preview: a thin light that travels around its edge (Magic UI "border beam").
 * .rv-beam is added by rv-elevate.js to the hero's main preview card. */
@property --rv-beam-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.rv-beam { position: relative; }
.rv-beam::before {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none; z-index: 2;
  background: conic-gradient(from var(--rv-beam-a), transparent 0 68%, rgba(0, 199, 167, .0) 70%, #00C7A7 82%, #2D6FE8 90%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: rvBeam 7s linear infinite;
}
@keyframes rvBeam { to { --rv-beam-a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .rv-beam::before { animation: none; opacity: .5; } }

/* Glow outline buttons: secondary CTAs get a brand-colored outline, a soft outer
 * glow and a text glow (blue for real estate, green for insurance), so they read
 * as clearly different from the filled primary buttons. !important wins over the
 * buttons' inline styles (and the hover styles the page runtime applies). They
 * hold still (Perry, Oct 23, 2026: "just animate the button we need for sign
 * ups"); only .rv-cta-hot below moves. */
.rv-glow-btn {
  --rvg: 45, 111, 232; --rvg-text: #2763D0;
  position: relative;
  color: var(--rvg-text) !important;
  background: rgba(var(--rvg), .045) !important;
  border: 1.5px solid rgba(var(--rvg), .6) !important;
  text-shadow: 0 0 14px rgba(var(--rvg), .45);
  box-shadow: 0 0 0 1px rgba(var(--rvg), .08), 0 0 18px rgba(var(--rvg), .24), inset 0 0 12px rgba(var(--rvg), .07);
  transition: box-shadow .3s ease, border-color .3s ease, background .3s ease, transform .2s ease, text-shadow .3s ease;
}
.rv-glow-btn--green { --rvg: 0, 199, 167; --rvg-text: #007561; }
.rv-glow-btn:hover, .rv-glow-btn:focus-visible {
  border-color: rgba(var(--rvg), 1) !important;
  background: rgba(var(--rvg), .09) !important;
  text-shadow: 0 0 18px rgba(var(--rvg), .7);
  box-shadow: 0 0 0 1px rgba(var(--rvg), .2), 0 0 30px rgba(var(--rvg), .45), inset 0 0 16px rgba(var(--rvg), .12);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) { .rv-glow-btn { transition: none; } }

/* Consistent CTA hover: every pill button on the marketing pages lifts slightly
 * and brightens on hover (outline buttons also get a soft tint), so none of them
 * feel dead. Additive: existing color/border hover effects still apply on top.
 * .rv-cta / .rv-cta--ghost are added by rv-elevate.js. */
.rv-cta { transition: transform .22s cubic-bezier(.2,.7,.2,1), filter .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease; will-change: transform; }
.rv-cta:hover { transform: translateY(-2px); filter: brightness(1.06) saturate(1.06); }
.rv-cta:active { transform: translateY(0) scale(.985); }
.rv-cta--ghost:hover { background-color: rgba(45, 111, 232, .07) !important; }
.rv-cta--solid:hover { box-shadow: 0 14px 30px -10px rgba(15, 31, 61, .35), 0 0 0 1px rgba(255, 255, 255, .08) inset; }
@media (prefers-reduced-motion: reduce) { .rv-cta, .rv-cta:hover, .rv-cta:active { transform: none; } }

/* The sign-up button is the one button that moves, on every page type
 * ("Create Your Referral Desk", and each feature page's own sign-up button):
 * a soft beat with a ring, then a light sweep across it, every 3.2 seconds, so
 * it invites the tap instead of sitting still (Perry, Oct 23, 2026: "make it
 * enticing to click, not just dormant, we want sign ups", then "just animate
 * the button we need for sign ups"). It rests while hovered so the hover lift
 * reads. With Reduce Motion on, nothing moves: only the glow breathes.
 * app/globals.css (the app's pages) has the same animation. */
.rv-cta-hot {
  --rvh: 45, 111, 232;
  --rvh-shadow: 0 12px 26px rgba(45, 111, 232, .30);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  animation: rvHotBeat 3.2s ease-in-out infinite;
}
.rv-cta-hot--teal { --rvh: 0, 201, 167; --rvh-shadow: 0 12px 26px rgba(0, 201, 167, .26); }
.rv-cta-hot::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 34%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-170%) skewX(-18deg);
  animation: rvHotSheen 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rvHotBeat {
  0%, 46%, 100% { transform: scale(1); box-shadow: var(--rvh-shadow), 0 0 0 0 rgba(var(--rvh), 0); }
  4% { box-shadow: var(--rvh-shadow), 0 0 0 0 rgba(var(--rvh), .5); }
  14% { transform: scale(1.045); }
  30% { transform: scale(1); }
  42% { box-shadow: var(--rvh-shadow), 0 0 0 16px rgba(var(--rvh), 0); }
}
@keyframes rvHotSheen {
  0%, 46% { transform: translateX(-170%) skewX(-18deg); }
  76%, 100% { transform: translateX(420%) skewX(-18deg); }
}
@keyframes rvHotGlow {
  0%, 100% { box-shadow: var(--rvh-shadow), 0 0 0 0 rgba(var(--rvh), 0); }
  50% { box-shadow: var(--rvh-shadow), 0 0 22px 4px rgba(var(--rvh), .35); }
}
.rv-cta-hot:hover, .rv-cta-hot:focus-visible { animation: none; }
.rv-cta-hot:hover::after, .rv-cta-hot:focus-visible::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .rv-cta-hot { animation: rvHotGlow 3.2s ease-in-out infinite; }
  .rv-cta-hot::after { animation: none; opacity: 0; }
}