/* Home page — built directly from the "Home" frame in Figma. Shared chrome
   (vars, header/nav, footer, body background, print reset) now lives in
   site.css and applies to every page, including this one, so this file only
   adds Home's own hero layout on top.

   Imports illustration.css (not site.css directly) so the ported Animation/
   Illustration sections further down this file — a single-page experiment,
   see the comment above .home-showcase — can reuse .illustration-hero and
   .illustration-grid/.illustration-card-* as-is, exactly as they render on
   their own pages. illustration.css itself imports site.css, so nothing
   from the old import is lost. */
@import url("illustration.css");

/* illustration.css's own <main> (imported above) doubles the width and
   adds extra top padding for the Animation/Illustration pages — Home's
   .hero already has its own wider 60rem max-width and padding and was
   designed unconstrained, so that's neutralised here, Home-page only. The
   ported sections below get their own doubled-width wrapper instead
   (.home-showcase-inner), rather than changing <main> itself. */
main {
  max-width: none;
  padding: 0 0 8rem; /* decent space at the very bottom — the page was
    ending abruptly right at the last Illustration card with nothing
    below it */
}


.hero {
  max-width: 60rem;
  margin: 0 auto;
  padding: 5.5rem 1.5rem 0.75rem; /* top padding raised so the gap above
    the copy (this + .site-header's own 1.25rem bottom padding = 6.75rem)
    matches the gap below it (this rule's 0.75rem bottom padding +
    .home-showcase's 6rem margin-top = 6.75rem too) */
  text-align: center;
}

/* Two colour variants of the wordmark art exist (img/home/wordmark.svg —
   cream, and wordmark-blue.svg — dark mode's own background blue).
   bulb.js swaps the <img>'s src between them to match the theme, since a
   CSS mask-image swap (tried first) turned out unreliable across
   browsers — plain <img src> swapping is guaranteed to render. */
.hero-wordmark {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  aspect-ratio: 551 / 280;
  margin: 0 auto 1.5rem;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  color: var(--cream);
  font-weight: 700; /* matches .illustration-hero-intro's weight on the
    other pages (itself matched to slimjimstudios.com/work/pat's bold body
    paragraph) rather than the site's normal regular weight */
  font-size: 20px;
  line-height: 20px; /* site.css sets body's line-height to 1.6 for long-form
                         reading pages — that was cascading in here too and
                         is almost certainly what read as "way too big": at
                         20px type, 1.6 line-height is 32px between lines.
                         Pinned to a tight 1:1 (20px) instead. */
}

/* Each line stays on one row down to a fairly narrow viewport — matches
   Figma's whitespace-nowrap on all three lines. The mobile breakpoint below
   is the deliberate escape hatch: below that width wrapping is unavoidable
   and allowed. */
.hero-copy p {
  margin: 0; /* browsers give every <p> a default ~1em top/bottom margin —
                that was stacking on top of .hero-copy's flex gap above,
                which is what made the spacing balloon and made the first
                line sit oddly far from the wordmark. The flex gap is now
                the only thing controlling spacing between lines. */
  white-space: nowrap;
}

.hero-copy a {
  color: inherit;
  text-decoration: none;
  background-image: url("../img/home/underline.svg");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% auto;
  padding-bottom: 0.15em;
}
.hero-copy a:hover { opacity: 0.85; }

/* Subtle waving-hand emoji: a few small rotations with a squash/stretch
   (opposing x/y scale) on each swing for a bit of weight, then a rest
   before it loops — reads as an occasional wave hello rather than
   something constantly flapping. transform-origin sits near the wrist
   (bottom-right of the glyph) so it pivots like a real wave instead of
   spinning around its centre. */
.wave-emoji {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: wave 2.5s ease-in-out infinite;
}
@keyframes wave {
  0%, 60%, 100% { transform: rotate(0deg) scale(1, 1); }
  10% { transform: rotate(14deg) scale(1.05, 0.95); }
  20% { transform: rotate(-8deg) scale(0.97, 1.03); }
  30% { transform: rotate(14deg) scale(1.05, 0.95); }
  40% { transform: rotate(-4deg) scale(0.98, 1.02); }
  50% { transform: rotate(10deg) scale(1.03, 0.97); }
}
@media (prefers-reduced-motion: reduce) {
  .wave-emoji { animation: none; }
}

@media (max-width: 640px) {
  .hero { padding: 5.25rem 1.25rem 0.5rem; } /* same balancing as the
    desktop rule: this + .site-header's 1.25rem = 6.5rem above, matching
    this rule's 0.5rem + .home-showcase's 6rem = 6.5rem below */
  .hero-copy { font-size: 16px; }
  .hero-copy p { white-space: normal; }
}

/* Animation + Illustration content, ported onto Home below the hero as a
   single-page experiment — with so little content on the site yet, having
   it all on one page reads better than three near-empty pages. Interactions
   stay exactly as they are on the real Animation/Illustration pages: the
   Illustration cards still link out to their own detail pages, the
   Breakfast tile still plays via js/work-data.js + js/work-grid.js (both
   now loaded on index.html too). The top nav is untouched either way — it
   still points at work/animation.html and work/illustration.html as real,
   separate pages; this is purely an additional preview living on Home. */
.home-showcase {
  margin-top: 6rem; /* fairly big gap between hero and the showcase content
    below it */
}
.home-illustration {
  margin-top: 1.5rem; /* overrides .home-showcase's 6rem for specifically
    the Animation -> Illustration gap, matching .illustration-grid's own
    row gap (1.5rem) instead — so the Breakfast tile and the Illustration
    cards below it read as one continuous, evenly-spaced grid rather than
    two separate sections */
}
.home-showcase-inner {
  max-width: calc(var(--max-width) * 2);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Animation section: unlike work.css's own version of this page (which
   drops .illustration-grid to a plain block, since it's the only content
   on that page), here the Breakfast tile stays inside the real 2-column
   .illustration-grid from illustration.css — same grid/gap rhythm as the
   Illustration cards below it, rather than a specially-widened one-off
   layout, per "keep animation evenly spaced like the illustration cards".
   It still spans the full row (grid-column: 1 / -1) rather than sitting
   in a single half-width cell with an empty gap beside it. */
/* grid-column belongs on the actual grid ITEM — the <li class=
   "illustration-card"> that's a direct child of .illustration-grid — not
   on .illustration-card-frame nested a level deeper inside it. Setting it
   on the frame did nothing (grid-column only affects direct grid
   children), so the <li> was auto-placed into column 1 same as any other
   card and the frame just filled that one narrow cell — hence it only
   ever reached as wide as the first Illustration card below it. Scoped to
   .home-animation specifically: the real Illustration cards' <li>s should
   NOT span both columns, only this one (wrapping the single Breakfast
   tile) should. */
.home-animation .illustration-card {
  grid-column: 1 / -1;
}
/* .illustration-card-frame/.illustration-card-anim's shared rules now
   live in illustration.css (imported above) — width there already
   defaults to 100%, which happens to already match what this section
   needs (filling its full-width grid item, the combined width of the two
   Illustration cards below it), so there's nothing left to override here. */