/* ENISHI BOX v041 (2026-10-22): small moments of joy in the cart drawer and the checkout page.
   Same vocabulary as the front page (falling maple leaves, the 縁 stamp, the knot, a gold glint). Short (0.3-0.6 s), never in the way
   of the next step, and off for people who ask for less motion. */
@keyframes dlStamp{0%{opacity:0;transform:scale(1.9) rotate(-18deg)}55%{opacity:1;transform:scale(.88) rotate(4deg)}100%{opacity:1;transform:none}}
@keyframes dlGlint{from{transform:translateX(-130%) skewX(-18deg)}to{transform:translateX(330%) skewX(-18deg)}}
@keyframes dlPop{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes dlRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes dlRipple{from{opacity:.42;transform:translate(-50%,-50%) scale(0)}to{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes dlTie{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes dlChip{0%{opacity:0;transform:translateY(6px) scale(.9)}60%{opacity:1;transform:translateY(-2px) scale(1.04)}100%{opacity:1;transform:none}}

/* press: every button answers within one frame */
.dl-press{transition:transform .12s ease,box-shadow .12s ease,background-color .2s ease}
.dl-press:active{transform:scale(.965)}
/* gold glint that crosses a red button (on hover, and once when it unlocks) */
.dl-glint{position:relative;overflow:hidden;isolation:isolate}
.dl-glint::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;background:linear-gradient(90deg,transparent,rgba(255,236,190,.55),transparent);transform:translateX(-130%) skewX(-18deg);pointer-events:none;z-index:1}
.dl-glint:hover::after,.dl-glint.dl-shine::after{animation:dlGlint .75s ease-out}
.dl-ripple{position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(255,236,190,.9);pointer-events:none;animation:dlRipple .5s ease-out forwards;z-index:0}

/* the 縁 seal stamps itself in */
.dl-stamp{animation:dlStamp .42s cubic-bezier(.2,.8,.2,1) both}
.dl-pop{animation:dlPop .38s ease-out}
.dl-rise{animation:dlRise .45s ease-out both}
.dl-hide{opacity:0}

/* falling maple leaves (front page uses the same leaves in the seasons) */
.dl-leaves{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:5}
.dl-leaf{position:absolute;top:-30px;width:22px;height:22px;will-change:transform,opacity}

/* the flying box (plan photo -> cart) */
.dl-fly{position:fixed;z-index:10000;border-radius:12px;box-shadow:0 14px 30px rgba(47,42,36,.3);pointer-events:none;object-fit:cover;will-change:transform,opacity}

/* checkout: hanko-style checkboxes */
.chk input.dl-hanko{appearance:none;-webkit-appearance:none;position:relative;width:26px!important;height:26px!important;margin:0!important;border:1.8px solid #b9a88e;border-radius:7px;background:#fffdf8;cursor:pointer;flex:0 0 auto}
.chk input.dl-hanko:focus-visible{outline:3px solid var(--ink,#2f2a24);outline-offset:2px}
.chk input.dl-hanko::after{content:"縁";position:absolute;inset:-3px;display:grid;place-items:center;border-radius:50%;background:#b8202f;color:#fff;font:700 14px/1 "Hiragino Mincho ProN","Yu Mincho",serif;box-shadow:0 0 0 2px rgba(184,32,47,.25);opacity:0;transform:scale(1.9) rotate(-18deg)}
.chk input.dl-hanko:checked{border-color:transparent;background:transparent}
.chk input.dl-hanko:checked::after{animation:dlStamp .4s cubic-bezier(.2,.8,.2,1) both}
.chk input.dl-hanko.dl-quiet:checked::after{animation:none;opacity:1;transform:none}

/* checkout: the pay button unlocks with a tied knot */
.pay-btn .dl-knot{width:26px;height:26px;margin-right:2px}
.pay-btn .dl-knot path{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.pay-btn.dl-open .dl-knot path{animation:dlTie .7s ease-out .05s forwards}
.pay-btn[aria-disabled="true"] .dl-knot{display:none}
.dl-chip{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:#a27a2c;color:#fff;font-size:12px;font-weight:800;vertical-align:middle;animation:dlChip .45s ease-out both}

/* the box tilts a little toward the pointer (desktop) */
.dl-tilt{transition:transform .25s ease-out;transform-style:preserve-3d}

@media (prefers-reduced-motion:reduce){
  .dl-stamp,.dl-pop,.dl-rise,.dl-chip,.chk input.dl-hanko:checked::after,.pay-btn.dl-open .dl-knot path{animation:none!important;opacity:1;transform:none;stroke-dashoffset:0}
  .dl-glint::after,.dl-leaves,.dl-ripple,.dl-fly{display:none!important}
  .dl-press:active{transform:none}.dl-hide{opacity:1}.dl-tilt{transform:none!important}
}