"gsap": "^3.15.0",

    "gsap": ["gsap@3.15.0", "", {}, "sha512-dMW4CWBTUK1AEEDeZc1g4xpPGIrSf9fJF960qbTZmN/QwZIWY5wgliS6JWl9/25fpTGJrMRtSjGtOmPnfjZB+A=="],

		"gsap": "^3.15.0",

---

import { Image } from "astro:assets";

import { paintings } from "@/data/courseOfEmpire";

---

<article class="empire">

  {paintings.map((p, idx) => (

    <section

      class="empire-stage"

      data-slug={p.slug}

      data-details={p.details.length}

    >

      <div class="empire-frame" data-frame>

        <Image

          src={p.src}

          widths={[960, 1440, 1920, 2880]}

          sizes="100vw"

          formats={["avif", "webp"]}

          alt={`${p.title} by Thomas Cole`}

          loading={idx === 0 ? "eager" : "lazy"}

          fetchpriority={idx === 0 ? "high" : "auto"}

          decoding="async"

          class="empire-img"

        />

      </div>

      <figcaption class="empire-intro" data-intro>

        <span class="empire-counter">{String(idx + 1).padStart(2, "0")} / 05</span>

        <a class="empire-title" href={p.link} target="_blank" rel="noreferrer">

          {p.title} <span class="empire-year">({p.year})</span>

        </a>

        <p class="empire-desc">{p.intro}</p>

      </figcaption>

      {p.details.map((d, i) => (

        <figcaption class="empire-caption" data-caption data-idx={i}>

          <p>{d.caption}</p>

        </figcaption>

      ))}

    </section>

  ))}

</article>

<style>

  .empire {

    background: #0a0a0c;

    color: #f3f1ec;

  }

  .empire-stage {

    position: relative;

    height: 100vh;

    width: 100%;

    overflow: hidden;

  }

  .empire-frame {

    position: absolute;

    inset: 0;

    transform-origin: 0 0;

    will-change: transform;

  }

  .empire-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

  }

  .empire-intro,

  .empire-caption {

    position: absolute;

    left: 1.5rem;

    bottom: 1.5rem;

    max-width: min(60ch, calc(100% - 3rem));

    padding: 1rem 1.25rem;

    background: rgba(10, 10, 12, 0.72);

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    border-left: 2px solid rgba(243, 241, 236, 0.6);

    opacity: 0;

    pointer-events: none;

    z-index: 2;

  }

  .empire-intro {

    pointer-events: auto;

  }

  .empire-counter {

    display: block;

    font-size: 0.75rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: rgba(243, 241, 236, 0.55);

    margin-bottom: 0.4rem;

  }

  .empire-title {

    font-weight: 600;

    font-size: 1.05rem;

    color: #fff;

    text-decoration: none;

    display: inline-block;

    margin-bottom: 0.5rem;

  }

  .empire-title:hover { text-decoration: underline; }

  .empire-year {

    font-weight: 400;

    color: rgba(243, 241, 236, 0.55);

  }

  .empire-desc,

  .empire-caption p {

    font-size: 0.875rem;

    line-height: 1.6;

    color: rgba(243, 241, 236, 0.88);

    margin: 0;

  }

  @media (prefers-reduced-motion: reduce) {

    .empire-stage {

      height: auto;

    }

    .empire-frame {

      position: relative;

      transform: none !important;

    }

    .empire-img {

      height: auto;

      aspect-ratio: 3000 / 1865;

    }

    .empire-intro,

    .empire-caption {

      position: static;

      opacity: 1;

      max-width: none;

      margin: 0.75rem 1.5rem 0;

    }

  }

</style>

<script>

  import gsap from "gsap";

  import { ScrollTrigger } from "gsap/ScrollTrigger";

  import { paintings } from "@/data/courseOfEmpire";

  gsap.registerPlugin(ScrollTrigger);

  type Detail = { x: number; y: number; scale: number };

  const detailsBySlug: Record<string, Detail[]> = Object.fromEntries(

    paintings.map((p) => [

      p.slug,

      p.details.map((d) => ({ x: d.x, y: d.y, scale: d.scale })),

    ]),

  );

  function focusFor(d: Detail, w: number, h: number, scaleMult: number) {

    const s = 1 + (d.scale - 1) * scaleMult;

    return {

      scale: s,

      x: w / 2 - d.x * w * s,

      y: h / 2 - d.y * h * s,

    };

  }

  const triggers: ScrollTrigger[] = [];

  function buildTimelines(scaleMult: number, pinFactor: number) {

    triggers.forEach((t) => t.kill());

    triggers.length = 0;

    const stages = document.querySelectorAll<HTMLElement>(".empire-stage");

    stages.forEach((stage) => {

      const slug = stage.dataset.slug ?? "";

      const details = detailsBySlug[slug] ?? [];

      const frame = stage.querySelector<HTMLElement>("[data-frame]");

      const intro = stage.querySelector<HTMLElement>("[data-intro]");

      const captions = stage.querySelectorAll<HTMLElement>("[data-caption]");

      if (!frame) return;

      const w = stage.clientWidth;

      const h = stage.clientHeight;

      gsap.set(frame, { scale: 1, x: 0, y: 0 });

      gsap.set(intro, { opacity: 0 });

      gsap.set(captions, { opacity: 0 });

      const tl = gsap.timeline({

        scrollTrigger: {

          trigger: stage,

          start: "top top",

          end: `+=${window.innerHeight * (1 + details.length * pinFactor)}`,

          pin: true,

          scrub: 0.6,

          anticipatePin: 1,

        },

      });

      tl.to(intro, { opacity: 1, duration: 0.08 }, 0);

      tl.to(intro, { opacity: 0, duration: 0.06 }, 0.16);

      const slotStart = 0.22;

      const slotEnd = 0.94;

      const span = slotEnd - slotStart;

      const slot = span / Math.max(details.length, 1);

      details.forEach((d, i) => {

        const f = focusFor(d, w, h, scaleMult);

        const t0 = slotStart + i * slot;

        const tPan = slot * 0.4;

        const tHold = slot * 0.5;

        const cap = captions[i];

        tl.to(frame, { ...f, ease: "power2.inOut", duration: tPan }, t0);

        if (cap) {

          tl.to(cap, { opacity: 1, duration: tPan * 0.6 }, t0 + tPan * 0.4);

          tl.to(cap, { opacity: 0, duration: tPan * 0.4 }, t0 + tPan + tHold * 0.7);

        }

      });

      tl.to(

        frame,

        { scale: 1, x: 0, y: 0, ease: "power2.inOut", duration: 0.06 },

        0.94,

      );

      if (tl.scrollTrigger) triggers.push(tl.scrollTrigger);

    });

  }

  const mm = gsap.matchMedia();

  mm.add(

    {

      reduce: "(prefers-reduced-motion: reduce)",

      mobile: "(prefers-reduced-motion: no-preference) and (max-width: 768px)",

      desktop: "(prefers-reduced-motion: no-preference) and (min-width: 769px)",

    },

    (ctx) => {

      const c = ctx.conditions as {

        reduce: boolean;

        mobile: boolean;

        desktop: boolean;

      };

      if (c.reduce) return;

      const scaleMult = c.mobile ? 0.65 : 1;

      const pinFactor = c.mobile ? 0.7 : 1.0;

      buildTimelines(scaleMult, pinFactor);

      return () => {

        triggers.forEach((t) => t.kill());

        triggers.length = 0;

      };

    },

  );

  if (document.fonts?.ready) {

    document.fonts.ready.then(() => ScrollTrigger.refresh());

  }

</script>

import type { ImageMetadata } from "astro";

import savage from "@/assets/the-savage-state.jpg";

import pastoral from "@/assets/the-pastoral-state.jpg";

import consumation from "@/assets/the-consumation-of-empire.jpg";

import destruction from "@/assets/destruction.jpg";

import desolation from "@/assets/desolation.jpg";

export interface Detail {

	x: number;

	y: number;

	scale: number;

	caption: string;

}

export interface Painting {

	slug: string;

	src: ImageMetadata;

	title: string;

	year: string;

	intro: string;

	link: string;

	details: Detail[];

}

export const paintings: Painting[] = [

	{

		slug: "savage",

		src: savage,

		title: "The Savage State",

		year: "1834",

		intro:

			"Dawn breaks over a wilderness as nomadic hunters chase a wounded deer and storm clouds wreathe the mountain. Nature is supreme; man clings to its edges.",

		link: "https://explorethomascole.org/project/the-savage-state/",

		details: [

			{

				x: 0.28,

				y: 0.73,

				scale: 2.7,

				caption: "A hunter draws his bow. Skins, not stone — the only architecture is the chase.",

			},

			{

				x: 0.95,

				y: 0.40,

				scale: 2.2,

				caption: "Storm wreathes the peak. The mountain will outlast every empire to come.",

			},

			{

				x: 1.50,

				y: 0.50,

				scale: 2.6,

				caption: "Smoke from a clustered camp at the shore. The first faint claim on the land.",

			},

		],

	},

	{

		slug: "pastoral",

		src: pastoral,

		title: "The Pastoral or Arcadian State",

		year: "1834",

		intro:

			"Morning light, cleared fields, a Stonehenge-like temple, an old man tracing geometry in the dirt while a boy sketches a figure on stone. Civilization stirs; agriculture, science, art, all still close to the earth.",

		link: "https://explorethomascole.org/project/the-arcadian-or-pastoral-state/"

,

		details: [

			{

				x: 0.15,

				y: 0.90,

				scale: 2.6,

				caption: "An old man traces geometry in the dirt. Knowledge begins as scratched lines.",

			},

			{

				x: 0.6,

				y: 0.45,

				scale: 2.2,

				caption: "A trilithon temple on the rise. Ritual housed in stone for the first time.",

			},

			{

				x: 1.20,

				y: 0.7,

				scale: 2.5,

				caption: "Shepherds and a circle of dancers. Labor and leisure still share a field.",

			},

		],

	},

	{

		slug: "consummation",

		src: consumation,

		title: "The Consummation of Empire",

		year: "1836",

		intro:

			"High noon over a marble city. A triumphant ruler crosses the bridge in an elephant-drawn car, temples crowd the bay, the harbor brims with ships. Splendor so total it can only precede collapse.",

		link: "https://explorethomascole.org/project/the-consummation-of-empire/"

,

		details: [

			{

				x: 0.3,

				y: 0.70,

				scale: 2.6,

				caption: "The conqueror crosses the bridge in an elephant-drawn car. Power on parade.",

			},

			{

				x: 0.18,

				y: 0.4,

				scale: 2.3,

				caption: "Colonnades march to the water. Marble built to outlast the men who quarried it.",

			},

			{

				x: 0.82,

				y: 0.78,

				scale: 2.4,

				caption: "The harbor packed with galleys. Trade has become indistinguishable from triumph.",

			},

		],

	},

	{

		slug: "destruction",

		src: destruction,

		title: "Destruction",

		year: "1836",

		intro:

			"Storm and sack. Invaders pour through the gates, the temple porch becomes a catapult, ships burn in the harbor, a headless warrior presides over the slaughter as the sky turns to fire.",

		link: "https://explorethomascole.org/project/destruction/",

		details: [

			{

				x: 0.42,

				y: 0.58,

				scale: 2.6,

				caption: "The headless warrior. Even the colossus loses its face when the city falls.",

			},

			{

				x: 0.7,

				y: 0.75,

				scale: 2.5,

				caption: "Bridge collapses under the press of bodies. Architecture eats its makers.",

			},

			{

				x: 0.2,

				y: 0.35,

				scale: 2.2,

				caption: "Sky turns to fire. The same harbor — only the light has changed.",

			},

		],

	},

	{

		slug: "desolation",

		src: desolation,

		title: "Desolation",

		year: "1836",

		intro:

			"Sunset and moonrise over silent ruins. Vines climb a lone column, a bird nests where a temple stood, deer roam the broken friezes. No human figures remain. Nature outlasts everything man builds.",

		link: "https://explorethomascole.org/project/desolation/",

		details: [

			{

				x: 0.28,

				y: 0.5,

				scale: 2.5,

				caption: "A single column, ivy-wrapped. The last vertical line man left standing.",

			},

			{

				x: 0.68,

				y: 0.78,

				scale: 2.4,

				caption: "Deer cross the broken frieze. The wilderness has come back through the gate.",

			},

			{

				x: 0.55,

				y: 0.32,

				scale: 2.2,

				caption: "Moonrise where the temple stood. The mountain unchanged across all five.",

			},

		],

	},

];

---

import PageLayout from "@/layouts/Base.astro";

import EmpireScroll from "@/components/page/EmpireScroll.astro";

const meta = {

	title: "The Course of Empire",

	description:

		"A scroll-driven tour through Thomas Cole's five-painting cycle.",

};

---

<PageLayout meta={meta}>

	<EmpireScroll />

	<style is:global>

		body.empire-page {

			padding: 0 !important;

      margin: 0 !important;

			max-width: none !important;

		}

		body.empire-page #main-header,

		body.empire-page footer {

			display: none !important;

		}

		body.empire-page #main {

			flex: none;

		}

	</style>

	<script>

		document.body.classList.add("empire-page");

		document.documentElement.classList.add("empire-html");

	</script>

</PageLayout>