/* Happiness® whimsy: pages lane (prefix hp-). Page vignettes for /about /contact /shop /trademark /demo /play
   /privacy + the home/shop signup celebration. Decorations are JS-inserted; no-JS pages are untouched. */
.hp-rel{position:relative}
.hp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- real cards laid edge to edge, matching triangles (/demo /play) ---------- */
.hp-strip{position:absolute;display:flex;pointer-events:none;z-index:1;--hp-cw:30px}
.hp-mc{display:block;flex:none;width:var(--hp-cw);height:calc(var(--hp-cw) * 212 / 156);filter:drop-shadow(0 4px 7px rgba(0,0,0,.5))}
.hp-mc img{display:block;width:100%;height:100%;border-radius:3px}
.hp-spark svg{display:block;width:100%;height:100%}
.hp-spark{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;opacity:0;filter:drop-shadow(0 0 4px rgba(254,236,180,.9))}
.hp-arm .hp-mc[data-f]{opacity:0}
.hp-go .hp-mc[data-f]{animation:hp-slide .62s cubic-bezier(.2,.85,.25,1.12) var(--hp-d,0ms) both}
.hp-go .hp-spark{animation:hp-spark .7s ease-out var(--hp-d,0ms) both}
.hp-mc[data-f=l]{--hp-x:-70px;--hp-y:0px;--hp-r:-10deg}
.hp-mc[data-f=r]{--hp-x:70px;--hp-y:0px;--hp-r:10deg}
.hp-mc[data-f=t]{--hp-x:0px;--hp-y:-46px;--hp-r:-14deg}
.hp-mc[data-f=u]{--hp-x:8px;--hp-y:-40px;--hp-r:12deg}
@keyframes hp-slide{0%{opacity:0;transform:translate(var(--hp-x),var(--hp-y)) rotate(var(--hp-r))}35%{opacity:1}100%{opacity:1;transform:none}}
@keyframes hp-spark{0%{opacity:0;transform:scale(.2) rotate(0)}35%{opacity:1;transform:scale(1.25) rotate(45deg)}100%{opacity:0;transform:scale(.6) rotate(90deg)}}

.hp-s-demo{--hp-cw:46px;left:50%;bottom:calc(100% + 24px);transform:translateX(-50%)}
.hp-s-play{--hp-cw:44px;left:50%;top:0;transform:translate(-50%,-50%)}
@media (max-width:640px){.hp-s-demo{--hp-cw:38px;bottom:calc(100% + 16px)}.hp-s-play{--hp-cw:34px}}

/* ---------- /about: the five pip colours, silver is the wildcard ---------- */
.hp-pips{position:absolute;left:50%;top:100%;transform:translateX(-50%);display:flex;margin-top:4px}
.hp-pip{position:relative;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none;color:inherit}
.hp-pip svg{display:block;width:13px;height:12px;grid-area:1/1}
button.hp-pip{cursor:pointer;border-radius:7px;transition:transform .2s ease}
button.hp-pip:hover,button.hp-pip:focus-visible{transform:translateY(-2px)}
button.hp-pip:focus-visible{outline:2px solid #13AAFD;outline-offset:1px}
.hp-pip .hp-wc{opacity:0}
.hp-arm .hp-pip{opacity:0}
.hp-go .hp-pip{animation:hp-deal .5s cubic-bezier(.2,.9,.3,1.35) calc(var(--i) * 90ms) backwards}
@keyframes hp-deal{0%{opacity:0;transform:translateY(10px) scale(.3) rotate(-70deg)}100%{opacity:1;transform:none}}
.hp-cyc .hp-wc{animation:hp-wc .34s ease-in-out calc(var(--i) * 170ms) both}
.hp-pips .hp-pip.hp-cyc{animation:hp-wbob .9s ease-in-out}
@keyframes hp-wc{0%,100%{opacity:0}40%,60%{opacity:1}}
@keyframes hp-wbob{0%,100%{transform:none}30%{transform:translateY(-3px) rotate(-8deg)}65%{transform:translateY(-1px) rotate(6deg)}}

/* ---------- /shop: a deck that riffles behind the card back ---------- */
.hp-deck{position:absolute;z-index:-1;pointer-events:none}
.hp-gc{position:absolute;inset:0;border-radius:12px;background:#07090c;border:1px solid rgba(161,141,95,.6);box-shadow:0 8px 18px rgba(0,0,0,.35);transform-origin:50% 115%}
.hp-gc:nth-child(1){transform:translate(3px,3px)}
.hp-gc:nth-child(2){transform:translate(6px,6px)}
.hp-gc:nth-child(3){transform:translate(9px,9px)}
.hp-riffle .hp-gc:nth-child(1){animation:hp-rf1 .85s cubic-bezier(.3,.7,.3,1) both}
.hp-riffle .hp-gc:nth-child(2){animation:hp-rf2 .85s cubic-bezier(.3,.7,.3,1) 70ms both}
.hp-riffle .hp-gc:nth-child(3){animation:hp-rf3 .85s cubic-bezier(.3,.7,.3,1) 140ms both}
@keyframes hp-rf1{0%,100%{transform:translate(3px,3px)}40%{transform:translate(-14px,0) rotate(-6deg)}}
@keyframes hp-rf2{0%,100%{transform:translate(6px,6px)}40%{transform:translate(10px,-2px) rotate(4deg)}}
@keyframes hp-rf3{0%,100%{transform:translate(9px,9px)}40%{transform:translate(20px,2px) rotate(9deg)}}

/* ---------- /trademark: the ® is stamped in gold foil ---------- */
.hp-r{position:relative;display:inline-block}
.hp-rg{display:inline-block;background:linear-gradient(135deg,#FEFCF0 15%,#EFDFB2 45%,#FFF8DF 58%,#E9D6A2 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hp-rring,.hp-glint{position:absolute;left:50%;top:50%;pointer-events:none;opacity:0}
.hp-rring{width:1.9em;height:1.9em;margin:-.95em 0 0 -.95em;border-radius:50%;border:1.5px solid rgba(233,214,162,.85)}
.hp-glint{width:.9em;height:.9em;margin:-1.05em 0 0 .05em;filter:drop-shadow(0 0 3px rgba(254,236,180,.9))}
.hp-r.hp-go .hp-rg{animation:hp-press .7s cubic-bezier(.5,0,.3,1) both}
.hp-r.hp-go .hp-rring{animation:hp-ring .7s ease-out .36s both}
.hp-r.hp-go .hp-glint{animation:hp-spark .8s ease-out .5s both}
@keyframes hp-press{0%{opacity:0;transform:translateY(-.8em) scale(3) rotate(-16deg)}55%{opacity:1;transform:scale(.84);filter:drop-shadow(0 0 0 rgba(254,236,180,0))}66%{filter:drop-shadow(0 0 6px rgba(254,236,180,.9))}78%{transform:scale(1.07)}100%{transform:none;filter:drop-shadow(0 0 0 rgba(254,236,180,0))}}
@keyframes hp-ring{0%{opacity:0;transform:scale(.3)}8%{opacity:.9}100%{opacity:0;transform:scale(1.5)}}

/* ---------- /privacy: a cookie you can bite ---------- */
.hp-cookie{position:absolute;top:50%;width:34px;height:34px;margin-top:-17px;padding:0;border:0;background:none;cursor:pointer;border-radius:50%;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.hp-cookie svg{display:block;width:100%;height:100%;overflow:visible}
.hp-cookie:hover,.hp-cookie:focus-visible{transform:rotate(-14deg) scale(1.08)}
.hp-cookie:focus-visible{outline:2px solid #FF0082;outline-offset:3px}
.hp-bite{transform:scale(0);transform-box:fill-box;transform-origin:center;transition:transform .16s cubic-bezier(.4,1.8,.6,1)}
.hp-b1 .hp-bite:nth-of-type(1),.hp-b2 .hp-bite:nth-of-type(-n+2),.hp-b3 .hp-bite{transform:none}
.hp-crumb{position:absolute;width:3px;height:3px;border-radius:1px;background:#C58B4A;pointer-events:none;animation:hp-crumb .7s cubic-bezier(.4,0,.8,.6) forwards}
@keyframes hp-crumb{0%{opacity:1;transform:none}100%{opacity:0;transform:translate(var(--hp-x),22px) rotate(160deg)}}
.hp-fresh{animation:hp-fresh .45s cubic-bezier(.2,.9,.3,1.4)}
@keyframes hp-fresh{0%{opacity:0;transform:scale(.4) rotate(-90deg)}100%{opacity:1;transform:none}}

/* ---------- /contact: "your turn" pulse + the card sealed into an envelope ---------- */
.hp-turn{position:absolute;inset:-3px;border-radius:9999px;border:2px solid rgba(255,0,130,.75);pointer-events:none;opacity:0;animation:hp-turn 1.1s ease-out 2 both}
@keyframes hp-turn{0%{opacity:.9;transform:scale(.98)}100%{opacity:0;transform:scale(1.09,1.35)}}
.hp-sealbox{position:relative;padding-right:96px}
.hp-env{position:absolute;right:12px;top:50%;width:76px;height:61px;margin-top:-30px;pointer-events:none}
.hp-env svg{display:block;width:100%;height:100%;overflow:visible}
.hp-env .hp-fo,.hp-env .hp-fc{transform-box:view-box;transform-origin:40px 26px}
.hp-env .hp-fo{transform:scaleY(0)}
.hp-env .hp-seal,.hp-env .hp-sring{transform-box:view-box;transform-origin:40px 46px}
.hp-env .hp-sring{opacity:0}
.hp-env:not(.hp-still){animation:hp-envin .35s ease-out both}
.hp-env:not(.hp-still) .hp-ecard{animation:hp-ecard .75s cubic-bezier(.35,.6,.35,1) .2s both}
.hp-env:not(.hp-still) .hp-fo{animation:hp-fo .24s ease-in .95s both}
.hp-env:not(.hp-still) .hp-fc{animation:hp-fc .26s cubic-bezier(.2,.8,.3,1.2) 1.19s both}
.hp-env:not(.hp-still) .hp-seal{animation:hp-seal .5s cubic-bezier(.5,0,.3,1.3) 1.45s both}
.hp-env:not(.hp-still) .hp-sring{animation:hp-ring .6s ease-out 1.7s both}
@keyframes hp-envin{0%{opacity:0;transform:translateX(14px)}100%{opacity:1;transform:none}}
@keyframes hp-ecard{0%{opacity:0;transform:translateY(-27px) rotate(-6deg)}25%{opacity:1}100%{opacity:1;transform:none}}
@keyframes hp-fo{0%{transform:none}100%{transform:scaleY(0)}}
@keyframes hp-fc{0%{transform:scaleY(0)}100%{transform:none}}
@keyframes hp-seal{0%{opacity:0;transform:scale(2.4) rotate(-25deg)}70%{opacity:1;transform:scale(.9)}100%{opacity:1;transform:none}}
@media (max-width:640px){.hp-sealbox{padding-right:78px}.hp-env{width:62px;height:50px;margin-top:-25px;right:8px}}

/* ---------- home + shop signup: element-triangle burst and the H links clinking ---------- */
.hp-fx{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:11}
.hp-tri{position:absolute;width:13px;height:12px;margin:-6px 0 0 -6px;clip-path:polygon(50% 0,100% 100%,0 100%);animation:hp-burst 1.15s cubic-bezier(.12,.7,.3,1) var(--hp-d) both}
@keyframes hp-burst{0%{opacity:0;transform:scale(.2)}12%{opacity:1}70%{opacity:1;transform:translate(var(--hp-x),var(--hp-y)) rotate(var(--hp-r)) scale(1)}100%{opacity:0;transform:translate(var(--hp-x),calc(var(--hp-y) + 18px)) rotate(var(--hp-r)) scale(.8)}}
.hp-keep{position:absolute;left:50%;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;padding:6px;border-radius:50%;background:#121821;box-shadow:0 0 0 1px rgba(161,141,95,.5),0 3px 10px rgba(0,0,0,.5);pointer-events:none}
.hp-keep svg{display:block;width:100%;height:100%;overflow:visible}
.hp-keep .hp-lp,.hp-keep .hp-lb,.hp-keep .hp-clk{transform-box:view-box;transform-origin:37px 44px}
.hp-keep .hp-clk{opacity:0}
.hp-keep:not(.hp-still){animation:hp-medal .35s ease-out both}
@keyframes hp-medal{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:none}}
.hp-keep:not(.hp-still) .hp-lp{animation:hp-lp .8s cubic-bezier(.3,.7,.3,1) .1s both}
.hp-keep:not(.hp-still) .hp-lb{animation:hp-lb .8s cubic-bezier(.3,.7,.3,1) .1s both}
.hp-keep:not(.hp-still) .hp-clk{animation:hp-spark .6s ease-out .52s both}
@keyframes hp-lp{0%{opacity:0;transform:translate(-26px,-38px) rotate(-24deg)}50%{opacity:1;transform:translate(3px,4px) rotate(4deg)}68%{transform:translate(-2px,-2px) rotate(-3deg)}84%{transform:rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes hp-lb{0%{opacity:0;transform:translate(26px,38px) rotate(22deg)}50%{opacity:1;transform:translate(-3px,-4px) rotate(-4deg)}68%{transform:translate(2px,2px) rotate(3deg)}84%{transform:rotate(-1deg)}100%{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .hp-strip *,.hp-pips *,.hp-pips,.hp-deck *,.hp-r *,.hp-cookie,.hp-cookie *,.hp-crumb,.hp-turn,.hp-env,.hp-env *,.hp-keep *,.hp-tri{animation:none!important;transition:none!important}
  .hp-arm .hp-mc[data-f],.hp-arm .hp-pip{opacity:1}
  .hp-cookie:hover,.hp-cookie:focus-visible,button.hp-pip:hover,button.hp-pip:focus-visible{transform:none}
  .hp-crumb,.hp-turn,.hp-tri{display:none}
}