/* HiDoof preview · interaction layer. Responds to taps, hovers, drags and phone motion.
   Loaded after hidoof.css; reduced-motion users get the same states without the movement. */

/* ---- press feedback ---- */
.rippling{overflow:hidden;isolation:isolate}
.ripple{position:absolute;border-radius:50%;background:currentColor;opacity:.18;transform:scale(0);animation:ripple .6s ease-out forwards;pointer-events:none;z-index:-1}
@keyframes ripple{to{transform:scale(1);opacity:0}}
.btn,.chip,.pill,.lvl,.pack-option,.pmopt,.prov,.dlall{transition:transform .15s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease}
.btn:active,.chip:active,.pill:active,.lvl:active,.pack-option:active,.pmopt:active,.prov:active,.dlall:active{transform:scale(.97)}
.btn:hover:not(:disabled){box-shadow:0 8px 22px rgba(28,28,28,.22)}
.btn.magnetic{transition:translate .25s cubic-bezier(.2,.8,.2,1),box-shadow .2s ease,transform .15s ease}
.chip:hover,.dlall:hover{border-color:var(--gold2)}

/* ---- header compacts on scroll ---- */
header{transition:padding .25s ease,box-shadow .25s ease}
body.scrolled header{box-shadow:0 6px 24px rgba(90,64,20,.10)}
@media(min-width:821px){body.scrolled header{padding-top:6px;padding-bottom:6px}}
nav a{transition:color .2s ease}

/* ---- the page you open slides in ---- */
main.enter{animation:viewIn .42s cubic-bezier(.2,.8,.2,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}}

/* ---- images: shimmer while loading, soft fade when ready ---- */
.face:not(.back){background:linear-gradient(110deg,#efe5cc 8%,#fbf6e8 18%,#efe5cc 33%);background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.face img{opacity:0;transition:opacity .35s ease}
.face img.loaded{opacity:1}
.face:not(.back):has(img.loaded){animation:none;background:#1b140c}
.face.imgfail::after{content:"Image unavailable";position:absolute;inset:auto 0 42% 0;text-align:center;font:500 12px 'Inter',sans-serif;color:#6b6558}
@keyframes shimmer{to{background-position:-200% 0}}

/* ---- collection cards: lift + rarity light on hover, dealt in when you filter ---- */
.cgrid .item{position:relative}
.cgrid .item .card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.cgrid .item:hover .card:not(.tilting){transform:translateY(-6px)}
.cgrid .item.rar:hover .card .face:not(.back){box-shadow:0 14px 30px rgba(0,0,0,.28),0 0 0 2px var(--gc),0 0 26px -4px var(--gc)}
.cgrid .item .cap{transition:color .2s ease}
.cgrid .item:hover .cap{color:var(--gold)}
.dealt{animation:dealIn .5s cubic-bezier(.2,.9,.25,1.1) both}
@keyframes dealIn{from{opacity:0;transform:translateY(16px) rotate(-2deg) scale(.96)}}
.pbadge{position:absolute;top:8px;right:calc(50% - var(--w,172px)/2 + 6px);z-index:3;font:600 11px 'Inter',sans-serif;color:#fff;padding:3px 8px;border-radius:999px;background:linear-gradient(135deg,#5b2bd0,#c03ad8);box-shadow:0 2px 10px rgba(110,40,200,.45);pointer-events:none}
.cgrid .item{--w:clamp(128px,23vw,172px)}

/* ---- collection tools: search, rarity chips with colour dots, rarity bar ---- */
.ctright{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.csearch input{font:400 14px 'Inter','Noto Sans Thai',sans-serif;border:1.5px solid var(--line);border-radius:999px;padding:7px 14px 7px 34px;width:min(240px,60vw);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='16' height='16'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='%239a6f1c' stroke-width='2'/%3E%3Cpath d='M20 20l-4-4' stroke='%239a6f1c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 12px 50% no-repeat;transition:border-color .2s,box-shadow .2s,width .25s}
.csearch input:focus{outline:none;border-color:var(--gold2);box-shadow:0 0 0 3px rgba(217,178,90,.25)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.chip .rdot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rc);margin-right:6px;vertical-align:1px;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.chip .n{color:var(--mut);font-weight:400}
.rbar{display:flex;gap:3px;height:10px;margin:14px 0 4px;border-radius:999px;overflow:hidden}
.rseg{border:0;padding:0;min-width:10px;background:var(--rc);cursor:pointer;opacity:.75;transition:opacity .2s,transform .2s,flex-grow .4s}
.rseg:hover,.rseg.on{opacity:1}
.rseg.on{transform:scaleY(1.5)}
.rseg:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.emptybox.small{padding:22px}

/* ---- opened card: 3D, follows finger/mouse/phone, rarity glow, swipe down to close ---- */
#zoom{--drag:0px;overflow:hidden}
#zoom .zstage{perspective:1200px;transform:translateY(var(--drag));opacity:calc(1 - var(--drag) / 400px);transition:transform .25s ease,opacity .25s ease}
.zcard{position:relative;width:min(92vw,540px,calc((100dvh - 250px)/1.5556));aspect-ratio:540/840;border-radius:12px;overflow:hidden;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s;box-shadow:0 26px 70px rgba(0,0,0,.65);touch-action:pan-y;cursor:grab;will-change:transform}
.zcard.tilting{transition:transform .08s linear}
.zcard.glow{box-shadow:0 26px 70px rgba(0,0,0,.65),0 0 0 2px var(--gc),0 0 46px -6px var(--gc)}
.zcard.pop{animation:zpop .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes zpop{from{transform:perspective(900px) rotateY(-18deg) scale(.6);opacity:0}}
#zoom #zimg{width:100%;height:100%;object-fit:cover;border-radius:0;box-shadow:none;animation:none;display:block}
.zholo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:0;transition:opacity .3s;background:linear-gradient(115deg,transparent 22%,rgba(255,130,210,.55) 36%,rgba(130,220,255,.55) 50%,rgba(255,240,140,.55) 64%,transparent 78%);background-size:260% 260%;background-position:var(--hx,50%) var(--hy,50%)}
.zglare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--hx,50%) var(--hy,30%),rgba(255,255,255,.45),transparent 42%)}
.zcard.tilting .zholo{opacity:.55}.zcard.tilting .zglare{opacity:.8}
#zname{font:600 20px 'Cinzel','Inter',serif;color:#f6e7bd;letter-spacing:.02em;margin-top:4px}
.zmeta{color:#cdbb92;font:400 13px 'Inter',sans-serif;margin-top:-8px}
.zbtns{flex-wrap:wrap;justify-content:center}
.zhint{margin:0;color:rgba(255,255,255,.45);font:400 12px 'Inter',sans-serif;cursor:pointer}

/* ---- toasts + celebration ---- */
.toasts{position:fixed;left:50%;top:calc(76px + env(safe-area-inset-top,0px));translate:-50% 0;z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(92vw,440px)}
.toast{background:#1c1c1c;color:#fff;padding:11px 18px;border-radius:12px;font:500 14px/1.4 'Inter','Noto Sans Thai',sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(12px) scale(.98);transition:opacity .3s,transform .3s;text-align:center}
.toast.in{opacity:1;transform:none}
.toast.ok{background:linear-gradient(135deg,#1f3d2b,#2a5a3c)}
.toast.warn{background:linear-gradient(135deg,#4a3410,#6b4a14)}
.celebrate{position:fixed;left:50%;top:45%;width:0;height:0;z-index:190;pointer-events:none}
.celebrate i{position:absolute;width:8px;height:12px;border-radius:2px;background:var(--c);animation:burst 1.4s cubic-bezier(.15,.7,.3,1) forwards;opacity:0}
.celebrate i:nth-child(3n){width:6px;height:6px;border-radius:50%}
@keyframes burst{10%{opacity:1}100%{transform:translate(var(--dx),calc(var(--dy) + 160px)) rotate(var(--r));opacity:0}}

/* ---- orders: skeletons, status colour, progress bar, copy id ---- */
.order-row{transition:box-shadow .25s,transform .25s,border-color .25s}
.order-row:hover{box-shadow:0 12px 30px rgba(120,90,30,.12);border-color:var(--gold2)}
.order-row.skel{height:132px;margin-bottom:14px;background:linear-gradient(110deg,#f4ecd8 8%,#fdf9ef 18%,#f4ecd8 33%);background-size:200% 100%;animation:shimmer 1.4s linear infinite;border:0}
.order-row .ostatus{font-weight:600}
.order-row.st-ready .ostatus{color:#2a7a45}
.order-row.st-generating .ostatus,.order-row.st-queue_pending .ostatus,.order-row.st-unlocking .ostatus{color:#9a6f1c}
.order-row.st-needs_review .ostatus,.order-row.st-payment_incomplete .ostatus{color:#b3261e}
.obar{height:6px;background:#f1e8d3;border-radius:999px;overflow:hidden;margin:-4px 0 10px;max-width:420px}
.obar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));transition:width .9s cubic-bezier(.2,.8,.2,1)}
.order-row.prem{border:1.5px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#7b3ff2,#c03ad8,#e3bf62) border-box}
.copyid{margin-left:8px;border:1px solid var(--line);background:#fff;border-radius:999px;font:500 11px 'Inter',sans-serif;padding:2px 9px;cursor:pointer;color:var(--mut)}
.copyid:hover{border-color:var(--gold2);color:var(--ink)}

/* ---- cent page ---- */
#creditbalance{font-variant-numeric:tabular-nums}
.crow{padding:8px 12px;border-radius:8px;margin:6px 0;background:#fff;border:1px solid var(--line);font-size:14px}
.crow.plus{border-left:3px solid #2a7a45}.crow.minus{border-left:3px solid var(--gold)}

/* ---- checkout: cent option styled like the others ---- */
.pmi.cent{background:#f6ecd2;color:#8f6a17;font:700 20px 'Inter',sans-serif}
.okc.prem{background:linear-gradient(135deg,#6b2fd6,#c03ad8)}

/* ---- hero fan follows the pointer (desktop) ---- */
.fan{transition:transform .5s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d}
.fan .card:hover{animation-play-state:paused}
/* each hero card on its own layer: stops the right-most card painting blank after its image swaps (seen in the original page too) */
.fan .card .face{will-change:transform}

@media(prefers-reduced-motion:reduce){
 .ripple,.dealt,main.enter,.zcard.pop,.celebrate i{animation:none!important}
 .face:not(.back){animation:none}
 .btn:active,.chip:active,.pill:active{transform:none}
}

/* ---- very narrow phones (320–400px): header and bottom menu must fit without widening the page ---- */
@media(max-width:400px){
 header{padding:8px 12px;gap:8px}
 header .logo,header .brand img{height:26px;width:auto}
 #acct{min-width:0}
 #creditbadge{margin-right:6px;padding:4px 10px;font-size:13px}
 nav{padding-left:2px;padding-right:2px}
 nav a{font-size:11.5px;padding:6px 3px;white-space:nowrap;min-width:0}
}

.prov:disabled,#emstep1 input:disabled,#emstep1 button:disabled{filter:grayscale(1);opacity:.42;cursor:not-allowed}