body.envelope-locked {
  overflow: hidden;
  height: 100%;
  overscroll-behavior: none;
}

body.envelope-locked .invite-tabs,
body.envelope-locked .scroll-progress {
  visibility: hidden;
}

.envelope-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px 16px 32px;
  background:
    radial-gradient(1200px 700px at 50% 12%, color-mix(in srgb, var(--env-paper) 18%, transparent), transparent 62%),
    linear-gradient(180deg, var(--env-scene), color-mix(in srgb, var(--env-scene) 78%, #000));
  color: var(--env-ink, #ead9b2);
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.envelope-overlay.is-gone {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.envelope-hint {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--env-ink) 72%, #fff);
  animation: envelope-hint 2.4s ease-in-out infinite;
}

.envelope-skip {
  appearance: none;
  background: none;
  border: 0;
  color: color-mix(in srgb, var(--env-ink) 70%, #fff);
  font: inherit;
  font-size: 0.86rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.opener-motes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(255, 244, 220, 0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 22%, rgba(255, 244, 220, 0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 62%, rgba(255, 244, 220, 0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 32% 74%, rgba(255, 244, 220, 0.12) 0 1px, transparent 2px);
  animation: motes-drift 9s ease-in-out infinite;
}

.envelope-pack {
  position: relative;
  border: 0;
  background: none;
  padding: 72px 12px 28px;
  cursor: pointer;
  perspective: 1400px;
}

.envelope-3d {
  position: relative;
  width: min(86vw, 360px);
  height: calc(min(86vw, 360px) * 0.66);
  overflow: visible;
  transform-style: preserve-3d;
  transform: rotateX(11deg) rotateY(-5deg);
}

.envelope-pack:not(.is-opening) .envelope-3d {
  animation: env-idle 4.2s ease-in-out infinite;
}

.opener-bloom,
.opener-gift,
.opener-folio,
.opener-lantern,
.opener-star,
.opener-gate {
  display: none;
  position: relative;
  width: min(78vw, 300px);
  height: 340px;
}

.is-kind-bloom .envelope-3d,
.is-kind-gift .envelope-3d,
.is-kind-folio .envelope-3d,
.is-kind-lantern .envelope-3d,
.is-kind-star .envelope-3d,
.is-kind-gate .envelope-3d,
.is-kind-none .envelope-3d {
  display: none;
}

.is-kind-bloom .opener-bloom,
.is-kind-gift .opener-gift,
.is-kind-folio .opener-folio,
.is-kind-lantern .opener-lantern,
.is-kind-star .opener-star,
.is-kind-gate .opener-gate {
  display: block;
}

.envelope-shadow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -16%;
  height: 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.42), transparent 70%);
  z-index: 0;
}

.envelope-back,
.envelope-face,
.envelope-flap-out,
.envelope-wing,
.envelope-letter {
  background-color: var(--env-paper);
  background-image:
    linear-gradient(165deg, rgba(255, 255, 255, 0.26), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(40, 24, 10, 0.14)),
    repeating-linear-gradient(-18deg, transparent 0 9px, rgba(70, 42, 18, 0.055) 10px),
    repeating-linear-gradient(72deg, transparent 0 13px, rgba(255, 255, 255, 0.04) 14px);
}

.envelope-back {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 3px 3px 8px 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

.envelope-lining {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 6%;
  height: 48%;
  z-index: 2;
  border-radius: 2px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.18), transparent 55%),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--env-lining) 86%, #fff 14%) 0 8px, var(--env-lining) 8px 16px);
  opacity: 0.92;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.envelope-pocket {
  position: absolute;
  left: 8%;
  right: 8%;
  top: -78%;
  height: 178%;
  z-index: 3;
  overflow: visible;
  pointer-events: none;
}

.envelope-letter {
  position: absolute;
  left: 2%;
  right: 2%;
  top: 49%;
  height: 50%;
  z-index: 3;
  border-radius: 2px 2px 4px 4px;
  padding: 20px 16px 16px;
  text-align: center;
  color: var(--env-ink);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 10px 18px rgba(0, 0, 0, 0.08);
  transform: translateY(6%);
  transition: transform 1.12s cubic-bezier(0.22, 1, 0.32, 1), box-shadow 0.45s ease;
}

.letter-edge {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 5px;
  background:
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--env-ink) 18%, transparent) 18%, transparent 50%, color-mix(in srgb, var(--env-ink) 18%, transparent) 82%, transparent);
  opacity: 0.45;
}

.letter-rule {
  display: block;
  width: 42px;
  height: 1px;
  margin: 0 auto 10px;
  background: color-mix(in srgb, var(--env-ink) 35%, transparent);
}

.envelope-lip {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 27%;
  height: 10%;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.22), transparent 70%);
  clip-path: polygon(0 40%, 50% 0, 100% 40%, 100% 100%, 0 100%);
  opacity: 0.55;
}

.envelope-letter-kicker {
  margin: 0 0 8px;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.72;
}

.envelope-letter-names {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  line-height: 1.1;
}

.envelope-letter-date {
  margin: 10px 0 0;
  font-size: 0.78rem;
  opacity: 0.78;
}

.envelope-letter-date:empty {
  display: none;
}

.envelope-wing {
  position: absolute;
  top: 10%;
  bottom: 0;
  width: 54%;
  z-index: 4;
}

.envelope-wing-l {
  left: 0;
  clip-path: polygon(0 0, 100% 36%, 0 100%);
  background-image:
    linear-gradient(115deg, rgba(0, 0, 0, 0.1), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.08));
}

.envelope-wing-r {
  right: 0;
  clip-path: polygon(100% 0, 0 36%, 100% 100%);
  background-image:
    linear-gradient(245deg, rgba(0, 0, 0, 0.1), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.08));
}

.envelope-face {
  position: absolute;
  inset: 29% 0 0;
  z-index: 5;
  clip-path: polygon(0 20%, 50% 0, 100% 20%, 100% 100%, 0 100%);
  border-radius: 0 0 8px 8px;
  box-shadow:
    inset 0 16px 22px rgba(0, 0, 0, 0.12),
    inset 0 -8px 16px rgba(255, 255, 255, 0.08);
}

.envelope-address {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16%;
  z-index: 6;
  text-align: center;
  color: var(--env-ink);
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.envelope-address small {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.7;
}

.envelope-address strong {
  display: block;
  margin-top: 4px;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 500;
}

.envelope-flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 56%;
  z-index: 7;
  transform-origin: top center;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.envelope-flap-out,
.envelope-flap-in {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.envelope-flap-in {
  background-color: var(--env-lining);
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.16)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 7px, transparent 7px 14px);
  transform: rotateX(180deg);
}

.envelope-seal {
  position: absolute;
  left: 50%;
  top: 42%;
  z-index: 8;
  width: 74px;
  height: 82px;
  display: grid;
  place-items: center;
  background: none;
  color: #f4e6c0;
  font-family: var(--serif);
  transform: translate(-50%, -50%);
  transition: opacity 0.32s ease, transform 0.42s ease;
  filter: drop-shadow(2px 8px 10px rgba(40, 24, 8, 0.48));
}

.seal-svg {
  width: 74px;
  height: 82px;
  display: block;
}

.seal-initials {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.28;
  text-shadow: 0 1px 0 rgba(255, 236, 190, 0.35);
  pointer-events: none;
}

.envelope-twine {
  display: none;
}

.envelope-pack.is-opening .envelope-seal,
.envelope-pack.is-opening .envelope-twine {
  opacity: 0;
  transform: translate(-50%, -78%) scale(0.38);
}

.envelope-pack.is-opening .envelope-flap,
.envelope-pack.is-open .envelope-flap,
.envelope-pack.is-drawn .envelope-flap {
  transform: rotateX(176deg);
}

.envelope-pack.is-drawn .envelope-flap {
  z-index: 1;
}

.envelope-pack.is-drawn .envelope-pocket {
  z-index: 9;
  transform: translateZ(72px);
}

.envelope-pack.is-drawn .envelope-3d .envelope-letter {
  transform: translateY(-70%) translateZ(12px);
  box-shadow: 0 22px 32px rgba(0, 0, 0, 0.2);
  clip-path: none;
}

.envelope-pack.is-opening .envelope-address,
.envelope-pack.is-open .envelope-address,
.envelope-pack.is-drawn .envelope-address {
  opacity: 0;
}

.envelope-pack.is-open .envelope-lip,
.envelope-pack.is-drawn .envelope-lip {
  opacity: 0;
}

.envelope-overlay.is-revealing .envelope-3d,
.envelope-overlay.is-revealing .opener-bloom,
.envelope-overlay.is-revealing .opener-gift,
.envelope-overlay.is-revealing .opener-folio,
.envelope-overlay.is-revealing .opener-lantern,
.envelope-overlay.is-revealing .opener-star,
.envelope-pack.is-revealed .envelope-3d,
.envelope-pack.is-revealed .opener-bloom,
.envelope-pack.is-revealed .opener-gift,
.envelope-pack.is-revealed .opener-folio,
.envelope-pack.is-revealed .opener-lantern,
.envelope-pack.is-revealed .opener-star {
  transform: scale(1.08);
  opacity: 0;
  transition: transform 0.8s ease, opacity 0.7s ease;
}

.envelope-overlay.is-revealing .envelope-hint,
.envelope-overlay.is-revealing .envelope-skip {
  opacity: 0;
}

.is-style-wax {
  --env-paper: #f3ead8;
  --env-paper-2: #e4d4b8;
  --env-ink: #5a3d32;
  --env-lining: #7a3b32;
  --env-seal: #8b2e2e;
  --env-seal-ink: #f4e4c8;
  --env-scene: #241910;
}

.is-style-linen {
  --env-paper: #efe6d6;
  --env-paper-2: #d9cdb6;
  --env-ink: #3f4a3c;
  --env-lining: #6b5e4e;
  --env-seal: #4a5344;
  --env-seal-ink: #f0eadf;
  --env-scene: #22241f;
}

.is-style-midnight {
  --env-paper: #1b2433;
  --env-paper-2: #101722;
  --env-ink: #ead9b2;
  --env-lining: #c9a227;
  --env-seal: #c9a227;
  --env-seal-ink: #1b2433;
  --env-scene: #07090d;
}

.is-style-blush {
  --env-paper: #f3ddd6;
  --env-paper-2: #e4c4bb;
  --env-ink: #7a3d48;
  --env-lining: #b76e79;
  --env-seal: #efe0d8;
  --env-seal-ink: #7a3d48;
  --env-scene: #2f2224;
}

.is-style-kraft {
  --env-paper: #c8a36a;
  --env-paper-2: #b08a52;
  --env-ink: #3d2a16;
  --env-lining: #6b4423;
  --env-seal: #5c3a1e;
  --env-seal-ink: #f0e0c8;
  --env-scene: #24180f;
}

.is-style-kraft .envelope-twine {
  display: block;
  position: absolute;
  left: 50%;
  top: 18%;
  z-index: 6;
  width: 3px;
  height: 68%;
  background: linear-gradient(#8a6234, #3d2a16);
  transform: translateX(-50%) rotate(16deg);
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.is-style-kraft .envelope-twine::before,
.is-style-kraft .envelope-twine::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: inherit;
}

.is-style-kraft .envelope-twine::before {
  transform: rotate(-34deg);
}

.is-style-kraft .envelope-twine::after {
  top: 38%;
  left: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #d4b483, #5c3a1e);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.28);
}

.is-style-sage {
  --env-paper: #d7e0d0;
  --env-paper-2: #c0cbb6;
  --env-ink: #2c4a3a;
  --env-lining: #4a5d3f;
  --env-seal: #3f5a48;
  --env-seal-ink: #eef3ea;
  --env-scene: #17211b;
}

.is-style-champagne {
  --env-paper: #f4e6c8;
  --env-paper-2: #e4d0a8;
  --env-ink: #6a4a28;
  --env-lining: #c9a227;
  --env-seal: #b08a5a;
  --env-seal-ink: #fff6e4;
  --env-scene: #2a2216;
}

.is-style-wine {
  --env-paper: #4a1c28;
  --env-paper-2: #2e1018;
  --env-ink: #f0d8c8;
  --env-lining: #8b2e3a;
  --env-seal: #c45c6a;
  --env-seal-ink: #fff0e8;
  --env-scene: #16080c;
}

.is-style-slate {
  --env-paper: #d8dde4;
  --env-paper-2: #b7bec8;
  --env-ink: #2c3440;
  --env-lining: #4b5563;
  --env-seal: #1e2a44;
  --env-seal-ink: #e8eef4;
  --env-scene: #12161c;
}

.is-style-emerald {
  --env-paper: #dce8df;
  --env-paper-2: #c2d5c8;
  --env-ink: #1f3d32;
  --env-lining: #2f6b55;
  --env-seal: #1a4d3c;
  --env-seal-ink: #e8f4ee;
  --env-scene: #0f1c18;
}

.is-style-navy {
  --env-paper: #1a2744;
  --env-paper-2: #121c32;
  --env-ink: #e8dff0;
  --env-lining: #3d5a8a;
  --env-seal: #c9a227;
  --env-seal-ink: #1a2744;
  --env-scene: #070b14;
}

.is-style-rose {
  --env-paper: #f6e4e8;
  --env-paper-2: #e8cdd4;
  --env-ink: #6b3040;
  --env-lining: #c4788a;
  --env-seal: #a84d62;
  --env-seal-ink: #fff4f6;
  --env-scene: #2a161c;
}

.is-kind-bloom,
.is-kind-gift,
.is-kind-folio,
.is-kind-lantern {
  --opener-petal: color-mix(in srgb, var(--env-lining) 48%, #fff7f2 52%);
  --opener-petal-deep: var(--env-lining);
  --opener-petal-tip: color-mix(in srgb, var(--env-paper) 35%, var(--env-lining) 65%);
  --opener-core: var(--env-seal);
  --opener-core-glow: color-mix(in srgb, var(--env-seal) 55%, #ffe9b0);
  --opener-box: var(--env-lining);
  --opener-box-deep: color-mix(in srgb, var(--env-lining) 68%, #14080c);
  --opener-box-light: color-mix(in srgb, var(--env-lining) 62%, #fff 38%);
  --opener-ribbon: var(--env-seal);
  --opener-ribbon-light: color-mix(in srgb, var(--env-seal) 45%, #fff3d0);
  --opener-lantern: color-mix(in srgb, var(--env-paper) 55%, var(--env-lining) 45%);
  --opener-lantern-deep: color-mix(in srgb, var(--env-lining) 75%, #2a1008);
  --opener-lantern-glow: color-mix(in srgb, var(--env-seal) 40%, #ffc266 60%);
}

.is-kind-bloom {
  --opener-petal: color-mix(in srgb, var(--env-lining) 28%, #fff6ef 72%);
  --opener-petal-deep: color-mix(in srgb, var(--env-lining) 52%, #b0124a 48%);
  --opener-petal-tip: color-mix(in srgb, var(--env-paper) 22%, #fff 78%);
  --opener-core: #1a1018;
  --opener-core-glow: color-mix(in srgb, var(--env-lining) 35%, #2a1830 65%);
}


.opener-bloom {
  width: min(96vw, 520px);
  height: 560px;
  perspective: 780px;
}

.bloom-bed {
  position: absolute;
  inset: 12% 6% 8%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 58%, color-mix(in srgb, var(--opener-petal-deep) 16%, transparent), transparent 58%),
    radial-gradient(ellipse at 50% 78%, rgba(18, 28, 16, 0.42), transparent 70%);
  pointer-events: none;
}

.bloom-glow {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 18%;
  height: 52%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--opener-petal-deep) 32%, transparent), transparent 68%);
  opacity: 0.28;
  transform: scale(0.62);
  transition: opacity 0.9s ease, transform 1.1s ease;
  pointer-events: none;
}

.bloom-flower {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 420px;
  height: 420px;
  margin: -210px 0 0 -210px;
  transform-style: preserve-3d;
  transform: rotateX(6deg) scale(0.78);
  transition: transform 1.35s cubic-bezier(0.22, 1, 0.32, 1), filter 0.6s ease;
  z-index: 4;
}

.envelope-pack.is-opening .bloom-flower,
.envelope-pack.is-open .bloom-flower,
.envelope-pack.is-drawn .bloom-flower {
  transform: rotateX(2deg) scale(1.52);
}

.bloom-disk {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  pointer-events: none;
  transform: scale(0.35);
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.32, 1) 0.35s;
}

.envelope-pack.is-opening .bloom-disk,
.envelope-pack.is-open .bloom-disk,
.envelope-pack.is-drawn .bloom-disk {
  transform: scale(1);
}

.envelope-pack:not(.is-opening):not(.is-open):not(.is-drawn) .bloom-flower {
  animation: bloom-idle 6s ease-in-out infinite;
}

.bloom-ring {
  position: absolute;
  inset: 0;
}

.bloom-ring i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 108px;
  margin: -108px 0 0 -29px;
  transform-origin: 50% 100%;
  border-radius: 50% 50% 46% 48% / 72% 68% 30% 34%;
  background:
    radial-gradient(ellipse at 50% 14%, #fff 0 18%, transparent 42%),
    radial-gradient(ellipse at 50% 100%, var(--opener-petal-deep) 0 20%, transparent 46%),
    radial-gradient(ellipse at 38% 58%, color-mix(in srgb, var(--opener-petal-deep) 70%, #fff) 0 16%, transparent 40%),
    linear-gradient(180deg, #fffaf4 0%, #f7ece8 28%, var(--opener-petal) 58%, var(--opener-petal-deep) 100%);
  box-shadow:
    inset 0 -16px 18px color-mix(in srgb, var(--opener-petal-deep) 28%, transparent),
    inset 5px 0 12px rgba(255, 255, 255, 0.22),
    0 10px 16px rgba(30, 8, 16, 0.16);
  filter: saturate(1.06);
  transition: transform 1.05s cubic-bezier(0.22, 1, 0.32, 1);
}

.bloom-ring i::after {
  content: "";
  position: absolute;
  inset: 18% 42% 8%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(90, 16, 40, 0.12));
  border-radius: 99px;
  opacity: 0.55;
  pointer-events: none;
}

.bloom-ring-a i {
  width: 86px;
  height: 156px;
  margin: -156px 0 0 -43px;
  transform: rotate(calc(var(--i) * 45deg + var(--jitter, 0deg))) scale(0.4) translateY(8px);
}

.bloom-ring-b i {
  width: 68px;
  height: 124px;
  margin: -124px 0 0 -34px;
  opacity: 0.96;
  transform: rotate(calc(22.5deg + var(--i) * 45deg + var(--jitter, 0deg))) scale(0.32) translateY(6px);
  background:
    radial-gradient(ellipse at 50% 12%, #fff 0 20%, transparent 40%),
    radial-gradient(ellipse at 50% 100%, var(--opener-petal-deep) 0 26%, transparent 50%),
    linear-gradient(180deg, #fff8f2 0%, var(--opener-petal) 48%, var(--opener-petal-deep) 100%);
}

.bloom-ring-c i {
  width: 38px;
  height: 68px;
  margin: -68px 0 0 -19px;
  transform: rotate(calc(11deg + var(--i) * 45deg + var(--jitter, 0deg))) scale(0.26) translateY(4px);
  background:
    radial-gradient(ellipse at 50% 10%, #fff 0 16%, transparent 36%),
    radial-gradient(ellipse at 50% 100%, var(--opener-petal-deep) 0 34%, transparent 58%),
    linear-gradient(180deg, #fff 0%, var(--opener-petal-deep) 100%);
}

.bloom-ring-d {
  display: none;
  z-index: 3;
}

.bloom-ring-d i {
  width: 30px;
  height: 48px;
  margin: -48px 0 0 -15px;
  transform: rotate(calc(17deg + var(--i) * 45deg + var(--jitter, 0deg))) scale(0.2) translateY(2px);
}

.bloom-ring-a i:nth-child(1) { --i: 0; --jitter: -3deg; border-radius: 52% 48% 44% 56% / 74% 66% 32% 36%; transition-delay: 0s; }
.bloom-ring-a i:nth-child(2) { --i: 1; --jitter: 2deg; border-radius: 46% 54% 50% 48% / 70% 76% 28% 34%; transition-delay: 0.05s; }
.bloom-ring-a i:nth-child(3) { --i: 2; --jitter: -2deg; border-radius: 50% 50% 42% 52% / 68% 72% 34% 30%; transition-delay: 0.1s; }
.bloom-ring-a i:nth-child(4) { --i: 3; --jitter: 4deg; border-radius: 54% 46% 48% 50% / 76% 64% 30% 38%; transition-delay: 0.15s; }
.bloom-ring-a i:nth-child(5) { --i: 4; --jitter: -1deg; border-radius: 48% 52% 46% 54% / 72% 70% 32% 34%; transition-delay: 0.08s; }
.bloom-ring-a i:nth-child(6) { --i: 5; --jitter: 3deg; border-radius: 50% 48% 52% 46% / 66% 74% 36% 28%; transition-delay: 0.13s; }
.bloom-ring-a i:nth-child(7) { --i: 6; --jitter: -4deg; border-radius: 44% 56% 48% 50% / 78% 68% 26% 36%; transition-delay: 0.04s; }
.bloom-ring-a i:nth-child(8) { --i: 7; --jitter: 1deg; border-radius: 52% 50% 44% 48% / 70% 72% 30% 32%; transition-delay: 0.18s; }

.bloom-ring-b i:nth-child(1) { --i: 0; --jitter: 2deg; transition-delay: 0.2s; }
.bloom-ring-b i:nth-child(2) { --i: 1; --jitter: -3deg; transition-delay: 0.25s; }
.bloom-ring-b i:nth-child(3) { --i: 2; --jitter: 1deg; transition-delay: 0.3s; }
.bloom-ring-b i:nth-child(4) { --i: 3; --jitter: -2deg; transition-delay: 0.22s; }
.bloom-ring-b i:nth-child(5) { --i: 4; --jitter: 3deg; transition-delay: 0.28s; }
.bloom-ring-b i:nth-child(6) { --i: 5; --jitter: -1deg; transition-delay: 0.34s; }
.bloom-ring-b i:nth-child(7) { --i: 6; --jitter: 4deg; transition-delay: 0.24s; }
.bloom-ring-b i:nth-child(8) { --i: 7; --jitter: -4deg; transition-delay: 0.32s; }

.bloom-ring-c i:nth-child(1) { --i: 0; --jitter: -2deg; transition-delay: 0.42s; }
.bloom-ring-c i:nth-child(2) { --i: 1; --jitter: 3deg; transition-delay: 0.46s; }
.bloom-ring-c i:nth-child(3) { --i: 2; --jitter: -1deg; transition-delay: 0.5s; }
.bloom-ring-c i:nth-child(4) { --i: 3; --jitter: 2deg; transition-delay: 0.44s; }
.bloom-ring-c i:nth-child(5) { --i: 4; --jitter: -3deg; transition-delay: 0.52s; }
.bloom-ring-c i:nth-child(6) { --i: 5; --jitter: 1deg; transition-delay: 0.48s; }
.bloom-ring-c i:nth-child(7) { --i: 6; --jitter: 4deg; transition-delay: 0.54s; }
.bloom-ring-c i:nth-child(8) { --i: 7; --jitter: -4deg; transition-delay: 0.4s; }

.bloom-ring-d i:nth-child(1) { --i: 0; --jitter: 2deg; transition-delay: 0.56s; }
.bloom-ring-d i:nth-child(2) { --i: 1; --jitter: -2deg; transition-delay: 0.6s; }
.bloom-ring-d i:nth-child(3) { --i: 2; --jitter: 1deg; transition-delay: 0.58s; }
.bloom-ring-d i:nth-child(4) { --i: 3; --jitter: -3deg; transition-delay: 0.64s; }
.bloom-ring-d i:nth-child(5) { --i: 4; --jitter: 3deg; transition-delay: 0.62s; }
.bloom-ring-d i:nth-child(6) { --i: 5; --jitter: -1deg; transition-delay: 0.66s; }
.bloom-ring-d i:nth-child(7) { --i: 6; --jitter: 4deg; transition-delay: 0.57s; }
.bloom-ring-d i:nth-child(8) { --i: 7; --jitter: -4deg; transition-delay: 0.63s; }

.bloom-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  pointer-events: none;
}

.bloom-pistil {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #3a2a22, #0c0806 62%, #050403);
  box-shadow:
    0 0 0 2px rgba(12, 8, 6, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.08),
    0 3px 6px rgba(0, 0, 0, 0.35);
}

.bloom-stamens em {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 16px;
  margin: -16px 0 0 -2.5px;
  transform-origin: 50% 100%;
  border-radius: 60% 60% 40% 40%;
  background:
    radial-gradient(circle at 50% 18%, #2c2438 0 42%, transparent 46%),
    linear-gradient(180deg, #1a1220 0%, #0e0a12 100%);
  box-shadow: 0 0 0 0.5px rgba(8, 6, 12, 0.45);
  transform: rotate(calc(var(--k) * 15deg)) scale(0.35);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.32, 1) 0.55s;
}

.bloom-stamens em:nth-child(odd) { height: 15px; width: 4.5px; }
.bloom-stamens em:nth-child(3n) { height: 17px; }
.bloom-stamens em:nth-child(1) { --k: 0; }
.bloom-stamens em:nth-child(2) { --k: 1; }
.bloom-stamens em:nth-child(3) { --k: 2; }
.bloom-stamens em:nth-child(4) { --k: 3; }
.bloom-stamens em:nth-child(5) { --k: 4; }
.bloom-stamens em:nth-child(6) { --k: 5; }
.bloom-stamens em:nth-child(7) { --k: 6; }
.bloom-stamens em:nth-child(8) { --k: 7; }
.bloom-stamens em:nth-child(9) { --k: 8; }
.bloom-stamens em:nth-child(10) { --k: 9; }
.bloom-stamens em:nth-child(11) { --k: 10; }
.bloom-stamens em:nth-child(12) { --k: 11; }
.bloom-stamens em:nth-child(13) { --k: 12; }
.bloom-stamens em:nth-child(14) { --k: 13; }
.bloom-stamens em:nth-child(15) { --k: 14; }
.bloom-stamens em:nth-child(16) { --k: 15; }
.bloom-stamens em:nth-child(17) { --k: 16; }
.bloom-stamens em:nth-child(18) { --k: 17; }
.bloom-stamens em:nth-child(19) { --k: 18; }
.bloom-stamens em:nth-child(20) { --k: 19; }
.bloom-stamens em:nth-child(21) { --k: 20; }
.bloom-stamens em:nth-child(22) { --k: 21; }
.bloom-stamens em:nth-child(23) { --k: 22; }
.bloom-stamens em:nth-child(24) { --k: 23; }

.opener-bloom .bloom-card {
  left: 50%;
  right: auto;
  top: 46%;
  width: min(72%, 200px);
  height: auto;
  min-height: 0;
  padding: 16px 14px;
  z-index: 12;
  opacity: 0;
  transform: translate(-50%, 10%) scale(0.55);
  background:
    linear-gradient(165deg, #fffdf8, #f4ead8 62%, #ead9c4);
  color: #3f2e24;
  border: 1px solid color-mix(in srgb, var(--opener-petal-deep) 22%, transparent);
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.24);
  transition: transform 0.95s cubic-bezier(0.22, 1, 0.32, 1), opacity 0.4s ease, box-shadow 0.45s ease;
}

.envelope-pack.is-opening .bloom-glow,
.envelope-pack.is-open .bloom-glow,
.envelope-pack.is-drawn .bloom-glow {
  opacity: 0.92;
  transform: scale(1.42);
}

.envelope-pack.is-opening .bloom-ring-a i,
.envelope-pack.is-open .bloom-ring-a i,
.envelope-pack.is-drawn .bloom-ring-a i {
  transform: rotate(calc(var(--i) * 45deg + var(--jitter, 0deg))) scale(1.12) translateY(-4px);
}

.envelope-pack.is-opening .bloom-ring-b i,
.envelope-pack.is-open .bloom-ring-b i,
.envelope-pack.is-drawn .bloom-ring-b i {
  transform: rotate(calc(22.5deg + var(--i) * 45deg + var(--jitter, 0deg))) scale(1.05) translateY(0);
}

.envelope-pack.is-opening .bloom-ring-c i,
.envelope-pack.is-open .bloom-ring-c i,
.envelope-pack.is-drawn .bloom-ring-c i {
  transform: rotate(calc(11deg + var(--i) * 45deg + var(--jitter, 0deg))) scale(1.0) translateY(4px);
}

.envelope-pack.is-opening .bloom-ring-d i,
.envelope-pack.is-open .bloom-ring-d i,
.envelope-pack.is-drawn .bloom-ring-d i {
  transform: rotate(calc(17deg + var(--i) * 45deg + var(--jitter, 0deg))) scale(0.92) translateY(8px);
}

.envelope-pack.is-opening .bloom-stamens em,
.envelope-pack.is-open .bloom-stamens em,
.envelope-pack.is-drawn .bloom-stamens em {
  transform: rotate(calc(var(--k) * 15deg)) scale(1) translateY(-4px);
}

.envelope-pack.is-drawn .opener-bloom .bloom-card {
  opacity: 1;
  transform: translate(-50%, -88%) scale(1);
  box-shadow:
    0 22px 40px rgba(0, 0, 0, 0.28),
    0 0 24px color-mix(in srgb, var(--opener-petal-deep) 18%, transparent);
}

.is-flower-rose {
  --opener-petal: #f0b8c0;
  --opener-petal-deep: #9c1228;
  --opener-petal-tip: #fff4f6;
  --opener-core: #3a0810;
}
.is-flower-rose .bloom-ring-d { display: block; }
.is-flower-rose .bloom-ring i {
  border-radius: 56% 44% 48% 52% / 72% 68% 34% 38%;
  background:
    radial-gradient(ellipse at 50% 12%, #ffe8ec 0 14%, transparent 34%),
    linear-gradient(180deg, #f0a8b4 0%, #c42840 46%, #7a1020 100%);
}
.is-flower-rose .bloom-ring-c i,
.is-flower-rose .bloom-ring-d i {
  border-radius: 48% 52% 40% 60% / 70% 64% 28% 42%;
}
.is-flower-rose .bloom-pistil {
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  background: radial-gradient(circle at 38% 32%, #7a1828, #2a060c 70%);
}
.is-flower-rose .bloom-stamens em {
  background:
    radial-gradient(circle at 50% 12%, #f2c4a8 0 40%, transparent 44%),
    linear-gradient(180deg, #8a2030, #4a1018);
}

.is-flower-daisy {
  --opener-petal: #fffdf8;
  --opener-petal-deep: #e8e0d2;
  --opener-petal-tip: #fff;
  --opener-core: #e2a020;
}
.is-flower-daisy .bloom-ring-c,
.is-flower-daisy .bloom-ring-d { display: none; }
.is-flower-daisy .bloom-disk {
  display: block;
  width: 78px;
  height: 78px;
  margin: -39px 0 0 -39px;
  background:
    radial-gradient(circle at 50% 50%, #c45c18 0 18%, #e8b030 34%, #f0c44a 58%, #d49220 100%);
  box-shadow:
    inset 0 0 0 6px rgba(120, 64, 8, 0.18),
    0 4px 10px rgba(40, 20, 0, 0.28);
}
.is-flower-daisy .bloom-disk::after {
  content: "";
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background-image: radial-gradient(circle, #6a3a10 1.1px, transparent 1.3px);
  background-size: 6px 6px;
  opacity: 0.45;
}
.is-flower-daisy .bloom-ring-a i,
.is-flower-daisy .bloom-ring-b i {
  width: 22px;
  height: 118px;
  margin: -118px 0 0 -11px;
  border-radius: 50% 50% 46% 46% / 18% 18% 82% 82%;
  background:
    linear-gradient(180deg, #fff 0%, #f7f3ea 62%, #e4d8c4 100%);
  box-shadow: inset 0 -10px 12px rgba(160, 140, 110, 0.16), 0 8px 12px rgba(20, 12, 0, 0.12);
}
.is-flower-daisy .bloom-ring-b i {
  height: 96px;
  margin: -96px 0 0 -11px;
}
.is-flower-daisy .bloom-center,
.is-flower-daisy .bloom-stamens { display: none; }

.is-flower-ice {
  --opener-petal: #d4def4;
  --opener-petal-deep: #5a6cb8;
  --opener-petal-tip: #f4f7ff;
  --opener-core: #3a4480;
}
.is-flower-ice .bloom-ring-d { display: block; }
.is-flower-ice .bloom-ring i {
  width: 34px;
  border-radius: 50% 50% 42% 42% / 86% 86% 12% 12%;
  background:
    radial-gradient(ellipse at 50% 8%, #fff 0 22%, transparent 40%),
    linear-gradient(180deg, #f3f6ff 0%, #b8c6ec 48%, #5e70b8 100%);
}
.is-flower-ice .bloom-ring-a i {
  height: 124px;
  margin: -124px 0 0 -17px;
}
.is-flower-ice .bloom-pistil {
  background: radial-gradient(circle at 40% 35%, #8a98d0, #2a3470 70%);
}
.is-flower-ice .bloom-stamens em {
  background:
    radial-gradient(circle at 50% 16%, #c8d2f0 0 46%, transparent 50%),
    linear-gradient(180deg, #6a78b8, #303a78);
}

.is-flower-pompon {
  --opener-petal: #e878b0;
  --opener-petal-deep: #b03078;
  --opener-petal-tip: #f8c0dc;
  --opener-core: #e8b84a;
}
.is-flower-pompon .bloom-ring-d { display: block; }
.is-flower-pompon .bloom-ring i {
  width: 28px;
  height: 36px;
  margin: -36px 0 0 -14px;
  border-radius: 48% 48% 40% 40% / 55% 55% 40% 40%;
  background:
    radial-gradient(ellipse at 50% 18%, #fff6fb 0 18%, transparent 36%),
    radial-gradient(ellipse at 50% 100%, #8a1860 0 28%, transparent 50%),
    linear-gradient(180deg, #f4a8cc, #c44888);
  box-shadow:
    inset 0 8px 10px rgba(255, 255, 255, 0.28),
    inset 0 -10px 12px rgba(80, 8, 40, 0.28);
}
.is-flower-pompon .bloom-ring-a i { height: 42px; margin: -42px 0 0 -14px; }
.is-flower-pompon .bloom-ring-b i { height: 34px; margin: -34px 0 0 -14px; }
.is-flower-pompon .bloom-pistil {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  background: radial-gradient(circle at 40% 35%, #f0d070, #c48a18 70%);
}
.is-flower-pompon .bloom-stamens { display: none; }
.is-flower-pompon .envelope-pack.is-opening .bloom-ring-a i,
.is-flower-pompon .envelope-pack.is-open .bloom-ring-a i,
.is-flower-pompon .envelope-pack.is-drawn .bloom-ring-a i {
  transform: rotate(calc(var(--i) * 45deg + var(--jitter, 0deg))) scale(1.15) translateY(-6px);
}
.is-flower-pompon .envelope-pack.is-opening .bloom-ring-b i,
.is-flower-pompon .envelope-pack.is-open .bloom-ring-b i,
.is-flower-pompon .envelope-pack.is-drawn .bloom-ring-b i {
  transform: rotate(calc(22.5deg + var(--i) * 45deg + var(--jitter, 0deg))) scale(1.02) translateY(2px);
}

.is-flower-sunflower {
  --opener-petal: #f0c430;
  --opener-petal-deep: #d48a10;
  --opener-petal-tip: #ffe98a;
  --opener-core: #3a2210;
}
.is-flower-sunflower .bloom-ring-c,
.is-flower-sunflower .bloom-ring-d { display: none; }
.is-flower-sunflower .bloom-disk {
  display: block;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  background:
    radial-gradient(circle at 50% 50%, #2a180c 0 36%, #5a3014 58%, #8a5a28 78%, #3a2010 100%);
  box-shadow: inset 0 0 0 8px rgba(90, 48, 16, 0.45), 0 6px 14px rgba(0, 0, 0, 0.35);
}
.is-flower-sunflower .bloom-disk::after {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background-image: radial-gradient(circle, #1a1008 1.4px, transparent 1.6px);
  background-size: 7px 7px;
  opacity: 0.7;
}
.is-flower-sunflower .bloom-ring-a i,
.is-flower-sunflower .bloom-ring-b i {
  width: 24px;
  height: 122px;
  margin: -122px 0 0 -12px;
  border-radius: 50% 50% 46% 46% / 16% 16% 84% 84%;
  background:
    radial-gradient(ellipse at 50% 8%, #fff6c8 0 16%, transparent 32%),
    linear-gradient(180deg, #ffe56a 0%, #f0b820 55%, #c47810 100%);
}
.is-flower-sunflower .bloom-ring-b i {
  height: 102px;
  margin: -102px 0 0 -12px;
}
.is-flower-sunflower .bloom-center,
.is-flower-sunflower .bloom-stamens { display: none; }

.is-flower-gerbera {
  --opener-petal: #f07828;
  --opener-petal-deep: #c43810;
  --opener-petal-tip: #ffc090;
  --opener-core: #8a9a28;
}
.is-flower-gerbera .bloom-ring-d { display: none; }
.is-flower-gerbera .bloom-disk {
  display: block;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background:
    radial-gradient(circle at 50% 50%, #6a7818 0 28%, #c45a18 48%, #e07020 70%, #9a3810 100%);
  box-shadow: inset 0 0 0 5px rgba(90, 40, 8, 0.28);
}
.is-flower-gerbera .bloom-disk::after {
  content: "";
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  background-image: radial-gradient(circle, #3a2808 1px, transparent 1.2px);
  background-size: 5px 5px;
  opacity: 0.4;
}
.is-flower-gerbera .bloom-ring i {
  width: 20px;
  border-radius: 50% 50% 44% 44% / 22% 22% 78% 78%;
  background:
    radial-gradient(ellipse at 50% 10%, #ffd0a8 0 18%, transparent 36%),
    linear-gradient(180deg, #ff9a48 0%, #e85818 58%, #b03010 100%);
}
.is-flower-gerbera .bloom-ring-a i {
  height: 120px;
  margin: -120px 0 0 -10px;
}
.is-flower-gerbera .bloom-ring-b i {
  height: 88px;
  margin: -88px 0 0 -10px;
}
.is-flower-gerbera .bloom-ring-c i {
  height: 58px;
  margin: -58px 0 0 -10px;
}
.is-flower-gerbera .bloom-center,
.is-flower-gerbera .bloom-stamens { display: none; }

.is-flower-star {
  --opener-petal: #8a2048;
  --opener-petal-deep: #4a0818;
  --opener-petal-tip: #c47890;
  --opener-core: #120408;
}
.is-flower-star .bloom-ring-a i:nth-child(n+6),
.is-flower-star .bloom-ring-b,
.is-flower-star .bloom-ring-c,
.is-flower-star .bloom-ring-d { display: none; }
.is-flower-star .bloom-ring-a i {
  width: 78px;
  height: 132px;
  margin: -132px 0 0 -39px;
  border-radius: 50% 50% 12% 12% / 78% 78% 8% 8%;
  clip-path: polygon(50% 0, 92% 88%, 50% 100%, 8% 88%);
  background:
    radial-gradient(ellipse at 50% 12%, #c47898 0 12%, transparent 28%),
    linear-gradient(180deg, #9a2858 0%, #5a1028 62%, #2a0810 100%);
  box-shadow: inset 0 -18px 16px rgba(10, 0, 4, 0.28);
  transform: rotate(calc(var(--i) * 72deg + var(--jitter, 0deg))) scale(0.38) translateY(10px);
}
.is-flower-star .bloom-pistil {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  background: radial-gradient(circle at 40% 32%, #3a1020, #0a0206 68%);
}
.is-flower-star .bloom-stamens em {
  height: 28px;
  width: 3px;
  background:
    radial-gradient(circle at 50% 10%, #6a2040 0 40%, transparent 46%),
    linear-gradient(180deg, #4a1020, #1a0810);
}
.is-flower-star .envelope-pack.is-opening .bloom-ring-a i,
.is-flower-star .envelope-pack.is-open .bloom-ring-a i,
.is-flower-star .envelope-pack.is-drawn .bloom-ring-a i {
  transform: rotate(calc(var(--i) * 72deg + var(--jitter, 0deg))) scale(1) translateY(-4px);
}

.opener-gift {
  height: 420px;
  width: min(86vw, 340px);
  perspective: 900px;
  isolation: isolate;
}

.envelope-pack:not(.is-opening):not(.is-open):not(.is-drawn) .gift-scene {
  animation: gift-idle 4.6s ease-in-out infinite;
}

.gift-shadow {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 6%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.48), transparent 72%);
  z-index: 0;
}

.gift-scene {
  position: absolute;
  left: 50%;
  top: 56%;
  width: 160px;
  height: 100px;
  margin: -50px 0 0 -80px;
  transform-style: preserve-3d;
  transform: rotateX(-38deg) rotateY(-30deg);
  transform-origin: 50% 50%;
  z-index: 1;
}

/* Box, lid and bow each get their own 3D context. In one shared context
   Chrome sorts the faces by centroid depth, which buries the lid plate
   behind the box walls; as separate layers the stacking order is fixed and
   always correct, because the lid is never behind the box. */
.gift-lid-scene { z-index: 3; }
.gift-bow-scene { z-index: 4; }

.envelope-pack.is-opening .gift-scene,
.envelope-pack.is-open .gift-scene,
.envelope-pack.is-drawn .gift-scene {
  animation: none;
  transform: rotateX(-38deg) rotateY(-30deg);
}

.gift-cube,
.gift-lid {
  position: absolute;
  transform-style: preserve-3d;
}

.gift-cube {
  inset: 0;
}

/* Wrapping paper: a sheen, a fine damask dot lattice and a woven grain. */
.gift-face,
.gift-lid-panel {
  --gift-paper:
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 34%),
    radial-gradient(circle at 8px 8px, color-mix(in srgb, var(--opener-ribbon-light) 34%, transparent) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 24px 24px, color-mix(in srgb, var(--opener-ribbon-light) 22%, transparent) 0 1px, transparent 1.8px),
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(0, 0, 0, 0.045) 9px 10px),
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(255, 255, 255, 0.035) 9px 10px),
    linear-gradient(145deg, var(--opener-box-light), var(--opener-box) 48%, var(--opener-box-deep));
  background-size: 32px 32px, 32px 32px, 32px 32px, auto, auto, auto;
}

.gift-face {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--gift-paper);
}

.gift-face-front,
.gift-face-back,
.gift-face-left,
.gift-face-right {
  width: 160px;
  height: 100px;
}

.gift-face-front {
  transform: translateZ(80px);
  box-shadow: inset 0 -10px 16px rgba(0, 0, 0, 0.12);
}

.gift-face-back {
  transform: rotateY(180deg) translateZ(80px);
  background: linear-gradient(145deg, var(--opener-box), var(--opener-box-deep));
}

.gift-face-left {
  transform: rotateY(-90deg) translateZ(80px);
  background: linear-gradient(180deg, var(--opener-box), var(--opener-box-deep));
  filter: brightness(0.72);
}

.gift-face-right {
  transform: rotateY(90deg) translateZ(80px);
  background: linear-gradient(180deg, var(--opener-box-light), var(--opener-box));
  filter: brightness(1.06);
}

.gift-face-bottom,
.gift-face-inner {
  width: 160px;
  height: 160px;
  top: -30px;
}

.gift-face-bottom {
  transform: rotateX(-90deg) translateZ(50px);
  background: linear-gradient(180deg, var(--opener-box-deep), color-mix(in srgb, var(--opener-box-deep) 70%, #000));
}

.gift-face-inner {
  left: 8px;
  top: -22px;
  width: 144px;
  height: 144px;
  transform: rotateX(-90deg) translateZ(48px);
  background:
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--opener-ribbon-light) 18%, transparent), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--opener-box-deep) 78%, #000), var(--opener-box-deep));
}

.gift-wrap {
  position: absolute;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 30%),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(0, 0, 0, 0.06) 3px 4px),
    linear-gradient(180deg, var(--opener-ribbon-light), var(--opener-ribbon) 48%, color-mix(in srgb, var(--opener-ribbon) 70%, #000));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 0 6px rgba(0, 0, 0, 0.22);
}

.gift-wrap-v {
  left: 72px;
  top: 0;
  width: 16px;
  height: 100px;
  transform: translateZ(81px);
}

.gift-wrap-h {
  left: 0;
  top: 42px;
  width: 160px;
  height: 16px;
  transform: translateZ(81px);
}

/* The ribbon has to continue around the sides or the box reads as a flat card. */
.gift-wrap-side {
  left: 72px;
  top: 0;
  width: 16px;
  height: 100px;
}

.gift-wrap-side-l {
  transform: rotateY(-90deg) translateZ(81px);
  filter: brightness(0.74);
}

.gift-wrap-side-r {
  transform: rotateY(90deg) translateZ(81px);
  filter: brightness(1.08);
}

/* Light pooling on the open rim of the box once the lid is off. */
.gift-rim {
  position: absolute;
  left: 5px;
  top: -25px;
  width: 150px;
  height: 150px;
  opacity: 0;
  pointer-events: none;
  transform: rotateX(-90deg) translateZ(-50px);
  background:
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--opener-ribbon-light) 70%, #fff5d8) 0%, color-mix(in srgb, var(--opener-ribbon-light) 30%, transparent) 38%, transparent 66%);
  transition: opacity 0.6s ease 0.15s;
}

.envelope-pack.is-open .gift-rim {
  opacity: 1;
}

/* Flat screen-space flare so the box reads as lit from inside. */
.gift-burst {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: scale(0.5);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--opener-ribbon-light) 60%, #fff3cc) 0%, color-mix(in srgb, var(--opener-ribbon-light) 22%, transparent) 28%, transparent 62%);
  transition: opacity 0.75s ease, transform 1.1s cubic-bezier(0.16, 0.8, 0.3, 1);
}

.envelope-pack.is-open .gift-burst {
  opacity: 0.85;
  transform: scale(1);
}

.envelope-pack.is-drawn .gift-burst {
  opacity: 0.4;
  transform: scale(1.25);
}

.gift-sparks {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: 7;
  width: 0;
  height: 0;
  pointer-events: none;
}

.gift-sparks i {
  position: absolute;
  left: 0;
  top: 0;
  width: 7px;
  height: 10px;
  margin: -5px 0 0 -3.5px;
  border-radius: 1.5px;
  opacity: 0;
  background: var(--spark, var(--opener-ribbon-light));
  box-shadow: 0 0 6px color-mix(in srgb, var(--opener-ribbon-light) 45%, transparent);
}

.envelope-pack.is-open .gift-sparks i {
  animation: gift-spark 1.6s cubic-bezier(0.12, 0.72, 0.28, 1) var(--sd, 0s) forwards;
}

.gift-sparks i:nth-child(1)  { --sx: -104px; --sy: -138px; --sr: 260deg; --sd: 0.02s; }
.gift-sparks i:nth-child(2)  { --sx:   82px; --sy: -160px; --sr: -220deg; --sd: 0.06s; --spark: #fff2c6; }
.gift-sparks i:nth-child(3)  { --sx:  -46px; --sy: -186px; --sr: 180deg; --sd: 0.11s; }
.gift-sparks i:nth-child(4)  { --sx:  128px; --sy: -108px; --sr: -300deg; --sd: 0.05s; --spark: color-mix(in srgb, var(--opener-ribbon-light) 50%, #fff); }
.gift-sparks i:nth-child(5)  { --sx:   24px; --sy: -204px; --sr: 320deg; --sd: 0.14s; }
.gift-sparks i:nth-child(6)  { --sx: -142px; --sy:  -92px; --sr: -160deg; --sd: 0.09s; --spark: #ffe9a8; }
.gift-sparks i:nth-child(7)  { --sx:   62px; --sy: -196px; --sr: 240deg; --sd: 0.18s; }
.gift-sparks i:nth-child(8)  { --sx:  -78px; --sy: -168px; --sr: -280deg; --sd: 0.13s; }
.gift-sparks i:nth-child(9)  { --sx:  152px; --sy: -150px; --sr: 200deg; --sd: 0.2s; --spark: #fff2c6; }
.gift-sparks i:nth-child(10) { --sx:  -18px; --sy: -228px; --sr: -340deg; --sd: 0.24s; }
.gift-sparks i:nth-child(11) { --sx: -122px; --sy: -184px; --sr: 150deg; --sd: 0.16s; --spark: #ffe9a8; }
.gift-sparks i:nth-child(12) { --sx:  100px; --sy: -232px; --sr: -190deg; --sd: 0.28s; }
.gift-sparks i:nth-child(13) { --sx:  -60px; --sy: -248px; --sr: 300deg; --sd: 0.32s; }
.gift-sparks i:nth-child(14) { --sx:  172px; --sy:  -74px; --sr: -240deg; --sd: 0.1s; }
.gift-sparks i:nth-child(15) { --sx: -170px; --sy: -136px; --sr: 210deg; --sd: 0.26s; --spark: #fff2c6; }
.gift-sparks i:nth-child(16) { --sx:   44px; --sy: -262px; --sr: -170deg; --sd: 0.36s; }

.gift-lid {
  left: -6px;
  top: -20px;
  width: 172px;
  height: 20px;
  z-index: 4;
}

.gift-lid-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 172px;
  height: 20px;
  background: var(--gift-paper);
}

.gift-lid-top {
  top: -76px;
  height: 172px;
  transform: rotateX(-90deg) translateZ(-10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 10px 18px rgba(0, 0, 0, 0.22);
}

.gift-lid-top::before,
.gift-lid-top::after {
  content: "";
  position: absolute;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), transparent 32%),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(0, 0, 0, 0.05) 3px 4px),
    linear-gradient(180deg, var(--opener-ribbon-light), var(--opener-ribbon) 48%, color-mix(in srgb, var(--opener-ribbon) 70%, #000));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.gift-lid-top::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 16px;
  margin-left: -8px;
}

.gift-lid-top::after {
  left: 0;
  right: 0;
  top: 50%;
  height: 16px;
  margin-top: -8px;
}

.gift-lid-front {
  transform: translateZ(86px);
  box-shadow: inset 0 -7px 10px rgba(0, 0, 0, 0.2);
}

.gift-lid-back {
  transform: rotateY(180deg) translateZ(86px);
  filter: brightness(0.62);
}

.gift-lid-left {
  transform: rotateY(-90deg) translateZ(86px);
  filter: brightness(0.72);
}

.gift-lid-right {
  transform: rotateY(90deg) translateZ(86px);
  filter: brightness(1.06);
}

/* The ribbon carries on down the lid skirt, lining up with the box bands. */
.gift-lid-front::after,
.gift-lid-left::after,
.gift-lid-right::after {
  content: "";
  position: absolute;
  left: 78px;
  top: 0;
  bottom: 0;
  width: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), transparent 44%),
    linear-gradient(180deg, var(--opener-ribbon-light), var(--opener-ribbon) 58%, color-mix(in srgb, var(--opener-ribbon) 70%, #000));
}

/* Mirrors the lid's box exactly so it can share the lift animation. */
.gift-bow-mount {
  position: absolute;
  left: -6px;
  top: -20px;
  width: 172px;
  height: 20px;
  transform-style: preserve-3d;
}

/* Cancels the scene rotation so the bow faces the camera instead of lying
   flat in the lid plane, pivoting on its base so it stays on the lid. */
.gift-bow {
  position: absolute;
  left: 50%;
  top: 0;
  width: 124px;
  height: 82px;
  margin: -82px 0 0 -62px;
  transform-origin: 50% 100%;
  transform: rotateY(30deg) rotateX(38deg);
}

/* Each loop is a ring with the hole showing through, so it reads as a tied
   bow rather than two solid blobs. */
.gift-bow-loop {
  position: absolute;
  top: 0;
  width: 55px;
  height: 44px;
  border-radius: 50% 50% 46% 46%;
  border: 9px solid transparent;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.5), transparent 46%),
    linear-gradient(140deg, var(--opener-ribbon-light), var(--opener-ribbon) 58%, color-mix(in srgb, var(--opener-ribbon) 62%, #000)) border-box;
  -webkit-mask:
    linear-gradient(#000 0 0) padding-box exclude,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) padding-box exclude,
    linear-gradient(#000 0 0);
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.3));
}

.gift-bow-l { left: 0; transform: rotate(-26deg) skewX(8deg); }
.gift-bow-r { right: 0; transform: rotate(26deg) skewX(-8deg); }

.gift-bow-knot {
  position: absolute;
  left: 50%;
  top: 11px;
  width: 28px;
  height: 26px;
  margin-left: -14px;
  border-radius: 46% 46% 50% 50%;
  background:
    radial-gradient(circle at 36% 30%, #fff6da, transparent 52%),
    linear-gradient(150deg, var(--opener-ribbon-light), var(--opener-ribbon) 55%, color-mix(in srgb, var(--opener-ribbon) 60%, #000));
  box-shadow:
    0 4px 8px rgba(0, 0, 0, 0.32),
    inset 0 -3px 5px rgba(0, 0, 0, 0.22);
  z-index: 3;
}

.gift-bow-tail {
  position: absolute;
  top: 31px;
  width: 18px;
  height: 51px;
  background: linear-gradient(180deg, var(--opener-ribbon-light), var(--opener-ribbon) 45%, color-mix(in srgb, var(--opener-ribbon) 58%, #000));
  clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
}

.gift-bow-tail-l { left: 34px; transform: rotate(15deg); transform-origin: 50% 0; }
.gift-bow-tail-r { right: 34px; transform: rotate(-15deg); transform-origin: 50% 0; }

.opener-gift .gift-card {
  position: absolute;
  left: 50%;
  right: auto;
  top: auto;
  bottom: 34%;
  width: min(68%, 190px);
  height: auto;
  min-height: 0;
  padding: 16px 14px 14px;
  z-index: 8;
  opacity: 0;
  /* Starts level with the rim: any lower and it fades in *through* the box. */
  transform: translate(-50%, -74%) scale(0.84) rotate(2deg);
  background:
    linear-gradient(165deg, #fffdf9 0%, #faf1e4 55%, #f3e6d4 100%);
  color: #4a2c34;
  border: 1px solid color-mix(in srgb, var(--opener-ribbon) 28%, transparent);
  border-radius: 3px;
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition:
    transform 1s cubic-bezier(0.22, 1, 0.32, 1),
    opacity 0.5s ease,
    box-shadow 0.45s ease;
}

.opener-gift .gift-card::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: 8px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--opener-ribbon) 55%, transparent), transparent);
}

.opener-gift .gift-card .envelope-letter-kicker {
  font-size: 0.58rem;
  letter-spacing: 0.16em;
}

.opener-gift .gift-card .envelope-letter-names {
  font-size: clamp(1.15rem, 4vw, 1.45rem);
  margin: 4px 0 0;
}

/* A tap first rattles the box, then the lid is lifted clear rather than
   hinged over — a hinge reads as a chest, not a gift box. */
.envelope-pack.is-opening:not(.is-open) .gift-scene {
  animation: gift-rattle 0.42s ease-in-out;
}

.envelope-pack.is-open .gift-lid,
.envelope-pack.is-drawn .gift-lid,
.envelope-pack.is-open .gift-bow-mount,
.envelope-pack.is-drawn .gift-bow-mount {
  animation: gift-lid-off 1.5s cubic-bezier(0.2, 0.72, 0.24, 1) forwards;
}

.envelope-pack.is-drawn .opener-gift .gift-card {
  opacity: 1;
  transform: translate(-50%, -132%) scale(1) rotate(-1.2deg);
  box-shadow:
    0 24px 40px rgba(0, 0, 0, 0.32),
    0 0 26px color-mix(in srgb, var(--opener-ribbon-light) 22%, transparent),
    0 0 0 1px color-mix(in srgb, var(--opener-ribbon) 18%, transparent);
}

.opener-folio {
  width: min(86vw, 340px);
  height: 320px;
  /* Opened, the spread is nearly twice as wide as the closed card, so the
     whole opener slides and shrinks to keep both pages on screen. */
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.32, 1);
}

.envelope-pack.is-open .opener-folio {
  transform: translateX(24%) scale(0.84);
}

.folio-stage {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1500px;
  perspective-origin: 30% 50%;
  transform-style: preserve-3d;
}

.folio-shadow {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 4%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.34), transparent 70%);
  transition: left 1.15s ease, right 1.15s ease, opacity 1.15s ease;
}

.envelope-pack.is-open .folio-shadow {
  left: -12%;
  right: 16%;
  opacity: 0.75;
}

/* Cut page edges peeking out on the fore-edge of the closed card. */
.folio-stack {
  position: absolute;
  left: 22%;
  top: 10.8%;
  width: 56%;
  height: 72.4%;
  z-index: 1;
  border-radius: 3px 10px 10px 3px;
  background:
    linear-gradient(90deg, transparent 96%, color-mix(in srgb, var(--env-paper-2) 70%, #7a6444) 100%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--env-paper) 92%, #fff) 0 2px, color-mix(in srgb, var(--env-paper-2) 78%, #8a7350) 2px 3px);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.26);
  transform: translate(3px, 3px);
}

.folio-spine {
  position: absolute;
  left: 20.2%;
  top: 9.4%;
  width: 10px;
  height: 75.2%;
  z-index: 5;
  border-radius: 4px 0 0 4px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--env-paper-2) 62%, #000), color-mix(in srgb, var(--env-paper) 96%, #fff) 62%, var(--env-paper-2)),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.16));
  box-shadow:
    2px 0 10px rgba(0, 0, 0, 0.18),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}

/* Silk bookmark tucked into the fold. */
.folio-ribbon {
  position: absolute;
  left: 24%;
  top: 60%;
  width: 11px;
  height: 34%;
  z-index: 2;
  background: linear-gradient(180deg, color-mix(in srgb, var(--env-seal) 82%, #000), var(--env-seal) 40%, color-mix(in srgb, var(--env-seal) 70%, #000));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.35));
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.32, 1);
}

.envelope-pack.is-open .folio-ribbon {
  transform: translateY(6px) rotate(2.5deg);
}

.folio-page,
.folio-cover {
  position: absolute;
  left: 22%;
  top: 10%;
  width: 56%;
  height: 74%;
  transform-origin: left center;
}

.folio-page {
  z-index: 2;
  border-radius: 3px 10px 10px 3px;
  background:
    radial-gradient(ellipse at 100% 50%, rgba(255, 255, 255, 0.42), transparent 58%),
    linear-gradient(90deg, color-mix(in srgb, var(--env-paper) 74%, #b9a684), color-mix(in srgb, var(--env-paper) 96%, #fff) 14%, color-mix(in srgb, var(--env-paper) 90%, #fff) 100%);
  box-shadow: 0 18px 28px rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

/* Shadow the cover throws onto the right page, retreating as it swings away. */
.folio-page-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(24, 12, 6, 0.62) 0%, rgba(24, 12, 6, 0.34) 32%, rgba(24, 12, 6, 0.1) 62%, transparent 100%);
  transition: opacity 1.15s ease;
}

.envelope-pack.is-open .folio-page-shade {
  opacity: 0.12;
}

.folio-cover {
  z-index: 4;
  transform-style: preserve-3d;
  transition: transform 1.15s cubic-bezier(0.32, 0.9, 0.28, 1);
}

.folio-out,
.folio-in {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 3px 10px 10px 3px;
  overflow: hidden;
}

.folio-out {
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 0 14px;
  text-align: center;
  color: var(--env-ink);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.3), transparent 44%),
    repeating-linear-gradient(45deg, transparent 0 5px, rgba(0, 0, 0, 0.016) 5px 6px),
    linear-gradient(var(--env-paper), var(--env-paper-2));
  box-shadow:
    8px 0 20px rgba(0, 0, 0, 0.16),
    inset 0 0 0 1px color-mix(in srgb, var(--env-seal) 22%, transparent);
}

/* Double blind-stamped border, the way a letterpress card is framed. */
.folio-out::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid color-mix(in srgb, var(--env-seal) 46%, transparent);
  border-radius: 2px 7px 7px 2px;
  pointer-events: none;
}

.folio-out::after {
  content: "";
  position: absolute;
  inset: 13px;
  border: 1px solid color-mix(in srgb, var(--env-seal) 20%, transparent);
  border-radius: 1px 5px 5px 1px;
  pointer-events: none;
}

.folio-crest {
  justify-self: center;
  display: grid;
  place-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 4px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--env-seal) 58%, transparent);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--env-paper) 70%, transparent),
    0 0 0 5px color-mix(in srgb, var(--env-seal) 26%, transparent);
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--env-seal) 78%, var(--env-ink));
}

.folio-out small {
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 0.58rem;
  opacity: 0.72;
}

.folio-out strong {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.32rem;
  line-height: 1.2;
}

.folio-in {
  transform: rotateY(180deg);
  display: grid;
  place-content: center;
  background:
    radial-gradient(ellipse at 82% 50%, rgba(0, 0, 0, 0.22), transparent 62%),
    radial-gradient(circle at 22% 18%, rgba(255, 240, 214, 0.2), transparent 40%),
    linear-gradient(200deg, color-mix(in srgb, var(--env-paper) 88%, #fff), var(--env-paper-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--env-seal) 18%, transparent);
}

/* Pressed emblem on the inside-left leaf so it is not an empty slab. */
.folio-in-plate {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  opacity: 0.62;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--env-seal) 40%, transparent) 0 2.5px, transparent 3.5px),
    radial-gradient(circle, transparent 0 17px, color-mix(in srgb, var(--env-seal) 42%, transparent) 17px 18px, transparent 19px),
    radial-gradient(circle, transparent 0 20px, color-mix(in srgb, var(--env-seal) 22%, transparent) 20px 20.8px, transparent 22px),
    /* Beaded ring: dots laid on a 36px orbit by a repeating conic mask. */
    repeating-conic-gradient(from 0deg,
      color-mix(in srgb, var(--env-seal) 34%, transparent) 0deg 1.6deg,
      transparent 1.6deg 20deg),
    radial-gradient(circle, transparent 0 45px, color-mix(in srgb, var(--env-seal) 20%, transparent) 45px 46px, transparent 47px);
  background-blend-mode: normal;
  -webkit-mask:
    radial-gradient(circle, #000 0 22px, transparent 23px),
    radial-gradient(circle, transparent 0 34px, #000 34.5px 37.5px, transparent 38px),
    radial-gradient(circle, transparent 0 44px, #000 45px 47px, transparent 48px);
  mask:
    radial-gradient(circle, #000 0 22px, transparent 23px),
    radial-gradient(circle, transparent 0 34px, #000 34.5px 37.5px, transparent 38px),
    radial-gradient(circle, transparent 0 44px, #000 45px 47px, transparent 48px);
}

.folio-inner {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 13%;
  bottom: 13%;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 8px 6px;
  display: grid;
  align-content: center;
  gap: 2px;
  opacity: 0;
  transform: none;
  background: transparent;
  box-shadow: none;
  color: var(--env-ink);
  transition: opacity 0.6s ease;
}

.folio-flourish {
  width: 54px;
  height: 9px;
  margin: 0 auto 8px;
  background:
    radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--env-seal) 60%, transparent) 0 2.5px, transparent 3px),
    linear-gradient(90deg, transparent, color-mix(in srgb, var(--env-seal) 50%, transparent) 22%, color-mix(in srgb, var(--env-seal) 50%, transparent) 78%, transparent) center/100% 1px no-repeat;
}

.folio-inner .envelope-letter-names {
  color: color-mix(in srgb, var(--env-ink) 88%, #000);
}

.envelope-pack.is-open .folio-cover {
  transform: rotateY(-155deg);
}

.envelope-pack.is-drawn .folio-inner {
  opacity: 1;
}

.opener-lantern {
  width: min(86vw, 300px);
  height: 420px;
  perspective: 1000px;
}

.lantern-haze {
  position: absolute;
  inset: 10% 0 6%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--opener-lantern-glow) 55%, transparent), color-mix(in srgb, var(--opener-lantern-glow) 16%, transparent) 42%, transparent 70%);
  animation: lantern-pulse 2.8s ease-in-out infinite;
}

/* Volumetric shafts that only fan out once the lantern is lit. */
.lantern-rays {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 460px;
  height: 460px;
  margin: -230px 0 0 -230px;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  transform: scale(0.55) rotate(0deg);
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0deg 4deg,
    color-mix(in srgb, var(--opener-lantern-glow) 40%, transparent) 6deg 9deg,
    transparent 11deg 17deg,
    color-mix(in srgb, var(--opener-lantern-glow) 22%, transparent) 18deg 20deg,
    transparent 22deg 30deg
  );
  -webkit-mask: radial-gradient(circle, #000 8%, rgba(0, 0, 0, 0.45) 34%, transparent 62%);
  mask: radial-gradient(circle, #000 8%, rgba(0, 0, 0, 0.45) 34%, transparent 62%);
  transition: opacity 1.1s ease, transform 1.6s cubic-bezier(0.18, 0.72, 0.24, 1);
}

.envelope-pack.is-open .lantern-rays {
  opacity: 0.75;
  transform: scale(1) rotate(14deg);
  animation: lantern-rays-turn 26s linear infinite 1.6s;
}

.envelope-pack.is-drawn .lantern-rays {
  opacity: 0.45;
}

.lantern-cord {
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 12%;
  margin-left: -1px;
  background: linear-gradient(var(--opener-ribbon-light), color-mix(in srgb, var(--opener-ribbon) 70%, #4a2a10));
  z-index: 5;
}

.lantern-hook {
  position: absolute;
  left: 50%;
  top: 10%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, var(--opener-ribbon-light), var(--opener-ribbon) 60%, color-mix(in srgb, var(--opener-ribbon) 70%, #000));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  z-index: 6;
}

.lantern-rig {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 14%;
  height: 68%;
  transform-style: preserve-3d;
  transform-origin: top center;
  animation: lantern-sway 4.8s ease-in-out infinite;
}

.envelope-pack.is-opening .lantern-rig,
.envelope-pack.is-open .lantern-rig,
.envelope-pack.is-drawn .lantern-rig {
  animation: none;
}

.lantern-cap,
.lantern-foot {
  position: absolute;
  left: 6%;
  right: 6%;
  height: 10%;
  z-index: 5;
  background:
    linear-gradient(180deg, var(--opener-ribbon-light), var(--opener-ribbon) 55%, color-mix(in srgb, var(--opener-ribbon) 65%, #000));
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.28);
}

.lantern-cap {
  top: 0;
  border-radius: 8px 8px 2px 2px;
  clip-path: polygon(8% 100%, 0 40%, 18% 0, 82% 0, 100% 40%, 92% 100%);
}

.lantern-foot {
  bottom: 4%;
  height: 8%;
  border-radius: 2px 2px 8px 8px;
  clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%);
}

.lantern-ring {
  position: absolute;
  left: 10%;
  right: 10%;
  height: 6px;
  z-index: 4;
  border-radius: 99px;
  background: linear-gradient(180deg, var(--opener-ribbon-light), var(--opener-ribbon));
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.lantern-ring-top { top: 10%; }
.lantern-ring-bot { bottom: 14%; }

.lantern-body {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 14%;
  bottom: 16%;
  z-index: 2;
  display: flex;
  border-radius: 42% / 12%;
  overflow: hidden;
  transform: rotateX(8deg) scaleY(1.02);
  box-shadow:
    0 18px 28px rgba(0, 0, 0, 0.4),
    inset 18px 0 28px rgba(0, 0, 0, 0.22),
    inset -18px 0 28px rgba(0, 0, 0, 0.18),
    inset 0 0 24px color-mix(in srgb, var(--opener-lantern-glow) 35%, transparent);
  background: linear-gradient(180deg, var(--opener-lantern), var(--opener-lantern-deep));
  transition: box-shadow 0.7s ease, filter 0.7s ease;
}

.lantern-body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.3)),
    radial-gradient(ellipse at 50% 48%, color-mix(in srgb, var(--opener-lantern-glow) 45%, transparent), transparent 55%);
}

.lantern-fold {
  flex: 1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 32%, rgba(255, 244, 220, 0.18) 50%, transparent 68%, rgba(0, 0, 0, 0.16)),
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(70, 40, 16, 0.05) 7px 8px),
    linear-gradient(180deg, color-mix(in srgb, var(--opener-lantern) 78%, #fff) 0%, var(--opener-lantern) 42%, var(--opener-lantern-deep) 100%);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.14);
}

/* Painted band on the paper, so the shade is not a blank cylinder. */
.lantern-motif {
  position: absolute;
  left: 12%;
  right: 12%;
  top: 30%;
  height: 40%;
  z-index: 2;
  opacity: 0.42;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 26%, color-mix(in srgb, var(--opener-ribbon) 52%, transparent) 26% 28%, transparent 29%),
    radial-gradient(ellipse at 50% 50%, transparent 0 38%, color-mix(in srgb, var(--opener-ribbon) 32%, transparent) 38% 39.4%, transparent 41%),
    linear-gradient(90deg, transparent 6%, color-mix(in srgb, var(--opener-ribbon) 30%, transparent) 6% 7.4%, transparent 8%),
    linear-gradient(90deg, transparent 92%, color-mix(in srgb, var(--opener-ribbon) 30%, transparent) 92% 93.4%, transparent 94%);
}

/* Warm body of light inside the paper, separate from the flame itself. */
.lantern-core {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 120%;
  height: 76%;
  z-index: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 50% 52%, color-mix(in srgb, var(--opener-lantern-glow) 78%, #fff2c0) 0%, color-mix(in srgb, var(--opener-lantern-glow) 34%, transparent) 34%, transparent 66%);
  opacity: 0.5;
  transition: opacity 0.9s ease;
  animation: lantern-pulse 3.4s ease-in-out infinite;
}

.envelope-pack.is-open .lantern-core {
  opacity: 1;
}

.lantern-flame {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 24px;
  height: 40px;
  margin: -20px 0 0 -12px;
  border-radius: 52% 52% 44% 44% / 62% 62% 38% 38%;
  background:
    radial-gradient(ellipse at 50% 78%, #ffffff 0%, #fff8dc 26%, transparent 52%),
    linear-gradient(180deg, #fff6c4 0%, var(--opener-lantern-glow) 42%, #ff8b2e 78%, #e2561a 100%);
  box-shadow:
    0 0 22px 6px color-mix(in srgb, var(--opener-lantern-glow) 62%, transparent),
    0 0 50px 18px color-mix(in srgb, var(--opener-lantern-glow) 26%, transparent);
  animation: lantern-flicker 2.1s ease-in-out infinite;
  transform-origin: 50% 88%;
  z-index: 3;
  opacity: 0.9;
  transition: opacity 0.5s ease;
}

.lantern-flame::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 8px;
  height: 18px;
  margin-left: -4px;
  border-radius: 50% 50% 42% 42%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(215, 232, 255, 0.5) 45%, transparent 82%);
  filter: blur(0.6px);
}

.lantern-tassel {
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 26px;
  height: 14%;
  margin-left: -13px;
  z-index: 3;
  transform-origin: 50% 0;
  animation: lantern-tassel-sway 4.8s ease-in-out infinite;
}

.lantern-tassel i {
  position: absolute;
  top: 0;
  width: 3px;
  height: 100%;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(var(--opener-ribbon), color-mix(in srgb, var(--opener-ribbon) 55%, #000) 72%, transparent);
}

.lantern-tassel i:nth-child(1) { left: 6px; height: 86%; transform: rotate(4deg); }
.lantern-tassel i:nth-child(2) { left: 50%; margin-left: -1.5px; }
.lantern-tassel i:nth-child(3) { right: 6px; height: 82%; transform: rotate(-4deg); }

.lantern-embers {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 0;
  height: 0;
  z-index: 6;
  pointer-events: none;
}

.lantern-embers i {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #fff4cf, var(--opener-lantern-glow) 55%, transparent 78%);
  box-shadow: 0 0 8px 2px color-mix(in srgb, var(--opener-lantern-glow) 55%, transparent);
}

.envelope-pack.is-open .lantern-embers i {
  animation: lantern-ember 3.4s ease-out var(--ed, 0s) infinite;
}

.lantern-embers i:nth-child(1)  { --ex:  -54px; --ed: 0s; }
.lantern-embers i:nth-child(2)  { --ex:   38px; --ed: 0.24s; }
.lantern-embers i:nth-child(3)  { --ex:  -18px; --ed: 0.5s;  }
.lantern-embers i:nth-child(4)  { --ex:   66px; --ed: 0.78s; }
.lantern-embers i:nth-child(5)  { --ex:  -72px; --ed: 1.02s; }
.lantern-embers i:nth-child(6)  { --ex:   12px; --ed: 1.3s;  }
.lantern-embers i:nth-child(7)  { --ex:  -36px; --ed: 1.58s; }
.lantern-embers i:nth-child(8)  { --ex:   54px; --ed: 1.84s; }
.lantern-embers i:nth-child(9)  { --ex:  -62px; --ed: 2.1s;  }
.lantern-embers i:nth-child(10) { --ex:   26px; --ed: 2.36s; }
.lantern-embers i:nth-child(11) { --ex:   -8px; --ed: 2.62s; }
.lantern-embers i:nth-child(12) { --ex:   74px; --ed: 2.88s; }
.lantern-embers i:nth-child(13) { --ex:  -46px; --ed: 3.1s;  }
.lantern-embers i:nth-child(14) { --ex:   44px; --ed: 3.3s;  }

/* The card sits below the lantern instead of across it, so the lit shade
   stays readable while the invitation appears. */
.opener-lantern .lantern-card {
  left: 50%;
  right: auto;
  top: 70%;
  width: min(80%, 216px);
  height: auto;
  min-height: 0;
  padding: 16px 14px;
  z-index: 8;
  opacity: 0;
  transform: translate(-50%, 22%) scale(0.86);
  background: linear-gradient(165deg, #fffdf8, #f4ead8);
  color: #3f2e24;
  border: 1px solid color-mix(in srgb, var(--opener-ribbon) 30%, transparent);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35);
  transition: transform 1s cubic-bezier(0.22, 1, 0.32, 1), opacity 0.55s ease;
}

.envelope-pack.is-opening .lantern-haze,
.envelope-pack.is-open .lantern-haze {
  opacity: 1;
  transform: scale(1.18);
  animation-duration: 1.4s;
}

.envelope-pack.is-open .lantern-body {
  filter: brightness(1.18) saturate(1.06);
  box-shadow:
    0 18px 28px rgba(0, 0, 0, 0.35),
    inset 0 0 42px color-mix(in srgb, var(--opener-lantern-glow) 62%, transparent),
    0 0 56px color-mix(in srgb, var(--opener-lantern-glow) 42%, transparent);
}

.envelope-pack.is-open .lantern-motif {
  opacity: 0.62;
}

.envelope-pack.is-open .lantern-flame {
  opacity: 1;
  animation: lantern-flare 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) forwards,
             lantern-flicker 1.5s ease-in-out 1.1s infinite;
}

/* Lantern floats up and makes room for the invitation underneath. */
.envelope-pack.is-drawn .lantern-rig {
  transform: translateY(-14%) scale(0.84);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.32, 1);
}

.envelope-pack.is-drawn .opener-lantern .lantern-card {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  box-shadow:
    0 22px 40px rgba(0, 0, 0, 0.4),
    0 0 32px color-mix(in srgb, var(--opener-lantern-glow) 30%, transparent);
}

.opener-star {
  width: min(92vw, 420px);
  min-width: 280px;
  height: 380px;
  overflow: hidden;
  border-radius: 18px;
}

.star-sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 118%, #2a4a7a 0%, transparent 48%),
    radial-gradient(ellipse at 18% 8%, rgba(110, 70, 180, 0.42), transparent 44%),
    radial-gradient(ellipse at 82% 18%, rgba(40, 120, 150, 0.34), transparent 42%),
    radial-gradient(ellipse at 60% 40%, rgba(255, 160, 90, 0.08), transparent 35%),
    linear-gradient(180deg, #040712 0%, #0b1530 46%, #08101c 100%);
}

.sky-star {
  position: absolute;
  border-radius: 50%;
  background: #fff8ea;
  box-shadow: 0 0 8px 1px rgba(255, 244, 214, 0.95);
  animation: twinkle ease-in-out infinite;
}

.sky-star.is-cross::before,
.sky-star.is-cross::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff8ea;
  box-shadow: 0 0 8px rgba(255, 248, 234, 0.9);
}

.sky-star.is-cross::before {
  width: 10px;
  height: 1px;
  transform: translate(-50%, -50%);
}

.sky-star.is-cross::after {
  width: 1px;
  height: 10px;
  transform: translate(-50%, -50%);
}

.sky-star.is-warm {
  background: #ffe2b0;
  box-shadow: 0 0 10px 2px rgba(255, 196, 120, 0.85);
}

.sky-star.is-cool {
  background: #dce8ff;
  box-shadow: 0 0 10px 2px rgba(160, 200, 255, 0.8);
}

.is-kind-star .opener-motes,
.is-kind-gate .opener-motes,
.is-kind-bloom .opener-motes,
.is-kind-gift .opener-motes,
.is-kind-folio .opener-motes {
  display: none;
}

.envelope-overlay.is-kind-star {
  justify-content: space-between;
  background:
    radial-gradient(ellipse at 50% 100%, #1a2744 0%, #070b14 52%, #020308 100%);
}

.envelope-overlay.is-kind-star .envelope-hint {
  margin-top: 28px;
}

.envelope-overlay.is-kind-star .envelope-skip {
  margin-bottom: 24px;
}

.star-aurora {
  position: absolute;
  inset: 6% -24% 32%;
  pointer-events: none;
  filter: blur(16px);
  opacity: 0.55;
  mix-blend-mode: screen;
  animation: aurora-drift 8s ease-in-out infinite;
}

.star-aurora-a {
  background:
    linear-gradient(110deg, transparent 18%, rgba(48, 210, 180, 0.65) 36%, rgba(140, 90, 255, 0.5) 52%, transparent 74%);
  transform: rotate(-12deg);
}

.star-aurora-b {
  background:
    linear-gradient(128deg, transparent 24%, rgba(70, 150, 255, 0.45) 44%, rgba(255, 150, 100, 0.38) 58%, transparent 78%);
  transform: rotate(8deg);
  animation-delay: -3.2s;
  opacity: 0.42;
}

.star-aurora-c {
  inset: 18% -10% 42%;
  background:
    linear-gradient(100deg, transparent 30%, rgba(255, 120, 180, 0.28) 48%, rgba(80, 220, 200, 0.3) 60%, transparent 78%);
  transform: rotate(-4deg);
  animation-delay: -5.5s;
  opacity: 0.35;
  filter: blur(22px);
}

.star-milky {
  position: absolute;
  inset: 8% -10% 30%;
  background: linear-gradient(118deg, transparent 18%, rgba(180, 200, 255, 0.14) 42%, rgba(255, 240, 210, 0.18) 50%, rgba(180, 200, 255, 0.1) 58%, transparent 78%);
  filter: blur(8px);
  transform: rotate(-18deg);
  pointer-events: none;
  animation: milky-drift 14s ease-in-out infinite;
}

.star-horizon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background:
    linear-gradient(180deg, transparent, rgba(24, 40, 72, 0.55) 36%, rgba(60, 28, 70, 0.42));
}

.star-glow {
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 8%;
  height: 40%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(120, 160, 255, 0.22), transparent 70%);
  pointer-events: none;
  animation: star-pulse 4.5s ease-in-out infinite;
}

.star-moon {
  position: absolute;
  right: 12%;
  top: 10%;
  width: 58px;
  height: 58px;
  overflow: hidden;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 32%, #fff8e8, #ead9b2 55%, #c4b08a);
  box-shadow:
    0 0 34px 12px rgba(234, 217, 178, 0.4),
    0 0 90px 24px rgba(120, 160, 255, 0.16),
    inset -10px -6px 0 rgba(7, 11, 20, 0.16);
  animation: moon-soft 5.2s ease-in-out infinite;
  z-index: 3;
}

.star-moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 28% 30%, transparent 34%, rgba(7, 11, 20, 0.28) 72%),
    radial-gradient(circle at 62% 58%, rgba(180, 160, 120, 0.22) 0 4px, transparent 5px);
}

.meteor {
  position: absolute;
  width: 150px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15) 14%, #fff 46%, rgba(255, 220, 160, 1));
  box-shadow: 0 0 14px rgba(255, 240, 210, 0.85);
  opacity: 0;
  animation: meteor-fly 3.4s linear infinite;
  pointer-events: none;
  z-index: 4;
}

.meteor-a { top: 14%; left: 2%; animation-delay: 0.2s; }
.meteor-b { top: 26%; left: 34%; animation-delay: 1.1s; width: 120px; }
.meteor-c { top: 10%; left: 50%; animation-delay: 1.9s; }
.meteor-d { top: 44%; left: 14%; width: 96px; animation-delay: 0.7s; }
.meteor-e { top: 20%; left: 66%; width: 130px; animation-delay: 2.4s; }
.meteor-f { top: 56%; left: 6%; width: 100px; animation-delay: 2.9s; }
.meteor-g { top: 34%; left: 48%; width: 110px; animation-delay: 0.45s; }
.meteor-h { top: 8%; left: 22%; width: 88px; animation-delay: 1.55s; }

.opener-star .star-card {
  position: absolute;
  left: 50%;
  right: auto;
  top: 52%;
  width: min(72%, 220px);
  height: auto;
  min-height: 0;
  padding: 18px 16px 16px;
  z-index: 6;
  opacity: 0;
  transform: translate(-50%, 28%) scale(0.78);
  background:
    linear-gradient(165deg, rgba(42, 58, 96, 0.94), rgba(14, 20, 40, 0.96));
  color: #f4e8cc;
  border: 1px solid rgba(180, 210, 255, 0.34);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(255, 220, 160, 0.1),
    0 20px 40px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(100, 140, 255, 0.22);
  backdrop-filter: blur(10px);
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.32, 1), opacity 0.55s ease, box-shadow 0.5s ease;
}

.envelope-pack.is-opening .star-aurora {
  opacity: 0.9;
  animation-duration: 3.2s;
}

.envelope-pack.is-opening .star-glow {
  opacity: 1;
  animation-duration: 1.8s;
}

.envelope-pack.is-opening .meteor,
.envelope-pack.is-open .meteor {
  animation-name: meteor-burst;
  animation-duration: 1.15s;
  animation-iteration-count: 3;
}

.envelope-pack.is-opening .meteor-a { animation-delay: 0.04s; }
.envelope-pack.is-opening .meteor-b { animation-delay: 0.14s; }
.envelope-pack.is-opening .meteor-c { animation-delay: 0.28s; }
.envelope-pack.is-opening .meteor-d { animation-delay: 0.1s; }
.envelope-pack.is-opening .meteor-e { animation-delay: 0.36s; }
.envelope-pack.is-opening .meteor-f { animation-delay: 0.48s; }
.envelope-pack.is-opening .meteor-g { animation-delay: 0.2s; }
.envelope-pack.is-opening .meteor-h { animation-delay: 0.4s; }

.envelope-pack.is-drawn .opener-star .star-card {
  opacity: 1;
  transform: translate(-50%, -28%) scale(1);
  box-shadow:
    0 0 0 1px rgba(255, 220, 160, 0.16),
    0 24px 48px rgba(0, 0, 0, 0.5),
    0 0 56px rgba(120, 170, 255, 0.35),
    0 0 24px rgba(255, 190, 120, 0.2);
}

.envelope-overlay.is-kind-star .envelope-hint,
.envelope-overlay.is-kind-star .envelope-skip {
  position: relative;
  z-index: 8;
}

.envelope-overlay.is-kind-star .envelope-pack {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  padding: 0;
  display: grid;
  place-items: center;
}

.envelope-overlay.is-kind-star .opener-star {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
}

.envelope-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}

.envelope-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 8px 8px 12px;
  cursor: pointer;
  background: #fffcf7;
  overflow: hidden;
}

.envelope-card > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.envelope-card:has(input:checked) {
  border-color: var(--accent);
  box-shadow:
    inset 0 0 0 1px var(--accent),
    0 10px 24px color-mix(in srgb, var(--accent) 22%, transparent);
}

.envelope-card:has(input:checked)::after {
  content: "✓";
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 99px;
  background: var(--accent);
  color: var(--btn-ink, #f7f3ec);
  font-size: 0.72rem;
  font-weight: 700;
}

.envelope-card strong {
  margin: 8px 4px 2px;
}

.envelope-card small {
  display: block;
  margin: 0 4px;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.envelope-thumb {
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #efe7d8;
}

.env-mini {
  position: relative;
  width: 86px;
  height: 56px;
}

.env-mini-body,
.env-mini-flap,
.env-mini-seal {
  position: absolute;
}

.env-mini-body {
  inset: 16px 0 0;
  border-radius: 0 0 4px 4px;
  background: #f3ead8;
  box-shadow: 0 6px 10px rgba(60, 40, 20, 0.12);
}

.env-mini-flap {
  left: 0;
  right: 0;
  top: 0;
  height: 28px;
  background: #e9dcc4;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.env-mini-seal {
  left: 50%;
  top: 22px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #8b2e2e;
  transform: translateX(-50%);
}

.envelope-none .envelope-thumb {
  background: repeating-linear-gradient(-32deg, #f4efe6, #f4efe6 8px, #ebe3d4 9px);
}

.envelope-none .env-mini-flap,
.envelope-none .env-mini-seal {
  display: none;
}

.envelope-none .env-mini-body {
  inset: 8px 10px;
  border-radius: 4px;
  background: #fffaf3;
  border: 1px dashed #c4b5a0;
}

.env-mini-petal,
.env-mini-box,
.env-mini-book,
.env-mini-lamp,
.env-mini-stars,
.env-mini-gate {
  display: none;
  position: absolute;
}

.envelope-kind-bloom .env-mini-flap,
.envelope-kind-bloom .env-mini-body,
.envelope-kind-bloom .env-mini-seal,
.envelope-kind-gift .env-mini-flap,
.envelope-kind-gift .env-mini-body,
.envelope-kind-gift .env-mini-seal,
.envelope-kind-folio .env-mini-flap,
.envelope-kind-folio .env-mini-body,
.envelope-kind-folio .env-mini-seal,
.envelope-kind-lantern .env-mini-flap,
.envelope-kind-lantern .env-mini-body,
.envelope-kind-lantern .env-mini-seal,
.envelope-kind-star .env-mini-flap,
.envelope-kind-star .env-mini-body,
.envelope-kind-star .env-mini-seal,
.envelope-kind-gate .env-mini-flap,
.envelope-kind-gate .env-mini-body,
.envelope-kind-gate .env-mini-seal {
  display: none;
}

.envelope-bloom .envelope-thumb { background: #1a241c; }
.envelope-bloom .env-mini-petal {
  display: block;
  left: 50%;
  top: 22%;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #d4a017 10%, transparent 11%),
    conic-gradient(from 12deg, #c45c6a, #f4c4c8, #e8a0a8, #8b3a46, #c45c6a);
  box-shadow: 0 0 0 6px rgba(196, 92, 106, 0.15);
  transform: rotateX(28deg);
}

.envelope-gift .envelope-thumb { background: #16080e; }
.envelope-gift .env-mini-box {
  display: block;
  left: 24px;
  right: 24px;
  top: 28px;
  bottom: 14px;
  background: linear-gradient(145deg, #a33858, #5c1530);
  border-radius: 3px;
  box-shadow:
    8px 0 0 #3d0e22,
    inset 0 12px 0 #c44d6a;
  transform: perspective(120px) rotateX(12deg) rotateY(-16deg);
}
.envelope-gift .env-mini-box::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 7px;
  margin-left: -3.5px;
  background: linear-gradient(#ffe9b8, #c9a227);
}

.envelope-lantern .envelope-thumb { background: #140e0a; }
.envelope-lantern .env-mini-lamp {
  display: block;
  left: 34px;
  right: 34px;
  top: 12px;
  bottom: 14px;
  border-radius: 6px / 14px;
  background:
    repeating-linear-gradient(90deg, #f0c36a 0 5px, #d4923a 5px 10px),
    linear-gradient(180deg, #ffe3a0, #c45c26);
  box-shadow:
    0 0 16px rgba(255, 160, 60, 0.35),
    inset 0 0 10px rgba(255, 220, 120, 0.35);
}

.envelope-folio .envelope-thumb { background: #efe6d6; }
.envelope-folio .env-mini-book {
  display: block;
  left: 24px;
  right: 24px;
  top: 16px;
  bottom: 12px;
  background: #f3ead8;
  border-radius: 2px 6px 6px 2px;
  box-shadow: 4px 4px 0 #d9cdb6;
}

.envelope-star .envelope-thumb { background: #101722; }
.envelope-star .env-mini-stars {
  display: block;
  inset: 0;
  background:
    radial-gradient(circle at 30% 35%, #ead9b2 1.5px, transparent 2px),
    radial-gradient(circle at 68% 28%, #ead9b2 1.5px, transparent 2px),
    radial-gradient(circle at 52% 62%, #ead9b2 2px, transparent 2.5px),
    radial-gradient(circle at 24% 70%, #d4b483 1px, transparent 1.5px);
}

.envelope-gate .envelope-thumb { background: #2a241c; }
.envelope-gate .env-mini-gate {
  display: block;
  inset: 8px 18px 10px;
  border-radius: 50% 50% 4px 4px / 36% 36% 4px 4px;
  background:
    linear-gradient(90deg, #6e4320 0 48%, #1a120c 48% 52%, #5a3418 52% 100%);
  box-shadow:
    0 0 0 4px #e8dfd0,
    0 0 14px rgba(255, 200, 120, 0.2);
  overflow: hidden;
}
.envelope-gate .env-mini-gate::before,
.envelope-gate .env-mini-gate::after {
  content: "";
  position: absolute;
  top: 10%;
  width: 28%;
  height: 36%;
  border: 1px solid rgba(40, 24, 10, 0.5);
  background: linear-gradient(180deg, rgba(255, 236, 190, 0.45), rgba(180, 140, 80, 0.2));
  box-shadow: inset 0 0 0 2px #4a3424;
}
.envelope-gate .env-mini-gate::before { left: 10%; }
.envelope-gate .env-mini-gate::after { right: 10%; }

.envelope-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin: 16px 0 4px;
}

.envelope-colors .field-label {
  flex: 1 0 100%;
  margin: 0 0 2px;
}

.env-swatch {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 56px;
  font-size: 0.72rem;
  color: var(--ink-soft);
  cursor: pointer;
}

.env-swatch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.env-swatch .env-swatch-chip {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #c4b5a0;
  background-size: cover;
  background-position: center;
}

.env-swatch-name {
  max-width: 72px;
  text-align: center;
  line-height: 1.2;
}

.env-swatch:has(input:checked) .env-swatch-chip {
  box-shadow: 0 0 0 2px var(--accent);
}

.env-swatch-wax .env-swatch-chip { background: #f3ead8; box-shadow: 0 0 0 1px #c4b5a0, inset 0 0 0 8px #8b2e2e; }
.env-swatch-linen .env-swatch-chip { background: #efe6d6; }
.env-swatch-midnight .env-swatch-chip { background: #1b2433; }
.env-swatch-blush .env-swatch-chip { background: #f3ddd6; }
.env-swatch-kraft .env-swatch-chip { background: #c8a36a; }
.env-swatch-sage .env-swatch-chip { background: #d7e0d0; }
.env-swatch-champagne .env-swatch-chip { background: #f4e6c8; }
.env-swatch-wine .env-swatch-chip { background: #4a1c28; }
.env-swatch-slate .env-swatch-chip { background: #d8dde4; }
.env-swatch-emerald .env-swatch-chip { background: #dce8df; box-shadow: 0 0 0 1px #2f6b55; }
.env-swatch-navy .env-swatch-chip { background: #1a2744; }
.env-swatch-rose .env-swatch-chip { background: #f6e4e8; box-shadow: 0 0 0 1px #c4788a; }

.envelope-colors.is-bloom-flowers .env-swatch:not(.is-bloom-flower) {
  display: none;
}

.envelope-colors.is-bloom-flowers .env-swatch-chip {
  width: 44px;
  height: 44px;
  box-shadow: 0 0 0 1px #c4b5a0;
  background-size: auto;
}

.envelope-colors.is-bloom-flowers .env-swatch:has(input:checked) .env-swatch-chip {
  box-shadow: 0 0 0 2px var(--accent);
}

.envelope-colors.is-bloom-flowers .env-swatch-wax .env-swatch-chip {
  background:
    radial-gradient(circle at 50% 50%, #5a1018 0 16%, transparent 18%),
    repeating-conic-gradient(from 10deg, #c42038 0 14deg, #8a1424 14deg 28deg);
}
.envelope-colors.is-bloom-flowers .env-swatch-linen .env-swatch-chip {
  background:
    radial-gradient(circle at 50% 50%, #e0a428 0 28%, transparent 30%),
    repeating-conic-gradient(from 6deg, #fff 0 10deg, #efe6d4 10deg 20deg);
}
.envelope-colors.is-bloom-flowers .env-swatch-midnight .env-swatch-chip {
  background:
    radial-gradient(circle at 50% 50%, #3a4888 0 18%, transparent 20%),
    repeating-conic-gradient(from 8deg, #c8d4f0 0 10deg, #6a78b8 10deg 20deg);
}
.envelope-colors.is-bloom-flowers .env-swatch-blush .env-swatch-chip {
  background:
    radial-gradient(circle at 50% 50%, #e8b84a 0 14%, transparent 16%),
    repeating-conic-gradient(from 12deg, #e070a8 0 12deg, #b03878 12deg 24deg);
}
.envelope-colors.is-bloom-flowers .env-swatch-kraft .env-swatch-chip {
  background:
    radial-gradient(circle at 50% 50%, #3a2010 0 32%, transparent 34%),
    repeating-conic-gradient(from 4deg, #f0c430 0 12deg, #d48810 12deg 24deg);
}
.envelope-colors.is-bloom-flowers .env-swatch-sage .env-swatch-chip {
  background:
    radial-gradient(circle at 50% 50%, #8a9a28 0 24%, #c45018 32%, transparent 34%),
    repeating-conic-gradient(from 6deg, #f07828 0 10deg, #c43810 10deg 20deg);
}
.envelope-colors.is-bloom-flowers .env-swatch-wine .env-swatch-chip {
  background:
    radial-gradient(circle at 50% 50%, #1a0810 0 22%, transparent 24%),
    repeating-conic-gradient(from 18deg, #8a2048 0 36deg, #4a1020 36deg 72deg);
}

.envelope-preview {
  margin-top: 22px;
  padding: 18px 12px 16px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--paper, #f7f3ec) 76%, #1c1917 8%);
  text-align: center;
  overflow: visible;
}

.envelope-preview .envelope-stage {
  min-height: 300px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  overflow: visible;
  background:
    radial-gradient(900px 500px at 50% 0%, color-mix(in srgb, var(--env-paper) 18%, transparent), transparent 64%),
    linear-gradient(180deg, var(--env-scene, #241910), color-mix(in srgb, var(--env-scene, #241910) 82%, #000));
}

.envelope-stage.is-kind-envelope {
  padding: 56px 8px 28px;
}

.envelope-stage.is-kind-bloom,
.envelope-stage.is-kind-gift,
.envelope-stage.is-kind-folio,
.envelope-stage.is-kind-lantern,
.envelope-stage.is-kind-star,
.envelope-stage.is-kind-gate {
  min-height: 500px;
  padding: 56px 12px 40px;
}

.envelope-preview .envelope-pack {
  padding: 36px 8px 20px;
}

.envelope-preview .envelope-3d {
  width: min(72vw, 300px);
  height: calc(min(72vw, 300px) * 0.66);
}

.envelope-stage.is-kind-star .opener-star {
  width: min(86vw, 380px);
  min-width: 300px;
  height: 400px;
  border-radius: 14px;
}

.envelope-stage.is-kind-gate .opener-gate {
  width: min(86vw, 380px);
  min-width: 300px;
  height: 400px;
  border-radius: 14px;
}

#envelope-replay {
  margin-top: 8px;
}

@keyframes envelope-hint {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

@keyframes env-idle {
  0%, 100% { transform: rotateX(11deg) rotateY(-5deg) translateY(0); }
  50% { transform: rotateX(13deg) rotateY(4deg) translateY(-5px); }
}

@keyframes lantern-sway {
  0%, 100% { transform: rotate(-2.4deg); }
  50% { transform: rotate(2.6deg); }
}

@keyframes motes-drift {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(-10px); opacity: 1; }
}

@keyframes lantern-pulse {
  0%, 100% { opacity: 0.72; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.18; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.2); }
}

@keyframes meteor-fly {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(34deg) scaleX(0.2);
  }
  8% { opacity: 1; }
  28% {
    opacity: 0;
    transform: translate(200px, 145px) rotate(34deg) scaleX(1);
  }
  100% { opacity: 0; }
}

@keyframes meteor-burst {
  0% {
    opacity: 0;
    transform: translate(0, 0) rotate(36deg) scaleX(0.15);
  }
  10% { opacity: 1; }
  55% {
    opacity: 0.9;
    transform: translate(240px, 170px) rotate(36deg) scaleX(1.08);
  }
  100% {
    opacity: 0;
    transform: translate(290px, 210px) rotate(36deg) scaleX(0.35);
  }
}

@keyframes aurora-drift {
  0%, 100% { transform: translateX(-5%) rotate(-12deg); opacity: 0.42; }
  50% { transform: translateX(6%) rotate(-7deg); opacity: 0.85; }
}

@keyframes milky-drift {
  0%, 100% { transform: translateX(-2%) rotate(-18deg); opacity: 0.7; }
  50% { transform: translateX(3%) rotate(-15deg); opacity: 1; }
}

@keyframes star-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.12); }
}

@keyframes moon-soft {
  0%, 100% { transform: scale(1) translateY(0); filter: brightness(1); }
  50% { transform: scale(1.06) translateY(-3px); filter: brightness(1.12); }
}

@keyframes gift-idle {
  0%, 100% { transform: rotateX(-36deg) rotateY(-34deg) translateY(0); }
  50% { transform: rotateX(-40deg) rotateY(-18deg) translateY(-4px); }
}

@keyframes bloom-idle {
  0%, 100% { transform: rotateX(6deg) scale(0.78); }
  50% { transform: rotateX(8deg) scale(0.84); }
}

@keyframes gift-rattle {
  0%, 100% { transform: rotateX(-38deg) rotateY(-30deg) translateY(0); }
  20% { transform: rotateX(-38deg) rotateY(-36deg) translateY(-5px) rotateZ(-2.5deg); }
  45% { transform: rotateX(-38deg) rotateY(-23deg) translateY(1px) rotateZ(2.5deg); }
  72% { transform: rotateX(-38deg) rotateY(-33deg) translateY(-2px) rotateZ(-1.2deg); }
}

@keyframes gift-lid-off {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  38% {
    transform: translate3d(0, -64px, 0) rotateZ(-2deg);
    opacity: 1;
  }
  100% {
    transform: translate3d(-34px, -168px, -18px) rotateZ(-12deg) rotateX(-26deg);
    opacity: 0;
  }
}

@keyframes lantern-flicker {
  0%, 100% { transform: scaleY(1) scaleX(1) translateX(0); }
  22% { transform: scaleY(1.1) scaleX(0.93) translateX(-0.8px); }
  44% { transform: scaleY(0.94) scaleX(1.05) translateX(0.7px); }
  68% { transform: scaleY(1.07) scaleX(0.96) translateX(-0.4px); }
}

@keyframes lantern-flare {
  0% { transform: scale(1); }
  40% { transform: scale(1.55) translateY(-3px); }
  100% { transform: scale(1.2); }
}

@keyframes lantern-rays-turn {
  to { transform: scale(1) rotate(374deg); }
}

@keyframes lantern-tassel-sway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

@keyframes lantern-ember {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.5);
  }
  12% { opacity: 1; }
  75% { opacity: 0.8; }
  100% {
    opacity: 0;
    transform: translate3d(var(--ex, 0), -240px, 0) scale(0.25);
  }
}

@keyframes gift-spark {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.3);
  }
  14% { opacity: 1; }
  62% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate3d(var(--sx, 0), var(--sy, -120px), 0) rotate(var(--sr, 200deg)) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .envelope-hint,
  .envelope-flap,
  .envelope-letter,
  .envelope-seal,
  .envelope-3d,
  .bloom-ring i,
  .bloom-flower,
  .bloom-card,
  .bloom-glow,
  .bloom-stamens em,
  .gift-lid,
  .gift-card,
  .gift-bow,
  .gift-bow-mount,
  .gift-scene,
  .gift-burst,
  .gift-sparks i,
  .folio-cover,
  .folio-inner,
  .opener-folio,
  .folio-ribbon,
  .lantern-card,
  .lantern-haze,
  .lantern-flame,
  .lantern-rays,
  .lantern-core,
  .lantern-embers i,
  .lantern-tassel,
  .lantern-rig,
  .lantern-body,
  .opener-motes,
  .star-card,
  .star-aurora,
  .star-moon,
  .star-glow,
  .star-milky,
  .sky-star,
  .meteor {
    animation: none !important;
    transition: none !important;
  }
}

@media (scripting: none) {
  .envelope-overlay {
    display: none !important;
  }
}