/* Every cross-section follows the alpha of the original, including on file://. */
.brand-sculpture {
  position: relative;
  display: inline-block;
  flex: none;
  width: 36px;
  height: 36px;
  transform-style: preserve-3d;
  transform: perspective(180px)
    rotateX(calc(19deg + var(--brand-pitch, 0deg)))
    rotateY(calc(-23deg + var(--brand-yaw, 0deg)))
    rotateZ(-4deg);
}
.brand-solid, .brand-face,
.brand-solid > i, .brand-solid::before, .brand-solid::after,
.brand-solid > i::before, .brand-solid > i::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.brand-solid, .brand-solid > i { transform-style: preserve-3d; }
.brand-solid::before, .brand-solid::after,
.brand-solid > i::before, .brand-solid > i::after {
  content: "";
  background: url("./assets/gemini-spark.png") center / contain no-repeat;
  backface-visibility: hidden;
}
.brand-solid > i::before, .brand-solid > i::after {
  filter: var(--side-light);
}
.brand-solid > i::before { transform: translateZ(-.35px); }
.brand-solid > i::after { transform: translateZ(.35px); }
.brand-solid::before {
  transform: translateZ(-5px);
  filter: saturate(.68) brightness(.42) drop-shadow(1px 2px 1.15px #232a4838);
}
.brand-solid > i:nth-child(1) {
  transform: translateZ(-3.9px);
  --side-light: saturate(.68) brightness(.58);
}
.brand-solid > i:nth-child(2) {
  transform: translateZ(-2.45px);
  --side-light: saturate(.76) brightness(.63);
}
.brand-solid > i:nth-child(3) {
  transform: translateZ(-1px);
  --side-light: saturate(.85) brightness(.70);
}
.brand-solid > i:nth-child(4) {
  transform: translateZ(.45px);
  --side-light: saturate(.92) brightness(.79);
}
.brand-solid::after {
  transform: translateZ(1.8px);
  filter: saturate(.76) brightness(1.17);
}
.brand-sculpture > .brand-face {
  display: block;
  width: 100%;
  height: 100%;
  transform: translateZ(2.6px);
  backface-visibility: hidden;
}
:is(.brand, .login-brand) .brand-name { color: #24283b; }
.brand-pass { color: #2949b1; }

@media (max-width: 620px) {
  .brand-sculpture { width: 32px; height: 32px; }
}
@media (prefers-reduced-motion: no-preference) {
  .brand-sculpture {
    animation: brand-rock 5.6s ease-in-out infinite alternate;
    transition: transform 200ms var(--ease-out, cubic-bezier(.23,1,.32,1)),
      scale 140ms var(--ease-out, cubic-bezier(.23,1,.32,1));
  }
  .brand-sculpture[data-tracking] { animation-play-state: paused; }
  :is(.brand, .login-brand):active .brand-sculpture { scale: .95; }
  @keyframes brand-rock {
    from { rotate: .35 1 -.15 -6deg; }
    to { rotate: .35 1 -.15 6deg; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .brand-sculpture { transform: perspective(180px) rotateX(19deg) rotateY(-23deg) rotateZ(-4deg); }
}