// scenes.jsx — Cinematic 15s timeline. Composes atmospheric backdrops with
// the recreated SURVIVAL phone screens and end-card text.

const G = {
  // Cinematic grade
  inkBlack: '#06080a',
  forestDeep: '#0a1612',
  forestMid: '#0e2218',
  forestNear: '#1a3422',
  mist: '#5a7568',
  amber: '#d8a55c',
  amberSoft: 'rgba(216, 165, 92, 0.45)',
  coldBlue: '#3a5868',
  primary: '#3FDB5A',
  white: '#e8f0e8',
  // Letterbox
  bar: '#000',
};

// ── Atmospheric layers ──────────────────────────────────────────────────────

function MistLayer({ opacity = 0.6, drift = 0 }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(ellipse 70% 50% at ${50 + drift * 8}% 60%, rgba(180,200,190,0.25), transparent 70%),
                   radial-gradient(ellipse 40% 30% at ${30 - drift * 4}% 75%, rgba(140,170,160,0.18), transparent 65%),
                   radial-gradient(ellipse 50% 35% at ${75 + drift * 6}% 55%, rgba(160,180,170,0.16), transparent 70%)`,
      opacity, pointerEvents: 'none', filter: 'blur(2px)',
    }} />
  );
}

function Vignette({ strength = 0.6 }) {
  return (
    <div style={{
      position: 'absolute', inset: 0,
      background: `radial-gradient(ellipse 80% 90% at 50% 50%, transparent 35%, rgba(0,0,0,${strength}) 100%)`,
      pointerEvents: 'none', mixBlendMode: 'multiply',
    }} />
  );
}

function Letterbox() {
  return (
    <>
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 110, background: G.bar, zIndex: 40, pointerEvents: 'none' }} />
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 110, background: G.bar, zIndex: 40, pointerEvents: 'none' }} />
    </>
  );
}

// Tree silhouettes — feathered tops, vertical strokes
function TreeBand({ y = 600, height = 200, density = 14, color = G.forestDeep, seed = 1, opacity = 1 }) {
  // Deterministic pseudo-random
  const rand = (i) => {
    const x = Math.sin(seed * 37 + i * 91) * 10000;
    return x - Math.floor(x);
  };
  const trees = [];
  for (let i = 0; i < density; i++) {
    const x = (i / density) * 100 + (rand(i) - 0.5) * 4;
    const h = 0.55 + rand(i + 100) * 0.45;
    const w = 5 + rand(i + 200) * 7;
    trees.push(
      <path
        key={i}
        d={`M ${x - w/2} ${100} L ${x - w/2} ${100 - h*80} 
            Q ${x - w/3} ${100 - h*90}, ${x} ${100 - h*100}
            Q ${x + w/3} ${100 - h*90}, ${x + w/2} ${100 - h*80}
            L ${x + w/2} 100 Z`}
        fill={color}
      />
    );
  }
  return (
    <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{
      position: 'absolute', left: 0, right: 0, top: y, height,
      width: '100%', display: 'block', opacity,
    }}>
      {trees}
    </svg>
  );
}

// Mountain silhouettes — jagged ridge line
function MountainRidge({ y = 400, height = 240, color = G.coldBlue, seed = 1, opacity = 1 }) {
  const rand = (i) => {
    const x = Math.sin(seed * 53 + i * 67) * 10000;
    return x - Math.floor(x);
  };
  const points = ['0,100'];
  const steps = 18;
  for (let i = 0; i <= steps; i++) {
    const x = (i / steps) * 100;
    const peakH = 35 + rand(i) * 50;
    points.push(`${x},${100 - peakH}`);
  }
  points.push('100,100');
  return (
    <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{
      position: 'absolute', left: 0, right: 0, top: y, height,
      width: '100%', display: 'block', opacity,
    }}>
      <polygon points={points.join(' ')} fill={color}/>
    </svg>
  );
}

// Sun shafts — radial gleam suggesting golden-hour light through trees
function SunShaft({ x = '60%', y = '40%', size = 600, color = G.amberSoft }) {
  return (
    <div style={{
      position: 'absolute', left: x, top: y,
      width: size, height: size, marginLeft: -size/2, marginTop: -size/2,
      background: `radial-gradient(circle, ${color} 0%, transparent 60%)`,
      mixBlendMode: 'screen', pointerEvents: 'none',
    }} />
  );
}

// Floating dust particles
function Particles({ count = 30, seed = 1, opacity = 0.4 }) {
  const time = useTime();
  const dots = [];
  for (let i = 0; i < count; i++) {
    const r1 = ((Math.sin(seed * 13 + i * 31) + 1) * 50);
    const r2 = ((Math.sin(seed * 7 + i * 47) + 1) * 50);
    const drift = Math.sin(time * 0.3 + i) * 1.5;
    const bob = Math.sin(time * 0.6 + i * 1.3) * 1;
    const size = 1.2 + ((Math.sin(seed + i * 5) + 1) * 0.8);
    dots.push(
      <div key={i} style={{
        position: 'absolute',
        left: `${r1 + drift}%`, top: `${r2 + bob}%`,
        width: size, height: size, borderRadius: '50%',
        background: G.amber, opacity: opacity * (0.4 + (Math.sin(time*1.2 + i) + 1) * 0.3),
        boxShadow: `0 0 ${size*2}px ${G.amber}`,
      }} />
    );
  }
  return <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', mixBlendMode: 'screen' }}>{dots}</div>;
}

// ── Phone composition wrapper ──────────────────────────────────────────────
// Renders an iPhone shell at given transform with the given screen inside.
function PhoneFrame({ children, scale = 1, x = 0, y = 0, rotate = 0, glow = false }) {
  return (
    <div style={{
      position: 'absolute', left: '50%', top: '50%',
      width: 320, height: 670,
      transform: `translate(-50%, -50%) translate(${x}px, ${y}px) scale(${scale}) rotate(${rotate}deg)`,
      transformOrigin: 'center',
      willChange: 'transform',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: '#000', borderRadius: 50,
        boxShadow: glow
          ? '0 30px 80px rgba(0,0,0,0.65), 0 0 80px rgba(63,219,90,0.25), 0 0 0 1.5px rgba(255,255,255,0.08)'
          : '0 40px 100px rgba(0,0,0,0.75), 0 0 0 1.5px rgba(255,255,255,0.06)',
        padding: 6,
      }}>
        <div style={{
          position: 'relative', width: '100%', height: '100%',
          borderRadius: 44, overflow: 'hidden', background: '#000',
        }}>
          {children}
          {/* Glass sheen */}
          <div style={{
            position: 'absolute', inset: 0, borderRadius: 44,
            background: 'linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 25%, transparent 70%, rgba(255,255,255,0.04) 100%)',
            pointerEvents: 'none',
          }} />
        </div>
      </div>
    </div>
  );
}

// ── SCENE 1: Cold open — atmospheric forest ────────────────────────────────
function Scene1() {
  const { progress, localTime } = useSprite();
  const camPush = 1 + progress * 0.04;
  const wordmarkOpacity = interpolate([0, 0.35, 0.8, 1], [0, 1, 1, 0])(progress);
  const wordmarkY = interpolate([0, 0.4], [12, 0], Easing.easeOutCubic)(progress);

  return (
    <>
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, ${G.forestDeep} 0%, ${G.forestMid} 60%, ${G.inkBlack} 100%)`,
        transform: `scale(${camPush})`, transformOrigin: 'center 60%',
      }}>
        <SunShaft x="65%" y="35%" size={800} color="rgba(216, 165, 92, 0.3)"/>
        <MountainRidge y={45} height={30} color={G.forestDeep} seed={3} opacity={0.5}/>
        <TreeBand y={50} height={50} density={10} color="#08120c" seed={1}/>
        <TreeBand y={55} height={45} density={14} color="#06100a" seed={5}/>
        <TreeBand y={62} height={38} density={22} color="#040806" seed={9}/>
        <MistLayer opacity={0.7} drift={progress}/>
        <Particles count={20} seed={2}/>
      </div>
      <Vignette strength={0.7}/>

      {/* Wordmark */}
      <div style={{
        position: 'absolute', left: '50%', top: '50%',
        transform: `translate(-50%, calc(-50% + ${wordmarkY}px))`,
        opacity: wordmarkOpacity, textAlign: 'center',
      }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 14,
          color: G.amber, letterSpacing: 6, marginBottom: 18, opacity: 0.85,
        }}>WHEN THE GRID GOES DARK</div>
      </div>
    </>
  );
}

// ── SCENE 2: Home screen reveal ────────────────────────────────────────────
function Scene2() {
  const { progress } = useSprite();
  const phoneEnter = Easing.easeOutCubic(clamp(progress * 2, 0, 1));
  const phoneScale = 0.85 + 0.05 * phoneEnter;
  const phoneY = (1 - phoneEnter) * 100;
  const captionOp = interpolate([0.25, 0.45, 0.85, 1], [0, 1, 1, 0])(progress);
  const camPush = 1 + progress * 0.03;

  return (
    <>
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, ${G.forestDeep} 0%, ${G.forestMid} 50%, ${G.inkBlack} 100%)`,
        transform: `scale(${camPush})`, transformOrigin: '50% 60%',
      }}>
        <SunShaft x="20%" y="30%" size={700} color="rgba(216, 165, 92, 0.22)"/>
        <TreeBand y={20} height={70} density={8} color="#050a07" seed={2}/>
        <TreeBand y={35} height={60} density={11} color="#030604" seed={6}/>
        <MistLayer opacity={0.45} drift={progress * 0.5}/>
        <Particles count={15} seed={7}/>
      </div>
      <Vignette strength={0.6}/>

      <PhoneFrame scale={phoneScale} y={phoneY} rotate={-1.5} glow>
        <HomeScreen/>
        <StatusBar/>
        <TabBar active="home"/>
      </PhoneFrame>

      {/* Caption */}
      <div style={{
        position: 'absolute', right: 80, top: '50%',
        transform: 'translateY(-50%)', maxWidth: 480,
        opacity: captionOp,
      }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 13,
          color: G.amber, letterSpacing: 4, marginBottom: 12,
        }}>01 / KNOW</div>
        <div style={{
          fontFamily: 'Inter, system-ui', fontWeight: 800, fontSize: 56,
          color: G.white, lineHeight: 1.0, letterSpacing: -1,
        }}>An entire<br/>survival library<br/><span style={{color: G.primary}}>in your pocket.</span></div>
      </div>
    </>
  );
}

// ── SCENE 3: Plant ID hero close-up ────────────────────────────────────────
function Scene3() {
  const { progress } = useSprite();
  const camPush = 1.05 + progress * 0.06;
  const phoneScale = 1.05 + progress * 0.03;
  const tagOp = interpolate([0.15, 0.35, 0.9, 1], [0, 1, 1, 0])(progress);
  const tagX = interpolate([0, 0.35], [-30, 0], Easing.easeOutCubic)(progress);

  return (
    <>
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse 70% 60% at 50% 55%, ${G.forestNear}, ${G.forestDeep} 60%, ${G.inkBlack} 100%)`,
        transform: `scale(${camPush})`, transformOrigin: 'center',
        filter: 'blur(8px)',
      }}>
        <SunShaft x="40%" y="40%" size={1000} color="rgba(63, 219, 90, 0.12)"/>
      </div>
      <Vignette strength={0.55}/>

      <PhoneFrame scale={phoneScale} x={100} rotate={2} glow>
        <PlantIDScreen/>
        <StatusBar/>
        <TabBar active="nature"/>
      </PhoneFrame>

      {/* Side caption */}
      <div style={{
        position: 'absolute', left: 100, top: '50%',
        transform: `translateY(-50%) translateX(${tagX}px)`,
        opacity: tagOp, maxWidth: 420,
      }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 13,
          color: G.amber, letterSpacing: 4, marginBottom: 12,
        }}>02 / FORAGE</div>
        <div style={{
          fontFamily: 'Inter, system-ui', fontWeight: 800, fontSize: 48,
          color: G.white, lineHeight: 1.05, letterSpacing: -0.8,
        }}>Identify<br/>plants —<br/><span style={{color: G.primary}}>no signal needed.</span></div>
      </div>
    </>
  );
}

// ── SCENE 4: Compass / GPS ─────────────────────────────────────────────────
function Scene4() {
  const { progress, localTime } = useSprite();
  // Compass rotates from 142° toward 0° (true north)
  const bearing = interpolate([0, 1], [142, 0], Easing.easeInOutCubic)(progress);
  const camPush = 1.02 + progress * 0.04;
  const captionOp = interpolate([0.2, 0.4, 0.9, 1], [0, 1, 1, 0])(progress);

  return (
    <>
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, ${G.coldBlue} 0%, ${G.forestDeep} 40%, ${G.inkBlack} 100%)`,
        transform: `scale(${camPush})`, transformOrigin: '60% 50%',
      }}>
        <MountainRidge y={35} height={45} color="#1a2832" seed={5} opacity={0.85}/>
        <MountainRidge y={45} height={40} color="#0e1620" seed={8} opacity={1}/>
        <TreeBand y={70} height={30} density={10} color="#030607" seed={11}/>
        <MistLayer opacity={0.5} drift={progress * 0.8}/>
      </div>
      <Vignette strength={0.5}/>

      <PhoneFrame scale={1.0} x={-200} rotate={-3} glow>
        <CompassScreen bearing={bearing} lat="60.4720°N" lng="8.4689°E"/>
        <StatusBar/>
        <TabBar active="map"/>
      </PhoneFrame>

      {/* Coordinates appearing as if HUD */}
      <div style={{
        position: 'absolute', right: 110, top: 280,
        opacity: captionOp,
        fontFamily: 'JetBrains Mono, monospace', color: G.amber,
      }}>
        <div style={{ fontSize: 13, letterSpacing: 4, marginBottom: 16 }}>03 / NAVIGATE</div>
        <div style={{
          fontFamily: 'Inter, system-ui', fontWeight: 800, fontSize: 44,
          color: G.white, letterSpacing: -0.6, lineHeight: 1.05, marginBottom: 22,
        }}>True north,<br/><span style={{color: G.primary}}>always.</span></div>
        <div style={{ fontSize: 14, color: G.white, opacity: 0.65, lineHeight: 1.8 }}>
          <div>LAT &nbsp;&nbsp; 60.4720° N</div>
          <div>LNG &nbsp;&nbsp; 8.4689° E</div>
          <div>ALT &nbsp;&nbsp; 1284 m</div>
        </div>
      </div>
    </>
  );
}

// ── SCENE 5: First Aid urgency ─────────────────────────────────────────────
function Scene5() {
  const { progress } = useSprite();
  const captionOp = interpolate([0.15, 0.35, 0.9, 1], [0, 1, 1, 0])(progress);
  // Red rim pulse
  const pulse = (Math.sin(progress * Math.PI * 6) + 1) * 0.5;

  return (
    <>
      <div style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse 80% 70% at 50% 50%, ${G.forestMid}, ${G.inkBlack} 80%)`,
      }}>
        <div style={{
          position: 'absolute', inset: 0,
          background: `radial-gradient(ellipse 40% 60% at 30% 50%, rgba(232, 76, 76, ${0.1 + pulse * 0.08}), transparent 70%)`,
          mixBlendMode: 'screen',
        }}/>
        <TreeBand y={75} height={25} density={12} color="#020404" seed={13}/>
      </div>
      <Vignette strength={0.75}/>

      <PhoneFrame scale={1.0} x={150} rotate={1.5} glow>
        <FirstAidScreen/>
        <StatusBar/>
        <TabBar active="survival"/>
      </PhoneFrame>

      {/* Caption */}
      <div style={{
        position: 'absolute', left: 90, top: '50%',
        transform: 'translateY(-50%)', maxWidth: 460,
        opacity: captionOp,
      }}>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 13,
          color: '#E84C4C', letterSpacing: 4, marginBottom: 12,
        }}>04 / TREAT</div>
        <div style={{
          fontFamily: 'Inter, system-ui', fontWeight: 800, fontSize: 48,
          color: G.white, lineHeight: 1.05, letterSpacing: -0.8,
        }}>Every second<br/>counts —<br/><span style={{color: '#E84C4C'}}>step-by-step,<br/>offline.</span></div>
      </div>
    </>
  );
}

// ── SCENE 6: Offline maps + No Signal ──────────────────────────────────────
function Scene6() {
  const { progress } = useSprite();
  const captionOp = interpolate([0.15, 0.35, 0.9, 1], [0, 1, 1, 0])(progress);
  // Animated download progression
  const dl = Math.floor(progress * 1.5);

  return (
    <>
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, ${G.coldBlue} 0%, ${G.forestMid} 50%, ${G.inkBlack} 100%)`,
      }}>
        <MountainRidge y={30} height={45} color="#1c2a36" seed={7} opacity={0.85}/>
        <TreeBand y={65} height={35} density={15} color="#030608" seed={15}/>
        <MistLayer opacity={0.4} drift={progress}/>
      </div>
      <Vignette strength={0.6}/>

      <PhoneFrame scale={1.0} x={180} rotate={-1.5} glow>
        <MapScreen downloadedIdx={dl}/>
        <StatusBar noSignal/>
        <TabBar active="map"/>
      </PhoneFrame>

      {/* Caption with No Signal badge */}
      <div style={{
        position: 'absolute', left: 90, top: '50%',
        transform: 'translateY(-50%)', maxWidth: 480,
        opacity: captionOp,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
          {/* No Signal pill */}
          <div style={{
            display: 'flex', alignItems: 'center', gap: 6,
            padding: '6px 12px', borderRadius: 16,
            border: '1px solid rgba(232, 76, 76, 0.5)',
            background: 'rgba(232, 76, 76, 0.08)',
            fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
            color: '#E84C4C', letterSpacing: 1.5, fontWeight: 700,
          }}>
            <svg width="14" height="10" viewBox="0 0 22 13">
              <rect x="0" y="9" width="2.5" height="3.5" rx="0.5" fill="#E84C4C" fillOpacity="0.4"/>
              <rect x="4" y="6.5" width="2.5" height="6" rx="0.5" fill="#E84C4C" fillOpacity="0.4"/>
              <rect x="8" y="3.5" width="2.5" height="9" rx="0.5" fill="#E84C4C" fillOpacity="0.4"/>
              <rect x="12" y="0.5" width="2.5" height="12" rx="0.5" fill="#E84C4C" fillOpacity="0.4"/>
              <path d="M16 4l5 5M21 4l-5 5" stroke="#E84C4C" strokeWidth="1.6" strokeLinecap="round"/>
            </svg>
            NO SIGNAL
          </div>
          <div style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 13,
            color: G.amber, letterSpacing: 4,
          }}>05 / MAPS</div>
        </div>
        <div style={{
          fontFamily: 'Inter, system-ui', fontWeight: 800, fontSize: 48,
          color: G.white, lineHeight: 1.05, letterSpacing: -0.8,
        }}>Download a region.<br/><span style={{color: G.primary}}>Forget the bars.</span></div>
      </div>
    </>
  );
}

// ── SCENE 7: Payoff — pull back to fjord vista ─────────────────────────────
function Scene7() {
  const { progress } = useSprite();
  const camPull = 1.3 - progress * 0.3;
  // Phone shrinks/recedes
  const phoneScale = interpolate([0, 0.5], [1.0, 0.45], Easing.easeInOutCubic)(progress);
  const phoneY = interpolate([0, 0.5], [-50, 100], Easing.easeInOutCubic)(progress);
  const phoneOpacity = interpolate([0.5, 0.75], [1, 0.5])(progress);

  // Tagline timing
  const line1Op = interpolate([0.35, 0.5, 1], [0, 1, 1])(progress);
  const line1Y = interpolate([0.35, 0.55], [16, 0], Easing.easeOutCubic)(progress);
  const line2Op = interpolate([0.6, 0.75, 1], [0, 1, 1])(progress);
  const line2Y = interpolate([0.6, 0.8], [16, 0], Easing.easeOutCubic)(progress);
  const wordmarkOp = interpolate([0.78, 0.9, 1], [0, 1, 1])(progress);

  return (
    <>
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, #8a9d8c 0%, ${G.coldBlue} 25%, ${G.forestMid} 65%, ${G.inkBlack} 100%)`,
        transform: `scale(${camPull})`, transformOrigin: '50% 60%',
      }}>
        <SunShaft x="35%" y="20%" size={1100} color="rgba(216, 165, 92, 0.25)"/>
        {/* Distant peaks */}
        <MountainRidge y={20} height={30} color="#3a4858" seed={2} opacity={0.5}/>
        <MountainRidge y={28} height={40} color="#1f2c38" seed={6} opacity={0.9}/>
        <MountainRidge y={42} height={35} color="#0e161e" seed={9} opacity={1}/>
        {/* Water reflection band */}
        <div style={{
          position: 'absolute', left: 0, right: 0, top: '77%', height: '6%',
          background: `linear-gradient(180deg, transparent, ${G.coldBlue} 50%, transparent)`,
          opacity: 0.4,
        }}/>
        <TreeBand y={70} height={32} density={12} color="#03070a" seed={14}/>
        <TreeBand y={78} height={24} density={22} color="#010304" seed={18}/>
        <MistLayer opacity={0.55} drift={progress * 1.2}/>
        <Particles count={25} seed={3} opacity={0.5}/>
      </div>
      <Vignette strength={0.55}/>

      {/* Receding phone */}
      <div style={{ opacity: phoneOpacity }}>
        <PhoneFrame scale={phoneScale} y={phoneY} rotate={0} glow>
          <HomeScreen/>
          <StatusBar noSignal/>
          <TabBar active="home"/>
        </PhoneFrame>
      </div>

      {/* End-card tagline */}
      <div style={{
        position: 'absolute', left: 0, right: 0, top: '50%',
        transform: 'translateY(-50%)', textAlign: 'center',
      }}>
        <div style={{
          fontFamily: 'Inter, system-ui', fontWeight: 800, fontSize: 84,
          color: G.white, letterSpacing: -2, lineHeight: 1.0,
          opacity: line1Op, transform: `translateY(${line1Y}px)`,
        }}>Works offline.</div>
        <div style={{
          fontFamily: 'Inter, system-ui', fontWeight: 400, fontStyle: 'italic',
          fontSize: 44, color: G.amber, letterSpacing: -0.5, marginTop: 18,
          opacity: line2Op, transform: `translateY(${line2Y}px)`,
        }}>When it matters most.</div>
      </div>

      {/* Wordmark + App Store hint */}
      <div style={{
        position: 'absolute', left: 0, right: 0, bottom: 145,
        textAlign: 'center', opacity: wordmarkOp,
      }}>
        <div style={{
          fontFamily: 'Inter, system-ui', fontWeight: 900, fontSize: 26,
          color: G.primary, letterSpacing: 7, marginBottom: 6,
        }}>SURVIVAL</div>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace', fontSize: 11,
          color: G.white, opacity: 0.6, letterSpacing: 3,
        }}>OFFLINE SURVIVAL KIT &nbsp;·&nbsp; ON THE APP STORE</div>
      </div>
    </>
  );
}

Object.assign(window, {
  Scene1, Scene2, Scene3, Scene4, Scene5, Scene6, Scene7,
  PhoneFrame, Letterbox, MistLayer, Vignette, TreeBand, MountainRidge, SunShaft, Particles,
});