/* Keep grouping effects off the 3D parent: filters/opacity/overflow would
   flatten the paper faces. Put clipping and texture on the individual faces. */
.cover-stage {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 22px; background: var(--canvas); overflow: hidden;
  transition: opacity 650ms ease;
}
.cover-surround { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.surround-branch { position: absolute; width: 260px; opacity: .29; bottom: -70px; }
.branch-left { left: max(-100px,calc(50% - 550px)); transform: rotate(14deg); }
.branch-right { right: max(-100px,calc(50% - 550px)); transform: scaleX(-1) rotate(14deg); }
.cover-intro { font: 20px var(--serif); color: var(--muted); margin: 0 0 22px; text-align: center; }
.fold-card {
  width: min(390px,100%); aspect-ratio: 39/54; position: relative;
  perspective: 1250px; perspective-origin: 50% 43%;
  transform-style: preserve-3d; isolation: auto; filter: none;
}
.card-ground-shadow {
  position: absolute; inset: 8px -8px -16px;
  background: #172e402e; filter: blur(16px); transform: translateZ(-8px);
  pointer-events: none;
}
.card-inside {
  position: absolute; inset: 0; background: var(--paper);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  border: 1px solid var(--line); color: var(--ink); text-align: center;
  transform: translateZ(-1px);
  box-shadow: inset 0 0 0 12px var(--paper), inset 0 0 0 13px var(--line), 0 3px 7px #142c4520;
}
.card-inside p { font: 18px/1.5 var(--serif); margin: 0 0 16px; }
.inside-flourish { width: 78px; height: 52px; color: var(--gold-dark); margin-bottom: 24px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.inside-names { font: 58px/.8 var(--script); margin: 20px 0 30px; }
.inside-names span { font: 27px/1.3 var(--serif); color: var(--gold-dark); }
.inside-fold-shadow {
  position: absolute; inset: 0; transform: translateZ(1px); pointer-events: none;
  background: linear-gradient(90deg,#07192895,transparent 42%,#07192830 50%,transparent 58%,#07192895);
  opacity: .82;
}
.door {
  position: absolute; top: 0; width: 50%; height: 100%;
  transform-style: preserve-3d; transform: rotateY(0deg);
  background: none; overflow: visible; border: 0; box-shadow: none;
  backface-visibility: visible; -webkit-backface-visibility: visible;
  will-change: transform;
}
.door-left { left: 0; transform-origin: 0% 50%; }
.door-right { right: 0; transform-origin: 100% 50%; }
.door-face {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.door-front {
  transform: translateZ(.8px); background-color: var(--navy);
  background-image: repeating-linear-gradient(90deg,#fff1 0,#fff1 .3px,transparent .3px,transparent 3px);
  box-shadow: inset 0 0 0 1px #091e30, 0 2px 5px #0e233755;
}
.door-back {
  transform: rotateY(180deg) translateZ(.8px); background: #f3eee1;
  box-shadow: inset 0 0 0 1px #cfc1a6, inset 0 0 35px #a5875320, 0 2px 5px #0e233755;
}
.back-frame { position: absolute; inset: 13px; border: 1px solid var(--line); }
.door-back img { opacity: .45; width: 190px; bottom: -40px; }
.door-frame { position: absolute; inset: 13px; border: 1px solid #c3a36b90; }
.door-left .door-frame { right: -1px; border-right: 0; }
.door-right .door-frame { left: -1px; border-left: 0; }
.door-frame:after { content: ""; position: absolute; inset: 5px; border: 1px solid #c3a36b35; }
.door-left .door-frame:after { right: 0; border-right: 0; }
.door-right .door-frame:after { left: 0; border-left: 0; }
.door img {
  position: absolute; width: 210px; opacity: .74; bottom: -28px; left: -55px;
  transform-origin: bottom left; animation: botanical-breeze 7s ease-in-out infinite alternate;
}
.door-right img { left: auto; right: -55px; transform: scaleX(-1); animation-name: botanical-breeze-mirrored; }
.door-back img { opacity: .45; }
.door-light {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg,#fff3,transparent 35%,#0009);
}
.door-right .door-light { background: linear-gradient(255deg,#fff3,transparent 35%,#0009); }
.cover-lettering { position: absolute; top: 0; bottom: 0; width: 200%; pointer-events: none; color: #f4e7c9; text-align: center; }
.door-left .cover-lettering { left: 0; }
.door-right .cover-lettering { left: -100%; }
.cover-label { position: absolute; top: 10%; width: 100%; margin: 0; font: 21px var(--serif); letter-spacing: .04em; }
.cover-name { font: 400 clamp(62px,15vw,82px)/1.2 var(--script); position: absolute; left: 0; width: 100%; text-shadow: 0 2px 2px #0002; }
.first-name { top: 21%; } .second-name { top: 56%; }
.cover-footer { position: absolute; bottom: 7%; width: 100%; margin: 0; font-size: 13px; line-height: 1.7; color: #e5d7b9; }
.wax-seal {
  position: absolute; top: 50%; left: 50%; width: 84px; height: 84px;
  transform: translate(-50%,-50%) translateZ(12px);
  border: none; border-radius: 48% 52% 49% 51% / 51% 48% 52% 49%;
  background: linear-gradient(135deg,#f3dca1 0%,#c5a062 45%,#e0bf7e 65%,#ac8244 100%);
  box-shadow: 0 5px 12px #0005,inset 1px 2px 2px #fff7,inset -2px -2px 4px #7c541c80;
  z-index: 3;
}
.seal-rim { position: absolute; inset: 7px; border: 1px solid #8e6b3c75; border-radius: 50%; box-shadow: inset 0 0 0 2px #f7dea238,0 0 0 1px #f7dea28c; }
.seal-monogram { display: block; position: relative; font: 600 29px/1 var(--serif); color: #22180a; text-shadow: 0 1px 0 #ffe9bb; }
.seal-monogram span { font-size: 16px; margin: 0 2px; font-weight: 400; }
.seal-shine { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg,transparent 25%,#fff4 48%,transparent 62%); opacity: 0; transition: opacity .3s; }
.wax-seal:hover .seal-shine { opacity: 1; }
.wax-seal:focus-visible { outline-color: #fff1c3; outline-offset: 7px; }
.opening-cue { display: flex; flex-direction: column; align-items: center; margin-top: 25px; font-size: 13px; color: var(--ink); }
.opening-cue p { margin: 0 0 6px; }
.opening-cue .icon { width: 17px; height: 17px; }
.direct-open { border: 0; background: transparent; font-size: 12px; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; min-height: 44px; margin-top: 3px; }
.is-opening .cover-intro,.is-opening .opening-cue,.is-opening .direct-open { opacity: 0; transition: opacity 280ms; pointer-events: none; }
.is-leaving { opacity: 0; pointer-events: none; }
.card-webgl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.webgl-active .fold-card { pointer-events: none; }
.cover-stage { touch-action: manipulation; }
.cover-stage,.invitation-shell { -webkit-text-size-adjust: 100%; }
.calendar-dialog { touch-action: pan-y; }
html,body { touch-action: pan-y; }
html.lenis,html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto!important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
/* Only used by browsers without Element.animate. */
.opening-css:not(.motion-reduced) .door-left { animation: open-left 1950ms 260ms cubic-bezier(.42,0,.16,1) forwards; }
.opening-css:not(.motion-reduced) .door-right { animation: open-right 1950ms 400ms cubic-bezier(.42,0,.16,1) forwards; }
.opening-css .wax-seal { opacity: 0; transition: opacity 400ms; }
.opening-css .inside-fold-shadow { opacity: 0; transition: opacity 2200ms; }
@keyframes open-left { from { transform: rotateY(0deg); } to { transform: rotateY(-154deg); } }
@keyframes open-right { from { transform: rotateY(0deg); } to { transform: rotateY(154deg); } }
/* The cover occupies the browser's visible viewport, including dynamic iOS sizing. */
.cover-stage { padding: 0; background: var(--navy); height: 100%; height: 100dvh; }
.cover-intro,.cover-surround,.direct-open { display: none; }
.fold-card { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.card-ground-shadow { display: none; }
.card-open-target {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3;
  padding: 0; border: 0; background: transparent; transform: translateZ(4px);
  cursor: pointer; -webkit-appearance: none; appearance: none;
}
.card-open-target:focus-visible { outline: 2px solid #f4e7c9; outline-offset: -12px; }
.card-open-target:active { filter: none; }
.wax-seal { display: grid; place-items: center; width: clamp(84px,14vmin,120px); height: clamp(84px,14vmin,120px); }
.card-open-target:hover .seal-shine { opacity: 1; }
.cover-label { top: max(10%,calc(env(safe-area-inset-top) + 28px)); font-size: clamp(21px,5vmin,42px); }
.cover-name { font-size: clamp(70px,18vmin,160px); }
.first-name { top: 22%; } .second-name { top: 58%; }
.cover-footer { bottom: max(14%,calc(env(safe-area-inset-bottom) + 86px)); font-size: clamp(13px,3vmin,20px); padding-inline: 30px; }
.door-frame { inset: max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom)); }
.door img { width: clamp(210px,55vmin,400px); }
.opening-cue {
  position: absolute; bottom: calc(env(safe-area-inset-bottom) + 20px); left: 0; right: 0;
  z-index: 4; margin: 0; color: #e5d7b9; pointer-events: none;
  font-size: clamp(12px,2.8vmin,16px); padding-inline: 20px; text-align: center;
}
@media(max-height:480px) {
  .cover-label { top: 5%; font-size: 19px; }
  .cover-name { font-size: clamp(42px,14vh,66px); }
  .first-name { top: 15%; } .second-name { top: 61%; }
  .cover-footer { display: none; }
  .wax-seal { width: 64px; height: 64px; }
  .opening-cue { bottom: calc(env(safe-area-inset-bottom) + 10px); font-size: 11px; }
}
@media(prefers-reduced-motion:reduce) { .door img { animation: none; } .motion-reduced .door { transform: rotateY(0deg); } }
@media print { .cover-stage { display: none!important; } }

/* Match the decorated physical insert when CSS 3D is used as the fallback. */
.card-inside { background: linear-gradient(135deg,#f7f1e3,var(--paper) 50%,#f6eedf); overflow: hidden; }
.card-inside>p,.inside-names,.inside-flourish { position: relative; z-index: 1; }
.inside-botanical { position: absolute; width: clamp(140px,33vmin,230px); opacity: .45; pointer-events: none; }
.inside-botanical-left { left: -44px; bottom: -12px; }
.inside-botanical-right { right: -44px; top: -12px; transform: rotate(180deg); opacity: .38; }

/* The names receive screen-reader focus after opening; they are not a control. */
#couple-names:focus,#couple-names:focus-visible { outline: none; box-shadow: none; }
.greeting { background: radial-gradient(ellipse at 50% 44%,#fcfaf4 28%,#f1f0e6 100%); }
.paper-botanical { width: 230px; opacity: .48; }
.paper-botanical-left { left: -93px; bottom: -16px; transform: rotate(4deg); }
.paper-botanical-right { right: -93px; top: -22px; transform: rotate(184deg); }
.couple-names { position: relative; z-index: 1; text-shadow: 0 1px 0 #fff,0 3px 15px #20364a0c; }
.greeting-close { max-width: 26ch; margin-inline: auto; }
@media(max-width:600px) {
  .paper-botanical { width: 210px; opacity: .45; }
  .paper-botanical-left { left: -70px; bottom: -12px; }
  .paper-botanical-right { right: -70px; top: -12px; }
}
@media print { .greeting { background: white; } }
.couple-composition { position: relative; isolation: isolate; margin: 34px 0 20px; }
.couple-composition .couple-names { margin: 0; }
.rings-stage { position: absolute; inset: -8px -14px; z-index: -1; opacity: .17; pointer-events: none; }
.rings-stage canvas { display: block; width: 100%; height: 100%; }
.ring-fallback { position: absolute; width: 84%; height: 84%; top: 8%; left: 8%; }
.ring-webgl-ready .ring-fallback { display: none; }
.names-awaiting .couple-names>span { opacity: 0; }
.names-reveal .couple-names>span { animation: name-arrival .85s cubic-bezier(.22,1,.36,1) both; }
.names-reveal .couple-names>span:nth-child(2) { animation-delay: .3s; }
.names-reveal .couple-names>span:nth-child(3) { animation-delay: .6s; }
.names-explicit-motion.names-reveal .couple-names>span { animation: name-arrival .85s cubic-bezier(.22,1,.36,1) both!important; }
.names-explicit-motion.names-reveal .couple-names>span:nth-child(2) { animation-delay: .3s!important; }
.names-explicit-motion.names-reveal .couple-names>span:nth-child(3) { animation-delay: .6s!important; }
@keyframes name-arrival { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media print { .rings-stage { display: none; } .couple-composition { margin: 12px 0; } }

/* Quiet material details: transform/opacity only, with no scaling of the card. */
.seal-shine { background: none; opacity: 1; overflow: hidden; transition: none; pointer-events: none; }
.seal-shine::before {
  content: ""; position: absolute; inset: -20% 0; opacity: 0;
  background: linear-gradient(100deg,transparent 20%,#fff8df55 49%,transparent 75%);
  animation: foil-reflection 9s ease-in-out infinite;
  animation-play-state: paused;
}
.cover-stage .door img { animation-play-state: paused; }
.cover-stage.ambient-running .door img,.ambient-running .seal-shine::before { animation-play-state: running; }
.is-opening .seal-shine { opacity: 0; }
.paper-botanical { animation: floral-breeze-left 12s ease-in-out infinite; animation-play-state: paused; transform-origin: 40% 85%; }
.paper-botanical-right { animation-name: floral-breeze-right; animation-delay: -5s; transform-origin: 60% 15%; }
.greeting.ambient-running .paper-botanical { animation-play-state: running; }
.paper-turn-light {
  position: absolute; inset: 20px -6px 0; pointer-events: none; opacity: 0; z-index: 2;
  background: linear-gradient(90deg,#c9bfa52b,transparent 18%,#fffdf659 70%,#c9bfa51c);
}
@keyframes foil-reflection {
  0%,8% { opacity: 0; transform: translateX(-100%); }
  12% { opacity: .65; }
  25% { opacity: 0; transform: translateX(100%); }
  100% { opacity: 0; transform: translateX(100%); }
}
@keyframes floral-breeze-left {
  0%,100% { transform: rotate(3.4deg); }
  50% { transform: rotate(4.6deg); }
}
@keyframes floral-breeze-right {
  0%,100% { transform: rotate(184.6deg); }
  50% { transform: rotate(183.4deg); }
}
@media print { .paper-turn-light { display: none; } }