/* Reference motion: a full-height banner and its header translate as one strip.
   Do not grow the banner: that reveals its text in the opposite direction. */
:root {
  --vg-banner-full: 44px;
  --vg-header-expanded: 84px;
  --vg-header-collapse: 0px;
  --vg-hero-top: 126px;
  --vg-hero-join: #23162f;
  --vg-section-blend: clamp(160px, 24svh, 260px);
  --vg-chrome: #211827;
}
.site-chrome {
  position: fixed;
  z-index: 210;
  inset: 0 0 auto;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: 36px;
  overflow: hidden;
  pointer-events: none;
}
.site-chrome-track {
  transform: translate3d(0, calc(var(--vg-banner) - var(--vg-banner-full)), 0);
  will-change: transform;
}
.site-chrome, .site-chrome .announcement-bar, .site-chrome .site-header, .hero {
  /* Keep Safari's native vertical swipe, momentum and pinch zoom. */
  touch-action: pan-y pinch-zoom;
}
.hero .hero-media, .hero .hero-shade { pointer-events: none; }
.site-chrome::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: env(safe-area-inset-top, 0px);
  background: var(--vg-chrome);
  z-index: 220;
}
.site-chrome .announcement-bar {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  height: var(--vg-banner-full) !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  /* Never fade this container: doing so exposed a strip of moving video. */
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  background: var(--vg-chrome);
  pointer-events: auto;
}
.site-chrome .announcement-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(96deg,#c994bf,#d9a9c0 48%,#b9a5d2);
  opacity: var(--vg-banner-opacity, 1);
}
.site-chrome .announcement-bar[aria-hidden="true"] { pointer-events: none; }
.vg-banner-text {
  position: relative;
  opacity: var(--vg-banner-label-opacity, 1);
  min-height: 44px;
  padding: 8px max(14px, env(safe-area-inset-right, 0px)) 8px max(14px, env(safe-area-inset-left, 0px));
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #24152b;
  font: 800 9.8px/1.35 Inter, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.site-chrome .site-header,
.site-chrome .site-header.scrolled {
  position: relative;
  inset: auto;
  top: 0 !important;
  height: calc(var(--vg-header-expanded) - var(--vg-header-collapse)) !important;
  transition: background .25s, border-color .25s, box-shadow .25s;
  pointer-events: auto;
}
.site-chrome .site-header .brand {
  grid-area: auto !important;
  justify-self: auto !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  transition: none !important;
}
.site-chrome .site-header .brand img { transition: none !important; }

/* One continuous backing covers safe area, remaining announcement and header.
   It stays anchored to the viewport, so no moving-video slit can open above
   the logo when the announcement dissolves. Only its bottom edge is feathered. */
.site-chrome .site-header,
.site-chrome .site-header.scrolled {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.site-chrome::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: calc(env(safe-area-inset-top, 0px) + var(--vg-banner, 0px) + var(--vg-header-expanded) - var(--vg-header-collapse) + 32px);
  pointer-events: none;
  background: var(--vg-chrome);
  /* Transparent on arrival; only the native scroll controller reveals this. */
  opacity: var(--vg-chrome-opacity, 0);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 32px), rgba(0,0,0,.96) calc(100% - 24px), rgba(0,0,0,.65) calc(100% - 14px), rgba(0,0,0,.2) calc(100% - 5px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 calc(100% - 32px), rgba(0,0,0,.96) calc(100% - 24px), rgba(0,0,0,.65) calc(100% - 14px), rgba(0,0,0,.2) calc(100% - 5px), transparent 100%);
}
.site-chrome .site-header::before { content: none; }
.site-chrome .site-header .scroll-progress {
  top: 0 !important;
  bottom: auto !important;
  height: 1px;
  background: transparent;
}

/* Static, shared opaque seam. The scene now recedes as one composition instead
   of stretching a gradient across its content. No scroll-driven layout changes. */
.hero { background: var(--vg-hero-join); }
.hero::before {
  bottom: -1px;
  height: clamp(200px, 30svh, 360px);
  background: linear-gradient(180deg,
    rgba(35,22,47,0) 0%,
    rgba(35,22,47,.06) 12%,
    rgba(35,22,47,.18) 28%,
    rgba(35,22,47,.4) 46%,
    rgba(35,22,47,.68) 64%,
    rgba(35,22,47,.9) 80%,
    var(--vg-hero-join) 94%,
    var(--vg-hero-join) 100%);
  pointer-events: none;
  transform: none;
}
.hero.vg-scene-ready .hero-media {
  opacity: var(--vg-video-opacity, 1);
  transform: scale(var(--vg-video-scale, 1));
  transform-origin: 50% 50%;
  transition: none !important;
}
.hero.vg-scene-ready .hero-content {
  opacity: var(--vg-scene-opacity, 1);
  transform: translate3d(0, var(--vg-scene-drift, 0px), 0) scale(var(--vg-scene-scale, 1));
  transform-origin: 50% 68%;
  transition: none !important;
}
.hero.vg-scene-ready[data-scene-exited] .hero-content { pointer-events: none; }
.hero.vg-scene-ready .hero-content:focus-within {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
/* These three opening elements follow native scroll in both directions. Their
   child images retain the existing hover treatment; the rest of the page keeps
   its one-time editorial reveals. No delay, blur or full-screen fixed layer. */
.collection-editorial .edition-intro .vg-scene-entry {
  /* Override the older .reveal visibility reset in scroll-affordances.css. */
  opacity: var(--vg-entry-opacity, 1) !important;
  transform: translate3d(0, var(--vg-entry-y, 0px), 0) scale(var(--vg-entry-scale, 1)) !important;
  transform-origin: 50% 30%;
  filter: none;
  transition: none !important;
}
.collection-editorial .edition-intro .vg-scene-entry[data-entry-hidden] { pointer-events: none; }
.collection-editorial .edition-intro .vg-scene-entry:focus-within {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto;
}
.collection-editorial .edition-intro {
  background:
    linear-gradient(180deg,
      var(--vg-hero-join) 0%,
      rgba(35,22,47,.98) 16%,
      rgba(35,22,47,.88) 32%,
      rgba(35,22,47,.62) 52%,
      rgba(35,22,47,.28) 74%,
      rgba(35,22,47,0) 100%) top / 100% var(--vg-section-blend) no-repeat,
    radial-gradient(90% 62% at 12% 0%, rgba(151,75,146,.16), transparent 62%),
    linear-gradient(180deg, #21132c, #291734);
}
.hero .hero-content {
  /* Reserve the final space once. Scrolling must not change the page height. */
  padding-top: calc(var(--vg-hero-top) + var(--vg-banner-full) + env(safe-area-inset-top, 0px)) !important;
}
.hero.vg-intro .hero-content > :is(.eyebrow,h1,.hero-copy,.hero-commerce,.hero-actions,.hero-trust) { opacity: 0; }
.hero .scroll-cue {
  width: 48px !important;
  height: 48px !important;
  transition: none !important;
}
.hero .scroll-cue svg {
  width: 34px !important;
  height: 14px !important;
  flex: none;
  transform-origin: center;
  filter: none !important;
  animation: none !important;
}
.hero .scroll-cue svg path { stroke: none !important; }
@keyframes vg-cue-float {
  0%, 100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,2.15px,0); }
}
@media (prefers-reduced-motion: no-preference) {
  .hero .scroll-cue[data-cue-visible] svg {
    animation: vg-cue-float 2.4s ease-in-out 2 !important;
  }
}
.vg-scroll-reveal {
  opacity: 0;
  transform: translate3d(0,24px,0);
  filter: blur(2px);
  transition: opacity .72s cubic-bezier(.16,1,.3,1), transform .82s cubic-bezier(.16,1,.3,1), filter .72s ease;
}
.vg-scroll-reveal.vg-visible { opacity: 1; transform: none; filter: none; }
@media (max-width: 900px) {
  :root { --vg-header-expanded: 80px; }
  .site-chrome .site-header {
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
  }
  .site-chrome .menu-trigger { width: 44px; height: 44px; }
}
@media (max-width: 640px) {
  :root { --vg-hero-top: 126px; }
  .vg-banner-text {
    min-height: clamp(44px, 11.85vw, 52px);
    font-size: 9px;
    letter-spacing: .025em;
  }
}
@media (max-width: 640px) and (max-height: 760px) {
  :root { --vg-hero-top: 116px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { transform: none !important; will-change: auto; }
  .hero.vg-scene-ready :is(.hero-media,.hero-content),
  .collection-editorial .edition-intro .vg-scene-entry {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .site-chrome .site-header, .vg-scroll-reveal { transition: none; }
  .vg-scroll-reveal { opacity: 1; transform: none; filter: none; }
}