:root {
  --ink: #164f82;
  --ink-deep: #123f68;
  --pink: #ec7f99;
  --sky: #e6f3fc;
  --cream: #fffaf1;
  --paper: #fffdf8;
  --soft-blue: #bcdcf3;
  --shadow: 0 18px 40px rgba(47, 83, 112, 0.15);
  --serif: Georgia, "Times New Roman", "Songti SC", serif;
  --hand: "Segoe Print", "Bradley Hand", "Kaiti SC", KaiTi, cursive;
  --script: "Segoe Script", "Snell Roundhand", "Brush Script MT", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: #dcebf5; }

body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(90deg, #dbe9f3 0, #f8fbfd 50%, #dbe9f3 100%);
  font-family: var(--serif);
  overflow-x: hidden;
}

button, a { -webkit-tap-highlight-color: transparent; }

.site-shell {
  position: relative;
  width: min(100%, 480px);
  margin: 0 auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 7%, rgba(255, 192, 207, .36), transparent 16%),
    radial-gradient(circle at 92% 30%, rgba(172, 213, 242, .52), transparent 21%),
    linear-gradient(180deg, #dff1fd 0%, #fbfcfb 17%, #fffaf2 47%, #edf6fc 72%, #fff9f2 100%);
  box-shadow: 0 0 48px rgba(27, 65, 94, .16);
}

.entry {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #f9f6ef;
  line-height: 0;
}

.entry-story-art {
  display: block;
  width: 100%;
  height: auto;
}

.entry-hotspot {
  position: absolute;
  z-index: 6;
  top: 46.6%;
  left: 12%;
  width: 83%;
  height: 8.4%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: linear-gradient(112deg, transparent 24%, rgba(255,255,255,.34) 45%, transparent 66%);
  background-size: 260% 100%;
  background-position: 140% 0;
  cursor: pointer;
  transform: rotate(-4deg);
  transform-origin: center;
  animation: gate-shimmer 5.8s ease-in-out 1.4s infinite;
  transition: transform .18s ease, filter .18s ease;
}

.important-anchor {
  position: absolute;
  top: 57.3%;
  left: 0;
  width: 1px;
  height: 1px;
}

.entry-hotspot:active {
  transform: rotate(-4deg) scale(.975) translateY(2px);
  filter: brightness(.97);
}

.entry-hotspot:focus-visible {
  outline: 3px solid #ef8aa1;
  outline-offset: 3px;
}

.entry-light {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
}

.entry-light-glow {
  top: -10%;
  right: -22%;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.58) 0%, rgba(255,244,215,.22) 37%, transparent 69%);
  filter: blur(9px);
  animation: light-drift 8.5s ease-in-out infinite alternate;
}

.entry-light-beam {
  top: -18%;
  left: -42%;
  width: 66%;
  height: 61%;
  opacity: .36;
  background: linear-gradient(105deg, transparent 22%, rgba(255,255,255,.48) 47%, transparent 71%);
  filter: blur(11px);
  transform: rotate(6deg);
  animation: beam-pass 10s ease-in-out 1s infinite;
}

@keyframes light-drift {
  from { transform: translate3d(-8%, 0, 0) scale(.95); opacity: .55; }
  to { transform: translate3d(4%, 9%, 0) scale(1.08); opacity: .88; }
}

@keyframes beam-pass {
  0%, 18% { transform: translateX(-20%) rotate(6deg); opacity: 0; }
  40% { opacity: .32; }
  68%, 100% { transform: translateX(245%) rotate(6deg); opacity: 0; }
}

@keyframes gate-shimmer {
  0%, 55% { background-position: 140% 0; opacity: 0; }
  68% { opacity: .7; }
  84%, 100% { background-position: -140% 0; opacity: 0; }
}

.entry.entering .entry-light-glow {
  animation: entry-bloom .72s ease-out both;
}

@keyframes entry-bloom {
  0% { transform: scale(.9); opacity: .45; }
  55% { transform: scale(1.28); opacity: .95; }
  100% { transform: scale(1.1); opacity: .58; }
}

.torn-entry:focus-visible, .song-reveal:focus-visible, .music-control:focus-visible, .map-links a:focus-visible { outline: 3px solid #ef8aa1; outline-offset: 4px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.snow i {
  position: absolute;
  z-index: 2;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  box-shadow: 0 0 9px rgba(255,255,255,.9);
  animation: drift 8s linear infinite;
}
.snow i:nth-child(1){left:8%;top:10%;animation-delay:-2s}.snow i:nth-child(2){left:24%;top:4%;animation-delay:-5s}.snow i:nth-child(3){left:45%;top:16%;animation-delay:-1s}.snow i:nth-child(4){left:64%;top:7%;animation-delay:-7s}.snow i:nth-child(5){left:83%;top:20%;animation-delay:-4s}.snow i:nth-child(6){left:14%;top:36%;animation-delay:-6s}.snow i:nth-child(7){left:73%;top:39%;animation-delay:-3s}.snow i:nth-child(8){left:91%;top:48%;animation-delay:-1s}
@keyframes drift { 0%{transform:translate3d(0,-18px,0);opacity:0} 20%{opacity:.9} 100%{transform:translate3d(-16px,90px,0);opacity:0} }

.section { position: relative; padding: 5.4rem 7.5vw; }
.section::before { content: ""; position: absolute; inset: -1px 0 auto; height: 54px; background: inherit; clip-path: polygon(0 28%, 8% 13%, 18% 24%, 29% 7%, 43% 20%, 55% 4%, 68% 18%, 82% 8%, 93% 20%, 100% 10%, 100% 100%, 0 100%); }

.eyebrow { margin: 0 0 .5rem; font: .78rem var(--serif); letter-spacing: .15em; }
.soft-note h2, .section-heading h2 { margin: 0; color: var(--ink-deep); font: 700 clamp(2rem, 9vw, 3rem)/1.13 var(--hand); letter-spacing: -.06em; }
.soft-note { position: relative; z-index: 2; text-align: center; transform: rotate(-1deg); }

.important { margin-top: -2px; padding-top: 7rem; background: linear-gradient(180deg,#fffdf8 0%,#fef8ee 74%,#f2f7f8 100%); }
.photo-paper { position: relative; width: 82%; margin: 2.8rem auto 1rem; padding: .55rem .55rem 2.2rem; background: #fff; box-shadow: var(--shadow); }
.photo-paper img, .cross-photo img, .day-photo img, .wear-photo img, .songs-photo-wrap img, .ending > img { display: block; width: 100%; height: auto; }
.tilt-left { transform: rotate(-3deg); }
.tape { position: absolute; top: -13px; left: 50%; width: 92px; height: 28px; background: rgba(204,216,222,.55); transform: translateX(-50%) rotate(2deg); }
.arrival-copy { position: relative; z-index: 3; width: 88%; margin: -1.4rem auto 0; padding: 1.3rem 1rem 1.6rem; text-align: center; background: rgba(255,253,248,.91); clip-path: polygon(0 9%, 12% 2%, 27% 8%, 41% 1%, 58% 7%, 73% 2%, 88% 9%, 100% 3%, 97% 92%, 82% 98%, 66% 91%, 48% 99%, 30% 93%, 14% 98%, 2% 91%); }
.arrival-copy p { margin: .65rem 0 0; font-size: 1rem; line-height: 1.9; }
.arrival-copy .handline { margin: 0; color: var(--pink); font: 1.85rem var(--hand); }
.thread-heart { position: absolute; right: 4%; bottom: 1.8rem; color: var(--pink); font: 3.5rem var(--script); transform: rotate(12deg); opacity: .8; }

.love { background: linear-gradient(180deg,#f2f7f8 0%,#fefcf7 35%,#f5f4f0 100%); padding-top: 6.7rem; padding-bottom: 6.7rem; }
.section-heading { position: relative; z-index: 2; text-align: center; }
.section-heading.left { text-align: left; }
.section-heading p { margin: .28rem 0 0; color: #326e9c; font: 1.55rem var(--script); }
blockquote { margin: 2.6rem auto 2.8rem; padding: 0; border: 0; width: 80%; color: #244f72; font-size: 1.08rem; line-height: 1.95; letter-spacing: .05em; }
blockquote cite { display: block; margin-top: 1rem; font-size: .78rem; font-style: normal; letter-spacing: .08em; }
.cross-photo { position: relative; margin: 0 -3vw; padding: .65rem; background: rgba(255,255,255,.92); box-shadow: var(--shadow); transform: rotate(2deg); }
.cross-photo figcaption { position: absolute; right: .5rem; bottom: -1.4rem; padding: .7rem 1.3rem; color: var(--ink); background: var(--paper); font: 1.25rem var(--script); transform: rotate(-4deg); box-shadow: 0 7px 18px rgba(47,83,112,.12); }

.our-day { background: linear-gradient(180deg,#f5f4f0 0%,#fffbf4 84%,#edf5f8 100%); padding-top: 6.3rem; }
.timeline-wrap { position: relative; min-height: 780px; margin-top: 2rem; }
.timeline { position: relative; z-index: 3; width: 60%; margin: 0; padding: .5rem 0 0 1.5rem; list-style: none; }
.timeline::before { content: ""; position: absolute; top: 16px; bottom: 28px; left: 5px; width: 2px; background: var(--ink); }
.timeline li { position: relative; display: grid; gap: .15rem; margin-bottom: 2.2rem; padding-left: .8rem; }
.timeline li::before { content: ""; position: absolute; top: .35rem; left: -1.47rem; width: 9px; height: 9px; border: 2px solid var(--ink); border-radius: 50%; background: var(--cream); }
.timeline time { font-size: .78rem; letter-spacing: .22em; }
.timeline strong { font: 1.28rem var(--serif); }
.timeline em { font: .96rem var(--script); }
.day-photo { position: absolute; right: -25%; bottom: -1rem; width: 87%; margin: 0; z-index: 1; }
.day-photo::before { content: ""; position: absolute; inset: -2rem 0 auto; height: 4rem; background: linear-gradient(180deg,#fffbf4 0%,transparent 100%); z-index: 2; }
.day-photo img { -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 94%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 9%, #000 94%, transparent 100%); }

.wear { margin-top: -2rem; background: linear-gradient(180deg,#edf5f8 0%,#fffaf1 88%); padding-top: 6.5rem; }
.wear-photo { position: relative; width: 82%; margin: 2.1rem 0 1.7rem -3%; padding: .5rem; background: #fff; box-shadow: var(--shadow); transform: rotate(-2deg); }
.tape-top { top: -15px; left: 72%; }
.palette { position: absolute; z-index: 4; right: 7%; top: 12.8rem; display: grid; gap: .82rem; padding: .9rem .7rem; background: rgba(255,253,248,.82); }
.palette span { display: flex; align-items: center; gap: .55rem; font: .78rem var(--serif); }
.palette i { width: 33px; height: 33px; border-radius: 50%; box-shadow: 0 3px 9px rgba(44,73,96,.14); }
.palette .blue{background:#c4def2}.palette .white{background:#fff;border:1px solid #edf0f2}.palette .cream{background:#f5e9d7}.palette .blush{background:#f6c5cf}
.dress-note { margin: 0 0 0 8%; font: 1.18rem/1.8 var(--hand); transform: rotate(-2deg); }

.songs { padding: 0 0 7rem; background: linear-gradient(180deg,#fffaf1 0%,#edf6fc 100%); }
.songs-photo-wrap { position: relative; height: 430px; overflow: hidden; }
.songs-photo-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(255,250,241,.9),transparent 23%,transparent 70%,#fffaf1 100%); }
.songs-photo-wrap img { height: 100%; object-fit: cover; object-position: center 28%; }
.on-photo { margin-top: -4.5rem; padding: 0 7vw; text-align: left; }
.song-reveal { display: block; width: 76%; min-height: 58px; margin: 2.6rem auto 0; border: 1.5px solid rgba(22,79,130,.25); border-radius: 0; color: var(--ink); background: rgba(255,253,248,.92); clip-path: polygon(1% 13%, 10% 5%, 23% 12%, 36% 3%, 49% 10%, 64% 2%, 78% 11%, 91% 4%, 99% 14%, 97% 90%, 84% 97%, 68% 91%, 52% 98%, 37% 91%, 21% 97%, 3% 90%); font: 1.1rem var(--hand); cursor: pointer; box-shadow: 0 12px 30px rgba(47,83,112,.12); }
.song-list { width: 82%; margin: 1.5rem auto 0; }
.song-slip { display: grid; gap: .2rem; margin: .8rem 0; padding: 1rem 1.2rem; background: rgba(255,255,255,.78); border-bottom: 1px solid rgba(22,79,130,.17); transform: rotate(-1deg); }
.song-slip:nth-child(2){transform:rotate(1deg)}
.song-slip small { letter-spacing: .18em; }
.song-slip strong { font-size: 1rem; font-weight: 500; }
.song-slip span { font: .82rem var(--script); opacity: .68; }

.venue { background: linear-gradient(180deg,#edf6fc 0%,#fffaf2 76%,#f7f5f0 100%); padding-top: 6.4rem; }
.venue-copy { margin-top: 2.2rem; padding-left: 1rem; border-left: 2px solid var(--pink); }
.venue-copy h3 { margin: 0 0 .55rem; font-size: 1.55rem; }
.venue-copy address { font-style: normal; font-size: .92rem; line-height: 1.7; }
.map-links { display: flex; gap: .7rem; margin: 1.7rem 0; }
.map-links a { flex: 1; padding: .78rem .45rem; border: 1.5px solid var(--ink); border-radius: 999px; color: var(--ink); background: rgba(255,255,255,.5); text-align: center; text-decoration: none; font-size: .85rem; transition: transform .2s, background .2s; }
.map-links a:active { transform: scale(.96); background: #fff; }
.venue-placeholder { display: grid; place-content: center; min-height: 310px; margin: 2.2rem -1.5vw 0; border: 1px dashed rgba(22,79,130,.25); background: linear-gradient(145deg,rgba(255,255,255,.63),rgba(194,220,239,.38)); text-align: center; box-shadow: var(--shadow); transform: rotate(1deg); }
.venue-placeholder span { font-size: 1.5rem; letter-spacing: .35em; }
.venue-placeholder p { margin: .6rem 0 0; font: .9rem var(--hand); opacity: .66; }

.reminders { background: linear-gradient(180deg,#f7f5f0 0%,#fffaf4 76%,#dceefb 100%); padding-top: 6.4rem; padding-bottom: 8.5rem; }
.reminder-list { display: grid; gap: 1.7rem; margin-top: 2.6rem; }
.reminder-list article { display: grid; grid-template-columns: 48px 1fr; gap: .8rem; align-items: start; }
.reminder-list article > span { display: grid; place-items: center; width: 43px; height: 43px; border: 1.5px solid var(--ink); border-radius: 50%; font-size: 1.35rem; }
.reminder-list h3 { margin: .05rem 0 .25rem; font-size: 1rem; }
.reminder-list p { margin: 0; font-size: .86rem; line-height: 1.55; }
.celebrate { margin: 2.7rem 0 0; color: #2f73a6; text-align: right; font: 1.5rem/1.2 var(--script); transform: rotate(-4deg); }

.ending { position: relative; min-height: 840px; overflow: hidden; background: linear-gradient(180deg,#dceefb 0%,#fff8f0 55%,#edf4f8 100%); }
.ending::before { content: ""; position: absolute; z-index: 3; inset: 0; background: linear-gradient(180deg,rgba(220,238,251,.95) 0%,rgba(255,255,255,.2) 30%,transparent 50%,rgba(245,247,247,.2) 78%,rgba(238,245,249,.94) 100%); pointer-events: none; }
.ending > img { position: absolute; width: 118%; left: -9%; bottom: 8%; -webkit-mask-image: linear-gradient(to bottom, transparent 0%,#000 10%,#000 91%,transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%,#000 10%,#000 91%,transparent 100%); }
.ending-copy { position: relative; z-index: 4; padding: 5.6rem 7vw 0; }
.ending-copy > p { margin: 0; font: 1.08rem/1.7 var(--hand); }
.ending-copy h2 { margin: 1.5rem 0 0; color: #b96a7d; text-align: right; font: 2.15rem/1 var(--script); font-weight: 400; transform: rotate(-4deg); }
.ending-copy h2 span { color: #b96a7d; }
.ending-brand { position: absolute; z-index: 5; bottom: 2.5rem; left: 0; width: 100%; text-align: center; }

.music-control { position: fixed; z-index: 30; right: max(16px, calc((100vw - 480px) / 2 + 16px)); bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: .5rem; min-height: 44px; padding: .55rem .8rem; border: 1px solid rgba(22,79,130,.18); border-radius: 999px; color: var(--ink); background: rgba(255,253,248,.88); box-shadow: 0 8px 24px rgba(32,70,100,.18); backdrop-filter: blur(10px); cursor: pointer; }
.music-bars { display:flex; align-items:flex-end; gap:2px; height:15px; }
.music-bars i { display:block; width:2px; background:var(--ink); animation:bounce .8s ease-in-out infinite alternate; }
.music-bars i:nth-child(1){height:7px}.music-bars i:nth-child(2){height:14px;animation-delay:-.35s}.music-bars i:nth-child(3){height:10px;animation-delay:-.6s}
.music-label { font: .72rem var(--serif); letter-spacing: .04em; }
.music-control.paused .music-bars i { animation-play-state: paused; height: 4px; }
@keyframes bounce { to { height: 4px; } }
#background-player { position: fixed; width: 1px; height: 1px; left: -9999px; overflow: hidden; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

@media (min-width: 700px) {
  .section { padding-left: 48px; padding-right: 48px; }
  .entry-title { margin-left: 42px; }
  .palette { right: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

[hidden] { display: none !important; }

/* Wedding details continue the approved opening artwork. */
.wedding-details { padding-top: 3.5rem; padding-bottom: 3rem; background: linear-gradient(180deg,#f8f4e9 0%,#fffaf1 38%,#f2f7f8 100%); text-align:center; }
.wedding-details .details-kicker { font: .875rem/1.5 var(--serif); letter-spacing:.2em; }
.wedding-details h2 { font-size:clamp(1.6rem,6.4vw,2rem); }
.wedding-date { display:grid; gap:.35rem; margin:2.4rem auto 1.8rem; }
.wedding-date span { font-size:1rem; letter-spacing:.17em; }
.wedding-date strong { font:normal 6.5rem/1 Georgia,serif; }
.wedding-times { display:grid; grid-template-columns:1fr 1fr; padding:1.3rem 0; border-top:1px solid #164f8233; border-bottom:1px solid #164f8233; }
.wedding-times div { display:grid; gap:.55rem; }
.wedding-times div+div { border-left:1px solid #164f8233; }
.wedding-times span { font-size:1rem; }
.wedding-times strong { font:normal clamp(1.25rem,5.2vw,1.65rem)/1.3 Georgia,serif; }
.wedding-times small { font-size:.875rem; letter-spacing:.15em; }
.details-welcome { margin:1.8rem 0 2.8rem; color:#af516b; font:1.45rem/1.8 var(--hand); }
.details-welcome span { color:var(--ink); font:1rem/1.9 var(--serif); }
.details-venue h3 { margin:.6rem 0 .2rem; font:normal 2.7rem/1.2 var(--serif); }
.details-city { margin:.3rem 0 1.3rem; font-size:1rem; letter-spacing:.12em; }
.details-venue address { font-style:normal; font-size:1rem; line-height:1.8; }
.wedding-details .map-links { margin-top:1.5rem; }
.wedding-details .map-links a { font-size:1rem; min-height:48px; }
.map-links a:focus-visible { outline:3px solid var(--pink); outline-offset:4px; }
.details-signoff { margin:2.3rem 0 0; font:1.7rem var(--script); transform:rotate(-4deg); }

.venue-art { position:relative; width:100%; line-height:0; background:#fcf9f2; }
.venue-art>img { display:block; width:100%; height:auto; }
.venue-hotspot { position:absolute; top:88.3%; height:4.5%; border-radius:999px; min-height:24px; }
.venue-google { left:22.5%; width:27%; }
.venue-waze { left:50.8%; width:26%; }
.venue-hotspot:focus-visible { outline:3px solid #ec7f99; outline-offset:2px; }
.venue-hotspot:hover { background:rgba(22,79,130,.07); }

/* Keep the complete original opening artwork intact: no split through flowers. */
.entry-story { container-type:inline-size; }
.entry-story-art { width:100%; height:auto; display:block; }
.entry .entry-hotspot { top:46.6%; height:8.4%; }
.entry .important-anchor { top:57.3%; }
.arrival-time-correction { position:absolute; z-index:5; left:9%; width:82%; top:72.7%; height:5.5%; display:flex; align-items:center; justify-content:center; line-height:1.5; text-align:center; }
.arrival-time-correction::before { content:""; position:absolute; inset:-8% -3%; background:#faf5e9; box-shadow:0 0 10px 7px #faf5e9; border-radius:35%; }
.arrival-time-correction p { position:relative; margin:0; color:#164f82; font-family:"Kaiti SC",KaiTi,"STKaiti",var(--hand); font-size:4.15cqw; line-height:1.55; font-weight:600; }
/* Join only after the full photo frame, with an empty-paper transition. */

.venue-art { line-height:0; }


/* Fade the source edges into one shared paper surface, not over each other. */
.entry-story, .venue-art, .paper-join { background:#fcf9f2; }
.entry-story-art { -webkit-mask-image:url("./assets/entry-edge-mask.svg"); mask-image:url("./assets/entry-edge-mask.svg"); -webkit-mask-size:100% 100%; mask-size:100% 100%; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
.paper-join { height:18px; }
.venue-art>img { -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 1.5%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 1.5%,#000 100%); }

/* Approved love artwork: preserve natural image proportions and soften only empty paper edges. */
.love-art { position:relative; line-height:0; background:#fcf9f2; }
.love-art>img { display:block; width:100%; height:auto; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 1%,#000 99%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 1%,#000 99%,transparent 100%); }
.venue-art>img { -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 1.5%,#000 98.5%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 1.5%,#000 98.5%,transparent 100%); }
.love-art + .our-day { background:linear-gradient(180deg,#fcf9f2 0%,#fffbf4 84%,#edf5f8 100%); }

/* A cover-only entrance; the invitation below retains its original layout. */
body.gate-closed { overflow:hidden; height:100dvh; }
.gate-closed .site-shell { visibility:hidden; }
.cover-gate { position:fixed; inset:0; z-index:100; display:grid; place-items:center; height:100dvh; overflow:hidden; background:#edf4f8; opacity:1; transition:opacity .85s ease; }
.cover-gate-frame { position:relative; width:min(100vw,480px,calc(100dvh * 711 / 1536)); line-height:0; }
.cover-gate-frame>img { display:block; width:100%; height:auto; }
.cover-gate-button { position:absolute; left:19%; top:87%; width:77%; height:11%; padding:0; border:0; background:transparent; cursor:pointer; border-radius:12px; }
.cover-gate-button:focus-visible { outline:3px solid #ec7f99; outline-offset:-4px; }
body.gate-opening { overflow:hidden; }
.gate-opening .site-shell { animation:invitation-appear .85s ease both; }
.cover-gate.is-opening { opacity:0; pointer-events:none; }
@keyframes invitation-appear { from {opacity:0} to {opacity:1} }
@media (prefers-reduced-motion:reduce) { .cover-gate {transition:none} .gate-opening .site-shell {animation:none} }

#background-player { width:200px; height:200px; }

/* Gentle cover light stays in the upper sky, away from faces and the entry button. */
.cover-gate-frame { isolation:isolate; }
.cover-gate-frame::after {
  content:""; position:absolute; z-index:1; pointer-events:none;
  inset:0 0 auto; height:32%;
  background:radial-gradient(ellipse at 76% 17%,rgba(255,250,232,.28),rgba(255,255,255,.10) 30%,transparent 66%);
  background-size:120% 110%; background-repeat:no-repeat;
  animation:cover-soft-light 11s ease-in-out infinite alternate;
}
.cover-gate-button { z-index:2; }
@keyframes cover-soft-light {
  from { opacity:.38; background-position:0% 0%; }
  to { opacity:.85; background-position:100% 35%; }
}
/* Visible by default; motion is enabled only after entering the invitation. */
.reveal { opacity:1; transform:none; }
.soft-reveal { opacity:0; transform:translateY(8px); transition:opacity .95s ease,transform .95s ease; }
.soft-reveal.in-view { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  .cover-gate-frame::after { animation:none; opacity:.35; }
  .soft-reveal { opacity:1; transform:none; transition:none; }
}

/* Approved continuation images stay uncropped at their natural proportions. */
.continuation-art { position:relative; width:100%; line-height:0; background:#faf5e9; }
.continuation-art>img { display:block; width:100%; height:auto; mask-image:linear-gradient(to bottom,transparent,#000 1%,#000 99%,transparent); -webkit-mask-image:linear-gradient(to bottom,transparent,#000 1%,#000 99%,transparent); }
.song-hotspot { position:absolute; left:36.5%; width:28.5%; height:4.9%; border-radius:999px; min-height:24px; }
.song-one { top:49.3%; }
.song-two { top:70.2%; }
.song-hotspot:focus-visible { outline:3px solid #db8da3; outline-offset:3px; }
.song-hotspot:hover { background:rgba(22,68,107,.07); }