Hackcamp2026 dev

src/components/footer/bed-scene.tsx

@@ -54,10 +54,13 @@ const wakeUp: Keyframe[] = [
  * with the arrow keys or by swiping, and Nugget can be tucked in, and woken
  * up again.
  *
- * Every offset is a percentage of the surrounding night scene: the base values
- * come from the phone frame, the xl ones from the desktop frame. The overlay
- * with the phone, the z's and the two click areas sits in the same box as the
- * bed, on top of the stars.
+ * Every offset is a percentage of the surrounding night scene. The xl values
+ * come from the desktop frame. On the phone the bed is the desktop bed scaled
+ * by 1.13157 and moved (BED_BOX), and the headboard and the stars get the same
+ * scale and move, so the pieces keep their places on the bed: phone = -6.476 +
+ * 1.13157 x desktop across, -2.16 + 1.13157 x desktop down. The overlay with
+ * the phone, the z's and the two click areas sits in the same box as the bed,
+ * on top of the stars.
  */
 const BedScene = () => {
   const bed = useRef<HTMLDivElement>(null);
@@ -130,22 +133,24 @@ const BedScene = () => {
         <BedArt className="block h-auto w-full" />
       </div>
       <CloudBorder />
+      {/* On the phone the bed is wider than the gap between the cloud
+          pillars, so the stars don't follow its scale: the group is sized to
+          sit on the part of the blanket that shows, 15% to 85% across, with
+          its top star where the bed's scale puts it. */}
       <Image
         src="/assets/footer/star-particles.svg"
         alt=""
         width={1166}
         height={578}
-        className="absolute left-[16%] top-[42.9%] h-auto w-[71.8%] max-w-none xl:left-[8.67%] xl:top-[47.03%] xl:w-[78.82%]"
+        className="absolute left-[13.95%] top-[51.33%] h-auto w-[72.3%] max-w-none xl:left-[8.67%] xl:top-[47.03%] xl:w-[78.82%]"
       />
-      {/* The big star is kept apart from the rest: on the phone frame its
-          place in the group lands on the bear's phone, so there it moves
-          down onto the blanket. On desktop it sits where the group has it. */}
+      {/* The big star is its own image, kept where the group has it. */}
       <Image
         src="/assets/footer/star-big.svg"
         alt=""
         width={151}
         height={164}
-        className="absolute left-[27.1%] top-[59.83%] h-auto w-[9.31%] max-w-none xl:left-[24.55%] xl:top-[54.32%] xl:w-[10.22%]"
+        className="absolute left-[28.52%] top-[58.02%] h-auto w-[9.38%] max-w-none xl:left-[24.55%] xl:top-[54.32%] xl:w-[10.22%]"
       />
       <div className={cn(BED_BOX, "aspect-[1531/1504] @container")}>
         <AnimatePresence onExitComplete={() => setPhoneHome(true)}>

src/components/footer/cloud-border.tsx

@@ -2,9 +2,10 @@ import Image from "next/image";
 
 /**
  * The cloud frame behind the footer: two pillars up the sides and a band across
- * the bottom, all one piece of artwork. It hangs off both edges by the same
- * amount it does in the design, which differs between the phone and desktop
- * frames.
+ * the bottom, all one piece of artwork. On desktop it hangs off both edges by
+ * the same amount it does in the design. On the phone it is centred so both
+ * pillars reach about 11% of the width in; the phone frame's own placement
+ * left the left pillar reaching nearly twice as far in as the right.
  */
 const CloudBorder = () => {
   return (
@@ -13,7 +14,7 @@ const CloudBorder = () => {
       alt=""
       width={1927}
       height={2072}
-      className="absolute bottom-0 left-[-4.8%] h-auto w-[114.5%] max-w-none xl:left-[-14.17%] xl:w-[125.84%]"
+      className="absolute bottom-0 left-[-7.8%] h-auto w-[114.5%] max-w-none xl:left-[-14.17%] xl:w-[125.84%]"
     />
   );
 };

src/components/mobile/testimonials-mobile.tsx

@@ -153,14 +153,6 @@ const TestimonialsMobile = () => {
         className="absolute left-[69.57vw] top-[143.17vw] h-[10.79vw] w-[5.02vw] rotate-[-22.24deg]"
         style={nookShape("/assets/testimonials/deer-antler-back.svg")}
       />
-      <Image
-        src="/assets/testimonials/deer-antlers.svg"
-        alt=""
-        width={71}
-        height={98}
-        className="absolute left-[74.5vw] top-[142.75vw] h-[11.84vw] w-[8.59vw]"
-        style={nookShape("/assets/testimonials/deer-antlers.svg")}
-      />
       <Image
         src="/assets/testimonials/deer-body.svg"
         alt=""
@@ -169,14 +161,6 @@ const TestimonialsMobile = () => {
         className="absolute left-[64.4vw] top-[164.54vw] h-[16.97vw] w-[18.54vw]"
         style={nookShape("/assets/testimonials/deer-body.svg")}
       />
-      <Image
-        src="/assets/testimonials/deer-pyjamas.svg"
-        alt=""
-        width={78}
-        height={165}
-        className="absolute left-[70.22vw] top-[154.01vw] h-[19.93vw] w-[9.47vw]"
-        style={nookShape("/assets/testimonials/deer-pyjamas.svg")}
-      />
       <Image
         src="/assets/testimonials/deer-ear-left.svg"
         alt=""
@@ -185,15 +169,31 @@ const TestimonialsMobile = () => {
         className="absolute left-[68.87vw] top-[152.39vw] h-[3.84vw] w-[3.62vw] rotate-[-5.37deg]"
         style={nookShape("/assets/testimonials/deer-ear-left.svg")}
       />
+      <DeerHead className="left-[69.22vw] top-[152.59vw] h-[12.8vw] w-[14.07vw]" />
+      {/* Stacked as in the design: the right antler and ear sit over the
+          head, and the pyjama layer lays the sleeping mask across both.
+          They let clicks through, so tapping the face still blinks. */}
+      <Image
+        src="/assets/testimonials/deer-antlers.svg"
+        alt=""
+        width={71}
+        height={98}
+        className="pointer-events-none absolute left-[74.5vw] top-[142.75vw] h-[11.84vw] w-[8.59vw]"
+      />
       <Image
         src="/assets/testimonials/deer-ear-right.svg"
         alt=""
         width={32}
         height={32}
-        className="absolute left-[78.03vw] top-[152.52vw] h-[3.88vw] w-[3.86vw] rotate-[-5.37deg]"
-        style={nookShape("/assets/testimonials/deer-ear-right.svg")}
+        className="pointer-events-none absolute left-[78.03vw] top-[152.52vw] h-[3.88vw] w-[3.86vw] rotate-[-5.37deg]"
+      />
+      <Image
+        src="/assets/testimonials/deer-pyjamas.svg"
+        alt=""
+        width={78}
+        height={165}
+        className="pointer-events-none absolute left-[70.22vw] top-[154.01vw] h-[19.93vw] w-[9.47vw]"
       />
-      <DeerHead className="left-[69.22vw] top-[152.59vw] h-[12.8vw] w-[14.07vw]" />
       <Image
         src="/assets/testimonials/deer-pyjama-cat.svg"
         alt=""

src/components/stats/mobile-stats.tsx

@@ -16,12 +16,16 @@ export const MobileStats = () => (
 
     {/* Stars zig-zag down the page: left, right, left, each tucked under the last */}
     <div className="relative -mt-[8%] -mb-[10%]">
+      {/* Laid out at three times the width rather than scaled up, so Safari
+          rasterizes the stars at the size they're shown instead of blowing
+          up a bitmap; the offsets put its centre where a full-width strip
+          at top-[20%] would have it. */}
       <Image
         src="/assets/stats/desktop-small-stars.svg"
         alt=""
         width={1172}
         height={389}
-        className="pointer-events-none absolute top-[20%] left-0 z-0 w-full h-auto scale-300 rotate-90"
+        className="pointer-events-none absolute top-[20%] left-1/2 z-0 w-[300%] max-w-none h-auto -translate-x-1/2 -translate-y-1/3 rotate-90"
       />
       <div className="relative z-10 flex flex-col">
         <div className="w-[118%] -ml-[4%]">

src/components/testimonials/nook-shapes.ts

@@ -23,18 +23,12 @@ const SHAPES: Record<string, string> = {
     "polygon(14.5% 55.5%, 32.3% 47.5%, 54.8% 34.8%, 55.6% 32.6%, 53.5% 20.8%, 47.3% 7.7%, 45.3% 5%, 42.3% 4.8%, 35.3% 6.8%, 24.8% 11.9%, 2.8% 26.1%, 1.1% 29.2%, 1.9% 33.5%, 10.9% 51.3%, 13.3% 55.2%, 14.5% 55.5%, 26.5% 97.9%, 63.2% 80.6%, 97.3% 61%, 98.6% 58.9%, 97% 48.7%, 93.8% 48.2%, 90.3% 50%, 69.3% 65.7%, 55.8% 74.2%, 27.8% 86.4%, 25% 97%, 25.3% 98.3%, 26.5% 97.9%, 14.5% 55.5%)",
   "deer-antler-back":
     "polygon(29.4% 99.9%, 33.8% 99.3%, 36.8% 98.4%, 39.4% 97.1%, 42% 95%, 44% 91.7%, 44.7% 86.2%, 45.7% 83.4%, 48.8% 79.4%, 53.1% 75.7%, 63.7% 69.4%, 91% 56.4%, 97.1% 52.2%, 100% 48%, 100% 45.2%, 98.4% 43.6%, 95.3% 42.8%, 90.8% 43%, 79.3% 45.6%, 51.7% 53.9%, 46.8% 54.8%, 43.8% 54.5%, 43.1% 53.6%, 43.7% 51.5%, 53.5% 36.4%, 60% 24.5%, 63% 17.1%, 64% 11.3%, 63% 6.4%, 59.4% 2.9%, 53.8% 0.9%, 45.3% 0%, 36.8% 0%, 29.3% 0.9%, 22.3% 2.8%, 15.1% 6.4%, 10.5% 10.1%, 6% 15.9%, 3% 22.4%, 1% 30.3%, 0% 39%, 0% 52.4%, 2.3% 82%, 2.4% 94.8%, 8.8% 97.5%, 16.3% 99.3%, 22.3% 100%)",
-  "deer-antlers":
-    "polygon(48.5% 96.6%, 52.3% 96%, 55.1% 94.7%, 80% 53.1%, 84.9% 43.3%, 88.5% 33.9%, 89.5% 28.8%, 89.6% 22.3%, 87.6% 16.5%, 82.8% 12%, 77.8% 9.8%, 72.8% 8.7%, 68.8% 8.8%, 65.3% 10.1%, 62.4% 12.5%, 59.5% 17.2%, 56% 28.4%, 52.3% 52.7%, 51.2% 55.3%, 49.3% 55.3%, 46.8% 53.5%, 36% 41.8%, 30.3% 37.3%, 26.8% 36.9%, 25% 38.2%, 23.5% 41.1%, 23.4% 45.1%, 24.5% 48.4%, 33.8% 64.3%, 36.8% 72.3%, 36.8% 78.1%, 33.4% 86.8%, 34% 91.5%, 35.8% 93.7%, 39.3% 95.6%, 44.8% 96.7%)",
   "deer-body":
     "polygon(36.8% 96.4%, 38.8% 95.7%, 41.8% 92.6%, 45.3% 90.4%, 47.3% 91.9%, 67.8% 74.8%, 79.5% 62.6%, 84.1% 56%, 84% 53.8%, 87.3% 52.1%, 92.3% 52.9%, 93.9% 50%, 92% 33.1%, 89% 22.1%, 83% 10.1%, 75.8% 1.5%, 72.8% 1%, 51.7% 1.3%, 51.2% 0.1%, 49.3% 0%, 45.8% 1%, 42.8% 3.5%, 36.5% 11.2%, 29% 24.3%, 26% 30.9%, 26.3% 33.6%, 23.4% 41.8%, 22.9% 44.5%, 23.3% 47.3%, 24.3% 48.1%, 28.7% 48.4%, 31.8% 51.6%, 7.8% 66.2%, 5% 68.6%, 5.4% 69.1%, 3.9% 73.5%, 4% 78.4%, 5.3% 80.3%, 8.3% 81%, 9.3% 82%, 9.9% 85.5%, 11.8% 87.4%, 16.3% 85.3%, 20.8% 79.9%, 23.3% 79.2%, 45.1% 62%, 49.5% 64.2%, 30.3% 77.5%, 29.3% 79%, 26.8% 80%, 23% 86.1%, 22.5% 89.3%, 23.8% 91.4%, 27.9% 91.5%, 32.3% 96.6%)",
   "deer-ear-left":
     "polygon(41.9% 94.6%, 49.8% 92.9%, 59.3% 89.2%, 69.3% 83.9%, 78.3% 77.9%, 85.8% 71.9%, 92.4% 65%, 96.5% 58.5%, 97% 54.2%, 95.7% 51.9%, 90.9% 48.1%, 87.8% 44.4%, 77.5% 25.6%, 72.4% 20%, 67.3% 15.9%, 58.8% 11.2%, 48.3% 7.2%, 32.8% 3.4%, 19.3% 1.4%, 11.1% 16.7%, 5.1% 33.1%, 3.5% 43.9%, 4.6% 54.2%, 8.5% 63.1%, 21.3% 79.6%, 27.4% 90.8%, 29.8% 92.8%, 33.3% 94.3%)",
-  "deer-ear-right":
-    "polygon(58.4% 95.8%, 62.7% 93.7%, 70% 84.8%, 84.4% 72.4%, 89.5% 65.9%, 92.5% 59.5%, 94.5% 50.5%, 94.5% 37.6%, 91.9% 21.6%, 89% 10.2%, 88.3% 9.3%, 75.8% 8.4%, 60.3% 8.9%, 50.2% 10.5%, 41.3% 13.4%, 36.3% 15.9%, 30.3% 20.4%, 17.3% 36.1%, 13.8% 39.1%, 8.3% 41.8%, 6.5% 44%, 6% 47%, 6.5% 50.5%, 10% 58.5%, 17.5% 69.4%, 24.6% 77.4%, 34.3% 86.1%, 44.8% 93%, 53.3% 96%)",
   "deer-pyjama-cat":
     "polygon(53.9% 99.7%, 61.3% 98.1%, 71.8% 94.2%, 90.3% 83.8%, 98.4% 64.2%, 100% 59%, 100% 53.2%, 97.4% 46.1%, 90.5% 31.9%, 89.6% 11.9%, 87.7% 1.6%, 86.8% 0%, 85.3% 0%, 81.3% 3.4%, 66.8% 22.5%, 55.3% 22.5%, 54.8% 22.3%, 55.7% 19.7%, 55.3% 19.1%, 46.8% 19.1%, 45.3% 22.5%, 35.8% 22.5%, 17.8% 3.9%, 11.8% 0%, 8.8% 0%, 6.1% 3.5%, 5.4% 7.4%, 5.9% 13.2%, 8.2% 22.9%, 3% 32.6%, 0% 41.6%, 0.1% 46.8%, 5.7% 76.5%, 9.3% 81.4%, 15.3% 87%, 28.2% 95.5%, 41.3% 99.9%)",
-  "deer-pyjamas":
-    "polygon(82.8% 17%, 89.3% 16.6%, 93.3% 15.8%, 96.8% 14.4%, 99.4% 12.2%, 100% 9.9%, 99.5% 8%, 93.8% 2.1%, 7.8% 0%, 4% 2.3%, 0.5% 6.3%, 0% 9.9%, 1.6% 12%, 5.8% 13.5%, 11.8% 14.6%, 17.8% 15.2%, 24.3% 15.2%, 37.3% 14.1%, 50.7% 13.8%, 56.3% 14.3%, 68.3% 16.3%, 74.8% 16.8%, 82.8% 17%, 40.1% 62.1%, 34% 53.8%, 28.7% 53.7%, 28.1% 54%, 28.4% 57.4%, 33.4% 58.1%, 30.8% 59.7%, 39.3% 62.2%, 40.1% 62.1%, 82.8% 17%, 82.8% 17%, 60.1% 80.6%, 73.8% 77.3%, 73.8% 68.7%, 51.2% 68.5%, 50.4% 68.8%, 48.5% 76.1%, 58.8% 80.6%, 60.1% 80.6%, 82.8% 17%, 82.8% 17%, 33.3% 99.9%, 34.2% 89%, 35.7% 81.4%, 38.2% 74.9%, 44.5% 62.4%, 64.3% 61.7%, 58.6% 60.9%, 69.8% 60.4%, 77% 55.7%, 76.8% 55.4%, 59.3% 56.6%, 40% 62.4%, 34% 73.5%, 31% 83%, 29.3% 99.2%, 32.8% 100%, 33.3% 99.9%, 82.8% 17%)",
   "deer-head":
     "polygon(54.1% 99.7%, 65.8% 97.2%, 76.3% 93.4%, 84.8% 88.5%, 91% 82.6%, 95.9% 74.9%, 98.5% 67.7%, 100% 57.7%, 100% 46.1%, 98% 36.2%, 94.5% 27.3%, 89.6% 19.6%, 80.8% 10.5%, 73.3% 5.6%, 63.7% 1.7%, 55.3% 0%, 44.8% 0%, 34.8% 2.2%, 25.8% 6.2%, 16.8% 12.7%, 10% 20.2%, 5% 28.5%, 1.5% 37.8%, 0% 46.1%, 0.1% 59.4%, 1.5% 69.3%, 4.1% 77.1%, 7% 82%, 13.8% 89%, 20.8% 93.3%, 31.3% 97.2%, 44.8% 100%)",
   "bear-body":

src/constants/hero.ts

@@ -1,5 +1,5 @@
-/** Countdown target shown in the hero. Fallback until Firestore InternalWebsites/Portal.applicationDeadline loads. */
-export const APPLICATION_DEADLINE = "Oct 10, 2026 23:59:59";
+/** Countdown target shown in the hero. Fallback until Firestore InternalWebsites/Portal.applicationDeadline.hackcamp loads. */
+export const APPLICATION_DEADLINE = "2026-10-10T23:59:59-07:00";
 
 export const HERO_TITLE = "HackCamp";
 export const HERO_TAGLINE = "Canada's largest beginner friendly hackathon";

src/hooks/use-countdown.ts

@@ -27,7 +27,7 @@ const getReturnValues = (countdown: number) => {
  * Time remaining until applications close, refreshed every second.
  *
  * Starts from {@link APPLICATION_DEADLINE} so the hero renders immediately,
- * then live-follows `InternalWebsites/Portal.applicationDeadline` in
+ * then live-follows `InternalWebsites/Portal.applicationDeadline.hackcamp` in
  * Firestore (the CMS source of truth) once it loads — no redeploy needed.
  */
 export const useCountdown = () => {

src/lib/firestore.ts

@@ -168,7 +168,8 @@ const toDeadlineMs = (raw: ApplicationDeadlineRaw): number | null => {
 };
 
 /**
- * Live-subscribes to `InternalWebsites/Portal.applicationDeadline` so the hero
+ * Live-subscribes to `InternalWebsites/Portal.applicationDeadline.hackcamp`
+ * (the field is a map keyed by hackathon) so the hero
  * countdown follows the CMS value without a redeploy. Accepts a Firestore
  * Timestamp (the Portal field type), Date, ISO string, or epoch seconds/millis.
  * Ignores missing/unparseable values so callers keep their fallback deadline.
@@ -182,13 +183,13 @@ export function subscribeToApplicationDeadline(
     portalRef,
     (snapshot) => {
       const ms = toDeadlineMs(
-        snapshot.data()?.applicationDeadline as ApplicationDeadlineRaw
+        snapshot.data()?.applicationDeadline?.hackcamp as ApplicationDeadlineRaw
       );
       if (ms !== null) onUpdate(ms);
     },
     (error) => {
       console.error(
-        "Error subscribing to InternalWebsites/Portal.applicationDeadline:",
+        "Error subscribing to InternalWebsites/Portal.applicationDeadline.hackcamp:",
         error
       );
       onError?.(error);

src/lib/shelves.test.ts

@@ -100,11 +100,32 @@ describe("buildShelves", () => {
       mk("inkind-co", "inkind"),
       mk("platinum-co", "platinum"),
     ]);
-    const names =
-      shelves[0].kind === "frames"
-        ? shelves[0].sponsors.map((s) => s.name)
-        : [];
-    expect(names).toEqual(["platinum-co", "gold-co", "bronze-co"]);
+    expect(
+      sponsorShelves(shelves).flatMap((s) =>
+        s.kind === "frames" ? s.sponsors.map((sponsor) => sponsor.name) : []
+      )
+    ).toEqual(["platinum-co", "gold-co", "bronze-co", "inkind-co"]);
+  });
+
+  it("starts every tier on a fresh shelf instead of topping up the last one", () => {
+    // HackCamp 2026's frames: five silver, two bronze, three in-kind.
+    const shelves = buildShelves([
+      ...["n8n", "elevenlabs", "render", "featherless", "bcit"].map((n) =>
+        mk(n, "silver")
+      ),
+      ...["formation", "spin", "poppi"].map((n) => mk(n, "inkind")),
+      ...["investly", "rbc-gam"].map((n) => mk(n, "bronze")),
+    ]);
+    expect(
+      sponsorShelves(shelves).map((s) =>
+        s.kind === "frames" ? s.sponsors.map((sponsor) => sponsor.tier) : []
+      )
+    ).toEqual([
+      ["silver", "silver", "silver"],
+      ["silver", "silver"],
+      ["bronze", "bronze"],
+      ["inkind", "inkind", "inkind"],
+    ]);
   });
 
   it("treats a whitespace-only blurb as no blurb", () => {
@@ -136,11 +157,11 @@ describe("buildShelves", () => {
   it("sorts an unknown tier after every known tier", () => {
     const odd = { ...mk("odd", "gold"), tier: "mystery" as SponsorDoc["tier"] };
     const shelves = buildShelves([odd, mk("bronze-co", "bronze")]);
-    const names =
-      shelves[0].kind === "frames"
-        ? shelves[0].sponsors.map((s) => s.name)
-        : [];
-    expect(names).toEqual(["bronze-co", "odd"]);
+    expect(
+      sponsorShelves(shelves).map((s) =>
+        s.kind === "frames" ? s.sponsors.map((sponsor) => sponsor.name) : []
+      )
+    ).toEqual([["bronze-co"], ["odd"]]);
   });
 
   it("treats a missing blurb as no blurb", () => {

src/lib/shelves.ts

@@ -57,9 +57,10 @@ const hasBlurb = (sponsor: SponsorDoc) =>
 /**
  * Turns the sponsor list into shelf rows following the design rule:
  * each blurb sponsor gets its own chalkboard shelf with books one side and the
- * sheep the other, then the remaining sponsors are sorted by manual order, then tier, and packed
- * into shelves of `framesPerShelf` picture frames with the plant one side and
- * books the other. Both pairs swap sides on every other row.
+ * sheep the other, then the remaining sponsors are sorted by manual order, then
+ * tier, and packed into shelves of `framesPerShelf` picture frames, one tier
+ * per shelf, with the plant one side and books the other. Both pairs swap
+ * sides on every other row.
  *
  * The decoration-only shelf between the two groups is always included: the
  * narrow layout shows it and hides the shelf-end decorations, the wide layout
@@ -80,15 +81,26 @@ export function buildShelves(
     right: i % 2 === 0 ? "sheep" : "books-left",
   }));
 
+  // Each tier starts on a fresh shelf, so a tier that doesn't fill its last
+  // shelf never shares it with the next tier down.
+  const tiers = new Map<string, SponsorDoc[]>();
+  for (const sponsor of frames) {
+    const tier = tiers.get(sponsor.tier);
+    if (tier) tier.push(sponsor);
+    else tiers.set(sponsor.tier, [sponsor]);
+  }
+
   const frameShelves: ShelfSpec[] = [];
-  for (let i = 0; i < frames.length; i += framesPerShelf) {
-    const row = frameShelves.length;
-    frameShelves.push({
-      kind: "frames",
-      sponsors: frames.slice(i, i + framesPerShelf),
-      left: row % 2 === 0 ? "plant" : "books-right",
-      right: row % 2 === 0 ? "books-right" : "plant",
-    });
+  for (const tier of tiers.values()) {
+    for (let i = 0; i < tier.length; i += framesPerShelf) {
+      const row = frameShelves.length;
+      frameShelves.push({
+        kind: "frames",
+        sponsors: tier.slice(i, i + framesPerShelf),
+        left: row % 2 === 0 ? "plant" : "books-right",
+        right: row % 2 === 0 ? "books-right" : "plant",
+      });
+    }
   }
 
   if (cardShelves.length + frameShelves.length === 0) return [];

src/sections/footer.tsx

@@ -21,7 +21,7 @@ const Footer = () => {
         lower than 5.5rem, since the team row under it doesn't shrink with the
         width and would otherwise end up on the clouds.
       */}
-      <div className="pointer-events-none absolute bottom-[max(10vw,5.5rem)] left-0 aspect-[1531/2065] w-full xl:bottom-0">
+      <div className="pointer-events-none absolute bottom-[max(13vw,5.5rem)] left-0 aspect-[1531/2065] w-full xl:bottom-0">
         <CloudBorder />
         <BedScene />
         <StarField />