/* Layered original stationery. A magical, finite reveal; no ambient loops. */
.letter-stage{perspective:1200px;isolation:isolate}
.letter-sheet{z-index:2;transform-origin:50% 50%}
.letter:not(.is-open) .letter-sheet{visibility:visible;opacity:0}
.letter.is-opening .letter-sheet{opacity:1}
.letter-controls{position:relative;display:grid;grid-template-areas:'control';min-height:48px;margin-top:16px;align-items:center;justify-items:center}
.letter-controls>.turn,.open-controls{grid-area:control}
.open-controls{display:flex;align-items:center;gap:20px;min-height:48px;position:relative;z-index:2}
.open-hint{font-size:13px;line-height:1.4;margin:0}
.read-now{font-size:13px;min-height:44px}
.letter-controls button{transition:none}
.letter-controls button:hover{filter:none}
.letter-controls button:active{transform:none}
.is-opening .turn{pointer-events:none}
.env-part,.envelope{position:absolute;top:50%;left:50%;width:min(100%,460px);transform:translate(-50%,-50%);border-radius:4px;container-type:inline-size}
.env-part{perspective:1100px;pointer-events:none;transform-origin:50% 50%;transition:transform 100ms cubic-bezier(.23,1,.32,1)}
.is-pressed .env-part{transform:translate(-50%,-50%) scale(.985);transition-duration:120ms}
.env-rear{z-index:0;background:var(--paper);box-shadow:0 20px 28px #0005}
.env-lining{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:4px}
.solid-lining{display:block}
.env-pocket{z-index:3}
.env-pocket-art{position:absolute;inset:0;width:100%;height:100%;clip-path:var(--pocket-shape);border-radius:4px;filter:drop-shadow(0 2px 2px #0006)}
.env-outer{z-index:4}
.env-hinge{position:absolute;inset:0;transform-origin:50% 0;transform-style:preserve-3d}
.env-flap-art,.env-flap-inside,.env-flap-shade{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;-webkit-backface-visibility:hidden;clip-path:var(--flap-shape);border-radius:4px}
.env-flap-art{object-fit:fill}
.env-flap-inside{clip-path:var(--flap-reverse);transform:rotateX(180deg);object-fit:cover;background:var(--paper)}
.env-flap-shade{background:linear-gradient(180deg,#0000,#000);opacity:0;transform:translateZ(.25px)}
.envelope-name{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.15;overflow-wrap:anywhere}
.envelope{z-index:5;display:block;padding:0;border:0;background:transparent;box-shadow:none;filter:none;overflow:visible;touch-action:manipulation}
.envelope:hover{filter:none}
.envelope:active{transform:translate(-50%,-50%)}
.env-glow{position:absolute;top:40%;left:50%;width:96%;height:72%;z-index:1;pointer-events:none;opacity:0;background:radial-gradient(ellipse at center,#fff9 0%,color-mix(in srgb,var(--letter-light) 85%,transparent) 24%,transparent 68%);transform:translate(-50%,-50%) scale(.94)}
.env-seal-glint{position:absolute;width:19%;aspect-ratio:1;translate:-50% -50%;background:radial-gradient(ellipse at center,#fff 0%,#fff8 10%,#fff0 53%);opacity:0;backface-visibility:hidden;transform:translateZ(.5px)}
.env-seal-glint::after{content:'';position:absolute;inset:16%;background:#fff;clip-path:polygon(50% 0,56% 43%,100% 50%,56% 56%,50% 100%,44% 56%,0 50%,44% 43%)}
@media(prefers-reduced-motion:reduce){.env-part{transition:none}.is-pressed .env-part{transform:translate(-50%,-50%)}}
@media print{.env-part,.env-glow,.envelope,.open-controls{display:none!important}.letter-sheet{opacity:1!important}}

/* Finite material details; their only clock is the opening timeline. */
.env-sparks{position:absolute;left:50%;top:50%;width:0;height:0;z-index:5;pointer-events:none}
.env-spark{position:absolute;left:0;top:0;display:block;border-radius:50%;background:#fff;box-shadow:0 0 5px #fff,0 0 12px var(--spark-accent);opacity:0;pointer-events:none}
.env-spark.is-accent{background:var(--spark-accent);box-shadow:0 0 5px #fffd,0 0 14px var(--spark-accent)}
.env-spark.is-star{border-radius:0;background:none;box-shadow:none}
.env-spark.is-star::before{content:'';position:absolute;inset:-75%;background:radial-gradient(ellipse,#fff9,transparent 65%)}
.env-spark.is-star::after{content:'';position:absolute;inset:0;background:#fff;clip-path:polygon(50% 0,59% 39%,100% 50%,59% 61%,50% 100%,41% 61%,0 50%,41% 39%)}
.env-spark.is-star.is-accent::before{background:radial-gradient(ellipse,var(--spark-accent),transparent 65%)}
.env-flap-reflection{position:absolute;inset:0;clip-path:var(--flap-shape);backface-visibility:hidden;transform:translateZ(.3px);overflow:hidden;pointer-events:none;mask-image:linear-gradient(180deg,#000 0 6px,transparent 22px)}
.env-reflection-beam{position:absolute;inset:0;width:80%;opacity:0;background:linear-gradient(105deg,transparent 20%,#fff4 43%,#fff 50%,#fff3 57%,transparent 80%)}
.letter-edge-reflection{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:2px;mask-image:linear-gradient(90deg,#000,transparent 12px,transparent calc(100% - 12px),#000),linear-gradient(180deg,#000,transparent 10px,transparent calc(100% - 10px),#000);z-index:2}
.letter-edge-beam{position:absolute;inset:0;opacity:0;background:linear-gradient(180deg,transparent 22%,#fff4 42%,#fff 50%,#fff4 58%,transparent 78%)}
.letter-lift-shadow{position:absolute;inset:0;z-index:-1;border-radius:2px;box-shadow:0 22px 26px #0009;pointer-events:none;opacity:0}
.letter-paper-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(110deg,#000,transparent 65%);opacity:0;pointer-events:none}
@media print{.env-sparks,.letter-edge-reflection,.letter-lift-shadow,.letter-paper-shade{display:none!important}}

/* Visible magic follows the paper; it never flashes the entire viewport. */
.env-mouth-light{position:absolute;left:4%;right:4%;top:-12px;height:30px;opacity:0;pointer-events:none;background:radial-gradient(ellipse,#fffe 0%,var(--letter-light) 28%,transparent 70%)}
.letter-aura{position:absolute;inset:-1px;border-radius:4px;box-shadow:0 0 18px var(--letter-light),0 0 38px color-mix(in srgb,var(--letter-light) 50%,transparent);opacity:0;z-index:-1;pointer-events:none}
@media print{.letter-aura,.env-mouth-light{display:none!important}}

/* Hide the complete front face after the half-turn, including its reflections.
   The solid reverse stays behind the paper; the pocket stays in front. */
.env-hinge-front{backface-visibility:hidden;-webkit-backface-visibility:hidden}