/* the envelope — used for the cards in the grid and for the big opening animation */
.env{position:relative;width:100%;aspect-ratio:1.14;--tint:#18213a;--edge:rgba(241,239,236,.13);display:block;text-align:left;color:var(--ink)}
.env-body,.env-front,.env-flap,.env-paper{position:absolute}
.env-body{inset:0;border-radius:3px;background:linear-gradient(165deg,color-mix(in srgb,var(--tint) 86%,#fff 14%),var(--tint));
  box-shadow:0 0 0 1px var(--edge) inset,0 18px 30px -16px rgba(0,0,0,.75)}
.env-paper{left:7%;right:7%;top:8%;bottom:8%;background:linear-gradient(#efe7d4,#ddd3bd);border-radius:2px;transition:transform 1.1s var(--ease)}
.env-front{inset:0;clip-path:polygon(0 0,50% 46%,100% 0,100% 100%,0 100%);border-radius:3px;
  background:linear-gradient(175deg,color-mix(in srgb,var(--tint) 90%,#fff 10%),color-mix(in srgb,var(--tint) 92%,#000 8%))}
.env-flap{left:0;right:0;top:0;height:46%;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;z-index:3;
  background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 76%,#fff 24%),color-mix(in srgb,var(--tint) 88%,#fff 12%))}
.env-lines{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.env-lines path{fill:none;stroke:var(--edge);stroke-width:1;vector-effect:non-scaling-stroke}
.env-seal{position:absolute;left:50%;top:46%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;z-index:5;
  background:radial-gradient(circle at 35% 30%,#f0d9a6,#b78e4d 70%);box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 14px rgba(232,200,138,.28);
  display:grid;place-items:center;transition:transform .5s var(--ease),opacity .4s,background .5s}
.env-seal::after{content:"";width:12px;height:12px;border-radius:50%;box-shadow:0 0 0 1px rgba(90,62,20,.4) inset}
.env-seal svg{position:absolute;width:12px;height:12px;opacity:0;stroke:#0e131f;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.env-label{position:absolute;left:0;right:0;bottom:0;padding:0 12px 11px;z-index:2;display:grid;gap:3px}
.env-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--ink-3);text-transform:lowercase}
.env-title{font-family:var(--serif);font-style:italic;font-size:17.5px;line-height:1.08;color:rgba(241,239,236,.94);text-wrap:balance}
.env-title.is-long{font-size:15.5px;line-height:1.06}
.env-state{position:absolute;top:8px;right:9px;z-index:6;font-family:var(--mono);font-size:10px;color:var(--ink-3);opacity:0;text-transform:lowercase;transition:opacity .5s}

/* tints (muted dusk tones) */
.grid li:nth-child(8n+1) .env{--tint:#18223b}
.grid li:nth-child(8n+2) .env{--tint:#1b2a38}
.grid li:nth-child(8n+3) .env{--tint:#231f38}
.grid li:nth-child(8n+4) .env{--tint:#1a2c34}
.grid li:nth-child(8n+5) .env{--tint:#1f2538}
.grid li:nth-child(8n+6) .env{--tint:#2a2335}
.grid li:nth-child(8n+7) .env{--tint:#172b3a}
.grid li:nth-child(8n+8) .env{--tint:#202a34}

/* ── card behaviour ────────────────────────────────────── */
.card{display:block;width:100%;text-align:left;transition:transform .5s var(--ease),opacity .6s,filter .6s;animation:cardIn .9s var(--ease) both;animation-delay:calc(var(--i) * 55ms + .15s)}
@keyframes cardIn{from{opacity:0;transform:translateY(18px)}}
.card:active{transform:scale(.975)}
.card .env{animation:sway 8s ease-in-out infinite;animation-delay:calc(var(--i) * -1.3s)}
@keyframes sway{50%{transform:translateY(-3px) rotate(.4deg)}}
@media (hover:hover){.card:hover .env-flap{transform:scaleY(.9)}.card:hover .env-seal{transform:scale(1.08)}}
.env-flap{transition:transform .5s var(--ease),opacity .5s}

/* opened */
.card.is-opened{opacity:.62}
.card.is-opened .env{animation:none}
.card.is-opened .env-flap{opacity:0;transform:scaleY(.2)}
.card.is-opened .env-seal{background:rgba(241,239,236,.07);box-shadow:0 0 0 1px rgba(241,239,236,.4) inset;transform:scale(.92)}
.card.is-opened .env-seal::after{display:none}
.card.is-opened .env-seal svg{opacity:1;stroke:var(--ink)}
.card.is-opened .env-state{opacity:1;color:var(--ink-2)}
.card.is-opened .env-paper{filter:brightness(.5)}
.card.is-opened .env-title{color:var(--ink-2)}
.card.is-opened:hover{opacity:.9}

/* the last one */
.is-final .env{aspect-ratio:1.9;--tint:#2a2218;--edge:rgba(232,200,138,.34);
  animation:none}
.is-final .env-body{background:linear-gradient(165deg,#34291a,#1d170f 70%);box-shadow:0 0 0 1px var(--edge) inset,0 0 44px -6px rgba(232,200,138,.2),0 18px 30px -16px rgba(0,0,0,.8)}
.is-final .env-front{clip-path:polygon(0 0,50% 50%,100% 0,100% 100%,0 100%);background:linear-gradient(175deg,#2f2518,#241c12)}
.is-final .env-flap{height:50%;background:linear-gradient(180deg,#46371f,#352a19)}
.is-final .env-seal{top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;animation:pulse 3.6s ease-in-out infinite}
.is-final .env-label{padding:0 16px 14px;justify-items:center;text-align:center;bottom:2px}
.is-final .env-title{font-size:21px;color:#f4e6c6;text-shadow:0 0 22px rgba(232,200,138,.35)}
.is-final .env-kicker{color:rgba(232,200,138,.7)}
.is-final .env-paper{display:none}
.card.is-final.is-ready .env-body{box-shadow:0 0 0 1px rgba(232,200,138,.7) inset,0 0 70px -2px rgba(232,200,138,.4),0 18px 30px -16px rgba(0,0,0,.8)}
.card.is-final.is-locked{opacity:.78;filter:saturate(.7)}
.card.is-final.is-locked .env-seal{animation:none;background:radial-gradient(circle at 35% 30%,#a99870,#6e5f3e 70%)}
.card.is-final.is-locked .env-seal::after{display:none}
.card.is-final.is-locked .env-seal svg{opacity:1;stroke:#1b150c}
.card.is-final.is-locked .env-seal .lock{opacity:1}
.card.is-nudge .env{animation:nudge .5s ease}
@keyframes nudge{20%{transform:translateX(-5px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
.card.is-final.is-opened{opacity:.8}
.card.is-final.is-opened .env-flap{opacity:1;transform:none}
.card.is-final.is-opened .env-seal{background:radial-gradient(circle at 35% 30%,#f0d9a6,#b78e4d 70%);box-shadow:0 0 14px rgba(232,200,138,.4)}
.card.is-final.is-opened .env-seal::after{display:block}
.card.is-final.is-opened .env-seal svg{opacity:0}
@keyframes pulse{50%{box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 30px rgba(232,200,138,.65)}}
@media (min-width:600px){.is-final .env{aspect-ratio:3}}

/* ── big opening animation (viewer) ────────────────────── */
.v-stage .env-label,.v-stage .env-state{display:none}
.v-stage .env{aspect-ratio:1.45;opacity:0;transform:translateY(24px) scale(.92);animation:none;transition:opacity .7s var(--ease),transform 1s var(--ease);filter:drop-shadow(0 0 40px rgba(232,200,138,.12))}
.v-stage .env-flap{height:52%;z-index:3}
.v-stage .env-front{clip-path:polygon(0 0,50% 52%,100% 0,100% 100%,0 100%)}
.v-stage .env-seal{top:52%}
.v-stage.s1 .env{opacity:1;transform:none}
.v-stage.s2 .env-flap{animation:flap .8s var(--ease) forwards}
.v-stage.s2 .env-seal{transform:scale(1.5);opacity:0}
.v-stage.s3 .env-paper{transform:translateY(-58%)}
.v-stage.s3 .env-flap{transform:scaleY(-1);z-index:0;background:linear-gradient(0deg,color-mix(in srgb,var(--tint) 72%,#fff 28%),color-mix(in srgb,var(--tint) 84%,#fff 16%))}
.v-stage.s3 .env-seal{opacity:0}
.v-stage .env-paper{z-index:1;top:6%;bottom:auto;height:86%}
.v-stage .env-front{z-index:2}
@keyframes flap{0%{transform:scaleY(1);z-index:3}49%{z-index:3}50%{transform:scaleY(0);z-index:0}100%{transform:scaleY(-1);z-index:0}}
.v-stage.quick .env-paper,.v-stage.quick .env{transition-duration:.5s}
.v-stage.quick.s2 .env-flap{animation-duration:.4s}

.env-seal .lock{position:absolute;width:12px;height:12px;opacity:0;stroke:#1b150c;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card.is-final.is-locked .env-seal .tick{display:none}