@backbay/glia-three 0.2.0-alpha.3 → 0.2.0-alpha.4

package/dist/chunk-HFSDW5IV.js

@@ -0,0 +1,1861 @@
+// src/environment/WeatherLayer/WeatherLayer.tsx
+import * as React2 from "react";
+import { useReducedMotion } from "framer-motion";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/environment/shared/types.ts
+var PERFORMANCE_PRESETS = {
+  high: { tier: "high", maxParticles: 2e3, useShaders: true, targetFPS: 60 },
+  medium: { tier: "medium", maxParticles: 800, useShaders: true, targetFPS: 60 },
+  low: { tier: "low", maxParticles: 300, useShaders: false, targetFPS: 30 },
+  minimal: { tier: "minimal", maxParticles: 0, useShaders: false, targetFPS: 0 }
+};
+
+// src/environment/shared/performance.ts
+function detectPerformanceTier() {
+  if (typeof window === "undefined") return "medium";
+  if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+    return "minimal";
+  }
+  const nav = navigator;
+  if (nav.deviceMemory && nav.deviceMemory < 4) {
+    return "low";
+  }
+  if (navigator.hardwareConcurrency && navigator.hardwareConcurrency < 4) {
+    return "low";
+  }
+  const isMobile = /Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+  if (isMobile) return "low";
+  return "medium";
+}
+function getPerformanceConfig(tier) {
+  const detected = tier ?? detectPerformanceTier();
+  return PERFORMANCE_PRESETS[detected];
+}
+
+// src/environment/WeatherLayer/types.ts
+var WEATHER_CONFIGS = {
+  rain: {
+    baseCount: 200,
+    sizeRange: [1, 3],
+    opacityRange: [0.4, 0.7],
+    speedRange: [15, 25],
+    motionStyle: "fall",
+    shape: "streak",
+    colors: ["#a0c4ff", "#bde0fe"]
+  },
+  snow: {
+    baseCount: 150,
+    sizeRange: [2, 6],
+    opacityRange: [0.6, 0.9],
+    speedRange: [1, 3],
+    motionStyle: "drift",
+    shape: "circle",
+    colors: ["#ffffff", "#e8f4ff"]
+  },
+  dust: {
+    baseCount: 80,
+    sizeRange: [1, 3],
+    opacityRange: [0.2, 0.4],
+    speedRange: [0.5, 2],
+    motionStyle: "drift",
+    shape: "circle",
+    colors: ["#d4a574", "#c9b896"]
+  },
+  leaves: {
+    baseCount: 30,
+    sizeRange: [6, 12],
+    opacityRange: [0.7, 1],
+    speedRange: [2, 5],
+    motionStyle: "drift",
+    shape: "leaf",
+    colors: ["#d4a373", "#e07b39", "#bc6c25"]
+  },
+  embers: {
+    baseCount: 60,
+    sizeRange: [2, 5],
+    opacityRange: [0.5, 0.8],
+    speedRange: [2, 5],
+    motionStyle: "rise",
+    shape: "glow",
+    colors: ["#ff6b35", "#f7931e", "#ffcc00"]
+  },
+  fireflies: {
+    baseCount: 40,
+    sizeRange: [3, 6],
+    opacityRange: [0.3, 1],
+    speedRange: [0.3, 1],
+    motionStyle: "drift",
+    shape: "glow",
+    colors: ["#90ee90", "#adff2f", "#7fff00"]
+  },
+  ash: {
+    baseCount: 100,
+    sizeRange: [2, 5],
+    opacityRange: [0.3, 0.6],
+    speedRange: [1, 3],
+    motionStyle: "fall",
+    shape: "circle",
+    colors: ["#4a4a4a", "#6b6b6b", "#8b8b8b"]
+  },
+  sakura: {
+    baseCount: 50,
+    sizeRange: [6, 12],
+    opacityRange: [0.6, 0.9],
+    speedRange: [1, 3],
+    motionStyle: "drift",
+    shape: "petal",
+    colors: ["#ffb7c5", "#ff69b4", "#ffc0cb"]
+  },
+  sparks: {
+    baseCount: 40,
+    sizeRange: [1, 3],
+    opacityRange: [0.7, 1],
+    speedRange: [8, 15],
+    motionStyle: "erratic",
+    shape: "glow",
+    colors: ["#ffd700", "#ffffff", "#fffacd"]
+  },
+  spores: {
+    baseCount: 60,
+    sizeRange: [4, 8],
+    opacityRange: [0.4, 0.7],
+    speedRange: [0.5, 1.5],
+    motionStyle: "rise",
+    shape: "glow",
+    colors: ["#9370db", "#8a2be2", "#da70d6"]
+  }
+};
+
+// src/environment/WeatherLayer/particles.ts
+function smoothstep(edge0, edge1, x) {
+  const t = Math.max(0, Math.min(1, (x - edge0) / (edge1 - edge0)));
+  return t * t * (3 - 2 * t);
+}
+function getSpawnPosition(bounds, velocity) {
+  const margin = 40;
+  if (Math.abs(velocity.x) > Math.abs(velocity.y)) {
+    return {
+      x: velocity.x > 0 ? -margin : bounds.width + margin,
+      y: Math.random() * bounds.height
+    };
+  }
+  return {
+    x: Math.random() * bounds.width,
+    y: velocity.y > 0 ? -margin : bounds.height + margin
+  };
+}
+function getLifeRangeMs(type) {
+  switch (type) {
+    case "rain":
+      return [900, 2200];
+    case "snow":
+      return [3200, 7200];
+    case "dust":
+      return [5e3, 11e3];
+    case "leaves":
+      return [6e3, 14e3];
+    case "embers":
+      return [2600, 6500];
+    case "fireflies":
+      return [4500, 9e3];
+    case "ash":
+      return [4500, 1e4];
+    case "sakura":
+      return [6500, 15e3];
+    case "sparks":
+      return [450, 1200];
+    case "spores":
+      return [5e3, 12e3];
+    default:
+      return [3e3, 8e3];
+  }
+}
+function createParticle(id, type, config, wind, bounds, stylePreset = "ui", colorsOverride) {
+  const [minSize, maxSize] = config.sizeRange;
+  const [minOpacity, maxOpacity] = config.opacityRange;
+  const [minSpeed, maxSpeed] = config.speedRange;
+  const speed = minSpeed + Math.random() * (maxSpeed - minSpeed);
+  let vx = wind.x * speed;
+  let vy = wind.y * speed;
+  const depth = stylePreset === "cinematic" ? Math.sqrt(Math.random()) : 0;
+  const sizeScale = stylePreset === "cinematic" ? 0.55 + (1 - depth) * 0.45 : 1;
+  const speedScale = stylePreset === "cinematic" ? 0.6 + (1 - depth) * 0.4 : 1;
+  const opacityScale = stylePreset === "cinematic" ? 0.45 + (1 - depth) * 0.55 : 1;
+  switch (config.motionStyle) {
+    case "fall":
+      vy = speed;
+      vx = wind.x * 2 + (Math.random() - 0.5) * 0.5;
+      break;
+    case "rise":
+      vy = -speed;
+      vx = wind.x + (Math.random() - 0.5) * 2;
+      break;
+    case "drift": {
+      const allowUpdraft = type === "dust" || type === "fireflies";
+      const verticalSign = allowUpdraft ? Math.random() > 0.5 ? 1 : -1 : 1;
+      const driftFallScale = type === "snow" ? 0.35 : type === "leaves" ? 0.55 : type === "sakura" ? 0.45 : 0.3;
+      vy = speed * driftFallScale * verticalSign;
+      vx = wind.x + (Math.random() - 0.5) * 2;
+      break;
+    }
+    case "erratic":
+      vy = (Math.random() - 0.3) * speed;
+      vx = (Math.random() - 0.5) * speed * 2;
+      break;
+  }
+  vx *= speedScale;
+  vy *= speedScale;
+  const [minLife, maxLife] = getLifeRangeMs(type);
+  const maxLifeMs = minLife + Math.random() * (maxLife - minLife);
+  const palette = colorsOverride && colorsOverride.length > 0 ? colorsOverride : config.colors;
+  const color = palette.length > 0 ? palette[Math.floor(Math.random() * palette.length)] : "#ffffff";
+  const baseOpacity = (minOpacity + Math.random() * (maxOpacity - minOpacity)) * opacityScale;
+  const baseSize = (minSize + Math.random() * (maxSize - minSize)) * sizeScale;
+  const twinkleAmountBase = type === "fireflies" ? 0.55 : type === "sparks" ? 0.35 : type === "embers" ? 0.18 : type === "spores" ? 0.12 : 0;
+  const twinkleAmount = stylePreset === "cinematic" ? twinkleAmountBase * 0.65 : twinkleAmountBase;
+  const twinkleSpeed = type === "sparks" ? 0.03 : type === "fireflies" ? 8e-3 : type === "embers" ? 0.01 : type === "spores" ? 7e-3 : 0;
+  const driftPhase = Math.random() * Math.PI * 2;
+  const twinklePhase = Math.random() * Math.PI * 2;
+  const velocity = { x: vx, y: vy };
+  const spawn = getSpawnPosition(bounds, velocity);
+  const rotation = config.shape === "streak" ? Math.atan2(velocity.y, velocity.x) * 180 / Math.PI - 90 : Math.random() * 360;
+  const rotationSpeed = config.shape === "leaf" || config.shape === "petal" ? (stylePreset === "cinematic" ? 0.03 : 0.06) * (Math.random() > 0.5 ? 1 : -1) : 0;
+  return {
+    id,
+    x: spawn.x,
+    y: spawn.y,
+    size: baseSize,
+    opacity: baseOpacity,
+    rotation,
+    rotationSpeed,
+    velocity,
+    life: 0,
+    maxLife: maxLifeMs,
+    color,
+    baseOpacity,
+    depth,
+    driftPhase,
+    twinklePhase,
+    twinkleSpeed,
+    twinkleAmount
+  };
+}
+function updateParticle(particle, config, deltaTime) {
+  const newLife = particle.life + deltaTime;
+  const lifeRatio = newLife / particle.maxLife;
+  const fadeIn = smoothstep(0, 0.08, lifeRatio);
+  const fadeOut = 1 - smoothstep(0.82, 1, lifeRatio);
+  let opacity = particle.baseOpacity * fadeIn * fadeOut;
+  if (particle.twinkleAmount > 0 && particle.twinkleSpeed > 0) {
+    const tw = Math.sin(newLife * particle.twinkleSpeed + particle.twinklePhase);
+    opacity *= Math.max(0.15, 1 + tw * particle.twinkleAmount * 0.5);
+  }
+  let vx = particle.velocity.x;
+  let vy = particle.velocity.y;
+  if (config.motionStyle === "drift") {
+    vx += Math.sin(newLife * 2e-3 + particle.driftPhase) * 0.18;
+    vy += Math.cos(newLife * 16e-4 + particle.driftPhase) * 0.07;
+  } else if (config.motionStyle === "erratic") {
+    vx += Math.sin(newLife * 0.01 + particle.driftPhase) * 0.25;
+    vy += Math.cos(newLife * 0.012 + particle.driftPhase) * 0.18;
+  }
+  return {
+    ...particle,
+    x: particle.x + vx * deltaTime * 0.1,
+    y: particle.y + vy * deltaTime * 0.1,
+    rotation: particle.rotation + particle.rotationSpeed * deltaTime,
+    life: newLife,
+    opacity
+  };
+}
+function getParticleCount(type, intensity, maxParticles, stylePreset = "ui") {
+  const config = WEATHER_CONFIGS[type];
+  const styleScale = stylePreset === "cinematic" ? type === "snow" ? 1.8 : type === "leaves" ? 1.4 : 0.7 : 1;
+  const desired = Math.floor(config.baseCount * intensity * styleScale);
+  return Math.min(desired, maxParticles);
+}
+
+// src/environment/WeatherLayer/cinematicCanvas.tsx
+import * as React from "react";
+
+// src/environment/WeatherLayer/leafPresets.ts
+var AUTUMN_LEAF_COLOR_PRESETS = {
+  "early-autumn": ["#6b8f3f", "#a9b84a", "#d8c35a", "#e5b04a", "#c97a2c"],
+  "peak-autumn": ["#b63a2b", "#d86b2c", "#e5a93a", "#c56b2b", "#7a3e1b"],
+  "late-autumn": ["#5a3d2b", "#7a563e", "#9a6f4b", "#b68a5e", "#8a6b4f"],
+  golden: ["#f2d27a", "#e9c15c", "#d8a93b", "#b9872a", "#e8b04a"],
+  rust: ["#a34a1f", "#c2602d", "#d6782f", "#e07b39", "#bc6c25"],
+  "maple-red": ["#7a1f1f", "#a02b2b", "#c0302b", "#d44a2c", "#e36a3a"],
+  muted: ["#d4a373", "#c08a5a", "#a66a3f", "#8c5a36", "#e3b07a"]
+};
+
+// src/environment/WeatherLayer/colors.ts
+function resolveWeatherColors({
+  type,
+  configColors,
+  colors,
+  leafColorPreset
+}) {
+  if (colors && colors.length > 0) return colors;
+  if (type === "leaves" && leafColorPreset) {
+    return AUTUMN_LEAF_COLOR_PRESETS[leafColorPreset] ?? configColors;
+  }
+  return configColors;
+}
+function colorsKey(colors) {
+  if (!colors || colors.length === 0) return "";
+  return colors.join("|");
+}
+
+// src/environment/WeatherLayer/cinematicCanvas.tsx
+import { jsx } from "react/jsx-runtime";
+function clamp(min, value, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function parseHexColor(color) {
+  const hex = color.trim();
+  if (!hex.startsWith("#")) return null;
+  const raw = hex.slice(1);
+  if (raw.length === 3) {
+    const r = Number.parseInt(raw[0] + raw[0], 16);
+    const g = Number.parseInt(raw[1] + raw[1], 16);
+    const b = Number.parseInt(raw[2] + raw[2], 16);
+    return { r, g, b };
+  }
+  if (raw.length === 6) {
+    const r = Number.parseInt(raw.slice(0, 2), 16);
+    const g = Number.parseInt(raw.slice(2, 4), 16);
+    const b = Number.parseInt(raw.slice(4, 6), 16);
+    return { r, g, b };
+  }
+  return null;
+}
+function mix(a, b, t) {
+  const tt = clamp(0, t, 1);
+  return {
+    r: Math.round(a.r + (b.r - a.r) * tt),
+    g: Math.round(a.g + (b.g - a.g) * tt),
+    b: Math.round(a.b + (b.b - a.b) * tt)
+  };
+}
+function rgba(c, a) {
+  return `rgba(${c.r}, ${c.g}, ${c.b}, ${clamp(0, a, 1)})`;
+}
+function getSeededNoise(t, phase) {
+  return Math.sin(t * 7e-4 + phase) * 0.6 + Math.sin(t * 13e-4 + phase * 1.7) * 0.3 + Math.sin(t * 21e-4 + phase * 2.3) * 0.1;
+}
+var SNOW_SPRITE_VARIANTS = 4;
+var LEAF_SPRITE_VARIANTS = 11;
+function makeSnowSprite(color, variant) {
+  const size = 64;
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return canvas;
+  ctx.clearRect(0, 0, size, size);
+  const v = (variant % SNOW_SPRITE_VARIANTS + SNOW_SPRITE_VARIANTS) % SNOW_SPRITE_VARIANTS;
+  const cx = size / 2;
+  const cy = size / 2;
+  const r = size * 0.46;
+  const highlightX = cx - r * (0.16 + v * 0.04);
+  const highlightY = cy - r * (0.18 - v * 0.03);
+  const softness = v === 3 ? 0.62 : v === 2 ? 0.56 : v === 1 ? 0.5 : 0.46;
+  const g = ctx.createRadialGradient(cx - r * 0.1, cy - r * 0.1, 0, cx, cy, r);
+  g.addColorStop(0, "rgba(255,255,255,0.95)");
+  g.addColorStop(0.45, `rgba(255,255,255,${0.38 + v * 0.02})`);
+  g.addColorStop(1, "rgba(255,255,255,0)");
+  ctx.fillStyle = g;
+  ctx.beginPath();
+  ctx.arc(cx, cy, r, 0, Math.PI * 2);
+  ctx.fill();
+  const h = ctx.createRadialGradient(highlightX, highlightY, 0, highlightX, highlightY, r * softness);
+  h.addColorStop(0, `rgba(255,255,255,${0.26 + v * 0.05})`);
+  h.addColorStop(1, "rgba(255,255,255,0)");
+  ctx.fillStyle = h;
+  ctx.beginPath();
+  ctx.arc(cx, cy, r, 0, Math.PI * 2);
+  ctx.fill();
+  ctx.globalCompositeOperation = "source-in";
+  ctx.fillStyle = color;
+  ctx.fillRect(0, 0, size, size);
+  ctx.globalCompositeOperation = "source-over";
+  const s = ctx.createRadialGradient(highlightX, highlightY, 0, highlightX, highlightY, r * 0.34);
+  s.addColorStop(0, `rgba(255,255,255,${0.18 + v * 0.04})`);
+  s.addColorStop(1, "rgba(255,255,255,0)");
+  ctx.fillStyle = s;
+  ctx.beginPath();
+  ctx.arc(cx, cy, r, 0, Math.PI * 2);
+  ctx.fill();
+  return canvas;
+}
+function makeLeafSprite(color, variant) {
+  const size = 160;
+  const canvas = document.createElement("canvas");
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return canvas;
+  ctx.clearRect(0, 0, size, size);
+  const base = parseHexColor(color) ?? { r: 180, g: 120, b: 70 };
+  const dark = mix(base, { r: 0, g: 0, b: 0 }, 0.35);
+  const light = mix(base, { r: 255, g: 255, b: 255 }, 0.25);
+  const rim = mix(base, { r: 0, g: 0, b: 0 }, 0.2);
+  const cx = size / 2;
+  const cy = size / 2 - 4;
+  const shape = (variant % LEAF_SPRITE_VARIANTS + LEAF_SPRITE_VARIANTS) % LEAF_SPRITE_VARIANTS;
+  const drawRadialPath = (radii, rx, ry) => {
+    const pts = radii.map((r, i) => {
+      const a = -Math.PI / 2 + i / radii.length * Math.PI * 2;
+      return {
+        x: cx + Math.cos(a) * rx * r,
+        y: cy + Math.sin(a) * ry * r
+      };
+    });
+    const mid = (a, b) => ({
+      x: (a.x + b.x) / 2,
+      y: (a.y + b.y) / 2
+    });
+    ctx.beginPath();
+    const start = mid(pts[pts.length - 1], pts[0]);
+    ctx.moveTo(start.x, start.y);
+    for (let i = 0; i < pts.length; i++) {
+      const p0 = pts[i];
+      const p1 = pts[(i + 1) % pts.length];
+      const m = mid(p0, p1);
+      ctx.quadraticCurveTo(p0.x, p0.y, m.x, m.y);
+    }
+    ctx.closePath();
+  };
+  let w = 56;
+  let h = 78;
+  let skew = 0;
+  let veinStyle = "midrib";
+  let carveNotch = false;
+  let drawKind = "ovate";
+  let radialRadii = null;
+  switch (shape) {
+    case 0:
+      w = 52;
+      h = 78;
+      skew = -0.04;
+      drawKind = "ovate";
+      break;
+    case 1:
+      w = 66;
+      h = 74;
+      drawKind = "radial";
+      radialRadii = [1, 0.58, 0.96, 0.52, 0.92, 0.6, 0.86, 0.62, 0.96, 0.58];
+      break;
+    case 2:
+      w = 60;
+      h = 80;
+      drawKind = "radial";
+      radialRadii = [1, 0.82, 0.95, 0.84, 0.92, 0.86, 0.9, 0.86, 0.92, 0.84, 0.95, 0.82];
+      break;
+    case 3:
+      w = 74;
+      h = 70;
+      veinStyle = "fan";
+      carveNotch = true;
+      drawKind = "ginkgo";
+      break;
+    case 4:
+      w = 60;
+      h = 78;
+      drawKind = "heart";
+      break;
+    case 5:
+      w = 34;
+      h = 80;
+      skew = 0.08;
+      drawKind = "willow";
+      break;
+    case 6:
+      w = 54;
+      h = 76;
+      drawKind = "deltoid";
+      break;
+    case 7:
+      w = 74;
+      h = 78;
+      drawKind = "radial";
+      radialRadii = [1, 0.74, 0.96, 0.72, 0.92, 0.72, 0.96, 0.74, 1, 0.74];
+      break;
+    case 8:
+      w = 50;
+      h = 74;
+      skew = 0.02;
+      drawKind = "ovate";
+      break;
+    case 9:
+      w = 66;
+      h = 74;
+      drawKind = "heart";
+      break;
+    case 10:
+      w = 56;
+      h = 80;
+      drawKind = "radial";
+      radialRadii = [1, 0.92, 0.99, 0.91, 0.98, 0.9, 0.97, 0.9, 0.98, 0.91, 0.99, 0.92];
+      break;
+    default:
+      w = 52;
+      h = 78;
+      skew = -0.04;
+      drawKind = "ovate";
+      break;
+  }
+  const drawLeafPath = () => {
+    switch (drawKind) {
+      case "ovate":
+        ctx.beginPath();
+        ctx.moveTo(cx, cy - h);
+        ctx.bezierCurveTo(cx + w, cy - h * 0.55, cx + w * (1 - skew), cy + h * 0.55, cx, cy + h);
+        ctx.bezierCurveTo(cx - w * (1 + skew), cy + h * 0.55, cx - w, cy - h * 0.55, cx, cy - h);
+        ctx.closePath();
+        return;
+      case "radial":
+        drawRadialPath(radialRadii, w, h);
+        return;
+      case "ginkgo":
+        ctx.beginPath();
+        ctx.moveTo(cx, cy + h * 0.78);
+        ctx.bezierCurveTo(
+          cx + w * 0.55,
+          cy + h * 0.55,
+          cx + w * 1.05,
+          cy + h * 0.1,
+          cx + w * 0.92,
+          cy - h * 0.12
+        );
+        ctx.quadraticCurveTo(cx + w * 0.5, cy - h * 1.02, cx, cy - h * 0.88);
+        ctx.quadraticCurveTo(cx - w * 0.5, cy - h * 1.02, cx - w * 0.92, cy - h * 0.12);
+        ctx.bezierCurveTo(
+          cx - w * 1.05,
+          cy + h * 0.1,
+          cx - w * 0.55,
+          cy + h * 0.55,
+          cx,
+          cy + h * 0.78
+        );
+        ctx.closePath();
+        return;
+      case "heart":
+        ctx.beginPath();
+        ctx.moveTo(cx, cy + h);
+        ctx.bezierCurveTo(cx + w * 0.95, cy + h * 0.45, cx + w, cy + h * 0.05, cx + w * 0.62, cy - h * 0.38);
+        ctx.bezierCurveTo(cx + w * 0.25, cy - h * 0.78, cx, cy - h * 0.62, cx, cy - h * 0.48);
+        ctx.bezierCurveTo(cx, cy - h * 0.62, cx - w * 0.25, cy - h * 0.78, cx - w * 0.62, cy - h * 0.38);
+        ctx.bezierCurveTo(cx - w, cy + h * 0.05, cx - w * 0.95, cy + h * 0.45, cx, cy + h);
+        ctx.closePath();
+        return;
+      case "deltoid":
+        ctx.beginPath();
+        ctx.moveTo(cx, cy - h);
+        ctx.quadraticCurveTo(cx + w * 1.05, cy - h * 0.15, cx + w * 0.36, cy + h);
+        ctx.quadraticCurveTo(cx, cy + h * 0.78, cx - w * 0.36, cy + h);
+        ctx.quadraticCurveTo(cx - w * 1.05, cy - h * 0.15, cx, cy - h);
+        ctx.closePath();
+        return;
+      case "willow":
+        ctx.beginPath();
+        ctx.moveTo(cx, cy - h);
+        ctx.bezierCurveTo(cx + w, cy - h * 0.35, cx + w * (1 - skew), cy + h * 0.55, cx, cy + h);
+        ctx.bezierCurveTo(cx - w * (1 + skew), cy + h * 0.55, cx - w, cy - h * 0.35, cx, cy - h);
+        ctx.closePath();
+        return;
+    }
+  };
+  ctx.save();
+  ctx.translate(2, 4);
+  drawLeafPath();
+  ctx.fillStyle = "rgba(0,0,0,0.22)";
+  ctx.fill();
+  ctx.restore();
+  drawLeafPath();
+  const grad = ctx.createLinearGradient(cx - w, cy - h, cx + w, cy + h);
+  grad.addColorStop(0, rgba(dark, 0.95));
+  grad.addColorStop(0.45, rgba(base, 0.95));
+  grad.addColorStop(1, rgba(light, 0.95));
+  ctx.fillStyle = grad;
+  ctx.fill();
+  drawLeafPath();
+  ctx.strokeStyle = rgba(rim, 0.55);
+  ctx.lineWidth = 2;
+  ctx.stroke();
+  ctx.save();
+  ctx.strokeStyle = rgba(dark, 0.5);
+  ctx.lineWidth = 3;
+  ctx.lineCap = "round";
+  ctx.beginPath();
+  ctx.moveTo(cx, cy + h * 0.95);
+  ctx.quadraticCurveTo(cx + w * 0.18, cy + h * 1.08, cx + w * 0.1, cy + h * 1.22);
+  ctx.stroke();
+  ctx.restore();
+  ctx.save();
+  drawLeafPath();
+  ctx.clip();
+  ctx.fillStyle = rgba(mix(dark, { r: 0, g: 0, b: 0 }, 0.1), 0.18);
+  for (let i = 0; i < 14; i++) {
+    const px = cx + (Math.random() - 0.5) * w * 1.5;
+    const py = cy + (Math.random() - 0.25) * h * 1.4;
+    const pr = 1.2 + Math.random() * 3.8;
+    ctx.globalAlpha = 0.06 + Math.random() * 0.08;
+    ctx.beginPath();
+    ctx.arc(px, py, pr, 0, Math.PI * 2);
+    ctx.fill();
+  }
+  ctx.globalAlpha = 0.45;
+  ctx.strokeStyle = rgba(mix(base, { r: 255, g: 255, b: 255 }, 0.6), 0.55);
+  ctx.lineWidth = 1.15;
+  if (veinStyle === "fan") {
+    const y0 = cy + h * 0.55;
+    for (let i = -7; i <= 7; i++) {
+      const t = i / 7;
+      const x1 = cx + t * w * 0.82;
+      const y1 = cy - h * 0.86 + Math.abs(t) * h * 0.18;
+      ctx.globalAlpha = 0.1 + (1 - Math.abs(t)) * 0.12;
+      ctx.beginPath();
+      ctx.moveTo(cx, y0);
+      ctx.quadraticCurveTo(cx + t * w * 0.25, cy - h * 0.1, x1, y1);
+      ctx.stroke();
+    }
+  } else {
+    ctx.globalAlpha = 0.34;
+    ctx.beginPath();
+    ctx.moveTo(cx, cy + h * 0.9);
+    ctx.quadraticCurveTo(cx + w * 0.05, cy, cx, cy - h * 0.9);
+    ctx.stroke();
+    const veinCount = shape === 5 ? 4 : 6;
+    for (let i = 0; i < veinCount; i++) {
+      const t = (i + 1) / (veinCount + 1);
+      const y = cy + h * 0.78 - t * h * 1.35;
+      const veinW = w * (0.12 + t * 0.6);
+      ctx.globalAlpha = 0.12;
+      ctx.beginPath();
+      ctx.moveTo(cx, y);
+      ctx.quadraticCurveTo(cx + veinW, y + h * 0.08, cx + veinW * 0.9, y + h * 0.22);
+      ctx.stroke();
+      ctx.beginPath();
+      ctx.moveTo(cx, y);
+      ctx.quadraticCurveTo(cx - veinW, y + h * 0.08, cx - veinW * 0.9, y + h * 0.22);
+      ctx.stroke();
+    }
+  }
+  ctx.restore();
+  if (carveNotch) {
+    ctx.save();
+    ctx.globalCompositeOperation = "destination-out";
+    ctx.beginPath();
+    ctx.arc(cx, cy - h * 0.78, w * 0.12, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.restore();
+  }
+  return canvas;
+}
+function getSprite(cache, key, build) {
+  const existing = cache.get(key);
+  if (existing) return existing;
+  const created = build();
+  cache.set(key, created);
+  return created;
+}
+function createSnowParticles(count, config, bounds, options) {
+  const particles = [];
+  const palette = options?.colorsOverride && options.colorsOverride.length > 0 ? options.colorsOverride : config.colors;
+  for (let i = 0; i < count; i++) {
+    const z = Math.pow(Math.random(), 0.55);
+    let size = 1.1 + (1 - z) * 4.4 + Math.random() * 0.8;
+    const speed = 16 + (1 - z) * 68 + Math.random() * 12;
+    const driftAmp = 6 + (1 - z) * 24 + Math.random() * 10;
+    const driftFreq = 0.7 + Math.random() * 1.6;
+    const alpha = 0.24 + (1 - z) * 0.56 + Math.random() * 0.1;
+    const spriteIndex = Math.floor(Math.random() * SNOW_SPRITE_VARIANTS);
+    if (z < 0.22 && Math.random() < 0.06) {
+      size *= 1.8;
+    }
+    const spriteColor = options?.colorOverride ?? (palette.length > 0 ? palette[Math.floor(Math.random() * palette.length)] : "#ffffff");
+    particles.push({
+      x: Math.random() * bounds.width,
+      y: Math.random() * bounds.height,
+      z,
+      speed,
+      driftAmp,
+      driftFreq,
+      phase: Math.random() * Math.PI * 2,
+      spriteColor,
+      spriteIndex,
+      alpha,
+      size
+    });
+  }
+  return particles;
+}
+function createLeafParticles(count, config, bounds, options) {
+  const particles = [];
+  const palette = options?.colorsOverride && options.colorsOverride.length > 0 ? options.colorsOverride : config.colors;
+  for (let i = 0; i < count; i++) {
+    const z = Math.pow(Math.random(), 0.6);
+    const size = 6.5 + (1 - z) * 13.5 + Math.random() * 2.2;
+    const speed = 18 + (1 - z) * 48 + Math.random() * 9;
+    const alpha = 0.55 + (1 - z) * 0.35;
+    const rotation = Math.random() * Math.PI * 2;
+    const rotationSpeed = (Math.random() * 0.9 + 0.4) * (Math.random() > 0.5 ? 1 : -1);
+    const flutterSpeed = 1.2 + Math.random() * 1.6;
+    const windScale = 0.4 + Math.random() * 0.9;
+    const spriteColor = options?.colorOverride ?? (palette.length > 0 ? palette[Math.floor(Math.random() * palette.length)] : "#d4a373");
+    const spriteIndex = Math.floor(Math.random() * LEAF_SPRITE_VARIANTS);
+    particles.push({
+      x: Math.random() * bounds.width,
+      y: Math.random() * bounds.height,
+      z,
+      speed,
+      windScale,
+      phase: Math.random() * Math.PI * 2,
+      rotation,
+      rotationSpeed,
+      flutterPhase: Math.random() * Math.PI * 2,
+      flutterSpeed,
+      spriteColor,
+      spriteIndex,
+      alpha,
+      size
+    });
+  }
+  return particles;
+}
+function updateSnow(particles, dtSec, tMs, bounds, wind) {
+  const margin = 50;
+  for (const p of particles) {
+    const turb = getSeededNoise(tMs, p.phase);
+    const vx = wind.x * (20 + (1 - p.z) * 35) + turb * p.driftAmp * 0.9;
+    const vy = p.speed + wind.y * 10 + turb * 8;
+    p.x += vx * dtSec;
+    p.y += vy * dtSec;
+    p.x += Math.sin(tMs * 1e-3 * p.driftFreq + p.phase) * p.driftAmp * dtSec * 1.2;
+    if (p.y > bounds.height + margin) {
+      p.y = -margin - Math.random() * 40;
+      p.x = Math.random() * bounds.width;
+    }
+    if (p.x < -margin) p.x = bounds.width + margin;
+    if (p.x > bounds.width + margin) p.x = -margin;
+  }
+}
+function updateLeaves(particles, dtSec, tMs, bounds, wind) {
+  const margin = 80;
+  for (const p of particles) {
+    const turb = getSeededNoise(tMs, p.phase);
+    const sway = Math.sin(tMs * 12e-4 + p.phase) * (14 + p.z * 18);
+    const vx = wind.x * (28 + (1 - p.z) * 40) * p.windScale + turb * 22 + sway;
+    const vy = p.speed + wind.y * 10 + Math.cos(tMs * 1e-3 + p.phase) * 10;
+    p.x += vx * dtSec;
+    p.y += vy * dtSec;
+    p.rotation += (p.rotationSpeed + turb * 0.6) * dtSec;
+    if (p.y > bounds.height + margin) {
+      p.y = -margin - Math.random() * 80;
+      p.x = Math.random() * bounds.width;
+    }
+    if (p.x < -margin) p.x = bounds.width + margin;
+    if (p.x > bounds.width + margin) p.x = -margin;
+  }
+}
+function drawSnow(ctx, particles, opacity, spriteCache) {
+  for (const p of particles) {
+    const sprite = getSprite(
+      spriteCache,
+      `snow:${p.spriteColor}:${p.spriteIndex}`,
+      () => makeSnowSprite(p.spriteColor, p.spriteIndex)
+    );
+    const alpha = clamp(0, p.alpha * opacity, 1);
+    ctx.globalAlpha = alpha;
+    const s = p.size;
+    const baseX = p.x - s / 2;
+    const baseY = p.y - s / 2;
+    ctx.drawImage(sprite, baseX, baseY, s, s);
+    if (p.z < 0.2 && s > 6) {
+      ctx.globalAlpha = alpha * 0.14;
+      ctx.drawImage(sprite, baseX - s * 0.25, baseY - s * 0.25, s * 1.5, s * 1.5);
+    }
+    if (p.z < 0.25 && s > 3.2) {
+      ctx.globalAlpha = alpha * 0.28;
+      ctx.drawImage(sprite, baseX, baseY - s * 0.35, s, s);
+    }
+  }
+}
+function drawLeaves(ctx, particles, opacity, tMs, config, spriteCache) {
+  for (const p of particles) {
+    const leafColor = p.spriteColor || config.colors[0] || "#d4a373";
+    const key = `leaf:${leafColor}:${p.spriteIndex}`;
+    const sprite = getSprite(spriteCache, key, () => makeLeafSprite(leafColor, p.spriteIndex));
+    const alpha = clamp(0, p.alpha * opacity, 1);
+    const flutter = Math.sin(tMs * 1e-3 * p.flutterSpeed + p.flutterPhase);
+    const tilt = flutter * 0.35;
+    const scale = p.size / 52 * (0.78 + (1 - p.z) * 0.34);
+    const squash = 0.75 + Math.abs(flutter) * 0.25;
+    ctx.save();
+    ctx.globalAlpha = alpha;
+    ctx.translate(p.x, p.y);
+    ctx.rotate(p.rotation + tilt);
+    ctx.scale(scale, scale * squash);
+    ctx.drawImage(sprite, -sprite.width / 2, -sprite.height / 2);
+    ctx.restore();
+  }
+}
+function getCinematicCount(type, intensity, maxParticles) {
+  return getParticleCount(type, intensity, maxParticles, "cinematic");
+}
+function WeatherLayerCinematicCanvas({
+  type,
+  intensity = 0.5,
+  stylePreset = "cinematic",
+  wind = { x: 0, y: 0 },
+  color,
+  colors,
+  leafColorPreset,
+  opacity = 1,
+  blur = false,
+  maxParticles: propMaxParticles,
+  enabled = true,
+  className,
+  style
+}) {
+  const perfConfig = getPerformanceConfig();
+  const maxParticles = propMaxParticles ?? perfConfig.maxParticles;
+  const colorsKeyProp = colorsKey(colors);
+  const config = WEATHER_CONFIGS[type];
+  const particleColors = React.useMemo(
+    () => resolveWeatherColors({ type, colors, leafColorPreset, configColors: config.colors }),
+    [type, leafColorPreset, colorsKeyProp, config]
+  );
+  const containerRef = React.useRef(null);
+  const canvasRef = React.useRef(null);
+  const frameRef = React.useRef(0);
+  const lastRef = React.useRef(0);
+  const boundsRef = React.useRef({ width: 0, height: 0 });
+  const snowRef = React.useRef([]);
+  const leafRef = React.useRef([]);
+  const spriteCacheRef = React.useRef(/* @__PURE__ */ new Map());
+  React.useEffect(() => {
+    if (stylePreset !== "cinematic" || !enabled) return;
+    const container = containerRef.current;
+    const canvas = canvasRef.current;
+    if (!container || !canvas) return;
+    const ctx = canvas.getContext("2d", { alpha: true });
+    if (!ctx) return;
+    lastRef.current = 0;
+    const dpr = clamp(1, window.devicePixelRatio ?? 1, 2);
+    const resize = () => {
+      const width = Math.max(1, Math.floor(container.clientWidth));
+      const height = Math.max(1, Math.floor(container.clientHeight));
+      boundsRef.current = { width, height };
+      canvas.width = Math.floor(width * dpr);
+      canvas.height = Math.floor(height * dpr);
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    };
+    resize();
+    let ro = null;
+    if (typeof ResizeObserver !== "undefined") {
+      ro = new ResizeObserver(resize);
+      ro.observe(container);
+    } else {
+      window.addEventListener("resize", resize);
+    }
+    const bounds = boundsRef.current;
+    const count = getCinematicCount(type, intensity, maxParticles);
+    if (type === "snow") {
+      snowRef.current = createSnowParticles(count, config, bounds, { colorsOverride: particleColors, colorOverride: color });
+      leafRef.current = [];
+    } else if (type === "leaves") {
+      leafRef.current = createLeafParticles(count, config, bounds, { colorsOverride: particleColors, colorOverride: color });
+      snowRef.current = [];
+    } else {
+      snowRef.current = [];
+      leafRef.current = [];
+    }
+    const animate = (tMs) => {
+      if (!lastRef.current) lastRef.current = tMs;
+      const dtMs = Math.min(tMs - lastRef.current, 40);
+      lastRef.current = tMs;
+      const dtSec = dtMs / 1e3;
+      const b = boundsRef.current;
+      if (type === "snow") {
+        updateSnow(snowRef.current, dtSec, tMs, b, wind);
+      } else if (type === "leaves") {
+        updateLeaves(leafRef.current, dtSec, tMs, b, wind);
+      }
+      ctx.clearRect(0, 0, b.width, b.height);
+      ctx.globalCompositeOperation = "source-over";
+      if (type === "snow") {
+        drawSnow(ctx, snowRef.current, opacity, spriteCacheRef.current);
+      } else if (type === "leaves") {
+        drawLeaves(ctx, leafRef.current, opacity, tMs, WEATHER_CONFIGS[type], spriteCacheRef.current);
+      }
+      frameRef.current = requestAnimationFrame(animate);
+    };
+    frameRef.current = requestAnimationFrame(animate);
+    return () => {
+      if (ro) ro.disconnect();
+      else window.removeEventListener("resize", resize);
+      if (frameRef.current) cancelAnimationFrame(frameRef.current);
+    };
+  }, [type, intensity, wind.x, wind.y, color, opacity, maxParticles, enabled, stylePreset, leafColorPreset, colorsKeyProp]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("pointer-events-none absolute inset-0 overflow-hidden", className),
+      style: {
+        opacity: 1,
+        filter: blur ? "blur(0.8px)" : void 0,
+        ...style
+      },
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "absolute inset-0", "aria-hidden": "true" })
+    }
+  );
+}
+
+// src/environment/WeatherLayer/WeatherLayer.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ParticleRenderer = React2.memo(function ParticleRenderer2({
+  particle,
+  config,
+  colorOverride
+}) {
+  const translate = `translate3d(${particle.x}px, ${particle.y}px, 0)`;
+  const rotate = `rotate(${particle.rotation}deg)`;
+  const particleColor = colorOverride ?? particle.color;
+  const baseStyle = {
+    position: "absolute",
+    left: 0,
+    top: 0,
+    opacity: particle.opacity,
+    transform: `${translate} ${rotate}`,
+    willChange: "transform, opacity",
+    pointerEvents: "none"
+  };
+  switch (config.shape) {
+    case "streak":
+      return /* @__PURE__ */ jsx2(
+        "div",
+        {
+          style: {
+            ...baseStyle,
+            width: 1,
+            height: particle.size * 8,
+            background: `linear-gradient(to bottom, transparent, ${particleColor}, transparent)`
+          }
+        }
+      );
+    case "glow":
+      return /* @__PURE__ */ jsx2(
+        "div",
+        {
+          style: {
+            ...baseStyle,
+            width: particle.size,
+            height: particle.size,
+            borderRadius: "50%",
+            backgroundColor: particleColor,
+            boxShadow: `0 0 ${particle.size * 2}px ${particleColor}`
+          }
+        }
+      );
+    case "leaf":
+      return /* @__PURE__ */ jsx2(
+        "div",
+        {
+          style: {
+            ...baseStyle,
+            width: particle.size,
+            height: particle.size * 0.6,
+            borderRadius: "50% 0 50% 0",
+            backgroundColor: particleColor
+          }
+        }
+      );
+    case "petal":
+      return /* @__PURE__ */ jsx2(
+        "div",
+        {
+          style: {
+            ...baseStyle,
+            width: particle.size,
+            height: particle.size * 0.7,
+            borderRadius: "50% 50% 50% 50%",
+            backgroundColor: particleColor,
+            transform: `${translate} ${rotate} scale(1, 0.6)`
+          }
+        }
+      );
+    default:
+      return /* @__PURE__ */ jsx2(
+        "div",
+        {
+          style: {
+            ...baseStyle,
+            width: particle.size,
+            height: particle.size,
+            borderRadius: "50%",
+            backgroundColor: particleColor
+          }
+        }
+      );
+  }
+});
+function WeatherLayer({
+  type,
+  intensity = 0.5,
+  stylePreset = "ui",
+  wind = { x: 0, y: 0 },
+  color,
+  colors,
+  leafColorPreset,
+  opacity = 1,
+  blur = false,
+  maxParticles: propMaxParticles,
+  enabled = true,
+  className,
+  style
+}) {
+  const reducedMotion = useReducedMotion();
+  const containerRef = React2.useRef(null);
+  const [particles, setParticles] = React2.useState([]);
+  const frameRef = React2.useRef(0);
+  const lastTimeRef = React2.useRef(0);
+  const particleIdRef = React2.useRef(0);
+  const config = WEATHER_CONFIGS[type];
+  const perfConfig = getPerformanceConfig();
+  const maxParticles = propMaxParticles ?? perfConfig.maxParticles;
+  const colorsKeyProp = colorsKey(colors);
+  const particleColors = React2.useMemo(
+    () => resolveWeatherColors({ type, colors, leafColorPreset, configColors: config.colors }),
+    [type, leafColorPreset, colorsKeyProp]
+  );
+  const shouldRender = enabled && !reducedMotion && perfConfig.tier !== "minimal";
+  const useCinematicCanvas = shouldRender && stylePreset === "cinematic" && perfConfig.useShaders && (type === "snow" || type === "leaves");
+  if (useCinematicCanvas) {
+    return /* @__PURE__ */ jsx2(
+      WeatherLayerCinematicCanvas,
+      {
+        type,
+        intensity,
+        stylePreset,
+        wind,
+        color,
+        colors,
+        leafColorPreset,
+        opacity,
+        blur,
+        maxParticles,
+        enabled,
+        className,
+        style
+      }
+    );
+  }
+  React2.useEffect(() => {
+    if (!shouldRender || !containerRef.current) {
+      setParticles([]);
+      return;
+    }
+    lastTimeRef.current = 0;
+    const container = containerRef.current;
+    const bounds = {
+      width: container.offsetWidth,
+      height: container.offsetHeight
+    };
+    const particleCount = getParticleCount(type, intensity, maxParticles, stylePreset);
+    const initialParticles = [];
+    for (let i = 0; i < particleCount; i++) {
+      let p = createParticle(particleIdRef.current++, type, config, wind, bounds, stylePreset, particleColors);
+      p.y = Math.random() * bounds.height;
+      p.x = Math.random() * bounds.width;
+      p.life = Math.random() * p.maxLife * 0.7;
+      p = updateParticle(p, config, 0);
+      initialParticles.push(p);
+    }
+    setParticles(initialParticles);
+    const animate = (time) => {
+      if (!lastTimeRef.current) lastTimeRef.current = time;
+      const deltaTime = Math.min(time - lastTimeRef.current, 50);
+      lastTimeRef.current = time;
+      setParticles((prev) => {
+        const updated = [];
+        const currentBounds = {
+          width: container.offsetWidth,
+          height: container.offsetHeight
+        };
+        for (const p of prev) {
+          const newP = updateParticle(p, config, deltaTime);
+          if (newP.life < newP.maxLife && newP.y > -50 && newP.y < currentBounds.height + 50 && newP.x > -50 && newP.x < currentBounds.width + 50) {
+            updated.push(newP);
+          }
+        }
+        const targetCount = getParticleCount(type, intensity, maxParticles, stylePreset);
+        while (updated.length < targetCount) {
+          updated.push(
+            createParticle(particleIdRef.current++, type, config, wind, currentBounds, stylePreset, particleColors)
+          );
+        }
+        return updated;
+      });
+      frameRef.current = requestAnimationFrame(animate);
+    };
+    frameRef.current = requestAnimationFrame(animate);
+    return () => {
+      if (frameRef.current) {
+        cancelAnimationFrame(frameRef.current);
+      }
+    };
+  }, [shouldRender, type, intensity, stylePreset, wind.x, wind.y, maxParticles, config, leafColorPreset, colorsKeyProp]);
+  if (!shouldRender) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "pointer-events-none absolute inset-0 overflow-hidden",
+        className
+      ),
+      style: {
+        opacity,
+        filter: blur ? "blur(1px)" : void 0,
+        ...style
+      },
+      "aria-hidden": "true",
+      children: particles.map((p) => /* @__PURE__ */ jsx2(
+        ParticleRenderer,
+        {
+          particle: p,
+          config,
+          colorOverride: color
+        },
+        p.id
+      ))
+    }
+  );
+}
+
+// src/environment/FogLayer/FogLayer.tsx
+import * as React3 from "react";
+import { useReducedMotion as useReducedMotion2 } from "framer-motion";
+
+// src/environment/shared/noise.ts
+var NOISE_SVG = `<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
+  <filter id="n">
+    <feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="3" seed="2" stitchTiles="stitch" />
+    <feColorMatrix type="saturate" values="0" />
+  </filter>
+  <rect width="200" height="200" filter="url(#n)" opacity="0.55" />
+</svg>`;
+var NOISE_DATA_URL = `data:image/svg+xml,${encodeURIComponent(NOISE_SVG)}`;
+
+// src/environment/FogLayer/types.ts
+var FOG_CONFIGS = {
+  depth: {
+    defaultColor: "#0a0a0f",
+    defaultDensity: 0.5,
+    animationSpeed: 0,
+    gradientStops: 2
+  },
+  ground: {
+    defaultColor: "#ffffff",
+    defaultDensity: 0.7,
+    animationSpeed: 0.02,
+    gradientStops: 3
+  },
+  volumetric: {
+    defaultColor: "#e8e8ff",
+    defaultDensity: 0.4,
+    animationSpeed: 0.01,
+    gradientStops: 4
+  },
+  mist: {
+    defaultColor: "#f0f0ff",
+    defaultDensity: 0.3,
+    animationSpeed: 0.015,
+    gradientStops: 5
+  }
+};
+
+// src/environment/FogLayer/FogLayer.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function FogLayer({
+  type,
+  density: propDensity,
+  color: propColor,
+  height = 0.4,
+  animated = true,
+  intensity = 1,
+  stylePreset = "ui",
+  enabled = true,
+  className,
+  style
+}) {
+  const reducedMotion = useReducedMotion2();
+  const perfConfig = getPerformanceConfig();
+  const [offset, setOffset] = React3.useState(0);
+  const config = FOG_CONFIGS[type];
+  const density = propDensity ?? config.defaultDensity;
+  const color = propColor ?? config.defaultColor;
+  const shouldAnimate = animated && !reducedMotion && perfConfig.tier !== "minimal";
+  React3.useEffect(() => {
+    if (!shouldAnimate || !enabled || config.animationSpeed === 0) return;
+    let frame;
+    const animate = () => {
+      setOffset((prev) => (prev + config.animationSpeed) % 100);
+      frame = requestAnimationFrame(animate);
+    };
+    frame = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(frame);
+  }, [shouldAnimate, enabled, config.animationSpeed]);
+  if (!enabled) return null;
+  const gradientStyle = React3.useMemo(() => {
+    const opacity = density * intensity;
+    switch (type) {
+      case "depth":
+        return {
+          background: `linear-gradient(to top, ${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")}, transparent)`
+        };
+      case "ground":
+        return {
+          background: `linear-gradient(to top,
+            ${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")} 0%,
+            ${color}${Math.round(opacity * 0.5 * 255).toString(16).padStart(2, "0")} ${height * 50}%,
+            transparent ${height * 100}%)`
+        };
+      case "volumetric":
+        return {
+          background: `
+            radial-gradient(ellipse 120% 60% at 50% ${100 - offset}%, ${color}${Math.round(opacity * 0.6 * 255).toString(16).padStart(2, "0")}, transparent),
+            radial-gradient(ellipse 100% 40% at ${30 + offset * 0.2}% 80%, ${color}${Math.round(opacity * 0.4 * 255).toString(16).padStart(2, "0")}, transparent),
+            radial-gradient(ellipse 80% 50% at ${70 - offset * 0.15}% 90%, ${color}${Math.round(opacity * 0.5 * 255).toString(16).padStart(2, "0")}, transparent)
+          `
+        };
+      case "mist":
+        return {
+          background: `
+            radial-gradient(ellipse 150% 80% at ${40 + Math.sin(offset * 0.1) * 20}% ${60 + Math.cos(offset * 0.08) * 10}%, ${color}${Math.round(opacity * 0.3 * 255).toString(16).padStart(2, "0")}, transparent),
+            radial-gradient(ellipse 120% 60% at ${60 + Math.cos(offset * 0.12) * 15}% ${40 + Math.sin(offset * 0.09) * 15}%, ${color}${Math.round(opacity * 0.25 * 255).toString(16).padStart(2, "0")}, transparent),
+            linear-gradient(to top, ${color}${Math.round(opacity * 0.15 * 255).toString(16).padStart(2, "0")}, transparent 50%)
+          `
+        };
+      default:
+        return {};
+    }
+  }, [type, color, density, intensity, height, offset]);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: cn(
+        "pointer-events-none absolute inset-0",
+        className
+      ),
+      style: {
+        ...gradientStyle,
+        ...style
+      },
+      "aria-hidden": "true",
+      children: stylePreset === "cinematic" && /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className: "absolute inset-0",
+          style: {
+            backgroundImage: `url("${NOISE_DATA_URL}")`,
+            backgroundRepeat: "repeat",
+            backgroundSize: `${260 - Math.round(density * 80)}px ${260 - Math.round(density * 80)}px`,
+            backgroundPosition: `${offset * 30}px ${offset * 20}px`,
+            opacity: Math.min(0.18, 0.04 + density * intensity * 0.12),
+            mixBlendMode: "soft-light",
+            filter: "blur(0.6px) contrast(1.2)"
+          },
+          "aria-hidden": "true"
+        }
+      )
+    }
+  );
+}
+
+// src/environment/VolumetricLight/VolumetricLight.tsx
+import * as React4 from "react";
+import { useReducedMotion as useReducedMotion3 } from "framer-motion";
+
+// src/environment/VolumetricLight/types.ts
+var LIGHT_CONFIGS = {
+  godrays: { defaultColor: "#fffbe6", defaultIntensity: 0.6, animated: true, blendMode: "screen" },
+  shaft: { defaultColor: "#ffffff", defaultIntensity: 0.5, animated: false, blendMode: "screen" },
+  bloom: { defaultColor: "#ffffff", defaultIntensity: 0.4, animated: false, blendMode: "screen" },
+  flare: { defaultColor: "#ffe4b5", defaultIntensity: 0.7, animated: true, blendMode: "screen" },
+  caustics: { defaultColor: "#00d4ff", defaultIntensity: 0.4, animated: true, blendMode: "overlay" },
+  scanner: { defaultColor: "#00ff00", defaultIntensity: 0.6, animated: true, blendMode: "screen" },
+  neon: { defaultColor: "#ff00ff", defaultIntensity: 0.8, animated: true, blendMode: "screen" },
+  spotlight: { defaultColor: "#ffffff", defaultIntensity: 0.7, animated: false, blendMode: "screen" },
+  rim: { defaultColor: "#00f0ff", defaultIntensity: 0.5, animated: false, blendMode: "screen" },
+  laser: { defaultColor: "#ff0000", defaultIntensity: 0.9, animated: true, blendMode: "screen" }
+};
+
+// src/environment/VolumetricLight/VolumetricLight.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function VolumetricLight({
+  type,
+  source = { x: 0.5, y: 0 },
+  color: propColor,
+  intensity = 0.5,
+  decay = 0.5,
+  angle = 0,
+  width = 0.3,
+  animated: propAnimated,
+  stylePreset = "ui",
+  enabled = true,
+  className,
+  style
+}) {
+  const reducedMotion = useReducedMotion3();
+  const perfConfig = getPerformanceConfig();
+  const [time, setTime] = React4.useState(0);
+  const config = LIGHT_CONFIGS[type];
+  const color = propColor ?? config.defaultColor;
+  const shouldAnimate = (propAnimated ?? config.animated) && !reducedMotion && perfConfig.tier !== "minimal";
+  React4.useEffect(() => {
+    if (!shouldAnimate || !enabled) return;
+    let frame;
+    const animate = () => {
+      setTime((prev) => prev + 0.016);
+      frame = requestAnimationFrame(animate);
+    };
+    frame = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(frame);
+  }, [shouldAnimate, enabled]);
+  if (!enabled) return null;
+  const lightStyle = React4.useMemo(() => {
+    const opacity = intensity * config.defaultIntensity;
+    const d = Math.max(0, Math.min(1, decay));
+    switch (type) {
+      case "godrays":
+        return {
+          background: `conic-gradient(from ${angle}deg at ${source.x * 100}% ${source.y * 100}%,
+            ${color}${Math.round(opacity * 0.4 * 255).toString(16).padStart(2, "0")} 0deg,
+            transparent 15deg,
+            ${color}${Math.round(opacity * 0.3 * 255).toString(16).padStart(2, "0")} 30deg,
+            transparent 45deg,
+            ${color}${Math.round(opacity * 0.35 * 255).toString(16).padStart(2, "0")} 60deg,
+            transparent 75deg,
+            ${color}${Math.round(opacity * 0.25 * 255).toString(16).padStart(2, "0")} 90deg,
+            transparent 105deg
+          )`,
+          mixBlendMode: config.blendMode
+        };
+      case "shaft":
+        return {
+          background: `linear-gradient(${angle}deg,
+            transparent ${(source.x - width / 2) * 100}%,
+            ${color}${Math.round(opacity * 0.5 * 255).toString(16).padStart(2, "0")} ${source.x * 100}%,
+            transparent ${(source.x + width / 2) * 100}%
+          )`,
+          mixBlendMode: config.blendMode
+        };
+      case "bloom": {
+        const bloomInner = 18 + d * 22;
+        const bloomMid = 42 + d * 24;
+        return {
+          background: `radial-gradient(circle at ${source.x * 100}% ${source.y * 100}%,
+            ${color}${Math.round(opacity * 0.6 * 255).toString(16).padStart(2, "0")},
+            ${color}${Math.round(opacity * 0.3 * 255).toString(16).padStart(2, "0")} ${bloomInner}%,
+            transparent ${bloomMid}%
+          )`,
+          mixBlendMode: config.blendMode,
+          filter: "blur(20px)"
+        };
+      }
+      case "flare":
+        const flareOffset = Math.sin(time * 2) * 5;
+        return {
+          background: `
+            radial-gradient(ellipse 20% 5% at ${source.x * 100}% ${source.y * 100 + flareOffset}%, ${color}${Math.round(opacity * 0.8 * 255).toString(16).padStart(2, "0")}, transparent),
+            radial-gradient(ellipse 5% 20% at ${source.x * 100}% ${source.y * 100}%, ${color}${Math.round(opacity * 0.6 * 255).toString(16).padStart(2, "0")}, transparent),
+            radial-gradient(circle at ${source.x * 100}% ${source.y * 100}%, ${color}${Math.round(opacity * 0.4 * 255).toString(16).padStart(2, "0")}, transparent 20%)
+          `,
+          mixBlendMode: config.blendMode
+        };
+      case "caustics":
+        const causticPhase = time * 0.5;
+        return {
+          background: `
+            radial-gradient(ellipse at ${50 + Math.sin(causticPhase) * 20}% ${50 + Math.cos(causticPhase * 1.3) * 20}%, ${color}${Math.round(opacity * 0.3 * 255).toString(16).padStart(2, "0")}, transparent 40%),
+            radial-gradient(ellipse at ${50 + Math.cos(causticPhase * 0.7) * 25}% ${50 + Math.sin(causticPhase * 1.1) * 25}%, ${color}${Math.round(opacity * 0.25 * 255).toString(16).padStart(2, "0")}, transparent 35%)
+          `,
+          mixBlendMode: config.blendMode
+        };
+      case "scanner":
+        const scanAngle = time * 60 % 360;
+        return {
+          background: `conic-gradient(from ${scanAngle}deg at ${source.x * 100}% ${source.y * 100}%,
+            ${color}${Math.round(opacity * 0.6 * 255).toString(16).padStart(2, "0")} 0deg,
+            transparent 30deg,
+            transparent 360deg
+          )`,
+          mixBlendMode: config.blendMode
+        };
+      case "neon":
+        const flickerIntensity = 0.9 + Math.sin(time * 20) * 0.1;
+        return {
+          background: `linear-gradient(${angle}deg, transparent 40%, ${color}${Math.round(opacity * flickerIntensity * 0.8 * 255).toString(16).padStart(2, "0")} 50%, transparent 60%)`,
+          boxShadow: `0 0 30px ${color}${Math.round(opacity * flickerIntensity * 0.5 * 255).toString(16).padStart(2, "0")}, 0 0 60px ${color}${Math.round(opacity * flickerIntensity * 0.3 * 255).toString(16).padStart(2, "0")}`,
+          mixBlendMode: config.blendMode
+        };
+      case "spotlight": {
+        const spotMid = 40 + d * 35;
+        return {
+          background: `radial-gradient(ellipse ${width * 100}% ${width * 150}% at ${source.x * 100}% ${source.y * 100}%,
+            ${color}${Math.round(opacity * 0.7 * 255).toString(16).padStart(2, "0")},
+            ${color}${Math.round(opacity * 0.3 * 255).toString(16).padStart(2, "0")} ${spotMid}%,
+            transparent 100%
+          )`,
+          mixBlendMode: config.blendMode
+        };
+      }
+      case "rim":
+        return {
+          boxShadow: `inset 0 0 ${60 * intensity}px ${color}${Math.round(opacity * 0.6 * 255).toString(16).padStart(2, "0")}`,
+          mixBlendMode: config.blendMode
+        };
+      case "laser":
+        const laserOffset = Math.sin(time * 3) * 10;
+        return {
+          background: `linear-gradient(${angle + laserOffset}deg,
+            transparent 49%,
+            ${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")} 49.5%,
+            ${color}${Math.round(opacity * 255).toString(16).padStart(2, "0")} 50.5%,
+            transparent 51%
+          )`,
+          mixBlendMode: config.blendMode
+        };
+      default:
+        return {};
+    }
+  }, [type, source, color, intensity, decay, angle, width, time, config]);
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: cn("pointer-events-none absolute inset-0", className),
+      style: { ...lightStyle, ...style },
+      "aria-hidden": "true",
+      children: stylePreset === "cinematic" && /* @__PURE__ */ jsx4(
+        "div",
+        {
+          className: "absolute inset-0",
+          style: {
+            backgroundImage: `url("${NOISE_DATA_URL}")`,
+            backgroundRepeat: "repeat",
+            backgroundSize: "240px 240px",
+            backgroundPosition: `${time * 160}px ${time * 110}px`,
+            opacity: Math.min(0.12, 0.03 + intensity * 0.06),
+            mixBlendMode: "overlay",
+            filter: "blur(0.4px) contrast(1.25)"
+          },
+          "aria-hidden": "true"
+        }
+      )
+    }
+  );
+}
+
+// src/environment/AuroraLayer/AuroraLayer.tsx
+import * as React5 from "react";
+import { useReducedMotion as useReducedMotion4 } from "framer-motion";
+
+// src/environment/AuroraLayer/types.ts
+var AURORA_CONFIGS = {
+  aurora: { colors: ["#00ff87", "#60efff", "#ff00aa"], animationSpeed: 8e-3, complexity: 3 },
+  nebula: { colors: ["#1a0533", "#4b0082", "#ff006e"], animationSpeed: 5e-3, complexity: 4 },
+  gradient: { colors: ["#667eea", "#764ba2"], animationSpeed: 3e-3, complexity: 1 },
+  stars: { colors: ["#ffffff", "#fffacd", "#e6e6fa"], animationSpeed: 0.01, complexity: 5 },
+  clouds: { colors: ["#f0f0f0", "#d0d0d0", "#e8e8e8"], animationSpeed: 4e-3, complexity: 3 },
+  sunset: { colors: ["#ff6b35", "#f7c59f", "#2e294e"], animationSpeed: 2e-3, complexity: 2 },
+  storm: { colors: ["#1c1c1c", "#363636", "#4a4a4a"], animationSpeed: 0.015, complexity: 4 },
+  cosmic: { colors: ["#0d0221", "#0f084b", "#26408b", "#a663cc"], animationSpeed: 3e-3, complexity: 5 },
+  heat: { colors: ["#ff4500", "#ff6347", "#ffa500"], animationSpeed: 0.02, complexity: 2 },
+  underwater: { colors: ["#006994", "#00a8cc", "#40e0d0"], animationSpeed: 6e-3, complexity: 3 }
+};
+
+// src/environment/AuroraLayer/AuroraLayer.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function AuroraLayer({
+  type,
+  colors: propColors,
+  intensity = 1,
+  speed = 1,
+  stylePreset = "ui",
+  complexity: propComplexity,
+  direction = "vertical",
+  blend = "normal",
+  enabled = true,
+  className,
+  style
+}) {
+  const reducedMotion = useReducedMotion4();
+  const perfConfig = getPerformanceConfig();
+  const [time, setTime] = React5.useState(0);
+  const lightningRef = React5.useRef(0);
+  const config = AURORA_CONFIGS[type];
+  const colors = propColors ?? config.colors;
+  const complexity = propComplexity ?? config.complexity;
+  const shouldAnimate = !reducedMotion && perfConfig.tier !== "minimal";
+  React5.useEffect(() => {
+    if (!shouldAnimate || !enabled) return;
+    lightningRef.current = 0;
+    let frame;
+    const animate = () => {
+      if (type === "storm") {
+        const chance = stylePreset === "cinematic" ? 3e-3 : 7e-3;
+        if (Math.random() < chance) lightningRef.current = 1;
+        lightningRef.current *= stylePreset === "cinematic" ? 0.92 : 0.88;
+        if (lightningRef.current < 0.02) lightningRef.current = 0;
+      }
+      setTime((prev) => prev + config.animationSpeed * speed);
+      frame = requestAnimationFrame(animate);
+    };
+    frame = requestAnimationFrame(animate);
+    return () => cancelAnimationFrame(frame);
+  }, [shouldAnimate, enabled, type, stylePreset, config.animationSpeed, speed]);
+  if (!enabled) return null;
+  const lightning = type === "storm" ? lightningRef.current : 0;
+  const auroraStyle = React5.useMemo(() => {
+    const opacity = intensity;
+    const c = colors.map((color) => `${color}${Math.round(opacity * 200).toString(16).padStart(2, "0")}`);
+    switch (type) {
+      case "aurora":
+        return {
+          background: `
+            linear-gradient(${direction === "horizontal" ? "90deg" : "180deg"},
+              ${c[0]} ${Math.sin(time) * 20 + 10}%,
+              ${c[1]} ${50 + Math.cos(time * 1.3) * 20}%,
+              ${c[2]} ${90 + Math.sin(time * 0.7) * 10}%
+            )
+          `,
+          filter: `blur(${40 + Math.sin(time * 2) * 10}px)`,
+          mixBlendMode: blend
+        };
+      case "nebula":
+        return {
+          background: `
+            radial-gradient(ellipse at ${30 + Math.sin(time) * 20}% ${40 + Math.cos(time * 0.8) * 20}%, ${c[0]}, transparent 50%),
+            radial-gradient(ellipse at ${70 + Math.cos(time * 1.2) * 15}% ${60 + Math.sin(time * 0.9) * 15}%, ${c[1]}, transparent 40%),
+            radial-gradient(ellipse at ${50 + Math.sin(time * 0.7) * 25}% ${50 + Math.cos(time * 1.1) * 25}%, ${c[2]}, transparent 45%)
+          `,
+          mixBlendMode: blend
+        };
+      case "gradient":
+        return {
+          background: `linear-gradient(${direction === "horizontal" ? "90deg" : direction === "radial" ? "135deg" : "180deg"}, ${c.join(", ")})`,
+          mixBlendMode: blend
+        };
+      case "stars":
+        const starGradients = Array.from({ length: Math.min(complexity * 10, 50) }, (_, i) => {
+          const x = (i * 17 + Math.sin(i) * 30) % 100;
+          const y = (i * 23 + Math.cos(i) * 40) % 100;
+          const twinkle = Math.sin(time * (2 + i * 0.1)) * 0.5 + 0.5;
+          const size = 1 + i % 3;
+          return `radial-gradient(circle ${size}px at ${x}% ${y}%, ${colors[i % colors.length]}${Math.round(twinkle * opacity * 255).toString(16).padStart(2, "0")}, transparent ${size}px)`;
+        });
+        return {
+          background: starGradients.join(", "),
+          mixBlendMode: blend
+        };
+      case "clouds":
+        return {
+          background: `
+            radial-gradient(ellipse 80% 50% at ${20 + Math.sin(time) * 10}% ${30 + Math.cos(time * 0.5) * 10}%, ${c[0]}, transparent),
+            radial-gradient(ellipse 60% 40% at ${60 + Math.cos(time * 0.7) * 15}% ${50 + Math.sin(time * 0.6) * 10}%, ${c[1]}, transparent),
+            radial-gradient(ellipse 70% 45% at ${40 + Math.sin(time * 0.8) * 12}% ${70 + Math.cos(time * 0.4) * 8}%, ${c[2]}, transparent)
+          `,
+          filter: "blur(30px)",
+          mixBlendMode: blend
+        };
+      case "sunset":
+        return {
+          background: `linear-gradient(180deg,
+            ${c[2]} 0%,
+            ${c[1]} ${40 + Math.sin(time) * 5}%,
+            ${c[0]} ${70 + Math.cos(time * 0.5) * 5}%,
+            ${c[0]}00 100%
+          )`,
+          mixBlendMode: blend
+        };
+      case "storm":
+        return {
+          background: `
+            radial-gradient(ellipse 100% 60% at ${30 + Math.sin(time * 2) * 20}% ${20 + Math.cos(time) * 10}%, ${c[1]}, transparent),
+            radial-gradient(ellipse 80% 50% at ${70 + Math.cos(time * 1.5) * 25}% ${40 + Math.sin(time * 1.2) * 15}%, ${c[2]}, transparent),
+            linear-gradient(180deg, ${c[0]}, ${c[1]})
+          `,
+          filter: lightning ? `brightness(${1 + lightning * (stylePreset === "cinematic" ? 1.8 : 2.6)}) contrast(${1 + lightning * 0.35})` : void 0,
+          mixBlendMode: blend
+        };
+      case "cosmic":
+        return {
+          background: `
+            radial-gradient(ellipse at center, ${c[3] ?? c[0]} 0%, transparent 50%),
+            radial-gradient(ellipse at ${30 + Math.sin(time * 0.5) * 20}% ${30 + Math.cos(time * 0.3) * 20}%, ${c[1]}, transparent 40%),
+            radial-gradient(ellipse at ${70 + Math.cos(time * 0.4) * 15}% ${70 + Math.sin(time * 0.6) * 15}%, ${c[2]}, transparent 35%),
+            linear-gradient(180deg, ${c[0]}, ${c[1]})
+          `,
+          mixBlendMode: blend
+        };
+      case "heat":
+        return {
+          background: `
+            radial-gradient(ellipse at 50% 100%, ${c[0]}, transparent 60%),
+            radial-gradient(ellipse at ${30 + Math.sin(time * 3) * 20}% 80%, ${c[1]}, transparent 40%),
+            radial-gradient(ellipse at ${70 + Math.cos(time * 2.5) * 20}% 90%, ${c[2]}, transparent 45%)
+          `,
+          filter: `blur(${10 + Math.sin(time * 5) * 5}px)`,
+          mixBlendMode: blend
+        };
+      case "underwater":
+        return {
+          background: `
+            linear-gradient(180deg, ${c[0]} 0%, ${c[1]} 50%, ${c[2]} 100%),
+            radial-gradient(ellipse at ${50 + Math.sin(time) * 30}% ${30 + Math.cos(time * 0.8) * 20}%, ${c[2]}40, transparent 40%)
+          `,
+          mixBlendMode: blend
+        };
+      default:
+        return {};
+    }
+  }, [type, colors, intensity, complexity, direction, blend, time, lightning, stylePreset]);
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: cn("pointer-events-none absolute inset-0", className),
+      style: { ...auroraStyle, ...style },
+      "aria-hidden": "true",
+      children: stylePreset === "cinematic" && /* @__PURE__ */ jsx5(
+        "div",
+        {
+          className: "absolute inset-0",
+          style: {
+            backgroundImage: `url("${NOISE_DATA_URL}")`,
+            backgroundRepeat: "repeat",
+            backgroundSize: `${200 + complexity * 16}px ${200 + complexity * 16}px`,
+            backgroundPosition: `${time * 120}px ${time * 80}px`,
+            opacity: Math.min(0.1, 0.04 + intensity * 0.03),
+            mixBlendMode: "overlay",
+            filter: "blur(0.4px) contrast(1.1)"
+          },
+          "aria-hidden": "true"
+        }
+      )
+    }
+  );
+}
+
+// src/environment/EnvironmentLayer/EnvironmentLayer.tsx
+import { useReducedMotion as useReducedMotion5 } from "framer-motion";
+
+// src/environment/EnvironmentLayer/presets.ts
+var ENVIRONMENT_PRESETS = {
+  "enchanted-forest": {
+    weather: { type: "fireflies", intensity: 0.7 },
+    fog: { type: "ground", intensity: 0.5, color: "#1a3a2a" },
+    light: { type: "godrays", intensity: 0.6, color: "#d4f0c4" },
+    sky: { type: "aurora", intensity: 0.4, colors: ["#00ff87", "#004d2f", "#001a0f"] }
+  },
+  "cyberpunk-city": {
+    weather: { type: "rain", intensity: 0.8, wind: { x: -0.3, y: 0 } },
+    fog: { type: "volumetric", intensity: 0.6, color: "#1a0033" },
+    light: { type: "neon", intensity: 0.8, color: "#ff00ff", angle: 90 },
+    sky: { type: "gradient", intensity: 0.7, colors: ["#0a001a", "#1a0033", "#330066"] }
+  },
+  "deep-space": {
+    weather: { type: "spores", intensity: 0.3, color: "#ffffff" },
+    fog: void 0,
+    light: void 0,
+    sky: { type: "nebula", intensity: 0.8, colors: ["#0d0221", "#1a0533", "#4b0082", "#9400d3"] }
+  },
+  underwater: {
+    weather: { type: "spores", intensity: 0.4, color: "#40e0d0" },
+    fog: { type: "mist", intensity: 0.5, color: "#006994" },
+    light: { type: "caustics", intensity: 0.7, color: "#00d4ff" },
+    sky: { type: "underwater", intensity: 0.9 }
+  },
+  apocalypse: {
+    weather: { type: "ash", intensity: 0.8 },
+    fog: { type: "volumetric", intensity: 0.7, color: "#2a1a0a" },
+    light: void 0,
+    sky: { type: "storm", intensity: 0.9, colors: ["#1c1c1c", "#363636", "#4a3020"] }
+  },
+  "cozy-night": {
+    weather: { type: "fireflies", intensity: 0.4 },
+    fog: { type: "mist", intensity: 0.3, color: "#0a0a20" },
+    light: { type: "bloom", intensity: 0.5, color: "#fff5e6", source: { x: 0.5, y: 0.3 } },
+    sky: { type: "stars", intensity: 0.6, colors: ["#ffffff", "#fffacd", "#e6e6fa"] }
+  },
+  haunted: {
+    weather: { type: "embers", intensity: 0.3, color: "#4a90a4" },
+    fog: { type: "ground", intensity: 0.8, color: "#1a1a2e" },
+    light: { type: "godrays", intensity: 0.4, color: "#4a6fa5" },
+    sky: { type: "storm", intensity: 0.7, colors: ["#0a0a0f", "#1a1a2e", "#2a2a4e"] }
+  },
+  synthwave: {
+    weather: { type: "sparks", intensity: 0.4, color: "#ff00ff" },
+    fog: void 0,
+    light: { type: "scanner", intensity: 0.6, color: "#00ffff", source: { x: 0.5, y: 1 } },
+    sky: { type: "gradient", intensity: 0.9, colors: ["#ff00ff", "#ff6ec7", "#0a001a"] }
+  },
+  "zen-garden": {
+    weather: { type: "sakura", intensity: 0.5, wind: { x: 0.2, y: 0 } },
+    fog: { type: "mist", intensity: 0.4, color: "#f0f0f0" },
+    light: { type: "godrays", intensity: 0.5, color: "#ffe4b5" },
+    sky: { type: "sunset", intensity: 0.7, colors: ["#ff6b35", "#f7c59f", "#2e294e"] }
+  },
+  volcanic: {
+    weather: { type: "embers", intensity: 0.8 },
+    fog: { type: "volumetric", intensity: 0.6, color: "#1a0a00" },
+    light: void 0,
+    sky: { type: "heat", intensity: 0.9, colors: ["#ff4500", "#ff6347", "#1a0500"] }
+  },
+  arctic: {
+    weather: { type: "snow", intensity: 0.7, wind: { x: 0.2, y: 0 } },
+    fog: { type: "mist", intensity: 0.5, color: "#e8f4ff" },
+    light: { type: "rim", intensity: 0.4, color: "#00f0ff" },
+    sky: { type: "aurora", intensity: 0.6, colors: ["#00ff87", "#60efff", "#0a1a2f"] }
+  },
+  noir: {
+    weather: { type: "rain", intensity: 0.6, wind: { x: -0.2, y: 0 } },
+    fog: { type: "depth", intensity: 0.7, color: "#0a0a0f" },
+    light: { type: "spotlight", intensity: 0.8, color: "#ffffff", source: { x: 0.3, y: 0 }, width: 0.4 },
+    sky: { type: "clouds", intensity: 0.5, colors: ["#1a1a1a", "#2a2a2a", "#0a0a0a"] }
+  },
+  ethereal: {
+    weather: { type: "spores", intensity: 0.5, color: "#da70d6" },
+    fog: void 0,
+    light: { type: "bloom", intensity: 0.6, color: "#e6e6fa", source: { x: 0.5, y: 0.5 } },
+    sky: { type: "nebula", intensity: 0.7, colors: ["#4b0082", "#8a2be2", "#da70d6"] }
+  },
+  matrix: {
+    weather: { type: "rain", intensity: 0.9, color: "#00ff00", wind: { x: 0, y: 0 } },
+    fog: void 0,
+    light: { type: "scanner", intensity: 0.4, color: "#00ff00", source: { x: 0.5, y: 0 } },
+    sky: { type: "gradient", intensity: 0.8, colors: ["#001a00", "#003300", "#000a00"] }
+  },
+  rave: {
+    weather: { type: "sparks", intensity: 0.6 },
+    fog: void 0,
+    light: { type: "laser", intensity: 0.8, color: "#ff0000", angle: 45 },
+    sky: { type: "cosmic", intensity: 0.7, colors: ["#0d0221", "#ff00ff", "#00ffff", "#ff00ff"] }
+  },
+  "alien-world": {
+    weather: { type: "spores", intensity: 0.6, color: "#7fff00" },
+    fog: { type: "volumetric", intensity: 0.5, color: "#1a0033" },
+    light: { type: "caustics", intensity: 0.5, color: "#7fff00" },
+    sky: { type: "nebula", intensity: 0.8, colors: ["#1a0033", "#4b0082", "#7fff00"] }
+  }
+};
+
+// src/environment/EnvironmentLayer/EnvironmentLayer.tsx
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+function EnvironmentLayer({
+  preset,
+  enabled = true,
+  intensity = 1,
+  stylePreset,
+  className,
+  style,
+  weatherOverride,
+  fogOverride,
+  lightOverride,
+  skyOverride
+}) {
+  const reducedMotion = useReducedMotion5();
+  const perfConfig = getPerformanceConfig();
+  const resolvedStylePreset = stylePreset ?? (perfConfig.useShaders ? "cinematic" : "ui");
+  if (!enabled || reducedMotion || perfConfig.tier === "minimal") {
+    return null;
+  }
+  const config = ENVIRONMENT_PRESETS[preset];
+  if (!config) {
+    console.warn(
+      `EnvironmentLayer: Unknown preset "${preset}". Available presets: ${Object.keys(ENVIRONMENT_PRESETS).join(", ")}`
+    );
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("pointer-events-none absolute inset-0 overflow-hidden", className),
+      style,
+      "aria-hidden": "true",
+      children: [
+        config.sky && /* @__PURE__ */ jsx6(
+          AuroraLayer,
+          {
+            enabled,
+            ...config.sky,
+            stylePreset: resolvedStylePreset,
+            intensity: (config.sky.intensity ?? 1) * intensity,
+            ...skyOverride
+          }
+        ),
+        config.fog && /* @__PURE__ */ jsx6(
+          FogLayer,
+          {
+            enabled,
+            ...config.fog,
+            stylePreset: resolvedStylePreset,
+            intensity: (config.fog.intensity ?? 1) * intensity,
+            ...fogOverride
+          }
+        ),
+        config.light && /* @__PURE__ */ jsx6(
+          VolumetricLight,
+          {
+            enabled,
+            ...config.light,
+            stylePreset: resolvedStylePreset,
+            intensity: (config.light.intensity ?? 1) * intensity,
+            ...lightOverride
+          }
+        ),
+        config.weather && /* @__PURE__ */ jsx6(
+          WeatherLayer,
+          {
+            enabled,
+            ...config.weather,
+            stylePreset: resolvedStylePreset,
+            intensity: (config.weather.intensity ?? 1) * intensity,
+            ...weatherOverride
+          }
+        )
+      ]
+    }
+  );
+}
+EnvironmentLayer.displayName = "EnvironmentLayer";
+
+export {
+  PERFORMANCE_PRESETS,
+  detectPerformanceTier,
+  getPerformanceConfig,
+  AUTUMN_LEAF_COLOR_PRESETS,
+  WeatherLayer,
+  FogLayer,
+  VolumetricLight,
+  AuroraLayer,
+  ENVIRONMENT_PRESETS,
+  EnvironmentLayer
+};
+//# sourceMappingURL=chunk-HFSDW5IV.js.map