/*
 * Homer's Web Page — one static stylesheet. Ported verbatim from the old
 * Next.js CSS Modules (page / curtain / counter), with a tiny reset standing in
 * for what Tailwind's preflight used to provide and an @font-face replacing
 * next/font.
 */

/* --- Reset (the bits the old build leaned on preflight for) --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}

/* --- Self-hosted title face (was next/font/local) --- */
@font-face {
  font-family: "Cooper Black Local";
  src: url("fonts/COOPBL.ttf") format("truetype");
  font-display: swap;
}

:root {
  --page-bg: #78bbcb;
  --font-cooper: "Cooper Black Local";
}

/* --- Base --- */
html {
  height: 100%;
  /* Curtains slide off-screen during the intro; keep that from creating scroll. */
  overflow-x: hidden;
}

body {
  min-height: 100%;
  background-color: var(--page-bg);
  font-family: var(--font-cooper), "Cooper Black", "Comic Sans MS", cursive, serif;
  /* The page locks itself to one viewport height — never scroll. */
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

/* Animated WebP sprites keep their intrinsic pixel sizing (set per <img>). */
img {
  max-width: none;
  height: auto;
}

/* --- Page + sprite scatter --- */

/* Lock the page to one viewport height so it never scrolls. */
.page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}

.title {
  flex: 0 0 auto;
  margin: clamp(8px, 2vh, 24px) auto clamp(6px, 1.4vh, 18px);
  text-align: center;
  font-size: clamp(38px, 6vw, 75px);
  color: #000;
}

/*
 * Desktop / landscape scatter: 5x5 grid, Homer down the middle. Rows are a
 * fixed fraction of a set height (NOT auto) so every row is tall enough that
 * the props never overlap.
 */
.parent {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(5, 1fr);
  gap: 16px;
  width: 60%;
  height: 72vh;
  align-items: center;
}

.parent > div {
  display: flex;
  justify-content: center;
}

.parent img {
  display: block;
}

.div1 {
  grid-area: 1 / 3 / 6 / 4;
  margin: 0 5rem;
}
/* Size Homer by height so he scales down on short viewports and always fits. */
.div1 img {
  width: auto;
  height: min(64vh, 498px);
}
.div2 { grid-area: 1 / 1 / 2 / 2; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 2 / 2 / 3 / 3; }
.div5 { grid-area: 3 / 2 / 4 / 3; }
.div6 { grid-area: 3 / 1 / 4 / 2; }
.div7 { grid-area: 4 / 1 / 5 / 2; }
.div8 { grid-area: 4 / 2 / 5 / 3; }
.div9 { grid-area: 5 / 1 / 6 / 2; }
.div10 { grid-area: 5 / 5 / 6 / 6; }
.div11 { grid-area: 4 / 4 / 5 / 5; }
.div12 { grid-area: 3 / 4 / 4 / 5; }
.div13 { grid-area: 3 / 5 / 4 / 6; }
.div14 { grid-area: 2 / 4 / 3 / 5; }
.div15 { grid-area: 1 / 5 / 2 / 6; }

/*
 * Phones, narrow windows, and any PORTRAIT viewport: keep the SAME desktop
 * scatter — the 5x5 grid with Homer down the middle — but full-width, and
 * thin the props to an evenly-spread ring of eight (no worms, fewer
 * toasters/clocks) so a narrow screen doesn't feel cramped. Props live in the
 * outer columns only, leaving the center clear for Homer.
 */
@media (max-width: 1024px), (orientation: portrait) {
  .title {
    font-size: clamp(38px, 10vw, 58px);
    width: 92%;
    margin: clamp(12px, 3vh, 26px) auto clamp(22px, 4.5vh, 40px);
  }

  /*
   * Narrower than the viewport so the outer columns (and their props) sit
   * closer to Homer. Homer is a fixed pixel width, so tightening the grid only
   * pulls the side props inward — it doesn't shrink him.
   */
  .parent {
    width: 90%;
    max-width: 380px;
    height: min(62vh, 540px);
    gap: 8px;
  }

  /*
   * Drop the clutter: no worms, and trim a few toasters/clocks. These must be
   * `.parent > .divN` (specificity 0,2,1) to beat `.parent > div { display:
   * flex }` (0,1,1) above — a bare `.divN { display: none }` silently loses to
   * it and the props never actually hide.
   */
  .parent > .div3,
  .parent > .div4,
  .parent > .div8,
  .parent > .div9,
  .parent > .div11,
  .parent > .div14 {
    display: none;
  }

  .parent img {
    width: clamp(52px, 15vw, 82px);
  }

  /* Homer: centered, capped by width so he never spills into the props. */
  .div1 {
    grid-area: 1 / 3 / 6 / 4;
    margin: 0;
  }
  .div1 img {
    width: min(42vw, 180px);
    height: auto;
  }

  /* Left flank, top to bottom: clock, mouth, toaster, bell. */
  .div2 { grid-area: 1 / 1 / 2 / 2; }
  .div5 { grid-area: 2 / 1 / 3 / 2; }
  .div6 { grid-area: 4 / 1 / 5 / 2; }
  .div7 { grid-area: 5 / 1 / 6 / 2; }
  /* Right flank, top to bottom: toaster, mouth, bell, clock. */
  .div15 { grid-area: 1 / 5 / 2 / 6; }
  .div13 { grid-area: 2 / 5 / 3 / 6; }
  .div12 { grid-area: 4 / 5 / 5 / 6; }
  .div10 { grid-area: 5 / 5 / 6 / 6; }
}

/* --- Opening-night curtain --- */
.panel {
  position: fixed;
  top: 0;
  height: 100vh;
  height: 100dvh;
  width: 50vw;
  z-index: 50;
  overflow: hidden;
  /*
   * Two layers: a shadow at the top (the curtain hangs from a rod), and
   * repeating velvet folds shaded valley -> highlight -> valley so they read
   * as rounded fabric instead of flat stripes.
   */
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 7%),
    repeating-linear-gradient(
      to right,
      #5c0014 0%,
      #8e1f12 2.2%,
      #c33a26 4.5%,
      #8e1f12 6.8%,
      #5c0014 9%
    );
  transition: transform 2.3s cubic-bezier(0.7, 0, 0.3, 1);
  will-change: transform;
}

/* Inner shadow at the parting seam, for depth as the panels separate. */
.panel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 72px;
  pointer-events: none;
}

.left {
  left: 0;
}

.left::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

.right {
  left: 50vw;
  transition-delay: 0.06s; /* a touch of stagger reads less mechanical */
}

.right::after {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}

/* Each panel slides exactly its own width off its own side. */
.openLeft {
  transform: translateX(-100%);
}

.openRight {
  transform: translateX(100%);
}

/*
 * The title is the full string in each panel, positioned to span the whole
 * viewport; each 50vw panel clips it to show one half. They read as one line
 * across the closed seam, then ride away with their panel.
 */
.titleText {
  position: absolute;
  top: 42%;
  z-index: 1; /* sit above the seam shadow */
  width: 100vw;
  transform: translateY(-50%);
  text-align: center;
  white-space: nowrap;
  font-family: var(--font-cooper), "Cooper Black", serif;
  font-size: clamp(42px, 9vw, 96px);
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 4px #000;
  paint-order: stroke fill;
}

.left .titleText {
  left: 0;
}

.right .titleText {
  left: -50vw;
}

/* "Homer's" and "Web Page" sit inline (one line) by default... */
.line {
  white-space: nowrap;
}

/* ...and stack onto two lines on phones, where one line would be cramped. */
@media (max-width: 560px) {
  .line {
    display: block;
  }
  .titleText {
    line-height: 1.05;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel {
    transition: none;
  }
}

/* --- Hit counter --- */
.counter {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 auto;
  padding: clamp(4px, 1vh, 12px) 0 clamp(10px, 2.4vh, 28px);
}

.digit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 62px;
  background: #000;
  border-radius: 4px;
  color: #fff;
  font-family: var(--font-cooper), "Cooper Black", serif;
  font-size: 42px;
  line-height: 1;
}

@media (max-width: 750px) {
  .digit {
    width: 34px;
    height: 46px;
    font-size: 30px;
  }
}