* {
  box-sizing: border-box;
}

:root {
  --bg-dark: #182119;
  --sage-1: #5d755f;
  --sage-2: #768e78;
  --sage-3: #dfe8dd;
  --sage-4: #eef4ec;
  --paper-1: #fffdfa;
  --paper-2: #f7f5ef;
  --paper-3: #ebe9e1;
  --ink: #2d3b31;
  --soft-white: rgba(255, 255, 255, 0.24);
  --soft-border: rgba(93, 117, 95, 0.18);
  --shadow: 0 24px 60px rgba(10, 16, 12, 0.22);
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.12), transparent 26rem),
    linear-gradient(135deg, #121814 0%, #203024 55%, #0e1310 100%);
  font-family: "Noto Naskh Arabic", "Amiri", Georgia, serif;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: var(--ink);
}

button,
input,
select {
  font: inherit;
}

.page {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 18px;
}

.invitation-shell {
  width: min(92vw, 430px);
  aspect-ratio: 9 / 19.5;
  display: grid;
}

.screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 34px;
  background: #0d0f0d;
  box-shadow: var(--shadow);
  isolation: isolate;
}

.video-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: #000;
}

.invitation-video {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity .7s ease, transform 1.25s cubic-bezier(.18,.76,.19,1);
}

.invitation-video-backdrop {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.16);
  filter: blur(20px) saturate(1.02);
}

.invitation-video-main {
  inset: 50% auto auto 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%) scale(1.03);
}

.video-backdrop-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  background:
    linear-gradient(180deg, rgba(6, 10, 8, .44), rgba(6, 10, 8, .18) 22%, rgba(6, 10, 8, .16) 72%, rgba(6, 10, 8, .42));
  transition: opacity .55s ease;
}

.screen.video-visible .invitation-video,
.screen.video-visible .video-backdrop-overlay {
  opacity: 1;
}

.screen.video-visible .invitation-video-main {
  transform: translate(-50%, -50%) scale(1);
}

.screen.video-visible .invitation-video-backdrop {
  transform: scale(1.2);
}

.envelope-button {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  perspective: 1800px;
  -webkit-tap-highlight-color: transparent;
}

.envelope {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: block;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.72), transparent 18rem),
    linear-gradient(160deg, #fffefa 0%, #f7f7f0 44%, #ececdf 100%);
  transform-style: preserve-3d;
  transition: opacity .55s ease 1.25s, transform .85s ease 1.15s;
}

.paper-grain,
.botanical-print,
.botanical-emblem,
.flap {
  position: absolute;
}

.paper-grain {
  inset: -6%;
  opacity: .12;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle, rgba(85, 110, 86, .08) 0 1px, transparent 1.8px),
    linear-gradient(55deg, rgba(255,255,255,.38) 0 1px, transparent 1px);
  background-size: 18px 18px, 36px 36px;
}

.botanical-print {
  inset: 0;
  opacity: .78;
  mix-blend-mode: multiply;
  background-image: url("assets/envelope-pattern.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  filter: saturate(1.02) contrast(1.02);
}

.botanical-emblem {
  left: 50%;
  top: 18%;
  width: 72%;
  height: 24%;
  transform: translateX(-50%);
  opacity: .12;
  background: radial-gradient(circle at center, rgba(113,140,115,.35), transparent 58%);
}

.flap {
  display: block;
  overflow: hidden;
  background:
    linear-gradient(160deg, rgba(255,255,255,.78), rgba(248,248,241,.86) 42%, rgba(236,237,227,.92) 100%),
    url("assets/envelope-pattern.png") center top / cover no-repeat;
  background-blend-mode: screen, multiply;
  box-shadow:
    inset 0 0 40px rgba(255,255,255,.55),
    0 0 0 1px rgba(105,140,109,.09),
    0 16px 34px rgba(20,30,20,.09);
  transform-style: preserve-3d;
  transition:
    transform 1.35s cubic-bezier(.18,.84,.14,1),
    filter 1s ease,
    opacity .75s ease;
}

.flap::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .08;
  background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0));
}

.flap-top {
  left: -11%;
  top: -14%;
  width: 122%;
  height: 55%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0%;
  z-index: 4;
}

.flap-left {
  left: -24%;
  top: 0;
  width: 82%;
  height: 100%;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform-origin: 0 50%;
  z-index: 5;
}

.flap-right {
  right: -24%;
  top: 0;
  width: 82%;
  height: 100%;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  transform-origin: 100% 50%;
  z-index: 5;
}

.flap-bottom {
  left: -8%;
  bottom: -12%;
  width: 116%;
  height: 58%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  transform-origin: 50% 100%;
  z-index: 6;
}

.wax-seal {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 47%;
  width: clamp(96px, 27vw, 126px);
  height: clamp(96px, 27vw, 126px);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.92) 0 8%, transparent 20%),
    radial-gradient(circle at 72% 78%, rgba(88, 124, 92, .24) 0 14%, transparent 25%),
    radial-gradient(circle, #ffffff 0 32%, #eff4ec 54%, #d8e4d6 68%, #9ab19b 100%);
  box-shadow:
    0 14px 30px rgba(20, 30, 20, .18),
    inset 0 3px 10px rgba(255,255,255,.76),
    inset 0 -8px 12px rgba(85,118,88,.24);
  transition: transform .72s cubic-bezier(.2,.8,.18,1), opacity .4s ease, filter .72s ease;
}

.wax-seal::before,
.wax-seal::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: inherit;
  border: 2px solid rgba(104, 140, 107, .28);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.48);
}

.wax-seal::after {
  inset: 19%;
  border-color: rgba(255,255,255,.5);
  box-shadow: none;
}

.seal-glow {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(144, 189, 147, .22), transparent 66%);
  animation: pulse 2.4s ease-in-out infinite;
}

.monogram {
  position: relative;
  z-index: 2;
  font-family: "Playfair Display", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.35rem, 4vw, 1.8rem);
  font-weight: 700;
  letter-spacing: .04em;
  color: #446648;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

.event-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(26px, 7vw, 40px);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  text-align: center;
  pointer-events: none;
}

.line {
  margin: 0;
  color: #fff;
  text-shadow: 0 4px 18px rgba(0,0,0,.42);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .85s ease, transform .85s cubic-bezier(.18,.76,.18,1);
}

.line-1 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.55rem, 5.3vw, 2.05rem);
  font-style: italic;
  font-weight: 700;
  letter-spacing: .03em;
}

.line-2,
.line-3 {
  font-size: clamp(.92rem, 3.4vw, 1.05rem);
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.screen.show-copy .line-1,
.screen.show-copy .line-2,
.screen.show-copy .line-3 {
  opacity: 1;
  transform: translateY(0);
}

.screen.show-copy .line-2 {
  transition-delay: .8s;
}

.screen.show-copy .line-3 {
  transition-delay: 1.6s;
}

.screen.overlay-visible .event-copy {
  opacity: .14;
  transition: opacity .8s ease;
}

.story-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility .9s ease;
  pointer-events: none;
  overflow: hidden;
}

.story-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.story-overlay-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(7px) saturate(1.02);
  -webkit-backdrop-filter: blur(7px) saturate(1.02);
}

.story-overlay-topfade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 110px;
  z-index: 1;
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0));
  pointer-events: none;
}

.story-scroll {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  scroll-snap-type: y proximity;
  scrollbar-width: none;
  padding-top: 24px;
  padding-bottom: 24px;
}

.story-scroll::-webkit-scrollbar {
  display: none;
}

.progress-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 3px;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(93,117,95,.9), rgba(255,255,255,.95), rgba(93,117,95,.9));
}

.story-section {
  position: relative;
  min-height: 100dvh;
  padding: 26px 20px 34px;
  display: grid;
  place-items: center;
  scroll-snap-align: start;
}

.story-section::before,
.story-section::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  opacity: .45;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: multiply;
}

.story-section::before {
  top: 18px;
  left: -24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23758b76' stroke-width='2' stroke-linecap='round' opacity='0.78'%3E%3Cpath d='M18 160c18-44 39-76 92-124'/%3E%3Cpath d='M38 135c14-28 18-56 10-88'/%3E%3Cpath d='M58 98c22 0 39-10 53-30'/%3E%3Cpath d='M90 65c26 2 45-9 62-31'/%3E%3Cellipse cx='43' cy='101' rx='8' ry='18' transform='rotate(-46 43 101)'/%3E%3Cellipse cx='76' cy='72' rx='8' ry='18' transform='rotate(44 76 72)'/%3E%3Cellipse cx='116' cy='50' rx='7' ry='15' transform='rotate(-40 116 50)'/%3E%3Cellipse cx='145' cy='42' rx='7' ry='15' transform='rotate(46 145 42)'/%3E%3C/g%3E%3C/svg%3E");
}

.story-section::after {
  bottom: 18px;
  right: -24px;
  transform: rotate(180deg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%23758b76' stroke-width='2' stroke-linecap='round' opacity='0.78'%3E%3Cpath d='M18 160c18-44 39-76 92-124'/%3E%3Cpath d='M38 135c14-28 18-56 10-88'/%3E%3Cpath d='M58 98c22 0 39-10 53-30'/%3E%3Cpath d='M90 65c26 2 45-9 62-31'/%3E%3Cellipse cx='43' cy='101' rx='8' ry='18' transform='rotate(-46 43 101)'/%3E%3Cellipse cx='76' cy='72' rx='8' ry='18' transform='rotate(44 76 72)'/%3E%3Cellipse cx='116' cy='50' rx='7' ry='15' transform='rotate(-40 116 50)'/%3E%3Cellipse cx='145' cy='42' rx='7' ry='15' transform='rotate(46 145 42)'/%3E%3C/g%3E%3C/svg%3E");
}

.section-card {
  width: 100%;
  max-width: 370px;
  padding: 34px 24px;
  text-align: center;
  position: relative;
  background: rgba(255,255,255,.40);
  border: 1px solid rgba(93,117,95,.16);
  box-shadow: 0 20px 58px rgba(28, 35, 28, .10), inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.section-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(93,117,95,.14);
  pointer-events: none;
}

.section-cover .hero-card {
  min-height: 76svh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
}

.eyebrow {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: .92rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #708772;
}

.hero-names {
  display: grid;
  gap: 6px;
  justify-items: center;
  line-height: 1;
}

.arabic-name {
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: clamp(4rem, 16vw, 5.8rem);
  color: #344139;
}

.amp {
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 8vw, 2.8rem);
  color: #5f765f;
}

.english-names {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: rgba(53, 65, 59, .7);
}

.scroll-note {
  margin: 8px 0 0;
  font-size: .92rem;
  color: rgba(53, 65, 59, .72);
}

.arabic-title {
  margin: 0 auto;
  max-width: 280px;
  font-size: 2.35rem;
  line-height: 1.45;
  font-family: "Noto Naskh Arabic", "Amiri", serif;
  font-weight: 500;
  color: #334038;
}

.arabic-title.small {
  font-size: 1.85rem;
}

.divider {
  width: 170px;
  height: 1px;
  margin: 24px auto;
  background: linear-gradient(90deg, transparent, rgba(93,117,95,.72), transparent);
  position: relative;
}

.divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #718679;
  transform: translate(-50%, -50%);
}

.script-names {
  margin: 0;
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: 3rem;
  line-height: 1.1;
  color: #344139;
}

.script-names span {
  font-family: "Playfair Display", Georgia, serif;
  font-size: .6em;
}

.script-names.ending {
  margin-top: 16px;
}

.date-big {
  margin: 8px 0 6px;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 5rem;
  line-height: .95;
  color: #344039;
}

.date-month {
  margin: 0;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.08rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #607560;
}

.detail-grid {
  display: grid;
  gap: 14px;
  width: 100%;
  margin-top: 24px;
}

.detail-grid.two-cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.detail-grid div {
  display: grid;
  gap: 6px;
  padding: 14px 12px;
  background: rgba(255,255,255,.34);
  border: 1px solid rgba(93,117,95,.12);
}

.detail-label {
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #728773;
}

.detail-grid strong,
.program-item strong,
.count-item strong {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.16rem;
  color: #314036;
}

.countdown-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.count-item {
  display: grid;
  gap: 6px;
  padding: 14px 6px;
  background: rgba(255,255,255,.35);
  border: 1px solid rgba(93,117,95,.12);
}

.count-item strong {
  font-size: 1.6rem;
}

.count-item span,
.body-copy {
  color: #566a58;
}

.body-copy {
  margin: 18px auto 0;
  max-width: 290px;
  font-size: 1rem;
  line-height: 1.9;
}

.body-copy.wide {
  max-width: 320px;
}

.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  margin-top: 22px;
  border: 1px solid rgba(93,117,95,.28);
  background: rgba(255,255,255,.66);
  color: #314036;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 14px 28px rgba(28,35,28,.09);
}

.button-link.full {
  width: 100%;
}

.button-link.ghost {
  background: rgba(255,255,255,.36);
}

.program-list {
  margin-top: 24px;
  display: grid;
  gap: 12px;
}

.program-item {
  display: grid;
  grid-template-columns: 118px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 14px;
  background: rgba(255,255,255,.34);
  border: 1px solid rgba(93,117,95,.12);
  text-align: start;
}

.program-item span {
  font-size: 1rem;
  color: #4e6151;
}

.rsvp-form {
  margin-top: 22px;
  display: grid;
  gap: 14px;
  text-align: start;
}

.rsvp-form label {
  display: grid;
  gap: 8px;
}

.rsvp-form span {
  font-size: .98rem;
  color: #546756;
}

.rsvp-form input,
.rsvp-form select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid rgba(93,117,95,.18);
  background: rgba(255,255,255,.55);
  color: #2f3c33;
  outline: none;
}

.closing-title {
  margin: 0;
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: 3rem;
  font-weight: 400;
  color: #344139;
}

.reveal {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  filter: blur(2px);
  transition: opacity .95s cubic-bezier(.22,1,.36,1), transform 1.05s cubic-bezier(.16,1,.3,1), filter .85s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.screen.is-opening .wax-seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.7) rotate(-18deg);
  filter: blur(2px);
}

.screen.is-opening .flap-top {
  transform: rotateX(142deg) translateY(-10%) translateZ(6px);
}

.screen.is-opening .flap-left {
  transform: rotateY(-150deg) translateX(-7%) translateZ(2px);
  transition-delay: .08s;
}

.screen.is-opening .flap-right {
  transform: rotateY(150deg) translateX(7%) translateZ(2px);
  transition-delay: .08s;
}

.screen.is-opening .flap-bottom {
  transform: rotateX(-116deg) translateY(8%) translateZ(-4px);
  transition-delay: .12s;
}

.screen.video-visible .envelope {
  opacity: 0;
  transform: scale(1.035);
  pointer-events: none;
}

@keyframes pulse {
  0%, 100% { opacity: .28; transform: scale(.95); }
  50% { opacity: .72; transform: scale(1.08); }
}

@media (max-width: 430px) {
  .page {
    padding: 0;
  }

  .invitation-shell {
    width: 100vw;
    height: 100svh;
    max-width: none;
    aspect-ratio: auto;
  }

  .screen {
    border-radius: 0;
  }
}


/* Requested update: remove the animated text layer completely. */
.event-copy {
  display: none !important;
}

/* Critical scroll fix: after the envelope opens, the transparent button must stop
   capturing wheel/touch events above the scrolling invitation overlay. */
.screen.video-visible .envelope-button,
.screen.overlay-visible .envelope-button {
  pointer-events: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Stronger scrolling support for the overlay sections. */
.story-overlay.is-visible {
  overflow: hidden !important;
  pointer-events: auto !important;
}

.story-overlay.is-visible .story-scroll {
  overflow-y: scroll !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
  height: 100% !important;
  max-height: 100% !important;
  pointer-events: auto !important;
}


/* Faster reveal + smoother manual scrolling update */
.story-scroll {
  scroll-snap-type: none !important;
  scroll-behavior: smooth !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
}

.story-section {
  scroll-snap-align: none !important;
}

/* Keep the invisible envelope from blocking scroll as soon as opening begins/video appears. */
.screen.is-opening .envelope-button,
.screen.video-visible .envelope-button,
.screen.overlay-visible .envelope-button {
  pointer-events: none !important;
}

/* Make overlay scroll area the highest interactive layer. */
.story-overlay.is-visible {
  z-index: 20 !important;
  pointer-events: auto !important;
}

.story-overlay.is-visible .story-scroll {
  pointer-events: auto !important;
}


/* Admin-enabled timing and botanical envelope overrides */
.flap {
  transition:
    transform var(--envelope-open-ms, 2350ms) cubic-bezier(.18,.84,.14,1),
    filter 1s ease,
    opacity .75s ease !important;
}

.envelope {
  transition:
    opacity .55s ease calc(var(--envelope-open-ms, 2350ms) - 150ms),
    transform .85s ease calc(var(--envelope-open-ms, 2350ms) - 250ms) !important;
}

.botanical-print {
  background-image: var(--envelope-pattern-url) !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  opacity: .78 !important;
}

.flap {
  background:
    linear-gradient(160deg, rgba(255,255,255,.78), rgba(248,248,241,.86) 42%, rgba(236,237,227,.92) 100%),
    var(--envelope-pattern-url) center top / cover no-repeat !important;
  background-blend-mode: screen, multiply !important;
}

.event-copy {
  display: none !important;
}

.screen.is-opening .envelope-button,
.screen.video-visible .envelope-button,
.screen.overlay-visible .envelope-button {
  pointer-events: none !important;
}

.story-overlay-bg {
  background: rgba(255,255,255,var(--overlay-bg-opacity, .23)) !important;
}

.story-scroll {
  scroll-snap-type: none !important;
  scroll-behavior: smooth !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
  touch-action: pan-y !important;
}

.story-section {
  scroll-snap-align: none !important;
}

.story-overlay.is-visible {
  z-index: 20 !important;
  pointer-events: auto !important;
  overflow: hidden !important;
}

.story-overlay.is-visible .story-scroll {
  pointer-events: auto !important;
  overflow-y: auto !important;
}

.phone-status,
.form-message {
  display: block;
  min-height: 1.2em;
  font-size: .88rem;
  color: #5f765f;
  margin-top: 4px;
}

.phone-status.error,
.form-message.error {
  color: #8a3b35;
}

.phone-status.success,
.form-message.success {
  color: #416d47;
}

.rsvp-form button:disabled,
.rsvp-form select:disabled {
  opacity: .58;
  cursor: not-allowed;
}


/* RSVP attendance choice and gift block */
.attendance-options {
  display: grid;
  gap: 10px;
  text-align: start;
}

.attendance-options > span {
  font-size: .98rem;
  color: #546756;
  font-weight: 700;
}

.attendance-options .choice {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(93,117,95,.18);
  background: rgba(255,255,255,.42);
  cursor: pointer;
}

.attendance-options input {
  width: auto;
  height: auto;
  margin: 0;
}

.attendance-options strong {
  font-size: .96rem;
  color: #314036;
}

.gift-box {
  width: 100%;
  margin: 24px 0 18px;
  padding: 20px 16px;
  border: 1px solid rgba(93,117,95,.16);
  background: rgba(255,255,255,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38);
}

.gift-qr {
  display: block;
  width: min(190px, 72%);
  height: auto;
  margin: 18px auto 0;
  border-radius: 14px;
  border: 1px solid rgba(93,117,95,.14);
  background: #fff;
  padding: 10px;
}


/* ===== Updated final envelope design based on the provided reference ===== */
.envelope {
  background:
    linear-gradient(160deg, #f8f5f0 0%, #f7f3ee 44%, #f2eee7 100%) !important;
}

.paper-grain {
  inset: 0 !important;
  opacity: .07 !important;
  mix-blend-mode: multiply !important;
  background-image:
    radial-gradient(circle, rgba(140, 130, 120, .10) 0 1px, transparent 1.8px),
    linear-gradient(135deg, rgba(255,255,255,.55) 0 1px, transparent 1px) !important;
  background-size: 16px 16px, 38px 38px !important;
}

.botanical-print {
  inset: 0 !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0) 26%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.22), transparent 22%) !important;
  filter: none !important;
}

.botanical-emblem {
  display: none !important;
}

.flap {
  background:
    linear-gradient(160deg, rgba(255,255,255,.96), rgba(246,243,238,.98) 42%, rgba(239,233,224,.98) 100%) !important;
  background-blend-mode: normal !important;
  box-shadow:
    inset 0 0 24px rgba(255,255,255,.56),
    0 0 0 1px rgba(168,155,145,.10),
    0 14px 28px rgba(40,34,30,.08) !important;
}

.flap::before {
  opacity: .12 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0)) !important;
}

.flap-top {
  left: -8% !important;
  top: -11% !important;
  width: 116% !important;
  height: 53% !important;
}

.flap-left, .flap-right {
  width: 78% !important;
}

.flap-bottom {
  bottom: -10% !important;
  width: 112% !important;
}

.wax-seal {
  top: 48% !important;
  width: clamp(102px, 28vw, 132px) !important;
  height: clamp(102px, 28vw, 132px) !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.30) 0 8%, transparent 20%),
    radial-gradient(circle at 70% 72%, rgba(108, 72, 80, .24) 0 14%, transparent 26%),
    radial-gradient(circle, #9f7f84 0 35%, #937277 58%, #88686d 76%, #7b5d61 100%) !important;
  box-shadow:
    0 14px 28px rgba(53,38,41,.22),
    inset 0 3px 9px rgba(255,255,255,.18),
    inset 0 -8px 12px rgba(93,67,73,.34) !important;
}

.wax-seal::before,
.wax-seal::after {
  display: none !important;
}

.seal-glow {
  display: none !important;
}

.monogram {
  color: rgba(76, 52, 58, .96) !important;
  text-shadow: none !important;
  font-size: clamp(1.2rem, 3.8vw, 1.55rem) !important;
  font-style: normal !important;
  letter-spacing: .03em !important;
}

.open-hint {
  position: absolute;
  left: 50%;
  bottom: 38px;
  z-index: 9;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 156px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(125, 103, 109, .22);
  background: rgba(255,255,255,.72);
  color: #73595f;
  font-family: "Playfair Display", Georgia, serif;
  font-size: .95rem;
  letter-spacing: .04em;
  box-shadow: 0 12px 24px rgba(42,34,34,.08);
  pointer-events: none;
}

.screen.video-visible .open-hint,
.screen.overlay-visible .open-hint,
.screen.is-opening .open-hint {
  opacity: 0;
  visibility: hidden;
}

.scroll-note {
  margin-bottom: 0 !important;
}

.scroll-arrow {
  width: 28px;
  height: 28px;
  border-right: 2px solid rgba(83, 72, 70, .55);
  border-bottom: 2px solid rgba(83, 72, 70, .55);
  transform: rotate(45deg);
  margin-top: 10px;
  animation: bounceDown 1.5s ease-in-out infinite;
}

@keyframes bounceDown {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .45; }
  50% { transform: rotate(45deg) translate(5px, 5px); opacity: 1; }
}

.attendance-options input[type="radio"] {
  appearance: auto;
  -webkit-appearance: radio;
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 18px;
  accent-color: #81666b;
}

@media (max-width: 640px) {
  .attendance-options .choice {
    padding: 10px 12px !important;
    gap: 8px !important;
  }

  .attendance-options input[type="radio"] {
    width: 14px !important;
    height: 14px !important;
    flex-basis: 14px;
  }

  .attendance-options strong {
    font-size: .88rem !important;
  }

  .open-hint {
    bottom: 26px;
    min-width: 138px;
    min-height: 38px;
    font-size: .88rem;
  }
}


/* ===== Exact-style envelope refinement based on user reference ===== */
.envelope-button {
  perspective: 2000px;
}

.envelope {
  background: #f5f2ed !important;
  box-shadow: inset 0 0 0 1px rgba(195, 187, 179, .25);
}

.envelope::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,.015), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 35%);
  pointer-events: none;
  z-index: 0;
}

.paper-grain {
  opacity: .06 !important;
  inset: -2% !important;
}

.botanical-print,
.botanical-emblem {
  display: none !important;
}

.flap {
  background: linear-gradient(180deg, #f9f6f1 0%, #f2eee8 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(184, 174, 166, .16),
    0 10px 22px rgba(45, 35, 32, .05) !important;
}

.flap::before {
  opacity: .14 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0)) !important;
}

/* Standard envelope geometry closer to the reference image */
.flap-top {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 50% !important;
  clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
  z-index: 4 !important;
}

.flap-left {
  left: 0 !important;
  top: 0 !important;
  width: 62% !important;
  height: 100% !important;
  clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
  z-index: 3 !important;
}

.flap-right {
  right: 0 !important;
  top: 0 !important;
  width: 62% !important;
  height: 100% !important;
  clip-path: polygon(100% 0, 0 50%, 100% 100%) !important;
  z-index: 2 !important;
}

.flap-bottom {
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 50% !important;
  clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
  z-index: 5 !important;
}

/* subtle fold seams */
.flap-left,
.flap-right,
.flap-bottom,
.flap-top {
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.25));
}

.wax-seal {
  top: 47% !important;
  width: clamp(96px, 25vw, 118px) !important;
  height: clamp(96px, 25vw, 118px) !important;
  background:
    radial-gradient(circle at 36% 28%, rgba(255,255,255,.22) 0 8%, transparent 20%),
    radial-gradient(circle at 66% 72%, rgba(97, 63, 71, .18) 0 18%, transparent 30%),
    radial-gradient(circle, #a78489 0 36%, #99767c 56%, #8d6b70 74%, #7f5f63 100%) !important;
  box-shadow:
    0 12px 24px rgba(60, 42, 47, .18),
    inset 0 3px 7px rgba(255,255,255,.16),
    inset 0 -6px 10px rgba(90,64,70,.32) !important;
}

.wax-seal::before,
.wax-seal::after,
.seal-glow {
  display: none !important;
}

.monogram {
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: clamp(1.15rem, 3.6vw, 1.45rem) !important;
  font-style: normal !important;
  font-weight: 600 !important;
  letter-spacing: .05em !important;
  color: rgba(79, 55, 61, .95) !important;
  text-shadow: none !important;
}

.open-hint {
  position: absolute;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%);
  z-index: 8;
  background: rgba(255,255,255,.82);
  color: #8a7f7f;
  border: 1px solid rgba(171, 160, 160, .34);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: 0 8px 18px rgba(42,34,34,.06);
  pointer-events: none;
}

.screen.is-opening .open-hint,
.screen.video-visible .open-hint,
.screen.overlay-visible .open-hint {
  opacity: 0;
  visibility: hidden;
}

/* More visible opening animation */
.flap-top,
.flap-left,
.flap-right,
.flap-bottom,
.wax-seal,
.envelope {
  will-change: transform, opacity;
}

.screen.is-opening .flap-top {
  transform: rotateX(-174deg) translateY(-6%) translateZ(12px) !important;
  transition-timing-function: cubic-bezier(.2,.78,.15,1) !important;
}

.screen.is-opening .flap-left {
  transform: rotateY(-132deg) translateX(-4%) translateZ(8px) !important;
}

.screen.is-opening .flap-right {
  transform: rotateY(132deg) translateX(4%) translateZ(8px) !important;
}

.screen.is-opening .flap-bottom {
  transform: rotateX(14deg) translateY(1%) translateZ(3px) !important;
}

.screen.is-opening .wax-seal {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(.84) rotate(-8deg) !important;
}

.screen.video-visible .envelope {
  opacity: 0 !important;
  transform: scale(1.02) !important;
  pointer-events: none !important;
}

.scroll-note {
  margin-bottom: 0 !important;
}

.scroll-arrow {
  width: 18px;
  height: 18px;
  border-right: 2px solid rgba(109, 93, 93, .56);
  border-bottom: 2px solid rgba(109, 93, 93, .56);
  transform: rotate(45deg);
  margin-top: 12px;
  animation: scrollArrowBounce 1.4s ease-in-out infinite;
}

@keyframes scrollArrowBounce {
  0%,100% { transform: rotate(45deg) translate(0,0); opacity:.42; }
  50% { transform: rotate(45deg) translate(4px,4px); opacity:1; }
}

.attendance-options input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  margin: 0 !important;
}

@media (max-width: 480px) {
  .attendance-options input[type="radio"] {
    width: 12px !important;
    height: 12px !important;
    flex-basis: 12px !important;
  }

  .attendance-options strong {
    font-size: .86rem !important;
  }

  .attendance-options .choice {
    padding: 9px 10px !important;
  }

  .open-hint {
    bottom: 24px;
    padding: 9px 15px;
    font-size: .82rem;
  }
}


/* ===== Realistic envelope redesign ===== */
.envelope-button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  padding: 0;
  perspective: 2200px;
  cursor: pointer;
}

.envelope {
  position: relative;
  width: min(76vw, 420px);
  aspect-ratio: 0.8 / 1;
  transform-style: preserve-3d;
  background: linear-gradient(180deg, #f7f2eb 0%, #f2ece3 100%) !important;
  border-radius: 2px;
  box-shadow:
    0 26px 60px rgba(41, 33, 27, .08),
    0 6px 16px rgba(41, 33, 27, .05),
    inset 0 0 0 1px rgba(193, 184, 171, .22);
  overflow: hidden;
}

.envelope::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 24%),
    radial-gradient(circle at 20% 14%, rgba(255,255,255,.26), transparent 24%);
  pointer-events: none;
  z-index: 1;
}

.paper-grain {
  inset: -2% !important;
  opacity: .06 !important;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle, rgba(115, 100, 88, .12) 0 1px, transparent 1.6px),
    linear-gradient(135deg, rgba(255,255,255,.5) 0 1px, transparent 1px) !important;
  background-size: 16px 16px, 34px 34px !important;
}

.botanical-print,
.botanical-emblem {
  display: none !important;
}

.envelope-shadow {
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 8%;
  height: 8%;
  background: radial-gradient(ellipse at center, rgba(68, 52, 40, .18), rgba(68,52,40,0) 70%);
  filter: blur(12px);
  z-index: 0;
}

.envelope-letter {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 22%;
  bottom: 18%;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transform: translateY(28%);
  transition: transform calc(var(--envelope-open-ms, 3350ms) * .9) cubic-bezier(.2,.82,.2,1), opacity .8s ease;
}

.letter-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  background:
    linear-gradient(180deg, #fffdfa 0%, #fbf8f3 100%);
  box-shadow:
    0 16px 30px rgba(37, 28, 21, .08),
    inset 0 0 0 1px rgba(208, 198, 185, .36);
}

.letter-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 28%;
  background: linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,0));
}

.letter-monogram {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.5rem, 4.2vw, 2.1rem);
  color: rgba(140, 116, 104, .56);
  letter-spacing: .08em;
}

.letter-line {
  position: absolute;
  left: 14%;
  right: 14%;
  height: 1px;
  background: rgba(171, 157, 146, .36);
}

.letter-line-1 { top: 42%; }
.letter-line-2 { top: 53%; }
.letter-line-3 { top: 64%; }

.flap {
  position: absolute;
  display: block;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  background: linear-gradient(180deg, #f7f2eb 0%, #f0e8de 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(187, 175, 163, .22);
}

.flap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0));
  opacity: .45;
}

.flap-back {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  box-shadow: none;
  background: linear-gradient(180deg, #f3ede4 0%, #ede4d9 100%) !important;
}

.flap-top {
  left: 0;
  top: 0;
  width: 100%;
  height: 45%;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0%;
  z-index: 6;
  box-shadow:
    inset 0 0 0 1px rgba(182, 170, 159, .22),
    0 1px 0 rgba(255,255,255,.24);
}

.flap-left {
  left: 0;
  top: 0;
  width: 58%;
  height: 100%;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  z-index: 3;
}

.flap-right {
  right: 0;
  top: 0;
  width: 58%;
  height: 100%;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
  z-index: 4;
}

.flap-bottom {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 48%;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  z-index: 5;
  box-shadow:
    inset 0 0 0 1px rgba(182, 170, 159, .22),
    0 -1px 0 rgba(255,255,255,.16);
}

.wax-seal {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: clamp(92px, 22vw, 110px);
  height: clamp(92px, 22vw, 110px);
  z-index: 7;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.24) 0 8%, transparent 20%),
    radial-gradient(circle at 68% 72%, rgba(92, 60, 66, .2) 0 16%, transparent 26%),
    radial-gradient(circle, #a78489 0 38%, #99767c 60%, #8f6c72 76%, #7f5f64 100%) !important;
  box-shadow:
    0 14px 28px rgba(61, 44, 49, .16),
    inset 0 2px 7px rgba(255,255,255,.18),
    inset 0 -5px 10px rgba(88, 60, 66, .28);
}

.wax-seal::before,
.wax-seal::after,
.seal-glow {
  display: none !important;
}

.monogram {
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: clamp(1.2rem, 3vw, 1.45rem) !important;
  font-weight: 600 !important;
  font-style: normal !important;
  letter-spacing: .06em;
  color: rgba(79, 57, 63, .94) !important;
  text-shadow: none !important;
}

.open-hint {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  z-index: 8;
  background: rgba(255,255,255,.84);
  color: #8a7670;
  border: 1px solid rgba(183, 171, 166, .42);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: .88rem;
  letter-spacing: .02em;
  box-shadow: 0 10px 18px rgba(46, 35, 28, .06);
  pointer-events: none;
  animation: hintPulse 2s ease-in-out infinite;
}

@keyframes hintPulse {
  0%,100% { transform: translateX(-50%) scale(1); opacity: .92; }
  50% { transform: translateX(-50%) scale(1.03); opacity: 1; }
}

.screen.is-opening .open-hint,
.screen.video-visible .open-hint,
.screen.overlay-visible .open-hint {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

/* Realistic opening: flap opens, seal vanishes, card slides out */
.envelope-letter,
.flap-top,
.flap-left,
.flap-right,
.flap-bottom,
.wax-seal,
.envelope {
  will-change: transform, opacity;
}

.screen.is-opening .wax-seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.82) rotate(-10deg);
  transition: transform .42s ease, opacity .3s ease;
}

.screen.is-opening .flap-top {
  transform: rotateX(-178deg);
  transition: transform calc(var(--envelope-open-ms, 3350ms) * .5) cubic-bezier(.23,.82,.17,1);
}

.screen.is-opening .envelope-letter {
  transform: translateY(-6%);
}

.screen.is-opening .flap-left {
  transform: translateX(-1.2%);
}

.screen.is-opening .flap-right {
  transform: translateX(1.2%);
}

.screen.video-visible .envelope {
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .5s ease, transform .7s ease;
  pointer-events: none;
}

.scroll-arrow {
  width: 18px;
  height: 18px;
  border-right: 2px solid rgba(92, 79, 74, .55);
  border-bottom: 2px solid rgba(92, 79, 74, .55);
  transform: rotate(45deg);
  margin-top: 12px;
  animation: scrollArrowBounce 1.4s ease-in-out infinite;
}

@keyframes scrollArrowBounce {
  0%,100% { transform: rotate(45deg) translate(0,0); opacity: .42; }
  50% { transform: rotate(45deg) translate(4px,4px); opacity: 1; }
}

.attendance-options input[type="radio"] {
  width: 15px !important;
  height: 15px !important;
  flex: 0 0 15px !important;
  margin: 0 !important;
}

@media (max-width: 480px) {
  .envelope {
    width: 82vw;
  }

  .open-hint {
    bottom: 24px;
    padding: 8px 14px;
    font-size: .82rem;
  }

  .attendance-options input[type="radio"] {
    width: 12px !important;
    height: 12px !important;
    flex-basis: 12px !important;
  }

  .attendance-options .choice {
    padding: 9px 10px !important;
  }

  .attendance-options strong {
    font-size: .86rem !important;
  }
}


/* ===== Full-page white/green envelope + loading protection ===== */
.page,
.invitation-shell,
.screen {
  width: 100vw !important;
  height: 100dvh !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body {
  background: #f7fbf4 !important;
}

.envelope-button {
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.92), transparent 34%),
    linear-gradient(145deg, #f9fcf6 0%, #eef7ec 45%, #dfeedd 100%) !important;
}

/* Fill the full page with a premium white/green envelope */
.envelope {
  width: 100vw !important;
  height: 100dvh !important;
  aspect-ratio: auto !important;
  background:
    radial-gradient(circle at 50% 12%, rgba(255,255,255,.95), transparent 34%),
    linear-gradient(160deg, #ffffff 0%, #f4faf1 43%, #dbead8 100%) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(115, 150, 115, .10) !important;
}

.envelope::before {
  background:
    radial-gradient(circle at 24% 16%, rgba(255,255,255,.55), transparent 30%),
    radial-gradient(circle at 82% 76%, rgba(114, 154, 112, .10), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,0) 32%) !important;
}

/* Subtle green botanical pattern built with CSS, not image-dependent */
.envelope::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .18;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse at 20% 18%, rgba(93,135,89,.35) 0 7px, transparent 8px),
    radial-gradient(ellipse at 26% 24%, rgba(93,135,89,.30) 0 9px, transparent 10px),
    radial-gradient(ellipse at 72% 18%, rgba(93,135,89,.28) 0 8px, transparent 9px),
    radial-gradient(ellipse at 82% 70%, rgba(93,135,89,.30) 0 9px, transparent 10px),
    radial-gradient(ellipse at 18% 78%, rgba(93,135,89,.28) 0 8px, transparent 9px),
    linear-gradient(45deg, transparent 48%, rgba(93,135,89,.22) 49%, transparent 51%);
  background-size: 160px 160px, 190px 190px, 170px 170px, 210px 210px, 180px 180px, 120px 120px;
  background-position: 4% 6%, 14% 22%, 78% 10%, 82% 72%, 9% 80%, center;
}

.paper-grain {
  opacity: .05 !important;
  z-index: 2 !important;
}

.envelope-letter {
  left: 17% !important;
  right: 17% !important;
  top: 19% !important;
  bottom: 21% !important;
  z-index: 3 !important;
  transform: translateY(36%) scale(.96) !important;
}

.letter-card {
  background: linear-gradient(180deg, #ffffff 0%, #fbfff9 100%) !important;
  box-shadow:
    0 20px 50px rgba(48, 80, 48, .10),
    inset 0 0 0 1px rgba(119, 153, 118, .18) !important;
}

.letter-monogram {
  color: rgba(80, 118, 78, .62) !important;
}

.letter-line {
  background: rgba(111, 147, 108, .26) !important;
}

.flap {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(237,247,232,.98) 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(122, 156, 119, .18) !important;
}

.flap-back {
  background:
    linear-gradient(180deg, #f8fcf4 0%, #e7f3e3 100%) !important;
}

.flap-top {
  height: 47% !important;
  z-index: 7 !important;
}

.flap-left,
.flap-right {
  width: 62% !important;
}

.flap-bottom {
  height: 50% !important;
  z-index: 6 !important;
}

.wax-seal {
  top: 51% !important;
  width: clamp(96px, 24vw, 126px) !important;
  height: clamp(96px, 24vw, 126px) !important;
  z-index: 8 !important;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.40) 0 8%, transparent 20%),
    radial-gradient(circle at 70% 72%, rgba(45, 98, 48, .28) 0 18%, transparent 30%),
    radial-gradient(circle, #cfe0c8 0 34%, #adc8a6 58%, #86a77f 78%, #6c9167 100%) !important;
  box-shadow:
    0 18px 34px rgba(39, 78, 42, .18),
    inset 0 3px 8px rgba(255,255,255,.34),
    inset 0 -8px 14px rgba(51, 92, 53, .28) !important;
}

.monogram {
  color: #355c37 !important;
  font-size: clamp(1.25rem, 4vw, 1.7rem) !important;
  font-weight: 700 !important;
}

/* Loading state: do not allow opening until the video has buffered enough */
.envelope-button.is-loading {
  cursor: wait !important;
}

.envelope-button.is-loading .envelope {
  filter: saturate(.94) brightness(.99);
}

.open-hint {
  bottom: 32px !important;
  z-index: 12 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 190px;
  background: rgba(255,255,255,.88) !important;
  color: #3f6e43 !important;
  border: 1px solid rgba(92, 135, 88, .28) !important;
  box-shadow: 0 14px 30px rgba(46, 80, 45, .10) !important;
}

.loader-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(76, 122, 74, .25);
  border-top-color: #4c7a4a;
  animation: loaderSpin .8s linear infinite;
}

.envelope-button.is-ready .loader-dot {
  display: none;
}

.envelope-button.is-ready .open-hint {
  cursor: pointer;
  animation: hintPulse 1.8s ease-in-out infinite;
}

@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}

/* Better real envelope animation */
.screen.is-opening .wax-seal {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(.72) rotate(-14deg) !important;
  transition: transform .55s ease, opacity .35s ease !important;
}

.screen.is-opening .flap-top {
  transform: rotateX(-182deg) translateY(-2%) translateZ(18px) !important;
  transition: transform calc(var(--envelope-open-ms, 3350ms) * .55) cubic-bezier(.16,.82,.2,1) !important;
}

.screen.is-opening .envelope-letter {
  transform: translateY(-18%) scale(1) !important;
  transition-delay: calc(var(--envelope-open-ms, 3350ms) * .20) !important;
}

.screen.is-opening .flap-left {
  transform: rotateY(-8deg) translateX(-2%) !important;
  transition: transform calc(var(--envelope-open-ms, 3350ms) * .65) cubic-bezier(.18,.74,.2,1) !important;
}

.screen.is-opening .flap-right {
  transform: rotateY(8deg) translateX(2%) !important;
  transition: transform calc(var(--envelope-open-ms, 3350ms) * .65) cubic-bezier(.18,.74,.2,1) !important;
}

.screen.is-opening .flap-bottom {
  transform: rotateX(10deg) translateY(2%) !important;
  transition: transform calc(var(--envelope-open-ms, 3350ms) * .7) cubic-bezier(.18,.74,.2,1) !important;
}

.screen.video-visible .envelope {
  opacity: 0 !important;
  transform: scale(1.025) translateY(-1%) !important;
  transition: opacity .7s ease, transform .9s ease !important;
}

@media (max-width: 480px) {
  .envelope-letter {
    left: 14% !important;
    right: 14% !important;
  }

  .open-hint {
    bottom: 24px !important;
    min-width: 170px;
    font-size: .84rem !important;
  }

  .loader-dot {
    width: 14px;
    height: 14px;
  }
}


/* ===== Family invitation template section ===== */
.family-template-section .section-card::before {
  opacity: .7;
}

.family-template-card {
  direction: rtl;
  max-width: 390px !important;
  padding: 34px 22px 38px !important;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.55), transparent 34%),
    rgba(255,255,255,.44) !important;
}

.family-top-title {
  margin: 0 0 28px;
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: clamp(2.15rem, 8vw, 3.1rem);
  line-height: 1;
  color: #694554;
  font-weight: 700;
}

.families-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  width: 100%;
  margin: 0 auto 30px;
}

.family-side {
  min-width: 0;
  text-align: center;
}

.family-label {
  margin: 0 0 14px;
  font-family: "Noto Naskh Arabic", "Amiri", serif;
  font-size: clamp(1rem, 3.9vw, 1.28rem);
  line-height: 1.3;
  color: #6a4a57;
  font-weight: 700;
}

.family-name {
  margin: 0;
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: clamp(1.34rem, 5.2vw, 1.85rem);
  line-height: 1.35;
  color: #593342;
  font-weight: 700;
}

.family-divider {
  width: 1px;
  height: 86px;
  background: linear-gradient(180deg, transparent, rgba(183, 156, 88, .78), transparent);
  box-shadow: 0 0 10px rgba(183, 156, 88, .20);
}

.family-invite-text {
  margin: 4px auto 26px;
  font-family: "Noto Naskh Arabic", "Amiri", serif;
  font-size: clamp(1.5rem, 6.4vw, 2.25rem);
  line-height: 1.55;
  color: #4b3440;
  font-weight: 400;
}

.family-couple-names {
  margin: 0;
  font-family: "Aref Ruqaa", "Amiri", serif;
  font-size: clamp(3.5rem, 16vw, 6.2rem);
  line-height: .98;
  color: #673047;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.family-couple-names span {
  font-size: .72em;
  margin: 0 .08em;
}

@media (max-width: 430px) {
  .family-template-card {
    padding: 30px 16px 34px !important;
  }

  .families-row {
    gap: 10px;
    margin-bottom: 24px;
  }

  .family-divider {
    height: 74px;
  }

  .family-name {
    font-size: clamp(1.15rem, 5.2vw, 1.52rem);
  }

  .family-couple-names {
    font-size: clamp(3rem, 17vw, 4.8rem);
  }
}


/* Family template text color update: green theme */
.family-top-title,
.family-label,
.family-name,
.family-invite-text,
.family-couple-names,
.family-couple-names span {
  color: #344139 !important;
}

.family-label {
  color: #607560 !important;
}

.family-divider {
  background: linear-gradient(180deg, transparent, rgba(93,117,95,.72), transparent) !important;
  box-shadow: 0 0 10px rgba(93,117,95,.16) !important;
}


/* ===== Final envelope refinement ===== */
/* Cleaner premium stage */
body,
.page {
  background: linear-gradient(180deg, #f8fbf5 0%, #eef5ec 100%) !important;
}

.invitation-shell,
.screen {
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.92), transparent 26%),
    linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 30%),
    linear-gradient(180deg, #f7faf4 0%, #edf4ea 100%) !important;
}

/* Delicate green corner decoration on the stage */
.envelope-button::before,
.envelope-button::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  pointer-events: none;
  opacity: .34;
  z-index: 1;
  background:
    radial-gradient(ellipse at 28% 24%, rgba(111,146,109,.34) 0 10px, transparent 11px),
    radial-gradient(ellipse at 38% 34%, rgba(111,146,109,.28) 0 8px, transparent 9px),
    radial-gradient(ellipse at 52% 46%, rgba(111,146,109,.22) 0 7px, transparent 8px),
    linear-gradient(38deg, transparent 47%, rgba(111,146,109,.26) 48%, transparent 50%);
  filter: blur(.1px);
}

.envelope-button::before {
  top: 20px;
  left: 18px;
  transform: scaleX(-1);
}

.envelope-button::after {
  bottom: 22px;
  right: 18px;
  transform: rotate(180deg);
}

/* Put a realistic envelope at center instead of full-screen flat shape */
.envelope-button {
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  perspective: 2200px;
}

.envelope {
  width: min(88vw, 520px) !important;
  height: min(72vh, 660px) !important;
  aspect-ratio: 0.78 / 1 !important;
  background: none !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Envelope base paper */
.flap-back {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 2px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.52), transparent 26%),
    linear-gradient(180deg, #fffdfa 0%, #f7f2ea 55%, #efe7dc 100%) !important;
  box-shadow:
    0 38px 70px rgba(49, 56, 44, .12),
    0 10px 28px rgba(49, 56, 44, .09),
    inset 0 0 0 1px rgba(177, 181, 165, .28) !important;
}

/* subtle paper texture */
.paper-grain {
  position: absolute !important;
  inset: 0 !important;
  opacity: .05 !important;
  z-index: 2 !important;
  background-image:
    radial-gradient(circle, rgba(110, 104, 94, .14) 0 1px, transparent 1.7px),
    linear-gradient(135deg, rgba(255,255,255,.5) 0 1px, transparent 1px) !important;
  background-size: 18px 18px, 40px 40px !important;
  mix-blend-mode: multiply !important;
}

/* Remove older extra layers */
.envelope-shadow,
.botanical-print,
.botanical-emblem {
  display: none !important;
}

.flap {
  box-shadow: inset 0 0 0 1px rgba(183, 181, 169, .24) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(241,247,237,.98) 100%) !important;
  backface-visibility: hidden !important;
}

/* Realistic geometry */
.flap-left {
  width: 60% !important;
  height: 100% !important;
  left: 0 !important;
  top: 0 !important;
  clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
  z-index: 4 !important;
}

.flap-right {
  width: 60% !important;
  height: 100% !important;
  right: 0 !important;
  top: 0 !important;
  clip-path: polygon(100% 0, 0 50%, 100% 100%) !important;
  z-index: 5 !important;
}

.flap-bottom {
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 49% !important;
  clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
  z-index: 6 !important;
  background:
    linear-gradient(180deg, rgba(250,252,248,.98) 0%, rgba(232,241,227,.98) 100%) !important;
}

.flap-top {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 47% !important;
  clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
  z-index: 8 !important;
  transform-origin: 50% 0% !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(237,245,232,.98) 100%) !important;
}

/* Letter */
.envelope-letter {
  position: absolute !important;
  left: 11.5% !important;
  right: 11.5% !important;
  top: 14% !important;
  bottom: 16% !important;
  z-index: 3 !important;
  transform: translateY(33%) !important;
  transition: transform calc(var(--envelope-open-ms, 3350ms) * .88) cubic-bezier(.18,.82,.2,1) !important;
}

.letter-card {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, #ffffff 0%, #fcfffb 100%) !important;
  border-radius: 2px;
  box-shadow:
    0 18px 34px rgba(54, 73, 54, .10),
    inset 0 0 0 1px rgba(180, 190, 177, .22) !important;
  overflow: hidden;
}

.letter-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 15%, rgba(150,181,146,.10), transparent 28%),
    radial-gradient(circle at 80% 85%, rgba(150,181,146,.08), transparent 26%);
}

.letter-monogram {
  top: 12% !important;
  color: rgba(95, 129, 92, .62) !important;
}

.letter-line {
  background: rgba(128, 157, 126, .25) !important;
}

/* Seal */
.wax-seal {
  left: 50% !important;
  top: 54% !important;
  width: clamp(96px, 22vw, 120px) !important;
  height: clamp(96px, 22vw, 120px) !important;
  z-index: 9 !important;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.34) 0 8%, transparent 20%),
    radial-gradient(circle at 72% 72%, rgba(58, 97, 56, .26) 0 16%, transparent 28%),
    radial-gradient(circle, #d8e6d3 0 34%, #b7d1b0 60%, #86aa81 79%, #6c9467 100%) !important;
  box-shadow:
    0 14px 30px rgba(41, 79, 43, .17),
    inset 0 2px 8px rgba(255,255,255,.32),
    inset 0 -8px 12px rgba(55, 91, 55, .26) !important;
}

.wax-seal::before,
.wax-seal::after,
.seal-glow {
  display: none !important;
}

.monogram {
  color: #2f5732 !important;
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: clamp(1.2rem, 3.8vw, 1.55rem) !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
}

/* Loading/open hint */
.open-hint {
  bottom: max(22px, env(safe-area-inset-bottom)) !important;
  background: rgba(255,255,255,.92) !important;
  color: #436b46 !important;
  border: 1px solid rgba(108, 148, 103, .26) !important;
  box-shadow: 0 14px 28px rgba(45, 76, 46, .10) !important;
}

.loader-dot {
  border-color: rgba(76,122,74,.24) !important;
  border-top-color: #4c7a4a !important;
}

/* Better opening animation */
.flap-top,
.flap-left,
.flap-right,
.flap-bottom,
.wax-seal,
.envelope-letter,
.envelope {
  will-change: transform, opacity;
}

.screen.is-opening .wax-seal {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(.76) rotate(-14deg) !important;
  transition: transform .46s ease, opacity .28s ease !important;
}

.screen.is-opening .flap-top {
  transform: rotateX(-180deg) translateY(-1%) translateZ(10px) !important;
  transition: transform calc(var(--envelope-open-ms, 3350ms) * .52) cubic-bezier(.16,.84,.2,1) !important;
}

.screen.is-opening .flap-left {
  transform: rotateY(-7deg) translateX(-1.2%) !important;
  transition: transform calc(var(--envelope-open-ms, 3350ms) * .68) cubic-bezier(.16,.78,.2,1) !important;
}

.screen.is-opening .flap-right {
  transform: rotateY(7deg) translateX(1.2%) !important;
  transition: transform calc(var(--envelope-open-ms, 3350ms) * .68) cubic-bezier(.16,.78,.2,1) !important;
}

.screen.is-opening .flap-bottom {
  transform: rotateX(10deg) translateY(1.5%) !important;
  transition: transform calc(var(--envelope-open-ms, 3350ms) * .7) cubic-bezier(.16,.78,.2,1) !important;
}

.screen.is-opening .envelope-letter {
  transform: translateY(-8%) !important;
}

.screen.video-visible .envelope {
  opacity: 0 !important;
  transform: scale(1.025) translateY(-1%) !important;
  transition: opacity .72s ease, transform .88s ease !important;
}

/* Mobile scale */
@media (max-width: 640px) {
  .envelope {
    width: 90vw !important;
    height: 68vh !important;
  }

  .envelope-button::before,
  .envelope-button::after {
    width: 120px;
    height: 120px;
    opacity: .26;
  }
}


/* ===== Full-phone envelope redesign: white + green, clear opening animation ===== */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body,
.page,
.invitation-shell,
.screen {
  background: linear-gradient(180deg, #f8fcf6 0%, #edf5ec 100%) !important;
}

/* The button/stage fills the whole phone */
.envelope-button {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  perspective: 2400px !important;
  background:
    radial-gradient(circle at 50% 15%, rgba(255,255,255,.95), transparent 30%),
    linear-gradient(180deg, #f8fcf6 0%, #ecf5ea 100%) !important;
}

/* Decorative green touches around the phone edges */
.envelope-button::before,
.envelope-button::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  z-index: 1;
  pointer-events: none;
  opacity: .28;
  background:
    radial-gradient(ellipse at 26% 22%, rgba(94,135,91,.34) 0 9px, transparent 10px),
    radial-gradient(ellipse at 38% 34%, rgba(94,135,91,.26) 0 8px, transparent 9px),
    radial-gradient(ellipse at 52% 48%, rgba(94,135,91,.20) 0 7px, transparent 8px),
    linear-gradient(38deg, transparent 47%, rgba(94,135,91,.24) 48%, transparent 50%);
}

.envelope-button::before {
  top: 20px;
  left: 12px;
  transform: scaleX(-1);
}

.envelope-button::after {
  right: 12px;
  bottom: 20px;
  transform: rotate(180deg);
}

/* Envelope itself covers the entire phone area */
.envelope {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  background: none !important;
  overflow: hidden !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transform-style: preserve-3d !important;
}

/* Base paper */
.flap-back {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,.62), transparent 25%),
    linear-gradient(180deg, #fffdfa 0%, #f6f2ea 55%, #ecf1e6 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(164, 184, 160, .18),
    inset 0 -22px 40px rgba(154, 182, 149, .08);
}

/* Subtle texture */
.paper-grain {
  inset: 0 !important;
  opacity: .045 !important;
  z-index: 2 !important;
  background-image:
    radial-gradient(circle, rgba(110,104,94,.13) 0 1px, transparent 1.6px),
    linear-gradient(135deg, rgba(255,255,255,.46) 0 1px, transparent 1px) !important;
  background-size: 18px 18px, 42px 42px !important;
  mix-blend-mode: multiply !important;
}

.envelope-shadow,
.botanical-print,
.botanical-emblem {
  display: none !important;
}

/* Larger inner letter for full-phone feel */
.envelope-letter {
  position: absolute !important;
  left: 9% !important;
  right: 9% !important;
  top: 11% !important;
  bottom: 12% !important;
  z-index: 3 !important;
  transform: translateY(45%) scale(.98) !important;
  transition: transform calc(var(--envelope-open-ms, 3350ms) * .9) cubic-bezier(.18,.82,.2,1) !important;
}

.letter-card {
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 20% 16%, rgba(141,172,137,.10), transparent 24%),
    radial-gradient(circle at 82% 84%, rgba(141,172,137,.08), transparent 20%),
    linear-gradient(180deg, #ffffff 0%, #fbfff9 100%) !important;
  box-shadow:
    0 20px 40px rgba(56,79,57,.10),
    inset 0 0 0 1px rgba(177,194,173,.24) !important;
}

.letter-monogram {
  color: rgba(92, 126, 89, .58) !important;
}

.letter-line {
  background: rgba(126, 156, 122, .22) !important;
}

/* Full-screen envelope flaps */
.flap {
  position: absolute !important;
  backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
  box-shadow: inset 0 0 0 1px rgba(170,188,166,.20) !important;
  background: linear-gradient(180deg, #ffffff 0%, #eff6ed 100%) !important;
}

.flap-left {
  top: 0 !important;
  left: 0 !important;
  width: 60% !important;
  height: 100% !important;
  z-index: 4 !important;
  clip-path: polygon(0 0, 100% 50%, 0 100%) !important;
}

.flap-right {
  top: 0 !important;
  right: 0 !important;
  width: 60% !important;
  height: 100% !important;
  z-index: 5 !important;
  clip-path: polygon(100% 0, 0 50%, 100% 100%) !important;
}

.flap-bottom {
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 50% !important;
  z-index: 6 !important;
  clip-path: polygon(50% 0, 100% 100%, 0 100%) !important;
  background: linear-gradient(180deg, #fbfffa 0%, #e7f0e4 100%) !important;
}

.flap-top {
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 48% !important;
  z-index: 8 !important;
  clip-path: polygon(0 0, 100% 0, 50% 100%) !important;
  transform-origin: 50% 0% !important;
  background: linear-gradient(180deg, #ffffff 0%, #ecf5ea 100%) !important;
}

/* Seal */
.wax-seal {
  left: 50% !important;
  top: 52% !important;
  width: clamp(108px, 24vw, 138px) !important;
  height: clamp(108px, 24vw, 138px) !important;
  z-index: 9 !important;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.36) 0 8%, transparent 19%),
    radial-gradient(circle at 70% 72%, rgba(46,90,47,.25) 0 18%, transparent 28%),
    radial-gradient(circle, #d7e8d2 0 34%, #b4d0ad 58%, #88ae83 79%, #6c9767 100%) !important;
  box-shadow:
    0 18px 36px rgba(41,79,43,.16),
    inset 0 3px 8px rgba(255,255,255,.34),
    inset 0 -9px 14px rgba(55,91,55,.24) !important;
}

.wax-seal::before,
.wax-seal::after,
.seal-glow {
  display: none !important;
}

.monogram {
  color: #355a37 !important;
  font-size: clamp(1.3rem, 4vw, 1.72rem) !important;
  font-weight: 700 !important;
}

/* Hint */
.open-hint {
  bottom: calc(20px + env(safe-area-inset-bottom)) !important;
  z-index: 12 !important;
  background: rgba(255,255,255,.92) !important;
  color: #446d48 !important;
  border: 1px solid rgba(107,145,103,.26) !important;
  box-shadow: 0 14px 30px rgba(45,76,46,.10) !important;
}

/* Clear open animation */
.screen.is-opening .wax-seal {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(.72) rotate(-16deg) !important;
  transition: transform .42s ease, opacity .25s ease !important;
}

.screen.is-opening .flap-top {
  transform: rotateX(-178deg) translateY(-1%) translateZ(14px) !important;
  transition: transform calc(var(--envelope-open-ms, 3350ms) * .58) cubic-bezier(.16,.84,.18,1) !important;
}

.screen.is-opening .flap-left {
  transform: rotateY(-12deg) translateX(-2%) !important;
  transition: transform calc(var(--envelope-open-ms, 3350ms) * .72) cubic-bezier(.16,.78,.2,1) !important;
}

.screen.is-opening .flap-right {
  transform: rotateY(12deg) translateX(2%) !important;
  transition: transform calc(var(--envelope-open-ms, 3350ms) * .72) cubic-bezier(.16,.78,.2,1) !important;
}

.screen.is-opening .flap-bottom {
  transform: rotateX(12deg) translateY(2%) !important;
  transition: transform calc(var(--envelope-open-ms, 3350ms) * .75) cubic-bezier(.16,.78,.2,1) !important;
}

.screen.is-opening .envelope-letter {
  transform: translateY(-6%) scale(1) !important;
}

.screen.video-visible .envelope {
  opacity: 0 !important;
  transform: scale(1.02) !important;
  transition: opacity .8s ease, transform .9s ease !important;
}

/* Better on very small screens */
@media (max-width: 480px) {
  .envelope-letter {
    left: 8% !important;
    right: 8% !important;
    top: 10% !important;
    bottom: 11% !important;
  }

  .wax-seal {
    width: 102px !important;
    height: 102px !important;
  }

  .envelope-button::before,
  .envelope-button::after {
    width: 130px;
    height: 130px;
    opacity: .22;
  }
}


/* ===== Improved realistic wax seal ===== */
.wax-seal {
  overflow: visible !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.58) 0 7%, transparent 20%),
    radial-gradient(circle at 68% 72%, rgba(46, 88, 49, .26) 0 16%, transparent 28%),
    radial-gradient(circle at 50% 50%, #dcebd7 0 16%, #c7dfc0 30%, #a8ca9f 54%, #88af83 76%, #6e9868 100%) !important;
  box-shadow:
    0 20px 38px rgba(34, 73, 39, .20),
    0 6px 12px rgba(34, 73, 39, .10),
    inset 0 3px 10px rgba(255,255,255,.34),
    inset 0 -10px 16px rgba(51, 90, 55, .30),
    inset 10px 0 14px rgba(255,255,255,.10),
    inset -10px 0 14px rgba(58, 95, 58, .12) !important;
  filter: saturate(1.03) contrast(1.02);
  transform: translate(-50%, -50%) rotate(-7deg) !important;
}

/* scalloped, irregular wax edge */
.wax-seal::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 0%, rgba(115, 152, 111, .95) 0 10px, transparent 11px),
    radial-gradient(circle at 85% 15%, rgba(125, 165, 121, .95) 0 9px, transparent 10px),
    radial-gradient(circle at 100% 50%, rgba(118, 158, 114, .95) 0 10px, transparent 11px),
    radial-gradient(circle at 85% 85%, rgba(108, 148, 104, .95) 0 10px, transparent 11px),
    radial-gradient(circle at 50% 100%, rgba(114, 154, 110, .95) 0 10px, transparent 11px),
    radial-gradient(circle at 15% 85%, rgba(122, 162, 118, .95) 0 10px, transparent 11px),
    radial-gradient(circle at 0% 50%, rgba(111, 151, 107, .95) 0 10px, transparent 11px),
    radial-gradient(circle at 15% 15%, rgba(126, 166, 122, .95) 0 10px, transparent 11px);
  z-index: -1;
  filter: blur(.15px);
  opacity: .95;
}

/* glossy highlight + tiny inner texture */
.wax-seal::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.52) 0 10%, transparent 22%),
    radial-gradient(circle at 64% 66%, rgba(255,255,255,.08) 0 45%, transparent 56%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.04) 0 2px, rgba(0,0,0,0) 2px 6px);
  mix-blend-mode: soft-light;
  opacity: .9;
  pointer-events: none;
}

.seal-glow {
  display: none !important;
}

.monogram {
  position: relative;
  z-index: 2;
  text-shadow:
    0 1px 0 rgba(255,255,255,.25),
    0 -1px 0 rgba(52, 84, 53, .18);
  letter-spacing: .04em !important;
}

@media (max-width: 480px) {
  .wax-seal {
    width: 96px !important;
    height: 96px !important;
  }
  .wax-seal::before {
    inset: -5px;
  }
}


/* ===== Wax seal updated to match uploaded reference (green, softer, more realistic) ===== */
.wax-seal {
  overflow: visible !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.28) 0 7%, transparent 18%),
    radial-gradient(circle at 72% 76%, rgba(34, 87, 62, .18) 0 18%, transparent 28%),
    radial-gradient(circle at 50% 50%, #7bb596 0 18%, #6aa685 34%, #5b9878 58%, #4f8c6d 78%, #437d61 100%) !important;
  box-shadow:
    0 14px 28px rgba(23, 64, 45, .18),
    0 4px 10px rgba(23, 64, 45, .08),
    inset 0 4px 10px rgba(255,255,255,.16),
    inset 0 -8px 16px rgba(23, 69, 47, .22),
    inset 9px 0 12px rgba(255,255,255,.06),
    inset -8px 0 12px rgba(21, 70, 47, .08) !important;
  filter: saturate(1.02) contrast(1.01);
  transform: translate(-50%, -50%) rotate(-4deg) !important;
}

/* smoother wax edge closer to the reference */
.wax-seal::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 0%, #4a8769 0 13px, transparent 14px),
    radial-gradient(circle at 80% 10%, #4d896b 0 14px, transparent 15px),
    radial-gradient(circle at 96% 34%, #4d896b 0 12px, transparent 13px),
    radial-gradient(circle at 100% 58%, #4b8668 0 14px, transparent 15px),
    radial-gradient(circle at 88% 84%, #4f8c6d 0 13px, transparent 14px),
    radial-gradient(circle at 64% 98%, #4c896a 0 14px, transparent 15px),
    radial-gradient(circle at 38% 100%, #4c886a 0 13px, transparent 14px),
    radial-gradient(circle at 12% 90%, #4f8c6e 0 14px, transparent 15px),
    radial-gradient(circle at 0% 62%, #4a8668 0 13px, transparent 14px),
    radial-gradient(circle at 2% 32%, #4d896b 0 13px, transparent 14px),
    radial-gradient(circle at 18% 8%, #4e8b6c 0 14px, transparent 15px),
    radial-gradient(circle at 50% 50%, #5b9878 0 64%, transparent 65%);
  z-index: -1;
  filter: blur(.25px);
  opacity: 1;
}

/* flatter face and embossed monogram look */
.wax-seal::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 11%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.22) 0 10%, transparent 20%),
    radial-gradient(circle at 70% 72%, rgba(255,255,255,.04) 0 46%, transparent 58%);
  box-shadow:
    inset 0 1px 2px rgba(255,255,255,.08),
    inset 0 -2px 4px rgba(30, 81, 57, .16);
  pointer-events: none;
}

.monogram {
  position: relative;
  z-index: 2;
  color: #2b6f53 !important;
  font-family: "Playfair Display", Georgia, serif !important;
  font-size: clamp(1.15rem, 3.7vw, 1.48rem) !important;
  font-weight: 700 !important;
  letter-spacing: .03em !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.14),
    0 -1px 0 rgba(34, 86, 61, .20) !important;
  transform: translateY(-1px);
}

/* Tiny phones */
@media (max-width: 480px) {
  .wax-seal {
    width: 96px !important;
    height: 96px !important;
  }
  .wax-seal::before {
    inset: -6px;
  }
}


/* ===== Use uploaded/generated wax seal image instead of CSS-drawn seal ===== */
.wax-seal {
  position: absolute !important;
  left: 50% !important;
  top: 52% !important;
  width: clamp(108px, 24vw, 138px) !important;
  height: clamp(108px, 24vw, 138px) !important;
  z-index: 9 !important;
  display: grid !important;
  place-items: center !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: translate(-50%, -50%) !important;
}

.wax-seal::before,
.wax-seal::after,
.seal-glow,
.monogram {
  display: none !important;
}

.wax-seal-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 22px rgba(39, 79, 43, .22));
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.screen.is-opening .wax-seal {
  opacity: 0 !important;
  transform: translate(-50%, -50%) scale(.72) rotate(-16deg) !important;
  transition: transform .42s ease, opacity .25s ease !important;
}

@media (max-width: 480px) {
  .wax-seal {
    width: 102px !important;
    height: 102px !important;
  }
}