/* Letter cards rendered as folded envelopes with unique stamps. */
.letters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 26px;
    perspective: 1400px;
}

/* The envelope itself */
.envelope {
    position: relative;
    aspect-ratio: 5 / 3.4;
    background:
      linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 18%),
      linear-gradient(180deg, #fff5ef 0%, #fbe5e9 100%);
    border: 1px solid var(--paper-edge);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform 420ms cubic-bezier(.2,.7,.2,1), box-shadow 420ms;
    box-shadow: var(--shadow-card);
    animation: envelopeIdle 7s ease-in-out infinite;
    display: block;
    color: var(--ink);
}
.letters-grid > .envelope:nth-child(2n)   { animation-delay: -2.3s; }
.letters-grid > .envelope:nth-child(3n)   { animation-delay: -4.1s; }
.letters-grid > .envelope:nth-child(odd)  { animation-delay: -1.2s; }

@keyframes envelopeIdle {
    0%, 100% { transform: translateY(0)    rotate(0); }
    50%      { transform: translateY(-2px) rotate(-.25deg); }
}

/* Triangular flap (closed by default) */
.envelope .flap {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 56%;
    background:
      linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 30%),
      linear-gradient(180deg, #fbd5dc 0%, #f6b8c6 100%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transform-origin: 50% 0;
    transition: transform 700ms cubic-bezier(.4,1.5,.4,1);
    z-index: 3;
    pointer-events: none;
    border-bottom: 1px solid rgba(178,88,103,.12);
}
.envelope .flap-shadow {
    position: absolute;
    top: 56%; left: 8%; right: 8%;
    height: 6px;
    background: radial-gradient(ellipse at 50% 0, rgba(124,58,74,.18), transparent 70%);
    pointer-events: none;
    z-index: 1;
    transition: opacity var(--t-mid);
}

/* Decorative address lines (subtle horizontal rules) on the body */
.envelope .address-lines {
    position: absolute;
    bottom: 22px; left: 18px; right: 90px;
    display: flex; flex-direction: column; gap: 22px;
    z-index: 1;
    pointer-events: none;
}
.envelope .address-lines span {
    display: block; height: 1px;
    background: linear-gradient(90deg, var(--paper-edge), transparent);
    opacity: .6;
}

/* Stamp in top-right */
.envelope .stamp-holder {
    position: absolute;
    top: 12px; right: 12px;
    width: 50px; height: 60px;
    z-index: 4;
    filter: drop-shadow(0 2px 0 rgba(146,82,106,.15));
    transform: rotate(4deg);
    transition: transform var(--t-mid);
}
.envelope .stamp-holder svg { width: 100%; height: 100%; display: block; }
.envelope:hover .stamp-holder { transform: rotate(-3deg) scale(1.06); }

/* Wax seal — sits at bottom-right of envelope body */
.envelope .seal {
    position: absolute;
    bottom: 14px; right: 18px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f6b8c6, var(--rose-deep) 70%);
    color: white;
    font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
    font-size: 0.84rem;
    box-shadow: 0 2px 0 rgba(255,255,255,.4) inset, 0 6px 14px -4px rgba(124,58,74,.45);
    transform: rotate(-6deg);
    transition: transform var(--t-mid);
    z-index: 4;
}
.envelope .seal::before {
    content: '';
    position: absolute; inset: 4px;
    border-radius: 50%;
    border: 1px dashed rgba(255,255,255,.55);
}
.envelope:hover .seal { transform: rotate(2deg) scale(1.08); }

/* Address text (visible below the flap fold) */
.envelope .address {
    position: absolute;
    left: 20px; right: 60px; bottom: 18px;
    z-index: 2;
    display: flex; flex-direction: column; gap: 4px;
}
.envelope .address .to {
    font-size: 0.62rem;
    color: var(--ink-faint);
    letter-spacing: .14em;
    text-transform: uppercase;
}
.envelope .address .to em {
    font-family: 'Caveat', cursive;
    font-style: normal;
    font-size: 1.08rem;
    color: var(--rose-deep);
    letter-spacing: 0;
    text-transform: none;
    margin-left: 4px;
    vertical-align: -2px;
}
.envelope .title-row {
    display: flex; flex-direction: column; gap: 4px;
    padding: 5px 0 6px;
    border-top: 1px dashed rgba(178,88,103,.25);
    border-bottom: 1px dashed rgba(178,88,103,.25);
}
.envelope .thread-pill {
    display: inline-flex; align-items: center; gap: 5px;
    width: fit-content;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.6rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--rose-deep);
    background: rgba(217,122,139,.10);
    border: 1px solid rgba(217,122,139,.18);
    font-weight: 500;
}
.envelope h3 {
    margin: 0;
    font-family: 'Fraunces', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.1rem;
    color: var(--ink);
    line-height: 1.2;
    /* truncate to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.envelope .date {
    margin-top: 4px;
    font-size: 0.62rem;
    color: var(--ink-faint);
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Open hint — small label that nudges right on hover */
.envelope .open-hint {
    position: absolute;
    bottom: 14px; left: 20px;
    display: none; /* not used in this layout — kept for accessibility tools */
}

/* Hover state */
.envelope:hover {
    transform: translateY(-8px) rotate(-.5deg);
    box-shadow:
        0 1px 0 rgba(255,255,255,.7) inset,
        0 30px 60px -22px rgba(146,82,106,.45),
        0 8px 18px -8px rgba(146,82,106,.25);
    animation-play-state: paused;
}
.envelope:hover .flap {
    transform: rotateX(-32deg);
    box-shadow: 0 -10px 18px -2px rgba(146,82,106,.18);
}
.envelope:hover .flap-shadow { opacity: .4; }

/* Click animation — flap fully opens, paper rises, card scales then fades */
.envelope.opening {
    animation: envelopeOpenLift 520ms cubic-bezier(.4,1.4,.4,1) forwards;
    pointer-events: none;
}
.envelope.opening .flap {
    transform: rotateX(-180deg);
    transition: transform 520ms cubic-bezier(.4,1.4,.4,1);
}
@keyframes envelopeOpenLift {
    0%   { transform: translateY(-8px) rotate(-.5deg) scale(1);   opacity: 1; }
    55%  { transform: translateY(-22px) rotate(0)     scale(1.03); opacity: 1; }
    100% { transform: translateY(-50px) rotate(0)     scale(1.05); opacity: 0; }
}
.envelope.opening::after {
    content: '';
    position: absolute;
    left: 8%; right: 8%; top: 22%; bottom: 16%;
    background: linear-gradient(180deg, #fff 0%, #fff5ef 100%);
    border: 1px solid var(--paper-edge);
    border-radius: 4px;
    z-index: 5;
    box-shadow: 0 8px 14px -6px rgba(146,82,106,.25);
    animation: paperRise 520ms cubic-bezier(.4,1.2,.4,1) forwards;
}
@keyframes paperRise {
    0%   { transform: translateY(40%) scale(.94); opacity: 0; }
    35%  { opacity: 1; }
    100% { transform: translateY(-40%) scale(1.02); opacity: 1; }
}

/* ==========================================================================
   UNREAD STATE — gold treatment + animations to entice opening
   ========================================================================== */
.envelope.unread {
    background:
        linear-gradient(180deg, rgba(255, 250, 235, .85) 0%, rgba(255, 240, 215, 0) 18%),
        linear-gradient(170deg, #fffaf0 0%, #fdeec6 55%, #f8dba0 100%);
    border-color: rgba(232, 200, 132, .8);
    animation: unreadIdle 7s ease-in-out infinite, goldGlow 3.5s ease-in-out infinite;
    color: var(--ink);
}
@keyframes unreadIdle {
    0%, 100% { transform: translateY(0)    rotate(0); }
    50%      { transform: translateY(-3px) rotate(-.4deg); }
    88%      { transform: translateY(0)    rotate(0); }
    90%      { transform: translateY(-2px) rotate(-1.2deg); }
    93%      { transform: translateY(0)    rotate(1.1deg); }
    96%      { transform: translateY(-1px) rotate(-0.6deg); }
}
@keyframes goldGlow {
    0%, 100% {
        box-shadow:
            0 1px 0 rgba(255,255,255,.7) inset,
            0 0 0 1px rgba(232, 200, 132, .35),
            0 14px 40px -18px rgba(201, 163, 92, .55),
            0 0 26px -8px rgba(232, 200, 132, .45);
    }
    50% {
        box-shadow:
            0 1px 0 rgba(255,255,255,.85) inset,
            0 0 0 1px rgba(232, 200, 132, .65),
            0 22px 56px -18px rgba(201, 163, 92, .8),
            0 0 50px -6px rgba(248, 217, 132, .7);
    }
}

/* Gold flap */
.envelope.unread .flap {
    background:
        linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 30%),
        linear-gradient(180deg, #fce19a 0%, #f1c878 100%);
    border-bottom: 1px solid rgba(146, 100, 30, .18);
}
.envelope.unread .flap-shadow {
    background: radial-gradient(ellipse at 50% 0, rgba(146,100,30,.20), transparent 70%);
}

/* Gold seal */
.envelope.unread .seal {
    background: radial-gradient(circle at 35% 30%, #ffe6a2 0%, #d6a843 70%, #a87a1f 100%);
    box-shadow:
        0 2px 0 rgba(255,255,255,.45) inset,
        0 6px 16px -3px rgba(146, 100, 30, .55),
        0 0 18px -4px rgba(248, 217, 132, .7);
    color: #fff;
    text-shadow: 0 1px 0 rgba(146,100,30,.45);
}

/* Gold-tinted address-line accents */
.envelope.unread .address-lines span {
    background: linear-gradient(90deg, rgba(232,200,132,.55), transparent);
    opacity: .7;
}
.envelope.unread .title-row {
    border-top-color: rgba(201, 163, 92, .35);
    border-bottom-color: rgba(201, 163, 92, .35);
}

/* Shimmer sweep — subtle highlight that travels across the envelope */
.envelope.unread::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg,
        transparent 28%,
        rgba(255, 245, 215, .45) 42%,
        rgba(255, 252, 230, .85) 50%,
        rgba(255, 245, 215, .45) 58%,
        transparent 72%);
    transform: translateX(-100%);
    animation: shimmerSweep 4.2s ease-in-out infinite;
    pointer-events: none;
    mix-blend-mode: screen;
    z-index: 5;
}
@keyframes shimmerSweep {
    0%   { transform: translateX(-100%); opacity: 0; }
    18%  { opacity: 1; }
    65%  { opacity: 1; }
    85%  { transform: translateX(150%); opacity: 0; }
    100% { transform: translateX(150%); opacity: 0; }
}

/* "Just for you" / "Pour toi" badge */
.envelope .new-badge {
    position: absolute;
    top: 14px; left: 14px;
    z-index: 5;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px 5px 11px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
    color: #6e4e1a;
    background: linear-gradient(135deg, #fff1c2 0%, #f8d984 50%, #e8b94d 100%);
    border: 1px solid rgba(201, 153, 70, .55);
    box-shadow:
        0 2px 0 rgba(255,255,255,.5) inset,
        0 6px 14px -4px rgba(201, 153, 70, .6),
        0 0 18px -4px rgba(248, 217, 132, .8);
    animation: badgePulse 2.6s ease-in-out infinite;
}
.envelope .new-badge::before {
    content: '✦';
    display: inline-block;
    color: #b88a2e;
    font-size: 0.78rem;
    line-height: 1;
    animation: sparkleSpin 2.4s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { transform: scale(1);    box-shadow: 0 2px 0 rgba(255,255,255,.5) inset, 0 6px 14px -4px rgba(201, 153, 70, .6),  0 0 18px -4px rgba(248, 217, 132, .7); }
    50%      { transform: scale(1.06); box-shadow: 0 2px 0 rgba(255,255,255,.6) inset, 0 10px 20px -4px rgba(201, 153, 70, .75), 0 0 26px -2px rgba(248, 217, 132, .95); }
}
@keyframes sparkleSpin {
    0%, 100% { opacity: 1;  transform: scale(1)    rotate(0deg); }
    50%      { opacity: .55;transform: scale(.85)  rotate(180deg); }
}

/* Hover state for unread — subtly stronger glow */
.envelope.unread:hover {
    box-shadow:
        0 1px 0 rgba(255,255,255,.85) inset,
        0 0 0 1px rgba(232, 200, 132, .75),
        0 32px 60px -20px rgba(201, 163, 92, .7),
        0 0 56px -4px rgba(248, 217, 132, .85);
}
.envelope.unread:hover .new-badge { transform: scale(1.08); }

/* ==========================================================================
   OPENED STATE — postmark cancellation over the stamp
   ========================================================================== */
.envelope.opened .stamp-holder { position: absolute; top: 12px; right: 12px; }
.stamp-postmark {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform: rotate(-8deg);
    animation: postmarkSettle 600ms cubic-bezier(.4,1.3,.4,1) both;
}
.stamp-postmark .postmark-svg { width: 100%; height: 100%; display: block; }
@keyframes postmarkSettle {
    from { opacity: 0; transform: rotate(-22deg) scale(1.4); }
    to   { opacity: 1; transform: rotate(-8deg)  scale(1); }
}

/* Slightly desaturate stamp on opened envelopes — like a real cancelled stamp */
.envelope.opened .stamp-holder svg.stamp-svg { filter: saturate(.88); }

/* ==========================================================================
   BLUE VARIANT — letters addressed to Hins (recipient = hins)
   ========================================================================== */
.envelope.to-hins {
    background:
      linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 18%),
      linear-gradient(180deg, var(--hins-blue-tint) 0%, var(--hins-blue-pale) 100%);
    border-color: var(--hins-blue-edge);
}
.envelope.to-hins .flap {
    background:
      linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 30%),
      linear-gradient(180deg, #cfe0f6 0%, #a7c4ea 100%);
    border-bottom: 1px solid rgba(48, 80, 130, .14);
}
.envelope.to-hins .flap-shadow {
    background: radial-gradient(ellipse at 50% 0, rgba(48,80,130,.18), transparent 70%);
}
.envelope.to-hins .seal {
    background: radial-gradient(circle at 35% 30%, #a7c4ea, var(--hins-blue) 70%);
    box-shadow:
        0 2px 0 rgba(255,255,255,.4) inset,
        0 6px 14px -4px rgba(48,80,130,.5);
}
.envelope.to-hins .address .to em { color: var(--hins-blue); }
.envelope.to-hins .title-row {
    border-top-color: rgba(58, 109, 171, .25);
    border-bottom-color: rgba(58, 109, 171, .25);
}
.envelope.to-hins .thread-pill {
    color: var(--hins-blue);
    background: rgba(58, 109, 171, .10);
    border-color: rgba(58, 109, 171, .18);
}
.envelope.to-hins:hover {
    box-shadow:
        0 1px 0 rgba(255,255,255,.7) inset,
        0 30px 60px -22px rgba(48,80,130,.45),
        0 8px 18px -8px rgba(48,80,130,.25);
}
/* Unread blue keeps the gold treatment so unopened letters always look special — gold
   reads as "for you" universally and avoids muddy-blue-on-blue states. */

/* Empty state */
.empty-vault {
    grid-column: 1 / -1;
    padding: 60px 28px;
    text-align: center;
    border: 1px dashed var(--paper-edge);
    border-radius: var(--radius-lg);
    background: rgba(255,255,255,.45);
}
.empty-vault svg { display: block; margin: 0 auto 18px; opacity: .85; }
.empty-vault h3 { margin: 0 0 6px; font-family: 'Fraunces', serif; font-style: italic; font-size: 1.4rem; }
.empty-vault p  { margin: 0; color: var(--ink-soft); font-family: 'Cormorant Garamond', serif; font-size: 1.05rem; }