/*
  Lumozaic · animated Orb mark · Pearl
  Drop-in styles. Pair with lumozaic-mark.js.
  Usage: <div class="lz-mark" data-size="340"></div>
*/
@property --lz-a { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

.lz-mark {
  --lz-s: 340px;
  /* Pearl colourway: base + four lights */
  --lz-c1: #2E2650; --lz-c2: #FFC2A4; --lz-c3: #FF86BC; --lz-c4: #86ADFF; --lz-c5: #A6F2DA;
  position: relative; width: var(--lz-s); height: var(--lz-s); flex: 0 0 auto;
  animation: lz-flow 16s linear infinite;
}
@keyframes lz-flow { to { --lz-a: 360deg; } }

.lz-mark .lz-aura { position: absolute; inset: -16%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from var(--lz-a), var(--lz-c2), var(--lz-c3), var(--lz-c4), var(--lz-c5), var(--lz-c2));
  filter: blur(calc(var(--lz-s) * 0.12)); mix-blend-mode: screen; opacity: 0;
  animation: lz-aura-in 1.8s ease-out 1.9s forwards; }
@keyframes lz-aura-in { to { opacity: var(--lz-ao, 0.34); } }

.lz-mark .lz-halo { position: absolute; inset: 2%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 250, 244, 1) 0%, rgba(255, 236, 226, 0.85) 38%, rgba(255, 220, 230, 0) 70%);
  filter: blur(calc(var(--lz-s) * 0.03)); opacity: 0; animation: lz-halo 12s ease-in-out infinite; }
@keyframes lz-halo { 0%, 50%, 100% { opacity: 0.5; transform: scale(0.94); } 20%, 32%, 70%, 82% { opacity: var(--lz-ho, 1); transform: scale(1); } }

.lz-mark .lz-cam { position: absolute; inset: 0; perspective: calc(var(--lz-s) * 3.4); }
.lz-mark .lz-orb { position: absolute; inset: 0; transform-style: preserve-3d; animation: lz-rock 12s ease-in-out infinite; }
@keyframes lz-rock {
  0%, 100% { transform: rotateY(-36deg) rotateX(12deg); }
  20%, 32% { transform: rotateY(0deg) rotateX(0deg); }
  50% { transform: rotateY(36deg) rotateX(-12deg); }
  70%, 82% { transform: rotateY(0deg) rotateX(0deg); }
}

.lz-mark .lz-tw { position: absolute; transform-style: preserve-3d; animation: lz-fly 2.3s cubic-bezier(.16, .84, .24, 1) both; animation-delay: var(--lz-d); }
@keyframes lz-fly {
  0% { transform: translate3d(calc(var(--lz-s) * var(--lz-fx)), calc(var(--lz-s) * var(--lz-fy)), calc(var(--lz-s) * var(--lz-fz))) rotate3d(1, 1, 0, var(--lz-fr)); }
  100% { transform: none; }
}
.lz-mark .lz-tile { position: absolute; inset: 0; transform-style: preserve-3d; animation: lz-breathe 12s ease-in-out infinite; }
@keyframes lz-breathe {
  0%, 50%, 100% { transform: translateZ(calc(var(--lz-s) * var(--lz-z))); }
  20%, 32%, 70%, 82% { transform: translateZ(0px); }
}
@keyframes lz-fade-in { from { opacity: 0; } to { opacity: 1; } }

.lz-mark .lz-face { position: absolute; inset: 0; border-radius: calc(var(--lz-s) * 0.014);
  animation: lz-fade-in 1.2s ease-out both; animation-delay: var(--lz-d);
  clip-path: circle(calc(var(--lz-s) * 0.5) at var(--lz-cx) var(--lz-cy));
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.35) 12%, rgba(255, 255, 255, 0) 30%),
    radial-gradient(circle closest-side at 50% 50%, rgba(12, 10, 24, 0) 56%, rgba(12, 10, 24, var(--lz-rim, 0.38)) 100%),
    radial-gradient(circle at 50% 54%, rgba(255, 244, 236, 0.42) 0%, rgba(255, 244, 236, 0) 40%),
    radial-gradient(circle at calc(50% + 26% * cos(var(--lz-a))) calc(50% + 26% * sin(var(--lz-a))), var(--lz-c2) 0%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(circle at calc(50% + 28% * cos(var(--lz-a) + 120deg)) calc(50% + 24% * sin(var(--lz-a) + 120deg)), var(--lz-c3) 0%, rgba(255, 255, 255, 0) 54%),
    radial-gradient(circle at calc(50% + 24% * cos(var(--lz-a) + 240deg)) calc(50% + 28% * sin(var(--lz-a) + 240deg)), var(--lz-c4) 0%, rgba(255, 255, 255, 0) 54%),
    radial-gradient(circle at calc(50% - 18% * cos(var(--lz-a) * 2)) calc(50% + 18% * sin(var(--lz-a) * 2)), var(--lz-c5) 0%, rgba(255, 255, 255, 0) 46%),
    var(--lz-c1);
  background-size: var(--lz-s) var(--lz-s);
  background-position: var(--lz-bx) var(--lz-by);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.lz-mark .lz-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.12) 100%); }

/* frozen still (data-t) */
.lz-mark.lz-paused, .lz-mark.lz-paused * { animation-play-state: paused !important; }

/* on light backgrounds, add class lz-on-light to the mark or any parent */
.lz-on-light .lz-mark, .lz-mark.lz-on-light { --lz-ao: 0.55; --lz-ho: 0.55; --lz-rim: 0.3; }
.lz-on-light .lz-mark .lz-aura, .lz-mark.lz-on-light .lz-aura { mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce) {
  .lz-mark, .lz-mark * { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; }
}