.env-wrapper {
        position: relative;
        width: min(92vw, 420px);
        height: min(250px, 65vw);
        margin: auto auto 10% auto;
        transition: 0.8s ease;
      }

      .env-wrapper-center {
        transition: 0.8s ease;
        transform: translateY(-70%);
        margin-bottom: 0% !important;
      }

      .envelope {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        /* Add the texture URL here, followed by your existing gradients */
        background:
          url("https://www.transparenttextures.com/patterns/church.png"),
          linear-gradient(145deg, #fce4e8, #f6b7c1),
          repeating-linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.05) 0px,
            rgba(255, 255, 255, 0.05) 2px,
            transparent 2px,
            transparent 6px
          );
        background-blend-mode: overlay;

        box-shadow:
          0 30px 80px rgba(122, 15, 44, 0.25),
          inset 0 2px 8px rgba(255, 255, 255, 0.6),
          inset 0 -8px 20px rgba(0, 0, 0, 0.08);
        perspective: 1000px;
      }

      /* ===== FLAP ===== */
      .env-flap {
        position: absolute;
        top: 0;
        width: 100%;
        height: 60%;
        clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
        transform-origin: top;
        transform: rotateX(-180deg);
        transition: transform 1s ease;
        z-index: 5;
        border-radius: 12px;
        background:
          url("https://www.transparenttextures.com/patterns/church.png"),
          linear-gradient(145deg, #f4aab3, #de7c8a);
        background-blend-mode: overlay;
        box-shadow:
          0 15px 35px rgba(0, 0, 0, 0.25),
          inset 0 2px 6px rgba(255, 255, 255, 0.4);
      }

      .envelope.closed {
        animation: float-up-down 3s ease-in-out infinite;
      }
      .envelope.closed .env-flap {
        transform: rotateX(0deg);
        z-index: 7;
      }

      .env-flap::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0.3),
          transparent 60%
        );
      }
      /* ===== FRONT ===== */
      .env-front-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        overflow: hidden;
      }
      .env-front {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        clip-path: polygon(0% 0%, 50% 50%, 100% 0%, 100% 100%, 0% 100%);
        z-index: 6;
        background:
          url("https://www.transparenttextures.com/patterns/church.png"),
          linear-gradient(145deg, #fdebed, #f9cfd6);
        background-blend-mode: overlay;
        box-shadow:
          inset 0 4px 10px rgba(255, 255, 255, 0.6),
          inset 0 -6px 12px rgba(0, 0, 0, 0.05);
      }

      #hintText {
        margin-top: 30px;
        font-weight: bold;
        font-size: 1.5rem;
        color: var(--ruby);
        display: none;
        text-align: center;
        animation: pulse 1.5s infinite;
      }