/* ============================================================================
   Store hero and navigation bar
   ============================================================================
   Two jobs in one file, because both exist for the same reason: the shop
   should look like the home page rather than like a separate product.

   1. NAVIGATION BAR, taken over from the home page. The markup the React
      bundle renders happens to have the same structure, only prefixed:
      .br-nav / .br-nav-side / .br-nav-link mirror .nav / .nav-side /
      .nav-link. So the rules can be carried over one to one. The icons are
      set through ::before rather than through elements: the bundle rebuilds
      its navigation, and anything inserted into it by script would be thrown
      away on the next render.

   2. HERO with seven layers and SCROLL parallax. The artwork now reaches the
      top of the screen with the bar floating over it, exactly as on the home
      page, and it fades out downwards instead of ending on an edge.

   The layers are injected by store-hero.js, because the hero itself belongs
   to the React bundle.
   ========================================================================= */

/* ---------- the old background ----------
   It came from i.imgur.com, so every visitor's IP address went to a third
   party. Gone; the artwork replaces it. */
.br-bgimg{ display: none !important; }
.br-bgtint{ display: none !important; }


/* ============================================================================
   1. Navigation bar, as on the home page
   ========================================================================= */

/* Floating over the artwork instead of taking up space above it - that is
   what lets the hero reach the top edge of the screen. */
body .br-nav{
  position: absolute;
  left: 0;
  right: 0;
  top: 12px;
  margin: 0 auto;
  z-index: 50;
  width: min(1180px, calc(100% - 28px));
  padding: 7px 18px;
  gap: 12px;
}
.br-nav-side{ gap: 6px; }
.br-nav-left { justify-content: flex-start; }
.br-nav-right{ justify-content: flex-end; }

.br-nav-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  font-size: 14.5px;
}

/* Icons via ::before, see the note at the top. The code points come from
   Font Awesome and are the same six the home page uses. */
.br-nav-link::before{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 12.5px;
  color: var(--red-l, #FF5C73);
  opacity: .85;
}
.br-nav-link[href*="/news"]::before        { content: "\f1ea"; }
.br-nav-link[href*="#br-top"]::before      { content: "\f3a5"; }
.br-nav-link[href*="swarps"]::before       { content: "\f3c5"; }
.br-nav-link[href*="toplists"]::before     { content: "\f091"; }
.br-nav-link[href*="items."]::before       { content: "\f201"; }
.br-nav-link[href*="wiki."]::before        { content: "\f02d"; }

/* The wordmark replaces the beaver mark. Swapped through CSS rather than in
   the markup: the logo is rendered by the React bundle, and the same file is
   still used by the footer, so replacing the file itself would change both. */
.br-nav-logo img{
  content: url(/img/wortmarke-480.webp);
  width: clamp(132px, 15vw, 190px);
  height: auto;
  max-height: none;
  image-rendering: pixelated;
}

/* Before it gets tight: drop the icons first, the spacing only after. */
@media (max-width: 1240px){
  .br-nav-link::before{ display: none; }
  .br-nav-link{ padding: 9px 12px; }
}


/* ============================================================================
   2. Hero
   ========================================================================= */

/* ---------- the artwork pins while the copy scrolls over it ----------
   This is the visible half of the parallax, and leaving it out was the bug:
   with the whole hero scrolling along, 90 px of relative shift across 832 px
   of scrolling is an 11 % difference to the page movement, and nobody
   perceives that. The same lesson is written down for the home page hero,
   and it applies here unchanged.

   Two things have to be cleared out of the way for position: sticky to work
   at all, and both fail SILENTLY - no error, no warning, the effect simply
   does not happen:

   1. .br-page carries overflow-y: auto. That makes it the scroll port sticky
      pins against, and it never scrolls itself (its scrollHeight equals its
      clientHeight). overflow-x: clip clips horizontally just the same but
      creates no scroll port.
   2. .br-hero carried overflow: hidden. Any overflow other than visible on an
      ancestor disables sticky inside it. The clipping moves to .sh-pin, which
      is where it is needed anyway. */
.br-page{
  overflow-x: clip;
  overflow-y: visible;
}

.br-hero{
  position: relative;
  isolation: isolate;
  overflow: visible;
  margin-top: 0;
  /* A flex column rather than a plain block: it keeps what the grid used to
     do, namely shrink every child to its content width and centre it. As a
     block they would each take the full width, and the login row stretched
     across all 1180 px. The holder gets stretch, it has to be full width. */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  /* artwork height plus the distance it stays put */
  --sh-art: clamp(620px, 52vw, 860px);
  --sh-pin: clamp(180px, 22vh, 300px);
  --sh-top: clamp(124px, 11vw, 190px);
  min-height: calc(var(--sh-art) + var(--sh-pin));
  /* Behind the layers, and it has to match the page below: any other colour
     shows as a band wherever the artwork does not cover. */
  background: #0A0E1A;
}

/* The pinned holder. It is in the flow, which is what sticky needs; the
   layers inside it stay absolute. */
.sh-pin{
  position: sticky;
  top: 0;
  height: var(--sh-art);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  align-self: stretch;
  width: 100%;
  flex: none;
  /* The copy belongs ON the artwork, so everything after the holder is pulled
     back up by its height, minus the space the copy should keep from the top.

     This sits on the holder and not as margin-top on the first block after
     it, which was the obvious place and does not work: the first thing the
     bundle renders is the address pill, and that is inline-flex. On an
     inline-level box margin-top does not move anything in the flow - measured,
     the pill stayed at y=826 with a -656px margin faithfully applied. A
     margin-bottom on the holder is a block-level margin and shifts whatever
     follows, whatever its display type. */
  margin-bottom: calc(var(--sh-top) - var(--sh-art));
}

.sh-stage{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* All seven layers are congruent 16:9 images stacked back to front. Each is
   scaled slightly so the scroll shift has headroom and never exposes an edge -
   same principle as the home page hero, and the same trap: the shift must fit
   inside (height * (scale - 1) / 2), otherwise it gets clamped. */
.sh-layer{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  will-change: transform;
}

/* Depth from back to front. The values are the shift in pixels across the
   scroll distance; the scale gives each one its headroom. */
.sh-l1{ z-index: 1; --sh-shift: -30px; --sh-scale: 1.08; }   /* vault */
.sh-l2{ z-index: 2; --sh-shift: -14px; --sh-scale: 1.06; }   /* energy rays */
.sh-l3{ z-index: 3; --sh-shift:  16px; --sh-scale: 1.07; }   /* figure */
.sh-l4{ z-index: 4; --sh-shift:  26px; --sh-scale: 1.08; }   /* crate */
.sh-l5{ z-index: 6; --sh-shift:  44px; --sh-scale: 1.11; }   /* floating loot */
.sh-l6{ z-index: 7; --sh-shift:  62px; --sh-scale: 1.15; }   /* foreground crystals */

/* The safe zone for the copy: dark in the middle, running out towards figure
   and crate so neither of them is dimmed. */
.sh-shade{
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(ellipse 40% 66% at 50% 46%,
      rgba(2,2,8,.93) 0%, rgba(3,2,10,.80) 44%, rgba(4,2,12,.34) 68%, transparent 85%),
    linear-gradient(0deg, rgba(2,1,8,.5), transparent 30%);
}

/* Blurred fade at the bottom instead of a hard edge: the artwork dissolves
   into the page rather than being cut off. backdrop-filter blurs what lies
   behind it, so the transition softens the image itself, not just its
   colour. */
.sh-fade{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  /* Over a quarter of the hero, not a tenth. At 100 px the artwork broke off
     on a line you could point at; the blur had no room to do anything. */
  height: clamp(190px, 27%, 340px);
  z-index: 8;
  pointer-events: none;
  /* The blur ramps up in three steps rather than sitting at full strength
     behind a mask: a single blurred box has a visible upper edge wherever
     its mask starts, however soft that mask is. */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 26%, rgba(0,0,0,.8) 58%, #000 82%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 26%, rgba(0,0,0,.8) 58%, #000 82%);
  /* #0A0E1A is the shop's actual ground - measured from the body, not
     guessed. The store does not define --bg at all, so the fallback used
     before was a slightly different blue and the seam stayed visible. */
  background: linear-gradient(to bottom,
    rgba(10,14,26,0) 0%, rgba(10,14,26,.22) 30%, rgba(10,14,26,.58) 58%,
    rgba(10,14,26,.86) 80%, #0A0E1A 96%);
}

/* Everything the React bundle renders sits above the artwork. The hero is a
   plain block now, so the centring the grid used to do is rebuilt here. */
.br-hero > *:not(.sh-pin){
  position: relative;
  z-index: 9;
  max-width: min(1180px, calc(100% - 48px));
  flex: none;
}
/* Room below the last block, where the grid's bottom padding used to be. */
.br-hero > *:last-child{
  margin-bottom: clamp(64px, 6vw, 104px);
}

@media (max-width: 760px){
  /* Portrait puts the copy at the top and the motifs below it, so the shade
     runs the other way round: strong where the type is, thin where figure and
     crate stand. */
  .br-hero{
    --sh-art: 700px;
    --sh-pin: 130px;
    --sh-top: 120px;
    /* No horizontal padding on the hero itself - the pinned holder has to
       span the full width, and padding would cut it in on both sides
       (measured 350 px on a 390 px window). The copy gets its own inset
       through the max-width below. */
    padding: 0;
  }
  .sh-shade{
    background: linear-gradient(180deg,
      rgba(2,1,8,.93) 0%, rgba(2,1,8,.90) 42%, rgba(2,1,8,.62) 64%,
      rgba(2,1,8,.30) 82%, rgba(2,1,8,.12) 100%);
  }
  /* A 16:9 layer in an upright frame shows about a third of its width, and
     both motifs stand at the edges - the figure would be cut away on the
     left, the crate on the right. Same lever as on the home page: a SHORTER
     layer makes object-fit: cover zoom less, so more width becomes visible.
     At 46 % of the holder it is around 70 % instead of 31 %.

     Only the vault keeps the full height; it is an environment rather than a
     motif and may be cropped. The rest sits at the bottom, where figure and
     crate stand, and the copy keeps the space above it. */
  .sh-l2, .sh-l3, .sh-l4, .sh-l5, .sh-l6{
    top: auto;
    bottom: 0;
    height: 46%;
    object-position: center bottom;
    /* Shortened layers start on a line, and that line is visible right across
       the picture. The mask lets them come in softly instead. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 22%);
  }
  /* The two frontmost layers carry the most detail and cost the most; on a
     phone they only need to hint at depth. */
  .sh-l5, .sh-l6{ opacity: .6; }
}

@media (prefers-reduced-motion: reduce){
  .sh-layer{ transform: none !important; }
}