/* Card maker: folded card, faces, particles. Card geometry is 260x364 and scaled via --s. */
@keyframes ckBurst{0%{transform:translate(0,0) rotate(0) scale(.2);opacity:0}8%{opacity:1}35%{transform:translate(var(--dx),var(--dy)) rotate(calc(var(--rot)*.4)) scale(1)}85%{opacity:1}100%{transform:translate(calc(var(--dx)*1.25),calc(var(--dy) + 560px)) rotate(var(--rot)) scale(.9);opacity:0}}
@keyframes ckFall{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:1}50%{transform:translate(var(--dx),calc(var(--dy)*.5)) rotate(calc(var(--rot)*.5))}90%{opacity:1}100%{transform:translate(calc(var(--dx)*-.5),var(--dy)) rotate(var(--rot));opacity:0}}
@keyframes ckRise{0%{transform:translate(0,0) scale(.6);opacity:0}12%{opacity:1}80%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1);opacity:0}}
@keyframes ckSheet{from{transform:translateY(100%)}to{transform:none}}
@keyframes ckPop{from{transform:translateY(16px) scale(.97);opacity:0}to{transform:none;opacity:1}}
@keyframes ckFade{from{opacity:0}to{opacity:1}}
@keyframes ckBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes ckPulse{0%{box-shadow:0 0 0 0 rgba(51,65,85,.35)}100%{box-shadow:0 0 0 14px rgba(51,65,85,0)}}
@keyframes ckBlob{0%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-40px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}100%{transform:translate(0,0) scale(1)}}
@keyframes ckShake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}

/* Same stack as Tailwind's font-handwriting: Latin glyphs in Kalam, Arabic falls back to Baloo per glyph. */
.ck-hand{font-family:Kalam,'Baloo Bhaijaan 2',cursive}

/* Scaled stage: wrapper takes the scaled size, the card keeps its native 260x364 geometry. */
.ck-stage{position:relative;width:calc(260px*var(--s,1));height:calc(364px*var(--s,1))}
.ck-stage>.ck-fold{position:absolute;left:0;top:0;transform:scale(var(--s,1));transform-origin:0 0}

.ck-fold{position:relative;width:260px;height:364px;-webkit-tap-highlight-color:transparent}
.ck-shadow{position:absolute;left:8%;right:8%;bottom:-24px;height:30px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,20,40,.28),rgba(20,20,40,0));transition:transform 2s cubic-bezier(.65,0,.25,1)}
.ck-persp{position:absolute;inset:0;perspective:1500px;transition:transform 2s cubic-bezier(.65,0,.25,1)}
.ck-inside{position:absolute;inset:0;background:#FFFDF7;border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,.08),0 24px 40px -22px rgba(20,20,40,.45);padding:26px 22px 20px;box-sizing:border-box;display:flex;flex-direction:column;overflow:hidden;cursor:text;text-align:start}
.ck-acc{position:absolute;top:0;left:0;right:0;height:5px}
.ck-dear{font-size:21px;line-height:1.25;overflow-wrap:anywhere}
.ck-words{margin-top:10px;display:flex;flex-wrap:wrap;column-gap:.3em;line-height:1.5;color:#2a2a33;min-height:0}
.ck-words>span{display:inline-block;overflow-wrap:anywhere;max-width:100%}
.ck-words>i{flex-basis:100%;width:100%;height:0}
.ck-words>i.ck-gap{height:.75em}
.ck-sigbox{display:flex;flex-direction:column;gap:2px}
.ck-sigbox svg{width:150px;height:50px;display:block;overflow:visible}
.ck-sigbox svg path{stroke-dasharray:1}
.ck-signoff-sm{font-size:14px;line-height:1.15;font-weight:700;overflow-wrap:anywhere}
.ck-signoff{font-size:26px;line-height:1.2;overflow-wrap:anywhere}
.ck-cover{position:absolute;inset:0;transition:transform 2s cubic-bezier(.65,0,.25,1);transform-style:preserve-3d;cursor:pointer}
.ck-front{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.1),0 28px 44px -22px rgba(20,20,40,.5)}
.ck-back{position:absolute;inset:0;transform:rotateY(180deg);backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6px;display:flex;align-items:flex-end;justify-content:center;padding:22px;box-sizing:border-box}
.ck-back>div{font:600 11px 'Readex Pro',sans-serif;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.ck-fx{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:5}
.ck-fx>span{position:absolute;line-height:1;will-change:transform}
.ck-fx>span>i{position:absolute;left:50%;top:100%;width:1px;height:50px;background:rgba(0,0,0,.22)}

/* Faces */
.ck-face{width:260px;height:364px;position:relative;overflow:hidden;box-sizing:border-box;display:flex;flex-direction:column;padding:24px 22px 22px;border-radius:6px;text-align:start}
.ck-face .a{position:absolute}
.ck-face .r{position:relative}
.ck-kick{position:relative;font-family:'Readex Pro',sans-serif;font-weight:600;line-height:1.2;text-transform:uppercase;font-size:9.5px;letter-spacing:.2em}
.ck-ar .ck-kick{font-size:12px;letter-spacing:0}
.ck-head{position:relative;font-weight:700;white-space:pre-line;font-size:44px;line-height:1.05;overflow-wrap:anywhere}
.ck-ar .ck-head{font-size:38px;line-height:1.25}
.ck-head.big{font-size:68px;line-height:.98}
.ck-ar .ck-head.big{font-size:58px;line-height:1.15}
.ck-for{position:relative;font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-flex{flex:1;min-height:8px}

/* Page-level helpers */
.ck-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.7;transition:background .5s;pointer-events:none}
.ck-shake{animation:ckShake .4s}
.ck-pulse{animation:ckPulse 1.6s ease-out 2}
@keyframes ckPulse{0%{box-shadow:0 0 0 0 rgba(30,41,59,.35)}70%{box-shadow:0 0 0 14px rgba(30,41,59,0)}100%{box-shadow:0 0 0 0 rgba(30,41,59,0)}}
.ck-sheet-bg{position:fixed;inset:0;background:rgba(15,23,42,.35);animation:ckFade .25s both;z-index:60}
.ck-sheet{position:fixed;left:0;right:0;bottom:0;z-index:61;background:#fff;color:#334155;border-radius:28px 28px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.12);animation:ckSheet .4s cubic-bezier(.2,.8,.2,1) both;max-height:92vh;overflow-y:auto}
@media (min-width:640px){
  .ck-sheet{left:50%;right:auto;bottom:auto;top:50%;width:420px;margin-left:-210px;transform:translateY(-50%);border-radius:28px;animation:ckFade .25s both}
}
.ck-scroll-none{scrollbar-width:none}
.ck-scroll-none::-webkit-scrollbar{display:none}

@media (prefers-reduced-motion:reduce){
  .ck-shadow,.ck-persp,.ck-cover{transition-duration:.01s!important}
  .ck-blob,.ck-pulse{animation:none!important}
}

/* "Save as video" button (card-video-buy.js): one element walks through pay, render and download. */
[data-vstate] [data-vs]{display:none}
[data-vstate=idle] [data-vs~=idle],[data-vstate=opening] [data-vs~=opening],[data-vstate=waiting] [data-vs~=waiting],[data-vstate=making] [data-vs~=making],[data-vstate=slow] [data-vs~=slow],[data-vstate=ready] [data-vs~=ready],[data-vstate=failed] [data-vs~=failed]{display:inline-block}
[data-vstate=opening],[data-vstate=waiting],[data-vstate=making],[data-vstate=slow]{cursor:progress}
.ck-spin{width:20px;height:20px;flex:none;border-radius:50%;border:2.5px solid currentColor;border-top-color:transparent;animation:ckSpin .8s linear infinite}
@keyframes ckSpin{to{transform:rotate(360deg)}}