/* Seal motion v4 — envelope built in code (no photo cut-outs). Reference: client video, not shipped. */
.entrance{position:fixed;inset:0;z-index:30;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(ellipse 70% 55% at 22% 18%,#4a1d2a 0%,#2e121c 45%,#1a0a11 80%,#120709 100%)}
.entrance[hidden]{display:none}.entrance:focus{outline:none}
.entrance:before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.motion-stage{width:min(100vw,56.25svh,620px);aspect-ratio:9/16;position:relative;direction:rtl;container-type:inline-size}

/* Camera + envelope */
.camera{position:absolute;inset:0;transform-origin:50% 56%}
.envelope{--w:80cqw;position:absolute;left:50%;top:60%;width:var(--w);aspect-ratio:1.95;transform:translate(-50%,-50%) rotate(-13deg);perspective:1600px;
  filter:drop-shadow(-1cqw 3.5cqw 4cqw #07020499) drop-shadow(0 .4cqw .5cqw #07020488)}
.envelope>*{position:absolute;inset:0}
.paper-tex{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E")}
.env-back{border-radius:.5cqw;background:linear-gradient(165deg,#3a1520,#1f0b12);z-index:1}
.env-light{z-index:7;pointer-events:none;border-radius:.5cqw;background:linear-gradient(125deg,#ffffff14 0%,#ffffff05 35%,#00000000 55%,#00000030 100%)}
.env-card .card-title{position:absolute;left:0;right:0;top:20%;text-align:center;font:400 5.2cqw/1 Amiri;color:#a9823f;direction:rtl}
.env-card{z-index:3;inset:5% 5.5% 6%;border-radius:.4cqw;background:linear-gradient(160deg,#fdfbf6 0%,#f4eee3 70%,#ebe3d4 100%);box-shadow:0 -.4cqw 1.6cqw #1a070c55}
.env-card svg{position:absolute;inset:7% 7%;width:86%;height:86%}
.env-pocket{z-index:4}
.env-pocket svg,.env-flap svg{width:100%;height:100%;display:block;overflow:visible}
.env-flap{z-index:5;transform-origin:50% 0;transform-style:preserve-3d}
.flap-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flap-back{transform:rotateY(180deg)}

/* Wax seal — polished gold */
.wax{position:absolute;left:50%;top:60%;width:13.5%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  filter:drop-shadow(0 .5cqw .6cqw #1a070ca8)}
.wax svg{width:100%;height:100%;display:block}
.wax-shine{position:absolute;inset:6%;border-radius:50%;overflow:hidden;pointer-events:none}
.wax-shine:before{content:'';position:absolute;top:-30%;bottom:-30%;width:38%;left:-60%;transform:rotate(22deg);
  background:linear-gradient(90deg,#fff0 0%,#fff6e0b0 50%,#fff0 100%);mix-blend-mode:screen;animation:wax-sweep 3.6s ease-in-out infinite}
@keyframes wax-sweep{0%,55%{left:-60%}100%{left:130%}}
.entrance.revealing .wax-shine:before{animation:none;opacity:0}

/* Trigger lives in the envelope's coordinate box, over the seal */
.envelope>.seal-trigger{position:absolute;inset:auto;left:50%;top:60%;width:max(52px,16%);aspect-ratio:1;min-height:52px;transform:translate(-50%,-50%);z-index:12;border:0;border-radius:50%;padding:0;background:transparent;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;outline:none}
.seal-halo,.seal-ring{position:absolute;pointer-events:none;border-radius:50%}
.seal-halo{inset:-35%;background:radial-gradient(circle,#ddab5246 0%,#ddab5222 38%,#ddab5200 70%);animation:seal-breathe 2.8s ease-in-out infinite}
.seal-ring{inset:4%;border:1px solid #ebc88666;box-shadow:0 0 12px #ddab5233;animation:seal-ring-breathe 2.8s ease-in-out infinite}
.seal-trigger:hover .seal-halo,.seal-trigger:focus-visible .seal-halo{opacity:.9;animation:none}
.seal-trigger:focus-visible{outline:2px solid #f0d8a5;outline-offset:5px}
.seal-trigger:disabled{cursor:default;pointer-events:none}
.entrance.revealing .seal-trigger,.entrance.settled .seal-trigger{opacity:0;pointer-events:none;transition:opacity .18s}
@keyframes seal-breathe{0%,100%{opacity:.3;transform:scale(.92)}50%{opacity:.75;transform:scale(1.06)}}
@keyframes seal-ring-breathe{0%,100%{opacity:.2;transform:scale(.97)}50%{opacity:.6;transform:scale(1.04)}}

/* Copy & actions (same text as rev 3.4) */
.entrance-copy{position:absolute;top:10%;right:10%;left:10%;z-index:8;color:#fcfaf6;text-align:right;pointer-events:none}
.entrance-copy .en{font-size:clamp(9px,2.5cqw,12px);letter-spacing:3px;color:#d2b477}
.entrance-copy h1{font:400 clamp(32px,12cqw,66px)/1.5 Amiri;margin:15px 0 0}
.entrance-copy p{font:clamp(22px,7cqw,37px) Cormorant;color:#e7d8bf;margin:0;direction:ltr;text-align:right}
.entrance-copy .sample{display:block;color:#c6b29b;margin-top:14px;font-size:clamp(9px,2cqw,11px)}
.entrance-actions{position:absolute;bottom:6%;right:10%;left:10%;z-index:10;text-align:center}
.seal-hint{color:#e6d2af;font:400 clamp(15px,4cqw,20px)/1.7 Amiri;margin:0 0 12px;transition:opacity .2s}
.seal-hint span{display:block;font:clamp(13px,3.4cqw,17px)/1.5 Cormorant;color:#bba68c}
.entrance.revealing .seal-hint,.entrance[data-state=loading] .seal-hint,.entrance.settled .entrance-actions{opacity:0;pointer-events:none}
.skip-button{color:#cbbba6;background:transparent;border:0;border-bottom:1px solid #9f815440;min-height:44px;padding:8px 12px;font-size:11px;touch-action:manipulation}
.entrance-language{position:absolute;top:max(12px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));z-index:40;color:#efe4d2;border:0;background:transparent;min-height:44px;padding:10px;font-size:12px}
.reading-arrival{animation:paper-arrive .65s ease both}.replay-wrap{text-align:center;padding:0 20px 28px}.replay{border:0;background:transparent;border-bottom:1px solid #c9b792;color:#7c644b;min-height:44px;font-size:12px}
@keyframes paper-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-height:600px){.entrance-copy{top:5%}.entrance-copy h1{font-size:29px;margin-top:4px}.entrance-copy p{font-size:21px}.entrance-copy .sample{margin-top:5px}.entrance-actions{bottom:2%}.seal-hint{font-size:13px;margin-bottom:0}.seal-hint span{display:none}}
@media(prefers-reduced-motion:reduce){.entrance{display:none}.reading-arrival,.seal-halo,.seal-ring,.wax-shine:before{animation:none}}