/* Filme de interface. O quadro estático é também o primeiro quadro do loop. */
.web-demo {
  --room: #151e30;
  --room-edge: #101723;
  --room-light: #344967;
  position: relative;
  width: 100%;
  aspect-ratio: 1.62;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  background: radial-gradient(ellipse at 55% 20%, var(--room-light), var(--room) 69%, var(--room-edge));
}
[data-theme=light] .web-demo {
  --room: #d5dce6;
  --room-edge: #c3cedc;
  --room-light: #f1f5f9;
}
.web-demo::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image: radial-gradient(#a7b7cf .55px, transparent .8px);
  background-size: 12px 12px;
  mask-image: linear-gradient(115deg, transparent, #000 40%, #000 65%, transparent);
}
.forma-room {
  position: absolute;
  inset: 0;
  perspective: 100cqw;
  perspective-origin: 52% 45%;
  pointer-events: none;
  user-select: none;
}
.forma-platform-shadow {
  position: absolute;
  right: 10%;
  bottom: 7%;
  width: 61%;
  height: 9%;
  opacity: .6;
  border-radius: 50%;
  background: #080f20;
  filter: blur(2cqw);
  transform: rotate(-6deg);
}
.forma-browser, .forma-handset {
  position: absolute;
  color: #1e2932;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.forma-browser {
  width: 77%;
  left: 6%;
  top: 11%;
  border: max(1px, .18cqw) solid #aab6c5;
  border-radius: 1.35cqw;
  overflow: hidden;
  background: #eeeee9;
  box-shadow: -.6cqw .8cqw 0 -.3cqw #4b5563, -1.8cqw 2.6cqw 3cqw #070c1580;
  transform: rotateY(12deg) rotateX(3deg) rotateZ(-3deg);
  animation: forma-browser-shot 12s ease-in-out infinite;
}
.forma-chrome {
  height: 3.2cqw;
  display: flex;
  align-items: center;
  gap: .45cqw;
  padding-inline: 1.6cqw;
  position: relative;
  background: linear-gradient(#dce1e6,#cad0d7);
  border-bottom: 1px solid #bcc3ca;
}
.forma-chrome b {
  width: .62cqw;
  height: .62cqw;
  background: #8894a1;
  border-radius: 100%;
}
.forma-chrome i {
  position: absolute;
  width: 33%;
  height: 1.2cqw;
  border-radius: .4cqw;
  background: #e9ecef;
  left: 33%;
}
.forma-page {
  background: #f4f3ee;
  font-family: Manrope, Arial, sans-serif;
  line-height: 1.2;
}
.forma-header, .forma-credit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
}
.forma-desktop .forma-header {
  margin-inline: 3.1cqw;
  height: 5.2cqw;
  border-bottom: 1px solid #cbd0ce;
}
.forma-header>span:last-child:not(.forma-brand) { color: #515d68; font-size: 1.1cqw; font-weight: 650; }
.forma-brand {
  display: inline-flex;
  align-items: center;
  font-size: 2.6cqw;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.09em;
}
.forma-brand svg { width: 2.2cqw; height: 2.2cqw; margin-right: .45cqw; }
.forma-brand>span { color: #3f67a8; }
.forma-title>span {
  display: block;
  font-size: 1.1cqw;
  color: #566571;
  letter-spacing: .055em;
}
.forma-title>strong {
  display: block;
  margin-top: .45cqw;
  font: 500 4.1cqw/1.05 Georgia, "Times New Roman", serif;
  letter-spacing: -.058em;
}
.forma-desktop .forma-title { padding: 1.75cqw 3.1cqw 1.95cqw; }
.forma-photo { position: relative; overflow: hidden; background: #bdcbd9; }
.forma-desktop .forma-photo { margin-inline: 3.1cqw; height: 24.7cqw; }
.forma-pavilion { display: block; width: 100%; height: 100%; }
.forma-architecture {
  transform-origin: center;
  animation: forma-camera-shot 12s ease-in-out infinite;
}
.forma-credit { color: #3e4b58; }
.forma-desktop .forma-credit { margin-inline: 3.1cqw; height: 3.75cqw; font-size: 1.2cqw; }
.forma-handset {
  width: 23%;
  right: 6%;
  bottom: 6%;
  aspect-ratio: .52;
  padding: .7cqw;
  border: .2cqw solid #9ca8b5;
  border-radius: 3.2cqw;
  background: linear-gradient(125deg,#a3adb8,#394451 17%,#0c1219 53%,#5a6878 90%,#b4bdc5);
  box-shadow: -.35cqw .6cqw 0 #263342, -1.1cqw 1.8cqw 2.7cqw #0b122377;
  transform: rotateY(-9deg) rotateX(3deg) rotateZ(5deg);
  animation: forma-phone-shot 12s ease-in-out infinite;
}
.forma-mobile-glass {
  position: relative;
  border-radius: 2.45cqw;
  border: .3cqw solid #121922;
  background: #f4f3ee;
  overflow: hidden;
  height: 100%;
}
.forma-notch {
  position: absolute;
  top: .55cqw;
  left: 36%;
  right: 36%;
  height: .8cqw;
  border-radius: 1cqw;
  background: #121821;
  z-index: 1;
}
.forma-mobile { display: flex; flex-direction: column; height: 100%; padding-top: 1.85cqw; }
.forma-mobile .forma-header { height: 3.8cqw; margin-inline: 1.4cqw; border-bottom: 1px solid #cbd0ce; }
.forma-mobile .forma-brand { font-size: 2.05cqw; }
.forma-mobile .forma-brand svg { width: 1.6cqw; height: 1.6cqw; }
.forma-menu { width: 1.6cqw; height: .85cqw; border-block: .17cqw solid #46525e; }
.forma-mobile .forma-title { padding: 1.9cqw 1.4cqw 1.3cqw; }
.forma-mobile .forma-title>span { font-size: .95cqw; }
.forma-mobile .forma-title>strong { font-size: 2.8cqw; }
.forma-mobile .forma-photo { min-height: 0; flex: 1; margin-inline: 1.25cqw; }
.forma-mobile .forma-credit { padding: 1.15cqw 1.3cqw 1.7cqw; font-size: .95cqw; }
.web-film:not([data-demo-state="playing"]) .web-demo *,
.web-film:not([data-demo-state="playing"]) .web-demo *::before {
  animation-play-state: paused;
}
@keyframes forma-browser-shot {
  0%,100% { transform: translate3d(0,0,0) rotateY(12deg) rotateX(3deg) rotateZ(-3deg); }
  48% { transform: translate3d(-.9cqw,-.45cqw,0) rotateY(3deg) rotateX(0) rotateZ(-.7deg); }
}
@keyframes forma-phone-shot {
  0%,100% { transform: translate3d(0,0,0) rotateY(-9deg) rotateX(3deg) rotateZ(5deg); }
  56% { transform: translate3d(-2.1cqw,-1cqw,2cqw) rotateY(-2deg) rotateX(1deg) rotateZ(1deg); }
}
@keyframes forma-camera-shot {
  0%,100% { transform: translate(0,0) scale(1); }
  52% { transform: translate(-1.1%,.9%) scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
  .web-demo *, .web-demo *::before { animation: none !important; }
}