/* Moonlight to Majesty — reveal (from the supplied moonlight file), scoped to this page and fitted to the Anokhi header/footer. */
.moonlight-page{--moon-ink:#f2f1ee;--moon-silver:#d9e5f0;--moon-night:#080f1b;--moon-paper:#f7f3eb;--story-header-h:80px}
.moonlight-page{background:var(--moon-night)}
.moonlight-page .moonlight-reveal {
  position: relative;
  height: 470vh;
  min-height: 2820px;
  isolation: isolate;
  background: var(--moon-night);
  clip-path: inset(0);
}.moonlight-page .moonlight-stage {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
  background: var(--moon-night);
}.moonlight-page .stage-ground,
.moonlight-page .moonlight-photo,
.moonlight-page .moonlight-photo img,
.moonlight-page .moonlight-shade,
.moonlight-page .campaign-background,
.moonlight-page .campaign-light,
.moonlight-page .cloud-flow,
.moonlight-page .cloud-flow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}.moonlight-page .stage-ground {
  z-index: 0;
  background:
    radial-gradient(ellipse at 54% 56%, rgba(50, 77, 113, .35), transparent 47%),
    radial-gradient(ellipse at 50% 100%, rgba(11, 27, 47, .68), transparent 59%),
    linear-gradient(145deg, #101c2d 0%, #070d17 62%, #111722 100%);
}.moonlight-page .moonlight-photo {
  z-index: 1;
  overflow: hidden;
  opacity: 1;
  will-change: opacity, transform;
}.moonlight-page .moonlight-photo img {
  display: block;
  object-fit: cover;
  object-position: 65% 50%;
  transform: scale(1.015);
  will-change: transform;
}.moonlight-page .moonlight-shade {
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 8, 16, .4), rgba(3, 8, 16, .08) 58%, rgba(3, 8, 16, .12)),
    linear-gradient(180deg, rgba(4, 8, 14, .08), transparent 45%, rgba(4, 8, 14, .4));
}.moonlight-page .cloud-flow {
  overflow: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}.moonlight-page .cloud-flow img {
  display: block;
  object-fit: cover;
  object-position: 65% 50%;
  filter: blur(.45px);
  will-change: transform;
}.moonlight-page .cloud-flow-upper {
  z-index: 3;
  opacity: .22;
}.moonlight-page .cloud-flow-upper img {
  animation: cloud-drift-upper 48s ease-in-out infinite alternate;
}.moonlight-page .cloud-flow-lower {
  z-index: 4;
  opacity: .14;
}.moonlight-page .cloud-flow-lower img {
  animation: cloud-drift-lower 62s ease-in-out infinite alternate;
}.moonlight-page .cloud-flow-front {
  z-index: 8;
  opacity: 0;
}.moonlight-page .cloud-flow-front img {
  animation: cloud-drift-front 56s ease-in-out infinite alternate;
}.moonlight-page .campaign-background {
  z-index: 5;
  opacity: 0;
  background:
    radial-gradient(ellipse at 56% 62%, rgba(88, 107, 133, .2), transparent 43%),
    linear-gradient(180deg, rgba(8, 14, 24, .82), #080d16 80%);
  will-change: opacity;
}.moonlight-page .campaign-light {
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 53% 55%, rgba(197, 218, 239, .13), transparent 33%),
    radial-gradient(ellipse at 50% 76%, rgba(134, 172, 212, .07), transparent 50%);
  mix-blend-mode: screen;
  will-change: opacity;
}.moonlight-page .pearl-composition {
  position: absolute;
  z-index: 7;
  top: 74%;
  left: 60%;
  width: min(40vw, 49svh, 520px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .38));
}.moonlight-page .pearl-suite-final {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}.moonlight-page .pearl-suite-final {
  opacity: 0;
  transform: scale(.97);
  will-change: opacity, transform;
}.moonlight-page .reveal-title,
.moonlight-page .reveal-caption,
.moonlight-page .reveal-ending,
.moonlight-page .story-footer,
.moonlight-page .story-track {
  position: absolute;
  z-index: 10;
}.moonlight-page .reveal-title {
  inset: auto;
  top: 30%;
  left: clamp(30px, 8vw, 120px);
  right: auto;
  bottom: auto;
  display: flex;
  width: min(54vw, 650px);
  max-width: min(54vw, 650px);
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0;
  color: #f5f4f1;
  text-align: left;
  text-shadow: 0 2px 32px rgba(0, 0, 0, .52);
  will-change: opacity, transform;
}.moonlight-page .eyebrow {
  display: block;
  font: 400 9px/1.5 var(--body), Arial, sans-serif;
  letter-spacing: .23em;
  text-transform: uppercase;
}.moonlight-page .reveal-title .eyebrow {
  color: #d5e4f3;
}.moonlight-page .reveal-title h1 {
  margin: 18px 0 13px;
  font: 300 clamp(66px, 9vw, 132px)/.8 "Cormorant Garamond", Georgia, serif;
  letter-spacing: -.045em;
}.moonlight-page .reveal-title h1 em,
.moonlight-page .reveal-ending h2 em {
  color: #d2deeb;
  font-weight: 300;
}.moonlight-page .reveal-title p {
  max-width: 360px;
  margin: 16px 0 22px;
  color: rgba(245, 244, 241, .82);
  font: 300 10px/1.8 var(--body), Arial, sans-serif;
  letter-spacing: .06em;
}.moonlight-page .hero-collection,
.moonlight-page .ending-link {
  color: inherit;
  font: 400 9px/1.4 var(--body), Arial, sans-serif;
  letter-spacing: .15em;
  text-decoration: none;
  text-transform: uppercase;
}.moonlight-page .hero-collection {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(232, 241, 250, .58);
}.moonlight-page .hero-collection span,
.moonlight-page .ending-link span {
  margin-left: 6px;
}.moonlight-page .reveal-caption {
  bottom: clamp(88px, 13vh, 132px);
  left: clamp(28px, 6vw, 86px);
  width: min(310px, 44vw);
  color: #eeeef0;
  opacity: 0;
  animation: none;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .5);
  will-change: opacity, transform;
}.moonlight-page .reveal-caption .eyebrow {
  margin-bottom: 8px;
  color: #c9d9e9;
  font-size: 8px;
}.moonlight-page .reveal-caption h2 {
  margin: 0 0 6px;
  font: 300 clamp(30px, 3.3vw, 43px)/1 "Cormorant Garamond", Georgia, serif;
}.moonlight-page .reveal-caption p {
  max-width: 270px;
  margin: 0;
  color: rgba(238, 238, 240, .76);
  font: 300 10px/1.7 var(--body), Arial, sans-serif;
}.moonlight-page .reveal-ending {
  inset: auto;
  top: clamp(42px, 7vh, 78px);
  right: 5%;
  bottom: auto;
  left: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #f2f1ee;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .48);
  will-change: opacity, transform;
}.moonlight-page .reveal-ending .eyebrow {
  color: #cbd8e7;
}.moonlight-page .reveal-ending h2 {
  margin: 8px 0 11px;
  font: 300 clamp(32px, 3.4vw, 46px)/1 "Cormorant Garamond", Georgia, serif;
}.moonlight-page .ending-link {
  pointer-events: auto;
}.moonlight-page .story-footer {
  right: 5%;
  bottom: 25px;
  left: 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(238, 238, 240, .7);
  font: 400 8px/1.3 var(--body), Arial, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}.moonlight-page .scroll-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(244, 238, 229, .8);
}.moonlight-page .scroll-label svg {
  animation: moonlight-scroll 1.7s ease-in-out infinite;
}@keyframes cloud-drift-upper {.moonlight-page from { transform: translate3d(-1.1%, .15%, 0) scale(1.025); }.moonlight-page to { transform: translate3d(1.1%, -.15%, 0) scale(1.025); }
}@keyframes cloud-drift-lower {.moonlight-page from { transform: translate3d(1.2%, -.12%, 0) scale(1.03); }.moonlight-page to { transform: translate3d(-1.2%, .12%, 0) scale(1.03); }
}@keyframes cloud-drift-front {.moonlight-page from { transform: translate3d(.7%, -.1%, 0) scale(1.025); }.moonlight-page to { transform: translate3d(-.9%, .15%, 0) scale(1.025); }
}.moonlight-page .story-track {
  top: 50%;
  right: 22px;
  width: 1px;
  height: 82px;
  overflow: hidden;
  transform: translateY(-50%);
  background: rgba(244, 238, 229, .3);
}.moonlight-page .story-track div {
  width: 100%;
  height: 100%;
  transform: scaleY(0);
  transform-origin: top;
  background: #c6d8ea;
  will-change: transform;
}


/* fit under the Anokhi sticky header */
.moonlight-page .moonlight-reveal{height:470vh;min-height:2820px}
.moonlight-page .moonlight-stage{top:var(--story-header-h,80px);height:calc(100vh - var(--story-header-h,80px));height:calc(100svh - var(--story-header-h,80px));min-height:460px}
.moonlight-page .moonlight-details{background:var(--ivory);color:var(--ink)}
.moonlight-page .moonlight-details .jewellery-details-image{background:#0d1626}
.moonlight-page .moonlight-details .jewellery-details-image img{object-fit:contain}
.moonlight-page .reveal-caption h2,.moonlight-page .reveal-ending h2,.moonlight-page .reveal-title h1{color:#f5f4f1}
.moonlight-page .reveal-ending h2 em,.moonlight-page .reveal-title h1 em{color:#d5e4f3}
.moonlight-page .reveal-caption p,.moonlight-page .reveal-title p{color:rgba(240,244,250,.9)}
.moonlight-page .reveal-caption .eyebrow,.moonlight-page .reveal-ending .eyebrow{color:#d5e4f3}
.moonlight-page .reveal-title,.moonlight-page .reveal-caption,.moonlight-page .reveal-ending{z-index:10}

/* pearl suite always sits fully inside the stage, whatever the screen shape */
.moonlight-page .pearl-composition{top:63%;left:60%;height:min(54%,520px);width:auto;max-width:56vw;aspect-ratio:1}
@media (max-width:700px){.moonlight-page .pearl-composition{top:68%;left:62%;height:min(44%,360px);max-width:78vw}}