/* ===== GALLERY OF THE MIND — homepage gateway into the Collections room (v44) =====
   Full-bleed muted loop of the liminal gallery; the whole stage links to /collections,
   so home-page-only scrollers discover the signature room. Text sits over a dark
   gradient scrim — EXPLICIT colours only (white-theme token inversion). */
.gateway { position: relative; z-index: 2; margin: 0; }
.gateway__stage {
  display: block; position: relative; width: 100%;
  height: clamp(460px, 86vh, 880px);
  overflow: hidden; background: #e9e6e0;
  color: var(--on-media); text-decoration: none;
}
.gateway__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 1.4s var(--ease);
}
.gateway__stage:hover .gateway__video { transform: scale(1.03); }
.gateway__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(18,15,12,0.74) 0%, rgba(18,15,12,0.36) 26%, rgba(18,15,12,0) 56%),
    linear-gradient(to right, rgba(18,15,12,0.34) 0%, rgba(18,15,12,0) 48%);
}
.gateway__content {
  position: absolute; left: 0; right: 0; bottom: clamp(2.2rem, 7vh, 5.4rem);
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(0.7rem, 1.4vh, 1.1rem);
}
.gateway__label { color: rgba(244, 239, 230, 0.80); }
.gateway__title {
  font-family: var(--f-display); font-weight: 340;
  font-size: clamp(2.2rem, 5.6vw, 4.6rem); line-height: 0.98;
  letter-spacing: -0.018em; color: #fbf8f3; max-width: min(22ch, 100%);
}
.gateway__sub {
  width: 100%; max-width: 44ch; color: rgba(244, 239, 230, 0.85);
  font-size: clamp(1rem, 1.2vw, 1.18rem); line-height: 1.55; font-weight: 300;
}
.gateway__cta {
  margin-top: clamp(0.4rem, 1vh, 0.85rem); pointer-events: none; /* whole stage is the link */
  background: #f4efe6; color: var(--bone); border-color: #f4efe6;
}
.gateway__stage:hover .gateway__cta { background: var(--gold); border-color: var(--gold); color: #fff; }
.gateway__stage:hover .gateway__cta .arrow { transform: translateX(4px); }
@media (max-width: 720px) {
  .gateway__stage { height: clamp(440px, 74vh, 640px); }
  .gateway__title { font-size: clamp(2rem, 8.5vw, 2.9rem); }
  .gateway__sub { font-size: 1rem; }
}

/* ---- Collector Circle CTA: the SAME gold shimmer + breathing glow as the prints "available" pill.
   Sheen painted via ::before behind the label (z-index -1 within the button's own stacking context),
   so the text stays crisp; both pause on hover. ---- */
.subscribe .btn--solid { position: relative; z-index: 0; overflow: hidden; animation: cc-glow 3.4s ease-in-out infinite; }
.subscribe .btn--solid::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -65%; width: 42%; z-index: -1;
  background: linear-gradient(100deg,
    rgba(255,248,228,0) 0%, rgba(255,250,236,0.45) 42%, rgba(255,255,255,0.85) 50%,
    rgba(255,250,236,0.45) 58%, rgba(255,248,228,0) 100%);
  transform: skewX(-16deg); pointer-events: none;
  animation: cc-shimmer 5s ease-in-out 1.2s infinite;
}
@keyframes cc-shimmer { 0% { left: -65%; opacity: 0; } 8% { opacity: 1; } 24% { left: 125%; opacity: 1; } 28%, 100% { left: 125%; opacity: 0; } }
@keyframes cc-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(169,119,46,0); } 50% { box-shadow: 0 0 18px -4px rgba(169,119,46,0.45); } }
.subscribe .btn--solid:hover { animation-play-state: paused; }
.subscribe .btn--solid:hover::before { animation-play-state: paused; opacity: 0; }

/* ---- ENTER: a slow dive + fade so stepping into the gallery feels intentional, not a hard cut.
   js/home.js sets the fade colour per destination (white into the liminal gallery's white
   preloader; warm-dark into the 3D room). ---- */
.gateway-dive { position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: 0; }   /* GSAP animates the opacity (see home.js) */