/* Centered VH “Vault Gear” section — badge, title, grid, dual CTAs */

/* Stretch vault to fill leftover #main height so sky covers to footer */
body.page-home #main {
  display: flex;
  flex-direction: column;
}

body.page-home #home-builds-vault {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.home-vault {
  --home-vault-ink: #f3f5f7;
  --home-vault-muted: #9aa3ad;
  --home-vault-badge-top: #f0c56a;
  --home-vault-badge-bot: #e8912a;
  --home-vault-cell: #1c2128;
  --home-vault-shade: rgba(14, 15, 16, 0.14);
  /* Pull the loadouts surface into the Explore Items lower dip. The overlap
     scales down with the viewport so the transition stays balanced on
     short desktop, tablet, and mobile layouts. */
  --home-vault-overlap: clamp(0.9rem, 1.7vw, 1.5rem);
  /* Fallback; JS sets per-track duration from measured group width */
  --vault-marquee-duration: 36s;

  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  /* Bleed past #main frame padding so boards meet the screen-frame on both sides */
  width: calc(100% + 2 * var(--bpb-frame-edge-x, 0px));
  max-width: none;
  margin: 0 calc(-1 * var(--bpb-frame-edge-x, 0px));
  margin-top: calc(-1 * var(--home-vault-overlap));
  z-index: 3;
  box-sizing: border-box;
}

.home-vault__band {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 48rem;
  /* Top pad under items step; sides 0 so marquee can kiss the frame */
  padding: calc(5.75rem + 24px) 0 2.75rem;
  /* Curated loadouts use the deep-night hills scene, independently of the
     fixed Home combat sky behind the other sections. The frameless copy has
     the source art's baked brown border cropped off, so it cannot show
     through the Explore Items dip or the footer's curved corners. */
  background-color: #151a25;
  background-image: url('../../../assets/theme/backgrounds/bg-hills-night-deep-frameless.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.home-vault__band > .home-vault__inner {
  flex: 0 0 auto;
  width: 100%;
}

/*
 * Homepage footer: host is a body child (not nested in #main).
 * Paint the textured-black surface edge-to-edge under the screen frame; inset
 * only the copy.
 */
body.page-home #site-footer {
  /* Let the curated scene continue underneath the footer's 24px transparent
     curve instead of ending on the exact footer boundary. The footer remains
     the top layer, so its textured surface and copy stay interactive. */
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  width: 100%;
  margin-top: -24px;
  padding: 0;
  /* Keep the host transparent. The masked footer surface should reveal the
     loadout scene beneath its curved top edge instead of painting a second
     rectangular background that reads like a drop shadow at 1080p. */
  background-color: transparent;
  background-image: none;
}

body.page-home #site-footer > .site-footer {
  /* Keep the textured surface opaque for the full footer height, and use a
     fixed 24px edge step so the curve does not stretch with the copy below. */
  --home-footer-step-height: 24px;
  --home-footer-step-corner: 320px;
  --home-footer-step-mask-size: 320px var(--home-footer-step-height);
  --home-footer-inverted-top-body-mask: linear-gradient(
    to bottom,
    transparent 0,
    transparent var(--home-footer-step-height),
    white var(--home-footer-step-height),
    white 100%
  );
  --home-footer-inverted-top-center-mask: linear-gradient(
    to right,
    transparent 0,
    transparent var(--home-footer-step-corner),
    white var(--home-footer-step-corner),
    white calc(100% - var(--home-footer-step-corner)),
    transparent calc(100% - var(--home-footer-step-corner)),
    transparent 100%
  );
  --home-footer-inverted-top-left-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 24' preserveAspectRatio='none'><path fill='white' d='M0,24 H264 C292,24 292,0 320,0 V24 Z'/></svg>");
  --home-footer-inverted-top-right-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 24' preserveAspectRatio='none'><path fill='white' d='M320,24 H56 C28,24 28,0 0,0 V24 Z'/></svg>");
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: 1.75rem var(--bpb-frame-edge-x) max(3.25rem, var(--bpb-frame-edge-y));
  /* Leave the base transparent so the masked texture layer can reveal the
     curved left/right top corners instead of filling them back in. The
     pseudo-element still paints the complete footer below the curve. */
  background-color: transparent;
  background-image: none;
  border-top: 0;
}

body.page-home #site-footer > .site-footer::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  background-color: #111;
  background-image: url('../../../assets/theme/backgrounds/bg-dark-textured.webp');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-mask-image:
    var(--home-footer-inverted-top-body-mask),
    var(--home-footer-inverted-top-center-mask),
    var(--home-footer-inverted-top-left-mask),
    var(--home-footer-inverted-top-right-mask);
  mask-image:
    var(--home-footer-inverted-top-body-mask),
    var(--home-footer-inverted-top-center-mask),
    var(--home-footer-inverted-top-left-mask),
    var(--home-footer-inverted-top-right-mask);
  -webkit-mask-size: 100% 100%, 100% var(--home-footer-step-height), var(--home-footer-step-mask-size), var(--home-footer-step-mask-size);
  mask-size: 100% 100%, 100% var(--home-footer-step-height), var(--home-footer-step-mask-size), var(--home-footer-step-mask-size);
  -webkit-mask-position: center, top left, top left, top right;
  mask-position: center, top left, top left, top right;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

body.page-home #site-footer > .site-footer > .site-footer__inner {
  position: relative;
  z-index: 1;
}

/* Phone/tablet: wood frame is off, so the home footer sits on the viewport edge
   (shared.css footer rule) instead of keeping the 3.25rem desktop-rim pad. */
@media (max-width: 1100px) {
  body.page-home #site-footer > .site-footer {
    padding-bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 768px) {
  body.page-home #site-footer {
    margin-top: -25px;
  }

  body.page-home #site-footer > .site-footer {
    --home-footer-step-height: 25px;
    --home-footer-step-corner: 100px;
    --home-footer-step-mask-size: 100px var(--home-footer-step-height);
    --home-footer-inverted-top-left-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 25' preserveAspectRatio='none'><path fill='white' d='M0,25 H40 C70,25 70,0 100,0 V25 Z'/></svg>");
    --home-footer-inverted-top-right-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 25' preserveAspectRatio='none'><path fill='white' d='M100,25 H60 C30,25 30,0 0,0 V25 Z'/></svg>");
  }
}

@media (max-width: 400px) {
  body.page-home #site-footer {
    /* The phone footer intentionally has no curve mask, so it does not need
       an underlap to reveal the scene through transparent corners. */
    margin-top: 0;
    background-color: #111;
    background-image: url('../../../assets/theme/backgrounds/bg-dark-textured.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  body.page-home #site-footer > .site-footer {
    /* Mobile intentionally drops the curve mask; keep the surface opaque when
       there is no masked pseudo-element covering the footer. */
    background-color: #111;
    background-image: url('../../../assets/theme/backgrounds/bg-dark-textured.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }

  body.page-home #site-footer > .site-footer::before {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.home-vault__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  max-width: none;
  text-align: center;
  box-sizing: border-box;
}

/* CTAs stay inset from the wood frame; marquee spans full bleed */
.home-vault__actions,
.home-vault__footnote {
  box-sizing: border-box;
  padding-left: max(1.25rem, var(--bpb-frame-edge-x));
  padding-right: max(1.25rem, var(--bpb-frame-edge-x));
}

/* Patch3 shade — same wash as Choose your hero / items explore */
.home-vault__shade {
  position: relative;
  z-index: 0;
  box-sizing: border-box;
}

.home-vault__shade::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  box-sizing: border-box;
  background: var(--home-vault-shade);
  pointer-events: none;
  -webkit-mask-box-image: url('../../../assets/icons/filters/Patch3.png') 8 7 9 8 fill;
  mask-border-source: url('../../../assets/icons/filters/Patch3.png');
  mask-border-slice: 8 7 9 8 fill;
  mask-border-width: 8px 7px 9px 8px;
}

.home-vault__title {
  margin: 0;
  max-width: 18ch;
  padding: 0.55rem 1.15rem 0.6rem;
  font-family: var(--bpb-font-display);
  font-size: clamp(1.85rem, 4.2vw, 3rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.02em;
  color: var(--bpb-label-fill);
  text-shadow: var(--bpb-label-stroke);
}

.home-vault__lede {
  margin: 0 auto 0.75rem;
  max-width: 40rem;
  padding: 0.55rem 1rem 0.65rem;
  font-family: var(--bpb-font-body);
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 400;
  line-height: 1.55;
  color: var(--bpb-label-fill);
  text-shadow: var(--bpb-label-stroke);
}

/* ——— Sliding rows (items-orbit hover language) ——— */

.home-vault__marquee {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  width: 100%;
  max-width: none;
  margin: 1.35rem 0 0.65rem;
  padding: 1rem 0;
  overflow: hidden;
  box-sizing: border-box;
  /* Soft fade on the left only — right stays flush to the screen frame */
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 4%,
    #000 100%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 4%,
    #000 100%
  );
}

.home-vault__row {
  overflow: visible;
  width: 100%;
}

.home-vault__track {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  width: max-content;
  will-change: transform;
}

/* Each group owns its trailing gap so -50% lands exactly on a loop point */
.home-vault__group {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 3.25rem;
  padding-right: 3.25rem;
}

.home-vault__row--left .home-vault__track {
  animation: home-vault-slide-left var(--vault-marquee-duration) linear infinite;
}

.home-vault__row--right .home-vault__track {
  animation: home-vault-slide-right var(--vault-marquee-duration) linear infinite;
}

/* Pause only the row that owns the hovered / focused card */
.home-vault__row:has(.home-vault__cell:hover) .home-vault__track,
.home-vault__row:has(.home-vault__cell:focus-visible) .home-vault__track {
  animation-play-state: paused;
}

.home-vault__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex: 0 0 auto;
  width: 16.5rem;
  text-decoration: none;
  color: inherit;
}

.home-vault__cell:hover,
.home-vault__cell:focus-visible {
  z-index: 6;
}

.home-vault__cell:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--home-vault-badge-bot) 85%, transparent);
  outline-offset: 4px;
}

.home-vault__cell-media {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 16.5rem;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.home-vault__board {
  display: block;
  line-height: 0;
  transform-origin: center center;
  pointer-events: none;
  /* The still paints one extra cell below the 7-row grid. Keep most of that
     reservation so the lower board edge stays readable, but let the metadata
     tuck into the transparent tail instead of leaving a visible dead band. */
  padding-bottom: calc(
    var(--bpb-still-cell, 28px) - clamp(0.25rem, 0.45vw, 0.4rem)
  );
}

.home-vault__board .bpb-board-still,
.home-vault__board .bpb-bg,
.home-vault__board .bpb-bg__hit {
  pointer-events: none;
}

.home-vault__board .bpb-board-still,
.home-vault__board .bpb-bg {
  margin: 0 auto;
  overflow: visible;
  max-height: none;
}

.home-vault__board-empty {
  font-family: var(--bpb-font-body);
  font-size: 0.7rem;
  color: var(--home-vault-muted);
}

.home-vault__cell-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.5rem;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.home-vault__cell-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.08rem;
  min-width: 0;
}

.home-vault__cell-class {
  justify-self: end;
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}

.home-vault__cell-name {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--bpb-font-body);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-align: left;
}

.home-vault__cell-avatar,
.home-vault__cell-avatar--initials {
  flex: 0 0 auto;
  width: clamp(3rem, 4.25vw, 4rem) !important;
  height: clamp(3rem, 4.25vw, 4rem) !important;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

img.home-vault__cell-avatar {
  display: block;
  object-fit: cover;
}

.home-vault__cell-avatar.bpb-face,
.home-vault__cell-avatar--blob {
  display: inline-grid !important;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.home-vault__cell-avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1a1410;
  background: linear-gradient(180deg, var(--home-vault-badge-top), var(--home-vault-badge-bot));
}

.home-vault__cell-author-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--bpb-font-body);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.2;
  color: color-mix(in srgb, var(--bpb-label-fill) 88%, transparent);
  text-shadow: var(--bpb-label-stroke);
}

@keyframes home-vault-slide-left {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes home-vault-slide-right {
  from {
    transform: translate3d(-50%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

.home-vault__cell-label--rose {
  color: #f2a0c4;
}
.home-vault__cell-label--gold {
  color: #e8d48a;
}
.home-vault__cell-label--mist {
  color: #c5ccd4;
}
.home-vault__cell-label--lime {
  color: #b7e07a;
}
.home-vault__cell-label--mint {
  color: #7fd6b0;
}
.home-vault__cell-label--sky {
  color: #8ec8f0;
}
.home-vault__cell-label--amber {
  color: #f0c56a;
}
.home-vault__cell-label--lilac {
  color: #c4b0f0;
}

.home-vault__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 1.5rem;
}

/* Gold / forest banners — featured community and catalog actions. */
.home-vault__cta {
  min-width: 12.5rem;
  height: 2.85rem;
  margin: 0;
  padding: 0 1.1rem;
  font-size: 1.05rem;
}

.home-vault__cta-icon {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

@media (max-width: 720px) {
  .home-vault__band {
    min-height: 0;
    padding: calc(4.5rem + 24px) 0 2rem;
  }

  .home-vault__cell,
  .home-vault__cell-media {
    width: 14rem;
  }

  .home-vault__group {
    gap: 2.5rem;
    padding-right: 2.5rem;
  }

  .home-vault__actions {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-vault__row--left .home-vault__track,
  .home-vault__row--right .home-vault__track {
    animation: none;
    transform: none;
  }

  .home-vault__cell,
  .home-vault__cta {
    transition: none;
  }
}