"use client";

import { motion } from "framer-motion";

/**
 * Colour-reactive backdrop. Three blurred blobs tinted from --a-r/g/b, which
 * the artwork sets, so the page takes on the palette of whatever is on screen.
 *
 * Kept faint on purpose: at full strength the gradient competes with the album
 * art it is derived from, and the glass rows lose contrast against it.
 */
export function Aurora() {
  return (
    <>
      <div className="fixed inset-0 -z-20 overflow-hidden pointer-events-none">
        <motion.i
          className="absolute block rounded-full bg-accent opacity-30 blur-[110px]
                     w-[60vw] h-[60vw] -top-[22vw] -left-[12vw]"
          animate={{ x: ["0vw", "8vw", "0vw"], y: ["0vh", "6vh", "0vh"], scale: [1, 1.15, 1] }}
          transition={{ duration: 26, repeat: Infinity, ease: "easeInOut" }}
        />
        <motion.i
          className="absolute block rounded-full opacity-30 blur-[110px]
                     w-[46vw] h-[46vw] top-[18vh] -right-[14vw]
                     bg-[rgb(var(--a-r)_var(--a-g)_var(--a-b)/0.75)]"
          animate={{ x: ["0vw", "-7vw", "0vw"], y: ["0vh", "10vh", "0vh"], scale: [1, 0.88, 1] }}
          transition={{ duration: 32, repeat: Infinity, ease: "easeInOut" }}
        />
        {/* Channel-rotated so the palette has range rather than one flat wash,
            but faint — a full-strength complement fights the artwork. */}
        <motion.i
          className="absolute block rounded-full opacity-[0.14] blur-[110px]
                     w-[52vw] h-[52vw] -bottom-[24vw] left-[22vw]
                     bg-[rgb(var(--a-b)_var(--a-r)_var(--a-g)/0.7)]"
          animate={{ x: ["0vw", "5vw", "0vw"], y: ["0vh", "-8vh", "0vh"], scale: [1, 1.1, 1] }}
          transition={{ duration: 38, repeat: Infinity, ease: "easeInOut" }}
        />
      </div>
      <div className="grain fixed inset-0 -z-10 pointer-events-none opacity-[0.16]" />
    </>
  );
}