@font-face {
      font-family: 'CustomBangla';
      src: url('https://text-to-handwriting-maker.vercel.app/fonts/Bangla_Font.ttf') format('truetype');
      font-display: swap;
}

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --env-scale: 1;
      --gold: #c9a84c;
      --gold-light: #f0d080;
      --gold-dark: #8b6914;
      --green-deep: #0d2b1a;
      --green-mid: #1a4a2e;
      --green-light: #2d7a4f;
      --cream: #fdf8ee;
      --cream-dark: #f0e6c8;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      max-width: 100vw;
      overflow: hidden;
    }

    body {
      background: var(--green-deep);
      background-image: radial-gradient(ellipse at top left, #1a4a2e 0%, #0d2b1a 60%), radial-gradient(ellipse at bottom right, #1a3a10 0%, transparent 70%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'CustomBangla', 'Hind Siliguri', sans-serif;
      perspective: 1200px;
      color: var(--cream);
    }

    /* ── Starfield ── */
    .stars {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    .star {
      position: absolute;
      border-radius: 50%;
      background: rgba(240, 208, 128, 0.8);
      animation: twinkle linear infinite;
    }

    @keyframes twinkle {

      0%,
      100% {
        opacity: 0.2;
        transform: scale(1);
      }

      50% {
        opacity: 1;
        transform: scale(1.4);
      }
    }

    /* ── Floating lanterns ── */
    .lanterns {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    .lantern {
      position: absolute;
      bottom: -60px;
      animation: floatUp linear infinite;
      opacity: 0.7;
    }

    .lantern-inner {
      width: 18px;
      height: 26px;
      border-radius: 40% 40% 50% 50%;
      position: relative;
      box-shadow: 0 0 12px 4px currentColor;
    }

    .lantern::before {
      content: '';
      position: absolute;
      top: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 2px;
      height: 5px;
      background: currentColor;
      opacity: 0.6;
    }

    .lantern::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%);
      width: 1px;
      height: 6px;
      background: currentColor;
      opacity: 0.5;
    }

    @keyframes floatUp {
      0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
      }

      10% {
        opacity: 0.7;
      }

      90% {
        opacity: 0.5;
      }

      100% {
        transform: translateY(-110vh) translateX(30px);
        opacity: 0;
      }
    }

    /* ── Crescent moon ── */
    .moon-wrap {
      position: fixed;
      top: 30px;
      right: 60px;
      z-index: 1;
      pointer-events: none;
    }

    .moon {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 40%, var(--gold-light), var(--gold));
      box-shadow: 0 0 30px 10px rgba(201, 168, 76, 0.3), 0 0 60px 20px rgba(201, 168, 76, 0.1);
      position: relative;
      animation: moonGlow 4s ease-in-out infinite;
    }

    .moon::after {
      content: '';
      position: absolute;
      top: 8px;
      right: -5px;
      width: 55px;
      height: 55px;
      border-radius: 50%;
      background: var(--green-deep);
      box-shadow: -5px 0 0 var(--green-mid);
    }

    .moon-star {
      position: absolute;
      top: 12px;
      right: -22px;
      font-size: 1.1rem;
      animation: moonGlow 4s ease-in-out infinite 0.5s;
      z-index: 1;
    }

    @keyframes moonGlow {

      0%,
      100% {
        filter: brightness(1);
      }

      50% {
        filter: brightness(1.2);
      }
    }

    /* ── Envelope wrapper ── */
    .env-wrapper {
      position: relative;
      transform: scale(var(--env-scale));
      margin-top: 50px;
      z-index: 10;
    }

    #envelope-wrap {
      position: relative;
      width: 420px;
      height: 280px;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    #envelope-wrap:hover {
      transform: translateY(-4px);
    }

    .envelope {
      width: 100%;
      height: 100%;
      position: relative;
      filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.7));
    }

    /* Envelope body — deep green with gold filigree texture */
    .env-body {
      position: absolute;
      inset: 0;
      background: linear-gradient(160deg, #1a4a2e 0%, #0f3320 50%, #0a2215 100%);
      border-radius: 4px;
      overflow: hidden;
      z-index: 1;
    }

    .env-body::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(201, 168, 76, 0.04) 18px, rgba(201, 168, 76, 0.04) 19px),
        repeating-linear-gradient(-45deg, transparent, transparent 18px, rgba(201, 168, 76, 0.04) 18px, rgba(201, 168, 76, 0.04) 19px);
    }

    /* Gold border inside envelope body */
    .env-body::after {
      content: '';
      position: absolute;
      inset: 8px;
      border: 1px solid rgba(201, 168, 76, 0.25);
      border-radius: 2px;
      pointer-events: none;
    }

    .env-left {
      position: absolute;
      bottom: 0;
      left: 0;
      border-top: 140px solid transparent;
      border-bottom: 140px solid transparent;
      border-left: 210px solid #0f3320;
      z-index: 3;
    }

    .env-right {
      position: absolute;
      bottom: 0;
      right: 0;
      border-top: 140px solid transparent;
      border-bottom: 140px solid transparent;
      border-right: 210px solid #0a2215;
      z-index: 3;
    }

    .env-bottom {
      position: absolute;
      bottom: 0;
      left: 0;
      border-left: 210px solid transparent;
      border-right: 210px solid transparent;
      border-bottom: 150px solid #1a4a2e;
      z-index: 3;
    }

    .env-flap {
      position: absolute;
      top: 0;
      left: 0;
      border-left: 210px solid transparent;
      border-right: 210px solid transparent;
      border-top: 160px solid #2d5e3a;
      transform-origin: top center;
      transform: rotateX(0deg);
      transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
      z-index: 4;
    }

    .env-flap.open {
      transform: rotateX(-180deg);
      z-index: 1;
    }

    /* Gold seal with crescent */
    .seal {
      position: absolute;
      top: 110px;
      left: 50%;
      transform: translateX(-50%);
      width: 58px;
      height: 58px;
      background: radial-gradient(circle at 40% 35%, var(--gold-light), var(--gold-dark));
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      color: #fff;
      box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.4), 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.3);
      z-index: 5;
      transition: opacity 0.3s, transform 0.3s;
    }

    .seal.hide {
      opacity: 0;
      transform: translateX(-50%) scale(0.5);
      pointer-events: none;
    }

    /* Decorative Arabic text on envelope */
    .env-arabic {
      position: absolute;
      top: 18px;
      left: 50%;
      transform: translateX(-50%);
      font-family: 'Aref Ruqaa', 'Amiri', serif;
      font-size: 1.1rem;
      color: rgba(201, 168, 76, 0.6);
      white-space: nowrap;
      z-index: 6;
      letter-spacing: 0.05em;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    }

    .hint {
      text-align: center;
      color: rgba(201, 168, 76, 0.7);
      font-size: 0.85rem;
      letter-spacing: 0.1em;
      margin-top: 25px;
      animation: blink 2s ease-in-out infinite;
    }

    @keyframes blink {

      0%,
      100% {
        opacity: 0.4;
      }

      50% {
        opacity: 1;
      }
    }

    /* ── Paper ── */
    #paper-wrap {
      position: absolute;
      left: 50%;
      bottom: 15px;
      transform: translateX(-50%);
      width: 360px;
      height: 133px;
      z-index: 2;
      perspective: 1500px;
      transform-style: preserve-3d;
      transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
    }

    #paper-wrap.rising {
      transform: translate(-50%, -160px);
    }

    .segment-base {
      position: absolute;
      inset: 0;
      transform-style: preserve-3d;
    }

    .segment-top,
    .segment-bottom {
      position: absolute;
      left: 0;
      right: 0;
      height: 133px;
      transform-style: preserve-3d;
    }

    .segment-top {
      bottom: 100%;
      transform-origin: bottom center;
      transform: rotateX(-179.5deg);
      transition: transform 0.9s 0.9s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 3;
    }

    .segment-bottom {
      top: 100%;
      transform-origin: top center;
      transform: rotateX(179.5deg);
      transition: transform 0.9s 1.4s cubic-bezier(0.4, 0, 0.2, 1);
      z-index: 2;
    }

    #paper-wrap.rising .segment-top,
    #paper-wrap.rising .segment-bottom {
      transform: rotateX(0deg);
    }

    .paper-front,
    .paper-back {
      position: absolute;
      inset: 0;
      backface-visibility: hidden;
      border-radius: 2px;
    }

    .segment-top .paper-front {
      background: linear-gradient(180deg, var(--cream) 0%, #f5ebcc 100%);
    }

    .segment-base .paper-front {
      background: linear-gradient(180deg, #f5ebcc 0%, #eddcaa 100%);
    }

    .segment-bottom .paper-front {
      background: linear-gradient(180deg, #eddcaa 0%, #e0cc8a 100%);
    }

    .paper-back {
      background: linear-gradient(180deg, #e0cc8a 0%, #c9a84c 100%);
      transform: rotateX(180deg);
    }

    .ruled-lines {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: repeating-linear-gradient(180deg, transparent 0px, transparent 31px, rgba(139, 105, 20, 0.1) 31px, rgba(139, 105, 20, 0.1) 32px);
      background-size: 100% 32px;
    }

    .crease {
      position: absolute;
      left: 0;
      right: 0;
      height: 2px;
      background-image: linear-gradient(90deg, transparent, rgba(139, 105, 20, 0.2), transparent);
      z-index: 10;
    }

    .crease-bottom {
      bottom: -1px;
      background-color: #f5ebcc;
    }

    .crease-top {
      top: -1px;
      background-color: #eddcaa;
    }

    /* ── Full letter view ── */
    #full-view {
      display: none;
      opacity: 0;
      transition: opacity 0.8s ease;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100vw;
      height: 100dvh;
      background: rgba(10, 30, 18, 0.92);
      backdrop-filter: blur(6px);
      overflow-y: auto;
      overflow-x: hidden;
      padding: 60px 15px 120px 15px;
      z-index: 100;
    }

    #full-view.active {
      display: block;
    }

    #full-view.visible {
      opacity: 1;
    }

    #full-paper {
      width: 100%;
      max-width: 850px;
      margin: 0 auto;
      background: linear-gradient(160deg, var(--cream) 0%, var(--cream-dark) 100%);
      border-radius: 8px;
      padding: 70px 50px 70px 70px;
      box-shadow: 0 40px 100px rgba(0, 0, 0, 0.8), 0 0 0 2px rgba(201, 168, 76, 0.3), 0 0 0 6px rgba(201, 168, 76, 0.08);
      position: relative;
      animation: paper-appear 0.7s ease forwards;
      opacity: 0.95;
    }

    @keyframes paper-appear {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Gold decorative border */
    #full-paper::before {
      content: '';
      position: absolute;
      inset: 14px;
      border: 1px solid rgba(201, 168, 76, 0.4);
      border-radius: 4px;
      pointer-events: none;
    }

    /* Corner ornaments */
    .corner {
      position: absolute;
      width: 36px;
      height: 36px;
      opacity: 0.5;
    }

    .corner svg {
      width: 100%;
      height: 100%;
    }

    .corner-tl {
      top: 20px;
      left: 20px;
    }

    .corner-tr {
      top: 20px;
      right: 20px;
      transform: scaleX(-1);
    }

    .corner-bl {
      bottom: 20px;
      left: 20px;
      transform: scaleY(-1);
    }

    .corner-br {
      bottom: 20px;
      right: 20px;
      transform: scale(-1);
    }

    .margin-line {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 55px;
      width: 1px;
      background: rgba(139, 105, 20, 0.25);
      z-index: 0;
    }

    .letter-content-wrapper {
      position: relative;
      z-index: 2;
    }

    /* Eid greeting header */
    .eid-header {
      text-align: center;
      margin-bottom: 35px;
    }

    .eid-arabic {
      font-family: 'Aref Ruqaa', 'Amiri', serif;
      font-size: 2.2rem;
      color: var(--gold-dark);
      line-height: 1.4;
      display: block;
      margin-bottom: 6px;
      text-shadow: 0 1px 2px rgba(139, 105, 20, 0.2);
    }

    .eid-subtitle {
      font-family: 'Hind Siliguri', sans-serif;
      font-size: 0.85rem;
      color: #8b6914;
      letter-spacing: 0.15em;
    }

    .eid-divider {
      width: 60%;
      margin: 15px auto 0;
      border: none;
      border-top: 1px solid rgba(201, 168, 76, 0.4);
    }

    .letter-date {
      font-family: 'CustomBangla', 'Amiri', serif;
      font-size: 1.1rem;
      color: #8b6914;
      text-align: right;
      margin-bottom: 30px;
    }

    .letter-salutation {
      font-family: 'CustomBangla', 'Amiri', serif;
      font-size: 1.5rem;
      color: #2d5e3a;
      margin-bottom: 25px;
    }

    .full-line {
      font-family: 'CustomBangla', 'Hind Siliguri', sans-serif;
      font-size: 1.35rem;
      line-height: 1.9;
      color: #1a3a10;
      display: block;
      margin-bottom: 20px;
      word-break: break-word;
      overflow-wrap: break-word;
    }

    .letter-closing {
      font-family: 'CustomBangla', 'Amiri', serif;
      font-size: 1.35rem;
      color: #4a7a3a;
      text-align: right;
      margin-top: 50px;
    }

    .letter-closing .sig {
      font-family: 'Aref Ruqaa', 'Amiri', serif;
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--gold-dark);
      margin-top: 8px;
    }

    /* Eid footer badge */
    .eid-footer {
      text-align: center;
      margin-top: 40px;
    }

    .eid-badge {
      display: inline-block;
      padding: 8px 28px;
      border: 1px solid rgba(201, 168, 76, 0.5);
      border-radius: 50px;
      font-family: 'Aref Ruqaa', 'Amiri', serif;
      font-size: 1.1rem;
      color: var(--gold-dark);
      background: rgba(201, 168, 76, 0.08);
      letter-spacing: 0.1em;
    }

    @media (max-width:600px) {
      :root {
        --env-scale: 0.9;
      }

      .moon-wrap {
        right: 20px;
        top: 20px;
      }
    }

    @media (max-width:480px) {
      :root {
        --env-scale: 0.85;
      }

      #full-view {
        padding: 20px 10px 100px 10px;
      }

      #full-paper {
        padding: 40px 15px 40px 35px;
      }

      .margin-line {
        left: 25px;
      }

      .full-line {
        font-size: 1.15rem;
        line-height: 1.6;
        margin-bottom: 12px;
      }

      .letter-salutation {
        font-size: 1.35rem;
      }

      .eid-arabic {
        font-size: 1.6rem;
      }
    }

    @media (max-width:380px) {
      :root {
        --env-scale: 0.8;
      }

      #full-paper {
        padding: 35px 12px 35px 30px;
      }

      .margin-line {
        left: 20px;
      }

      .full-line {
        font-size: 1.05rem;
        line-height: 1.5;
      }
    }

    @media (max-width:320px) {
      :root {
        --env-scale: 0.7;
      }
    }