/* Shared motion and frame contract for non-Arunika invitation families. */
[data-invitation-motion="shared"] {
  --invitation-motion-accent: #237a63;
  --invitation-motion-line: rgb(35 122 99 / 24%);
  --invitation-motion-frame-radius: 1.25rem;
  --invitation-motion-frame-angle: -1deg;
  --invitation-motion-ornament-size: 7rem;
}

[data-invitation-text-fit] {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-wrap: balance;
  white-space: normal;
}

[data-invitation-motion="shared"] [data-invitation-text-fit],
.theme-arunika-editorial [data-invitation-text-fit] {
  overflow: visible;
}

[data-invitation-motion="shared"] .invitation-reorder-section {
  isolation: isolate;
  overflow: hidden;
  position: relative;
}

[data-invitation-motion="shared"] .invitation-reorder-section::before,
[data-invitation-motion="shared"] .invitation-reorder-section::after {
  content: "";
  pointer-events: none;
  position: absolute;
  z-index: 0;
}

[data-invitation-motion="shared"] .invitation-reorder-section::before {
  border: 1px solid var(--invitation-motion-line);
  border-radius: var(--invitation-motion-frame-radius);
  inset: .7rem;
  transform: rotate(var(--invitation-motion-frame-angle));
}

[data-invitation-motion="shared"] .invitation-reorder-section::after {
  border: 1px solid var(--invitation-motion-line);
  border-radius: 50%;
  height: var(--invitation-motion-ornament-size);
  right: calc(var(--invitation-motion-ornament-size) * -.35);
  top: calc(var(--invitation-motion-ornament-size) * -.35);
  width: var(--invitation-motion-ornament-size);
}

[data-invitation-motion="shared"] .invitation-reorder-section > * {
  position: relative;
  z-index: 1;
}

/* Category changes the geometry, while the family controls the colour. */
[data-invitation-motion="shared"][data-event-type="wedding"] {
  --invitation-motion-frame-radius: 1.5rem;
  --invitation-motion-frame-angle: -1deg;
}

[data-invitation-motion="shared"][data-event-type="birthday"] {
  --invitation-motion-frame-radius: 1rem;
  --invitation-motion-frame-angle: 0deg;
  --invitation-motion-ornament-size: 6rem;
}

[data-invitation-motion="shared"][data-event-type="khitanan"] {
  --invitation-motion-frame-radius: .75rem;
  --invitation-motion-frame-angle: 0deg;
  --invitation-motion-ornament-size: 5.5rem;
}

[data-invitation-motion="shared"][data-event-type="aqiqah"] {
  --invitation-motion-frame-radius: 1.25rem;
  --invitation-motion-frame-angle: 1deg;
  --invitation-motion-ornament-size: 6.5rem;
}

[data-invitation-motion="shared"][data-event-type="general"] {
  --invitation-motion-frame-radius: .5rem;
  --invitation-motion-frame-angle: 0deg;
  --invitation-motion-ornament-size: 5rem;
}

/* Family tokens keep the shared behaviour from flattening the visual identity. */
.theme-rimbun-editorial[data-invitation-motion="shared"] {
  --invitation-motion-accent: var(--rimbun-leaf, #719b78);
  --invitation-motion-line: var(--rimbun-line, rgb(63 88 70 / 24%));
}

.theme-senja-terakota[data-invitation-motion="shared"] {
  --invitation-motion-accent: var(--senja-clay, #b45f2a);
  --invitation-motion-line: var(--senja-line, rgb(116 53 24 / 24%));
  --invitation-motion-frame-radius: .35rem;
}

.starter-theme[data-invitation-motion="shared"] {
  --invitation-motion-accent: var(--starter-accent, #237a63);
  --invitation-motion-line: rgb(35 122 99 / 20%);
}

.theme-ai-family-draft[data-invitation-motion="shared"] {
  --invitation-motion-accent: #1d594d;
  --invitation-motion-line: rgb(29 89 77 / 22%);
}

/* Wedding preview baseline: the opening interaction is shared, while the invitation body keeps its family styling. */
.wedding-preview-shell {
  --wedding-opening-paper: #fbf8f1;
  --wedding-opening-ink: #302b2a;
  --wedding-opening-muted: #756b63;
  --wedding-opening-accent: #c59d67;
  --wedding-opening-accent-dark: #896a42;
  background: var(--wedding-opening-paper);
  color: var(--wedding-opening-ink);
  margin: 0 auto;
  max-width: 52rem;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  width: 100%;
  box-shadow: 0 1.5rem 4rem rgb(30 41 37 / 10%);
}
.wedding-preview-shell[data-wedding-family="rimbun-editorial"] {
  --wedding-opening-paper: #fffdf8;
  --wedding-opening-ink: #1e2925;
  --wedding-opening-muted: #5f6f68;
  --wedding-opening-accent: #3f755f;
  --wedding-opening-accent-dark: #173d32;
}
.wedding-preview-shell[data-wedding-family="senja-terakota"] {
  --wedding-opening-paper: #fffaf2;
  --wedding-opening-ink: #2f2925;
  --wedding-opening-muted: #71645b;
  --wedding-opening-accent: #b45f2a;
  --wedding-opening-accent-dark: #743518;
}
.wedding-preview-shell[data-wedding-family="fresh-botanical-starter"] {
  --wedding-opening-paper: #fffcf7;
  --wedding-opening-ink: #18352c;
  --wedding-opening-muted: #5f716a;
  --wedding-opening-accent: #237a63;
  --wedding-opening-accent-dark: #18352c;
}
.wedding-preview-shell[data-wedding-family="ai-family-draft"] {
  --wedding-opening-paper: #fffdf8;
  --wedding-opening-ink: #24332f;
  --wedding-opening-muted: #60716b;
  --wedding-opening-accent: #1d594d;
  --wedding-opening-accent-dark: #16483e;
}
.wedding-preview-shell[data-wedding-gated="true"] [data-wedding-content] { display: none; }
.wedding-preview-shell[data-wedding-gated="true"][data-wedding-opened="true"] [data-wedding-content] { display: block; }
.wedding-opening { align-items: center; background: var(--wedding-opening-paper); display: flex; flex-direction: column; isolation: isolate; justify-content: center; min-height: max(40rem, 100svh); overflow: hidden; padding: clamp(2.25rem, 7vw, 5rem) 1.2rem 8.5rem; position: relative; text-align: center; }
.wedding-opening::before { border: 1px solid color-mix(in srgb, var(--wedding-opening-accent) 45%, transparent); content: ""; inset: 1rem; pointer-events: none; position: absolute; z-index: 2; }
.wedding-opening::after { border: 1px solid color-mix(in srgb, var(--wedding-opening-accent) 30%, transparent); border-radius: 50%; content: ""; height: clamp(16rem, 46vw, 28rem); pointer-events: none; position: absolute; right: -10rem; top: -11rem; width: clamp(16rem, 46vw, 28rem); z-index: 2; }
.wedding-opening-media, .wedding-opening-wash { display: block; height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.wedding-opening-media { filter: saturate(.9) contrast(.96); object-position: center; transform: scale(1.03); z-index: 0; }
.wedding-preview-shell[data-wedding-family="nusa-geometrik"] .wedding-opening-media { object-position: center 42%; transform: scale(1.01); }
.wedding-opening-wash { background: color-mix(in srgb, var(--wedding-opening-paper) 78%, transparent); z-index: 1; }
.wedding-opening-couple { aspect-ratio: 1; border: clamp(.35rem, 1vw, .65rem) solid var(--wedding-opening-paper); border-radius: 50%; box-shadow: 0 0 0 .18rem var(--wedding-opening-accent), 0 1.25rem 2.8rem rgb(20 35 29 / 22%); display: block; flex: 0 0 auto; height: clamp(11.5rem, 43vw, 22rem); margin: 0 auto clamp(1.25rem, 4vw, 2.5rem); object-fit: cover; position: relative; width: clamp(11.5rem, 43vw, 22rem); z-index: 3; }
.wedding-preview-shell[data-wedding-family="nusa-geometrik"] .wedding-opening-couple { object-position: right center; }
.wedding-opening-copy { align-items: center; background: color-mix(in srgb, var(--wedding-opening-paper) 91%, transparent); border: 1px solid color-mix(in srgb, var(--wedding-opening-accent) 55%, transparent); border-radius: 1.5rem; box-shadow: 0 1rem 2.5rem rgb(20 35 29 / 12%); display: flex; flex-direction: column; max-width: 24rem; padding: 1.35rem 1.1rem 1.5rem; position: relative; width: 100%; z-index: 3; }
.wedding-opening-kicker { color: var(--wedding-opening-accent-dark); font-size: .72rem; font-weight: 700; letter-spacing: .2em; margin: 0 0 .9rem; text-transform: uppercase; }
.wedding-opening h1 { color: var(--wedding-opening-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.45rem, 9vw, 5.8rem); font-weight: 400; letter-spacing: -.035em; line-height: .94; margin: 0 auto 1.2rem; max-width: 12ch; overflow-wrap: anywhere; text-wrap: balance; }
.wedding-opening h1 > span { color: var(--wedding-opening-accent); display: block; font-size: .62em; font-style: italic; line-height: 1.15; }
.wedding-opening-recipient { color: var(--wedding-opening-accent-dark); margin: .5rem 0; }
.wedding-opening-date { color: var(--wedding-opening-accent-dark); font-size: .85rem; font-weight: 700; letter-spacing: .16em; margin: .8rem 0 0; }
.wedding-opening-button { align-items: center; background: var(--wedding-opening-ink); border: 2px solid var(--wedding-opening-ink); border-radius: 999px; color: #fff; display: inline-flex; font: inherit; font-weight: 700; gap: .8rem; justify-content: center; margin-top: 1.35rem; min-height: 52px; padding: .75rem 1.35rem; width: min(100%, 18rem); }
.wedding-opening-button:hover { background: var(--wedding-opening-accent-dark); border-color: var(--wedding-opening-accent-dark); color: #fff; }
.wedding-opening-button:focus-visible, .wedding-opening-audio-button:focus-visible, .wedding-quick-link:focus-visible { outline: 3px solid var(--wedding-opening-accent); outline-offset: 3px; }
.wedding-opening-audio-actions { align-items: center; display: flex; flex-wrap: wrap; gap: .65rem; justify-content: center; margin-top: .7rem; }
.wedding-opening-audio-button { align-items: center; background: color-mix(in srgb, var(--wedding-opening-paper) 90%, transparent); border: 1px solid var(--wedding-opening-accent-dark); color: var(--wedding-opening-accent-dark); display: inline-flex; font: inherit; font-size: .82rem; font-weight: 700; gap: .4rem; justify-content: center; min-height: 44px; padding: .65rem .9rem; }
.wedding-opening-audio-button:hover { background: var(--wedding-opening-accent); color: #fff; }
.wedding-opening-status { color: var(--wedding-opening-muted); font-size: .86rem; margin: .9rem 0 0; max-width: 24rem; }
.wedding-quick-nav { align-items: center; background: rgb(48 43 42 / 94%); border-radius: 999px; bottom: max(1rem, env(safe-area-inset-bottom)); box-shadow: 0 .5rem 1.5rem rgb(48 43 42 / 18%); color: #fff; display: flex; gap: .2rem; left: 50%; max-width: calc(100vw - 1rem); padding: .35rem .45rem; position: fixed; transform: translateX(-50%); z-index: 20; }
.wedding-quick-link { align-items: center; background: transparent; border: 0; border-radius: 999px; color: #fff; display: inline-flex; flex-direction: column; font: inherit; font-size: .65rem; font-weight: 700; gap: .05rem; justify-content: center; min-height: 48px; min-width: 52px; padding: .35rem .5rem; text-decoration: none; }
.wedding-quick-link > span:first-child { font-size: 1.25rem; line-height: 1; }
.wedding-quick-link:hover, .wedding-quick-link:focus-visible { background: var(--wedding-opening-accent); color: #fff; }
.wedding-scroll-toggle { background: var(--wedding-opening-accent); }

@media (max-width: 47.99rem) {
  .wedding-opening { justify-content: flex-start; min-height: max(32rem, 100svh); padding: 2.25rem .6rem 7rem; }
  .wedding-opening::before { inset: .65rem; }
  .wedding-opening-copy { max-width: min(100%, 21rem); padding: .75rem .7rem .9rem; }
  .wedding-opening-couple { height: clamp(8.5rem, 39vw, 12rem); margin-bottom: .8rem; width: clamp(8.5rem, 39vw, 12rem); }
  .wedding-opening-kicker { font-size: .62rem; margin-bottom: .55rem; }
  .wedding-opening h1 { font-size: clamp(1.95rem, 10vw, 3.2rem); margin-bottom: .65rem; }
  .wedding-opening-date { font-size: .75rem; margin-top: .45rem; }
  .wedding-opening-button { margin-top: .8rem; min-height: 46px; }
  .wedding-opening-audio-actions { gap: .4rem; margin-top: .5rem; }
  .wedding-opening-audio-button { font-size: .72rem; min-height: 40px; padding: .45rem .65rem; }
  .wedding-opening-status { font-size: .72rem; margin-top: .55rem; }
  .wedding-quick-link { min-width: 50px; }
}

@media (prefers-reduced-motion: reduce) {
  .wedding-preview-shell *, .wedding-preview-shell *::before, .wedding-preview-shell *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

[data-invitation-motion="shared"][data-invitation-motion-ready="true"][data-motion-enabled="true"] [data-invitation-reveal] {
  opacity: 0;
  transform: translate3d(0, 1rem, 0);
  transition: opacity 560ms ease var(--invitation-reveal-delay, 0ms), transform 560ms cubic-bezier(.22, .61, .36, 1) var(--invitation-reveal-delay, 0ms);
}

[data-invitation-motion="shared"][data-invitation-motion-ready="true"][data-motion-enabled="true"] [data-invitation-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (max-width: 47.99rem) {
  [data-invitation-motion="shared"] .invitation-reorder-section::before {
    inset: .45rem;
  }

  [data-invitation-motion="shared"] .invitation-reorder-section::after {
    height: calc(var(--invitation-motion-ornament-size) * .78);
    width: calc(var(--invitation-motion-ornament-size) * .78);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-invitation-motion="shared"] .invitation-reorder-section::before,
  [data-invitation-motion="shared"] .invitation-reorder-section::after {
    transform: none;
  }

  [data-invitation-motion="shared"] [data-invitation-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}