/* home-hero.css (owner: W2): the home page's hero and the benefits strip under it.
 *
 * The look of the pieces (the parchment panel, .title, .eyebrow, .lead, the download button and the iOS
 * line) comes from tokens.css, base.css and components.css; this file only places and sizes them, and adds
 * the hero's gold crest and the strip's dividers. The tokens are aliased once here, with the design's
 * values as fallbacks, so a renamed token cannot quietly break these sections.
 */
.home-hero,
.home-benefits {
  --hh-royal: var(--c-royal, #0f27a8);
  --hh-ink: var(--c-ink, #2c2118);
  --hh-ink-soft: var(--c-ink-soft, #4e4034);
  --hh-gold: var(--c-gold, #cf9536);
  --hh-gold-line: var(--c-gold-line, #d6aa5a);
  --hh-header-h: var(--header-h, 6rem);
  --hh-gutter: var(--gutter, 1rem);
  /* How far the benefits strip reaches up into the parchment under the hero's arched edge: a quarter
     of the arch's dip, so it stays clear of the rim at its corners. */
  --hh-overlap: calc(var(--edge-arch-h, 3rem) * 0.25);
}

/* ---- Hero ---------------------------------------------------------------------------------------
 * Desktop: the art covers the whole section and the panel sits over its blurred centre, between the
 * characters at the left and right edges. The header floats over the top of the art, so the section is
 * padded by --header-h.
 * At the foot the art meets the page in the arched parchment edge (components.css, .edge-arch, the
 * section's last child): the art stays sharp down to the gold rim and is cut along it (.edge-cut), and
 * the page's parchment under the arch carries the benefits strip. The section's bottom padding keeps
 * the panel and its hanging jewel clear of the arch.
 * Layers (base.css): the section is no stacking context; the art is z-index 0, an animation layer
 * (.fx-layer) that a script appends is 1 (cut along the arch too), the panel and the edge 2. */
.home-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: clamp(34rem, 44vw, 64rem);
  padding:
    calc(var(--hh-header-h) + clamp(2.25rem, 5vw, 5.5rem))
    var(--hh-gutter)
    calc(clamp(2.75rem, 4.5vw, 5rem) + var(--edge-h, 4.5rem));
}

.home-hero__art {
  position: absolute;
  inset: 0;
  z-index: 0;
  max-width: none;
}

.home-hero__art img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* Crop mostly from the top (sky and towers, under the header), so the porings at the bottom stay. */
  object-position: 50% 78%;
}

.home-hero .home-hero__panel {
  position: relative;
  z-index: 2;
  width: min(100%, clamp(30rem, 42vw, 41rem));
  margin: 0;
  text-align: center;
  filter: drop-shadow(0 18px 24px rgb(60 38 8 / 0.3));
  /* The headline is sized against the panel (cqi), see below. */
  container-type: inline-size;
}

.home-hero .home-hero__eyebrow {
  margin: 0 0 clamp(0.5rem, 1vw, 0.875rem);
}

/* .title--display's size, but never wider than the panel: "Your world." is 6.03 em wide in Literata
   ExtraBold, so at 16 % of the panel's inner width (16cqi) it always fits on its line; at a fixed size it
   broke into "Your / world." between about 1000 and 1300 px. Without container units the size stays
   .title--display's. The design's headline is heavier and a touch tighter than a title. */
.home-hero .home-hero__title {
  margin: 0;
  font-size: min(var(--fs-display, 5rem), 16cqi);
  font-weight: var(--fw-heavy, 800);
  line-height: 1.02;
}

/* "Your world." and "Anywhere." always on lines of their own, as in the design. */
.home-hero__title span {
  display: block;
}

.home-hero .home-hero__lead {
  max-width: 21em;
  margin: clamp(0.75rem, 1.4vw, 1.125rem) auto 0;
  color: var(--hh-ink);
}

.home-hero__cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.25rem, 2.2vw, 1.875rem);
}

/* The iOS line draws its own gold rules (components.css). */
.home-hero__ios {
  margin-top: clamp(0.875rem, 1.6vw, 1.25rem);
}

.home-hero__ios .ios-note {
  margin: 0;
}

/* The hero's crest: in the design it is bigger than the other panels' (a fleur over a jewel, where
   .parchment--crest has a jewel between scrolls), so it is drawn here, in the same golds as crest.svg.
   With a small jewel hanging from the bottom edge. The parchment's gold line is on the panel's edge,
   and the SVGs are drawn so that their y = 46 of 64 (top) and y = 14 of 40 (bottom) sit on it. */
.home-hero__crest {
  position: absolute;
  left: 50%;
  z-index: 2;
  line-height: 0;
  pointer-events: none;
}

.home-hero__crest svg {
  display: block;
  width: 100%;
  height: auto;
}

.home-hero__crest--top {
  top: 0;
  width: clamp(8.5rem, 14vw, 13.5rem);
  transform: translate(-50%, -71.9%);
}

.home-hero__crest--bottom {
  bottom: 0;
  width: clamp(6rem, 8vw, 7.5rem);
  transform: translate(-50%, 65%);
}

/* Phones and tablets held upright (up to 820 px, the width of an iPad Air; the art is 810 px wide, so it
   is never enlarged noticeably): the portrait art. On those widths the landscape art would have to be
   cropped so far that the characters at its edges lose their faces. The breakpoint is the same as the
   picture's <source media> in hero.html.
   The panel comes first, right under the header, and the art shows under it as a window onto the two
   adventurers. The picture is a box of its own below the panel; its image is far taller than the box
   and reaches up behind the panel, placed so that the characters' heads (from 43.75 % of the art's
   height) start just under the panel, however tall the panel turns out. The section clips the rest.
   --hh-art-h is big enough for the art to reach the top of the section above a panel of the usual
   height.
   The window is the arched edge's height taller, so the arch, cut across its foot, takes none of the
   adventurers. */
@media (max-width: 820px) {
  .home-hero {
    --hh-art-h: max(70rem, 177.8vw);
    justify-content: flex-start;
    min-height: 0;
    padding: calc(var(--hh-header-h) + clamp(2.25rem, 8vw, 3rem)) var(--hh-gutter) 0;
  }

  .home-hero .home-hero__panel {
    width: min(100%, 34rem);
  }

  .home-hero__art {
    position: relative;
    inset: auto;
    align-self: stretch;
    height: calc(var(--hh-art-h) * 0.215 + var(--edge-h, 1.5rem));
    margin-inline: calc(-1 * var(--hh-gutter));
  }

  .home-hero__art img {
    position: absolute;
    left: 0;
    top: calc(0.75rem - var(--hh-art-h) * 0.4375);
    height: var(--hh-art-h);
    /* The art's left quarter is blurred; crop from there. */
    object-position: 86% 0;
  }

  .home-hero__crest--top {
    width: 7.5rem;
  }

  .home-hero__crest--bottom {
    width: 5.5rem;
  }
}

/* Small phones: "Beta download coming soon" needs about 300 px on one line and the eyebrow 280 px, more
   than the parchment's usual side padding leaves at 375 and 360 px. The frame's corner scrolls sit
   higher than the button and the eyebrow, so a narrower side padding keeps clear of them. */
@media (max-width: 420px) {
  .home-hero .home-hero__panel {
    padding-inline: 0.75rem;
  }
}

/* ---- Benefits strip -------------------------------------------------------------------------- */
/* It sits on the parchment under the hero's arched edge, reaching --hh-overlap up into it, and it is
   content (z-index 2). With .home-main's margin, about 24 px lie between it and the panels under it at
   1440. */
.home-benefits {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--hh-overlap));
  padding-block: clamp(0.875rem, 1.2vw, 1.125rem) clamp(0.75rem, 1vw, 1rem);
}

.home-benefits__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.home-benefits__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-benefits__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.625rem, 1vw, 0.875rem);
  padding: 0.25rem clamp(0.75rem, 1.4vw, 1.25rem);
}

/* A gold hairline between the items, with a small diamond at its middle. */
.home-benefits__item + .home-benefits__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6%;
  bottom: 6%;
  width: 1px;
  background: linear-gradient(180deg, rgb(214 170 90 / 0), var(--hh-gold-line) 22%, var(--hh-gold-line) 78%, rgb(214 170 90 / 0));
}

.home-benefits__item + .home-benefits__item::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  background: var(--hh-gold);
  transform: translate(-50%, -50%) rotate(45deg);
}

.home-benefits__art {
  flex: none;
}

/* The pictures are exact crops on the design's cream; a feathered edge melts their rectangle into the
   parchment, whatever its exact shade. All three are 98 px tall, so they share a height, which never
   goes past their own. */
.home-benefits__art img {
  width: auto;
  height: clamp(4.75rem, 6.6vw, 6.125rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent),
                      linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent),
              linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-composite: intersect;
}

.home-benefits__text {
  min-width: 0;
}

.home-benefits .home-benefits__title {
  margin: 0 0 0.3rem;
  font-size: clamp(1.125rem, 0.2rem + 1.44vw, 1.5rem);
  line-height: 1.2;
  color: var(--hh-royal);
}

.home-benefits__text p {
  margin: 0;
  font-size: var(--fs-small, 0.9375rem);
  line-height: 1.5;
  color: var(--hh-ink-soft);
}

/* Desktop: as compact as the design's strip (146 px at 1024), each description on two lines. At 14 px
   a description needs about 212 px for that (15 px from 1280: about 225 px), so between 1024 and 1440
   the spacing gives way: the panel's and the dividers' side padding, the gap, and the pictures, which
   are 64 px tall at 1024 and grow to their own 98 px; from 1440 up the strip is as it was. */
@media (min-width: 1024px) {
  .home-benefits .home-benefits__panel {
    padding-block: clamp(1.5rem, 0.27rem + 1.92vw, 2rem);
    padding-inline: clamp(1rem, 3.85vw - 1.46rem, 2rem);
  }

  .home-benefits__item {
    gap: clamp(0.5rem, 1.44vw - 0.42rem, 0.875rem);
    padding: 0 clamp(0.5rem, 2.88vw - 1.34rem, 1.25rem);
  }

  .home-benefits__art img {
    height: clamp(4rem, 7.45vw - 0.77rem, 6.125rem);
  }

  .home-benefits .home-benefits__title {
    margin-bottom: 0.2rem;
  }

  .home-benefits__text p {
    font-size: clamp(0.875rem, 0.1375rem + 1vw, 0.9375rem);
    line-height: 1.45;
  }
}

/* Tablets: still three columns, each picture above its text. */
@media (max-width: 1023px) {
  .home-benefits__item {
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    padding-block: 0.25rem 0.5rem;
  }
}

/* Phones: one benefit under the other, the hairlines between them lying down. */
@media (max-width: 640px) {
  .home-benefits__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-benefits__item {
    flex-direction: row;
    text-align: left;
    padding: 0.875rem 0.25rem;
  }

  .home-benefits__item + .home-benefits__item::before {
    top: 0;
    bottom: auto;
    left: 6%;
    right: 6%;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, rgb(214 170 90 / 0), var(--hh-gold-line) 22%, var(--hh-gold-line) 78%, rgb(214 170 90 / 0));
  }

  .home-benefits__item + .home-benefits__item::after {
    top: 0;
    left: 50%;
  }

  /* One width for the three pictures, so the texts line up under each other. */
  .home-benefits__art {
    display: flex;
    justify-content: center;
    width: 5.375rem;
  }

  .home-benefits__art img {
    height: 4.75rem;
  }

  .home-benefits .home-benefits__title {
    font-size: 1.25rem;
  }
}