:root{
  --bg1:#12080c;--bg2:#2b0f1b;--gold:#d8b65a;--gold-l:#f3e2a6;--gold-d:#a77a22;--ivory:#f6ecd2;--wine:#7a1a2c;--emerald:#0b3d2c;
  --ease:cubic-bezier(.22,.8,.2,1);--ease-io:cubic-bezier(.65,0,.25,1);
  --serif:'Cormorant Garamond','Times New Roman',serif;--cz:'Cinzel',serif;--script:'Pinyon Script',cursive;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden;background:var(--bg1);color:var(--ivory);font-family:var(--serif);font-weight:500;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
body{background:radial-gradient(120% 90% at 50% 18%,var(--bg2) 0,#190a12 52%,#0c0508 100%)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px;border-radius:8px}
.gold{background:linear-gradient(100deg,#a77a22 0%,#f3e2a6 30%,#d8b65a 52%,#f6e8b4 76%,#a77a22 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* floating gold dust */
#dust{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
#dust i{position:absolute;bottom:-12px;width:4px;height:4px;border-radius:50%;background:var(--gold-l);box-shadow:0 0 8px 1px rgba(216,182,90,.8);opacity:0;animation:rise linear infinite;will-change:transform,opacity}
@keyframes rise{0%{transform:translate3d(0,0,0);opacity:0}12%{opacity:.75}100%{transform:translate3d(var(--dx,24px),-108vh,0);opacity:0}}

.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;z-index:1}

/* ---------- Intro ---------- */
#intro{justify-content:center;padding:16px;text-align:center}
.greet{transition:opacity .7s ease,transform .9s var(--ease)}
.greet.away{opacity:0;transform:translateY(-22px)}
.salam{font-style:italic;font-size:clamp(1.05rem,4.4vw,1.35rem);color:var(--gold-l);letter-spacing:.04em}
.lead{font-size:clamp(1rem,4vw,1.2rem);color:#e7d9b6;opacity:.85;margin-top:2px;letter-spacing:.03em}
.name{font-family:var(--script);font-weight:400;font-size:clamp(2.7rem,12.5vw,4.6rem);line-height:1.18;max-width:92vw;margin:6px auto 0;overflow-wrap:anywhere;min-height:1.2em;padding:0 .08em .06em}
.name.skeleton{width:min(260px,60vw);height:3.2rem;border-radius:12px;background:linear-gradient(100deg,#ffffff0d 30%,#ffffff22 50%,#ffffff0d 70%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;-webkit-text-fill-color:transparent}
@keyframes shimmer{to{background-position:-200% 0}}

/* Envelope: flat layers, transform/opacity animation only */
.scene{--ew:max(200px,min(84vw,440px,calc((100vh - 215px)*1.5)));flex:none;position:relative;width:var(--ew);height:calc(var(--ew)/1.5);margin:clamp(64px,13vh,140px) auto 0;cursor:pointer;outline-offset:14px;transition:transform 1.1s var(--ease-io),opacity .8s ease;touch-action:manipulation}
.scene[aria-disabled=true]{cursor:progress}
.scene.open{transform:translateY(clamp(46px,8vh,90px))}
.scene.leave{transform:translateY(26vh) scale(.86);opacity:0;transition:transform .9s cubic-bezier(.55,0,.85,.4),opacity .8s ease-in}
.e-back{position:absolute;inset:0;border-radius:9px;background:linear-gradient(150deg,#74182a,#511020 60%,#3a0b17);box-shadow:0 34px 70px #000c,inset 0 0 0 1.5px #d8b65a88}
.e-glow{position:absolute;left:50%;top:calc(var(--ew)*-.62 + 4%);width:150%;aspect-ratio:1;margin-left:-75%;border-radius:50%;background:radial-gradient(circle,rgba(246,214,120,.55),rgba(246,214,120,0) 62%);opacity:0;transform:scale(.3);z-index:1;pointer-events:none}
.scene.open .e-glow{animation:glow 2.8s ease-out 1s forwards}
@keyframes glow{0%{opacity:0;transform:scale(.3)}45%{opacity:1}100%{opacity:.5;transform:scale(1)}}
.e-letter{position:absolute;left:6%;right:6%;top:6%;height:88%;z-index:2;border-radius:5px;background:linear-gradient(160deg,#fffaf0,#f3e6c8 60%,#e9d6ab);box-shadow:0 0 0 1px #c9a24a inset,0 10px 26px #0008;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(5px,1.6vw,9px);color:#8a6420;text-align:center;transform:translateY(0);transition:transform 1.6s var(--ease) 1.05s}
.scene.open .e-letter{transform:translateY(-64%)}
.e-ring{display:grid;place-items:center;width:clamp(46px,15vw,66px);aspect-ratio:1;border-radius:50%;border:2px solid #c69a32;box-shadow:0 0 0 4px #c69a3224;font:400 clamp(1.3rem,5.6vw,2rem)/1 var(--script);color:#0c4430}
.e-lt{font-family:var(--cz);font-weight:600;font-size:clamp(.5rem,2.3vw,.72rem);letter-spacing:.24em;padding-left:.24em;color:#7d5a18;border-top:1px solid #c9a34d;padding-top:7px}
.e-ls{font-style:italic;font-size:clamp(.8rem,3.2vw,1.05rem);color:#0c4430}
.e-front{position:absolute;inset:0;z-index:3;border-radius:9px;background:linear-gradient(150deg,#8a2236,#6a1527 62%,#4a0d1b);clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);box-shadow:inset 0 0 0 1px #d8b65a44}
.e-front::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff14,transparent 38%,#0003 100%),repeating-linear-gradient(45deg,#ffffff06 0 2px,transparent 2px 7px)}
.e-flap{position:absolute;left:0;right:0;top:0;height:58%;z-index:4;transform-origin:50% 0;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(172deg,#b82e44,#862035 62%,#661426);transform:perspective(900px) rotateX(0deg)}
.scene.open .e-flap{animation:flap 1.3s var(--ease) .38s forwards}
@keyframes flap{
  0%{transform:perspective(900px) rotateX(0deg);z-index:4;background:linear-gradient(172deg,#b82e44,#862035 62%,#661426)}
  49%{transform:perspective(900px) rotateX(-88deg);z-index:4}
  50%{z-index:1;background:linear-gradient(172deg,#4a0f1c,#5e1423)}
  100%{transform:perspective(900px) rotateX(-180deg);z-index:1;background:linear-gradient(172deg,#4a0f1c,#5e1423)}
}
.e-seal{position:absolute;left:50%;top:54%;width:23%;aspect-ratio:1;margin:-11.5% 0 0 -11.5%;z-index:6;border-radius:50%;background:radial-gradient(circle at 34% 28%,#f6dd85,#bd8d1b 56%,#6e4b08);box-shadow:0 7px 16px #000b,inset 0 0 0 3px #f6e3a177,inset 0 -4px 8px #0006;display:grid;place-items:center;font:400 clamp(1.3rem,7vw,2.2rem)/1 var(--script);color:#4b3205;text-shadow:0 1px 0 #f6e3a1}
.e-seal::after{content:"";position:absolute;inset:7%;border-radius:50%;border:1.5px dashed #5a3d0577}
.scene:not(.open):not([aria-disabled=true]) .e-seal{animation:seal 2.4s ease-in-out infinite}
@keyframes seal{50%{transform:scale(1.07)}}
.scene.open .e-seal{animation:crack .8s var(--ease) forwards}
@keyframes crack{30%{transform:scale(1.18) rotate(-6deg)}100%{transform:scale(.55) translateY(46px) rotate(14deg);opacity:0}}
.hint{margin-top:22px;font-size:clamp(.9rem,3.6vw,1.05rem);letter-spacing:.14em;color:var(--gold-l);min-height:1.6em;transition:opacity .5s}
.hint.pulse{animation:pulse 2.2s ease-in-out infinite}
.hint.gone{opacity:0}
@keyframes pulse{50%{opacity:.4}}

/* Bismillah */
.ar{position:fixed;left:0;right:0;top:clamp(54px,13vh,130px);z-index:6;text-align:center;opacity:0;transform:translateY(10px);transition:opacity 1.2s ease,transform 1.4s var(--ease);pointer-events:none;padding:0 14px}
.ar.on{opacity:1;transform:none}
.ar b{display:block;font:700 clamp(2.3rem,10.5vw,3.6rem)/1.9 'Amiri','Noto Naskh Arabic','Traditional Arabic',serif;color:var(--gold-l);text-shadow:0 0 20px rgba(216,182,90,.55)}
.ar .cr{display:block;margin-top:6px;font-size:.72rem!important;letter-spacing:.06em!important;opacity:.55}
.ar small{font-size:clamp(.9rem,3.4vw,1.1rem);letter-spacing:.14em;color:#e9d9ad;font-style:italic}

/* ---------- Error ---------- */
#err{justify-content:center;padding:24px;text-align:center;gap:12px;z-index:3}
#err h1{font-family:var(--script);font-weight:400;font-size:clamp(2rem,9vw,3rem);line-height:1.2}
#err p{max-width:340px;font-size:1.15rem;line-height:1.55;color:#e7d9b6}
.btn-g{margin-top:8px;padding:12px 26px;border-radius:999px;border:1px solid #d8b65aaa;background:linear-gradient(#e8c25a,#b8860b);color:#2b1c02;font-weight:600;font-size:1rem;letter-spacing:.04em}

/* ---------- Viewer ---------- */
#viewer{z-index:2;justify-content:flex-start;gap:8px;padding:max(10px,env(safe-area-inset-top)) 12px max(10px,env(safe-area-inset-bottom));opacity:0;transition:opacity .8s ease}
#viewer.on{opacity:1}
.vbar{width:100%;max-width:520px;display:flex;align-items:center;justify-content:center;position:relative;min-height:46px}
.tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(66vw,250px);padding:4px;border-radius:999px;border:1px solid #d8b65a88;background:#ffffff0d}
.tabs .pill{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:linear-gradient(#ecc95f,#b8860b);transition:transform .6s var(--ease);box-shadow:0 2px 10px #0006}
.tabs[data-i="1"] .pill{transform:translateX(100%)}
.tabs button{position:relative;z-index:1;padding:9px 6px;font-family:var(--cz);font-weight:600;font-size:.82rem;letter-spacing:.14em;color:var(--ivory);transition:color .4s;min-height:40px}
.tabs button[aria-selected=true]{color:#2b1c02}
.snd{position:absolute;right:0;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid #d8b65a88;background:#ffffff0d;display:grid;place-items:center}
.snd svg{width:20px;height:20px}
.snd[aria-pressed=false] .waves{display:none}
.count{min-height:1.4em;font-style:italic;font-size:clamp(.95rem,3.6vw,1.1rem);color:var(--gold-l);text-align:center;letter-spacing:.03em}
.deck{position:relative;flex:1;min-height:0;width:100%;max-width:760px;touch-action:pan-y;overflow:hidden}
.page{position:absolute;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;transform:perspective(1700px) translateX(0) rotateY(0);transition:transform .9s var(--ease),opacity .6s ease,visibility 0s linear .9s;will-change:transform,opacity}
.page.is-active{opacity:1;visibility:visible;transition-delay:0s}
.page.before{transform:perspective(1700px) translateX(-38%) rotateY(58deg)}
.page.after{transform:perspective(1700px) translateX(38%) rotateY(-58deg)}
.cardbox{position:relative;width:calc(1000px*var(--s,.3));height:calc(1400px*var(--s,.3));border-radius:6px;box-shadow:0 26px 60px rgba(0,0,0,.65),0 0 0 1px rgba(216,182,90,.5);transition:opacity .9s ease,transform 1.3s var(--ease);cursor:zoom-in}
.cardbox .card{transform:scale(var(--s,.3))}
#viewer:not(.on) #box-barat{opacity:0;transform:translateY(7vh) scale(.84)}
.cardbox:focus-visible{outline-offset:6px}

/* Gate: two doors that swing inward to reveal the card */
.doors{position:absolute;inset:0;z-index:5;perspective:1500px;perspective-origin:50% 50%;pointer-events:none}
.door{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;backface-visibility:hidden;transition:transform 1.8s var(--ease-io);will-change:transform}
.door.l{left:0;transform-origin:0 50%;border-radius:6px 0 0 6px}
.door.r{right:0;transform-origin:100% 50%;border-radius:0 6px 6px 0}
.dart{position:absolute;top:0;height:100%;width:200%}
.door.l .dart{left:0}.door.r .dart{right:0}
.dart svg{display:block;width:100%;height:100%}
.cardbox.open .door.l{transform:rotateY(100deg)}
.cardbox.open .door.r{transform:rotateY(-100deg)}
.cardbox.opened .doors{visibility:hidden}

.vact{width:100%;max-width:520px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-top:2px}
.act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:56px;padding:8px 4px;border-radius:14px;border:1px solid #d8b65a77;background:#ffffff0e;font-size:.8rem;letter-spacing:.04em;transition:background .25s,transform .25s}
.act svg{width:21px;height:21px}
.act:hover{background:#d8b65a30}
.act:active{transform:scale(.96)}

/* ---------- Save sheet ---------- */
#sheet{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-end;justify-content:center;visibility:hidden;transition:visibility 0s linear .45s}
#sheet.on{visibility:visible;transition-delay:0s}
#sheet .bd{position:absolute;inset:0;background:#000a;opacity:0;transition:opacity .4s ease}
#sheet.on .bd{opacity:1}
#sheet .pn{position:relative;width:min(100%,520px);padding:18px 16px max(18px,env(safe-area-inset-bottom));border-radius:22px 22px 0 0;background:linear-gradient(#2a1018,#190a10);border:1px solid #d8b65a77;border-bottom:0;transform:translateY(105%);transition:transform .5s var(--ease)}
#sheet.on .pn{transform:none}
#sheet h2{font-family:var(--script);font-weight:400;font-size:2rem;text-align:center;margin-bottom:10px}
#sheet a.row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 16px;margin-top:8px;border-radius:14px;border:1px solid #d8b65a66;background:#ffffff0c;color:var(--ivory);text-decoration:none;font-size:1.1rem}
#sheet a.row small{opacity:.65;font-size:.85rem}
#sheet .x{display:block;margin:12px auto 0;padding:10px 24px;font-size:1rem;opacity:.85}

/* ---------- Lightbox ---------- */
#lb{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.94);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
#lb.on{opacity:1;visibility:visible;transition-delay:0s}
.lb-s{flex:1;min-height:0;overflow:auto;display:flex;touch-action:pan-x pan-y pinch-zoom;-webkit-overflow-scrolling:touch}
.lb-b{position:relative;margin:auto;flex:none;width:calc(1000px*var(--s,.4));height:calc(1400px*var(--s,.4));box-shadow:0 0 0 1px rgba(216,182,90,.5)}
.lb-b .card{transform:scale(var(--s,.4))}
.lb-c{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 12px max(12px,env(safe-area-inset-bottom))}
.lb-c button{min-width:46px;height:46px;padding:0 16px;border-radius:999px;border:1px solid #d8b65a88;background:#ffffff12;font-size:1.25rem}
.lb-c output{min-width:56px;text-align:center;font-size:.95rem;opacity:.8}

#toast{position:fixed;left:50%;bottom:max(96px,calc(env(safe-area-inset-bottom) + 90px));transform:translate(-50%,12px);max-width:90vw;padding:10px 20px;border-radius:999px;border:1px solid var(--gold);background:#000d;font-size:1rem;opacity:0;transition:opacity .4s,transform .4s var(--ease);z-index:60;pointer-events:none;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-height:620px){.vact .act{flex-direction:row;min-height:44px;font-size:.74rem}.vact .act svg{width:18px;height:18px}.count{display:none}}
@media (min-width:700px){.vact{gap:12px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}
  #dust{display:none}
}

/* Phones held sideways: tabs on the left, actions on the right, card gets the full height */
@media (orientation:landscape) and (max-height:520px){
  #viewer{flex-direction:row;align-items:stretch;gap:10px;padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
  .vbar{flex:0 0 150px;width:150px;flex-direction:column;justify-content:center;gap:12px;min-height:0}
  .tabs{width:100%}
  .snd{position:static;transform:none}
  .deck{max-width:none}
  .vact{flex:0 0 124px;width:124px;max-width:none;grid-template-columns:1fr;align-content:center}
  .vact .act{flex-direction:row;justify-content:flex-start;gap:10px;padding:8px 12px;min-height:46px}
}

@media (orientation:landscape) and (max-height:520px){
  .scene{margin-top:34px}
  .scene.open{transform:translateY(24px)}
  .hint{margin-top:14px}
  .name{font-size:clamp(2.2rem,8vh,3rem)}
}
@media (orientation:landscape) and (max-height:520px){
  .ar{top:2px}
  .ar b{font-size:1.9rem;line-height:1.5}
  .ar .cr{display:block;margin-top:6px;font-size:.72rem!important;letter-spacing:.06em!important;opacity:.55}
.ar small{display:none}
  .scene.open .e-letter{transform:translateY(-52%)}
}
@media (orientation:landscape) and (max-height:520px){.ar .cr{display:none}}