.page-home-vault .vault-hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.page-home-vault .vault-hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: scale(1.03);
  will-change: transform, opacity;
}

.page-home-vault .vault-hero-slide.is-active{
  opacity: 1;
  pointer-events: auto;
}

.page-home-vault .vault-hero-slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  will-change: transform;
}

.page-home-vault .vault-hero-layer{
  position: absolute;
  inset: 0;
}

.page-home-vault .vault-hero-layer--back img{
  filter: brightness(.8) contrast(1.04) saturate(.98);
}

.page-home-vault .vault-hero-layer--atmosphere,
.page-home-vault .vault-hero-layer--drift{
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.page-home-vault .vault-hero{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  isolation: isolate;
}

.page-home-vault .vault-hero-overlay,
.page-home-vault .vault-hero-vignette,
.page-home-vault .vault-hero-embers{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.page-home-vault .vault-hero-content{
  position: relative;
  z-index: 3;
}

@media (max-width: 767.98px){
  .page-home-vault .vault-hero{
    min-height: 92svh;
  }
}

@media (prefers-reduced-motion: reduce){
  .page-home-vault .vault-hero-slide{
    transition: none !important;
  }
}

/* =====================================================
   HOMEPAGE BUTTON SYSTEM (3 TIERS)
   PRIMARY / WORLD / SECONDARY
   ===================================================== */

/* Base button */
.page-home-vault .vault-btn{
  --btn-border: rgba(155,175,200,.42);
  --btn-fill-top: rgba(32,38,48,.96);
  --btn-fill-bot: rgba(12,16,22,.98);
  --btn-edge-glow: rgba(132,180,255,.36);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:.8rem 1.5rem;
  border-radius:4px;
  border:1px solid var(--btn-border);
  background:
    linear-gradient(180deg, var(--btn-fill-top), var(--btn-fill-bot));
  color:#e9eef7;
  font-size:.8rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  text-decoration:none;
  position:relative;
  overflow:hidden;
  box-shadow:
    0 10px 26px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
  transition:
    transform .18s ease,
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease,
    color .18s ease;
}

.page-home-vault .vault-btn span{
  position:relative;
  z-index:2;
}

.page-home-vault .vault-btn::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:linear-gradient(
    110deg,
    transparent 0%,
    rgba(255,255,255,.22) 45%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.18) 55%,
    transparent 100%
  );
  opacity:0;
  transform:translate3d(-40%,0,0) skewX(-16deg);
  pointer-events:none;
}

.page-home-vault .vault-btn:focus-visible{
  outline:2px solid rgba(196,150,96,.85);
  outline-offset:3px;
}

/* PRIMARY (hero + major CTAs) */
.page-home-vault .vault-btn--primary{
  --btn-border: rgba(132,180,255,.52);
  --btn-fill-top: rgba(30,36,48,.98);
  --btn-fill-bot: rgba(8,11,18,.99);
}

.page-home-vault .vault-btn--primary::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:4px;
  border:1px solid rgba(132,180,255,.35);
  box-shadow:0 0 18px var(--btn-edge-glow);
  opacity:.55;
  pointer-events:none;
}

.page-home-vault .vault-btn--primary:hover{
  transform:translateY(-1px);
  box-shadow:
    0 14px 32px rgba(0,0,0,.65),
    0 0 18px rgba(132,180,255,.45);
}

.page-home-vault .vault-btn--primary:hover::before{
  opacity:1;
  animation:homeBtnSweep 1.4s cubic-bezier(.22,1,.36,1);
}

/* WORLD ENTRY (chambers) */
.page-home-vault .vault-btn--world{
  --btn-border: rgba(194,155,98,.40);
  --btn-fill-top: rgba(12,10,8,.92);
  --btn-fill-bot: rgba(6,4,3,.96);
  --btn-edge-glow: rgba(194,155,98,.34);

  font-size:.78rem;
  letter-spacing:.16em;
  background:
    linear-gradient(180deg, rgba(32,24,16,.96), rgba(10,7,5,.98));
  box-shadow:
    0 10px 22px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.page-home-vault .vault-btn--world::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:4px;
  border:1px solid rgba(194,155,98,.45);
  opacity:.45;
  pointer-events:none;
}

.page-home-vault .vault-btn--world:hover{
  transform:translateY(-1px);
  box-shadow:
    0 14px 28px rgba(0,0,0,.65),
    0 0 14px rgba(194,155,98,.35);
}

.page-home-vault .vault-btn--world:hover::before{
  opacity:.9;
  animation:homeBtnSweep 1.4s cubic-bezier(.22,1,.36,1);
}

/* SECONDARY / UTILITY */
.page-home-vault .vault-btn--ghost{
  --btn-border: rgba(255,255,255,.16);
  --btn-fill-top: rgba(8,8,10,.82);
  --btn-fill-bot: rgba(4,4,6,.88);

  box-shadow:0 8px 18px rgba(0,0,0,.45);
  color:#dde2ec;
}

.page-home-vault .vault-btn--ghost::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.10);
  opacity:.4;
  pointer-events:none;
}

.page-home-vault .vault-btn--ghost:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.52);
}

.page-home-vault .vault-btn--ghost:hover::before{
  opacity:.7;
  animation:homeBtnSweep 1.4s cubic-bezier(.22,1,.36,1);
}

/* Secondary style for inline CTAs like "View Piece" */
.page-home-vault .featured-piece-cta{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(237,230,220,.86);
}

.page-home-vault .featured-piece-cta::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-.25rem;
  height:1px;
  background:linear-gradient(90deg, rgba(194,155,98,.0), rgba(194,155,98,.7), rgba(194,155,98,.0));
  opacity:.55;
  transform:scaleX(.4);
  transform-origin:left center;
  transition:
    transform .32s cubic-bezier(.22,1,.36,1),
    opacity .32s ease;
}

.page-home-vault .featured-piece-link:hover .featured-piece-cta::after,
.page-home-vault .featured-piece-link:focus-visible .featured-piece-cta::after{
  opacity:1;
  transform:scaleX(1);
}

@keyframes homeBtnSweep{
  0%{
    transform:translate3d(-40%,0,0) skewX(-16deg);
    opacity:0;
  }
  10%{
    opacity:1;
  }
  60%{
    transform:translate3d(40%,0,0) skewX(-16deg);
    opacity:1;
  }
  100%{
    transform:translate3d(60%,0,0) skewX(-16deg);
    opacity:0;
  }
}