/* The app's palette (android/.../ui/theme/Theme.kt). The app is light only, and so is the viewer.
   Layout: one screen without scroll. The sealed letter floats on cream with the app's leaves; once open
   the sheet takes all the height left and a slim footer carries the title and the Cartitas mark. */
:root{--cream:#efe2d2;--beige:#e2c7a7;--sand:#d9a66a;--terracotta:#c97434;--cinnamon:#a56434;--coffee:#6a4a2d;--coffee-soft:#7a5636;--sage:#a8b089;--sheet:#fbf6ef;--paper:#f8f0e6;--cheek:#f0a48c;
  --env-back:#c9935a;--env-side:#e6c9a2;--env-bottom:#edd6b7;--env-flap:#dfbb8e;
  --display:"Fraunces",Georgia,serif;--body:"Figtree",system-ui,sans-serif;--hand:"Caveat","Segoe Print",cursive;
  color-scheme:light;color:var(--coffee);background:var(--cream);font-family:var(--body)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;overflow:hidden;background:var(--cream);padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(16px,env(safe-area-inset-left,0px));-webkit-tap-highlight-color:transparent}
#app{position:relative;z-index:1;height:100%}
.loading{height:100%;margin:0;display:grid;place-items:center;font:500 1rem var(--body);color:var(--coffee-soft)}

/* Background leaves: the app's Leaf(), same path and thin outline. */
#leaves{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#leaves>div{position:absolute}
#leaves svg{display:block;width:100%;height:100%;overflow:visible}
#leaves .sway{width:100%;height:100%;transform-origin:50% 90%;animation:sway var(--d,9s) ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}

.view{position:absolute;inset:0;display:grid}

/* ---------- sealed letter ---------- */
.sealed{place-items:center;align-content:center;gap:clamp(14px,3.2vh,28px);padding-block:16px}
.note{position:relative;transform:rotate(-3deg);background:var(--sheet);padding:16px 22px 12px;border-radius:4px;text-align:center;box-shadow:0 10px 22px #6a4a2d26,0 2px 4px #6a4a2d1f}
.note:before{content:"";position:absolute;top:-11px;left:50%;width:84px;height:22px;transform:translateX(-50%) rotate(4deg);background:repeating-linear-gradient(90deg,#a8b089bf 0 8px,#b9c09dbf 8px 16px);border-radius:2px}
.note b{display:block;font:600 clamp(28px,7.6vw,36px)/1 var(--hand);color:var(--cinnamon)}
.note span{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font:500 14px/1.3 var(--body);color:var(--coffee-soft)}
.tapdot{position:relative;width:10px;height:10px;border-radius:50%;background:var(--terracotta)}
.tapdot:after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--terracotta);animation:ping 1.6s ease-out infinite}
@keyframes ping{from{transform:scale(.4);opacity:.9}to{transform:scale(1.5);opacity:0}}
.env-btn{all:unset;cursor:pointer;display:block;position:relative;width:min(80vw,360px,52vh);border-radius:14px}
.env-btn:focus-visible{outline:3px solid var(--terracotta);outline-offset:8px}
.env-float{animation:float 3.6s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-8px) rotate(1.2deg)}}
.envelope{position:relative;aspect-ratio:1.48;perspective:900px}
.env-shadow{position:absolute;left:10%;right:10%;bottom:-26px;height:18px;border-radius:50%;background:#6a4a2d2e;filter:blur(8px);animation:shadow 3.6s ease-in-out infinite}
@keyframes shadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.88);opacity:.7}}
.env-back{position:absolute;inset:0;border-radius:12px;background:var(--env-back)}
.mini{position:absolute;left:7%;right:7%;top:5%;height:90%;border-radius:4px;z-index:1;background:var(--sheet) repeating-linear-gradient(180deg,transparent 0 13px,#d9a66a66 13px 14px) 0 10px;transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.env-front{position:absolute;inset:0;z-index:2;border-radius:12px;overflow:hidden}
.env-front i{position:absolute;inset:0}
.env-front .l{background:var(--env-side);clip-path:polygon(0 0,52% 54%,0 100%)}
.env-front .r{background:var(--env-side);clip-path:polygon(100% 0,48% 54%,100% 100%);filter:brightness(.97)}
.env-front .b{background:var(--env-bottom);clip-path:polygon(0 100%,50% 46%,100% 100%)}
.flap-wrap{position:absolute;left:0;right:0;top:0;height:60%;z-index:4;transform-origin:50% 0;filter:drop-shadow(0 4px 3px #6a4a2d33);transition:transform .6s cubic-bezier(.5,0,.3,1)}
.flap{position:absolute;inset:0;background:linear-gradient(180deg,var(--env-flap),#e7c79e);clip-path:polygon(0 0,100% 0,52% 98%,48% 98%);border-radius:12px 12px 0 0}
.seal{position:absolute;left:50%;top:60%;z-index:5;width:clamp(54px,17%,66px);aspect-ratio:1;transform:translate(-50%,-55%);border-radius:47% 53% 50% 50%/52% 48% 52% 48%;background:radial-gradient(circle at 36% 30%,#e0925a,var(--terracotta) 45%,#a85a24);box-shadow:0 0 0 5px #c974342e,0 4px 8px #6a4a2d55,inset 0 -3px 5px #8a4a1a66;display:grid;place-items:center;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.seal svg{width:56%;height:56%}
.face{position:absolute;left:50%;bottom:4%;z-index:3;transform:translateX(-50%);width:30%;height:21%}
.eye{position:absolute;top:18%;width:9%;aspect-ratio:1/1.25;border-radius:50%;background:var(--coffee);animation:blink 4.5s infinite}
.eye.a{left:24%}.eye.b{right:24%}
.eye:after{content:"";position:absolute;top:18%;left:22%;width:34%;height:30%;border-radius:50%;background:#fff}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.happy{position:absolute;top:16%;width:16%;opacity:0;stroke:var(--coffee);stroke-width:2.4;fill:none;stroke-linecap:round}
.happy.a{left:20%}.happy.b{right:20%}
.cheek{position:absolute;top:44%;width:17%;height:15%;border-radius:50%;background:var(--cheek);opacity:.6}
.cheek.a{left:6%}.cheek.b{right:6%}
.mouth{position:absolute;left:50%;top:44%;width:16%;transform:translateX(-50%);stroke:var(--coffee);stroke-width:2.2;fill:none;stroke-linecap:round}
.hearts{position:absolute;inset:0;pointer-events:none;z-index:6}
.hearts svg{position:absolute;bottom:62%;width:18px;opacity:0;animation:rise 4.2s ease-out infinite}
.hearts svg:nth-child(1){left:8%;animation-delay:.2s}
.hearts svg:nth-child(2){right:6%;width:14px;animation-delay:1.6s}
.hearts svg:nth-child(3){right:20%;width:11px;animation-delay:3s}
.hearts svg:nth-child(4){left:20%;bottom:auto;top:-8%;width:14px;animation:twinkle 2.6s ease-in-out infinite .6s}
.hearts svg:nth-child(5){right:-4%;bottom:12%;width:14px;animation:twinkle 3.1s ease-in-out infinite 1.4s}
@keyframes rise{0%{transform:translateY(10px) scale(.6);opacity:0}15%{opacity:1}100%{transform:translateY(-70px) scale(1) rotate(12deg);opacity:0}}
@keyframes twinkle{0%,100%{transform:scale(.4) rotate(0);opacity:0}50%{transform:scale(1) rotate(45deg);opacity:1}}
.env-title{margin:0;max-width:min(80vw,360px);text-align:center;font:italic 500 clamp(15px,4vw,18px)/1.3 var(--display);color:var(--coffee-soft);text-wrap:balance}
.env-title small{display:block;font:normal 600 11px/1.6 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--sand)}

/* Scroll fold: a rolled parchment tied with a sage ribbon instead of the envelope. */
.scroll .env-back,.scroll .env-front,.scroll .flap-wrap,.scroll .mini{display:none}
.roll{position:absolute;left:4%;right:4%;top:24%;height:52%;border-radius:18px;background:linear-gradient(180deg,#c99a5c,#e6cb98 22%,#f1dcb3 45%,#e6cb98 70%,#b88446);box-shadow:0 6px 12px #6a4a2d33;transition:transform .5s cubic-bezier(.5,0,.3,1),opacity .4s}
.roll:before,.roll:after{content:"";position:absolute;top:0;bottom:0;width:7%;border-radius:50%;background:radial-gradient(circle at 50% 50%,#a56434 0 18%,#d9b47c 19% 48%,#b88446 49%)}
.roll:before{left:-3%}.roll:after{right:-3%}
.ribbon{position:absolute;left:50%;top:17%;bottom:17%;z-index:4;width:12%;transform:translateX(-50%);background:linear-gradient(90deg,#8f9a6c,var(--sage) 40%,#8f9a6c);transition:transform .4s,opacity .3s}
.scroll .seal{top:50%;transform:translate(-50%,-50%)}
.scroll .face{bottom:26%;width:46%;height:20%}
.scroll .mouth{display:none}
.roll,.ribbon{display:none}
.scroll .roll,.scroll .ribbon{display:block}

/* Opening timeline: the script adds s1…s4 one after another. */
.s1 .env-float,.s1 .env-shadow{animation-play-state:paused}
.s1 .seal{transform:translate(-50%,-55%) scale(1.25);opacity:0}
.s1 .eye{opacity:0;animation:none}
.s1 .happy{opacity:1}
.s1 .hearts{opacity:0;transition:opacity .2s}
.scroll.s1 .seal{transform:translate(-50%,-50%) scale(1.25)}
.s2 .flap-wrap{transform:rotateX(180deg)}
.s2 .ribbon{transform:translateX(-50%) scaleY(0);opacity:0}
.s3 .flap-wrap{z-index:0}
.s3 .mini{transform:translateY(-62%)}
.s3 .roll{transform:scaleX(1.12) scaleY(1.3)}
.s3 .note,.s3 .env-title{opacity:0;transform:translateY(-8px) rotate(-3deg);transition:opacity .4s,transform .4s}
.s4{opacity:0;transform:translateY(40px) scale(.94);transition:opacity .45s,transform .45s}

/* ---------- open letter ---------- */
.letter{grid-template-rows:minmax(0,1fr) auto;gap:10px;padding-block:14px 10px}
.slot{min-height:0;container-type:size;display:grid;place-items:center}
.paper{position:relative;width:min(100cqw,calc(100cqh * 1080 / 1520));aspect-ratio:1080/1520;overflow:hidden;border-radius:6px;background:#fbf6ef url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");box-shadow:inset 0 0 55px #8e6e3826,0 18px 36px #6a4a2d33,0 3px 8px #6a4a2d1f}
.paper.parchment{background-color:#e6cb98;box-shadow:inset 0 0 80px #a5643455,0 18px 36px #6a4a2d33}
.paper.blank{background:#fffdf9}
.paper.solid{background-image:none}
.paper .photo-sheet{position:absolute;display:block;pointer-events:none}
.paper canvas,.paper svg{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.letter.enter .paper{animation:unfold .8s cubic-bezier(.2,.9,.3,1.05) both}
.letter.enter.scroll .paper{animation:unroll .9s ease-out both}
.letter.enter footer{animation:fadeup .5s .5s both}
@keyframes unfold{from{transform:translateY(16%) scale(.55) rotate(-2deg);opacity:0}60%{opacity:1}to{transform:none}}
@keyframes unroll{from{clip-path:inset(0 0 49% 0 round 6px);opacity:.3}to{clip-path:inset(0 round 6px);opacity:1}}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
footer{display:flex;align-items:center;justify-content:space-between;gap:12px;width:min(100%,560px);justify-self:center;min-height:40px}
.title{min-width:0;margin:0;font:500 16px/1.25 var(--display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.footer-end{display:flex;align-items:center;gap:8px;flex:none}
.brand{display:flex;align-items:center;gap:6px;font:600 14px/1 var(--display);color:var(--coffee-soft);padding:5px 12px 5px 6px;border-radius:999px;background:#f8f0e6b3;box-shadow:0 0 0 1px #d9a66a55}
.brand img{width:30px;height:auto;display:block}
.reseal{all:unset;cursor:pointer;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:var(--cinnamon);background:#f8f0e6b3;box-shadow:0 0 0 1px #d9a66a55}
.reseal svg{width:20px;height:20px}
.reseal:focus-visible{outline:2px solid var(--terracotta);outline-offset:3px}

/* Leaves that drift down once the letter opens. */
.fall{position:fixed;top:-50px;z-index:2;pointer-events:none;animation:fall var(--t,4s) cubic-bezier(.4,0,.6,1) forwards}
.fall svg{display:block}
@keyframes fall{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:1}100%{transform:translate(var(--dx,40px),105vh) rotate(var(--r,240deg));opacity:.9}}

/* ---------- password, recipient and error cards ---------- */
.message{place-items:center;align-content:center;padding-block:16px}
.card{width:min(100%,420px);padding:26px 22px 22px;border-radius:30px;background:var(--paper);box-shadow:0 14px 34px #d9a66a59;text-align:center;display:grid;gap:12px;justify-items:center}
.card img{width:96px;height:auto}
.card h1{margin:0;font:600 23px/1.2 var(--display);text-wrap:balance}
.card p{margin:0;font:400 15px/1.45 var(--body);color:var(--coffee-soft)}
button,input{font:600 16px var(--body);padding:.8rem 1.2rem;border-radius:999px;border:1.5px solid var(--sand);color:var(--coffee);background:#fff}
input{font-weight:400;min-width:0;flex:1}
input:focus-visible{outline:2px solid var(--terracotta);outline-offset:1px}
button{cursor:pointer;background:var(--cinnamon);border-color:var(--cinnamon);color:#fff}
button:disabled{opacity:.55;cursor:default}
form{display:flex;gap:.5rem;width:100%;margin-top:4px}
.card p.error{color:var(--cinnamon);font-weight:500}
.card p.error:empty{display:none}

@media (max-height:560px){.note{padding:10px 16px 8px}.env-title small{display:none}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important}}