:root {
  --banner-width: 728px;
  --banner-height: 90px;
  --docid-green: #00c2b2;
  --docid-cyan: #00ccf0;
  --docid-blue: #00a0eb;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: var(--banner-width);
  height: var(--banner-height);
  margin: 0;
  overflow: hidden;
  background-color: #000;
  background-image: linear-gradient(var(--docid-green), var(--docid-cyan), var(--docid-blue));
  background-attachment: fixed;
  font-family: Arial, Helvetica, sans-serif;
}

.banner {
  --pad: 18px;
  --logo-width: 132px;
  --logo-left: var(--pad);
  --logo-right: auto;
  --logo-top: var(--pad);
  --logo-intro-offset-x: calc(var(--banner-width) - var(--pad) - var(--pad) - var(--logo-width));
  --scene-left: var(--pad);
  --scene-right: var(--pad);
  --scene-top: 70px;
  --scene-bottom: var(--pad);
  --login-visual-left: 0px;
  --login-visual-top: 50px;
  --login-visual-width: 275px;
  --login-visual-entry-x: 18px;
  --login-visual-exit-x: calc(0px - var(--login-visual-left) - var(--login-visual-width) - 28px);
  --headline-size: 22px;
  --headline-leading: 1.1;
  --powerhouse-icon-size: 45px;
  --powerhouse-title-size: var(--headline-size);
  --powerhouse-body-size: 16px;
  --final-size: var(--headline-size);
  --cta-font-size: 14px;
  --cta-height: 34px;
  --fingerprint-dock-shift: 10px;
  position: relative;
  width: var(--banner-width);
  height: var(--banner-height);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-radius: 0;
  color: #fff;
  background-color: var(--docid-green);
  background-image: linear-gradient(var(--docid-green), var(--docid-cyan), var(--docid-blue));
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  isolation: isolate;
}

.creative {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 0;
  pointer-events: none;
}

.click-layer {
  position: absolute;
  inset: 0;
  z-index: 40;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.fingerprint-background {
  position: absolute;
  z-index: 2;
  inset: 10px;
  display: block;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(var(--fingerprint-dock-shift), var(--fingerprint-dock-shift), 0);
  transition: opacity 180ms ease-out;
}

.banner.background-animation-loaded .fingerprint-background {
  opacity: 0.22;
}

.banner[data-width="360"][data-height="300"],
.banner[data-width="300"][data-height="600"] {
  --fingerprint-dock-shift: 12px;
}

.banner[data-width="336"][data-height="280"] {
  --fingerprint-dock-shift: 11px;
}

.banner[data-width="160"][data-height="600"] {
  --fingerprint-dock-shift: 6px;
}

.banner[data-width="120"][data-height="600"] {
  --fingerprint-dock-shift: 4px;
}

.banner[data-width="728"][data-height="90"],
.banner[data-width="320"][data-height="100"] {
  --fingerprint-dock-shift: 3px;
}

.banner[data-width="320"][data-height="50"],
.banner[data-width="300"][data-height="50"] {
  --fingerprint-dock-shift: 1px;
}

.banner[data-width="728"][data-height="90"] .fingerprint-background,
.banner[data-width="320"][data-height="100"] .fingerprint-background,
.banner[data-width="320"][data-height="50"] .fingerprint-background,
.banner[data-width="300"][data-height="50"] .fingerprint-background {
  transform-origin: right center;
}

.banner[data-width="728"][data-height="90"] .fingerprint-background {
  transform: translate3d(12px, 0, 0) scale(3);
}

.banner[data-width="320"][data-height="100"] .fingerprint-background {
  transform: translate3d(11px, 0, 0) scale(3);
}

.banner[data-width="320"][data-height="50"] .fingerprint-background,
.banner[data-width="300"][data-height="50"] .fingerprint-background {
  transform: translate3d(4px, 0, 0) scale(3);
}

.brand-logo-shell {
  position: absolute;
  z-index: 12;
  left: var(--logo-left);
  right: var(--logo-right);
  top: var(--logo-top);
  display: block;
  width: var(--logo-width);
  aspect-ratio: 842.176 / 167.379;
  overflow: hidden;
  filter: drop-shadow(0 2px 5px rgba(0, 72, 97, 0.16));
  transform: translate3d(var(--logo-intro-offset-x), 0, 0);
}

.brand-logo-static,
.brand-logo-animation,
.brand-logo-registered {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.brand-logo-static {
  object-fit: contain;
  opacity: 1;
  transition: opacity 120ms ease;
}

.brand-logo-animation {
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.brand-logo-registered {
  z-index: 2;
  object-fit: contain;
  clip-path: inset(0 0 80% 95%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.banner.logo-animation-loaded .brand-logo-static {
  opacity: 0;
}

.banner.logo-animation-loaded .brand-logo-animation {
  opacity: 1;
}

.banner.logo-animation-loaded .brand-logo-registered {
  opacity: 1;
}

.scene {
  position: absolute;
  z-index: 5;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(28px);
  pointer-events: none;
}

.scene-intro {
  z-index: 4;
  transform: none;
}

.login-visual {
  position: absolute;
  left: var(--login-visual-left);
  top: var(--login-visual-top);
  display: block;
  width: var(--login-visual-width);
  max-width: none;
  height: auto;
  opacity: 0.98;
  transform-origin: left top;
  filter: drop-shadow(0 10px 24px rgba(0, 81, 111, 0.2));
}

.scene-inner {
  position: absolute;
  left: var(--scene-left);
  right: var(--scene-right);
  top: var(--scene-top);
  bottom: var(--scene-bottom);
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.copy-set.lang-en,
.banner[data-language="en"] .copy-set.lang-de {
  display: none;
}

.banner[data-language="en"] .copy-set.lang-en {
  display: block;
}

.scene-headline.copy-728 {
  display: none !important;
}

.scene-headline,
.powerhouse-title,
.powerhouse-body,
.final-copy {
  margin: 0;
  text-shadow: 0 1px 4px rgba(0, 76, 111, 0.14);
}

.scene-headline {
  color: #fff;
  font-size: var(--headline-size);
  font-weight: 800;
  line-height: var(--headline-leading);
  letter-spacing: 0;
}

.copy-line {
  display: block;
  opacity: 0;
  transform: translateY(15px);
}

.powerhouse-inner {
  justify-content: center;
  gap: 12px;
}

.powerhouse-head {
  display: flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  gap: 12px;
}

.powerhouse-icon {
  display: block;
  width: var(--powerhouse-icon-size);
  height: var(--powerhouse-icon-size);
  flex: 0 0 auto;
  opacity: 0;
  transform: translateY(12px) scale(0.84);
  filter: drop-shadow(0 4px 10px rgba(0, 72, 97, 0.16));
}

.powerhouse-title-stack {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.powerhouse-copy {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.powerhouse-break-728 {
  display: none;
}

.powerhouse-title {
  color: #fff;
  font-size: var(--powerhouse-title-size);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(12px);
}

.powerhouse-body {
  max-width: 100%;
  margin-top: 0;
  color: #000;
  font-size: var(--powerhouse-body-size);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: 0;
  opacity: 0;
  transform: translateY(12px);
  text-shadow: none;
}

.final-inner {
  gap: 14px;
}

.final-copy {
  max-width: 100%;
  color: #fff;
  font-size: var(--final-size);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  opacity: 0;
  transform: translateY(14px);
}

.final-copy strong {
  display: inline;
  margin-top: 0;
  color: #000;
  font: inherit;
  overflow-wrap: anywhere;
  text-shadow: none;
}

.final-copy sup {
  margin-left: 1px;
  font-size: 0.58em;
  line-height: 0;
  vertical-align: super;
}

.banner[data-width="360"][data-height="300"][data-language="de"] .keep-360-de {
  white-space: nowrap;
}

.cta {
  display: inline-flex;
  min-width: 0;
  min-height: var(--cta-height);
  padding: 0 14px;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: #fff;
  background: #000;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
  font-size: var(--cta-font-size);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(12px) scale(0.94);
}

.cta-label-en,
.banner[data-language="en"] .cta-label-de {
  display: none;
}

.banner[data-language="en"] .cta-label-en {
  display: inline;
}

.cta-line {
  display: inline;
}

.cta-line + .cta-line::before {
  content: " ";
}

.banner.is-ready .scene-intro {
  animation: introScene 4.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.banner.is-ready .brand-logo-shell {
  animation: logoDockSequence 4s cubic-bezier(0.42, 0, 0.2, 1) both;
}

.banner.is-ready .login-visual {
  animation: loginVisualSequence 4.15s cubic-bezier(0.42, 0, 0.2, 1) both;
}

.banner.is-ready .scene-login {
  animation: headlineSceneInOut 5.35s cubic-bezier(0.22, 1, 0.36, 1) 4.2s both;
}

.banner.is-ready .scene-login .copy-line:nth-child(1) {
  animation: copyLineReveal 560ms cubic-bezier(0.22, 1, 0.36, 1) 4.57s both;
}

.banner.is-ready .scene-login .copy-line:nth-child(2) {
  animation: copyLineReveal 560ms cubic-bezier(0.22, 1, 0.36, 1) 4.77s both;
}

.banner.is-ready .scene-login .copy-line:nth-child(3) {
  animation: copyLineReveal 560ms cubic-bezier(0.22, 1, 0.36, 1) 4.97s both;
}

.banner.is-ready .scene-powerhouse {
  animation: sceneInOut 6.45s cubic-bezier(0.22, 1, 0.36, 1) 9.6s both;
}

.banner.is-ready .powerhouse-icon {
  animation: iconReveal 560ms cubic-bezier(0.22, 1, 0.36, 1) 10s both;
}

.banner.is-ready .powerhouse-title {
  animation: copyBlockReveal 560ms cubic-bezier(0.22, 1, 0.36, 1) 10.2s both;
}

.banner.is-ready .powerhouse-body {
  animation: copyBlockReveal 560ms cubic-bezier(0.22, 1, 0.36, 1) 10.45s both;
}

.banner.is-ready .scene-final {
  animation: sceneInStay 740ms cubic-bezier(0.22, 1, 0.36, 1) 16.1s both;
}

.banner.is-ready .final-copy {
  animation: copyBlockReveal 560ms cubic-bezier(0.22, 1, 0.36, 1) 16.5s both;
}

.banner.is-ready .cta {
  animation:
    ctaReveal 560ms cubic-bezier(0.22, 1, 0.36, 1) 17.05s both,
    ctaPulse 1.35s ease-in-out 17.75s infinite;
}

.banner:not(.is-ready) .creative * {
  animation-play-state: paused;
}

.banner.is-ready .creative * {
  animation-play-state: running;
}

.banner.animation-stopped .creative * {
  animation-play-state: paused !important;
}

.banner[data-width="300"][data-height="250"] {
  --pad: 18px;
  --logo-width: 132px;
  --scene-top: 69px;
  --scene-bottom: 18px;
  --login-visual-top: 46px;
  --login-visual-width: 266px;
  --headline-size: 22px;
  --powerhouse-icon-size: 45px;
  --powerhouse-body-size: 16px;
  --final-size: 18px;
  --cta-font-size: 14px;
  --cta-height: 34px;
}

.banner[data-width="336"][data-height="280"] {
  --pad: 20px;
  --logo-width: 148px;
  --scene-top: 80px;
  --scene-bottom: 20px;
  --login-visual-top: 52px;
  --login-visual-width: 301px;
  --headline-size: 24px;
  --powerhouse-icon-size: 48px;
  --powerhouse-body-size: 17px;
  --final-size: 20px;
  --cta-font-size: 15px;
  --cta-height: 36px;
}

.banner[data-width="360"][data-height="300"] {
  --pad: 22px;
  --logo-width: 158px;
  --scene-top: 86px;
  --scene-bottom: 22px;
  --login-visual-top: 56px;
  --login-visual-width: 324px;
  --headline-size: 26px;
  --powerhouse-icon-size: 52px;
  --powerhouse-body-size: 18px;
  --final-size: 22px;
  --cta-font-size: 16px;
  --cta-height: 38px;
}

.banner[data-width="360"][data-height="300"][data-language="en"] {
  --headline-size: 22.5px;
}

.banner[data-width="300"][data-height="600"] {
  --pad: 22px;
  --logo-width: 165px;
  --scene-top: 130px;
  --scene-bottom: 44px;
  --login-visual-top: 78px;
  --login-visual-width: 289px;
  --headline-size: 31px;
  --headline-leading: 1.14;
  --powerhouse-icon-size: 60px;
  --powerhouse-body-size: 21px;
  --final-size: 27px;
  --cta-font-size: 18px;
  --cta-height: 44px;
}

.banner[data-width="160"][data-height="600"] {
  --pad: 13px;
  --logo-width: 132px;
  --scene-top: 104px;
  --scene-bottom: 44px;
  --login-visual-top: 66px;
  --login-visual-width: 149px;
  --headline-size: 22px;
  --headline-leading: 1.16;
  --powerhouse-icon-size: 46px;
  --powerhouse-body-size: 16px;
  --final-size: 19px;
  --cta-font-size: 13px;
  --cta-height: 32px;
}

.banner[data-width="120"][data-height="600"] {
  --pad: 10px;
  --logo-width: 98px;
  --scene-top: 82px;
  --scene-bottom: 44px;
  --login-visual-top: 58px;
  --login-visual-width: 109px;
  --headline-size: 18px;
  --headline-leading: 1.2;
  --powerhouse-icon-size: 40px;
  --powerhouse-body-size: 14px;
  --final-size: 16px;
  --cta-font-size: 11px;
  --cta-height: 29px;
}

.banner[data-width="728"][data-height="90"] {
  --pad: 12px;
  --logo-width: 158.4px;
  --logo-top: 29.25px;
  --scene-left: 177px;
  --scene-right: 14px;
  --scene-top: 9px;
  --scene-bottom: 9px;
  --login-visual-left: 0px;
  --login-visual-top: 10px;
  --login-visual-width: 100px;
  --headline-size: 22px;
  --headline-leading: 1.06;
  --powerhouse-icon-size: 34px;
  --powerhouse-title-size: 18px;
  --powerhouse-body-size: 18px;
  --final-size: 17px;
  --cta-font-size: 14px;
  --cta-height: 32px;
}

.banner[data-width="970"][data-height="250"] {
  --pad: 24px;
  --logo-width: 190px;
  --scene-left: 240px;
  --scene-right: 34px;
  --scene-top: 42px;
  --scene-bottom: 34px;
  --login-visual-top: 74px;
  --login-visual-width: 240px;
  --headline-size: 34px;
  --headline-leading: 1.04;
  --powerhouse-icon-size: 62px;
  --powerhouse-body-size: 22px;
  --final-size: 28px;
  --cta-font-size: 17px;
  --cta-height: 42px;
}

.banner[data-width="320"][data-height="100"] {
  --pad: 10px;
  --logo-width: 91px;
  --scene-left: 118px;
  --scene-right: 9px;
  --scene-top: 8px;
  --scene-bottom: 8px;
  --login-visual-left: 0px;
  --login-visual-top: 10px;
  --login-visual-width: 115px;
  --headline-size: 12.5px;
  --headline-leading: 1.08;
  --powerhouse-icon-size: 29px;
  --powerhouse-body-size: 10.5px;
  --final-size: 10.5px;
  --cta-font-size: 9.5px;
  --cta-height: 24px;
}

.banner[data-width="320"][data-height="50"],
.banner[data-width="300"][data-height="50"] {
  --pad: 7px;
  --logo-width: 76px;
  --scene-left: 94px;
  --scene-right: 6px;
  --scene-top: 4px;
  --scene-bottom: 4px;
  --login-visual-left: 0px;
  --login-visual-top: 10px;
  --login-visual-width: 42px;
  --headline-size: 8.2px;
  --headline-leading: 1.08;
  --powerhouse-icon-size: 17px;
  --powerhouse-body-size: 7.1px;
  --final-size: 7px;
  --cta-font-size: 7.2px;
  --cta-height: 18px;
}

.banner[data-width="728"][data-height="90"] .scene-inner,
.banner[data-width="970"][data-height="250"] .scene-inner,
.banner[data-width="320"][data-height="100"] .scene-inner,
.banner[data-width="320"][data-height="50"] .scene-inner,
.banner[data-width="300"][data-height="50"] .scene-inner {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.banner[data-width="728"][data-height="90"] .login-inner,
.banner[data-width="970"][data-height="250"] .login-inner,
.banner[data-width="320"][data-height="100"] .login-inner,
.banner[data-width="320"][data-height="50"] .login-inner,
.banner[data-width="300"][data-height="50"] .login-inner {
  justify-content: flex-start;
}

.banner[data-width="728"][data-height="90"] .scene-headline,
.banner[data-width="970"][data-height="250"] .scene-headline,
.banner[data-width="320"][data-height="100"] .scene-headline,
.banner[data-width="320"][data-height="50"] .scene-headline,
.banner[data-width="300"][data-height="50"] .scene-headline {
  width: 100%;
}

.banner[data-width="728"][data-height="90"] .powerhouse-inner,
.banner[data-width="970"][data-height="250"] .powerhouse-inner,
.banner[data-width="320"][data-height="100"] .powerhouse-inner,
.banner[data-width="320"][data-height="50"] .powerhouse-inner,
.banner[data-width="300"][data-height="50"] .powerhouse-inner {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 7px;
}

.banner[data-width="728"][data-height="90"] .powerhouse-head,
.banner[data-width="970"][data-height="250"] .powerhouse-head,
.banner[data-width="320"][data-height="100"] .powerhouse-head,
.banner[data-width="320"][data-height="50"] .powerhouse-head,
.banner[data-width="300"][data-height="50"] .powerhouse-head {
  gap: 4px;
}

.banner[data-width="728"][data-height="90"] .final-inner,
.banner[data-width="970"][data-height="250"] .final-inner,
.banner[data-width="320"][data-height="100"] .final-inner,
.banner[data-width="320"][data-height="50"] .final-inner,
.banner[data-width="300"][data-height="50"] .final-inner {
  align-items: center;
}

.banner[data-width="728"][data-height="90"] .final-copy,
.banner[data-width="970"][data-height="250"] .final-copy,
.banner[data-width="320"][data-height="100"] .final-copy,
.banner[data-width="320"][data-height="50"] .final-copy,
.banner[data-width="300"][data-height="50"] .final-copy {
  flex: 1 1 auto;
}

.banner[data-width="728"][data-height="90"] .final-copy strong,
.banner[data-width="970"][data-height="250"] .final-copy strong,
.banner[data-width="320"][data-height="100"] .final-copy strong,
.banner[data-width="320"][data-height="50"] .final-copy strong,
.banner[data-width="300"][data-height="50"] .final-copy strong {
  display: inline;
  margin-top: 0;
}

.banner[data-width="320"][data-height="100"] .powerhouse-inner,
.banner[data-width="320"][data-height="50"] .powerhouse-inner,
.banner[data-width="300"][data-height="50"] .powerhouse-inner {
  gap: 4px;
}

.banner[data-width="320"][data-height="100"] .powerhouse-head,
.banner[data-width="320"][data-height="50"] .powerhouse-head,
.banner[data-width="300"][data-height="50"] .powerhouse-head {
  gap: 7px;
}

.banner[data-width="320"][data-height="100"] .cta {
  padding: 0 8px;
  border-radius: 5px;
}

.banner[data-width="320"][data-height="50"] .cta,
.banner[data-width="300"][data-height="50"] .cta {
  padding: 0 6px;
  border-radius: 4px;
}

.banner[data-width="728"][data-height="90"] .login-inner,
.banner[data-width="970"][data-height="250"] .login-inner {
  justify-content: space-between;
}

.banner[data-width="728"][data-height="90"] .scene-headline,
.banner[data-width="970"][data-height="250"] .scene-headline {
  flex: 1 1 auto;
}

.banner[data-width="728"][data-height="90"] .scene-login .copy-default {
  display: none;
}

.banner[data-width="728"][data-height="90"][data-language="de"] .scene-login .copy-728.lang-de,
.banner[data-width="728"][data-height="90"][data-language="en"] .scene-login .copy-728.lang-en {
  display: block !important;
}

.banner[data-width="728"][data-height="90"] .login-inner {
  justify-content: center;
}

.banner[data-width="728"][data-height="90"] .scene-headline {
  width: 100%;
  text-align: center;
}

.banner[data-width="728"][data-height="90"].is-ready .scene-login {
  animation-name: headlineSceneInOutUp;
}

.banner[data-width="728"][data-height="90"].is-ready .scene-powerhouse {
  animation-name: sceneInOutUp;
}

.banner[data-width="728"][data-height="90"] .powerhouse-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.banner[data-width="728"][data-height="90"] .powerhouse-head {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.banner[data-width="728"][data-height="90"] .powerhouse-icon {
  flex: 0 0 auto;
}

.banner[data-width="728"][data-height="90"] .powerhouse-title-stack {
  flex: 0 0 auto;
}

.banner[data-width="728"][data-height="90"] .powerhouse-copy {
  display: flex;
  flex: 1 1 auto;
  align-self: stretch;
  align-items: center;
  min-width: 0;
}

.banner[data-width="728"][data-height="90"] .powerhouse-body {
  width: 100%;
  color: #000;
  line-height: 1.05;
}

.banner[data-width="728"][data-height="90"] .powerhouse-break-728 {
  display: inline;
}

.banner[data-width="728"][data-height="90"] .final-inner {
  right: 26px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.banner[data-width="728"][data-height="90"] .final-copy {
  width: auto;
  flex: 1 1 auto;
  text-align: center;
  line-height: 1.08;
}

.banner[data-width="728"][data-height="90"] .final-copy strong {
  display: inline;
  margin-top: 0;
}

.banner[data-width="728"][data-height="90"] .cta {
  min-width: 94px;
  min-height: auto;
  padding: 5px 12px;
  line-height: 1.04;
  text-align: center;
}

.banner[data-width="728"][data-height="90"] .cta-line {
  display: block;
}

.banner[data-width="728"][data-height="90"] .cta-line + .cta-line::before {
  content: none;
}

@keyframes introScene {
  0% {
    opacity: 0;
    transform: translateX(0);
  }

  14%,
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes logoDockSequence {
  0%,
  58% {
    transform: translate3d(var(--logo-intro-offset-x), 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes loginVisualSequence {
  0% {
    opacity: 0;
    transform: translate3d(var(--login-visual-entry-x), 0, 0);
  }

  14%,
  48% {
    opacity: 0.98;
    transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 0.98;
    transform: translate3d(var(--login-visual-exit-x), 0, 0);
  }
}

@keyframes headlineSceneInOut {
  0% {
    opacity: 0;
    transform: translateX(42px) scale(0.985);
  }

  12%,
  82% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateX(-112%) scale(1);
  }
}

@keyframes headlineSceneInOutUp {
  0% {
    opacity: 0;
    transform: translateX(42px) scale(0.985);
  }

  12%,
  82% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -112%, 0) scale(1);
  }
}

@keyframes sceneInOut {
  0% {
    opacity: 0;
    transform: translateX(32px);
  }

  12%,
  82% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-112%);
  }
}

@keyframes sceneInOutUp {
  0% {
    opacity: 0;
    transform: translateX(32px);
  }

  12%,
  82% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, -112%, 0);
  }
}

@keyframes sceneInStay {
  from {
    opacity: 0;
    transform: translateX(32px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes copyLineReveal {
  from {
    opacity: 0;
    transform: translateY(15px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes copyBlockReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes iconReveal {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.84);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ctaReveal {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ctaPulse {
  0%,
  100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
  }

  50% {
    transform: translateY(0) scale(1.045);
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.34);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fingerprint-background,
  .banner.background-animation-loaded .fingerprint-background {
    display: none;
  }

  .brand-logo-animation,
  .banner.logo-animation-loaded .brand-logo-animation {
    display: none;
  }

  .brand-logo-registered,
  .banner.logo-animation-loaded .brand-logo-registered {
    display: none;
  }

  .brand-logo-static,
  .banner.logo-animation-loaded .brand-logo-static {
    opacity: 1;
  }

  .scene,
  .login-visual,
  .copy-line,
  .powerhouse-icon,
  .powerhouse-title,
  .powerhouse-body,
  .final-copy,
  .cta {
    animation: none !important;
    transform: none !important;
  }

  .scene {
    opacity: 0;
  }

  .scene-final,
  .final-copy,
  .cta {
    opacity: 1;
  }
}