/* visuals.jsx — CSS/SVG-painted placeholders. Editorial, not stock-photo-ish. */
const { useMemo } = React;

/* Helper: deterministic randoms */
const seedRand = (seed) => {
  let s = seed;
  return () => { s = (s * 9301 + 49297) % 233280; return s / 233280; };
};

/* Sunset Sky — gradient bands + setting sun, palm silhouettes */
const SunsetSky = ({ palms = 3, sun = true, intensity = "warm", caption, captionTone = "light", style }) => {
  const bg = useMemo(() => {
    if (intensity === "deep") {
      return "linear-gradient(180deg, #F4C9B4 0%, #EDA188 22%, #C97A6B 48%, #8B5A6F 72%, #3A2A35 100%)";
    }
    if (intensity === "blush") {
      return "linear-gradient(180deg, #FBE3D5 0%, #F5C7B4 30%, #E8A593 60%, #B5755F 90%, #5A3A4A 100%)";
    }
    return "linear-gradient(180deg, #FBE0CC 0%, #F4B79A 28%, #E08F76 55%, #A85A48 80%, #4A2E36 100%)";
  }, [intensity]);

  return (
    <div className="viz" style={{ background: bg, ...style }}>
      {sun && (
        <div style={{
          position: "absolute",
          width: "32%", aspectRatio: "1",
          left: "62%", top: "48%",
          borderRadius: "50%",
          background: "radial-gradient(circle, rgba(255,236,210,0.95) 0%, rgba(247,193,160,0.6) 45%, rgba(247,193,160,0) 72%)",
          filter: "blur(0.4px)",
          zIndex: 1,
        }} />
      )}
      {/* Horizon shimmer */}
      <div style={{
        position: "absolute", left: 0, right: 0, top: "62%", height: "0.6px",
        background: "rgba(255,236,210,0.5)",
        boxShadow: "0 0 12px rgba(255,220,180,0.6)",
        zIndex: 2,
      }} />
      {/* Ocean */}
      <div style={{
        position: "absolute", left: 0, right: 0, top: "62%", bottom: 0,
        background: "linear-gradient(180deg, rgba(74, 46, 54, 0.6) 0%, rgba(46, 31, 42, 0.95) 100%)",
        zIndex: 2,
      }} />
      {/* Palms */}
      {Array.from({ length: palms }).map((_, i) => (
        <PalmSilhouette key={i} index={i} total={palms} />
      ))}
      {caption && <span className={"viz-cap" + (captionTone === "dark" ? " viz-cap--dark" : "")}>{caption}</span>}
    </div>
  );
};

const PalmSilhouette = ({ index, total }) => {
  const positions = [
    { left: "8%", scale: 1.0, h: "82%" },
    { left: "82%", scale: 0.8, h: "70%" },
    { left: "26%", scale: 0.6, h: "58%" },
    { left: "62%", scale: 0.5, h: "50%" },
    { left: "44%", scale: 0.4, h: "42%" },
  ];
  const p = positions[index % positions.length];
  return (
    <svg
      viewBox="0 0 100 200"
      preserveAspectRatio="xMidYMax meet"
      style={{
        position: "absolute",
        bottom: 0,
        left: p.left,
        height: p.h,
        width: "auto",
        zIndex: 3,
        transform: `scale(${p.scale})`,
        transformOrigin: "bottom center",
      }}
    >
      <g fill="#1B1217">
        {/* trunk */}
        <path d="M48 200 Q49 150 50 100 Q50.5 70 49 50" stroke="#1B1217" strokeWidth="2.2" fill="none" strokeLinecap="round" />
        {/* fronds */}
        <path d="M50 50 Q30 36 8 38 Q24 42 32 50 Q22 50 14 56 Q26 54 36 56" />
        <path d="M50 50 Q70 36 92 40 Q76 44 68 50 Q78 52 86 58 Q74 56 64 56" />
        <path d="M50 50 Q42 28 30 14 Q42 24 46 38" />
        <path d="M50 50 Q58 28 70 16 Q58 26 54 38" />
        <path d="M50 50 Q34 56 18 70 Q34 60 42 58" />
        <path d="M50 50 Q66 56 82 72 Q66 60 58 58" />
        {/* coconuts */}
        <circle cx="48" cy="52" r="1.6" />
        <circle cx="52" cy="53" r="1.6" />
      </g>
    </svg>
  );
};

/* Floral abstract — overlapping organic petal shapes */
const FloralBlock = ({ tone = "warm", caption, style, captionTone = "light", density = "medium" }) => {
  const palette = useMemo(() => {
    const palettes = {
      warm: ["#FBE0CC", "#F4B79A", "#E08F76", "#A85A48", "#5A3A4A"],
      blush: ["#FBE3D5", "#F5C7B4", "#E8A593", "#B5755F", "#5A3A4A"],
      garden: ["#F0E5D2", "#D9B89C", "#C97A6B", "#8B5A6F", "#3A2A35"],
      dusk: ["#E8C8B4", "#D29A87", "#A8839B", "#5A3A4A", "#2E1F2A"],
      cream: ["#F5EADC", "#E8D7C2", "#D9B89C", "#A85A48", "#5A3A4A"],
    };
    return palettes[tone] || palettes.warm;
  }, [tone]);

  const blooms = useMemo(() => {
    const rand = seedRand(tone === "warm" ? 11 : tone === "blush" ? 23 : tone === "garden" ? 37 : tone === "dusk" ? 53 : 71);
    const count = density === "lush" ? 14 : density === "sparse" ? 6 : 10;
    return Array.from({ length: count }).map((_, i) => ({
      cx: 8 + rand() * 84,
      cy: 8 + rand() * 84,
      r: 8 + rand() * 22,
      hue: Math.floor(rand() * palette.length),
      rot: rand() * 360,
      petals: 5 + Math.floor(rand() * 4),
      o: 0.55 + rand() * 0.4,
    }));
  }, [tone, density]);

  return (
    <div className="viz" style={{ background: palette[0], ...style }}>
      <div style={{
        position: "absolute", inset: 0,
        background: `radial-gradient(120% 80% at 30% 20%, ${palette[1]}66 0%, transparent 60%),
                     radial-gradient(110% 90% at 80% 80%, ${palette[3]}55 0%, transparent 60%)`,
      }} />
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        {blooms.map((b, i) => (
          <g key={i} transform={`translate(${b.cx} ${b.cy}) rotate(${b.rot})`} opacity={b.o}>
            {Array.from({ length: b.petals }).map((_, p) => (
              <ellipse
                key={p}
                cx={0} cy={-b.r * 0.55}
                rx={b.r * 0.42}
                ry={b.r * 0.7}
                fill={palette[b.hue]}
                transform={`rotate(${(360 / b.petals) * p})`}
              />
            ))}
            <circle r={b.r * 0.18} fill={palette[(b.hue + 2) % palette.length]} />
          </g>
        ))}
        {/* a few stems */}
        {[0.2, 0.55, 0.78].map((x, i) => (
          <path
            key={"stem" + i}
            d={`M ${x * 100} 100 Q ${x * 100 - 4} 70 ${x * 100 + 6} 50 Q ${x * 100 + 12} 30 ${x * 100 + 4} 12`}
            stroke={palette[3]}
            strokeWidth="0.35"
            fill="none"
            opacity="0.35"
          />
        ))}
      </svg>
      {caption && <span className={"viz-cap" + (captionTone === "dark" ? " viz-cap--dark" : "")}>{caption}</span>}
    </div>
  );
};

/* Tablescape — horizontal abstract: linen, candle glow, scattered florals */
const TablescapeBlock = ({ tone = "warm", caption, style }) => {
  const palette = tone === "blush"
    ? ["#FBE3D5", "#F5C7B4", "#E8A593", "#B5755F"]
    : tone === "dusk"
    ? ["#E8C8B4", "#D29A87", "#A8839B", "#5A3A4A"]
    : ["#FBE0CC", "#F4B79A", "#E08F76", "#A85A48"];
  return (
    <div className="viz" style={{
      background: `linear-gradient(180deg, ${palette[0]} 0%, ${palette[1]} 60%, ${palette[2]} 100%)`,
      ...style,
    }}>
      {/* candle glows */}
      {[18, 42, 68, 86].map((x, i) => (
        <div key={i} style={{
          position: "absolute",
          left: `${x}%`, top: `${50 + (i % 2) * 6}%`,
          width: "70px", height: "70px",
          background: "radial-gradient(circle, rgba(255,236,210,0.9) 0%, rgba(255,210,170,0.4) 40%, transparent 70%)",
          transform: "translate(-50%, -50%)",
          mixBlendMode: "screen",
        }} />
      ))}
      {/* scattered petals */}
      <svg viewBox="0 0 200 100" preserveAspectRatio="xMidYMid slice" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        {[
          [20, 72, 8], [44, 80, 6], [70, 70, 9], [102, 76, 7],
          [128, 82, 8], [158, 70, 9], [184, 78, 7],
        ].map(([x, y, r], i) => (
          <g key={i} transform={`translate(${x} ${y}) rotate(${i * 47})`} opacity="0.85">
            {[0, 1, 2, 3, 4].map(p => (
              <ellipse key={p} cx="0" cy={-r * 0.5} rx={r * 0.4} ry={r * 0.7} fill={palette[(i + p) % palette.length]} transform={`rotate(${72 * p})`} />
            ))}
          </g>
        ))}
        {/* table line */}
        <line x1="0" y1="60" x2="200" y2="60" stroke={palette[3]} strokeWidth="0.3" opacity="0.4" />
      </svg>
      {caption && <span className="viz-cap">{caption}</span>}
    </div>
  );
};

/* Coastal Bouquet — vertical bouquet shape against light wash */
const BouquetBlock = ({ tone = "warm", caption, style }) => {
  const palette = tone === "blush"
    ? ["#FAEBE0", "#F2B6A3", "#E08D7B", "#B5604F", "#5A3A4A"]
    : tone === "garden"
    ? ["#F0E5D2", "#D9B89C", "#C97A6B", "#8B5A6F", "#2E1F2A"]
    : ["#F4E2D0", "#EDA188", "#C97A6B", "#A85A48", "#2E1F2A"];

  return (
    <div className="viz" style={{
      background: `radial-gradient(120% 90% at 50% 100%, ${palette[0]} 0%, ${palette[1]}30 50%, transparent 80%), ${palette[0]}`,
      ...style,
    }}>
      <svg viewBox="0 0 100 140" preserveAspectRatio="xMidYMid meet" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        {/* stems trailing down */}
        <g stroke={palette[3]} strokeWidth="0.4" fill="none" opacity="0.6">
          <path d="M50 78 Q48 105 46 138" />
          <path d="M50 78 Q52 105 54 138" />
          <path d="M50 78 Q44 110 38 138" />
          <path d="M50 78 Q56 110 62 138" />
          <path d="M50 78 Q50 108 50 138" />
        </g>
        {/* greenery base */}
        {[
          [40, 70, 10], [60, 70, 11], [50, 64, 12], [34, 64, 8], [66, 64, 8],
        ].map(([x, y, r], i) => (
          <ellipse key={"g" + i} cx={x} cy={y} rx={r * 0.6} ry={r * 1.1} fill={palette[3]} opacity="0.3" transform={`rotate(${i * 30 - 60} ${x} ${y})`} />
        ))}
        {/* blooms */}
        {[
          [30, 50, 11, 1], [70, 52, 12, 2], [50, 38, 14, 2], [40, 60, 10, 3],
          [60, 60, 11, 1], [22, 60, 8, 3], [78, 60, 8, 1], [50, 56, 13, 2],
          [42, 44, 9, 1], [58, 46, 10, 3],
        ].map(([x, y, r, h], i) => (
          <g key={"b" + i} transform={`translate(${x} ${y}) rotate(${i * 37})`} opacity={0.85}>
            {[0, 1, 2, 3, 4].map(p => (
              <ellipse key={p} cx="0" cy={-r * 0.55} rx={r * 0.42} ry={r * 0.72} fill={palette[h]} transform={`rotate(${72 * p})`} />
            ))}
            <circle r={r * 0.2} fill={palette[(h + 1) % palette.length]} />
          </g>
        ))}
      </svg>
      {caption && <span className="viz-cap viz-cap--dark">{caption}</span>}
    </div>
  );
};

/* Coastal — abstract: ocean horizon at sunset, more atmospheric than palms */
const CoastalAtmosphere = ({ caption, style, mode = "dusk" }) => {
  const grad = mode === "dawn"
    ? "linear-gradient(180deg, #FBE0CC 0%, #F4B79A 28%, #E8A593 50%, #C99AA8 72%, #5A3A4A 100%)"
    : mode === "noon"
    ? "linear-gradient(180deg, #DCE4DC 0%, #C9D6D2 40%, #A8C0BA 70%, #5A6E69 100%)"
    : "linear-gradient(180deg, #F4C9B4 0%, #EDA188 25%, #C97A6B 50%, #5A3A4A 80%, #2E1F2A 100%)";
  return (
    <div className="viz" style={{ background: grad, ...style }}>
      {/* sun */}
      <div style={{
        position: "absolute",
        width: "26%", aspectRatio: "1",
        left: "37%", top: "44%",
        borderRadius: "50%",
        background: "radial-gradient(circle, rgba(255,236,210,1) 0%, rgba(255,210,170,0.5) 50%, transparent 78%)",
        zIndex: 1,
      }} />
      {/* horizon */}
      <div style={{
        position: "absolute", left: 0, right: 0, top: "60%", height: "1px",
        background: "rgba(255,236,210,0.6)",
        boxShadow: "0 0 16px rgba(255,220,180,0.7)",
        zIndex: 2,
      }} />
      {/* sea reflections */}
      <div style={{
        position: "absolute", left: 0, right: 0, top: "60%", bottom: 0,
        background: `linear-gradient(180deg, rgba(74,46,54,0.5) 0%, rgba(46,31,42,0.95) 100%)`,
        zIndex: 2,
      }} />
      <svg viewBox="0 0 200 80" preserveAspectRatio="none" style={{ position: "absolute", left: 0, right: 0, top: "60%", bottom: 0, width: "100%", height: "40%", zIndex: 3 }}>
        {[10, 22, 36, 52, 68].map((y, i) => (
          <path key={i} d={`M0 ${y} Q50 ${y - 1} 100 ${y} T200 ${y}`} stroke="rgba(255,236,210,0.18)" strokeWidth="0.3" fill="none" />
        ))}
      </svg>
      {caption && <span className="viz-cap">{caption}</span>}
    </div>
  );
};

/* Flower Field — wildflower meadow background */
const FlowerField = ({ style, overlay = "rgba(251,244,235,0.82)" }) => {
  const rand = seedRand(42);
  const flowers = Array.from({ length: 38 }).map((_, i) => ({
    x: 2 + rand() * 96,
    y: 30 + rand() * 65,
    scale: 0.5 + rand() * 1.1,
    type: Math.floor(rand() * 4),
    hue: Math.floor(rand() * 5),
    rot: rand() * 30 - 15,
  }));
  const palettes = [
    ["#E8A593","#F4B79A","#FBE0CC"],
    ["#C97A6B","#E8A593","#F5C7B4"],
    ["#B5755F","#D29A87","#F2B6A3"],
    ["#8B5A6F","#C97A6B","#EDA188"],
    ["#F5C7B4","#FBE3D5","#E08F76"],
  ];

  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", ...style }}>
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }}>
        {/* Sky gradient */}
        <defs>
          <linearGradient id="fieldSky" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#FBF0E8" />
            <stop offset="55%" stopColor="#F5E4D4" />
            <stop offset="100%" stopColor="#E8D0BC" />
          </linearGradient>
          <linearGradient id="fieldGround" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="#D9C4A8" />
            <stop offset="100%" stopColor="#C4A882" />
          </linearGradient>
        </defs>
        <rect width="100" height="100" fill="url(#fieldSky)" />
        {/* Ground */}
        <rect y="70" width="100" height="30" fill="url(#fieldGround)" opacity="0.5" />
        {/* Horizon haze */}
        <ellipse cx="50" cy="68" rx="60" ry="8" fill="#E8C8A8" opacity="0.3" />

        {/* Stems + flowers */}
        {flowers.map((f, i) => {
          const p = palettes[f.hue];
          const stemH = 8 + f.scale * 10;
          return (
            <g key={i} transform={`translate(${f.x} ${f.y}) rotate(${f.rot}) scale(${f.scale * 0.55})`}>
              {/* stem */}
              <path d={`M0 0 Q${1 + (i%3)-1} ${-stemH*0.5} 0 ${-stemH}`}
                stroke="#8B6B4A" strokeWidth="0.5" fill="none" opacity="0.6" />
              {/* leaves */}
              <ellipse cx="-2" cy={-stemH*0.45} rx="2.2" ry="1" fill="#A8845C" opacity="0.45"
                transform={`rotate(-35 -2 ${-stemH*0.45})`} />
              <ellipse cx="2" cy={-stemH*0.65} rx="2" ry="0.9" fill="#A8845C" opacity="0.4"
                transform={`rotate(30 2 ${-stemH*0.65})`} />

              {/* flower head */}
              {f.type === 0 && ( // 5-petal
                <g transform={`translate(0 ${-stemH})`}>
                  {[0,1,2,3,4].map(p2 => (
                    <ellipse key={p2} cx="0" cy="-3.2" rx="1.8" ry="3"
                      fill={p[0]} opacity="0.9"
                      transform={`rotate(${72*p2})`} />
                  ))}
                  <circle r="1.4" fill={p[2]} />
                  <circle r="0.7" fill="#FBE0CC" />
                </g>
              )}
              {f.type === 1 && ( // daisy
                <g transform={`translate(0 ${-stemH})`}>
                  {[0,1,2,3,4,5,6,7].map(p2 => (
                    <ellipse key={p2} cx="0" cy="-3.5" rx="1.2" ry="3.2"
                      fill={p[1]} opacity="0.88"
                      transform={`rotate(${45*p2})`} />
                  ))}
                  <circle r="1.6" fill={p[0]} />
                  <circle r="0.8" fill="#FBF0E8" opacity="0.9" />
                </g>
              )}
              {f.type === 2 && ( // round bloom
                <g transform={`translate(0 ${-stemH})`}>
                  {[0,1,2,3,4,5].map(p2 => (
                    <ellipse key={p2} cx="0" cy="-2.8" rx="1.6" ry="2.6"
                      fill={p[f.hue%2]} opacity="0.85"
                      transform={`rotate(${60*p2})`} />
                  ))}
                  <circle r="1.2" fill={p[2]} />
                </g>
              )}
              {f.type === 3 && ( // tall wildflower
                <g transform={`translate(0 ${-stemH})`}>
                  {[-2,-1,0,1,2].map((off,j) => (
                    <ellipse key={j} cx={off*1.4} cy={-2-Math.abs(off)*0.8} rx="1.4" ry="2.2"
                      fill={p[j%3]} opacity="0.82" />
                  ))}
                  <circle r="0.9" fill={p[2]} />
                </g>
              )}
            </g>
          );
        })}

        {/* Foreground grass blades */}
        {Array.from({length: 22}).map((_,i) => {
          const r2 = seedRand(i*7+3);
          const x = r2() * 100;
          const h = 4 + r2() * 8;
          return (
            <path key={"g"+i}
              d={`M${x} 100 Q${x + r2()*3 - 1.5} ${100-h*0.6} ${x + r2()*2 - 1} ${100-h}`}
              stroke="#A8845C" strokeWidth="0.4" fill="none" opacity={0.25 + r2()*0.2} />
          );
        })}
      </svg>

      {/* Overlay for text readability */}
      <div style={{ position: "absolute", inset: 0, background: overlay }} />
    </div>
  );
};

/* California Coastline Scene — hero background (v2: elevated, whimsical, windswept) */
const CoastlineScene = ({ style = {} }) => (
  <svg viewBox="0 0 1440 900" preserveAspectRatio="xMidYMid slice"
       xmlns="http://www.w3.org/2000/svg"
       style={{ width:"100%", height:"100%", display:"block", ...style }}>
    <defs>
      {/* Sky — pearl ivory → blush-peach → warm honey at horizon (lighter, more airy) */}
      <linearGradient id="cbSky" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%"   stopColor="#DDD0C8"/>
        <stop offset="18%"  stopColor="#E8D4C8"/>
        <stop offset="40%"  stopColor="#F0DCC8"/>
        <stop offset="64%"  stopColor="#F5E6D0"/>
        <stop offset="84%"  stopColor="#F8EDD8"/>
        <stop offset="100%" stopColor="#FBF2E2"/>
      </linearGradient>
      {/* Warm golden glow at horizon */}
      <radialGradient id="cbGlow" cx="52%" cy="50%" r="48%">
        <stop offset="0%"   stopColor="#FDE8A8" stopOpacity="0.72"/>
        <stop offset="30%"  stopColor="#FAD890" stopOpacity="0.4"/>
        <stop offset="65%"  stopColor="#F8CC80" stopOpacity="0.15"/>
        <stop offset="100%" stopColor="#F8CC80" stopOpacity="0"/>
      </radialGradient>
      {/* Soft peach bloom — upper right, painterly light */}
      <radialGradient id="cbBloom" cx="85%" cy="10%" r="48%">
        <stop offset="0%"   stopColor="#F0C4A8" stopOpacity="0.38"/>
        <stop offset="100%" stopColor="#F0C4A8" stopOpacity="0"/>
      </radialGradient>
      {/* Ocean — misted coastal blue-sage */}
      <linearGradient id="cbOcean" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%"   stopColor="#B4C8CC" stopOpacity="0.9"/>
        <stop offset="30%"  stopColor="#A0B8BA"/>
        <stop offset="68%"  stopColor="#8EAAAA"/>
        <stop offset="100%" stopColor="#82A0A2"/>
      </linearGradient>
      {/* Horizon shimmer */}
      <linearGradient id="cbShimmer" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%"   stopColor="#FAF2E4" stopOpacity="0"/>
        <stop offset="28%"  stopColor="#FDF6EC" stopOpacity="0.75"/>
        <stop offset="72%"  stopColor="#FDF6EC" stopOpacity="0.75"/>
        <stop offset="100%" stopColor="#FAF2E4" stopOpacity="0"/>
      </linearGradient>
      {/* Left cliff — warm sandstone */}
      <linearGradient id="cbCliffL" x1="1" y1="0" x2="0" y2="0">
        <stop offset="0%"   stopColor="#9E8868"/>
        <stop offset="48%"  stopColor="#B89A78"/>
        <stop offset="100%" stopColor="#CCAE8C"/>
      </linearGradient>
      {/* Right cliff — warm sandstone */}
      <linearGradient id="cbCliffR" x1="0" y1="0" x2="1" y2="0">
        <stop offset="0%"   stopColor="#9A8468"/>
        <stop offset="48%"  stopColor="#B09478"/>
        <stop offset="100%" stopColor="#C6A888"/>
      </linearGradient>
      {/* Vignette */}
      <radialGradient id="cbVignette" cx="50%" cy="50%" r="72%">
        <stop offset="0%"   stopColor="#2E1F2A" stopOpacity="0"/>
        <stop offset="100%" stopColor="#2E1F2A" stopOpacity="0.2"/>
      </radialGradient>
      <filter id="cbBXs" x="-5%"  y="-5%"  width="110%" height="110%"><feGaussianBlur stdDeviation="2"/></filter>
      <filter id="cbBSm" x="-10%" y="-10%" width="120%" height="120%"><feGaussianBlur stdDeviation="6"/></filter>
      <filter id="cbBMd" x="-20%" y="-20%" width="140%" height="140%"><feGaussianBlur stdDeviation="14"/></filter>
      <filter id="cbBLg" x="-30%" y="-30%" width="160%" height="160%"><feGaussianBlur stdDeviation="26"/></filter>
      <filter id="cbBXl" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="44"/></filter>
      {/* Film grain — cinematic texture */}
      <filter id="cbGrain" x="0%" y="0%" width="100%" height="100%">
        <feTurbulence type="fractalNoise" baseFrequency="0.72" numOctaves="4" seed="8" stitchTiles="stitch"/>
        <feColorMatrix type="matrix" values="0 0 0 0 0.97  0 0 0 0 0.93  0 0 0 0 0.88  0.12 0.18 0.05 0 0"/>
      </filter>
    </defs>

    {/* ── SKY ── */}
    <rect width="1440" height="900" fill="url(#cbSky)"/>
    <rect width="1440" height="900" fill="url(#cbGlow)"/>
    <rect width="1440" height="900" fill="url(#cbBloom)"/>

    {/* Wispy clouds — more abundant, varied layers */}
    <g filter="url(#cbBXl)" opacity="0.3">
      <ellipse cx="185"  cy="128" rx="295" ry="54" fill="#FBF4EC"/>
      <ellipse cx="560"  cy="85"  rx="228" ry="43" fill="#F8F0E8"/>
      <ellipse cx="910"  cy="145" rx="265" ry="50" fill="#FBF4EC"/>
      <ellipse cx="1275" cy="108" rx="215" ry="41" fill="#F8F0E8"/>
      <ellipse cx="740"  cy="58"  rx="188" ry="34" fill="#F5EDE4"/>
      <ellipse cx="410"  cy="68"  rx="162" ry="29" fill="#F8F0E8"/>
      <ellipse cx="1068" cy="56"  rx="172" ry="31" fill="#F5EDE4"/>
    </g>
    <g filter="url(#cbBLg)" opacity="0.16">
      <ellipse cx="310"  cy="205" rx="185" ry="37" fill="#EEE4D8"/>
      <ellipse cx="1130" cy="190" rx="175" ry="34" fill="#EEE4D8"/>
      <ellipse cx="695"  cy="178" rx="198" ry="38" fill="#EEE4D8"/>
      <ellipse cx="970"  cy="238" rx="152" ry="29" fill="#EDE0D4"/>
      <ellipse cx="215"  cy="258" rx="140" ry="27" fill="#EDE0D4"/>
    </g>

    {/* ── OCEAN ── */}
    <rect x="0" y="442" width="1440" height="458" fill="url(#cbOcean)"/>
    {/* Horizon shimmer */}
    <rect x="375" y="427" width="690" height="30" fill="url(#cbShimmer)" opacity="0.8"/>
    {/* Horizon mist */}
    <ellipse cx="720" cy="442" rx="565" ry="41" fill="#F6F0E4" opacity="0.56" filter="url(#cbBMd)"/>
    {/* Mid-ocean atmospheric haze */}
    <ellipse cx="720" cy="530" rx="430" ry="28" fill="#C0DADA" opacity="0.2" filter="url(#cbBMd)"/>
    {/* Wave lines */}
    <g opacity="0.09" stroke="#B8D4D0" strokeWidth="1.2" fill="none">
      <path d="M 420,470 Q 578,466 740,470 Q 902,474 1022,470"/>
      <path d="M 414,505 Q 574,501 740,505 Q 906,509 1030,505"/>
      <path d="M 410,542 Q 571,538 740,542 Q 909,546 1034,542"/>
      <path d="M 406,580 Q 569,576 740,580 Q 911,584 1036,580"/>
      <path d="M 403,620 Q 567,616 740,620 Q 913,624 1038,620"/>
      <path d="M 400,662 Q 565,658 740,662 Q 915,666 1041,662"/>
      <path d="M 398,707 Q 563,703 740,707 Q 917,711 1043,707"/>
    </g>
    {/* Sparkle near horizon */}
    <ellipse cx="720" cy="494" rx="272" ry="14" fill="#D4EAE6" opacity="0.3" filter="url(#cbBMd)"/>

    {/* ── LEFT CLIFF ── */}
    <path fill="url(#cbCliffL)"
      d="M 0,900 L 0,338
         C 38,325 76,315 114,313 C 150,311 180,314 210,313
         C 240,312 265,308 287,306 C 314,304 334,308 354,314
         C 378,321 397,331 415,343 C 435,356 449,370 462,390
         C 474,410 482,432 488,457 C 493,480 496,507 498,540
         C 500,570 501,602 502,648 L 502,900 Z"/>
    <path fill="#6A5840" opacity="0.15"
      d="M 450,394 C 462,413 472,436 480,460 C 488,484 493,510 496,542
         C 498,570 500,604 501,650 L 507,650
         C 505,602 503,568 500,538 C 497,507 492,480 484,455
         C 475,429 464,407 452,388 Z"/>

    {/* ── RIGHT CLIFF ── */}
    <path fill="url(#cbCliffR)"
      d="M 1440,900 L 1440,366
         C 1407,354 1376,346 1344,344 C 1312,342 1282,346 1254,350
         C 1224,354 1196,360 1168,368 C 1138,376 1111,387 1087,401
         C 1062,415 1040,433 1020,456 C 1000,478 985,504 973,534
         C 961,562 952,594 946,630 L 943,900 Z"/>
    <path fill="#5E4C38" opacity="0.14"
      d="M 1020,458 C 1000,480 985,507 973,537 C 961,565 952,597 946,634
         L 940,634 C 946,596 956,563 969,533 C 982,502 998,475 1021,452 Z"/>

    {/* ── GRASS STRIPS — two layers each side for lushness ── */}
    <path fill="#7C9268" opacity="0.86"
      d="M 0,338 C 38,325 76,315 114,313 C 150,311 180,314 210,313
         C 240,312 265,308 287,306 C 314,304 334,308 354,314
         C 378,321 397,331 415,343 C 432,356 446,369 458,389
         C 442,377 426,365 409,355 C 389,343 368,334 346,328
         C 322,322 297,318 270,317 C 244,316 216,318 188,320
         C 160,322 130,326 100,330 C 72,334 44,340 20,347
         C 11,350 4,344 0,342 Z"/>
    <path fill="#92A87C" opacity="0.42"
      d="M 0,327 C 42,317 84,310 124,309 C 162,308 192,311 222,310
         C 250,309 274,305 294,303 C 318,301 337,305 356,311
         C 374,317 390,327 408,340
         C 392,328 376,320 358,315 C 338,309 314,307 288,309
         C 260,311 232,314 202,316 C 174,318 144,322 114,327
         C 86,332 56,339 28,347 C 18,350 8,345 0,343 Z"/>
    <path fill="#789066" opacity="0.86"
      d="M 1440,366 C 1407,354 1376,346 1344,344 C 1312,342 1282,346 1254,350
         C 1224,354 1196,360 1168,368 C 1138,376 1111,387 1087,401
         C 1064,414 1044,432 1025,454 C 1043,434 1061,416 1083,403
         C 1107,389 1133,379 1161,371 C 1189,363 1217,357 1247,354
         C 1277,351 1309,350 1339,352 C 1369,354 1401,360 1431,370
         C 1437,372 1440,370 1440,370 Z"/>
    <path fill="#8AA07A" opacity="0.4"
      d="M 1440,354 C 1410,345 1380,339 1350,338 C 1320,337 1289,341 1259,346
         C 1229,351 1200,358 1172,367 C 1142,376 1115,388 1092,402
         C 1075,413 1060,427 1046,444
         C 1061,429 1076,415 1094,404 C 1116,391 1142,381 1170,373
         C 1198,365 1226,360 1256,358 C 1286,356 1318,357 1348,359
         C 1376,361 1405,366 1432,375
         C 1438,377 1440,375 1440,375 Z"/>

    {/* ── WILDFLOWER BLOBS — far background (expanded palette) ── */}
    <g filter="url(#cbBMd)" opacity="0.7">
      <ellipse cx="20"   cy="322" rx="23" ry="9"  fill="#F0D4C8"/>
      <ellipse cx="58"   cy="306" rx="27" ry="11" fill="#F5E4A8"/>
      <ellipse cx="105"  cy="295" rx="31" ry="13" fill="#ECCFB8"/>
      <ellipse cx="154"  cy="292" rx="26" ry="10" fill="#E8BCBC"/>
      <ellipse cx="200"  cy="290" rx="22" ry="9"  fill="#F5E4A8"/>
      <ellipse cx="244"  cy="287" rx="25" ry="10" fill="#E8A898"/>
      <ellipse cx="284"  cy="291" rx="23" ry="9"  fill="#ECCFB8"/>
      <ellipse cx="320"  cy="299" rx="24" ry="10" fill="#F5EDE0"/>
      <ellipse cx="356"  cy="309" rx="21" ry="8"  fill="#F0D4C8"/>
      <ellipse cx="388"  cy="321" rx="19" ry="7"  fill="#F5E4A8"/>
      <ellipse cx="416"  cy="336" rx="16" ry="6"  fill="#ECCFB8"/>
      <ellipse cx="442"  cy="354" rx="14" ry="6"  fill="#E8BCBC"/>
      <ellipse cx="1020" cy="452" rx="14" ry="6"  fill="#F0D4C8"/>
      <ellipse cx="1050" cy="393" rx="17" ry="7"  fill="#F5E4A8"/>
      <ellipse cx="1083" cy="379" rx="22" ry="9"  fill="#ECCFB8"/>
      <ellipse cx="1122" cy="365" rx="26" ry="10" fill="#E8BCBC"/>
      <ellipse cx="1164" cy="354" rx="26" ry="10" fill="#F5E4A8"/>
      <ellipse cx="1207" cy="347" rx="24" ry="9"  fill="#E8A898"/>
      <ellipse cx="1249" cy="342" rx="25" ry="9"  fill="#ECCFB8"/>
      <ellipse cx="1291" cy="338" rx="22" ry="8"  fill="#F5EDE0"/>
      <ellipse cx="1331" cy="337" rx="23" ry="8"  fill="#F0D4C8"/>
      <ellipse cx="1369" cy="341" rx="21" ry="8"  fill="#F5E4A8"/>
      <ellipse cx="1405" cy="349" rx="20" ry="7"  fill="#ECCFB8"/>
      <ellipse cx="1434" cy="358" rx="17" ry="6"  fill="#E8BCBC"/>
    </g>

    {/* ── WILDFLOWERS — windswept curved stems, full palette ── */}
    <g>
      {/* LEFT cluster 1 — windswept left */}
      <path d="M13,337 Q10,321 7,304"   stroke="#6E8458" strokeWidth="1.1" fill="none"/><circle cx="7"   cy="302" r="5.5" fill="#F4E2A0" opacity="0.95"/>
      <path d="M25,333 Q22,316 19,298"  stroke="#8A9E72" strokeWidth="1.3" fill="none"/><circle cx="19"  cy="296" r="6.5" fill="#F5EDE0" opacity="0.9"/>
      <path d="M37,331 Q35,316 33,303"  stroke="#68806E" strokeWidth="1"   fill="none"/><circle cx="33"  cy="301" r="5"   fill="#E8A898" opacity="0.92"/>
      <path d="M49,329 Q47,314 45,298"  stroke="#748A5E" strokeWidth="1.2" fill="none"/><circle cx="45"  cy="296" r="5.8" fill="#DEBEBE"  opacity="0.9"/>
      {/* taller background stems */}
      <path d="M19,335 Q15,313 11,285"  stroke="#789068" strokeWidth="1"   fill="none"/><circle cx="11"  cy="283" r="4.5" fill="#F4E2A0"  opacity="0.82"/>
      <path d="M31,330 Q27,309 23,281"  stroke="#6E8458" strokeWidth="1.1" fill="none"/><circle cx="23"  cy="279" r="4.8" fill="#ECCFB8"  opacity="0.85"/>

      {/* LEFT cluster 2 */}
      <path d="M75,321 Q72,304 69,286"  stroke="#748A5E" strokeWidth="1.2" fill="none"/><circle cx="69"  cy="284" r="5.8" fill="#F4E2A0"  opacity="0.92"/>
      <path d="M88,317 Q86,299 83,282"  stroke="#8A9E72" strokeWidth="1.4" fill="none"/><circle cx="83"  cy="280" r="7"   fill="#F5EDE0"  opacity="0.88"/>
      <path d="M101,314 Q99,297 97,281" stroke="#68806E" strokeWidth="1.1" fill="none"/><circle cx="97"  cy="279" r="5.2" fill="#E8A898"  opacity="0.9"/>
      <path d="M113,311 Q112,295 110,280" stroke="#748A5E" strokeWidth="1" fill="none"/><circle cx="110" cy="278" r="4.8" fill="#DEBEBE"  opacity="0.88"/>
      <path d="M80,318 Q77,296 74,267"  stroke="#7A9068" strokeWidth="1"   fill="none"/><circle cx="74"  cy="265" r="4.2" fill="#F4E2A0"  opacity="0.8"/>
      <path d="M96,315 Q93,294 90,265"  stroke="#68806E" strokeWidth="1.1" fill="none"/><circle cx="90"  cy="263" r="4.5" fill="#E8C0C0"  opacity="0.82"/>

      {/* LEFT cluster 3 */}
      <path d="M139,311 Q136,294 133,275" stroke="#8A9E72" strokeWidth="1.3" fill="none"/><circle cx="133" cy="273" r="6.2" fill="#ECCFB8"  opacity="0.92"/>
      <path d="M153,310 Q151,293 148,275" stroke="#748A5E" strokeWidth="1.2" fill="none"/><circle cx="148" cy="273" r="5.8" fill="#F4E2A0"  opacity="0.9"/>
      <path d="M166,309 Q164,293 162,276" stroke="#68806E" strokeWidth="1.1" fill="none"/><circle cx="162" cy="274" r="5.2" fill="#F5EDE0"  opacity="0.88"/>
      <path d="M179,309 Q178,293 176,276" stroke="#8A9E72" strokeWidth="1.3" fill="none"/><circle cx="176" cy="274" r="6"   fill="#E8A898"  opacity="0.9"/>
      <path d="M192,309 Q191,293 189,278" stroke="#748A5E" strokeWidth="1"   fill="none"/><circle cx="189" cy="276" r="4.8" fill="#DEBEBE"  opacity="0.88"/>
      <path d="M146,310 Q143,287 140,253" stroke="#7A9068" strokeWidth="1"   fill="none"/><circle cx="140" cy="251" r="4"   fill="#F4E2A0"  opacity="0.78"/>
      <path d="M161,309 Q158,285 155,252" stroke="#68806E" strokeWidth="1.1" fill="none"/><circle cx="155" cy="250" r="4.5" fill="#E8C0C0"  opacity="0.8"/>
      <path d="M175,309 Q173,286 170,254" stroke="#748A5E" strokeWidth="1"   fill="none"/><circle cx="170" cy="252" r="4.2" fill="#ECCFB8"  opacity="0.78"/>

      {/* LEFT cluster 4 */}
      <path d="M214,310 Q212,294 209,276" stroke="#748A5E" strokeWidth="1.2" fill="none"/><circle cx="209" cy="274" r="5.8" fill="#F4E2A0"  opacity="0.92"/>
      <path d="M227,309 Q225,292 223,274" stroke="#8A9E72" strokeWidth="1.4" fill="none"/><circle cx="223" cy="272" r="7"   fill="#F5EDE0"  opacity="0.9"/>
      <path d="M241,308 Q239,292 237,275" stroke="#68806E" strokeWidth="1.1" fill="none"/><circle cx="237" cy="273" r="5.2" fill="#E8A898"  opacity="0.9"/>
      <path d="M254,308 Q252,292 250,276" stroke="#748A5E" strokeWidth="1"   fill="none"/><circle cx="250" cy="274" r="4.8" fill="#DEBEBE"  opacity="0.88"/>
      <path d="M220,309 Q217,285 214,252" stroke="#7A9068" strokeWidth="1.1" fill="none"/><circle cx="214" cy="250" r="4.5" fill="#F4E2A0"  opacity="0.8"/>
      <path d="M235,308 Q232,284 229,251" stroke="#68806E" strokeWidth="1"   fill="none"/><circle cx="229" cy="249" r="4.2" fill="#E8C0C0"  opacity="0.78"/>

      {/* LEFT cluster 5 */}
      <path d="M277,311 Q275,294 272,276" stroke="#8A9E72" strokeWidth="1.3" fill="none"/><circle cx="272" cy="274" r="6.2" fill="#ECCFB8"  opacity="0.92"/>
      <path d="M291,311 Q289,295 286,277" stroke="#748A5E" strokeWidth="1.2" fill="none"/><circle cx="286" cy="275" r="5.8" fill="#F4E2A0"  opacity="0.9"/>
      <path d="M305,312 Q303,296 301,279" stroke="#68806E" strokeWidth="1"   fill="none"/><circle cx="301" cy="277" r="5.2" fill="#F5EDE0"  opacity="0.88"/>
      <path d="M319,314 Q317,298 315,281" stroke="#748A5E" strokeWidth="1.1" fill="none"/><circle cx="315" cy="279" r="5.2" fill="#E8A898"  opacity="0.9"/>
      <path d="M283,311 Q281,287 278,253" stroke="#7A9068" strokeWidth="1"   fill="none"/><circle cx="278" cy="251" r="4.2" fill="#F4E2A0"  opacity="0.78"/>
      <path d="M298,311 Q296,287 294,254" stroke="#68806E" strokeWidth="1.1" fill="none"/><circle cx="294" cy="252" r="4.5" fill="#DEBEBE"  opacity="0.8"/>

      {/* LEFT cluster 6 */}
      <path d="M341,319 Q339,303 337,286" stroke="#8A9E72" strokeWidth="1.3" fill="none"/><circle cx="337" cy="284" r="5.8" fill="#ECCFB8"  opacity="0.92"/>
      <path d="M355,322 Q353,306 350,290" stroke="#748A5E" strokeWidth="1.2" fill="none"/><circle cx="350" cy="288" r="6.2" fill="#F4E2A0"  opacity="0.9"/>
      <path d="M369,327 Q367,312 365,296" stroke="#68806E" strokeWidth="1"   fill="none"/><circle cx="365" cy="294" r="5.2" fill="#F5EDE0"  opacity="0.88"/>
      <path d="M382,333 Q380,318 378,303" stroke="#748A5E" strokeWidth="1"   fill="none"/><circle cx="378" cy="301" r="4.8" fill="#E8A898"  opacity="0.9"/>
      <path d="M347,319 Q345,295 343,261" stroke="#7A9068" strokeWidth="1.1" fill="none"/><circle cx="343" cy="259" r="4.5" fill="#F4E2A0"  opacity="0.8"/>
      <path d="M363,323 Q361,299 359,266" stroke="#68806E" strokeWidth="1"   fill="none"/><circle cx="359" cy="264" r="4.2" fill="#DEBEBE"  opacity="0.78"/>

      {/* LEFT cluster 7 — slope */}
      <path d="M407,341 Q405,326 402,310" stroke="#748A5E" strokeWidth="1.1" fill="none"/><circle cx="402" cy="308" r="5.2" fill="#F4E2A0"  opacity="0.92"/>
      <path d="M421,349 Q419,334 416,318" stroke="#8A9E72" strokeWidth="1.2" fill="none"/><circle cx="416" cy="316" r="5.8" fill="#F5EDE0"  opacity="0.9"/>
      <path d="M435,357 Q433,343 431,329" stroke="#68806E" strokeWidth="1"   fill="none"/><circle cx="431" cy="327" r="4.8" fill="#E8A898"  opacity="0.88"/>
      <path d="M447,369 Q445,356 443,344" stroke="#748A5E" strokeWidth="1"   fill="none"/><circle cx="443" cy="342" r="4.2" fill="#DEBEBE"  opacity="0.88"/>

      {/* RIGHT cluster R1 — slope */}
      <path d="M1021,457 Q1019,442 1016,426" stroke="#748A5E" strokeWidth="1.1" fill="none"/><circle cx="1016" cy="424" r="5.2" fill="#F4E2A0"  opacity="0.92"/>
      <path d="M1035,447 Q1033,431 1030,414" stroke="#8A9E72" strokeWidth="1.2" fill="none"/><circle cx="1030" cy="412" r="5.8" fill="#F5EDE0"  opacity="0.9"/>
      <path d="M1049,439 Q1047,424 1044,407" stroke="#68806E" strokeWidth="1"   fill="none"/><circle cx="1044" cy="405" r="5.2" fill="#E8A898"  opacity="0.88"/>
      <path d="M1028,453 Q1025,432 1021,402" stroke="#7A9068" strokeWidth="1.1" fill="none"/><circle cx="1021" cy="400" r="4.5" fill="#F4E2A0"  opacity="0.82"/>

      {/* RIGHT cluster R2 */}
      <path d="M1075,397 Q1073,380 1070,362" stroke="#748A5E" strokeWidth="1.2" fill="none"/><circle cx="1070" cy="360" r="5.8" fill="#ECCFB8"  opacity="0.92"/>
      <path d="M1089,390 Q1087,373 1084,355" stroke="#8A9E72" strokeWidth="1.3" fill="none"/><circle cx="1084" cy="353" r="6.5" fill="#F4E2A0"  opacity="0.9"/>
      <path d="M1103,384 Q1101,367 1098,350" stroke="#68806E" strokeWidth="1.1" fill="none"/><circle cx="1098" cy="348" r="5.2" fill="#F5EDE0"  opacity="0.88"/>
      <path d="M1117,378 Q1115,361 1112,344" stroke="#748A5E" strokeWidth="1"   fill="none"/><circle cx="1112" cy="342" r="4.8" fill="#DEBEBE"  opacity="0.88"/>
      <path d="M1082,393 Q1080,369 1077,337" stroke="#7A9068" strokeWidth="1"   fill="none"/><circle cx="1077" cy="335" r="4.2" fill="#F4E2A0"  opacity="0.8"/>
      <path d="M1097,386 Q1094,362 1091,330" stroke="#68806E" strokeWidth="1.1" fill="none"/><circle cx="1091" cy="328" r="4.5" fill="#E8C0C0"  opacity="0.82"/>

      {/* RIGHT cluster R3 */}
      <path d="M1137,370 Q1135,353 1132,334" stroke="#8A9E72" strokeWidth="1.3" fill="none"/><circle cx="1132" cy="332" r="6.2" fill="#ECCFB8"  opacity="0.92"/>
      <path d="M1151,365 Q1149,348 1146,329" stroke="#748A5E" strokeWidth="1.2" fill="none"/><circle cx="1146" cy="327" r="5.8" fill="#F4E2A0"  opacity="0.9"/>
      <path d="M1165,361 Q1163,344 1160,326" stroke="#68806E" strokeWidth="1.1" fill="none"/><circle cx="1160" cy="324" r="5.2" fill="#E8A898"  opacity="0.88"/>
      <path d="M1179,357 Q1177,340 1174,322" stroke="#748A5E" strokeWidth="1"   fill="none"/><circle cx="1174" cy="320" r="4.8" fill="#DEBEBE"  opacity="0.88"/>
      <path d="M1143,369 Q1141,344 1138,310" stroke="#7A9068" strokeWidth="1"   fill="none"/><circle cx="1138" cy="308" r="4.2" fill="#F4E2A0"  opacity="0.78"/>
      <path d="M1158,363 Q1156,339 1153,306" stroke="#68806E" strokeWidth="1.1" fill="none"/><circle cx="1153" cy="304" r="4.5" fill="#E8C0C0"  opacity="0.8"/>
      <path d="M1173,359 Q1170,335 1167,303" stroke="#748A5E" strokeWidth="1"   fill="none"/><circle cx="1167" cy="301" r="4.2" fill="#ECCFB8"  opacity="0.78"/>

      {/* RIGHT cluster R4 */}
      <path d="M1201,351 Q1199,334 1196,315" stroke="#748A5E" strokeWidth="1.2" fill="none"/><circle cx="1196" cy="313" r="5.8" fill="#F5EDE0"  opacity="0.92"/>
      <path d="M1215,347 Q1213,330 1210,311" stroke="#8A9E72" strokeWidth="1.4" fill="none"/><circle cx="1210" cy="309" r="7"   fill="#F4E2A0"  opacity="0.9"/>
      <path d="M1229,344 Q1227,327 1224,309" stroke="#68806E" strokeWidth="1.1" fill="none"/><circle cx="1224" cy="307" r="5.2" fill="#ECCFB8"  opacity="0.88"/>
      <path d="M1243,342 Q1241,325 1238,307" stroke="#748A5E" strokeWidth="1"   fill="none"/><circle cx="1238" cy="305" r="4.8" fill="#E8A898"  opacity="0.88"/>
      <path d="M1207,350 Q1205,325 1202,290" stroke="#7A9068" strokeWidth="1.1" fill="none"/><circle cx="1202" cy="288" r="4.5" fill="#F4E2A0"  opacity="0.8"/>
      <path d="M1222,346 Q1220,321 1217,287" stroke="#68806E" strokeWidth="1"   fill="none"/><circle cx="1217" cy="285" r="4.2" fill="#DEBEBE"  opacity="0.78"/>

      {/* RIGHT cluster R5 */}
      <path d="M1265,339 Q1263,322 1260,303" stroke="#8A9E72" strokeWidth="1.3" fill="none"/><circle cx="1260" cy="301" r="6.2" fill="#F5EDE0"  opacity="0.92"/>
      <path d="M1279,337 Q1277,320 1274,302" stroke="#748A5E" strokeWidth="1.2" fill="none"/><circle cx="1274" cy="300" r="5.8" fill="#F4E2A0"  opacity="0.9"/>
      <path d="M1293,336 Q1291,319 1288,301" stroke="#68806E" strokeWidth="1"   fill="none"/><circle cx="1288" cy="299" r="5.2" fill="#ECCFB8"  opacity="0.88"/>
      <path d="M1307,336 Q1305,319 1302,301" stroke="#748A5E" strokeWidth="1.1" fill="none"/><circle cx="1302" cy="299" r="5.2" fill="#E8A898"  opacity="0.9"/>
      <path d="M1271,338 Q1269,312 1266,278" stroke="#7A9068" strokeWidth="1"   fill="none"/><circle cx="1266" cy="276" r="4.2" fill="#F4E2A0"  opacity="0.78"/>
      <path d="M1286,337 Q1284,311 1281,277" stroke="#68806E" strokeWidth="1.1" fill="none"/><circle cx="1281" cy="275" r="4.5" fill="#DEBEBE"  opacity="0.8"/>

      {/* RIGHT cluster R6 */}
      <path d="M1329,337 Q1327,320 1324,302" stroke="#748A5E" strokeWidth="1.2" fill="none"/><circle cx="1324" cy="300" r="5.8" fill="#ECCFB8"  opacity="0.92"/>
      <path d="M1343,338 Q1341,321 1338,304" stroke="#8A9E72" strokeWidth="1.3" fill="none"/><circle cx="1338" cy="302" r="6.2" fill="#F4E2A0"  opacity="0.9"/>
      <path d="M1357,340 Q1355,323 1352,307" stroke="#68806E" strokeWidth="1.1" fill="none"/><circle cx="1352" cy="305" r="5.2" fill="#F5EDE0"  opacity="0.88"/>
      <path d="M1371,343 Q1369,326 1366,310" stroke="#748A5E" strokeWidth="1"   fill="none"/><circle cx="1366" cy="308" r="4.8" fill="#E8A898"  opacity="0.88"/>
      <path d="M1335,337 Q1333,312 1330,278" stroke="#7A9068" strokeWidth="1.1" fill="none"/><circle cx="1330" cy="276" r="4.5" fill="#F4E2A0"  opacity="0.8"/>
      <path d="M1350,339 Q1348,314 1345,280" stroke="#68806E" strokeWidth="1"   fill="none"/><circle cx="1345" cy="278" r="4.2" fill="#DEBEBE"  opacity="0.78"/>

      {/* RIGHT cluster R7 */}
      <path d="M1391,348 Q1389,331 1386,314" stroke="#8A9E72" strokeWidth="1.2" fill="none"/><circle cx="1386" cy="312" r="5.8" fill="#ECCFB8"  opacity="0.92"/>
      <path d="M1405,353 Q1403,337 1400,321" stroke="#748A5E" strokeWidth="1.1" fill="none"/><circle cx="1400" cy="319" r="5.2" fill="#F4E2A0"  opacity="0.9"/>
      <path d="M1419,359 Q1417,344 1414,329" stroke="#68806E" strokeWidth="1"   fill="none"/><circle cx="1414" cy="327" r="4.8" fill="#F5EDE0"  opacity="0.88"/>
      <path d="M1433,366 Q1431,352 1428,338" stroke="#748A5E" strokeWidth="1"   fill="none"/><circle cx="1428" cy="336" r="4.2" fill="#E8A898"  opacity="0.88"/>
      <path d="M1397,350 Q1395,325 1392,291" stroke="#7A9068" strokeWidth="1"   fill="none"/><circle cx="1392" cy="289" r="4.5" fill="#F4E2A0"  opacity="0.8"/>
    </g>

    {/* ── ATMOSPHERE + FILM GRAIN ── */}
    <ellipse cx="720" cy="442" rx="600" ry="43" fill="#FAF2E6" opacity="0.4" filter="url(#cbBSm)"/>
    <rect width="1440" height="900" fill="#FAF0E0" opacity="0.04"/>
    {/* Film grain — very subtle warm cinematic texture */}
    <rect width="1440" height="900" filter="url(#cbGrain)" opacity="0.06"/>
    {/* Vignette */}
    <rect width="1440" height="900" fill="url(#cbVignette)"/>
  </svg>
);

/* Tiny logo mark */
const BrandMark = ({ size = 28, color = "currentColor" }) => (
  <svg width={size} height={size} viewBox="0 0 32 32" fill="none">
    <circle cx="16" cy="16" r="15.5" stroke={color} strokeWidth="0.6" opacity="0.5" />
    <g stroke={color} strokeWidth="0.7" fill="none" strokeLinecap="round">
      <path d="M16 7 Q12 12 12 16 Q12 20 16 25" />
      <path d="M16 7 Q20 12 20 16 Q20 20 16 25" />
      <path d="M7 16 Q12 13 16 16 Q20 19 25 16" />
      <path d="M9 11 Q14 14 16 16 Q18 18 23 21" />
      <path d="M9 21 Q14 18 16 16 Q18 14 23 11" />
    </g>
    <circle cx="16" cy="16" r="1.2" fill={color} />
  </svg>
);

/* simple thin arrow */
const Arrow = ({ size = 12 }) => (
  <svg width={size * 1.6} height={size} viewBox="0 0 20 12" fill="none" className="arrow">
    <path d="M0 6 H17 M12 1 L18 6 L12 11" stroke="currentColor" strokeWidth="1" fill="none" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

Object.assign(window, {
  SunsetSky, FloralBlock, TablescapeBlock, BouquetBlock, CoastalAtmosphere, FlowerField, CoastlineScene, BrandMark, Arrow,
});