:root {
  color-scheme: dark;
  --rv-cycle: 5.68s;
  --rv-sync: 0s;
  --rv-gold: 222, 184, 91;
  --rv-cyan: 59, 224, 190;
  --rv-radius: clamp(14px, 1.35vw, 22px);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  display: grid;
  place-items: center;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 31%, rgba(22, 49, 59, .36), transparent 41%),
    linear-gradient(180deg, #02080d 0%, #020b12 100%);
}
.demo-shell {
  width: min(1280px, 96vw);
  padding: clamp(22px, 5vw, 68px) 0;
}
.rv-oracle {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 3842 / 2070;
  transform: translateZ(0);
}
.rv-screen {
  position: absolute;
  inset: 3.4% 2.3%;
  overflow: hidden;
  border-radius: var(--rv-radius);
  background: #031019;
  border: 1px solid rgba(var(--rv-gold), .17);
  box-shadow:
    0 34px 94px rgba(0, 0, 0, .54),
    0 0 0 1px rgba(255, 255, 255, .025) inset,
    0 0 56px rgba(44, 163, 176, .045);
  contain: paint;
}
.rv-camera {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  will-change: transform, filter;
}
.rv-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #031019;
  filter: saturate(1.035) contrast(1.025) brightness(.985);
  backface-visibility: hidden;
}
.rv-glass,
.rv-vignette,
.rv-edge,
.rv-focus,
.rv-click,
.rv-pulse,
.rv-flow,
.rv-chart-scan,
.rv-reticle,
.rv-transition-flash,
.rv-loop-cover { pointer-events: none; }
.rv-glass {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: .62;
  background:
    linear-gradient(114deg, rgba(255,255,255,.032) 0%, transparent 25%, transparent 72%, rgba(255,255,255,.018) 100%),
    radial-gradient(circle at 74% 14%, rgba(87, 227, 214, .04), transparent 34%);
  mix-blend-mode: screen;
}
.rv-vignette {
  position: absolute;
  inset: -1px;
  z-index: 12;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, transparent 52%, rgba(0,5,9,.16) 78%, rgba(0,4,8,.48) 112%);
}
.rv-edge {
  position: absolute;
  inset: 0;
  z-index: 18;
  border-radius: inherit;
  box-shadow:
    0 0 0 1px rgba(var(--rv-gold), .09) inset,
    0 1px 0 rgba(255,255,255,.045) inset,
    0 -1px 0 rgba(0,0,0,.38) inset;
}

.rv-ambient {
  position: absolute;
  inset: -11% -7%;
  z-index: -1;
  overflow: hidden;
  opacity: .7;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 0 58%, transparent 87%);
}
.rv-orbit {
  position: absolute;
  border: 1px solid rgba(var(--rv-gold), .07);
  border-radius: 50%;
}
.rv-orbit--one {
  width: 80%;
  aspect-ratio: 1.68;
  top: -4%;
  right: -3%;
  transform: rotate(11deg);
}
.rv-orbit--two {
  width: 60%;
  aspect-ratio: 1.18;
  right: 8%;
  bottom: -16%;
  border-color: rgba(66, 194, 204, .07);
}
.rv-orbit--three {
  width: 45%;
  aspect-ratio: 1;
  left: 2%;
  top: 7%;
  border-color: rgba(var(--rv-gold), .045);
}
.rv-star {
  position: absolute;
  width: 3px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(233, 197, 106, .86);
  box-shadow: 0 0 9px rgba(233, 197, 106, .48);
}
.rv-star--one { left: 17%; top: 18%; }
.rv-star--two { right: 22%; top: 18%; }
.rv-star--three { right: 8%; bottom: 19%; }
.rv-star--four { left: 58%; bottom: 5%; }

.rv-focus {
  position: absolute;
  z-index: 9;
  opacity: 0;
  transform: scale(.97);
  border-radius: clamp(9px, .9vw, 15px);
  box-shadow:
    0 0 0 100vmax rgba(0, 5, 9, .29),
    0 0 38px rgba(var(--rv-gold), .055) inset;
  will-change: opacity, transform;
}
.rv-focus::before,
.rv-focus::after {
  content: "";
  position: absolute;
  border-radius: inherit;
}
.rv-focus::before {
  inset: 10%;
  border: 1px solid rgba(var(--rv-gold), .11);
  opacity: .7;
}
.rv-focus::after {
  inset: -5%;
  background: radial-gradient(ellipse at center, rgba(var(--rv-gold), .05), transparent 69%);
  filter: blur(10px);
}
.rv-focus > i {
  position: absolute;
  width: clamp(16px, 1.8vw, 29px);
  height: clamp(16px, 1.8vw, 29px);
  border-color: rgba(var(--rv-gold), .91);
  filter: drop-shadow(0 0 7px rgba(var(--rv-gold), .29));
}
.rv-focus > i:nth-child(1) { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; border-top-left-radius: 7px; }
.rv-focus > i:nth-child(2) { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; border-top-right-radius: 7px; }
.rv-focus > i:nth-child(3) { right: 0; bottom: 0; border-right: 2px solid; border-bottom: 2px solid; border-bottom-right-radius: 7px; }
.rv-focus > i:nth-child(4) { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; border-bottom-left-radius: 7px; }
.rv-focus--data { top: 5.7%; left: 1.1%; width: 20.4%; height: 88.2%; }
.rv-focus--chart { top: 10.4%; left: 21.6%; width: 57.2%; height: 77.4%; }
.rv-focus--model { top: 6.7%; right: 1.1%; width: 20.2%; height: 86.6%; }
.rv-focus--pattern { top: 27%; left: 34.5%; width: 43%; height: 44.5%; }

.rv-click {
  position: absolute;
  z-index: 14;
  width: clamp(32px, 3vw, 50px);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.68);
}
.rv-click::before,
.rv-click::after,
.rv-click > i,
.rv-click > i::before {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.rv-click::before {
  inset: 0;
  border: 2px solid rgba(var(--rv-gold), .95);
  box-shadow: 0 0 18px rgba(var(--rv-gold), .25);
}
.rv-click::after {
  inset: 30%;
  background: rgba(var(--rv-gold), .94);
  box-shadow: 0 0 16px rgba(var(--rv-gold), .38);
}
.rv-click > i { inset: -25%; border: 1px solid rgba(var(--rv-gold), .31); }
.rv-click > i::before { inset: -45%; border: 1px solid rgba(var(--rv-gold), .14); }
.rv-click--data { left: 2.2%; top: 22.7%; }
.rv-click--model { left: 89.1%; top: 42.6%; }

.rv-pulse {
  position: absolute;
  z-index: 13;
  width: clamp(8px, .72vw, 12px);
  aspect-ratio: 1;
  opacity: 0;
  border: 1px solid rgba(var(--rv-cyan), .92);
  border-radius: 50%;
  background: rgba(var(--rv-cyan), .2);
  box-shadow: 0 0 0 0 rgba(var(--rv-cyan), .26), 0 0 13px rgba(var(--rv-cyan), .22);
  transform: translate(-50%, -50%) scale(.65);
}
.rv-pulse--metric-a { left: 9.1%; top: 19.4%; }
.rv-pulse--metric-b { left: 8.6%; top: 47.8%; }
.rv-pulse--pattern-a { left: 49.3%; top: 56.8%; border-color: rgba(var(--rv-gold), .96); background: rgba(var(--rv-gold), .18); }
.rv-pulse--pattern-b { left: 55.8%; top: 47.2%; border-color: rgba(var(--rv-gold), .96); background: rgba(var(--rv-gold), .18); }

.rv-flow {
  position: absolute;
  z-index: 11;
  height: 8%;
  opacity: 0;
}
.rv-flow b {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, transparent, rgba(var(--rv-cyan), .8) 18%, rgba(var(--rv-gold), .92) 65%, transparent);
  box-shadow: 0 0 13px rgba(var(--rv-cyan), .19), 0 0 15px rgba(var(--rv-gold), .14);
}
.rv-flow b::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2%;
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(var(--rv-gold), .92);
  border-right: 2px solid rgba(var(--rv-gold), .92);
  transform: translateY(-50%) rotate(45deg);
  filter: drop-shadow(0 0 5px rgba(var(--rv-gold), .28));
}
.rv-flow--left { left: 16.6%; top: 43%; width: 34%; }
.rv-flow--right { left: 52%; top: 43%; width: 35.5%; }

.rv-chart-scan {
  position: absolute;
  z-index: 10;
  left: 30%;
  top: 27%;
  width: 48%;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(var(--rv-cyan), .65), rgba(var(--rv-gold), .9), transparent);
  box-shadow: 0 0 11px rgba(var(--rv-cyan), .2);
}
.rv-reticle {
  position: absolute;
  z-index: 13;
  left: 49.4%;
  top: 56.8%;
  width: clamp(58px, 5.2vw, 84px);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.85);
  border: 1px solid rgba(var(--rv-gold), .44);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(var(--rv-gold), .11);
}
.rv-reticle::before,
.rv-reticle::after,
.rv-reticle i,
.rv-reticle b {
  content: "";
  position: absolute;
}
.rv-reticle::before { left: 50%; top: -15%; bottom: -15%; width: 1px; background: linear-gradient(transparent, rgba(var(--rv-gold), .52), transparent); }
.rv-reticle::after { top: 50%; left: -15%; right: -15%; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--rv-gold), .52), transparent); }
.rv-reticle i { inset: 26%; border: 1px solid rgba(var(--rv-cyan), .42); border-radius: 50%; }
.rv-reticle b { inset: 46%; border-radius: 50%; background: rgba(var(--rv-gold), .95); box-shadow: 0 0 12px rgba(var(--rv-gold), .5); }

.rv-transition-flash {
  position: absolute;
  inset: 0;
  z-index: 16;
  opacity: 0;
  background:
    linear-gradient(105deg, transparent 28%, rgba(var(--rv-cyan), .09) 45%, rgba(var(--rv-gold), .18) 52%, transparent 69%),
    rgba(1, 8, 13, .16);
  mix-blend-mode: screen;
}
.rv-loop-cover {
  position: absolute;
  inset: 0;
  z-index: 17;
  opacity: 0;
  background:
    radial-gradient(ellipse at center, rgba(4,16,24,.82), #02080d 78%),
    #02080d;
}

.rv-oracle.is-animating .rv-camera { animation: rv-camera var(--rv-cycle) cubic-bezier(.45,0,.2,1) infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-focus--data { animation: rv-focus-data var(--rv-cycle) ease-in-out infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-focus--chart { animation: rv-focus-chart var(--rv-cycle) ease-in-out infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-focus--model { animation: rv-focus-model var(--rv-cycle) ease-in-out infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-focus--pattern { animation: rv-focus-pattern var(--rv-cycle) ease-in-out infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-click--data { animation: rv-click-data var(--rv-cycle) ease-out infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-click--model { animation: rv-click-model var(--rv-cycle) ease-out infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-pulse--metric-a { animation: rv-pulse-metric-a var(--rv-cycle) ease-out infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-pulse--metric-b { animation: rv-pulse-metric-b var(--rv-cycle) ease-out infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-pulse--pattern-a { animation: rv-pulse-pattern-a var(--rv-cycle) ease-out infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-pulse--pattern-b { animation: rv-pulse-pattern-b var(--rv-cycle) ease-out infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-flow--left { animation: rv-flow-left-wrap var(--rv-cycle) ease-in-out infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-flow--left b { animation: rv-flow-left-line var(--rv-cycle) ease-in-out infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-flow--right { animation: rv-flow-right-wrap var(--rv-cycle) ease-in-out infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-flow--right b { animation: rv-flow-right-line var(--rv-cycle) ease-in-out infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-chart-scan { animation: rv-chart-scan var(--rv-cycle) ease-in-out infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-reticle { animation: rv-reticle var(--rv-cycle) ease-in-out infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-transition-flash { animation: rv-transition-flash var(--rv-cycle) ease-in-out infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-loop-cover { animation: rv-loop-cover var(--rv-cycle) ease-in-out infinite both; animation-delay: var(--rv-sync); }
.rv-oracle.is-animating .rv-orbit--one { animation: rv-orbit-one 26s linear infinite; }
.rv-oracle.is-animating .rv-orbit--two { animation: rv-orbit-two 32s linear infinite reverse; }
.rv-oracle.is-animating .rv-orbit--three { animation: rv-orbit-three 38s linear infinite; }
.rv-oracle.is-animating .rv-star { animation: rv-star 3.5s ease-in-out infinite alternate; }

.rv-oracle.is-paused *,
.rv-oracle.is-paused *::before,
.rv-oracle.is-paused *::after { animation-play-state: paused !important; }

@keyframes rv-camera {
  0%, 7% { transform: translate3d(0,0,0) scale(1.012); filter: brightness(1); }
  12%, 28% { transform: translate3d(4.7%, .2%, 0) scale(1.105); filter: brightness(1.012); }
  32%, 40% { transform: translate3d(-1.2%, .15%, 0) scale(1.135); filter: brightness(1.02); }
  44% { transform: translate3d(0,0,0) scale(1.025); filter: brightness(1); }
  49%, 62% { transform: translate3d(-7.7%, .15%, 0) scale(1.11); filter: brightness(1.015); }
  67%, 93.5% { transform: translate3d(-1.8%, .6%, 0) scale(1.158); filter: brightness(1.022); }
  100% { transform: translate3d(0,0,0) scale(1.012); filter: brightness(1); }
}
@keyframes rv-focus-data {
  0%, 6%, 31%, 100% { opacity: 0; transform: scale(.97); }
  10%, 28% { opacity: 1; transform: scale(1); }
}
@keyframes rv-focus-chart {
  0%, 28%, 43%, 100% { opacity: 0; transform: scale(.972); }
  32%, 40% { opacity: .96; transform: scale(1); }
}
@keyframes rv-focus-model {
  0%, 45%, 65%, 100% { opacity: 0; transform: scale(.97); }
  49%, 62% { opacity: 1; transform: scale(1); }
}
@keyframes rv-focus-pattern {
  0%, 61%, 96%, 100% { opacity: 0; transform: scale(.97); }
  67%, 92% { opacity: .98; transform: scale(1); }
}
@keyframes rv-click-data {
  0%, 7%, 18%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(.68); }
  9.5% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  13% { opacity: .9; transform: translate(-50%,-50%) scale(1.08); }
  17% { opacity: 0; transform: translate(-50%,-50%) scale(1.9); }
}
@keyframes rv-click-model {
  0%, 49%, 59%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(.68); }
  51% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  54% { opacity: .95; transform: translate(-50%,-50%) scale(1.08); }
  58% { opacity: 0; transform: translate(-50%,-50%) scale(1.9); }
}
@keyframes rv-pulse-metric-a {
  0%, 12%, 19%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(.65); box-shadow: 0 0 0 0 rgba(var(--rv-cyan),.26); }
  13.5% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  18% { opacity: 0; transform: translate(-50%,-50%) scale(1.9); box-shadow: 0 0 0 15px rgba(var(--rv-cyan),0); }
}
@keyframes rv-pulse-metric-b {
  0%, 20%, 28%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(.65); box-shadow: 0 0 0 0 rgba(var(--rv-cyan),.26); }
  21.5% { opacity: .95; transform: translate(-50%,-50%) scale(1); }
  27% { opacity: 0; transform: translate(-50%,-50%) scale(1.9); box-shadow: 0 0 0 15px rgba(var(--rv-cyan),0); }
}
@keyframes rv-pulse-pattern-a {
  0%, 69%, 77%, 86%, 94%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(.65); box-shadow: 0 0 0 0 rgba(var(--rv-gold),.28); }
  71%, 88% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  76%, 93% { opacity: 0; transform: translate(-50%,-50%) scale(1.95); box-shadow: 0 0 0 16px rgba(var(--rv-gold),0); }
}
@keyframes rv-pulse-pattern-b {
  0%, 76%, 84%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(.65); box-shadow: 0 0 0 0 rgba(var(--rv-gold),.28); }
  78% { opacity: .95; transform: translate(-50%,-50%) scale(1); }
  83% { opacity: 0; transform: translate(-50%,-50%) scale(1.9); box-shadow: 0 0 0 15px rgba(var(--rv-gold),0); }
}
@keyframes rv-flow-left-wrap {
  0%, 17%, 39%, 100% { opacity: 0; }
  21%, 35% { opacity: .92; }
}
@keyframes rv-flow-left-line {
  0%, 18% { transform: translateY(-50%) scaleX(0); }
  29%, 38%, 100% { transform: translateY(-50%) scaleX(1); }
}
@keyframes rv-flow-right-wrap {
  0%, 57%, 78%, 100% { opacity: 0; }
  61%, 73% { opacity: .92; }
}
@keyframes rv-flow-right-line {
  0%, 58% { transform: translateY(-50%) scaleX(0); }
  68%, 78%, 100% { transform: translateY(-50%) scaleX(1); }
}
@keyframes rv-chart-scan {
  0%, 64% { opacity: 0; transform: translateY(0); }
  67% { opacity: .85; }
  90% { opacity: .1; transform: translateY(41vh); }
  94%, 100% { opacity: 0; }
}
@keyframes rv-reticle {
  0%, 68%, 96%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(.82) rotate(-8deg); }
  72% { opacity: .85; }
  80% { opacity: 1; transform: translate(-50%,-50%) scale(1.03) rotate(0); }
  92% { opacity: .45; transform: translate(-50%,-50%) scale(1.1) rotate(6deg); }
}
@keyframes rv-transition-flash {
  0%, 40%, 47%, 100% { opacity: 0; transform: translateX(-25%); }
  42.2% { opacity: .72; }
  45% { opacity: .18; transform: translateX(25%); }
}
@keyframes rv-loop-cover {
  0% { opacity: 1; }
  5.5%, 93.5% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes rv-orbit-one { from { transform: rotate(11deg); } to { transform: rotate(371deg); } }
@keyframes rv-orbit-two { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes rv-orbit-three { from { transform: rotate(-18deg); } to { transform: rotate(342deg); } }
@keyframes rv-star { from { opacity: .3; transform: translateY(0) scale(.9); } to { opacity: .95; transform: translateY(-6px) scale(1.08); } }

@media (max-width: 720px) {
  .rv-screen { inset: 2.4% 1.4%; }
  .rv-focus > i { border-width: 1px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .rv-oracle *, .rv-oracle *::before, .rv-oracle *::after { animation: none !important; }
  .rv-camera { transform: none !important; }
  .rv-loop-cover { display: none; }
}

/* Same-origin iframe embed used by the RelaxView software VIP hero. */
html,
body {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

body { display: block; }

.demo-shell {
  width: 100%;
  height: 100%;
  padding: 0;
}

.rv-oracle {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}