/* Original Bithrah geometry, illuminated from within. Load after mobile-motion.css. */
.brand-finale {
  --brand-width: clamp(150px, 19vw, 235px);
  --brand-top: 38px;
  --brand-mask: url('assets/logos/bithrah-vector.svg');
}
/* A colored original remains even on browsers without SVG masking. */
.brand-finale img {
  width: var(--brand-width);
  filter: brightness(.78) sepia(1) saturate(4) hue-rotate(110deg)
    drop-shadow(0 0 18px rgba(73,230,213,.32));
}
@supports ((mask-image: url('')) or (-webkit-mask-image: url(''))) {
  .brand-finale img { opacity: 0; filter: none; }
  .brand-finale::before,
  .brand-finale::after {
    content: '';
    position: absolute;
    inset: auto;
    top: var(--brand-top);
    left: 50%;
    width: var(--brand-width);
    height: calc(var(--brand-width) * 1.25);
    transform: translateX(-50%);
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: var(--brand-mask);
    mask-image: var(--brand-mask);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    animation-play-state: paused;
  }
  .brand-finale::before {
    /* Colored depth is permanent: stopping motion never restores a white slab. */
    background-color: #149a91;
    background-image:
      radial-gradient(ellipse at 32% 25%, #c8fff4 0%, #65f9dd 13%, transparent 35%),
      radial-gradient(ellipse at 66% 61%, #b8a0ff 0%, #8463db 16%, transparent 40%),
      radial-gradient(ellipse at 48% 90%, #a996ff 2%, #535bd8 23%, transparent 47%),
      linear-gradient(118deg, #076d70 10%, #31d8b4 33%, #137788 48%, #64f4e5 60%, #177f91 75%, #b79af4 95%);
    background-size: 140% 150%, 160% 165%, 110% 120%, 175% 175%;
    background-position: 38% 24%, 62% 63%, 50% 100%, 45% 40%;
    animation: bithrah-liquid-depth 8.7s ease-in-out infinite alternate;
    animation-play-state: paused;
    filter: saturate(1.2);
  }
  .brand-finale::after {
    /* Thin, crossing caustics refract inside the identical, stationary mask. */
    background-image:
      repeating-radial-gradient(ellipse at 28% 42%, transparent 0 8%, rgba(176,255,237,.03) 9%, rgba(184,255,246,.9) 9.8%, rgba(80,226,228,.12) 10.6%, transparent 12% 21%),
      repeating-radial-gradient(ellipse at 80% 64%, transparent 0 12%, rgba(210,187,255,.62) 12.8%, transparent 14.2% 26%),
      linear-gradient(112deg, transparent 30%, rgba(182,255,237,.12) 43%, rgba(201,255,247,.78) 48%, transparent 53% 100%);
    background-size: 185% 180%, 190% 200%, 230% 180%;
    background-position: 24% 36%, 73% 61%, 80% 40%;
    mix-blend-mode: screen;
    opacity: .76;
    animation: bithrah-liquid-caustics 6.3s cubic-bezier(.37,0,.63,1) infinite alternate;
    animation-play-state: paused;
  }
  html[data-liquid-motion=running] .brand-finale[data-liquid-visible=true]::before,
  html[data-liquid-motion=running] .brand-finale[data-liquid-visible=true]::after {
    animation-play-state: running;
  }
  html[data-theme=day] .brand-finale::before {
    background-color: #127c7a;
    background-image:
      radial-gradient(ellipse at 32% 25%, #c8fff4 0%, #65f9dd 13%, transparent 35%),
      radial-gradient(ellipse at 66% 61%, #b8a0ff 0%, #8463db 16%, transparent 40%),
      radial-gradient(ellipse at 48% 90%, #a996ff 2%, #535bd8 23%, transparent 47%),
      linear-gradient(118deg, #076d70 10%, #31d8b4 33%, #137788 48%, #64f4e5 60%, #177f91 75%, #b79af4 95%);
    filter: saturate(1.25) brightness(.75);
  }
  html[data-theme=day] .brand-finale::after { opacity: .48; }
}
@keyframes bithrah-liquid-depth {
  0% { background-position: 38% 24%, 62% 63%, 50% 100%, 45% 40%; }
  48% { background-position: 70% 54%, 26% 34%, 56% 78%, 75% 64%; }
  100% { background-position: 22% 74%, 72% 28%, 40% 93%, 18% 28%; }
}
@keyframes bithrah-liquid-caustics {
  0% { background-position: 24% 36%, 73% 61%, 80% 40%; opacity: .68; }
  46% { background-position: 65% 68%, 28% 36%, 24% 65%; opacity: .88; }
  100% { background-position: 46% 12%, 59% 85%, 65% 15%; opacity: .72; }
}
/* Entire phrases preserve Arabic joining, direction and the authored line breaks. */
.fluid-entry > .fluid-title-phrase {
  display: inline-block;
  max-width: 100%;
  vertical-align: baseline;
  transform-origin: 50% 85%;
}
.fluid-entry > .fluid-title-phrase--plain { color: inherit; }
/* Body copy intentionally has no entry displacement or blur. */
.fluid-entry:not(h1):not(h2):not(.explore-title):not(.calc-title) {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: none;
}
@media (max-width: 760px) {
  .brand-finale { --brand-width: 156px; --brand-top: 26px; }
}
html[data-motion=off] .brand-finale::before,
html[data-motion=off] .brand-finale::after {
  animation-play-state: paused !important;
}
html[data-motion=off] .fluid-title-phrase {
  opacity: 1 !important; transform: none !important; filter: none !important;
  clip-path: none !important; text-shadow: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .brand-finale::before, .brand-finale::after { animation: none !important; }
  .fluid-title-phrase {
    opacity: 1 !important; transform: none !important; filter: none !important;
    clip-path: none !important; text-shadow: none !important;
  }
}