/* A little jewel box: all artwork is local CSS geometry. */
.gift-page {
  --champagne: #ead3a1;
  --tag-ink: #493528;
  color-scheme: dark;
  position: relative;
  min-height: 100svh;
  padding: 0 44px;
  overflow-x: clip;
  background: radial-gradient(ellipse at 50% 39%, #50233355, transparent 48%),
    radial-gradient(ellipse at 50% 100%, #37202777, transparent 65%), #190f16;
  color: #f7edde;
  display: flex;
  flex-direction: column;
}
.gift-page::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .14;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.22' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
.gift-invitation { position: relative; z-index: 1; width: 100%; margin: auto; padding: 26px 0 20px; text-align: center; }
.invitation-heading h1 { max-width: 820px; margin: 12px auto 24px; font-size: clamp(2.6rem, 4.2vw, 4rem); font-weight: 400; line-height: 1.12; letter-spacing: -.035em; text-wrap: balance; }
.invitation-heading h1 em { color: var(--champagne); }
.gift-stage { position: relative; isolation: isolate; width: min(580px, 100%); height: 306px; margin: 0 auto; perspective: 1000px; }
.anniversary-number { position: absolute; left: 50%; top: -30px; transform: translateX(-50%); color: transparent; -webkit-text-stroke: 1px #e8c58316; font: 300px/1.1 var(--serif); letter-spacing: -.07em; padding-right: .07em; user-select: none; }
.gift-halo { position: absolute; width: 320px; height: 270px; left: calc(50% - 160px); top: 20px; background: radial-gradient(ellipse, #e8b65d1b, transparent 68%); }
.gift-shadow { position: absolute; width: 210px; height: 27px; left: calc(50% - 105px); bottom: 27px; border-radius: 50%; background: #0008; filter: blur(13px); animation: shadow-breathe 6s ease-in-out infinite; }
.gift-orbit { position: absolute; width: 310px; height: 50px; left: calc(50% - 155px); bottom: 14px; border: 1px solid #d9b66f24; border-radius: 50%; }
.gift-orbit::after { content: ""; position: absolute; inset: 9px -24px -9px; border: 1px solid #d9b66f0c; border-radius: 50%; }
.gift-float { position: absolute; width: 200px; height: 200px; left: calc(50% - 100px); top: 72px; transform-style: preserve-3d; transform: scale(.83) translateY(-9px); animation: gift-float 6s ease-in-out infinite; }
.gift-rotation { width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-17deg) rotateY(-27deg); animation: gift-turn 26s linear infinite; }
.gift-box { position: relative; width: 200px; height: 200px; transform-style: preserve-3d; }
.box-face { position: absolute; inset: 0; backface-visibility: hidden; border: 1px solid #cc687247; background: repeating-linear-gradient(50deg, transparent 0 3px, #f6b39805 3px 4px), linear-gradient(120deg, #a54a59, #773044 44%, #4d142c); box-shadow: inset 0 0 28px #36041966; }
.box-face::before, .lid-face::before { content: ""; position: absolute; width: 40px; height: 100%; left: calc(50% - 20px); background: linear-gradient(90deg, #795025, #dab16a 7%, #fce8b5 18%, #d4a45a 48%, #b5803b 84%, #efd497 96%, #9a6b32); box-shadow: 0 0 0 1px #f2d29355, 5px 0 9px #24091044; }
.box-face::after { content: ""; position: absolute; inset: 10px; border: 1px solid #efbd8350; }
.box-front { transform: translateZ(100px); }
.box-back { transform: rotateY(180deg) translateZ(100px); }
.box-left { transform: rotateY(-90deg) translateZ(100px); background-color: #5d243a; }
.box-right { transform: rotateY(90deg) translateZ(100px); }
.box-bottom { transform: rotateX(-90deg) translateZ(100px); }
.box-emblem { position: absolute; left: 18px; bottom: 16px; width: 38px; height: 38px; border: 1px solid #e8c38777; border-radius: 50%; display: grid; place-items: center; color: #f2d69e; font: italic 23px/1 var(--serif); }
.box-interior { position: absolute; inset: 2px; background: radial-gradient(ellipse, #ffe4ab, #a36a41 50%, #461528 78%); transform: rotateX(90deg) translateZ(93px); }
.gift-lid { position: absolute; width: 216px; height: 26px; left: -8px; top: -14px; transform-style: preserve-3d; transition: transform 1.3s cubic-bezier(.2,.7,.2,1); }
.lid-face { position: absolute; inset: 0; backface-visibility: hidden; background: linear-gradient(#b85c68, #6e2338); border: 1px solid #e6978855; box-shadow: 0 6px 5px #28051b55; }
.lid-front { transform: translateZ(108px); }
.lid-back { transform: rotateY(180deg) translateZ(108px); }
.lid-left { transform: rotateY(-90deg) translateZ(108px); }
.lid-right { transform: rotateY(90deg) translateZ(108px); }
.lid-top, .lid-bottom { position: absolute; width: 216px; height: 216px; top: -95px; background: linear-gradient(125deg, #bd6874, #8a374b 50%, #64223b); border: 1px solid #f5bfa066; backface-visibility: hidden; transform: rotateX(90deg) translateZ(13px); }
.lid-bottom { transform: rotateX(-90deg) translateZ(13px); background: #733044; }
.lid-top::before, .lid-top::after { content: ""; position: absolute; width: 40px; height: 100%; left: 87px; background: linear-gradient(90deg, #a9793c, #f9e1a8 12%, #d4a55d 45%, #f5d89c 94%, #aa783b); box-shadow: 0 0 0 1px #f2d29377; }
.lid-top::after { transform: rotate(90deg); }
.gift-bow { position: absolute; left: 108px; top: -4px; transform-style: preserve-3d; }
.bow-ribbons { transform-style: preserve-3d; }
.ribbon-segment { position: absolute; background: linear-gradient(180deg, #fce9bb, #d4aa64 10%, #e7c483 48%, #ae7a36 90%, #f5d695); border-top: 1px solid #ffedbb99; border-bottom: 1px solid #84531999; backface-visibility: visible; }
.bow-knot { position: absolute; width: 31px; height: 27px; top: -24px; left: -15px; border: 1px solid #ddba77; border-radius: 8px 7px 9px 8px; background: linear-gradient(100deg, #ae7e38, #ffecb9 28%, #dbb26b 52%, #b58640 86%, #f0d79a); transform: translateZ(24px) rotate(-8deg); box-shadow: 0 5px 8px #48231255; }
.bow-fallback { position: absolute; width: 86px; height: 47px; border: 12px solid #e9c785; border-radius: 50% 55% 40% 50%; top: -48px; left: -83px; transform: rotate(24deg); }
.bow-fallback-right { left: -1px; transform: rotate(-24deg); }
.has-ribbon-mesh .bow-fallback { display: none; }
.gift-light { position: absolute; inset: -80px -25px 15px; background: radial-gradient(ellipse at 50% 100%, #fff3c6cf, #ffd78425 45%, transparent 70%); opacity: 0; transform: translateZ(20px); transition: opacity .9s; pointer-events: none; }
.stage-sparkle { position: absolute; color: #dfbd7b; animation: sparkle 5s ease-in-out infinite; font-family: Georgia, serif; }
.sparkle-one { top: 85px; left: 15%; font-size: 24px; }
.sparkle-two { right: 17%; top: 169px; font-size: 14px; animation-delay: -2s; }
.sparkle-three { left: 25%; bottom: 50px; font-size: 12px; animation-delay: -3s; }
.gift-tag { position: relative; width: min(360px, 100%); margin: 0 auto; padding: 27px 27px 24px; color: var(--tag-ink); background: linear-gradient(120deg, #fbf1dc, #eadbc1); border-radius: 3px; box-shadow: 0 20px 70px #0003, inset 0 0 0 1px #fff8; }
.gift-tag::before { content: ""; position: absolute; height: 39px; width: 16px; left: calc(50% - 8px); top: -29px; border: 1px solid #b08c50; border-radius: 50%; transform: rotate(-11deg); }
.gift-tag::after { content: ""; pointer-events: none; position: absolute; inset: 7px; border: 1px solid #98754230; border-radius: 1px; }
.tag-eyelet { position: absolute; top: 10px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #281823; box-shadow: 0 0 0 2px #bc985e77; }
.gift-form { position: relative; z-index: 1; text-align: left; }
.gift-form label { display: block; margin: 4px 0 18px; color: var(--tag-ink); font: 400 23px/1.3 var(--serif); letter-spacing: -.025em; text-align: center; text-wrap: balance; }
.gift-password-field { display: flex; align-items: center; border: 1px solid #a88d644f; border-radius: 2px; background: #fff9ed80; transition: border-color .2s, box-shadow .2s; }
.gift-password-field:focus-within { border-color: #97743f; box-shadow: 0 0 0 3px #a77b3720; }
.password-key { flex: none; margin-left: 13px; color: #977749; }
.gift-password-field input { width: 100%; min-width: 0; min-height: 45px; padding: 11px 10px; background: none; border: 0; color: #493528; font-size: 16px; line-height: 1.3; outline: none; color-scheme: light; }
.gift-password-field input::placeholder { font-size: 12px; color: #89745e; }
.password-toggle { flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: #876a49; display: grid; place-items: center; }
.password-toggle[hidden] { display: none; }
.eye-slash { display: none; }
.password-toggle[aria-pressed="true"] .eye-slash { display: initial; }
.gift-error { color: #942f3d; font-size: 11px; line-height: 1.5; }
.gift-error:empty { display: none; }
.gift-error:not(:empty) { margin: 9px 0 2px; }
.gift-password-field:has([aria-invalid="true"]) { border-color: #942f3d; }
.unwrap-button { margin-top: 10px; width: 100%; min-height: 46px; display: flex; align-items: center; justify-content: center; gap: 21px; border: 1px solid #552a36; border-radius: 2px; background: #42202e; color: #f5e4c5; font-size: 12px; letter-spacing: .055em; transition: background .2s, box-shadow .2s; }
.unwrap-button:hover { background: #603044; box-shadow: 0 4px 14px #49213420; }
.unwrap-button svg { transition: transform .2s; }
.unwrap-button:hover svg { transform: translateX(3px); }
.unwrap-button:disabled { cursor: wait; opacity: .75; }
.gift-tag button:focus-visible { outline: 2px solid #87673f; outline-offset: 3px; }
.celebration-dust { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dust-mote { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); border-radius: 50%; background: #e8c181; opacity: .2; animation: dust-drift var(--duration) ease-in-out var(--delay) infinite; }
.is-unwrapping .gift-rotation, .is-unwrapping .gift-float { animation-play-state: paused; }
.invitation-heading, .gift-tag { transition: opacity .45s, transform .6s; }
.is-unwrapping .invitation-heading { opacity: 0; transform: translateY(-16px); pointer-events: none; }
.is-unwrapping .gift-tag { opacity: 0; transform: translateY(24px); pointer-events: none; }
.is-opening .gift-lid { transform: translate3d(-110px, -150px, -100px) rotateZ(-32deg) rotateX(-24deg); }
.is-opening .gift-light { opacity: 1; }
.is-presenting .gift-stage { opacity: 0; transform: translateY(50px) scale(.88); transition: opacity 1.1s .3s, transform 1.5s; }
.website-emergence { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.website-sheet { position: absolute; inset: 0; overflow: hidden; opacity: 0; background: var(--ink); color: var(--cream); transform-origin: 50% 50%; backface-visibility: hidden; will-change: transform; }
.website-sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, #fff3cc40, transparent 35%, #efd59e0a 55%, #f9e6bc26); box-shadow: inset 0 0 0 2px #efd59e99, inset 0 0 50px #f2cf9022; border-radius: inherit; opacity: 1; transition: opacity 1.2s; }
.is-presenting .website-sheet::after { opacity: 0; }
@keyframes gift-turn { from { transform: rotateX(-17deg) rotateY(-27deg); } to { transform: rotateX(-17deg) rotateY(333deg); } }
@keyframes gift-float { 0%, 100% { transform: scale(.83) translateY(-9px); } 50% { transform: scale(.83) translateY(1px); } }
@keyframes shadow-breathe { 0%, 100% { transform: scale(.91); opacity: .6; } 50% { transform: scale(1.04); opacity: .85; } }
@keyframes sparkle { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: .85; transform: scale(1.15); } }
@keyframes dust-drift { 0%, 100% { opacity: .1; transform: translateY(0); } 50% { opacity: .55; transform: translateY(-18px); } }
@media (min-height: 920px) and (min-width: 681px) { .gift-stage { height: 370px; } .gift-float { top: 100px; } .anniversary-number { top: -10px; font-size: 330px; } .gift-invitation { padding: 38px 0; } }
@media (max-width: 680px) {
  .gift-page { padding: 0 22px; }
  .gift-invitation { padding: 24px 0 18px; }
  .invitation-heading h1 { font-size: clamp(2.2rem, 9vw, 3rem); margin-top: 13px; }
  .gift-stage { height: 289px; }
  .gift-float { top: 60px; }
  .anniversary-number { top: -30px; font-size: 260px; }
  .gift-orbit { width: 250px; left: calc(50% - 125px); bottom: 16px; }
  .gift-tag { width: min(340px, 100%); padding: 27px 23px 23px; }
  .sparkle-one { left: 2%; }
  .sparkle-two { right: 2%; }
  .sparkle-three { left: 12%; }
}
@media (max-width: 360px) {
  .gift-page { padding-inline: 16px; }
  .gift-tag { padding-inline: 20px; }
  .gift-form label { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .gift-page *, .gift-page *::before, .gift-page *::after { animation: none !important; transition: none !important; }
}