/* Happiness(R) whimsy lane: rules (prefix hr-). Motion + illustration only; no rules text is changed.
   Everything is scoped to hr- classes that hr.js (or the server-rendered hr-edge / hr-tri markup) adds. */

/* ---------- 1. The SORT: flying cards over the four stacks + BUMMERS ---------- */
.qs-stacks.hr-sorting{position:relative}
.hr-sorting .hr-h .qs-stack-pile img{opacity:0}
.hr-sorting .hr-h .qs-stack-pile{outline:1px dashed rgba(161,141,95,.45);outline-offset:-1px;border-radius:8px}
.hr-sorting .qs-stack--bummer.hr-h .qs-stack-pile{outline-color:rgba(239,68,68,.55)}
.hr-sortlayer{position:absolute;inset:0;pointer-events:none;list-style:none;margin:0;padding:0;z-index:2}
.hr-c{position:absolute;left:0;top:0;perspective:700px;will-change:transform}
.hr-ci{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.hr-cf,.hr-cb{position:absolute;inset:0;width:100%;height:100%;border-radius:8px;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.hr-cf{display:block;object-fit:cover;border:1px solid rgba(161,141,95,.4);box-shadow:0 10px 22px rgba(0,0,0,.45)}
.hr-cf.hr-cf--b{border-color:rgba(239,68,68,.6)}
.hr-cf.hr-cf--stack{box-shadow:3px 3px 0 -1px #1C2536,3px 3px 0 0 rgba(161,141,95,.5),6px 6px 0 -1px #1C2536,6px 6px 0 0 rgba(161,141,95,.38),9px 9px 0 -1px #1C2536,9px 9px 0 0 rgba(161,141,95,.26),0 14px 26px rgba(0,0,0,.45)}
.hr-cf.hr-cf--b.hr-cf--stack{box-shadow:3px 3px 0 -1px #1C2536,3px 3px 0 0 rgba(239,68,68,.5),6px 6px 0 -1px #1C2536,6px 6px 0 0 rgba(239,68,68,.38),9px 9px 0 -1px #1C2536,9px 9px 0 0 rgba(239,68,68,.26),0 14px 26px rgba(0,0,0,.45)}
.hr-cb{transform:rotateY(180deg);background:#0B0F14 url(/static/img/brand/hback1-256.webp) center/cover no-repeat;border:1px solid rgba(161,141,95,.7);box-shadow:0 6px 14px rgba(0,0,0,.5),inset 0 0 0 2px rgba(11,15,20,.6)}

/* replay control (full quick start only; never in reduced motion) */
.hr-rel{position:relative}
.hr-replay{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:9999px;display:flex;align-items:center;justify-content:center;
  padding:0;cursor:pointer;color:#A18D5F;background:rgba(11,15,20,.55);border:1px solid rgba(161,141,95,.4);opacity:0;transform:scale(.8);
  transition:opacity .4s ease,transform .4s cubic-bezier(.3,1.4,.5,1),color .2s,border-color .2s;z-index:3}
.hr-replay.hr-in{opacity:1;transform:none}
.hr-replay:hover,.hr-replay:focus-visible{color:#FEFCF0;border-color:rgba(254,252,240,.7)}
.hr-replay:focus-visible{outline:2px solid #0097E3;outline-offset:3px}
.hr-replay svg{width:22px;height:22px;display:block;transition:transform .5s cubic-bezier(.3,1.3,.5,1)}
.hr-replay:hover svg,.hr-replay:focus-visible svg{transform:rotate(-40deg)}
.hr-replay[aria-disabled="true"]{cursor:progress}
.hr-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- 2. Steps light up: step numbers as Joypoint pips ---------- */
.qs.hr-js .qs-num{position:relative;border-radius:9999px;background:#FFFCF5;color:#323232;font-size:1.35rem;
  box-shadow:0 3px 10px rgba(0,0,0,.45),0 0 0 3px rgba(161,141,95,.28)}
.qs.hr-arm .qs-num::before{content:"";position:absolute;inset:-3px;border-radius:9999px;
  background:radial-gradient(circle,rgba(161,141,95,.95) 0 2.5px,transparent 3px),#151C27;box-shadow:inset 0 0 0 1.5px rgba(161,141,95,.8);
  transition:transform .42s cubic-bezier(.55,0,.75,.45),opacity .42s ease}
.qs.hr-arm .hr-lit .qs-num::before{transform:perspective(200px) rotateY(90deg) scale(.7);opacity:0}
.qs.hr-arm .hr-lit .qs-num{animation:hr-pop .6s .28s both}
.qs.hr-arm .hr-lit .qs-num::after{content:"";position:absolute;inset:-3px;border-radius:9999px;border:2px solid #FEFCF0;pointer-events:none;animation:hr-ripple .9s .32s both}

/* sequential glints inside each lit step (and the home teaser rows) */
.qs.hr-arm .hr-lit .qs-chip,.qs-flow.hr-sweep .qs-chip{animation:hr-glint .9s calc(var(--hr-i,0) * 110ms + 380ms) both}
.qs.hr-arm .hr-lit .qs-flow-arrow,.qs-flow.hr-sweep .qs-flow-arrow{display:inline-block;animation:hr-nudge .7s calc(var(--hr-i,0) * 110ms + 330ms) both}
.qs.hr-arm .hr-lit .qs-move-num{animation:hr-pop .55s calc(var(--hr-i,0) * 150ms + 420ms) both}
.qs.hr-arm .hr-lit .qs-move--sort{animation:hr-pinkglow 1.6s .35s both}
.qs.hr-arm .hr-lit .qs-wild-swatch{animation:hr-wild 2.6s 1.1s both}
.qs.hr-arm .hr-lit .qs-special--bummer .qs-special-name{animation:hr-shudder .55s .7s both}
.qs.hr-arm .hr-lit .qs-special--euphoria .qs-special-name{animation:hr-glint 1.1s 1.05s both}

@keyframes hr-pop{0%,100%{transform:none}45%{transform:scale(1.16)}70%{transform:scale(.96)}}
@keyframes hr-ripple{0%{transform:scale(.92);opacity:.85}100%{transform:scale(1.9);opacity:0}}
@keyframes hr-glint{0%,100%{transform:none;filter:drop-shadow(0 0 0 rgba(0,0,0,0))}40%{transform:translateY(-3px) scale(1.07);filter:drop-shadow(0 0 9px currentColor)}}
@keyframes hr-nudge{0%,100%{transform:none}50%{transform:translateX(3px)}}
@keyframes hr-pinkglow{0%,100%{filter:drop-shadow(0 0 0 rgba(255,0,130,0))}35%{filter:drop-shadow(0 0 14px rgba(255,0,130,.55))}}
@keyframes hr-wild{0%,100%{filter:drop-shadow(0 0 0 rgba(0,0,0,0))}20%{filter:drop-shadow(0 0 6px #DC3545)}40%{filter:drop-shadow(0 0 6px #007BFF)}60%{filter:drop-shadow(0 0 6px #28A745)}80%{filter:drop-shadow(0 0 6px #FFC107)}}
@keyframes hr-shudder{0%,100%{transform:none}15%{transform:translateX(-4px) rotate(-2deg)}35%{transform:translateX(4px) rotate(2deg)}55%{transform:translateX(-3px) rotate(-1deg)}75%{transform:translateX(2px)}}

/* ---------- 3. Edge matching: two real cards slide together (server-rendered markup, see hr-edge.html) ---------- */
.hr-edge{max-width:340px;margin:22px auto 2px}
.hr-edge-stage{position:relative;aspect-ratio:340/170;width:100%}
.hr-edge-card{position:absolute;top:9%;width:30%;height:auto;aspect-ratio:240/327;border-radius:7px;border:1px solid rgba(161,141,95,.35);box-shadow:0 12px 24px rgba(0,0,0,.5)}
.hr-edge-a{left:20%}
.hr-edge-b,.hr-edge-x{left:50%}
.hr-edge-x{opacity:0}
.hr-edge-spark{position:absolute;left:44.1%;top:43.1%;width:11.8%;height:13.5%;overflow:visible;filter:drop-shadow(0 0 6px rgba(0,123,255,.9))}
.hr-edge-spark polygon{fill:none;stroke:#FEFCF0;stroke-width:2.2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hr-edge.hr-arm .hr-edge-b{opacity:0;transform:translateX(62%)}
.hr-edge.hr-arm .hr-edge-spark{opacity:0}
.hr-edge.hr-arm.hr-play .hr-edge-x{animation:hr-nope 1.5s cubic-bezier(.3,.6,.3,1) both}
.hr-edge.hr-arm.hr-play .hr-edge-b{animation:hr-slidein .75s 1.45s cubic-bezier(.2,.9,.3,1.12) both}
.hr-edge.hr-arm.hr-play .hr-edge-a{animation:hr-bump .4s 2.1s both}
.hr-edge.hr-arm.hr-play .hr-edge-spark{animation:hr-spark 1.3s 2.1s both}
@keyframes hr-nope{0%{opacity:0;transform:translateX(62%)}34%{opacity:1;transform:translateX(3%)}42%{transform:translateX(7%) rotate(1.5deg)}50%{transform:translateX(3%) rotate(-1deg)}58%{transform:translateX(6%) rotate(.5deg)}72%{opacity:1;transform:translateX(9%)}100%{opacity:0;transform:translateX(62%) rotate(4deg)}}
@keyframes hr-slidein{0%{opacity:0;transform:translateX(62%)}40%{opacity:1}100%{opacity:1;transform:none}}
@keyframes hr-bump{0%,100%{transform:none}40%{transform:translateX(-1.5%)}}
@keyframes hr-spark{0%{opacity:0;transform:scale(.3)}35%{opacity:1;transform:scale(1.35)}60%{transform:scale(.95)}100%{opacity:1;transform:none}}

/* element colour glyphs on the triangle-colour chips (colours sampled from the card masters) */
.hr-tri{display:inline-block;flex-shrink:0;width:11px;height:9px;clip-path:polygon(0 0,100% 0,50% 100%);background:#888;filter:drop-shadow(0 0 .6px rgba(0,0,0,.9))}
.hr-tri--red{background:#DC3545}
.hr-tri--blue{background:#007BFF}
.hr-tri--green{background:#28A745}
.hr-tri--yellow{background:#FFC107}
.hr-tri--silver{background:linear-gradient(180deg,#E4E4E4,#8C8C8C)}

@media (prefers-reduced-motion:reduce){
  .hr-replay,.hr-replay svg{transition:none}
  .hr-edge .hr-edge-b,.hr-edge .hr-edge-spark,.hr-edge .hr-edge-a{animation:none!important;opacity:1!important;transform:none!important}
  .hr-edge .hr-edge-x{animation:none!important;opacity:0!important}
}
@media print{
  .hr-sortlayer,.hr-replay,.hr-edge,.hr-tri{display:none!important}
  .hr-sorting .qs-stack-pile img{opacity:1!important}
  .hr-sorting .qs-stack-pile{outline:0!important}
  .qs.hr-arm .qs-num::before,.qs.hr-arm .qs-num::after{display:none!important}
  .qs.hr-js .qs-num,.qs.hr-js .qs-chip,.qs.hr-js .qs-move-num,.qs.hr-js .qs-special-name,.qs-flow.hr-sweep .qs-chip{animation:none!important;transform:none!important;filter:none!important}
}