/* The home page (/). */

/* The frog banner ends the page seated directly on the footer's ember
   rail — no page-background gap between them. */
.home + .site-footer {
  margin-top: 0;
}

.home {
  .eyebrow {
    margin: 0;
    color: var(--color-accent);
    font-size: var(--size-eyebrow);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }

  /* --- the latest hero, front and centre --- */
  .spotlight {
    position: relative;
    isolation: isolate;
    min-height: min(88svh, 52rem);
    display: grid;
    align-items: center;
    padding-block: var(--space-4);

    /* Karnok's rune-forest — the featured hero's own backdrop (a game asset).
       Swap with the featured hero (see the frontmatter's `featured`). */
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -2;
      background: url('/images/home/karnok-bg.webp') center / cover no-repeat;
    }

    /* A gold glow behind the hero; the street settles into the page. */
    &::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      background:
        radial-gradient(
          40rem 44rem at 72% 50%,
          color-mix(in srgb, var(--gold-500) 16%, transparent),
          transparent 60%
        ),
        linear-gradient(
          to bottom,
          color-mix(in srgb, var(--night-950) 50%, transparent),
          color-mix(in srgb, var(--night-950) 45%, transparent) 45%,
          var(--color-bg)
        );
    }

    /* Karnok dominates: a wide art column so the character towers over the
       text. The inner runs wider than the page wrap so the art flows toward the
       right and the widest skins (a mounted beast) render un-clipped. */
    .inner {
      width: min(88rem, 100% - 2.5rem);
      display: grid;
      grid-template-columns: 1fr min(50rem, 50vw);
      align-items: center;
      gap: clamp(var(--space-3), 4vw, var(--space-4));
    }

    .text {
      max-width: 36rem;
      text-shadow: 0 2px 20px color-mix(in srgb, var(--night-950) 80%, transparent);
    }

    .name {
      margin: var(--space-2) 0 0;
      font-size: var(--size-display);
      line-height: 0.95;
      letter-spacing: -0.02em;
    }

    .epithet {
      margin: var(--space-2) 0 0;
      color: var(--color-accent);
      font-family: var(--font-display);
      font-size: var(--size-h3);
      font-weight: 500;
      text-wrap: balance;
    }

    .blurb {
      margin-top: var(--space-3);
      max-width: 42ch;
      color: var(--parchment-300);
      font-size: var(--size-lead);
      line-height: 1.6;

      p {
        margin: 0;
      }
    }

    /* Karnok's Spine stage: the character with a vertical skin switcher on its
       right. The canvas is the tallest item, so it fills the row and its
       bottom stays put — Karnok keeps standing on the ground while the
       switcher centres on him (align-items: center), balanced at his midpoint
       rather than pinned to his feet. */
    .art .spine-stage {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-3);
    }

    .art .spine-stage .frame {
      flex: 1 1 0;
      min-width: 0;
      width: auto;
      /* Squarer than a portrait, so a wide skin (wings, a mounted beast)
         reads at a fair size against the lean ones rather than fitting to
         its own width. What runs past this box spills; see site.css. */
      aspect-ratio: 4 / 5;
      filter: drop-shadow(0 24px 50px rgba(0, 0, 0, 0.6));
    }

    .art .spine-stage .skins {
      flex: none;
      flex-direction: column;
      gap: var(--space-2);
    }

    .art .spine-stage .skin {
      width: 6.5rem;
      height: 6.5rem;
    }
  }

  /* --- Karnok's Rage mechanic --- */
  .rage {
    padding-block: var(--space-5);
    text-align: center;

    .head {
      max-width: 52rem;
      margin-bottom: var(--space-5);
    }

    .title {
      margin: var(--space-2) 0 0;
      font-size: var(--size-h1);
      color: var(--color-accent);
      text-wrap: balance;
    }

    .lead {
      margin: var(--space-3) auto 0;
      max-width: 52ch;
      color: var(--parchment-300);
      font-size: var(--size-lead);
      line-height: 1.6;

      strong {
        color: var(--color-text);
      }
    }

    /* a huge centred image with corner flourishes (bear, knife) */
    .art {
      position: relative;
      width: min(74rem, 100% - 2.5rem);
      margin-inline: auto;
    }

    .art .enrage {
      display: block;
      width: 100%;
      height: auto;
      border-radius: var(--radius);
      filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.6));
    }

    .art .flourish {
      position: absolute;
      height: auto;
      pointer-events: none;
      z-index: 2;
      filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.5));
    }

    .art .bear {
      width: 26%;
      top: -9%;
      left: -7%;
    }

    .art .knife {
      width: 15%;
      right: -4%;
      bottom: -9%;
    }
  }

  /* --- Karnok card previews; the hover-detail reveal is pure CSS --- */
  .previews {
    position: relative;
    z-index: 1; /* a hovered card's detail overlays the board section below */
    padding-block: var(--space-5);
    text-align: center;

    .title {
      margin: var(--space-2) 0 0;
      font-size: var(--size-h2);
      color: var(--color-accent);
    }

    .hint {
      margin: var(--space-3) 0 0;
      color: var(--color-muted);
      font-size: var(--size-body);
    }

    /* The cards rest on the legacy carpet (the real weave, shared with the
       /game item rug) under a dark veil so the art stays the loudest thing,
       and flow centred so their true small / medium / large sizes read as a
       balanced spread rather than a rigid grid that strands the little
       cards in a corner. */
    .cards {
      width: min(84rem, 100% - 2.5rem);
      margin: var(--space-4) auto 0;
      padding: var(--space-4) var(--space-3);
      list-style: none;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: var(--space-4) var(--space-3);
      border-radius: 18px;
      border: 1px solid color-mix(in srgb, var(--gold-500) 30%, transparent);
      background:
        linear-gradient(
          color-mix(in srgb, var(--night-950) 38%, transparent),
          color-mix(in srgb, var(--night-950) 38%, transparent)
        ),
        url('/images/carpet.webp') center / cover no-repeat;
      box-shadow:
        inset 0 0 0 5px color-mix(in srgb, var(--night-950) 45%, transparent),
        inset 0 0 70px color-mix(in srgb, var(--night-950) 55%, transparent),
        0 24px 60px color-mix(in srgb, var(--night-950) 55%, transparent);
    }

    /* Each card hugs its trimmed art at a shared height, keeping the true
       small / medium / large proportions from the game. Fluid so a wide screen
       gets big cards while narrower ones shrink them to keep ~4 per row. */
    .card {
      position: relative;
      height: clamp(9rem, 3rem + 15vw, 17rem);
    }

    .card .face {
      display: block;
      height: 100%;
      width: auto;
      transform-origin: center;
      will-change: transform;
      filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.55));
      transition:
        transform var(--transition),
        filter var(--transition);
    }

    .card:hover,
    .card:focus-within {
      z-index: 10;
    }

    /* The lift + 3D tilt is driven by the inline island on hover (see
       index.astro); CSS keeps the warm glow and the ease back to rest. */
    .card:hover .face,
    .card:focus-within .face {
      filter: drop-shadow(
        0 18px 34px color-mix(in srgb, var(--gold-600) 45%, transparent)
      );
    }

    /* The detail 'tooltip' is fixed and placed by the island on whichever side
       has the most room, so it never covers the card or runs off a screen
       edge (the old always-below dropped row 2 off the bottom). */
    .card .detail {
      position: fixed;
      left: 0;
      top: 0;
      display: block;
      width: min(20rem, 82vw);
      height: auto;
      opacity: 0;
      pointer-events: none;
      transform: scale(0.96);
      transform-origin: center;
      transition:
        opacity var(--transition),
        transform var(--transition);
      z-index: 30;
      filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.7));
    }

    .card.is-tip .detail {
      opacity: 1;
      transform: scale(1);
    }

    /* The detail is a hover affordance, and the island only wires it to a fine
       pointer. Where there is none, neither the detail nor the hint that tells
       you to hover for it has anything to say. */
    @media (hover: none) {
      .hint,
      .card .detail {
        display: none;
      }
    }
  }

  /* --- Karnok's game board --- */
  .board {
    padding-block: var(--space-5);

    /* A big board: a near-full-width container with the lion's share for
       the video. */
    .inner {
      width: min(96rem, 100% - 2.5rem);
      display: grid;
      grid-template-columns: 2.3fr 1fr;
      align-items: center;
      gap: clamp(var(--space-4), 5vw, var(--space-5));
    }

    .frame {
      padding: 0.5rem;
      border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
      border-radius: 16px;
      background: var(--color-elevated);
      box-shadow: 0 24px 60px color-mix(in srgb, var(--night-950) 60%, transparent);
    }

    .frame video {
      display: block;
      width: 100%;
      height: auto;
      aspect-ratio: 1280 / 762;
      object-fit: cover;
      border-radius: 10px;
    }

    .title {
      margin: var(--space-2) 0 0;
      font-size: var(--size-h2);
      color: var(--color-accent);
      text-wrap: balance;
    }

    .lead {
      margin-top: var(--space-3);
      color: var(--parchment-300);
      font-size: var(--size-lead);
      line-height: 1.6;

      strong {
        color: var(--color-text);
      }
    }

    .note {
      margin-top: var(--space-3);
      color: var(--color-muted);
      font-size: var(--size-small);
    }


  }

  /* stack the two-column showcase sections on narrow screens */
  @media (max-width: 48rem) {
    .board .inner {
      grid-template-columns: 1fr;
    }

    /* Tighten the carpet on a narrow screen (card height is fluid in the base
       rule; the flow-wrap layout is the base too). */
    .previews .cards {
      padding: var(--space-3) var(--space-2);
      gap: var(--space-3) var(--space-2);
    }

    .rage .art .flourish {
      display: none;
    }
  }

  /* --- the community banner, dressed as the legacy Worrywart banner --- */
  .community {
    /* The legacy gradient, verbatim: plum flanks around a teal heart, with
       the page pressing a soft shadow onto the banner's top edge. */
    background: linear-gradient(90deg, #231721 0%, #1f4141 50%, #231721 100%);
    box-shadow: inset 0 20px 29px -9px rgba(0, 0, 0, 0.68);
    overflow: hidden;
    text-align: center;
    text-shadow: 0 1px 4px #0007;

    /* Full bleed, like the legacy banner: copy in a 40% column, the frog
       taking the rest of the row. */
    .inner {
      display: grid;
      grid-template-columns: 40% auto;
    }

    .text {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      max-width: 26rem;
      margin-inline: auto;
      padding-block: var(--space-5);
      padding-inline: var(--space-3);
    }

    h2 {
      font-size: var(--size-h2);
      color: var(--color-accent);
    }

    /* The member count, baked in at build, reads as a stat: the number on
       its own line, the label beneath — no mid-sentence wrap. */
    .count {
      margin: var(--space-3) 0 0;
      color: var(--tan-700);
      font-size: var(--size-body);

      strong {
        display: block;
        color: var(--color-accent);
        font-size: 2.4em;
        font-weight: 600;
        line-height: 1.1;
      }
    }

    .lead {
      margin: var(--space-2) 0 0;
      color: var(--tan-700);
      font-size: var(--size-body);
      text-wrap: balance;
    }

    /* The thin orange rule the legacy banner draws before its socials. */
    .divider {
      width: 100%;
      max-width: 18rem;
      height: 1px;
      margin-block: var(--space-3);
      background: var(--gold-400);
    }

    .socials {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: var(--space-3);
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .social {
      display: inline-flex;
      color: var(--gold-400);
      transition:
        color var(--transition),
        transform var(--transition);

      svg {
        width: 26px;
        height: 26px;
        fill: currentColor;
      }

      &:hover {
        color: var(--tan-700);
        transform: translateY(-3px);
      }
    }

    /* The Worrywart, huge and flush with the banner's right edge. His art
       is cropped flat at the bottom, so he stands on the banner's bottom
       edge (align-self: end) — the crop vanishes into the footer join and
       his hooded head stays whole. */
    .mascot {
      display: block;
      width: min(60vw, 56rem);
      height: auto;
      justify-self: end;
      align-self: end;
    }

    /* Narrow screens keep the copy on the gradient; the frog steps out,
       exactly as the legacy banner behaves. */
    @media (max-width: 64rem) {
      .inner {
        grid-template-columns: 1fr;
      }

      .mascot {
        display: none;
      }

      .text {
        padding-block: var(--space-4);
      }
    }
  }

  /* Stack the spotlight on narrow screens. */
  @media (max-width: 48rem) {
    .spotlight {
      min-height: 0;

      .inner {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: var(--space-4);
      }

      .text {
        max-width: none;
      }

      .blurb {
        margin-inline: auto;
      }

      .actions {
        justify-content: center;
      }

      .art {
        order: -1;
        width: min(17rem, 62vw);
      }

      /* The side column only fits beside the wide desktop art; on a narrow
         screen stack the switcher under a full-width Karnok. */
      .art .spine-stage {
        flex-direction: column;
        align-items: center;
      }

      .art .spine-stage .frame {
        flex: none;
        width: 100%;
      }

      /* Two by two, not a row that wraps: a square block reads as one group,
         and no count of tiles strands one on its own line. */
      .art .spine-stage .skins {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        gap: var(--space-1);
      }

      .art .spine-stage .skin {
        width: 4.25rem;
        height: 4.25rem;
      }
    }
  }
}