:root {
  --umber: #3F2C1E;
  --brass: #D9A441;
  --paper: #F8EFD8;
  --rose-vellum: #E9CFC3;
  --ink: #17100B;
  --deep-brass: #8B642B;
  --white: #FFFFFF;
  --crystal: #BFE7F1;
  --font-display: "Fraunces", Georgia, serif;
  --font-hand: "Yomogi", "Comic Sans MS", cursive;
  --font-body: "Inter", inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; overflow-x: hidden; }

body {
  font-family: var(--font-body);
  color: var(--paper);
  background: var(--ink);
}

.keepsake-stage {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 34px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 39%, rgba(217, 164, 65, 0.32), transparent 25%),
    radial-gradient(circle at 50% 58%, rgba(191, 231, 241, 0.12), transparent 32%),
    linear-gradient(145deg, #17100B 0%, #3F2C1E 48%, #17100B 100%);
}

.velvet-grain,
.spotlight,
.paper-halo { position: absolute; pointer-events: none; }

.velvet-grain {
  inset: 0;
  opacity: 0.42;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(255,255,255,0.055) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(112deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 9px);
  mix-blend-mode: soft-light;
}

.spotlight {
  width: min(72vw, 820px);
  height: min(72vw, 820px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(248,239,216,0.36), rgba(217,164,65,0.11) 38%, transparent 68%);
  filter: blur(16px);
  transform: translateY(-5vh);
  animation: breatheSpot 7s ease-in-out infinite;
}

.paper-halo {
  width: min(92vw, 780px);
  aspect-ratio: 1.22;
  border-radius: 48% 52% 50% 46%;
  background: radial-gradient(circle, rgba(248,239,216,0.28), rgba(233,207,195,0.14) 52%, transparent 73%);
  border: 1px solid rgba(248,239,216,0.16);
  box-shadow: inset 0 0 70px rgba(139,100,43,0.22);
  transform: rotate(var(--tilt, -1deg)) scale(var(--halo-scale, 1));
  transition: transform 600ms cubic-bezier(.17,.84,.34,1.35);
}

.halo-line {
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(217,164,65,0.22);
  border-radius: 47% 52% 48% 51%;
}
.halo-line-two { inset: 16%; border-color: rgba(191,231,241,0.2); transform: rotate(5deg); }
.halo-line-three { inset: 24%; border-color: rgba(255,255,255,0.16); transform: rotate(-6deg); }

.name-ceremony { position: relative; z-index: 2; display: grid; justify-items: center; gap: 22px; width: min(95vw, 940px); }

.tray {
  position: relative;
  width: min(88vw, 690px);
  min-height: 410px;
  display: grid;
  place-items: center;
  padding: 42px;
  border-radius: 58px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.18), transparent 26%),
    linear-gradient(155deg, #8B642B, #D9A441 42%, #3F2C1E 100%);
  box-shadow: 0 38px 90px rgba(0,0,0,0.48), inset 0 2px 0 rgba(255,255,255,0.38), inset 0 -20px 40px rgba(63,44,30,0.35);
  transform: translate3d(var(--mx,0), var(--my,0), 0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition: transform 260ms ease-out;
}

.tray::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 45px;
  background: linear-gradient(145deg, #F8EFD8, #E9CFC3 58%, #D9A441);
  box-shadow: inset 0 0 0 1px rgba(63,44,30,0.2), inset 0 24px 38px rgba(255,255,255,0.55), inset 0 -22px 38px rgba(139,100,43,0.23);
}

.locket {
  position: relative;
  width: min(76vw, 540px);
  min-height: 250px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  padding: 34px 44px;
  background: linear-gradient(150deg, rgba(191,231,241,0.65), rgba(255,255,255,0.88) 28%, rgba(248,239,216,0.97) 62%, rgba(233,207,195,0.86));
  box-shadow: 0 24px 42px rgba(63,44,30,0.28), inset 0 0 0 2px rgba(255,255,255,0.84), inset 0 -18px 34px rgba(139,100,43,0.18);
  overflow: hidden;
}

.locket::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid rgba(217,164,65,0.62);
  border-radius: inherit;
  box-shadow: inset 0 0 24px rgba(191,231,241,0.38);
}

.locket::after {
  content: "";
  position: absolute;
  width: 38%;
  height: 190%;
  left: -35%;
  top: -46%;
  transform: rotate(24deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.74), transparent);
  animation: causticSweep 6s ease-in-out infinite 1.2s;
}

.glass-cover {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 28% 20%, rgba(255,255,255,0.82), transparent 20%), linear-gradient(115deg, rgba(191,231,241,0.24), transparent 45%, rgba(255,255,255,0.26));
  z-index: 3;
  opacity: 0.62;
  transition: transform 650ms cubic-bezier(.17,.84,.34,1.28), opacity 650ms ease;
}

.enamel-face { position: relative; z-index: 4; text-align: center; color: var(--ink); }

.wordmark {
  font-family: var(--font-display);
  font-size: clamp(3.1rem, 10vw, 7.2rem);
  font-weight: 760;
  font-variation-settings: "SOFT" 88, "WONK" 1;
  letter-spacing: -0.08em;
  color: var(--ink);
  text-shadow: 0 2px 0 #FFFFFF, 0 8px 15px rgba(139,100,43,0.22), 0 -1px 0 rgba(63,44,30,0.16);
  filter: blur(9px);
  transform: translateY(14px) scale(0.985);
  animation: engraveFocus 1200ms cubic-bezier(.14,.86,.24,1) forwards 280ms;
}

.wordmark span { display: inline-block; animation: letterRise 1120ms cubic-bezier(.2,1.38,.36,1) forwards; animation-delay: calc(480ms + var(--i) * 58ms); opacity: 0; }
.wordmark .dot { color: var(--deep-brass); padding-inline: 0.02em; }

.undertext { margin: 8px auto 0; max-width: 420px; color: rgba(23,16,11,0.74); font-size: clamp(0.78rem, 1.8vw, 0.96rem); line-height: 1.55; }

.ribbon-pull {
  appearance: none;
  border: 0;
  margin-top: 18px;
  padding: 11px 21px 13px;
  border-radius: 999px;
  color: var(--paper);
  background: linear-gradient(180deg, #8B642B, #3F2C1E);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.24), 0 8px 16px rgba(63,44,30,0.22);
  font-family: var(--font-hand);
  font-size: 1.05rem;
  cursor: pointer;
  transform: translateY(0);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.ribbon-pull:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), 0 12px 22px rgba(63,44,30,0.29); }

.slip {
  position: absolute;
  z-index: 5;
  margin: 0;
  padding: 10px 16px;
  border-radius: 16px 14px 18px 12px;
  font-family: var(--font-hand);
  color: var(--ink);
  background: rgba(248,239,216,0.86);
  box-shadow: 0 13px 28px rgba(0,0,0,0.22), inset 0 0 0 1px rgba(217,164,65,0.26);
  backdrop-filter: blur(8px);
  transform: translateY(var(--drift-y,0)) rotate(var(--rot,0deg));
  transition: transform 500ms cubic-bezier(.17,.84,.34,1.32);
}
.slip-top { top: -24px; left: 50%; transform: translateX(-50%) rotate(-2deg); letter-spacing: .03em; }
.slip-left { left: 4%; top: 35%; --rot: -7deg; }
.slip-right { right: 1%; top: 42%; --rot: 6deg; }

.screw, .hinge { position: absolute; z-index: 2; background: radial-gradient(circle at 35% 30%, #FFFFFF, #D9A441 36%, #8B642B 80%); box-shadow: inset 0 -2px 2px rgba(63,44,30,0.34); }
.screw { width: 16px; height: 16px; border-radius: 50%; }
.screw-one { left: 42px; top: 42px; }
.screw-two { right: 42px; bottom: 42px; }
.hinge { width: 46px; height: 18px; border-radius: 99px; top: 50%; transform: translateY(-50%); }
.hinge-left { left: 15px; } .hinge-right { right: 15px; }

.crystal-rim { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.facet { position: absolute; width: 34px; height: 34px; clip-path: polygon(50% 0, 100% 35%, 76% 100%, 18% 82%, 0 26%); background: linear-gradient(135deg, rgba(191,231,241,0.86), rgba(255,255,255,0.52), rgba(217,164,65,0.28)); box-shadow: 0 0 18px rgba(191,231,241,0.4); animation: glint 4.5s ease-in-out infinite; }
.facet-a { left: 10%; top: 8%; } .facet-b { right: 14%; top: 4%; animation-delay: .7s; } .facet-c { left: 3%; bottom: 26%; animation-delay: 1.4s; } .facet-d { right: 6%; bottom: 18%; animation-delay: 2s; } .facet-e { left: 45%; bottom: 2%; animation-delay: 2.6s; } .facet-f { right: 44%; top: 2%; animation-delay: 3.2s; }

.annotation-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.note-chip { border: 1px solid rgba(191,231,241,0.32); border-radius: 999px; padding: 8px 13px; color: #F8EFD8; background: rgba(63,44,30,0.58); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }

.drawer {
  position: absolute;
  z-index: 3;
  bottom: 24px;
  left: 50%;
  width: min(90vw, 780px);
  display: grid;
  grid-template-columns: 1.3fr .8fr;
  gap: 14px;
  transform: translate(-50%, 126%);
  transition: transform 760ms cubic-bezier(.17,.84,.34,1.2);
}
.drawer.open { transform: translate(-50%, 0); }
.drawer-card { padding: 20px 22px; border-radius: 24px; background: rgba(248,239,216,0.9); color: var(--ink); box-shadow: 0 20px 45px rgba(0,0,0,0.32), inset 0 0 0 1px rgba(255,255,255,0.55); }
.drawer-card h2 { margin: 3px 0 8px; font-family: var(--font-display); font-size: clamp(1.4rem, 3vw, 2.05rem); line-height: .96; }
.drawer-card p { margin: 0; line-height: 1.5; }
.drawer-kicker { color: var(--deep-brass); text-transform: uppercase; letter-spacing: .16em; font-size: .7rem; font-weight: 800; }
.handwritten { font-family: var(--font-hand); font-size: 1.18rem; background: rgba(233,207,195,0.92); transform: rotate(2deg); }

.stage-open .glass-cover { transform: translateY(-16px) rotateX(16deg); opacity: 0.38; }
.stage-open .paper-halo { --halo-scale: 1.04; }
.stage-open .ribbon-pull { transform: translateY(4px); }

@keyframes breatheSpot { 0%,100% { opacity: .82; transform: translateY(-5vh) scale(1); } 50% { opacity: 1; transform: translateY(-5vh) scale(1.08); } }
@keyframes causticSweep { 0%, 38% { left: -45%; opacity: 0; } 50% { opacity: .7; } 72%, 100% { left: 112%; opacity: 0; } }
@keyframes engraveFocus { to { filter: blur(0); transform: translateY(0) scale(1); } }
@keyframes letterRise { 0% { opacity: 0; transform: translateY(18px) scaleY(.84); } 64% { opacity: 1; transform: translateY(-7px) scaleY(1.12); } 100% { opacity: 1; transform: translateY(0) scaleY(1); } }
@keyframes glint { 0%,100% { transform: scale(.94) rotate(-3deg); opacity: .62; } 48% { transform: scale(1.12) rotate(7deg); opacity: 1; } }

@media (max-width: 760px) {
  .keepsake-stage { padding: 18px; align-items: start; padding-top: 90px; }
  .tray { min-height: 360px; padding: 27px; border-radius: 38px; }
  .tray::before { border-radius: 30px; }
  .locket { min-height: 235px; padding: 26px 24px; border-radius: 46px; }
  .slip-left, .slip-right { display: none; }
  .drawer { position: relative; bottom: auto; left: auto; transform: translateY(32px); grid-template-columns: 1fr; margin-top: 4px; }
  .drawer.open { transform: translateY(0); }
}