:root {
  color-scheme: light;
  --plum: #19141d;
  --cream: #f8f0e8;
  --gold: #dfbd83;
  --rose: #dfb3ab;
  font-family: Georgia, "Times New Roman", serif;
  background: var(--cream);
  color: var(--plum);
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--cream); scroll-behavior: smooth; }
body { margin: 0; min-height: 100svh; background: var(--cream); }
button, a { -webkit-tap-highlight-color: transparent; }

.skip-link {
  position: fixed;
  z-index: 20;
  inset: max(12px, env(safe-area-inset-top)) auto auto 12px;
  padding: 12px 16px;
  transform: translateY(-160%);
  border-radius: 4px;
  background: var(--cream);
  color: var(--plum);
  font: 600 16px/1.2 system-ui, sans-serif;
}
.skip-link:focus { transform: translateY(0); }

.invitation {
  position: relative;
  z-index: 1;
  width: min(100%, 430px);
  margin-inline: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease;
  background: var(--plum);
}
.invitation.is-visible { opacity: 1; visibility: visible; }
.artwork {
  position: relative;
  width: 100%;
  aspect-ratio: 430 / 5760;
  overflow: hidden;
  background: var(--plum);
}
.scene-slice {
  position: absolute;
  inset-block-start: var(--scene-top);
  inset-inline-start: 0;
  display: block;
  width: 100%;
  height: var(--scene-height);
  overflow: hidden;
  clip-path: inset(0);
}
body.has-opened .scene-slice.motion-reveal:not(.is-revealed) {
  clip-path: inset(0 0 100% 0);
}
.scene-slice.motion-reveal {
  transition: clip-path 760ms cubic-bezier(.22,.7,.22,1);
}
.scene-slice.motion-reveal.is-revealed { clip-path: inset(0); }

/* The master nests this venue scene in three vertical translations totaling -700 px.
   This frame aligns to the resulting y=2480 map panel and preserves its gold border. */
.map-preview {
  position: absolute;
  z-index: 2;
  left: 8.26%;
  top: 43.08%;
  width: 83.48%;
  height: 2.62%;
  overflow: hidden;
  border-radius: 5.25% / 12.34%;
  background: #e4e2d8;
}
.map-preview iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}
.hotspot {
  position: absolute;
  z-index: 3;
  display: block;
  border-radius: 999px;
  outline-offset: 4px;
  -webkit-tap-highlight-color: transparent;
}
.hotspot:focus-visible { outline: 3px solid #fff4d5; box-shadow: 0 0 0 6px #241725; }
/* Hotspots follow the approved 430 × 5760 master coordinates and scale with it. */
/* The master nests this button in transforms totaling -700 px. */
.map-cta { left: 7.9%; top: 46.1979%; width: 84.2%; height: 1.25%; }
.rsvp-cta { left: 8.37%; top: 89.05%; width: 83.26%; height: 1.36%; }

.opening {
  position: fixed;
  z-index: 10;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse at 50% 52%, rgba(151, 89, 103, .15), transparent 43%),
    var(--cream);
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms ease 1.18s, visibility 0s linear 1.5s;
}
.opening.is-opening { opacity: 0; visibility: hidden; pointer-events: none; }
.envelope-trigger {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 20px;
  width: min(100%, 540px, 90svh);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--plum);
  cursor: pointer;
  transition: transform 1.42s cubic-bezier(.22,.72,.28,1), filter 1.42s ease;
}
.envelope-trigger:focus-visible { outline: 2px solid #b3835f; outline-offset: 12px; border-radius: 8px; }
.envelope-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
}
.envelope {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 28px 34px rgba(31, 20, 29, .2));
  transition: opacity 180ms ease;
}
.envelope-frames { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.envelope-frame {
  position: absolute;
  inset: 0;
  display: block;
  background-image: url("./assets/envelope-opening-frames-7e6ccbad52e7.webp");
  background-size: 200% 200%;
  background-repeat: no-repeat;
  clip-path: inset(11.2% 7.55% 11.2% 7.55% round 8px);
  filter: drop-shadow(0 22px 28px rgba(31, 20, 29, .19));
  opacity: 0;
}
.frame-closed { background-position: 0 0; }
.frame-seal { background-position: 100% 0; }
.frame-lift { background-position: 0 100%; }
.frame-open { background-position: 100% 100%; }
.opening.is-opening .envelope { opacity: 0; }
.opening.is-opening .envelope-frames { opacity: 1; }
.opening.is-opening .envelope-trigger { transform: translateY(-1.5vh) scale(1.018); filter: blur(1px); }
.opening.is-opening .frame-closed { animation: frame-closed 1.5s ease both; }
.opening.is-opening .frame-seal { animation: frame-seal 1.5s ease both; }
.opening.is-opening .frame-lift { animation: frame-lift 1.5s ease both; }
.opening.is-opening .frame-open { animation: frame-open 1.5s ease both; }
@keyframes frame-closed {
  0%, 4% { opacity: 0; }
  7%, 21% { opacity: 1; }
  24%, 100% { opacity: 0; }
}
@keyframes frame-seal {
  0%, 20% { opacity: 0; }
  24%, 38% { opacity: 1; }
  41%, 100% { opacity: 0; }
}
@keyframes frame-lift {
  0%, 37% { opacity: 0; }
  41%, 60% { opacity: 1; }
  63%, 100% { opacity: 0; }
}
@keyframes frame-open {
  0%, 59% { opacity: 0; }
  63%, 87% { opacity: 1; }
  90%, 100% { opacity: 0; }
}
.opening-prompt {
  color: #755765;
  font: 600 11px/1.2 Cambria, Georgia, "Times New Roman", serif;
  letter-spacing: .24em;
  transition: opacity 240ms ease;
}
.opening.is-opening .opening-prompt { opacity: 0; }

.audio-toggle {
  position: fixed;
  z-index: 4;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(223, 189, 131, .65);
  border-radius: 50%;
  background: rgba(25, 20, 29, .88);
  color: var(--gold);
  font: 22px/1 Georgia, serif;
  box-shadow: 0 6px 22px rgba(25, 20, 29, .22);
  cursor: pointer;
}
.audio-toggle:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }
.audio-toggle[hidden] { display: none; }
.audio-toggle[aria-pressed="true"] span { animation: music-note-breathe 2.8s ease-in-out infinite; }
@keyframes music-note-breathe {
  0%, 100% { transform: translateY(0) scale(1); text-shadow: 0 0 0 rgba(223,189,131,0); }
  50% { transform: translateY(-2px) scale(1.08); text-shadow: 0 0 9px rgba(223,189,131,.65); }
}

@media (max-width: 360px) {
  .opening-prompt { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  body.has-opened .scene-slice.motion-reveal:not(.is-revealed) { clip-path: inset(0); }
  .envelope-frames { display: none !important; }
  .envelope { opacity: 1 !important; }
}
body.is-closed { height: 100svh; overflow: hidden; }
body.is-closed .skip-link { visibility: hidden; }