.login-hero {
  --lens-hero-ink: #122C48;
  --lens-hero-brand: #17509E;
  --lens-hero-light: #FFFFFF;

  --lens-hero-at-target-deep: #5C7C1D;
  --lens-hero-at-target-mid: #7AA426;
  --lens-hero-at-target: #A3C65B;

  --lens-hero-below-target: #BFCEE2;

  --lens-hero-heading: #FFFFFF;
  --lens-hero-body: rgba(233, 239, 247, 0.72);

  --lens-hero-grid-size: 56px;
  --lens-hero-inset: 9%;

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  background: var(--lens-hero-ink);
}

.login-hero__grid {
  --lens-hero-rule: color-mix(in srgb, var(--lens-hero-light) 5%, transparent);

  position: absolute;
  inset: 0;
  opacity: 0.6;
  background-image:
    linear-gradient(var(--lens-hero-rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--lens-hero-rule) 1px, transparent 1px);
  background-size: 100% var(--lens-hero-grid-size), var(--lens-hero-grid-size) 100%;
}

.login-hero__dots {
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  background-image: radial-gradient(
    color-mix(in srgb, var(--lens-hero-light) 16%, transparent) 1.4px,
    transparent 1.5px
  );
  background-size: 26px 26px;
  background-position: 8px 14px;
  -webkit-mask-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 34%, rgba(0, 0, 0, 1) 100%),
    linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 22%, rgba(0, 0, 0, 0) 68%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 34%, rgba(0, 0, 0, 1) 100%),
    linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 22%, rgba(0, 0, 0, 0) 68%);
  mask-composite: intersect;
}

.login-hero__spark {
  position: absolute;
  width: 5px;
  height: 5px;
}

.login-hero__spark--at-target {
  top: 15%;
  right: 20%;
  background: color-mix(in srgb, var(--lens-hero-at-target) 85%, transparent);
}

.login-hero__spark--below-target {
  top: 24%;
  right: 33%;
  background: color-mix(in srgb, var(--lens-hero-below-target) 55%, transparent);
}

.login-hero__spark--plain {
  top: 33%;
  right: 13%;
  background: color-mix(in srgb, var(--lens-hero-light) 42%, transparent);
}

.login-hero__glow {
  position: absolute;
  top: 6%;
  right: 6%;
  width: 30%;
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--lens-hero-brand) 55%, transparent) 0%,
    color-mix(in srgb, var(--lens-hero-brand) 0%, transparent) 70%
  );
}

.login-hero__columns {
  position: absolute;
  right: 0;
  bottom: 26%;
  left: 0;
  display: flex;
  align-items: flex-end;
  height: 46%;
  gap: 1.6%;
  padding: 0 7% 0 var(--lens-hero-inset);
}

@keyframes lens-hero-rise {
  from { transform: scaleY(0.55); opacity: 0.5; }
  to   { transform: scaleY(1); opacity: 1; }
}

.login-hero__bar {
  flex: 1;
  background: color-mix(in srgb, var(--lens-hero-light) 9%, transparent);
  transform-origin: bottom;
  animation: lens-hero-rise 900ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.login-hero__bar:nth-child(1)  { height: 22%; animation-delay: 0ms; }
.login-hero__bar:nth-child(2)  { height: 34%; animation-delay: 60ms; }
.login-hero__bar:nth-child(3)  { height: 29%; animation-delay: 120ms; }
.login-hero__bar:nth-child(4)  { height: 44%; animation-delay: 180ms; }
.login-hero__bar:nth-child(5)  { height: 39%; animation-delay: 240ms; }
.login-hero__bar:nth-child(6)  { height: 55%; animation-delay: 300ms; }
.login-hero__bar:nth-child(7)  { height: 63%; animation-delay: 360ms; }
.login-hero__bar:nth-child(8)  { height: 58%; animation-delay: 420ms; }
.login-hero__bar:nth-child(9)  { height: 72%; animation-delay: 480ms; }
.login-hero__bar:nth-child(10) { height: 80%; animation-delay: 540ms; }
.login-hero__bar:nth-child(11) { height: 88%; animation-delay: 600ms; }

.login-hero__bar:nth-child(n + 4) {
  background: color-mix(in srgb, var(--lens-hero-below-target) 20%, transparent);
}

.login-hero__bar:nth-child(6) {
  background: color-mix(in srgb, var(--lens-hero-below-target) 26%, transparent);
}

.login-hero__bar:nth-child(n + 7) {
  background: color-mix(in srgb, var(--lens-hero-below-target) 32%, transparent);
}

.login-hero__bar:nth-child(9) {
  background: color-mix(in srgb, var(--lens-hero-at-target-deep) 55%, transparent);
}

.login-hero__bar:nth-child(10) {
  background: color-mix(in srgb, var(--lens-hero-at-target-mid) 62%, transparent);
}

.login-hero__bar:nth-child(11) {
  background: color-mix(in srgb, var(--lens-hero-at-target) 70%, transparent);
}

.login-hero__target {
  position: absolute;
  right: 0;
  bottom: 56%;
  left: 0;
  height: 0;
  border-top: 1px dashed color-mix(in srgb, var(--lens-hero-at-target) 75%, transparent);
}

.login-hero__edge {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(
    color-mix(in srgb, var(--lens-hero-light) 0%, transparent) 0%,
    color-mix(in srgb, var(--lens-hero-light) 22%, transparent) 50%,
    color-mix(in srgb, var(--lens-hero-light) 0%, transparent) 100%
  );
}

.login-hero__line {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 34%;
  background: linear-gradient(
    color-mix(in srgb, var(--lens-hero-ink) 0%, transparent) 0%,
    color-mix(in srgb, var(--lens-hero-ink) 78%, transparent) 40%,
    color-mix(in srgb, var(--lens-hero-ink) 97%, transparent) 75%
  );
}

.login-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 620px;
  padding: 0 var(--lens-hero-inset) 8%;
}

.login-hero__mark {
  width: 44px;
  height: 2px;
  background: var(--lens-hero-at-target);
}

.login-hero__headline {
  margin: 0;
  font-size: 30px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--lens-hero-heading);
  text-wrap: pretty;
}

.login-hero__sub {
  max-width: 46ch;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lens-hero-body);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .login-hero__bar {
    animation: none;
  }
}