/* First-paint loader. SVG dash drawing adapted from the MIT-licensed
   CodePen "logo stroke loader animation" by @simone22. */
html.aijella-locale-pending {
  min-height: 100%;
  overflow: hidden;
  background: #03060b;
}

html.aijella-locale-pending body {
  min-height: 100vh;
  margin: 0;
  overflow: hidden;
  background: #03060b;
}

html.aijella-locale-pending body > :not(.aijella-loader) {
  visibility: hidden !important;
}

.aijella-loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  overflow: hidden;
  place-items: center;
  color: #e9f2ff;
  background:
    radial-gradient(circle at 50% 43%, rgba(55, 125, 255, .17), transparent 18rem),
    radial-gradient(ellipse at 50% 100%, rgba(33, 101, 220, .15), transparent 42%),
    #03060b;
  isolation: isolate;
}

html.aijella-locale-pending .aijella-loader,
html.aijella-locale-ready .aijella-loader {
  display: grid;
}

html.aijella-locale-ready .aijella-loader {
  pointer-events: none;
  animation: aijella-loader-exit .72s cubic-bezier(.77, 0, .18, 1) both;
}

.aijella-loader::before,
.aijella-loader::after,
.aijella-loader-atmosphere::before,
.aijella-loader-atmosphere::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.aijella-loader::before {
  inset: 0;
  z-index: -2;
  opacity: .34;
  background-image:
    linear-gradient(rgba(92, 153, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92, 153, 255, .055) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(circle at center, #000, transparent 68%);
  mask-image: radial-gradient(circle at center, #000, transparent 68%);
  transform: perspective(700px) rotateX(62deg) scale(1.55) translateY(18%);
  transform-origin: 50% 74%;
  animation: aijella-loader-grid 7s linear infinite;
}

.aijella-loader::after {
  left: 7vw;
  right: 7vw;
  top: 50%;
  height: 1px;
  opacity: .7;
  background: linear-gradient(90deg, transparent, rgba(110, 174, 255, .24) 22%, rgba(183, 218, 255, .76) 50%, rgba(110, 174, 255, .24) 78%, transparent);
  box-shadow: 0 0 32px rgba(60, 132, 255, .26);
  transform: scaleX(.1);
  animation: aijella-loader-horizon 2.4s cubic-bezier(.65, 0, .35, 1) infinite;
}

.aijella-loader-atmosphere {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, transparent 49.94%, rgba(105, 166, 255, .11) 50%, transparent 50.06%),
    linear-gradient(transparent 49.94%, rgba(105, 166, 255, .07) 50%, transparent 50.06%);
}

.aijella-loader-atmosphere::before {
  inset: -20%;
  background: conic-gradient(from 90deg at 50% 50%, transparent, rgba(51, 125, 255, .055), transparent 23%, transparent 77%, rgba(51, 125, 255, .055), transparent);
  animation: aijella-loader-atmosphere 8s linear infinite;
}

.aijella-loader-atmosphere::after {
  left: 50%;
  top: -16vh;
  width: min(14vw, 150px);
  height: 132vh;
  background: linear-gradient(180deg, transparent, rgba(102, 169, 255, .08) 28%, rgba(114, 180, 255, .21) 50%, rgba(83, 151, 255, .07) 72%, transparent);
  filter: blur(20px);
  transform: translateX(-50%);
  animation: aijella-loader-column 2.8s ease-in-out infinite;
}

.aijella-loader-stage {
  position: relative;
  width: min(86vw, 460px);
  display: grid;
  justify-items: center;
  gap: 18px;
  transform: translateY(-1vh);
}

.aijella-loader-meta {
  width: min(78vw, 360px);
  display: flex;
  justify-content: space-between;
  color: rgba(143, 185, 239, .74);
  font: 600 9px/1.2 Manrope, Arial, sans-serif;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.aijella-loader-meta span:first-child { color: #7eb6ff; }

.aijella-loader-emblem {
  position: relative;
  width: clamp(190px, 25vw, 280px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.aijella-loader-svg {
  position: relative;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.aijella-loader-ring,
.aijella-loader-orbit {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  pointer-events: none;
}

.aijella-loader-ring {
  z-index: 1;
  border: 1px solid rgba(108, 167, 245, .14);
}

.aijella-loader-ring::before,
.aijella-loader-ring::after {
  content: '';
  position: absolute;
  background: rgba(115, 181, 255, .58);
  box-shadow: 0 0 10px rgba(81, 154, 255, .85);
}

.aijella-loader-ring::before { left: -3px; top: 50%; width: 6px; height: 1px; }
.aijella-loader-ring::after { right: -3px; top: 50%; width: 6px; height: 1px; }
.aijella-loader-ring.ring-two { inset: 22%; border-style: dashed; opacity: .75; animation: aijella-loader-spin 12s linear infinite reverse; }

.aijella-loader-orbit {
  z-index: 4;
  inset: 7%;
  border: 1px solid transparent;
  border-top-color: rgba(112, 183, 255, .7);
  border-right-color: rgba(112, 183, 255, .12);
  filter: drop-shadow(0 0 7px rgba(65, 144, 255, .45));
  animation: aijella-loader-spin 3.4s linear infinite;
}

.aijella-loader-orbit.orbit-two {
  inset: 18%;
  border-top-color: rgba(224, 241, 255, .68);
  animation-duration: 5.2s;
  animation-direction: reverse;
}

.aijella-loader-orbit i {
  position: absolute;
  right: 14%;
  top: 5%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a9d3ff;
  box-shadow: 0 0 7px #74b5ff, 0 0 18px rgba(69, 143, 255, .9);
}

.aijella-loader-streams path {
  stroke: url(#aijella-loader-gradient);
  stroke-width: .75;
  stroke-dasharray: .08 .025;
  stroke-dashoffset: 1;
  opacity: .72;
  filter: url(#aijella-loader-glow);
  animation: aijella-loader-stream 1.9s cubic-bezier(.5, 0, .2, 1) infinite;
}

.aijella-loader-streams path:nth-child(2) { animation-delay: -.9s; }

.mark-surface {
  opacity: 0;
  fill: #f3f6ff;
  filter: drop-shadow(0 0 10px rgba(90, 158, 255, .36));
  animation: aijella-loader-surface 1.9s cubic-bezier(.2, .8, .2, 1) infinite;
}

.mark-surface.mark-right { animation-delay: .12s; }
.mark-surface.mark-core { fill: #448aff; animation-delay: .3s; }

.mark-trace {
  fill: none;
  stroke: url(#aijella-loader-gradient);
  stroke-width: .55;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: url(#aijella-loader-glow);
  animation: aijella-loader-draw 1.9s cubic-bezier(.62, 0, .32, 1) infinite;
}

.mark-trace.trace-right { animation-delay: .12s; }
.mark-trace.trace-core { stroke: #5b9cff; animation-delay: .3s; }

.aijella-loader-apex {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 26.7%;
  width: 5px;
  height: 5px;
  border: 1px solid #d9ecff;
  border-radius: 50%;
  background: #7db7ff;
  box-shadow: 0 0 7px #7db7ff, 0 0 22px #3c87ff, 0 0 48px rgba(56, 132, 255, .8);
  transform: translate(-50%, -50%);
  animation: aijella-loader-apex 1.9s ease-in-out infinite;
}

.aijella-loader-wordmark {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.aijella-loader-wordmark strong {
  color: #f4f7ff;
  font: 630 clamp(20px, 3vw, 30px)/1 Manrope, Arial, sans-serif;
  letter-spacing: .34em;
  text-indent: .34em;
  text-shadow: 0 0 24px rgba(92, 157, 255, .3);
}

.aijella-loader-wordmark span {
  color: rgba(135, 174, 225, .62);
  font: 600 8px/1.2 Manrope, Arial, sans-serif;
  letter-spacing: .3em;
}

.aijella-loader-progress {
  position: relative;
  width: min(78vw, 360px);
  padding-top: 13px;
  display: flex;
  justify-content: space-between;
  color: rgba(128, 167, 215, .58);
  font: 600 8px/1 Manrope, Arial, sans-serif;
  letter-spacing: .18em;
}

.aijella-loader-progress::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(97, 157, 234, .18);
}

.aijella-loader-progress i {
  position: absolute;
  left: 0;
  top: -1px;
  width: 28%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #6eaeff 45%, #e3f1ff 72%, transparent);
  box-shadow: 0 0 12px rgba(63, 139, 255, .85);
  animation: aijella-loader-progress 1.45s cubic-bezier(.65, 0, .35, 1) infinite;
}

.aijella-loader-progress b { color: rgba(136, 185, 244, .82); font-weight: 600; }

html.aijella-locale-ready body > :not(.aijella-loader) {
  animation: aijella-locale-reveal .55s .12s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes aijella-loader-draw {
  0%, 12% { stroke-dashoffset: 1; opacity: .16; }
  58%, 78% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -1; opacity: .12; }
}

@keyframes aijella-loader-surface {
  0%, 28% { opacity: 0; }
  58%, 80% { opacity: .96; }
  100% { opacity: 0; }
}

@keyframes aijella-loader-stream {
  0% { stroke-dashoffset: 1; opacity: 0; }
  38%, 72% { opacity: .8; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes aijella-loader-apex {
  0%, 28%, 100% { opacity: .3; transform: translate(-50%, -50%) scale(.7); }
  58%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
}

@keyframes aijella-loader-spin { to { transform: rotate(360deg); } }
@keyframes aijella-loader-grid { to { background-position: 0 72px, 72px 0; } }
@keyframes aijella-loader-atmosphere { to { transform: rotate(360deg); } }
@keyframes aijella-loader-column { 50% { opacity: .45; transform: translateX(-50%) scaleX(1.35); } }
@keyframes aijella-loader-horizon { 0%, 100% { opacity: .1; transform: scaleX(.08); } 50% { opacity: .82; transform: scaleX(1); } }
@keyframes aijella-loader-progress { 0% { transform: translateX(-80%); } 100% { transform: translateX(340%); } }
@keyframes aijella-loader-exit {
  0% { opacity: 1; clip-path: inset(0 0 0 0); }
  62% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0); }
}
@keyframes aijella-locale-reveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

html.aijella-loader-static .aijella-loader *,
html.aijella-loader-static .aijella-loader::before,
html.aijella-loader-static .aijella-loader::after { animation: none !important; }
html.aijella-loader-static .mark-surface { opacity: 1; }
html.aijella-loader-static .mark-trace { stroke-dashoffset: 0; opacity: .72; }
html.aijella-loader-static .aijella-loader-streams path { stroke-dashoffset: 0; opacity: .4; }
html.aijella-loader-static .aijella-loader-apex { opacity: 1; }
html.aijella-loader-static.aijella-locale-ready .aijella-loader { display: none; }
html.aijella-loader-static.aijella-locale-ready body > :not(.aijella-loader) { animation: none !important; opacity: 1 !important; transform: none !important; }

@media (max-width: 640px) {
  .aijella-loader-stage { width: 88vw; gap: 15px; }
  .aijella-loader-emblem { width: min(68vw, 245px); }
  .aijella-loader-meta, .aijella-loader-progress { width: min(78vw, 330px); }
  .aijella-loader-meta span:last-child { max-width: 190px; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  .aijella-loader *, .aijella-loader::before, .aijella-loader::after { animation: none !important; }
  .mark-surface { opacity: 1; }
  .mark-trace { stroke-dashoffset: 0; opacity: .72; }
  .aijella-loader-streams path { stroke-dashoffset: 0; opacity: .4; }
  html.aijella-locale-ready .aijella-loader { display: none; }
  html.aijella-locale-ready body > :not(.aijella-loader) { animation: none; opacity: 1; transform: none; }
}
