/* Colours sampled from the supplied invitation. Layout uses live components. */
.invitation-cover {
  --inv-paper: #f9f6ed;
  --inv-fold: #f6f3ea;
  --inv-load-0: #a41013;
  --inv-load-1: #e94d51;
  --inv-load-2: #f49a9d;
  --inv-load-3: #fac5c7;
  --inv-load-4: #f9d0d1;
  --inv-load-5: #fac5c7;
  --inv-load-6: #f49a9d;
  --inv-load-7: #e94d51;
  container-type: size;
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--inv-paper);
  color: #000;
  perspective: 1200px;
}
.invitation-envelope { position: absolute; inset: 0; pointer-events: none; perspective: 1200px; }
.invitation-envelope-interior { position: absolute; inset: 0; background: var(--inv-fold); }
.invitation-envelope-side { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; }
.invitation-envelope-left { transform-origin: left center; }
.invitation-envelope-right { transform-origin: right center; }
.invitation-envelope-bottom { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 -8px 12px #423d2820); }
.invitation-envelope-bottom path { stroke-width: 3px; }
.invitation-envelope-flap {
  position: absolute; inset: 0 0 auto; height: 56%;
  transform-origin: center top; backface-visibility: hidden;
  filter: drop-shadow(0 13px 12px #423d2833);
}
.invitation-envelope-flap svg { display: block; width: 100%; height: 100%; overflow: visible; }
.invitation-heading { position: absolute; z-index: 2; top: 13.7%; left: 10.5%; right: 6%; }
.invitation-quote { display: block; height: 9.5cqw; font: 600 16cqw/.95 var(--sans); }
.invitation-heading h1 {
  margin: 0; color: #000;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 6.45cqw, 2rem); font-weight: 400; line-height: 1.15; letter-spacing: -.025em;
}
.invitation-heading p {
  margin: 3.6cqw 0 0; color: #000;
  font-family: var(--sans); font-size: clamp(.875rem, 3.94cqw, 1.0625rem);
  font-weight: 600; line-height: 1.35; letter-spacing: -.035em;
}
.invitation-seal {
  position: absolute; z-index: 3; top: 49.5%; left: 50%;
  width: min(59.45cqw, 35cqh); aspect-ratio: 453 / 478;
  display: block; padding: 0; border: 0; background: transparent;
  transform: translate(-50%, -50%); touch-action: manipulation;
  border-radius: 46%; transition: transform 250ms var(--ease); outline-offset: 5px;
  filter: drop-shadow(0 12px 12px #58241d42);
}
.invitation-seal-art { display: block; width: 100%; height: 100%; overflow: visible; }
.invitation-seal:focus-visible { outline: 2px solid #692d2f; }
.invitation-seal:active { transform: translate(-50%, -50%) scale(.96); }
.invitation-seal:disabled { cursor: default; }
@media (hover: hover) {
  .invitation-seal:not(:disabled):hover { transform: translate(-50%, -50%) scale(1.025) rotate(-1deg); }
}
.invitation-loading { position: absolute; z-index: 2; left: 50%; top: 70.5%; transform: translate(-50%, -50%); }
.invitation-loading[hidden] { display: none; }
.invitation-loading-wheel { display: block; width: 8.7cqw; height: 8.7cqw; max-width: 40px; max-height: 40px; }
.invitation-brand { position: absolute; z-index: 2; left: 5%; right: 5%; bottom: max(4.5%, env(safe-area-inset-bottom)); text-align: center; }
.invitation-wordmark { display: block; width: 26.4cqw; height: auto; margin: 0 auto; overflow: hidden; }
.invitation-brand p { margin: 1.5cqw 0 0; color: #161512; font: 600 clamp(.625rem, 2.4cqw, .75rem)/1.4 var(--sans); letter-spacing: -.025em; }
.invitation-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#app { position: relative; }
#phone:has(.invitation-cover) .grain, #phone.invitation-world .grain { display: none; }
.invitation-cover.is-opening {
  position: absolute; inset: 0; z-index: 5; background: transparent;
  pointer-events: none; animation: invitationTransition 2600ms linear both;
}
.is-opening .invitation-seal { animation: invitationSealLift 780ms var(--ease) both; }
.is-opening .invitation-envelope-interior { animation: invitationLiningFade 700ms 300ms ease both; }
.is-opening .invitation-envelope-flap { animation: invitationFlapLift 1250ms 200ms var(--easeIO) both; }
.is-opening .invitation-envelope-left { animation: invitationLeftFold 1150ms 420ms var(--easeIO) both; }
.is-opening .invitation-envelope-right { animation: invitationRightFold 1150ms 490ms var(--easeIO) both; }
.is-opening .invitation-heading { animation: invitationHeadingLeave 650ms 200ms var(--easeIO) both; }
.is-opening .invitation-envelope-bottom { animation: invitationPaperLeave 1350ms 450ms var(--easeIO) both; }
.is-opening .invitation-loading { animation: invitationLoaderLeave 2600ms linear both; }
.is-loading .invitation-loading-wheel { animation: invitationLoadingTurn 850ms linear infinite; }
.is-opening .invitation-brand { animation: invitationBrandLeave 850ms 370ms var(--easeIO) both; }
.invitation-celebration { position: absolute; z-index: 4; inset: 0; overflow: hidden; pointer-events: none; visibility: hidden; }
.is-opening .invitation-celebration { visibility: visible; }
.invitation-reveal-light {
  position: absolute; left: -45%; top: -25%; width: 65%; height: 150%; opacity: 0;
  background: linear-gradient(90deg, transparent, #fff4d931, #fff9eb75, transparent);
  transform: translateX(-100%) rotate(24deg); mix-blend-mode: screen;
}
.is-opening .invitation-reveal-light { animation: invitationLightSweep 1800ms 350ms var(--easeIO) both; }
.invitation-petal {
  position: absolute; top: 24%; left: var(--petal-x); width: var(--petal-size); height: calc(var(--petal-size) * 1.6);
  border-radius: 75% 12% 75% 18%; opacity: 0;
  background: linear-gradient(135deg, #fffdf5, #e9d8ba);
  box-shadow: inset 1px 1px 1px #fff8, 0 3px 4px #6d000024;
}
.is-opening .invitation-petal { animation: invitationPetalFall 1750ms var(--petal-delay) cubic-bezier(.18,.44,.5,1) both; }
@keyframes invitationTransition { from { opacity: 1; } to { opacity: 1; } }
@keyframes invitationSealLift {
  12% { transform: translate(-50%, -50%) scale(.94); }
  40% { transform: translate(-50%, -55%) scale(1.1) rotate(-6deg); filter: drop-shadow(0 24px 18px #58241d55); }
  100% { transform: translate(-50%, -88%) scale(.62) rotate(-20deg); opacity: 0; filter: drop-shadow(0 32px 24px #58241d00); }
}
@keyframes invitationLiningFade { to { opacity: 0; } }
@keyframes invitationFlapLift { 55% { opacity: 1; } to { transform: rotateX(165deg) translateY(-8%); opacity: 0; } }
@keyframes invitationLeftFold { to { transform: translateX(-42%) rotateY(-68deg); opacity: 0; } }
@keyframes invitationRightFold { to { transform: translateX(42%) rotateY(68deg); opacity: 0; } }
@keyframes invitationHeadingLeave { to { opacity: 0; transform: translateY(-45px) rotateX(28deg); } }
@keyframes invitationBrandLeave { to { opacity: 0; transform: translateY(80px); } }
@keyframes invitationPaperLeave { 55% { opacity: 1; } to { opacity: 0; transform: translateY(64%) rotateX(-24deg); } }
@keyframes invitationLoadingTurn { to { transform: rotate(360deg); } }
@keyframes invitationLoaderLeave { 0%, 43% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes invitationLightSweep {
  12% { opacity: .65; } 60% { opacity: .45; }
  100% { transform: translateX(350%) rotate(24deg); opacity: 0; }
}
@keyframes invitationPetalFall {
  0% { opacity: 0; transform: translate3d(0,-40px,0) rotate(0deg) rotateY(0deg); }
  18% { opacity: .8; }
  62% { opacity: .65; }
  100% { opacity: 0; transform: translate3d(var(--petal-drift),55cqh,0) rotate(var(--petal-turn)) rotateY(240deg); }
}

/* This same floral surface stays mounted from the reveal into guest entry. */
#phone.invitation-world, .wedding-onboarding {
  background-color: #b50d1c;
  background-image: url('https://fnnwwqcvrhmefilduzih.supabase.co/storage/v1/object/public/relive-showcase/showcase/assets/bg.webp');
  background-size: cover;
  background-position: center;
}
#phone.invitation-world #app { color: #f9f6ed; }
#phone.invitation-world #app > .center .mut, #phone.invitation-world .invite-copy .mut { color: #f9f6ed; }
#phone.invitation-world .btn.pri { color: #951320; background: #f9f6ed; border-color: #f9f6ed; }
#phone.invitation-world .invite-video, #phone.invitation-world .voice-card { color: var(--ch); }
.wedding-onboarding {
  position: relative; flex: 1 1 auto; width: 100%; height: 100%; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; color: #f9f6ed;
}
.invitation-pending { position: absolute; inset: 0; }
.wedding-entry { display: flex; padding: max(36px, env(safe-area-inset-top)) 7% max(36px, env(safe-area-inset-bottom)); }
.wedding-entry-panel {
  position: relative; width: 100%; max-width: 350px; flex: 0 0 auto; margin: auto; padding: 34px 25px 28px;
  border: 1px solid #f9f6ed66; border-radius: 120px 120px 14px 14px;
  background: #74081366; box-shadow: 0 20px 50px #5c00002e;
}
.wedding-entry-panel::before { content: ''; position: absolute; inset: 7px; border: 1px solid #f9f6ed26; border-radius: 112px 112px 9px 9px; pointer-events: none; }
.wedding-entry-rule { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 5px auto 23px; width: 64%; }
.wedding-entry-rule::before, .wedding-entry-rule::after { content: ''; width: 32px; height: 1px; background: #f9f6ed77; }
.wedding-entry-rule span { width: 6px; height: 6px; transform: rotate(45deg); border: 1px solid #f9f6ed; }
.wedding-entry h1 { font: 400 clamp(1.75rem, 7vw, 2.1rem)/1.18 var(--serif); text-align: center; margin: 0; outline: none; }
.wedding-entry-intro { text-align: center; color: #f9f6ed; font: 600 .8125rem/1.75 var(--sans); margin: 15px -4px 27px; }
.wedding-entry-field { margin: 0 0 18px; }
.wedding-entry-field label { display: block; font: 600 .8125rem/1.4 var(--sans); margin: 0 0 7px; }
.wedding-entry-field input {
  width: 100%; margin: 0; padding: 14px 13px; border: 1px solid #f9f6ed88; border-radius: 5px;
  background: #f9f6ed; color: #79131c; font: 600 1rem/1.3 var(--sans); box-shadow: 0 3px 8px #62000b15;
}
.wedding-entry-field input::placeholder { color: #855d5e; opacity: 1; }
.wedding-entry-field input:focus-visible { outline: 2px solid #f9f6ed; outline-offset: 3px; }
.wedding-entry-continue {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 16px; margin-top: 8px;
  border-radius: 5px; border: 1px solid #f9f6ed; color: #8e0f1b; background: #f9f6ed;
  font: 600 .9375rem/1.4 var(--sans); transition: transform .2s var(--ease), box-shadow .2s;
}
.wedding-entry-continue:hover { box-shadow: 0 6px 20px #58000b44; transform: translateY(-2px); }
.wedding-entry-continue:active { transform: translateY(0); }
.wedding-entry-continue:focus-visible, .wedding-entry-demo button:focus-visible { outline: 2px solid #f9f6ed; outline-offset: 4px; }
.wedding-entry-demo { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.wedding-entry-demo button { min-height: 32px; color: #f9f6ed; font: 600 .75rem/1.4 var(--sans); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: #f9f6ed66; }
.invitation-arrival { position: absolute; inset: 0; animation: invitationCrimsonReveal 1700ms 150ms var(--easeIO) both; }
.invitation-arrival .wedding-entry-panel { animation: invitationEntrySettle 1100ms 1350ms var(--ease) both; }
.invitation-arrival .wedding-entry-panel > * { animation: invitationEntryText 750ms var(--ease) both; animation-delay: 1500ms; }
.invitation-arrival .wedding-entry-panel > :nth-child(2) { animation-delay: 1550ms; }
.invitation-arrival .wedding-entry-panel > :nth-child(3) { animation-delay: 1620ms; }
.invitation-arrival .wedding-entry-panel > :nth-child(4) { animation-delay: 1690ms; }
.invitation-arrival .wedding-entry-panel > :nth-child(5) { animation-delay: 1760ms; }
.invitation-arrival .wedding-entry-panel > :nth-child(6) { animation-delay: 1830ms; }
.invitation-arrival .wedding-entry-panel > :nth-child(7) { animation-delay: 1850ms; }
@keyframes invitationCrimsonReveal { from { clip-path: circle(0% at 50% 49.5%); } to { clip-path: circle(125% at 50% 49.5%); } }
@keyframes invitationEntrySettle { from { opacity: 0; transform: translateY(42px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes invitationEntryText { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }
@media (max-width: 350px) {
  .wedding-entry { padding-left: 6%; padding-right: 6%; }
  .wedding-entry-panel { padding: 28px 20px 22px; }
  .wedding-entry-intro { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  .invitation-cover, .invitation-cover *, .invitation-cover *::after,
  .wedding-onboarding, .wedding-onboarding * { animation: none !important; transition: none !important; }
  .invitation-seal:not(:disabled):hover, .invitation-seal:active { transform: translate(-50%, -50%); }
  .invitation-celebration { display: none; }
  .invitation-arrival { clip-path: none; }
}