/* OurBeam — visual effects */

/* the page is covered until the curtain is ready (see the small script in every page head) */
html.cover-on::before { content: ""; position: fixed; inset: 0; z-index: 300; background: #05140d; animation: cover-fail 0s 3.2s forwards; }
@keyframes cover-fail { to { opacity: 0; visibility: hidden; } }

/* velvet curtain */
.cv { position: fixed; inset: 0; z-index: 300; overflow: hidden; pointer-events: none; }
.cv.block { pointer-events: auto; }
.cv i { position: absolute; top: 0; bottom: 0; display: block; width: 50.6%; transition: transform var(--cv-t, .5s) cubic-bezier(.77, 0, .18, 1);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .4), transparent 22%, transparent 76%, rgba(0, 0, 0, .5)),
    repeating-linear-gradient(90deg, #0a3a26 0 38px, #0f5336 38px 64px, #08301f 64px 104px); }
.cv .l { left: 0; transform: translateX(-102%); box-shadow: inset -4px 0 0 rgba(255, 210, 74, .55), 12px 0 44px rgba(0, 0, 0, .55); }
.cv .r { right: 0; transform: translateX(102%); box-shadow: inset 4px 0 0 rgba(255, 210, 74, .55), -12px 0 44px rgba(0, 0, 0, .55); }
.cv.closed .l, .cv.closed .r { transform: none; }
.cv.snap i { transition: none; }

/* film grain */
.fx-grain { position: fixed; left: -50%; top: -50%; width: 200%; height: 200%; z-index: 40; pointer-events: none; opacity: .07; animation: grain 1.1s steps(1) infinite;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes grain {
  0% { transform: translate(0, 0); } 12% { transform: translate(-4%, 3%); } 25% { transform: translate(3%, -6%); } 37% { transform: translate(-6%, -2%); }
  50% { transform: translate(5%, 5%); } 62% { transform: translate(-2%, 6%); } 75% { transform: translate(6%, -3%); } 87% { transform: translate(-5%, 2%); }
}

/* characters: eyes follow the cursor, a click makes them hop */
.char .pup { transform: translate(calc(var(--lx, 0) * 1px), calc(var(--ly, 0) * 1px)); transition: transform .14s ease-out; }
svg.char.hop { transform-origin: 50% 100%; animation: hop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hop { 0% { transform: none; } 25% { transform: translateY(-12%) scale(.94, 1.08); } 55% { transform: scale(1.08, .92); } 80% { transform: translateY(-3%) scale(.99, 1.02); } 100% { transform: none; } }
.fx-bubble { position: fixed; z-index: 260; pointer-events: none; font-size: 1.8rem; line-height: 1; transform: translate(-50%, 0); animation: bubble 1.2s ease-out forwards; }
@keyframes bubble { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.5); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -80px) scale(1); } }

/* 3D tilt with a soft glare */
.sync, .seats, .camdemo, .desktop, .dl-card { position: relative; }
[data-tilt] { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .55s var(--ease-out); }
[data-tilt].tilting { transition: transform .08s linear; will-change: transform; }
[data-tilt]::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none; opacity: var(--go, 0); transition: opacity .3s;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .11), transparent 45%); }

/* confetti */
.fx-confetti { position: fixed; inset: 0; z-index: 250; width: 100%; height: 100%; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .cv, .fx-grain, .fx-confetti, .fx-bubble, .fx-dim { display: none !important; }
  [data-tilt] { transform: none !important; }
  [data-tilt]::after { display: none; }
}

/* lights dim around the app window while it is on screen */
.fx-dim { position: fixed; z-index: 45; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; box-shadow: 0 0 0 200vmax rgba(1, 5, 3, .9); will-change: opacity; }