/* ─── Bubbles ─────────────────────────────────────── */
.bubbles {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.bubble {
  position: absolute;
  bottom: -20vh;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.5) 18%, rgba(255,255,255,0) 35%),
    radial-gradient(circle at 70% 75%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 25%),
    conic-gradient(from 200deg at 50% 50%,
      rgba(255,212,232,0.6),
      rgba(216,196,240,0.6),
      rgba(200,216,244,0.6),
      rgba(200,240,216,0.55),
      rgba(255,240,200,0.6),
      rgba(255,212,232,0.6));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.5),
    inset -4px -6px 12px rgba(190,150,230,0.2),
    0 0 14px rgba(255,255,255,0.35);
  opacity: 0.7;
  will-change: transform, opacity;
  animation: bubble-rise linear infinite;
}

.bubble > i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  animation: bubble-sway ease-in-out infinite alternate;
}

@keyframes bubble-rise {
  0%   { transform: translateY(0)        scale(1);   opacity: 0; }
  10%  {                                              opacity: var(--op, 0.7); }
  90%  {                                              opacity: var(--op, 0.7); }
  100% { transform: translateY(-115vh)   scale(1.05);opacity: 0; }
}
@keyframes bubble-sway {
  from { margin-left: -14px; }
  to   { margin-left:  14px; }
}

/* ─── Hero shimmer ────────────────────────────────── */
.hero-creature {
  animation: gentle-bob 6.5s ease-in-out infinite;
}
@keyframes gentle-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

body::before {
  /* extremely subtle hue drift on the page bg */
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: inherit;
  mix-blend-mode: overlay;
  opacity: 0.18;
  animation: hue-drift 80s ease-in-out infinite alternate;
}
@keyframes hue-drift {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(28deg); }
}

main, .nav, .foot { position: relative; z-index: 2; }

/* ─── Scroll reveals ──────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s ease, transform .9s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ─── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bubble, .bubble > i, .hero-creature, body::before { animation: none !important; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}