/* Card features: sheets, motion, portrait. Copyright 2026 Hamdi Ben Jarrar. All rights reserved. */
:root{--hbj-acc:#e0473c;--hbj-acc2:#8b1a1a;--hbj-fg:#f5f0e8;--hbj-glass:rgba(28,22,22,.62);--hbj-ease:cubic-bezier(.2,.8,.2,1);--hbj-spring:cubic-bezier(.3,1.5,.5,1)}
.hbj-al{--hbj-acc:#F3DC05;--hbj-acc2:#2D318E;--hbj-fg:#fff;--hbj-glass:rgba(20,21,61,.66)}

/* portrait */
.hbj-photo{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;box-shadow:0 0 0 2px rgba(245,240,232,.85),0 0 0 5px rgba(224,71,60,.55),0 14px 34px -8px rgba(0,0,0,.8);animation:hbjPhotoIn 1.3s var(--hbj-ease) .2s both}
.hbj-photo img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.04);animation:hbjKen 14s ease-in-out 1.5s infinite alternate}
.hbj-photo::after{content:"";position:absolute;inset:0;border-radius:50%;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.28) 50%,transparent 60%) no-repeat;background-size:260% 100%;animation:hbjGlint 6s ease-in-out 2s infinite}
.hbj-seal{position:absolute;right:-.15rem;bottom:-.1rem;width:1.65rem;height:1.65rem;border-radius:50%;background:#0a0a0a;display:grid;place-items:center;box-shadow:0 0 0 2px #0a0a0a,0 0 0 3px rgba(245,240,232,.5);animation:hbjPop .7s var(--hbj-spring) 1.3s both;z-index:2}
.hbj-seal img{width:62%!important;height:auto!important;filter:none!important;animation:none!important}
@keyframes hbjPhotoIn{from{opacity:0;transform:scale(.7);filter:blur(14px)}}
@keyframes hbjKen{to{transform:scale(1.12) translate(-2%,-1%)}}
@keyframes hbjGlint{0%{background-position:130% 0}30%,100%{background-position:-50% 0}}
@keyframes hbjPop{from{opacity:0;transform:scale(0) rotate(-90deg)}}

/* greeting tag */
.hbj-greet{display:inline-flex;align-items:center;gap:.5rem;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;opacity:.75}
.hbj-greet b{font-weight:500}

/* extra buttons */
.acts.hbj4{grid-template-columns:repeat(4,1fr)!important}
.btn.hbj-wa svg.ic{color:#25d366}

/* sheet */
.hbj-scrim{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .35s}
.hbj-scrim.on{opacity:1;pointer-events:auto}
.hbj-sheet{position:fixed;left:50%;bottom:0;z-index:41;width:min(100%,30rem);max-height:88dvh;overflow:auto;overscroll-behavior:contain;
  transform:translate(-50%,108%);transition:transform .55s var(--hbj-ease);color:var(--hbj-fg);
  border-radius:1.9rem 1.9rem 0 0;padding:.6rem 1.15rem calc(1.1rem + env(safe-area-inset-bottom));font-family:Inter,'DM Sans',system-ui,sans-serif;
  background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 50%),var(--hbj-glass);
  -webkit-backdrop-filter:blur(30px) saturate(170%);backdrop-filter:blur(30px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 -20px 60px -20px rgba(0,0,0,.8)}
.hbj-sheet.on{transform:translate(-50%,0)}
.hbj-grab{width:2.6rem;height:.32rem;border-radius:1rem;background:rgba(255,255,255,.35);margin:0 auto .8rem}
.hbj-head{display:flex;align-items:center;gap:.85rem;margin-bottom:.9rem}
.hbj-head .hi{width:3.1rem;height:3.1rem;flex:none;border-radius:1rem;display:grid;place-items:center;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.hbj-head .hi.round{border-radius:50%;overflow:hidden}
.hbj-head .hi img{width:100%;height:100%;object-fit:cover}
.hbj-head .hi svg{width:1.5rem;height:1.5rem}
.hbj-head h3{font-size:1.12rem;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.hbj-head p{font-size:.82rem;opacity:.65;margin-top:.15rem;line-height:1.4}
.hbj-head small,.hbj-act small,.hbj-btn small,.hbj-field small{display:block;font-family:'Noto Kufi Arabic',sans-serif;font-size:.74em;opacity:.7;direction:rtl}
.hbj-x{position:absolute;top:.75rem;right:.85rem;width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.1);color:inherit;border:0;cursor:pointer}
.hbj-x svg{width:.95rem;height:.95rem}
.hbj-list{display:grid;gap:.45rem}
.hbj-act{display:flex;align-items:center;gap:.85rem;width:100%;padding:.72rem .8rem;border-radius:1.05rem;text-align:left;color:inherit;font:inherit;cursor:pointer;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);transition:transform .25s var(--hbj-spring),background .2s;
  opacity:0;transform:translateY(10px);animation:hbjItem .5s var(--hbj-ease) forwards;animation-delay:calc(var(--i,0)*45ms + 80ms)}
.hbj-act:hover{background:rgba(255,255,255,.1)}.hbj-act:active{transform:scale(.97)}
.hbj-act .i{width:2.3rem;height:2.3rem;flex:none;border-radius:.8rem;display:grid;place-items:center;background:var(--c,rgba(255,255,255,.1))}
.hbj-act .i svg{width:1.15rem;height:1.15rem}
.hbj-act .l{flex:1;min-width:0;font-size:.92rem;font-weight:500;line-height:1.3}
.hbj-act .l em{display:block;font-style:normal;font-size:.76rem;opacity:.6;font-weight:400;margin-top:.1rem}
.hbj-act .go{opacity:.4}
@keyframes hbjItem{to{opacity:1;transform:none}}
.hbj-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.2rem 0 .7rem}
.hbj-chip{padding:.5rem .8rem;border-radius:99px;font-size:.8rem;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:inherit;cursor:pointer;transition:.2s}
.hbj-chip.on{background:var(--hbj-fg);color:#111;border-color:transparent}
.hbj-field{display:block;margin-bottom:.6rem;font-size:.75rem;opacity:.9}
.hbj-field span{display:block;margin:0 0 .3rem .2rem;opacity:.7;letter-spacing:.04em}
.hbj-field input,.hbj-field textarea{width:100%;padding:.75rem .85rem;border-radius:.9rem;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.25);color:inherit;font:inherit;font-size:16px;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none}
.hbj-field input:focus,.hbj-field textarea:focus{border-color:var(--hbj-acc);box-shadow:0 0 0 3px color-mix(in srgb,var(--hbj-acc) 25%,transparent)}
.hbj-field textarea{min-height:4.2rem;resize:none}
.hbj-row2{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.hbj-btn{display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;min-height:3.1rem;padding:.6rem;border-radius:1.05rem;border:0;cursor:pointer;font:inherit;font-weight:600;font-size:.92rem;
  color:#fff;background:linear-gradient(135deg,#b02a22,#8b1a1a 55%,#5f0f10);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 26px -10px rgba(176,42,34,.8);transition:transform .25s var(--hbj-spring)}
.hbj-al .hbj-btn{color:#14153D;background:linear-gradient(180deg,#fff,#e9e4d8);box-shadow:inset 0 1px 0 #fff,0 10px 26px -12px rgba(255,255,255,.5)}
.hbj-btn.wa{background:linear-gradient(135deg,#25d366,#128c4b);color:#fff}
.hbj-btn.ghost{background:rgba(255,255,255,.08);color:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.hbj-btn:active{transform:scale(.96)}.hbj-btn svg{width:1.1rem;height:1.1rem}
.hbj-btn[disabled]{opacity:.45}
.hbj-note{font-size:.72rem;opacity:.55;text-align:center;margin-top:.7rem;line-height:1.45}
.hbj-preview{border-radius:1.1rem;overflow:hidden;margin-bottom:.8rem;box-shadow:0 18px 40px -16px rgba(0,0,0,.8);background:#000;aspect-ratio:4/5;display:grid;place-items:center}
.hbj-preview img{width:100%;height:100%;object-fit:contain;display:block;animation:hbjPhotoIn .8s var(--hbj-ease) both}
.hbj-spin{width:1.6rem;height:1.6rem;border-radius:50%;border:2px solid rgba(255,255,255,.2);border-top-color:var(--hbj-fg);animation:hbjRot .8s linear infinite}
@keyframes hbjRot{to{transform:rotate(360deg)}}

/* success check and burst */
.hbj-done{position:fixed;left:50%;top:42%;z-index:60;width:5.4rem;height:5.4rem;margin:-2.7rem 0 0 -2.7rem;border-radius:50%;display:grid;place-items:center;pointer-events:none;
  background:rgba(20,20,20,.55);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);animation:hbjDone 1.3s var(--hbj-ease) forwards}
.hbj-done svg{width:2.6rem;height:2.6rem;stroke:#fff;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:hbjTick .45s .15s ease-out forwards}
@keyframes hbjDone{0%{opacity:0;transform:scale(.6)}18%{opacity:1;transform:scale(1)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.9)}}
@keyframes hbjTick{to{stroke-dashoffset:0}}
.hbj-p{position:fixed;z-index:59;pointer-events:none;font-size:15px;line-height:1;will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){.hbj-photo,.hbj-photo img,.hbj-photo::after,.hbj-seal,.hbj-act,.hbj-done,.hbj-done svg{animation:none!important;opacity:1;transform:none;stroke-dashoffset:0}}

/* Home Screen app: WebKit lays out one status bar short with a translucent bar, so extend to the real bottom */
@media (display-mode: standalone){
  html{min-height:min(100lvh,calc(100% + env(safe-area-inset-top)))!important}
  .stage{height:min(100lvh,calc(100dvh + env(safe-area-inset-top)))!important}
  .bg{bottom:auto!important;height:min(100lvh,calc(100dvh + env(safe-area-inset-top)))!important}
}
/* real tap haptics on iPhone: a hidden switch under the finger */
.hbj-hap{position:absolute;inset:0;z-index:5;margin:0;opacity:0;cursor:pointer;border-radius:inherit;overflow:hidden}
.hbj-hap input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.btn,.iconbtn,.pj,.hbj-act,.hbj-btn,.hbj-chip{position:relative}

/* 3D printed card */
.hbj-cv{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;padding:1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
  background:radial-gradient(80% 60% at 50% 45%,rgba(255,255,255,.07),transparent 70%),rgba(6,6,10,.78);-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
  opacity:0;pointer-events:none;transition:opacity .45s;color:#fff;font-family:Inter,'DM Sans',system-ui,sans-serif;text-align:center}
.hbj-cv.on{opacity:1;pointer-events:auto}
.hbj-cvx{top:calc(.9rem + env(safe-area-inset-top));right:1rem;position:absolute}
.hbj-cvt{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;opacity:.7}
.hbj-cvt small,.hbj-cvh small,.hbj-cvb small{display:block;letter-spacing:0;text-transform:none;font-family:'Noto Kufi Arabic',sans-serif;opacity:.8}
.hbj-st{position:relative;width:min(86vw,27rem);aspect-ratio:85/55;perspective:1100px;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.hbj-st:active{cursor:grabbing}
.hbj-c3{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;--gx:50%;--gy:30%;--hx:50%}
.hbj-face,.hbj-slab{position:absolute;inset:0;border-radius:4.4% / 6.8%}
.hbj-face{overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 0 0 .5px rgba(255,255,255,.12)}
.hbj-front{transform:translateZ(2.2px)}.hbj-back{transform:rotateY(180deg) translateZ(2.2px)}
.hbj-face img{width:100%;height:100%;display:block;pointer-events:none}
.hbj-glare{position:absolute;inset:0;background:radial-gradient(circle at var(--gx) var(--gy),rgba(255,255,255,.55),rgba(255,255,255,.08) 28%,transparent 55%);mix-blend-mode:overlay;pointer-events:none}
.hbj-holo{position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:color-dodge;
  background:linear-gradient(115deg,transparent 25%,rgba(255,60,90,.35) 38%,rgba(255,215,90,.35) 46%,rgba(80,220,255,.35) 54%,rgba(160,90,255,.3) 62%,transparent 75%);background-size:260% 100%;background-position:var(--hx) 50%}
.hbj-floor{position:absolute;left:8%;right:8%;bottom:-16%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.65),transparent);filter:blur(6px)}
.hbj-cvh{font-size:.8rem;opacity:.55}
.hbj-cvb{display:flex;gap:.6rem;width:min(86vw,22rem)}
.hbj-cvb .hbj-btn{flex:1}.hbj-cvb .hbj-btn[hidden]{display:none}
.hbj-cv-open .stage{filter:blur(2px)}
[data-act="card"]{cursor:pointer}
@media (prefers-reduced-motion:reduce){.hbj-cv{transition:none}}
.hero .tools{pointer-events:none}.hero .tools>*{pointer-events:auto}