:root {
  color-scheme: dark;
  --rv-cycle: 6s;
  --rv-gold: 221, 184, 91;
  --rv-cyan: 61, 226, 193;
  --rv-red: 239, 99, 116;
  --rv-radius: clamp(13px, 1.3vw, 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% 26%, rgba(26, 54, 64, .35), transparent 42%),
    linear-gradient(180deg, #02080e 0%, #031018 100%);
}
.demo-shell { width: min(1320px, 96vw); padding: clamp(20px, 5vw, 68px) 0; }
.rv-calendar { position: relative; isolation: isolate; width: 100%; aspect-ratio: 2048 / 1104; }
.rv-screen {
  position: absolute;
  inset: 3.2% 2.25%;
  overflow: hidden;
  border: 1px solid rgba(var(--rv-gold), .18);
  border-radius: var(--rv-radius);
  background: #031018;
  box-shadow:
    0 34px 92px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 0 52px rgba(42,158,173,.045);
  contain: paint;
}
.rv-camera { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform, filter; }
.rv-image { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.035) contrast(1.02) brightness(.985); }
.rv-glass,
.rv-vignette,
.rv-loop-mask,
.rv-sweep,
.rv-focus,
.rv-click,
.rv-pulse,
.rv-trace,
.rv-chart-scan,
.rv-model-halo,
.rv-edge { pointer-events: none; }
.rv-glass {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: .66;
  background:
    linear-gradient(111deg, rgba(255,255,255,.028) 0%, transparent 25%, transparent 73%, rgba(255,255,255,.018) 100%),
    radial-gradient(circle at 72% 15%, rgba(91,223,215,.04), transparent 33%);
  mix-blend-mode: screen;
}
.rv-vignette {
  position: absolute;
  inset: -1px;
  z-index: 8;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,5,9,.17) 77%, rgba(0,4,8,.5) 112%);
}
.rv-edge {
  position: absolute;
  inset: 0;
  z-index: 14;
  border-radius: inherit;
  box-shadow:
    0 0 0 1px rgba(var(--rv-gold), .1) inset,
    0 1px 0 rgba(255,255,255,.04) inset,
    0 -1px 0 rgba(0,0,0,.38) inset;
}
.rv-loop-mask {
  position: absolute;
  inset: 0;
  z-index: 13;
  opacity: 0;
  background: #01080d;
}
.rv-sweep {
  position: absolute;
  z-index: 4;
  top: -20%;
  bottom: -20%;
  left: -28%;
  width: 12%;
  opacity: 0;
  transform: skewX(-12deg);
  background: linear-gradient(90deg, transparent, rgba(91,231,215,.07), rgba(255,231,168,.11), transparent);
  filter: blur(8px);
}

.rv-focus {
  position: absolute;
  z-index: 9;
  opacity: 0;
  transform: scale(.972);
  border-radius: clamp(8px, .9vw, 15px);
  box-shadow:
    0 0 0 100vmax rgba(0,5,9,.28),
    0 0 34px rgba(var(--rv-gold), .05) inset;
}
.rv-focus > i {
  position: absolute;
  width: clamp(16px, 1.8vw, 28px);
  height: clamp(16px, 1.8vw, 28px);
  border-color: rgba(var(--rv-gold), .9);
  filter: drop-shadow(0 0 7px rgba(var(--rv-gold), .28));
}
.rv-focus > i:nth-child(1) { top: 0; left: 0; border-top: 2px solid; border-left: 2px solid; border-top-left-radius: 6px; }
.rv-focus > i:nth-child(2) { top: 0; right: 0; border-top: 2px solid; border-right: 2px solid; border-top-right-radius: 6px; }
.rv-focus > i:nth-child(3) { right: 0; bottom: 0; border-right: 2px solid; border-bottom: 2px solid; border-bottom-right-radius: 6px; }
.rv-focus > i:nth-child(4) { bottom: 0; left: 0; border-bottom: 2px solid; border-left: 2px solid; border-bottom-left-radius: 6px; }

.rv-focus--calendar { left: 3.95%; top: 11.35%; width: 16.2%; height: 37.5%; }
.rv-focus--event { left: 4.15%; top: 50.7%; width: 15.95%; height: 18.6%; }
.rv-focus--chart { left: 36.2%; top: 31.2%; width: 34.9%; height: 38.9%; }
.rv-focus--model-top { right: 4.45%; top: 11.5%; width: 16.1%; height: 26.2%; }
.rv-focus--model-result { right: 4.35%; top: 49.1%; width: 16.3%; height: 44.2%; }

.rv-click {
  position: absolute;
  z-index: 12;
  width: clamp(30px, 3vw, 50px);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.7);
}
.rv-click::before,
.rv-click::after,
.rv-click > i,
.rv-click > i::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.rv-click::before { border: 2px solid rgba(var(--rv-gold), .92); box-shadow: 0 0 18px rgba(var(--rv-gold), .22); }
.rv-click::after { inset: 31%; background: rgba(var(--rv-gold), .9); box-shadow: 0 0 18px rgba(var(--rv-gold), .32); }
.rv-click > i { border: 1px solid rgba(var(--rv-gold), .38); }
.rv-click > i::before { inset: -34%; border: 1px solid rgba(var(--rv-gold), .17); }
.rv-click--calendar { left: 13.95%; top: 20.25%; }
.rv-click--model { right: 1.7%; top: 18.55%; }

.rv-pulse {
  position: absolute;
  z-index: 11;
  width: clamp(8px, .75vw, 12px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%,-50%) scale(.65);
  border: 1px solid rgba(var(--rv-cyan), .92);
  background: rgba(var(--rv-cyan), .18);
  box-shadow: 0 0 0 0 rgba(var(--rv-cyan), .28), 0 0 14px rgba(var(--rv-cyan), .22);
}
.rv-pulse--date-one { left: 9.7%; top: 24.5%; }
.rv-pulse--date-two { left: 14.0%; top: 28.7%; }
.rv-pulse--event { left: 9.2%; top: 61.7%; border-color: rgba(var(--rv-gold), .92); background: rgba(var(--rv-gold), .18); }
.rv-pulse--target-one { left: 59.7%; top: 49.3%; }
.rv-pulse--target-two { left: 69.3%; top: 31.2%; }
.rv-pulse--model { left: 87.4%; top: 74.8%; border-color: rgba(var(--rv-gold), .92); background: rgba(var(--rv-gold), .18); }

.rv-trace {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rv-trace path { fill: none; opacity: 0; stroke-linecap: round; stroke-linejoin: round; }
.rv-trace__pattern {
  stroke: rgb(var(--rv-gold));
  stroke-width: 3.5;
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  filter: url(#rv-glow-gold);
}
.rv-trace__forecast {
  stroke: rgb(var(--rv-cyan));
  stroke-width: 3.2;
  stroke-dasharray: 12 10;
  stroke-dashoffset: 760;
  filter: url(#rv-glow-cyan);
}
.rv-trace__flow {
  stroke: url(#rv-flow-gradient);
  stroke-width: 3;
  stroke-dasharray: 620;
  stroke-dashoffset: 620;
  filter: url(#rv-glow-cyan);
}
.rv-trace__node {
  fill: rgba(var(--rv-cyan), .9);
  stroke: rgba(173,255,239,.8);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.rv-chart-scan {
  position: absolute;
  z-index: 7;
  top: 31%;
  left: 35.5%;
  width: 2.3%;
  height: 41%;
  opacity: 0;
  transform: translateX(0) skewX(-7deg);
  background: linear-gradient(90deg, transparent, rgba(var(--rv-gold),.11), rgba(var(--rv-gold),.23), transparent);
  filter: blur(5px);
}
.rv-model-halo {
  position: absolute;
  z-index: 11;
  left: 80.7%;
  top: 13.7%;
  width: 11.8%;
  aspect-ratio: 1;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--rv-gold),.12), rgba(var(--rv-gold),.035) 44%, transparent 70%);
  filter: drop-shadow(0 0 15px rgba(var(--rv-gold),.16));
}
.rv-model-halo > i,
.rv-model-halo > b { position: absolute; inset: 8%; border-radius: 50%; }
.rv-model-halo > i { border: 1px solid rgba(var(--rv-gold), .42); box-shadow: 0 0 16px rgba(var(--rv-gold), .1) inset; }
.rv-model-halo > b { inset: -1%; border-top: 3px solid rgba(var(--rv-gold), .9); border-right: 3px solid transparent; }

.rv-ambient {
  position: absolute;
  inset: -10% -7%;
  z-index: -1;
  overflow: hidden;
  opacity: .67;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 0 57%, transparent 87%);
}
.rv-orbit { position: absolute; border: 1px solid rgba(var(--rv-gold), .07); border-radius: 50%; }
.rv-orbit--one { width: 78%; aspect-ratio: 1.65; top: -5%; right: -2%; transform: rotate(10deg); }
.rv-orbit--two { width: 54%; aspect-ratio: 1; right: 8%; bottom: -16%; border-color: rgba(77,201,208,.07); }
.rv-star { position: absolute; width: 3px; aspect-ratio: 1; border-radius: 50%; background: rgba(232,195,102,.84); box-shadow: 0 0 8px rgba(232,195,102,.46); }
.rv-star--one { left: 17%; top: 16%; }
.rv-star--two { right: 21%; top: 19%; }
.rv-star--three { right: 8%; bottom: 20%; }

.rv-calendar.is-animating .rv-camera { animation: rv-camera var(--rv-cycle) cubic-bezier(.45,0,.2,1) infinite both; }
.rv-calendar.is-animating .rv-focus--calendar { animation: rv-focus-calendar var(--rv-cycle) ease-in-out infinite both; }
.rv-calendar.is-animating .rv-focus--event { animation: rv-focus-event var(--rv-cycle) ease-in-out infinite both; }
.rv-calendar.is-animating .rv-focus--chart { animation: rv-focus-chart var(--rv-cycle) ease-in-out infinite both; }
.rv-calendar.is-animating .rv-focus--model-top { animation: rv-focus-model-top var(--rv-cycle) ease-in-out infinite both; }
.rv-calendar.is-animating .rv-focus--model-result { animation: rv-focus-model-result var(--rv-cycle) ease-in-out infinite both; }
.rv-calendar.is-animating .rv-click--calendar { animation: rv-click-calendar var(--rv-cycle) ease-out infinite both; }
.rv-calendar.is-animating .rv-click--model { animation: rv-click-model var(--rv-cycle) ease-out infinite both; }
.rv-calendar.is-animating .rv-pulse--date-one { animation: rv-pulse-date-one var(--rv-cycle) ease-out infinite both; }
.rv-calendar.is-animating .rv-pulse--date-two { animation: rv-pulse-date-two var(--rv-cycle) ease-out infinite both; }
.rv-calendar.is-animating .rv-pulse--event { animation: rv-pulse-event var(--rv-cycle) ease-out infinite both; }
.rv-calendar.is-animating .rv-pulse--target-one { animation: rv-pulse-target-one var(--rv-cycle) ease-out infinite both; }
.rv-calendar.is-animating .rv-pulse--target-two { animation: rv-pulse-target-two var(--rv-cycle) ease-out infinite both; }
.rv-calendar.is-animating .rv-pulse--model { animation: rv-pulse-model var(--rv-cycle) ease-out infinite both; }
.rv-calendar.is-animating .rv-trace__pattern { animation: rv-pattern var(--rv-cycle) ease-in-out infinite both; }
.rv-calendar.is-animating .rv-trace__forecast { animation: rv-forecast var(--rv-cycle) ease-in-out infinite both; }
.rv-calendar.is-animating .rv-trace__flow--left { animation: rv-flow-left var(--rv-cycle) ease-in-out infinite both; }
.rv-calendar.is-animating .rv-trace__flow--right { animation: rv-flow-right var(--rv-cycle) ease-in-out infinite both; }
.rv-calendar.is-animating .rv-trace__node--one { animation: rv-node-one var(--rv-cycle) ease-out infinite both; }
.rv-calendar.is-animating .rv-trace__node--two { animation: rv-node-two var(--rv-cycle) ease-out infinite both; }
.rv-calendar.is-animating .rv-trace__node--three { animation: rv-node-three var(--rv-cycle) ease-out infinite both; }
.rv-calendar.is-animating .rv-chart-scan { animation: rv-chart-scan var(--rv-cycle) ease-in-out infinite both; }
.rv-calendar.is-animating .rv-model-halo { animation: rv-model-halo var(--rv-cycle) ease-in-out infinite both; }
.rv-calendar.is-animating .rv-model-halo > b { animation: rv-halo-spin 1.35s linear infinite; }
.rv-calendar.is-animating .rv-sweep { animation: rv-sweep var(--rv-cycle) ease-in-out infinite both; }
.rv-calendar.is-animating .rv-loop-mask { animation: rv-loop-mask var(--rv-cycle) ease-in-out infinite both; }
.rv-calendar.is-animating .rv-orbit--one { animation: rv-orbit-one 25s linear infinite; }
.rv-calendar.is-animating .rv-orbit--two { animation: rv-orbit-two 31s linear infinite reverse; }
.rv-calendar.is-animating .rv-star { animation: rv-star 3.5s ease-in-out infinite alternate; }

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

@keyframes rv-camera {
  0%, 5% { transform: translate3d(0,0,0) scale(1.015); filter: brightness(1); }
  10%, 29% { transform: translate3d(10.1%, .2%, 0) scale(1.16); filter: brightness(1.015); }
  33% { transform: translate3d(0,0,0) scale(1.04); }
  38%, 67% { transform: translate3d(-1.4%, .2%, 0) scale(1.18); filter: brightness(1.02); }
  71% { transform: translate3d(0,0,0) scale(1.04); }
  76%, 94% { transform: translate3d(-10.7%, .15%, 0) scale(1.18); filter: brightness(1.018); }
  98%, 100% { transform: translate3d(0,0,0) scale(1.015); filter: brightness(1); }
}
@keyframes rv-focus-calendar { 0%,4%,19%,100% { opacity:0; transform:scale(.97); } 8%,17% { opacity:1; transform:scale(1); } }
@keyframes rv-focus-event { 0%,16%,31%,100% { opacity:0; transform:scale(.97); } 20%,28% { opacity:1; transform:scale(1); } }
@keyframes rv-focus-chart { 0%,32%,70%,100% { opacity:0; transform:scale(.97); } 37%,66% { opacity:.98; transform:scale(1); } }
@keyframes rv-focus-model-top { 0%,70%,84%,100% { opacity:0; transform:scale(.97); } 75%,82% { opacity:1; transform:scale(1); } }
@keyframes rv-focus-model-result { 0%,80%,97%,100% { opacity:0; transform:scale(.97); } 84%,94% { opacity:1; transform:scale(1); } }

@keyframes rv-click-calendar { 0%,7%,16%,100% { opacity:0; transform:translate(-50%,-50%) scale(.7); } 9% { opacity:1; transform:translate(-50%,-50%) scale(1); } 12% { opacity:.9; transform:translate(-50%,-50%) scale(1.08); } 15.5% { opacity:0; transform:translate(-50%,-50%) scale(1.9); } }
@keyframes rv-click-model { 0%,71%,80%,100% { opacity:0; transform:translate(-50%,-50%) scale(.7); } 73% { opacity:1; transform:translate(-50%,-50%) scale(1); } 76% { opacity:.9; transform:translate(-50%,-50%) scale(1.08); } 79.5% { opacity:0; transform:translate(-50%,-50%) scale(1.9); } }

@keyframes rv-pulse-date-one { 0%,11%,17%,100% { opacity:0; transform:translate(-50%,-50%) scale(.65); box-shadow:0 0 0 0 rgba(var(--rv-cyan),.28); } 12.5% { opacity:1; transform:translate(-50%,-50%) scale(1); } 16.5% { opacity:0; transform:translate(-50%,-50%) scale(1.9); box-shadow:0 0 0 14px rgba(var(--rv-cyan),0); } }
@keyframes rv-pulse-date-two { 0%,14%,20%,100% { opacity:0; transform:translate(-50%,-50%) scale(.65); box-shadow:0 0 0 0 rgba(var(--rv-cyan),.28); } 15.5% { opacity:1; transform:translate(-50%,-50%) scale(1); } 19.5% { opacity:0; transform:translate(-50%,-50%) scale(1.9); box-shadow:0 0 0 14px rgba(var(--rv-cyan),0); } }
@keyframes rv-pulse-event { 0%,21%,29%,100% { opacity:0; transform:translate(-50%,-50%) scale(.65); box-shadow:0 0 0 0 rgba(var(--rv-gold),.28); } 23% { opacity:1; transform:translate(-50%,-50%) scale(1); } 28.5% { opacity:0; transform:translate(-50%,-50%) scale(1.95); box-shadow:0 0 0 16px rgba(var(--rv-gold),0); } }
@keyframes rv-pulse-target-one { 0%,49%,56%,100% { opacity:0; transform:translate(-50%,-50%) scale(.65); box-shadow:0 0 0 0 rgba(var(--rv-cyan),.28); } 51% { opacity:1; transform:translate(-50%,-50%) scale(1); } 55.5% { opacity:0; transform:translate(-50%,-50%) scale(1.9); box-shadow:0 0 0 14px rgba(var(--rv-cyan),0); } }
@keyframes rv-pulse-target-two { 0%,57%,64%,100% { opacity:0; transform:translate(-50%,-50%) scale(.65); box-shadow:0 0 0 0 rgba(var(--rv-cyan),.28); } 59% { opacity:1; transform:translate(-50%,-50%) scale(1); } 63.5% { opacity:0; transform:translate(-50%,-50%) scale(1.9); box-shadow:0 0 0 14px rgba(var(--rv-cyan),0); } }
@keyframes rv-pulse-model { 0%,84%,90%,95%,100% { opacity:0; transform:translate(-50%,-50%) scale(.65); box-shadow:0 0 0 0 rgba(var(--rv-gold),.28); } 86%,92% { opacity:1; transform:translate(-50%,-50%) scale(1); } 89.5%,94.5% { opacity:0; transform:translate(-50%,-50%) scale(1.95); box-shadow:0 0 0 16px rgba(var(--rv-gold),0); } }

@keyframes rv-pattern { 0%,37% { opacity:0; stroke-dashoffset:760; } 41% { opacity:1; } 53%,66% { opacity:.96; stroke-dashoffset:0; } 70%,100% { opacity:0; stroke-dashoffset:0; } }
@keyframes rv-forecast { 0%,46% { opacity:0; stroke-dashoffset:760; } 50% { opacity:.96; } 64%,67% { opacity:.96; stroke-dashoffset:0; } 71%,100% { opacity:0; stroke-dashoffset:0; } }
@keyframes rv-flow-left { 0%,25% { opacity:0; stroke-dashoffset:620; } 28% { opacity:.88; } 35% { opacity:.88; stroke-dashoffset:0; } 40%,100% { opacity:0; stroke-dashoffset:0; } }
@keyframes rv-flow-right { 0%,64% { opacity:0; stroke-dashoffset:620; } 68% { opacity:.9; } 77% { opacity:.9; stroke-dashoffset:0; } 82%,100% { opacity:0; stroke-dashoffset:0; } }
@keyframes rv-node-one { 0%,51%,57%,100% { opacity:0; transform:scale(.45); } 53% { opacity:1; transform:scale(1.4); } 56.5% { opacity:0; transform:scale(2.2); } }
@keyframes rv-node-two { 0%,56%,62%,100% { opacity:0; transform:scale(.45); } 58% { opacity:1; transform:scale(1.4); } 61.5% { opacity:0; transform:scale(2.2); } }
@keyframes rv-node-three { 0%,61%,67%,100% { opacity:0; transform:scale(.45); } 63% { opacity:1; transform:scale(1.4); } 66.5% { opacity:0; transform:scale(2.2); } }
@keyframes rv-chart-scan { 0%,35% { opacity:0; transform:translateX(0) skewX(-7deg); } 39% { opacity:.7; } 66% { opacity:0; transform:translateX(1500%) skewX(-7deg); } 100% { opacity:0; } }
@keyframes rv-model-halo { 0%,71%,84%,100% { opacity:0; transform:scale(.9); } 75% { opacity:.92; transform:scale(1); } 80% { opacity:1; transform:scale(1.045); } 83% { opacity:.45; transform:scale(1.08); } }
@keyframes rv-halo-spin { to { transform:rotate(360deg); } }
@keyframes rv-sweep { 0%,4% { opacity:0; transform:translateX(0) skewX(-12deg); } 7% { opacity:.38; } 29% { opacity:0; transform:translateX(950%) skewX(-12deg); } 32%,68% { opacity:0; transform:translateX(0) skewX(-12deg); } 71% { opacity:.3; } 95% { opacity:0; transform:translateX(950%) skewX(-12deg); } 100% { opacity:0; } }
@keyframes rv-loop-mask { 0% { opacity:.33; } 4%,94% { opacity:0; } 100% { opacity:.33; } }
@keyframes rv-orbit-one { from { transform:rotate(10deg); } to { transform:rotate(370deg); } }
@keyframes rv-orbit-two { from { transform:rotate(0); } to { transform:rotate(360deg); } }
@keyframes rv-star { from { opacity:.35; transform:translateY(0) scale(.9); } to { opacity:.95; transform:translateY(-6px) scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .rv-calendar *, .rv-calendar *::before, .rv-calendar *::after { animation: none !important; }
  .rv-camera { transform: none !important; }
}