/* The nine scenes, in scroll order. */
.stage { position: relative; height: 100vh; height: 100svh; overflow: hidden; }
.ring-line { position: absolute; left: 0; top: 0; overflow: visible; opacity: 0; transform-origin: 0 0; pointer-events: none; }
.ring-line circle { fill: none; stroke: var(--gold-2); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-dasharray: 1 1; stroke-dashoffset: var(--dash, 1); }
.hands-title, #bless h2, .card-title, .album-intro h2, .caption .ta, .dawn-a, .dawn-b { text-wrap: balance; }

/* ═════════ 1 · HERO ═════════ */
.hero-photo { position: absolute; inset: 0; z-index: 2; will-change: clip-path; }
.hp-inner { position: absolute; inset: 0; will-change: transform; }
.hp-inner img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; will-change: transform; }
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 12, 34, .5) 0%, rgba(8, 12, 34, 0) 22%, rgba(8, 12, 34, 0) 44%, rgba(8, 12, 34, .62) 70%, rgba(8, 12, 34, .92) 100%);
}
.hero-halo {
  position: absolute; left: 0; top: 0; z-index: 1; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(255, 232, 182, .5) 0%, rgba(255, 226, 170, .16) 30%, rgba(255, 220, 160, 0) 62%);
}
.hero-halo::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; transform: scale(calc(.9 + var(--beat, 0) * .25)); opacity: calc(var(--beat, 0) * .9); }
.hero-ring { z-index: 3; }
.hero-copy { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: calc(clamp(84px, 13svh, 140px) + env(safe-area-inset-bottom)); }
.hero-copy .eyebrow { margin-bottom: 14px; }
.hero-date { color: var(--cream); letter-spacing: .2em; }
.names {
  font-family: var(--f-display); font-weight: 300; font-style: italic; font-variation-settings: var(--soft);
  line-height: .9; letter-spacing: -.025em; color: var(--cream); text-shadow: 0 4px 40px rgba(8, 12, 34, .45);
}
.names .n1 { display: block; font-size: clamp(72px, 19.5vw, 236px); }
.names .n2 { display: block; margin-top: .14em; font-size: clamp(36px, 9.4vw, 112px); }
.names .n2 > i { color: var(--gold-2); margin-right: .06em; }
.names .ch { display: inline-block; will-change: transform; }
.scroll-cue { display: flex; align-items: center; gap: 12px; margin-top: 22px; font: 600 11.5px/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 248, 236, .78); }
.note { position: absolute; z-index: 4; opacity: 0; }
.note-text { font: 300 clamp(23px, 6.3vw, 46px)/1.3 var(--f-display); font-variation-settings: 'opsz' 72, 'SOFT' 60; letter-spacing: -.012em; color: var(--cream); text-wrap: pretty; }
.note-text .w { opacity: .13; }

/* captions under the moons and the promise */
.caption { position: absolute; z-index: 6; left: var(--gutter); right: var(--gutter); bottom: calc(clamp(92px, 12svh, 130px) + env(safe-area-inset-bottom)); text-align: center; }
.caption .ta { line-height: 1.4; color: var(--cream); text-shadow: 0 2px 24px rgba(8, 12, 34, .8); }
.caption .en { margin-top: 10px; opacity: 0; font: italic 300 clamp(17px, 4.4vw, 24px)/1.4 var(--f-display); font-variation-settings: 'opsz' 36, 'SOFT' 100; color: var(--gold-2); }

/* ═════════ 2 · TWO MOONS ═════════ */
.orb {
  position: absolute; left: 0; top: 0; z-index: 2; border-radius: 50%; overflow: hidden; opacity: 0; will-change: transform, opacity;
  box-shadow: 0 0 90px rgba(255, 226, 170, .16), 0 0 0 1px rgba(241, 215, 154, .32);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.orb img { width: 100%; height: 100%; object-fit: cover; }
.orb.him, .orb.her { mix-blend-mode: screen; }
.orb.him img { object-position: 50% 38%; }
.orb.her img { object-position: 50% 46%; }
.orb.both { z-index: 3; }
.orb.both img { object-position: 50% 34%; }
.orb-ring { z-index: 4; }
.orb-label { position: absolute; left: 0; top: 0; z-index: 5; white-space: nowrap; opacity: 0; font: italic 300 clamp(22px, 6vw, 38px)/1 var(--f-display); font-variation-settings: var(--soft); color: var(--cream); }
.moons-intro { position: absolute; z-index: 5; top: clamp(56px, 9svh, 110px); left: var(--gutter); right: var(--gutter); text-align: center; opacity: 0; font: 700 clamp(32px, 8.6vw, 64px)/1 var(--f-hand); color: var(--gold-2); }
.moons-copy .ta { font-size: clamp(25px, 6.6vw, 50px); }
.moons-copy .ta .w { display: inline-block; opacity: 0; }

/* ═════════ 3 · THE PROMISE ═════════ */
.arch-clip { position: absolute; inset: 0; z-index: 2; overflow: hidden; will-change: clip-path; }
.arch-clip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 46%; will-change: transform; }
.arch-clip .color { opacity: 0; }
.promise-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 7, 18, 0) 46%, rgba(5, 7, 18, .55) 72%, rgba(5, 7, 18, .9) 100%); }
.arch-line { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.arch-line path { fill: none; stroke: var(--gold-2); stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.arch-line .a1 { stroke-width: 1.4; }
.arch-line .a2 { stroke-width: .8; stroke-opacity: .6; }
.promise-copy { z-index: 4; }
.promise-copy .ta { opacity: 0; font-size: clamp(28px, 7.4vw, 58px); line-height: 1.35; }

/* ═════════ 4 · DAWN ═════════ */
#dawn {
  position: relative; height: 150svh; overflow: hidden;
  background: linear-gradient(180deg, rgba(8, 12, 34, 0) 0%, #121C46 14%, #22386A 32%, #7E5466 52%, #D88C78 66%, #F2C6A2 80%, var(--ivory) 100%);
}
.sun {
  position: absolute; left: 50%; bottom: -34vmax; width: 130vmax; height: 130vmax; margin-left: -65vmax; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 246, 222, .95) 0%, rgba(255, 220, 170, .55) 20%, rgba(255, 190, 140, .18) 42%, rgba(255, 190, 140, 0) 62%);
}
.dawn-a, .dawn-b { position: absolute; left: var(--gutter); right: var(--gutter); text-align: center; font: italic 300 clamp(34px, 9vw, 86px)/1.04 var(--f-display); font-variation-settings: var(--soft); letter-spacing: -.02em; }
.dawn-a { top: 24%; color: var(--cream); }
.dawn-b { top: 70%; color: var(--ink); }

/* ═════════ 5 · THE RING ═════════ */
#hands { background: var(--ivory); color: var(--ink); }
.hands-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(18px, 4svh, 44px); padding: 0 var(--gutter); text-align: center; }
.hands-title { max-width: 14ch; font: 300 clamp(36px, 9.4vw, 92px)/1 var(--f-display); font-variation-settings: var(--soft); letter-spacing: -.025em; }
.hands-title em { font-style: italic; color: var(--silk); }
.hands-pic {
  position: relative; flex: none; width: min(142vw, 1180px); aspect-ratio: 3 / 2;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 76%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 76%, transparent 100%);
  mask-composite: intersect;
}
.hands-pic img, .h-ring { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.h-ring { overflow: visible; pointer-events: none; }
.h-real { opacity: 0; }
.rm .h-real { opacity: 1; }
.rm .h-ring, .rm .h-him, .rm .h-her { visibility: hidden; }
.hands-sub { max-width: 28ch; font: italic 300 clamp(19px, 5vw, 30px)/1.4 var(--f-display); font-variation-settings: 'opsz' 36, 'SOFT' 100; color: var(--ink-soft); }
@media (min-width: 900px) {
  .hands-pic { width: min(100vw, 1180px, 76svh); }
  .hands-title { max-width: none; font-size: clamp(44px, 4.6vw, 68px); }
  .hands-stage { gap: clamp(16px, 3svh, 36px); }
}

/* ═════════ 6 · THE SILK ALBUM ═════════ */
.silk {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .04) 0 1px, transparent 1px 4px),
    radial-gradient(120% 90% at 30% 20%, var(--silk-2) 0%, var(--silk) 45%, #A93624 100%);
}
.silk-butta { position: absolute; inset: 0; z-index: -1; background: var(--butta-gold) 0 0 / 96px 96px; opacity: .9; }
.silk-sheen {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: -1; width: 260%; pointer-events: none; will-change: transform;
  background: linear-gradient(104deg, transparent 18%, rgba(255, 218, 176, .26) 30%, transparent 42%, rgba(110, 14, 18, .22) 58%, transparent 68%, rgba(255, 218, 176, .18) 80%, transparent 90%);
}
.zari { position: absolute; left: 0; right: 0; z-index: 3; height: 32px; background: var(--zari-silk) 0 0 / 64px 32px repeat-x; }
.zari-top, .zari-m-top { top: 0; }
.zari-bottom, .zari-m-bottom { bottom: 0; transform: scaleY(-1); }
.zari-m-top, .zari-m-bottom { background-image: var(--zari-maroon); }
.album-stage { position: relative; display: flex; align-items: center; height: 100vh; height: 100svh; }
.album-track { display: flex; align-items: center; gap: clamp(26px, 5.4vw, 76px); height: 100%; padding: 56px var(--gutter); will-change: transform; }
.album-intro { flex: none; width: min(80vw, 520px); color: var(--cream); }
.album-intro h2 { margin-top: 16px; font: 300 clamp(44px, 12vw, 110px)/.95 var(--f-display); font-variation-settings: var(--soft); letter-spacing: -.03em; }
.album-intro h2 em { color: var(--gold-2); }
.album-hint { display: flex; align-items: center; gap: 12px; margin-top: 26px; font: 600 11.5px/1 var(--f-ui); letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 248, 236, .8); }
.ph {
  position: relative; flex: none; overflow: hidden; height: min(58svh, 620px); aspect-ratio: 2 / 3; border-radius: 6px;
  box-shadow: 0 34px 60px -30px rgba(50, 4, 8, .75), 0 0 0 1px rgba(241, 215, 154, .55);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.ph::after { content: ''; position: absolute; inset: 9px; border: 1px solid rgba(255, 238, 200, .6); border-radius: inherit; pointer-events: none; }
.ph.arch { border-radius: 999px 999px 8px 8px; }
.ph.round { height: min(44svh, 460px); aspect-ratio: 1; border-radius: 50%; }
.ph.tall { height: min(66svh, 700px); }
.ph.low { align-self: flex-end; margin-bottom: 7svh; }
.ph.high { align-self: flex-start; margin-top: 7svh; }
.ph img { position: absolute; top: 0; left: -7%; width: 114%; height: 100%; object-fit: cover; }
.tag {
  position: relative; flex: none; width: min(66vw, 320px); padding: 34px 26px 26px; border-radius: 4px;
  background: linear-gradient(180deg, #FFF9EE, #F6EBD6); color: var(--ink); box-shadow: 0 26px 50px -26px rgba(50, 4, 8, .7);
  rotate: -1.6deg;
}
.tag:nth-of-type(2n) { rotate: 1.4deg; }
.tag::before { content: ''; position: absolute; top: 12px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #F7E2A8, #A57C35); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.tag .ta { font-size: clamp(21px, 5.4vw, 27px); line-height: 1.45; color: var(--silk-deep); }
.tag .en { margin-top: 10px; font: 700 clamp(22px, 5.6vw, 28px)/1.15 var(--f-hand); color: var(--ink-soft); }
.album-end { flex: none; width: 1px; }

/* ═════════ 7 · THE STAGE ═════════ */
.evening {
  position: relative; overflow: hidden; isolation: isolate; color: var(--cream);
  padding: clamp(84px, 12svh, 130px) var(--gutter) clamp(96px, 14svh, 150px);
  background: radial-gradient(120% 60% at 50% 0%, #6E1C29 0%, var(--maroon) 52%, #22060C 100%);
}
.invite-butta { position: absolute; inset: 0; z-index: -1; background: var(--butta-maroon) 0 0 / 96px 96px; }
.stage-card { position: relative; max-width: 620px; margin: 0 auto; }
.arch-top { position: relative; aspect-ratio: 600 / 346; }
.stage-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st-lines { filter: drop-shadow(0 0 6px rgba(241, 215, 154, .25)); }
.st-rose { transform-box: fill-box; }
.flame, .lan-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: flicker 1.6s ease-in-out infinite alternate; }
@keyframes flicker { from { transform: scale(1, 1); opacity: .85; } to { transform: scale(.85, 1.15); opacity: 1; } }
.mono {
  position: absolute; left: 50%; top: 82.6%; width: 23%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 1.5px var(--gold), 0 0 0 7px rgba(59, 12, 20, .9), 0 0 0 8px rgba(217, 178, 102, .55), 0 18px 40px -10px rgba(0, 0, 0, .6);
}
.mono img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; transform: scale(1.5); transform-origin: 40% 58%; }
.card-body { position: relative; padding: clamp(26px, 5vw, 40px) 13% clamp(130px, 24vw, 170px); text-align: center; }
.rail { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, var(--gold-2), var(--gold) 60%, var(--gold-deep)); }
.rail.l1 { left: calc(6.33% - 1px); width: 2px; } .rail.l2 { left: calc(8.33% - .5px); opacity: .7; }
.rail.r1 { right: calc(6.33% - 1px); width: 2px; } .rail.r2 { right: calc(8.33% - .5px); opacity: .7; }
.card-body::after { content: ''; position: absolute; left: 3%; right: 3%; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold) 12%, var(--gold-2) 50%, var(--gold) 88%, transparent); }
.card-lead { max-width: 25ch; margin: 0 auto; font: 600 11.5px/1.7 var(--f-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); }
.card-of { margin-top: 10px; font: italic 300 20px/1 var(--f-display); color: rgba(255, 248, 236, .7); }
.card-title { margin-top: 2px; font: 300 clamp(38px, 10.4vw, 74px)/1 var(--f-display); font-variation-settings: var(--soft); letter-spacing: -.02em; }
.card-names { margin-top: 8px; font: italic 300 clamp(22px, 5.8vw, 32px)/1.2 var(--f-display); color: var(--gold-2); }
.card-motto { margin-top: 16px; font: 600 11.5px/1.6 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 248, 236, .82); }
.card-motto em { display: block; margin-top: 4px; font: 700 24px/1.1 var(--f-hand); letter-spacing: 0; text-transform: none; color: var(--gold-2); }
.diamond { width: 120px; height: 12px; margin: 26px auto; }
.w-day { font: 600 12px/1 var(--f-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--gold-2); }
.w-date { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; }
.w-date b { font: 300 clamp(72px, 20vw, 120px)/.85 var(--f-display); font-variation-settings: var(--soft); }
.w-date span { padding-left: 16px; border-left: 1px solid rgba(241, 215, 154, .5); text-align: left; font: 500 clamp(16px, 4.2vw, 20px)/1.3 var(--f-ui); letter-spacing: .06em; }
.w-time { margin-top: 14px; font: 600 15px/1.4 var(--f-ui); letter-spacing: .08em; color: var(--gold-2); }
.where { margin-top: 22px; }
.v-name { font: 400 clamp(21px, 5.6vw, 28px)/1.25 var(--f-display); }
.v-area, .w-soon { margin-top: 4px; font: italic 300 clamp(16px, 4.2vw, 19px)/1.4 var(--f-display); color: rgba(255, 248, 236, .72); }
.countdown { display: flex; justify-content: center; gap: clamp(8px, 2.4vw, 16px); margin-top: 28px; }
.countdown div { min-width: 62px; padding: 12px 6px 10px; border-radius: 10px; background: rgba(255, 248, 236, .05); box-shadow: inset 0 0 0 1px rgba(241, 215, 154, .3); }
.countdown b { display: block; font: 300 30px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.countdown span { display: block; margin-top: 6px; font: 600 10px/1 var(--f-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-2); }
.card-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.cal-menu { display: flex; flex-direction: column; gap: 2px; width: min(100%, 300px); margin: 12px auto 0; padding: 6px; border-radius: 14px; background: rgba(255, 248, 236, .06); box-shadow: inset 0 0 0 1px rgba(241, 215, 154, .3); }
.cal-menu a { padding: 13px; border-radius: 10px; font: 600 14px/1 var(--f-ui); text-decoration: none; transition: background-color .2s; }
.cal-menu a:hover { background: rgba(241, 215, 154, .14); }
.bq { position: absolute; bottom: -8px; width: clamp(110px, 30vw, 170px); aspect-ratio: 1; height: auto; pointer-events: none; }
.bq-l { left: -2%; } .bq-r { right: -2%; }

/* ═════════ 8 · BLESSINGS ═════════ */
#bless { position: relative; display: grid; place-items: center; min-height: 118svh; overflow: hidden; padding: clamp(110px, 16svh, 170px) var(--gutter) clamp(120px, 18svh, 180px); text-align: center; }
.amb { position: absolute; inset: 0; pointer-events: none; }
.amb-l { position: absolute; width: 60px; scale: var(--s, .6); opacity: .85; filter: drop-shadow(0 0 18px rgba(255, 180, 90, .55)); animation: float 9s ease-in-out infinite; }
@keyframes float { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 8px -26px; rotate: 3deg; } }
.bless-inner { position: relative; z-index: 2; max-width: 720px; }
#bless h2 { margin-top: 18px; font: 300 clamp(31px, 8vw, 66px)/1.08 var(--f-display); font-variation-settings: var(--soft); letter-spacing: -.02em; }
#bless h2 em { color: var(--gold-2); }
.bless-p { max-width: 34ch; margin: 22px auto 0; font: 400 clamp(16px, 4.3vw, 19px)/1.6 var(--f-ui); color: rgba(255, 248, 236, .78); }
.lantern-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; }
.lantern-form input {
  flex: 1 1 200px; max-width: 280px; min-height: 52px; padding: 0 22px; border: 0; border-radius: 999px; outline: none;
  font: 500 16px/1 var(--f-ui); color: var(--cream); background: rgba(255, 248, 236, .07);
  box-shadow: inset 0 0 0 1px rgba(241, 215, 154, .4); transition: box-shadow .25s, background-color .25s;
}
.lantern-form input::placeholder { color: rgba(255, 248, 236, .5); }
.lantern-form input:focus { box-shadow: inset 0 0 0 1.5px var(--gold-2); background: rgba(255, 248, 236, .1); }
.lantern-count { min-height: 1.6em; margin-top: 16px; font: 700 21px/1.3 var(--f-hand); color: var(--gold-2); }
.bless-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 14px; }
#lanterns { position: fixed; inset: 0; z-index: 75; overflow: hidden; pointer-events: none; }
.lantern { position: absolute; left: 0; top: 0; width: 64px; filter: drop-shadow(0 0 22px rgba(255, 178, 84, .75)); will-change: transform; }
.lan-svg { width: 100%; height: auto; }
.lan-name { position: absolute; left: 50%; top: 40%; max-width: 54px; transform: translate(-50%, -50%) rotate(-4deg); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 13px/1 var(--f-hand); color: #6A2A10; }

/* ═════════ 9 · THE LAST MOON ═════════ */
#close { position: relative; padding: clamp(80px, 12svh, 130px) var(--gutter) calc(120px + env(safe-area-inset-bottom)); text-align: center; }
.last-moon {
  width: min(76vw, 440px); aspect-ratio: 1; margin: 0 auto; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 calc(110px + var(--beat, 0) * 60px) calc(14px + var(--beat, 0) * 14px) rgba(255, 236, 200, .2), 0 0 0 1px rgba(241, 215, 154, .55);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.last-moon img { width: 100%; height: 100%; object-fit: cover; object-position: 2% 60%; }
.sign-pre { margin-top: clamp(36px, 6svh, 60px); font: 700 clamp(26px, 7vw, 38px)/1 var(--f-hand); color: rgba(255, 248, 236, .82); }
.signature { width: min(92vw, 560px); height: auto; margin: 6px auto 0; overflow: visible; }
.signature text { font: 700 128px/1 var(--f-hand); fill: var(--cream); fill-opacity: 0; stroke: var(--gold-2); stroke-width: 1.4; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.signature.drawn text { animation: sign 3.2s var(--ease) forwards; }
@keyframes sign { 70% { fill-opacity: 0; } to { stroke-dashoffset: 0; fill-opacity: 1; } }
.sign-spark { margin-top: -6px; font-size: 26px; }
.foot { display: grid; gap: 8px; margin-top: clamp(54px, 9svh, 90px); }
.foot p { font: 500 13px/1.5 var(--f-ui); color: rgba(255, 248, 236, .66); }
.foot .credit { font-size: 11.5px; color: rgba(255, 248, 236, .44); }

/* ═════════ desktop ═════════ */
@media (min-width: 900px) {
  .hero-copy { bottom: calc(10svh + env(safe-area-inset-bottom)); }
  .hero-shade { background: linear-gradient(90deg, rgba(8, 12, 34, .7) 0%, rgba(8, 12, 34, .25) 38%, rgba(8, 12, 34, 0) 60%), linear-gradient(180deg, rgba(8, 12, 34, .45) 0%, rgba(8, 12, 34, 0) 26%, rgba(8, 12, 34, 0) 50%, rgba(8, 12, 34, .85) 100%); }
  .moons-intro { top: 8svh; }
}