/* Glass frames with a moving violet rim; the original captures stay intact. */
@property --screen-rim-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 128deg;
}
.screen-stage {
  --screen-float-distance: -8px;
  --screen-effect-delay: 0s;
  position: relative;
  isolation: isolate;
  perspective: 1800px;
}
.screen-stage::before {
  inset: -12px;
  width: auto;
  height: auto;
  border-radius: 26px;
  background: radial-gradient(ellipse at var(--screen-light-x, 50%) var(--screen-light-y, 35%), #9C70FF70, #602AF91C 44%, transparent 72%);
  filter: blur(25px);
  opacity: .58;
  z-index: -1;
  transition: opacity .65s ease;
}
.screen-stage::after {
  content: '';
  position: absolute;
  inset: auto 8% -18px;
  height: 32px;
  border-radius: 50%;
  background: #160C3436;
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}
.screen-float {
  animation: product-screen-float 8.5s ease-in-out infinite;
  animation-delay: var(--screen-effect-delay);
  animation-play-state: paused;
}
.screen-frame,
.integrations-section .screen-frame {
  padding: 7px;
  border: 2px solid transparent;
  border-radius: 19px;
  background:
    linear-gradient(145deg, #363344, #141421 48%, #30263D) padding-box,
    conic-gradient(from var(--screen-rim-angle), #5B4E73 0%, #87719F 12%, #ECE6FF 17%, #AA7FFF 22%, #5B3A86 34%, #332C48 47%, #D2B5FF 64%, #FBF7FF 68%, #8953E2 74%, #5B4E73 100%) border-box;
  box-shadow: 0 30px 65px -30px #21113966, 0 9px 22px -14px #4D2D8C88, inset 0 0 0 1px #FFFFFF12;
  animation: product-screen-rim 10s linear infinite;
  animation-delay: var(--screen-effect-delay);
  animation-play-state: paused;
}
.screen-frame[data-screen-depth] {
  transform: perspective(1800px) rotateX(calc(var(--screen-rotate, 0deg) + var(--screen-tilt-x, 0deg))) rotateY(var(--screen-tilt-y, 0deg)) scale(var(--screen-scale, 1));
  transition: transform .7s cubic-bezier(.2, .7, .25, 1);
  will-change: auto;
}
.screen-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 2px;
  border-radius: inherit;
  background: radial-gradient(350px circle at var(--screen-light-x, 50%) var(--screen-light-y, 35%), #FFFFFF, transparent 75%);
  -webkit-mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .55s ease;
  pointer-events: none;
}
.screen-stage.is-screen-visible .screen-float,
.screen-stage.is-screen-visible .screen-frame { animation-play-state: running; }
.screen-stage.is-screen-visible .screen-frame[data-screen-depth] { will-change: transform; }
.screen-stage.is-screen-hovered::before { opacity: .92; }
.screen-stage.is-screen-hovered .screen-frame::after { opacity: .8; }
.screen-stage.is-screen-hovered .screen-float,
.screen-stage:focus-within .screen-float { animation-play-state: paused; }
.screen-stage:focus-within .screen-frame[data-screen-depth] { transform: none; }
.screen-bar {
  position: relative;
  height: 43px;
  padding-inline: 17px;
  background: linear-gradient(180deg, #292534, #211E2C);
  color: #D2CCDF;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid #50465F;
  box-shadow: inset 0 1px 0 #FFFFFF16;
}
.screen-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #D7C3FF80, transparent);
}
.screen-bar b { color: #7C718F; }
.screen-dots i { background: #736581; box-shadow: 0 0 0 1px #FFFFFF08; }
.screen-dots i:first-child { background: #B99BFF; box-shadow: 0 0 9px #AA7AFF48; }
.screen-dots i:nth-child(2) { background: #9580B4; }
.screen-bar .real-label { color: #BCAECF; }
.screen-link { overflow: hidden; border-radius: 0 0 10px 10px; }
.screen-link img { background: #F1EDFF; }
.screen-expand { background: #171322EC; backdrop-filter: blur(12px); border-color: #CEB3FF55; box-shadow: 0 5px 20px #130A2C3D; }
.screen-stage--experience { --screen-effect-delay: -2.8s; }
.screen-stage--experience::before { opacity: .8; }
.screen-stage--experience::after { background: #040711AA; }
.screen-stage--experience .screen-frame { box-shadow: 0 30px 65px -22px #040612A6, 0 0 45px -22px #8D4FFF80; }
.experience-section { overflow: clip; }
.experience-footer { margin-top: 35px; }
.screen-stage--catalog { --screen-effect-delay: -5.3s; margin: 10px 0 32px; }
.integration-catalog .screen-frame { margin-bottom: 0; }
html.capture-is-open .screen-stage .screen-float,
html.capture-is-open .screen-stage .screen-frame,
html.page-is-hidden .screen-stage .screen-float,
html.page-is-hidden .screen-stage .screen-frame { animation-play-state: paused; }
html[data-motion=off] .screen-float { transform: none !important; }
html[data-motion=off] .screen-frame::after { opacity: 0; }
@keyframes product-screen-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, var(--screen-float-distance), 0); }
}
@keyframes product-screen-rim {
  from { --screen-rim-angle: 128deg; }
  to { --screen-rim-angle: 488deg; }
}
@media (max-width: 700px) {
  .screen-stage { --screen-float-distance: -4px; }
  .screen-frame,
  .integrations-section .screen-frame { padding: 4px; border-width: 1px; border-radius: 12px; }
  .screen-frame::after { padding: 1px; }
  .screen-bar { height: 33px; padding-inline: 10px; border-radius: 7px 7px 0 0; gap: 9px; }
  .screen-bar .real-label { font-size: 7px; letter-spacing: .3px; }
  .screen-link { border-radius: 0 0 7px 7px; }
  .screen-expand { font-size: 10px; right: 8px; bottom: 8px; gap: 12px; padding: 7px 10px; }
  .screen-stage::before { inset: -6px; filter: blur(16px); }
  .screen-stage::after { bottom: -11px; height: 20px; filter: blur(15px); }
  .screen-stage--catalog { margin-bottom: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  .screen-float, .screen-frame[data-screen-depth] { transform: none !important; }
  .screen-frame::after { opacity: 0; }
}