import type { Metadata, Viewport } from "next";
import { CloudModeProvider } from "@/components/cloud/cloud-mode-provider";
import { GradientBackdrop } from "@/components/site/gradient-backdrop";
import { ThemeProvider } from "@/components/theme/theme-provider";
import { ThemeScript } from "@/components/theme/theme-script";
import { HeroMount } from "@/components/webgl/hero-mount";
import { fontVariables } from "@/lib/fonts";
import { baseMetadata } from "@/lib/seo";
import "./globals.css";
export const metadata: Metadata = baseMetadata;
export const viewport: Viewport = {
themeColor: [
{ media: "(prefers-color-scheme: light)", color: "#edeceb" },
{ media: "(prefers-color-scheme: dark)", color: "#292623" },
],
};
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{/* Sets [data-theme] before paint to avoid a flash of the wrong mood. */}
{/* Wraps both the hero and the page: the model reads the mode
through the R3F Canvas (as Scene already reads the theme), and
the toggle that sets it lives in the header. */}
{/* Decorative background stack (behind everything). */}
{/* Interactive WebGL hero (fixed, pointer-transparent, z-0). */}
{children}
);
}