.wstudio-cinematic {
  position: fixed;
  inset: 0;
  z-index: 10090;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #050508;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  --wsc-duration: 3s;
}

.wstudio-cinematic.active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  animation: wsc-scene-exit var(--wsc-duration) linear forwards;
}

.wsc-lockup {
  position: relative;
  z-index: 5;
  width: min(90vw, 1000px);
  text-align: center;
  transform: translateY(-2vh);
}

.wsc-mark {
  color: #fff;
  font: 950 clamp(82px, 12vw, 170px)/.86 Poppins, Inter, sans-serif;
  letter-spacing: -.08em;
  opacity: 0;
  transform: perspective(600px) rotateX(28deg) scale(.5);
  filter: blur(12px);
  text-shadow: 2px 3px 0 #777, 4px 6px 0 #29292d, 0 0 28px var(--wsc-accent, #d9e5ff);
  animation: wsc-mark-form .82s .3s cubic-bezier(.18,.86,.2,1) forwards;
}

.wsc-kicker {
  margin-top: 20px;
  color: var(--wsc-accent, #d9e5ff);
  font: 900 11px/1 Inter, sans-serif;
  letter-spacing: .4em;
  opacity: 0;
  animation: wsc-copy-in .5s .76s ease forwards;
}

.wsc-lockup h2 {
  max-width: 950px;
  margin: 14px auto 8px;
  color: #fff;
  font: 850 clamp(25px, 3.8vw, 54px)/1.12 Poppins, Inter, sans-serif;
  letter-spacing: .035em;
  opacity: 0;
  text-shadow: 0 2px 0 #555, 0 7px 22px rgba(0,0,0,.75);
  animation: wsc-copy-in .55s .92s ease forwards;
}

.wsc-lockup p {
  margin: 0;
  color: #d3d7df;
  font: 500 clamp(12px,1.45vw,18px)/1.5 Inter, sans-serif;
  opacity: 0;
  animation: wsc-copy-in .5s 1.13s ease forwards;
}

.wsc-line {
  width: 210px;
  height: 1px;
  margin: 21px auto 13px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  transform: scaleX(0);
  animation: wsc-line-in .5s 1.3s ease forwards;
}

.wsc-lockup > span {
  color: #969daa;
  font: 500 10px/1.4 Inter, sans-serif;
  letter-spacing: .12em;
  opacity: 0;
  animation: wsc-copy-in .45s 1.43s ease forwards;
}

.wsc-aura {
  position: absolute;
  width: 44vmin;
  height: 44vmin;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.9), var(--wsc-accent,#d9e5ff) 8%, transparent 66%);
  filter: blur(20px);
  opacity: 0;
  animation: wsc-aura-expand 1.8s .08s ease-out forwards;
}

.wsc-orbit {
  position: absolute;
  width: 72vmin;
  height: 72vmin;
  border: 1px solid color-mix(in srgb, var(--wsc-accent,#d9e5ff) 42%, transparent);
  border-radius: 50%;
  opacity: 0;
  animation: wsc-orbit-expand 2.15s .18s ease-out forwards;
}

.wsc-orbit-b { width: 52vmin; height: 52vmin; animation-delay: .32s; }

.wsc-smoke {
  position: absolute;
  width: 42vw;
  height: 14vw;
  min-width: 270px;
  min-height: 95px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,255,255,.44), rgba(180,190,215,.12) 43%, transparent 73%);
  filter: blur(28px);
  opacity: 0;
  mix-blend-mode: screen;
  animation: wsc-smoke-center 1.75s .05s ease-out forwards;
}

.wsc-smoke-b { transform: rotate(62deg); animation-delay: .16s; }
.wsc-smoke-c { transform: rotate(-62deg); animation-delay: .12s; }

.wsc-flash {
  position: absolute;
  z-index: 4;
  inset: -20%;
  opacity: 0;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255,255,255,.08) 44%, #fff 50%, rgba(255,255,255,.12) 56%, transparent 63%);
  filter: blur(8px);
  transform: translateX(-85%);
  animation:
    wsc-entry-sweep .9s .12s cubic-bezier(.18,.72,.2,1) forwards,
    wsc-exit-flash .38s calc(var(--wsc-duration) - .5s) ease-out forwards;
}

.wsc-lockup::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5% -20%;
  background: linear-gradient(105deg, transparent 31%, rgba(255,255,255,.04) 41%, rgba(255,255,255,.72) 50%, rgba(255,255,255,.04) 59%, transparent 69%);
  filter: blur(9px);
  transform: translateX(-120%);
  animation: wsc-logo-light 1.05s .55s ease-in-out forwards;
}

@keyframes wsc-scene-exit {
  0%, 84% { opacity: 1; visibility: visible; }
  92% { opacity: 1; background: #09090b; }
  100% { opacity: 0; visibility: hidden; }
}

@keyframes wsc-entry-sweep {
  0% { opacity: 0; transform: translateX(-85%); }
  25% { opacity: .9; }
  54% { opacity: .22; }
  100% { opacity: 0; transform: translateX(85%); }
}

@keyframes wsc-exit-flash {
  0% { opacity: 0; transform: translateX(-35%) scale(.8); }
  42% { opacity: .92; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(35%) scale(1.2); }
}

@keyframes wsc-logo-light { to { transform: translateX(120%); } }
@keyframes wsc-mark-form { to { opacity: 1; transform: perspective(600px) rotateX(0) scale(1); filter: blur(0); } }
@keyframes wsc-copy-in { from { opacity: 0; transform: translateY(14px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes wsc-line-in { to { transform: scaleX(1); } }
@keyframes wsc-aura-expand { 0% { opacity: 0; transform: scale(.18); } 32% { opacity: .86; } 100% { opacity: .08; transform: scale(2.15); } }
@keyframes wsc-orbit-expand { 0% { opacity: 0; transform: scale(.25) rotate(0); } 35% { opacity: .72; } 100% { opacity: 0; transform: scale(1.3) rotate(230deg); } }
@keyframes wsc-smoke-center { 0% { opacity: 0; transform: translateX(-32vw) scale(.5); } 35% { opacity: .48; } 100% { opacity: 0; transform: translateX(3vw) scale(1.7); } }

/* Os elementos existem no DOM desde o carregamento da página. Enquanto o
   overlay está oculto, pausamos tudo para o flash não terminar antes de a
   classe `active` ser aplicada. */
.wstudio-cinematic:not(.active) .wsc-mark,
.wstudio-cinematic:not(.active) .wsc-kicker,
.wstudio-cinematic:not(.active) .wsc-lockup h2,
.wstudio-cinematic:not(.active) .wsc-lockup p,
.wstudio-cinematic:not(.active) .wsc-line,
.wstudio-cinematic:not(.active) .wsc-lockup > span,
.wstudio-cinematic:not(.active) .wsc-aura,
.wstudio-cinematic:not(.active) .wsc-orbit,
.wstudio-cinematic:not(.active) .wsc-smoke,
.wstudio-cinematic:not(.active) .wsc-flash,
.wstudio-cinematic:not(.active) .wsc-lockup::before {
  animation-play-state: paused !important;
}

.wstudio-cinematic.active .wsc-mark,
.wstudio-cinematic.active .wsc-kicker,
.wstudio-cinematic.active .wsc-lockup h2,
.wstudio-cinematic.active .wsc-lockup p,
.wstudio-cinematic.active .wsc-line,
.wstudio-cinematic.active .wsc-lockup > span,
.wstudio-cinematic.active .wsc-aura,
.wstudio-cinematic.active .wsc-orbit,
.wstudio-cinematic.active .wsc-smoke,
.wstudio-cinematic.active .wsc-flash,
.wstudio-cinematic.active .wsc-lockup::before {
  animation-play-state: running !important;
}