:root {
  color-scheme: dark;
  background: #071126;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  background:
    radial-gradient(circle at 50% 54%, rgba(104, 133, 187, 0.18), transparent 31%),
    #071126;
}

.scene,
#aurora,
.haze,
.grain {
  position: fixed;
  inset: 0;
}

.scene {
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100svh;
}

#aurora {
  width: 100%;
  height: 100%;
  z-index: -4;
}

.haze {
  z-index: -3;
  background:
    radial-gradient(ellipse at 50% 56%, rgba(247, 189, 132, 0.13) 0 8%, transparent 32%),
    radial-gradient(ellipse at 26% 42%, rgba(151, 78, 197, 0.11), transparent 35%),
    radial-gradient(ellipse at 76% 48%, rgba(42, 183, 187, 0.09), transparent 36%),
    linear-gradient(to bottom, rgba(2, 8, 22, 0.12), transparent 45%, rgba(1, 6, 19, 0.3));
  mix-blend-mode: screen;
  animation: breathe 14s ease-in-out infinite alternate;
}

.jar-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 4rem;
  aspect-ratio: 1;
  z-index: 2;
  animation: float 9s ease-in-out infinite;
  transform: translateZ(0);
}

.jar {
  position: relative;
  z-index: 2;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.2rem;
  line-height: 1;
  user-select: none;
  filter:
    drop-shadow(0 1.2rem 1.8rem rgba(0, 5, 20, 0.38))
    drop-shadow(0 0 2rem rgba(127, 210, 230, 0.2))
    saturate(0.88)
    brightness(1.04);
  transform: translateY(-1.5%);
}

.halo {
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 42% 48%, rgba(255, 207, 152, 0.58), transparent 22%),
    radial-gradient(circle, rgba(138, 206, 219, 0.35), rgba(129, 95, 207, 0.12) 46%, transparent 72%);
  filter: blur(1.2rem);
  opacity: 0.82;
  animation: halo 11s ease-in-out infinite alternate;
}

.reflection {
  position: absolute;
  top: 78%;
  width: 1.5rem;
  height: 0.35rem;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(100, 206, 220, 0.22), rgba(78, 48, 161, 0.08) 42%, transparent 72%);
  filter: blur(1rem);
  transform: scaleX(1.25);
}

.caustic {
  position: fixed;
  z-index: -2;
  width: 60vmax;
  height: 22vmax;
  left: 50%;
  top: 66%;
  border: 2px solid rgba(134, 218, 231, 0.09);
  border-radius: 50%;
  filter: blur(10px);
  transform: translate(-50%, -50%) rotate(-8deg);
  box-shadow:
    0 0 1.2rem rgba(107, 195, 213, 0.08),
    inset 0 0 2rem rgba(194, 154, 226, 0.05);
  animation: caustic 18s ease-in-out infinite alternate;
}

.caustic-two {
  width: 42vmax;
  height: 15vmax;
  top: 71%;
  opacity: 0.65;
  animation-delay: -8s;
  animation-duration: 23s;
}

.grain {
  z-index: 5;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");
}

@keyframes float {
  0%, 100% { transform: translate3d(0, 0.8%, 0) rotate(-0.35deg); }
  50% { transform: translate3d(0, -1.2%, 0) rotate(0.35deg); }
}

@keyframes breathe {
  from { opacity: 0.72; transform: scale(1.03) rotate(-1.5deg); }
  to { opacity: 1; transform: scale(1.09) rotate(1.5deg); }
}

@keyframes halo {
  from { transform: scale(0.94) rotate(-3deg); opacity: 0.7; }
  to { transform: scale(1.06) rotate(3deg); opacity: 0.9; }
}

@keyframes caustic {
  from { transform: translate(-50%, -50%) rotate(-10deg) scale(0.96); }
  to { transform: translate(-50%, -50%) rotate(7deg) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .jar-wrap,
  .halo,
  .haze,
  .caustic {
    animation: none;
  }
}