/* The photographs, text and editing illustrations remain completely still.
   Only the three background light fields have animation. */
#kling-promo-banner {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-width: 0;
  margin: 0 0 48px;
  overflow: hidden;
  border: 1px solid #2b3435;
  border-radius: 24px;
  background: #111719;
  color: #fff;
}

#kling-promo-banner .kling-promo-ambience {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

#kling-promo-banner .kling-promo-ambience::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(180deg, #121517a1, transparent 72%), linear-gradient(90deg, #0e121655, transparent 22%, transparent 78%, #0e121655);
}

#kling-promo-banner .kling-promo-glow {
  position: absolute;
  display: block;
  width: 75%;
  height: 155%;
  border-radius: 50%;
  pointer-events: none;
  animation-play-state: paused;
}

#kling-promo-banner .kling-promo-glow--teal {
  left: -16%;
  bottom: -105%;
  background: radial-gradient(ellipse, #0b947a99 0, #0b947a44 42%, #0b947a00 72%);
  animation: kling-promo-teal 27s ease-in-out infinite;
  animation-play-state: paused;
}

#kling-promo-banner .kling-promo-glow--blue {
  right: -18%;
  bottom: -103%;
  background: radial-gradient(ellipse, #127fb8a6 0, #127fb844 42%, #127fb800 73%);
  animation: kling-promo-blue 31s ease-in-out -8s infinite;
  animation-play-state: paused;
}

#kling-promo-banner .kling-promo-glow--mist {
  left: 18%;
  bottom: -106%;
  background: radial-gradient(ellipse, #75aeb84d 0, #47788a22 43%, #47788a00 74%);
  animation: kling-promo-mist 35s ease-in-out -13s infinite;
  animation-play-state: paused;
}

#kling-promo-banner[data-motion-state="playing"] .kling-promo-glow { animation-play-state: running; }

#kling-promo-banner .kling-promo-contours { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #b7dbdd; stroke-width: .7; opacity: .075; }

#kling-promo-banner .kling-promo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 1.22fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  min-height: 340px;
  padding: 42px 5%;
}

#kling-promo-banner .kling-promo-art { position: relative; justify-self: center; min-width: 0; pointer-events: none; user-select: none; }
#kling-promo-banner .kling-promo-reference { width: 260px; max-width: 100%; aspect-ratio: 260 / 232; }
#kling-promo-banner .kling-promo-art-label { position: absolute; top: 0; left: 1%; display: flex; justify-content: space-between; width: 84%; color: #c6d4d6; font-size: 8px; font-weight: 550; line-height: 1.2; letter-spacing: 1.6px; }
#kling-promo-banner .kling-promo-art-label > span { color: #819699; font-variant-numeric: tabular-nums; }
#kling-promo-banner .kling-promo-library { position: absolute; top: 10%; left: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 7px; width: 89%; height: 72%; padding: 8px; border: 1px solid #d2e6e626; border-radius: 17px; background: #d9e8e815; box-shadow: 0 12px 35px #0003, inset 0 1px 0 #ffffff14; }
#kling-promo-banner .kling-promo-library > img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 8px; background: #29383c; }
#kling-promo-banner .kling-promo-add { display: grid; place-items: center; border-radius: 8px; background: #d9e8e80a; }
#kling-promo-banner .kling-promo-add > span { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #c2d6d64d; border-radius: 50%; background: #d5e6e618; color: #e8efef; font-size: 25px; font-weight: 250; line-height: 1; }
#kling-promo-banner .kling-promo-filmstrip { position: absolute; top: 73%; left: 24%; display: flex; align-items: center; gap: 7px; width: 76%; height: 20%; padding: 4px 5px; overflow: hidden; border: 1px solid #e9f2f280; border-radius: 11px; background: #1a2d32; box-shadow: 0 9px 20px #0004; }
#kling-promo-banner .kling-promo-film-label { flex: 0 0 auto; padding-inline: 4px 1px; color: #e9f1f1; font-size: 7px; font-weight: 650; line-height: 1.5; letter-spacing: .7px; }
#kling-promo-banner .kling-promo-film-frames { display: flex; align-self: stretch; flex: 1; min-width: 0; overflow: hidden; border-radius: 5px; }
#kling-promo-banner .kling-promo-film-frames img { display: block; width: 25%; height: 100%; max-height: 100%; min-width: 0; object-fit: cover; border-right: 1px solid #e2eceb22; }
#kling-promo-banner .kling-promo-film-edge { flex: 0 0 2px; align-self: stretch; border-radius: 1px; background: #e6f0f0; }

#kling-promo-banner .kling-promo-copy { position: relative; z-index: 1; min-width: 0; text-align: center; }
#kling-promo-banner .kling-promo-kicker { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 11px; color: #b0c2c6; font-size: 8px; font-weight: 600; line-height: 1.2; letter-spacing: 1.8px; white-space: nowrap; }
#kling-promo-banner .kling-promo-brand { display: inline-flex; align-items: center; gap: 5px; color: #f3f7f7; font-size: 14px; font-weight: 650; letter-spacing: -.35px; }
#kling-promo-banner .kling-promo-brand img { display: block; width: 19px; height: 19px; }
#kling-promo-banner .kling-promo-kicker-rule { width: 1px; height: 12px; background: #d9ecec30; }
#kling-promo-banner h2 { display: flex; align-items: baseline; justify-content: center; gap: 13px; margin: 0; line-height: 1; }
#kling-promo-banner .kling-promo-name { font-size: 51px; font-weight: 780; line-height: 1; letter-spacing: -3.3px; }
#kling-promo-banner .kling-promo-version { padding-right: 6px; background: linear-gradient(180deg, #fff 3%, #b3c5ca 31%, #edf4f4 44%, #6d8c97 53%, #e3eeef 77%, #96adb5 100%); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-stroke: .45px #d7e7e8; font-size: 91px; font-style: italic; font-weight: 850; line-height: .95; letter-spacing: -7px; }
#kling-promo-banner .kling-promo-description { margin: 15px 0 22px; color: #b7c9cc; font-size: 13px; font-weight: 450; line-height: 1.6; letter-spacing: -.12px; }
#kling-promo-banner .kling-promo-cta { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 43px; padding: 0 18px; border: 1px solid #f0f4f5; border-radius: 9px; background: #f6f9f9; color: #101719; box-shadow: 0 3px 0 #98a8ab; font-size: 12px; font-weight: 650; line-height: 1.4; }
#kling-promo-banner .kling-promo-cta:hover { border-color: #dce7e8; background: #dce7e8; }
#kling-promo-banner .kling-promo-cta:focus-visible { outline: 2px solid #e8f2f2; outline-offset: 5px; }
#kling-promo-banner .kling-promo-cta svg { flex: 0 0 auto; }

#kling-promo-banner .kling-promo-editor { width: 230px; max-width: 100%; aspect-ratio: 230 / 246; }
#kling-promo-banner .kling-promo-host { position: absolute; top: 0; left: 17%; width: 75%; height: 94%; overflow: hidden; border: 1px solid #d9e8e82e; border-radius: 13px; background: #223033; box-shadow: 0 15px 35px #0004; }
#kling-promo-banner .kling-promo-host > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 36%; }
#kling-promo-banner .kling-promo-host-label { position: absolute; top: 10px; left: 9px; color: #fff; text-shadow: 0 1px 8px #000b; font-size: 5px; font-weight: 600; line-height: 1; letter-spacing: .85px; }
#kling-promo-banner .kling-promo-focus { position: absolute; top: 16%; left: 31%; width: 49%; height: 35%; border: 1px solid #deeeee9e; }
#kling-promo-banner .kling-promo-focus > i { position: absolute; width: 4px; height: 4px; background: #eff8f8; }
#kling-promo-banner .kling-promo-focus > i:nth-child(1) { left: -2px; top: -2px; }
#kling-promo-banner .kling-promo-focus > i:nth-child(2) { right: -2px; top: -2px; }
#kling-promo-banner .kling-promo-focus > i:nth-child(3) { left: -2px; bottom: -2px; }
#kling-promo-banner .kling-promo-focus > i:nth-child(4) { right: -2px; bottom: -2px; }
#kling-promo-banner .kling-promo-focus--detail { top: 8%; left: 79%; width: 21%; height: 19%; border-style: dashed; border-color: #deeeee6b; }
#kling-promo-banner .kling-promo-edit-note { position: absolute; bottom: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; height: 33px; padding: 0 10px 0 12px; border: 1px solid #dcecec33; border-radius: 18px; background: #31525be8; box-shadow: 0 7px 20px #0003; color: #f1f7f7; font-size: 9px; font-weight: 550; letter-spacing: -.08px; }
#kling-promo-banner .kling-promo-edit-note svg { flex: 0 0 auto; }

@keyframes kling-promo-teal {
  0%, 100% { transform: translate3d(-7%, 8%, 0) scale(1); opacity: .55; }
  50% { transform: translate3d(24%, -12%, 0) scale(1.12); opacity: .85; }
}
@keyframes kling-promo-blue {
  0%, 100% { transform: translate3d(9%, 8%, 0) scale(1); opacity: .8; }
  50% { transform: translate3d(-22%, -11%, 0) scale(1.14); opacity: .5; }
}
@keyframes kling-promo-mist {
  0%, 100% { transform: translate3d(-7%, 8%, 0) scale(.96); opacity: .4; }
  50% { transform: translate3d(18%, -9%, 0) scale(1.12); opacity: .7; }
}

@media (max-width: 1100px) and (min-width: 901px) {
  #kling-promo-banner .kling-promo-layout { grid-template-columns: minmax(0, 1fr) minmax(300px, 1.3fr) minmax(0, 1fr); gap: 16px; padding-inline: 32px; }
  #kling-promo-banner .kling-promo-name { font-size: 46px; }
  #kling-promo-banner .kling-promo-version { font-size: 81px; }
}

@media (max-width: 900px) {
  #kling-promo-banner .kling-promo-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 27px; padding: 34px 28px 32px; }
  #kling-promo-banner .kling-promo-copy { grid-column: 1 / -1; grid-row: 1; }
  #kling-promo-banner .kling-promo-reference { justify-self: end; width: 220px; margin-right: 8px; }
  #kling-promo-banner .kling-promo-editor { justify-self: start; width: 200px; margin-left: 8px; }
  #kling-promo-banner .kling-promo-glow { width: 130%; height: 100%; bottom: -50%; }
  #kling-promo-banner .kling-promo-glow--teal { left: -45%; }
  #kling-promo-banner .kling-promo-glow--blue { right: -45%; }
  #kling-promo-banner .kling-promo-glow--mist { left: -10%; }
}

@media (max-width: 560px) {
  #kling-promo-banner { margin-bottom: 32px; border-radius: 20px; }
  #kling-promo-banner .kling-promo-layout { gap: 26px 18px; padding: 29px 18px 24px; }
  #kling-promo-banner .kling-promo-kicker { gap: 9px; margin-bottom: 13px; font-size: 7px; letter-spacing: 1.3px; }
  #kling-promo-banner .kling-promo-brand { font-size: 12px; }
  #kling-promo-banner .kling-promo-brand img { width: 17px; height: 17px; }
  #kling-promo-banner h2 { gap: 10px; }
  #kling-promo-banner .kling-promo-name { font-size: 42px; letter-spacing: -2.6px; }
  #kling-promo-banner .kling-promo-version { font-size: 74px; letter-spacing: -6px; }
  #kling-promo-banner .kling-promo-description { margin-top: 13px; margin-bottom: 20px; font-size: 12px; }
  #kling-promo-banner .kling-promo-cta { min-height: 42px; padding-inline: 17px; font-size: 11px; }
  #kling-promo-banner .kling-promo-reference { width: 160px; margin: 0; }
  #kling-promo-banner .kling-promo-editor { width: 145px; margin: 0; }
  #kling-promo-banner .kling-promo-art-label { font-size: 6px; letter-spacing: 1px; }
  #kling-promo-banner .kling-promo-library { gap: 4px; padding: 5px; border-radius: 11px; }
  #kling-promo-banner .kling-promo-library > img, #kling-promo-banner .kling-promo-add { border-radius: 5px; }
  #kling-promo-banner .kling-promo-add > span { width: 23px; height: 23px; font-size: 19px; }
  #kling-promo-banner .kling-promo-filmstrip { gap: 3px; padding: 3px; border-radius: 7px; }
  #kling-promo-banner .kling-promo-film-label { font-size: 5px; padding-left: 1px; letter-spacing: .35px; }
  #kling-promo-banner .kling-promo-film-frames { border-radius: 3px; }
  #kling-promo-banner .kling-promo-film-edge { flex-basis: 1px; }
  #kling-promo-banner .kling-promo-host { border-radius: 9px; }
  #kling-promo-banner .kling-promo-host-label { top: 8px; left: 6px; font-size: 3.5px; letter-spacing: .5px; }
  #kling-promo-banner .kling-promo-focus > i { width: 3px; height: 3px; }
  #kling-promo-banner .kling-promo-edit-note { height: 25px; gap: 7px; padding-inline: 8px; font-size: 6.5px; }
  #kling-promo-banner .kling-promo-edit-note svg { width: 13px; height: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  #kling-promo-banner .kling-promo-glow { animation-play-state: paused !important; }
}