:root {
  --env-1: #adb8a0;
  --env-2: #93a085;
  --env-3: #6f7a63;
  --env-4: #505949;
  --env-5: #40473a;
  --inside-image: url("../assets/atras_fondo.jpg");
  --card-paper-image: url("../assets/carta_fondo.png");
}

* {
  box-sizing: border-box;
}

.scene {
  --env-width: clamp(300px, 84vw, 620px);
  --env-height: calc(var(--env-width) * 0.72);
  --card-width: clamp(232px, 62vw, 430px);
  --env-radius: clamp(20px, 3vw, 28px);

  position: relative;
  width: min(100%, 980px);
  height: min(94dvh, 1040px);
  min-height: 520px;
  margin: 0 auto;
  perspective: 2200px;
  perspective-origin: 50% 22%;
  overflow: visible;
  cursor: pointer;
}

.scene.open {
  cursor: default;
}

.scene:focus-visible {
  outline: none;
}

.envelope {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--env-width);
  height: var(--env-height);
  z-index: 2;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  filter:
    drop-shadow(0 18px 22px rgba(46, 43, 35, 0.08))
    drop-shadow(0 34px 42px rgba(46, 43, 35, 0.16));
  transition: 
    width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    left 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    top 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Base del sobre */
.envelope-back {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: 8px 8px var(--env-radius) var(--env-radius);
  background: var(--card-paper-image) center / cover no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -20px 26px rgba(48, 53, 44, 0.18),
    0 14px 22px rgba(30, 29, 24, 0.08);
  transition: 
    transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    left 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    top 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
    height 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  left: 15%;
  width: 50%;
  height: 50%;
  top: 15%;
  transform: translateX(-1%) rotate(135deg);
}

.envelope-back::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.10), transparent 14%, transparent 86%, rgba(0,0,0,0.08)),
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 26%, rgba(0,0,0,0.08) 100%);
  pointer-events: none;
}

.scene.open .envelope-back {
  transform: translateX(-1%) rotate(135deg);
  left: 15% !important;
  top: -47% !important;
  width: 71% !important;
  height: 101% !important;
}

.scene.open .envelope{
  left: 35%;
  top: 30%;
  width: calc(var(--env-width) * 0.8);
  height: calc(var(--env-height) * 0.8);
}

/* Papel interior */
.envelope-inner {
  position: absolute;
  left: 50%;
  top: 6%;
  width: 94%;
  height: 68%;
  z-index: 4;
  opacity: 0;
  overflow: hidden;
  transform: translateX(-50%) translateY(16%) scale(0.96);
  transform-origin: center bottom;
  transition:
    top 1.1s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.28s ease 0.12s;
  clip-path: polygon(50% 0, 100% 16%, 100% 100%, 0 100%, 0 16%);
  background: var(--inside-image) center/cover no-repeat;
  box-shadow:
    0 16px 30px rgba(0, 0, 0, 0.20),
    inset 0 -18px 26px rgba(26, 24, 19, 0.12);
  transform: translateX(-1%) rotate(135deg);
  border-radius: 8px 8px var(--env-radius) var(--env-radius);
  width: 71% !important;
  height: 101% !important;
}

.envelope-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), transparent 36%),
    linear-gradient(0deg, rgba(0,0,0,0.10), transparent 30%),
    linear-gradient(90deg, rgba(0,0,0,0.05), transparent 22%, transparent 78%, rgba(0,0,0,0.08));
  pointer-events: none;
}

.scene.open .envelope-inner {
  opacity: 1;
  left: -11% !important;
  top: -124% !important;
}

/* Parte frontal inferior del sobre */
.envelope-pocket {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: 5;
  overflow: hidden;
  clip-path: polygon(0% 0%, 5% 0%, 39% 33%, 62% 33%, 95% 0%, 100% 0%, 100% 100%, 0% 100%);
  border-radius: 0 0 var(--env-radius) var(--env-radius);
  background: var(--card-paper-image);
  box-shadow:
    inset 0 10px 14px rgba(255,255,255,0.06),
    inset 0 -24px 30px rgba(47, 52, 43, 0.20);
}

/* Pliegue lateral izquierdo */
.envelope-pocket::before,
.envelope-pocket::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50.2%;
  z-index: 2;
}

.envelope-pocket::before {
  left: 0;
  clip-path: polygon(0% 0%, 67% 15%, 100% 15%, 100% 100%, 0% 100%);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.07) 18%, rgba(130, 140, 118, 0.24) 46%, rgba(96, 105, 84, 0.58) 72%, rgba(72, 79, 63, 0.88) 100%), 
  linear-gradient(140deg, transparent 47.3%, rgba(77, 83, 71, 0.20) 49.9%, rgba(255, 255, 255, 0.08) 49.3%, transparent 50.9%) left top / 98% 100% no-repeat;
  box-shadow:
    inset 12px 10px 16px rgba(255,255,255,0.06),
    inset -16px -16px 20px rgba(42,48,39,0.18);
}

/* Pliegue lateral derecho */
.envelope-pocket::after {
  right: 0;
  clip-path: polygon(0 15%, 34% 15%, 100% 0, 100% 100%, 0% 100%);

  background: linear-gradient(207deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.07) 18%, rgba(130, 140, 118, 0.24) 46%, rgba(96, 105, 84, 0.58) 72%, rgba(72, 79, 63, 0.88) 100%), 
    linear-gradient(221deg, transparent 47.3%, rgba(77, 83, 71, 0.20) 48.9%, rgba(255, 255, 255, 0.08) 49.3%, transparent 49.9%) left top / 100% 100% no-repeat;
  pointer-events: none;
  box-shadow:
    inset -12px 10px 16px rgba(255,255,255,0.06),
    inset 16px -16px 20px rgba(42,48,39,0.18);
}

/* Línea central solo abajo */
.fold-center {
  position: absolute;
  top: 15%;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  z-index: 3;
  opacity: 0.58;
  background: linear-gradient(to bottom, rgba(40,44,36,0.38), rgba(255,255,255,0.12));
  box-shadow: 0 0 8px rgba(30, 33, 27, 0.12);
}

/* Flap superior real */
.envelope-flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0%;
  height: 88%;
  z-index: 6;
  overflow: hidden;
  clip-path: polygon(100% 0, 95% 30%, 55% 70%, 45% 70%, 5% 30%, 0 0);
  transform: rotateX(0deg);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  transition: transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);

  background:
    linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02) 28%, rgba(0,0,0,0.07) 100%),
    var(--card-paper-image) center / cover no-repeat;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 -18px 24px rgba(50, 55, 45, 0.14);

  filter: drop-shadow(0 10px 14px rgba(36, 34, 28, 0.14));
}


.envelope-flap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    /* costura/sombra lateral izquierda */
    linear-gradient(
      255deg,
      transparent 76%,
      rgba(60, 66, 56, 0.32) 79%,
      rgba(255,255,255,0.09) 103%,
      transparent 81%
    ) left -1% top / 22% 29% no-repeat,
    linear-gradient(
      255deg,
      transparent 76%,
      rgba(60, 66, 56, 0.32) 79%,
      rgba(255,255,255,0.09) 103%,
      transparent 81%
    ) left -1% top / 22% 29% no-repeat,


    /* costura/sombra abajo lateral izquierda */
    linear-gradient(
      213deg,
      transparent 71%,
      rgba(60, 66, 56, 0.32) 72%,
      rgba(255,255,255,0.09) 72%,
      transparent 82%
    ) left 30% top / 83% 74% no-repeat,
    linear-gradient(
      213deg,
      transparent 71%,
      rgba(60, 66, 56, 0.32) 72%,
      rgba(255,255,255,0.09) 72%,
      transparent 82%
    ) left 30% top / 83% 74% no-repeat,


    /* costura/sombra lateral derecha */
    linear-gradient(
      285deg,
      transparent 78%,
      rgba(60, 66, 56, 0.32) 78%,
      rgba(255,255,255,0.09) 80%,
      transparent 75%
    ) right -2% top / 11% 181% no-repeat,
    linear-gradient(
      285deg,
      transparent 78%,
      rgba(60, 66, 56, 0.32) 78%,
      rgba(255,255,255,0.09) 80%,
      transparent 75%
    ) right -2% top / 11% 181% no-repeat,

    /* costura/sombra abajo lateral derecha */
    linear-gradient(
      328deg,
      transparent 76%,
      rgba(60, 66, 56, 0.32) 77%,
      rgba(255,255,255,0.09) 77%,
      transparent 76%
    ) right 16% top / 82% 388% no-repeat,
    linear-gradient(
      328deg,
      transparent 76%,
      rgba(60, 66, 56, 0.32) 77%,
      rgba(255,255,255,0.09) 77%,
      transparent 76%
    ) right 16% top / 82% 388% no-repeat,

    /* costura/sombra abajo centro*/
    linear-gradient(
      360deg,
      transparent 76%,
      rgba(60, 66, 56, 0.32) 79%,
      rgba(256,255,255,0.09) 76%,
      transparent 78%
    ) right 38% top / 43% 330% no-repeat,
    linear-gradient(
      360deg,
      transparent 76%,
      rgba(60, 66, 56, 0.32) 79%,
      rgba(256,255,255,0.09) 76%,
      transparent 78%
    ) right 38% top / 43% 330% no-repeat,

    /* sombreado general suave */
    linear-gradient(
      180deg,
      rgba(255,255,255,0.08),
      transparent 36%,
      rgba(0,0,0,0.06) 100%
    );
}

.envelope-flap::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 1%;
  height: 22%;
  clip-path: polygon(0 0, 100% 0, 54% 100%, 46% 100%);
  background: linear-gradient(180deg, rgba(34, 38, 31, 0.30), transparent 86%);
  filter: blur(6px);
  opacity: 0.9;
  pointer-events: none;
}


.scene.open .envelope-flap {
  transform: rotateX(-179deg);
}

@media (min-width: 768px) {
  .scene {
    --env-width: clamp(430px, 64vw, 720px);
    --card-width: clamp(290px, 42vw, 500px);
    height: min(90dvh, 1040px);
    min-height: 620px;
  }
}

@media (min-width: 1200px) {
  .scene {
    --env-width: clamp(520px, 46vw, 780px);
    --card-width: clamp(360px, 30vw, 560px);
    height: min(90dvh, 1080px);
    min-height: 700px;
  }
}

@media (max-width: 479px) {
  .scene {
    min-height: 480px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .envelope-back,
  .envelope-inner,
  .envelope-flap {
    transition: none !important;
  }
}