:root {
  --envelope-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --flap-duration: 3s;
  --card-duration: 2.4s;
  --envelope-paper: #f8f6f2;
  --envelope-paper-shade: #f8f6f2;
}

.envelope-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 2rem 0;
  background: radial-gradient(ellipse at center, rgba(98, 74, 68, 0.08), transparent 62%);
}

.envelope-wrapper [data-envelope-template] {
  display: flex;
  justify-content: center;
  width: 100%;
}

.envelope {
  position: relative;
  display: inline-block;
  width: min(92vw, calc(82vh * 1.5), 900px);
  aspect-ratio: 3 / 2;
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.envelope-3d {
  position: absolute;
  inset: 0;
  perspective: 2400px;
  border-radius: 8px;
  overflow: hidden;
  transition: opacity var(--card-duration) var(--envelope-ease);
}

.envelope.is-card-out .envelope-3d {
  opacity: 0;
  pointer-events: none;
}

/* Back of the envelope: a plain rectangle with a triangular flap on top */
.envelope-pocket {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, var(--envelope-paper), var(--envelope-paper-shade));
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(98, 74, 68, 0.08);
}

.envelope-pocket::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
  opacity: 0.26;
  pointer-events: none;
}

/* The fold crease: each half is a shadow triangle with a paper-coloured triangle punched
   slightly inside it, leaving a thin diagonal sliver visible along that fold edge. The
   corner points are inset so the lines fade out before the envelope's rounded corners,
   and each half casts its shadow outward (left half shadows left, right half shadows right) */
.envelope-fold-left,
.envelope-fold-right {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  z-index: 2;
  background: rgba(98, 74, 68, 0.3);
  pointer-events: none;
}

.envelope-fold-left {
  clip-path: polygon(8% 100%, 50% 0%, 50% 100%);
  filter: blur(1.5px) drop-shadow(-3px 2px 2px rgba(98, 74, 68, 0.35));
}

.envelope-fold-right {
  clip-path: polygon(50% 0%, 92% 100%, 50% 100%);
  filter: blur(1.5px) drop-shadow(3px 2px 2px rgba(98, 74, 68, 0.35));
}

.envelope-fold-left::before {
  content: '';
  position: absolute;
  inset: 4px 0 0 4px;
  clip-path: polygon(8% 100%, 50% 0%, 50% 100%);
  background: var(--envelope-paper);
}

.envelope-fold-right::before {
  content: '';
  position: absolute;
  inset: 4px 4px 0 0;
  clip-path: polygon(50% 0%, 92% 100%, 50% 100%);
  background: var(--envelope-paper);
}

.envelope-fold-left-grain,
.envelope-fold-right-grain {
  position: absolute;
  bottom: 0;
  height: calc(55% - 4px);
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
  opacity: 0.4;
  pointer-events: none;
}
.envelope-fold-left-grain {
  left: 4px;
  right: 0;
  clip-path: polygon(8% 100%, 50% 0%, 50% 100%);
}

.envelope-fold-right-grain {
  left: 0;
  right: 4px;
  clip-path: polygon(50% 0%, 92% 100%, 50% 100%);
}

.envelope-fold-left::after {
  content: '';
  position: absolute;
  inset: 6px 0 0 6px;
  clip-path: polygon(8% 100%, 50% 0%, 50% 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 40%);
}

.envelope-fold-right::after {
  content: '';
  position: absolute;
  inset: 6px 6px 0 0;
  clip-path: polygon(50% 0%, 92% 100%, 50% 100%);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 40%);
}

.envelope-card {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(90vw, calc(65vh * 3 / 4));
  aspect-ratio: 3 / 4;
  transform: translate(-50%, -50%) scale(0.92);
  opacity: 0;
  pointer-events: none;
  z-index: 50;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  transition: opacity var(--card-duration) var(--envelope-ease), transform var(--card-duration) var(--envelope-ease);
}

.envelope-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--envelope-paper);
}

/* Pure CSS paper grain, laid over the card via an inline SVG noise filter (no assets or dependencies) */
.envelope-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
  opacity: 0.26;
  pointer-events: none;
}

/* Soft contact shadow the flap casts onto the pocket beneath it */
.envelope-flap-shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 62%;
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 53% 95%, 51% 98.5%, 50% 100%, 49% 98.5%, 47% 95%);
  background: rgba(40, 28, 24, 0.4);
  filter: blur(4px);
  transform: translateY(3px) scale(1);
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.envelope.is-open .envelope-flap-shadow {
  opacity: 0;
}

.envelope-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 62%;
  z-index: 3;
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.16), transparent 60%),
    linear-gradient(225deg, rgba(0, 0, 0, 0.16), transparent 60%),
    linear-gradient(180deg, var(--envelope-paper), var(--envelope-paper-shade));
  clip-path: polygon(0 0, 100% 0, 53% 95%, 51% 98.5%, 50% 100%, 49% 98.5%, 47% 95%);
  transform-origin: top center;
  transform: rotateX(0deg);
  transform-style: preserve-3d;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.3));
  transition: transform var(--flap-duration) var(--envelope-ease), z-index 0s linear;
}

.envelope-flap::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncG type='linear' slope='2.2' intercept='-0.6'/%3E%3CfeFuncB type='linear' slope='2.2' intercept='-0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: multiply;
  opacity: 0.26;
  pointer-events: none;
}

/* Step 1: the flap slowly folds open, stopping upright instead of disappearing behind the pocket */
.envelope.is-open .envelope-flap {
  transform: rotateX(-100deg);
}

.envelope-seal {
  position: absolute;
  top: 55%;
  left: 50%;
  width: 14%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(1);
  z-index: 4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 30%, #c96d6d, #8a3d3d 75%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35), inset 0 2px 3px rgba(255, 255, 255, 0.3), inset 0 -3px 6px rgba(0, 0, 0, 0.35);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.envelope-seal::before {
  content: '\2764';
  font-size: clamp(14px, 2.4vw, 28px);
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

/* Drop a custom seal graphic (e.g. assets/wax-seal.svg) here to replace the default heart */
.envelope-seal-image {
  position: absolute;
  inset: 14%;
  width: 72%;
  height: 72%;
  object-fit: contain;
}

.envelope.is-open .envelope-seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}

/* Step 2: once the flap is open, the envelope fades out and the card fades in, centered on screen */
.envelope.is-card-out .envelope-card,
.envelope-card.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 760px) {
  .envelope {
    flex-shrink: 0;
    width: min(280px, calc(100vw - 3rem));
  }
}