/* =========================================================
   Welcome screen — vintage olive envelope · burgundy seal
   ========================================================= */

.welcome {
  --olive: #7f8b4a;
  --olive-d: #4e5c32;
  --olive-ink: #56612f;
  --ivory: #f1ede3;
  --ivory-2: #e8e2d4;
  --burg: #5c0f1d;
  /* scene unit: envelope width */
  --W: min(80vw, 340px, 40vh);
  --H: calc(var(--W) * .6667);

  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  overflow: hidden;
  color: var(--olive-ink);
  background:
    radial-gradient(130% 90% at 50% 40%, transparent 55%, rgba(86, 97, 47, .16) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .2  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    #f4f0e7;
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
}
.welcome.is-open { opacity: 0; transform: translateY(-4%) scale(1.03); filter: blur(4px); pointer-events: none; }

.welcome__eyebrow {
  margin: 0 0 calc(var(--W) * .02);
  font-family: var(--f-serif); font-size: 13px; font-weight: 500;
  letter-spacing: .45em; text-transform: uppercase; color: var(--olive-ink);
  opacity: 0; animation: wIn .6s var(--ease) forwards;
}

/* ---------- Scene ---------- */
.scene {
  position: relative;
  width: var(--W);
  height: calc(var(--W) * 1.62);
  flex: none;
  opacity: 0; animation: wDrop .6s var(--ease) forwards;
}

.env {
  position: absolute; left: 0; right: 0;
  top: calc(var(--W) * .44);
  height: var(--H);
  transition: transform 1.2s var(--ease);
}
/* closed: sit a bit lower & gently float */
.welcome:not(.s-flap) .env { transform: translateY(calc(var(--W) * .12)); }
.welcome:not(.s-flap) .env__back,
.welcome:not(.s-flap) .env__pocket,
.welcome:not(.s-flap) .env__flap,
.welcome:not(.s-flap) .seal { animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { translate: 0 -5px; } }

.env__back {
  position: absolute; inset: 0; z-index: 1;
  border-radius: 6px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #6c783d, #77833f);
  box-shadow: 0 calc(var(--W) * .06) calc(var(--W) * .12) rgba(60, 66, 30, .28), 0 2px 4px rgba(60, 66, 30, .2);
}
.env__pocket { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 -1px 1px rgba(40, 45, 20, .12)); }
.grain { fill: #2a2a10; filter: url(#paperNoise); opacity: .14; }
.env__pocket .grain { clip-path: inset(0 round 6px); }

/* flap (3D) */
.env__flap {
  position: absolute; left: 0; top: 0; z-index: 4;
  width: 100%; height: calc(var(--W) * .4333);
  transform-origin: 50% 0;
  transform: perspective(1100px) rotateX(0deg);
  transform-style: preserve-3d;
  transition: transform 1.1s cubic-bezier(.55, .05, .3, 1);
}
.face { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.face--front { filter: drop-shadow(0 3px 3px rgba(40, 45, 20, .25)); }
.face--back { transform: rotateX(180deg); }
.face--front .grain { opacity: .16; }
.welcome.s-flap .env__flap { transform: perspective(1100px) rotateX(180deg); }
.welcome.s-flap-back .env__flap { z-index: 0; }

/* wax seal */
.seal {
  position: absolute; z-index: 6;
  left: 50%; top: calc(var(--H) * .56);
  width: calc(var(--W) * .2); height: calc(var(--W) * .2);
  margin: calc(var(--W) * -.1) 0 0 calc(var(--W) * -.1);
  padding: 0; border: 0; background: none;
  filter: drop-shadow(0 3px 3px rgba(40, 5, 10, .35));
  transition: transform .5s var(--ease);
}
.seal svg { width: 100%; height: 100%; overflow: visible; }
.welcome:not(.s-flap) .seal::after {
  content: ""; position: absolute; inset: -14%; border-radius: 50%;
  border: 1px solid rgba(92, 15, 29, .45);
  animation: ring 2.2s ease-out infinite;
}
@keyframes ring { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.welcome.s-seal .seal { animation: sealPop .55s var(--ease); }
@keyframes sealPop { 40% { transform: scale(1.18) rotate(-6deg); } 100% { transform: scale(1); } }

/* ---------- Cards ---------- */
.card {
  position: absolute; z-index: 2;
  left: calc(var(--W) * .27); top: calc(var(--W) * .02);
  width: calc(var(--W) * .46); height: calc(var(--W) * .62);
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(40, 45, 20, .22), 0 1px 2px rgba(40, 45, 20, .2);
  transition: transform 1.15s cubic-bezier(.45, .05, .25, 1);
  will-change: transform;
}
.card--green {
  --x0: calc(var(--W) * -.025); --y0: 0px;
  --x1: calc(var(--W) * -.21); --y1: calc(var(--H) * .7); --r1: -4deg;
  color: var(--ivory);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #56653a, #48562d);
}
.card--green::before {
  content: ""; position: absolute; inset: 6%;
  border: 1px solid rgba(241, 237, 227, .55);
}
.card--ivory {
  --x0: calc(var(--W) * .03); --y0: calc(var(--W) * .015);
  --x1: calc(var(--W) * .27); --y1: calc(var(--H) * .4); --r1: 3.5deg;
  z-index: 2;
  color: var(--olive-ink);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .28  0 0 0 0 .2  0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(170deg, #f5f2ea, #ebe6da);
}
.card__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.card__frame path { fill: none; stroke: #7d8559; stroke-width: .5; vector-effect: non-scaling-stroke; }
.card__frame path + path { stroke-opacity: .45; }

.card { transform: translate(var(--x0), var(--y0)); }
.welcome.s-rise .card { transform: translate(var(--x0), calc(var(--y0) - var(--W) * .72)); }
.welcome.s-rise .card--ivory { transition-delay: .12s; }
.welcome.s-out .card { z-index: 7; transform: translate(var(--x1), var(--y1)) rotate(var(--r1)); }
.welcome.s-out .card--ivory { z-index: 8; }

.card__in {
  position: relative; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 12% 10%; text-align: center;
}
.card p { margin: 0; }
.card__small {
  font-family: var(--f-serif); font-weight: 600;
  font-size: calc(var(--W) * .028); line-height: 1.5; letter-spacing: .06em; text-transform: uppercase;
}
.card--green .card__small { margin-bottom: 10%; }
.card__script { font-family: var(--f-script); font-size: calc(var(--W) * .07); line-height: 1.1; white-space: nowrap; }
.card__amp { font-family: var(--f-script); font-size: calc(var(--W) * .07); line-height: 1; opacity: .9; margin: 1% 0 !important; }
.card__num { font-family: var(--f-serif); font-weight: 500; font-variant-numeric: lining-nums; font-size: calc(var(--W) * .085); line-height: 1; }
.card__month { font-family: var(--f-script); font-size: calc(var(--W) * .1); line-height: 1.05; margin: 2% 0 !important; }
.card--ivory .card__small { margin-top: 10%; font-size: calc(var(--W) * .025); letter-spacing: .04em; font-variant-numeric: lining-nums; }

.pearl {
  position: absolute; width: calc(var(--W) * .016); height: calc(var(--W) * .016); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0%, #efe9dc 45%, #b9b09c 100%);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.p1 { left: 14%; top: 11%; } .p2 { right: 14%; top: 11%; }
.p3 { left: 11%; top: 50%; } .p4 { right: 11%; top: 50%; }
.p5 { left: 14%; bottom: 11%; } .p6 { right: 14%; bottom: 11%; }

/* ---------- Bouquets ---------- */
.bouquet { position: absolute; z-index: 9; pointer-events: none; }
.bouquet svg { width: 100%; height: 100%; overflow: visible; }
.bouquet--a { width: calc(var(--W) * .44); height: calc(var(--W) * .572); left: calc(var(--W) * -.13); top: calc(var(--H) * .2); }
.bouquet--b { width: calc(var(--W) * .4); height: calc(var(--W) * .52); left: calc(var(--W) * .66); top: calc(var(--H) * .08); }
.bouquet .bloom { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0) rotate(-40deg); opacity: 0; transition: transform 1s cubic-bezier(.34, 1.45, .5, 1), opacity .6s ease; }
.bouquet .strand { transform-box: fill-box; transform-origin: 50% 0; transform: scaleY(0); transition: transform 1.4s var(--ease); }
.bouquet .strand.sway { animation: strandSway 4s ease-in-out infinite; }
@keyframes strandSway { 0%, 100% { rotate: -2deg; } 50% { rotate: 3deg; } }
.welcome.s-bloom .bouquet .bloom { transform: none; opacity: 1; }
.welcome.s-bloom .bouquet .strand { transform: none; }

/* names shown above the closed envelope, fade as the flap opens */
.welcome__names {
  position: absolute; left: -8%; right: -8%; top: calc(var(--W) * .12);
  margin: 0; text-align: center;
  font-family: var(--f-script); font-weight: 400; font-size: calc(var(--W) * .13); line-height: 1.1;
  color: var(--olive-d);
  transition: opacity .5s ease, transform .6s ease;
}
.welcome__names span { display: block; font-family: var(--f-serif); font-size: 13px; letter-spacing: .4em; color: var(--olive-ink); margin-top: 8px; font-variant-numeric: lining-nums; }
.welcome.s-flap .welcome__names { opacity: 0; transform: translateY(-10px); }

/* ---------- Guest / button ---------- */
/* Tên khách hiện ngay trên nút, sau khi thiệp đã trượt ra */
.welcome__guest {
  position: relative; z-index: 12;
  margin: 0 0 calc(var(--W) * .03); text-align: center;
  font-family: var(--f-serif); font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--olive-ink);
  opacity: 0; transform: translateY(10px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.welcome__guest strong { display: block; margin-top: 2px; font-family: var(--f-script); font-weight: 400; font-size: 32px; letter-spacing: 0; text-transform: none; color: var(--burg); line-height: 1.2; }
.welcome.s-ready .welcome__guest { opacity: 1; transform: none; }

.welcome__enter {
  position: relative; z-index: 12;
  margin-top: calc(var(--W) * .02);
  background: var(--burg); border-color: var(--burg); color: var(--ivory);
  box-shadow: 0 10px 22px rgba(92, 15, 29, .3);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.welcome.s-ready .welcome__enter { opacity: 1; transform: none; pointer-events: auto; animation: pulseB 2.4s 1s ease-in-out infinite; }
@keyframes pulseB { 0%, 100% { box-shadow: 0 10px 22px rgba(92, 15, 29, .3), 0 0 0 0 rgba(92, 15, 29, .35); } 50% { box-shadow: 0 10px 22px rgba(92, 15, 29, .3), 0 0 0 12px rgba(92, 15, 29, 0); } }

/* ---------- Petals ---------- */
.welcome__petals { position: absolute; inset: 0; pointer-events: none; z-index: 11; overflow: hidden; }
.petal {
  position: absolute; top: -40px;
  width: var(--s); height: calc(var(--s) * .72);
  border-radius: 80% 10% 80% 10%;
  background: var(--c);
  opacity: 0;
  animation: fall var(--d) linear var(--dl) infinite;
}
@keyframes fall {
  0% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  8% { opacity: .9; }
  100% { opacity: .9; transform: translate(var(--dx), 110vh) rotate(var(--rot)); }
}

@keyframes wIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes wDrop { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .petal { display: none; }
}