/* HAS+A DESIGN LAB — V112 motion layer + Sora scroll guide. Additive only; original content/markup untouched. */

/* ---- scroll reveals (only applied after hastamotion.js has run; elements below the fold start hidden) ---- */
html.hm-on .hm-pre{opacity:0}
@media print{html.hm-on .hm-pre{opacity:1!important}}

/* ---- section rail ---- */
.hm-rail{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:7000;display:flex;flex-direction:column;gap:2px;
  opacity:0;pointer-events:none;transition:opacity .5s;mix-blend-mode:difference}
.hm-rail.is-on{opacity:1;pointer-events:auto}
.hm-rail a{position:relative;display:flex;align-items:center;justify-content:flex-end;height:22px;width:22px;text-decoration:none;color:#fff;outline:none}
.hm-rail a i{display:block;width:7px;height:7px;border-radius:50%;border:1.5px solid #fff;transition:transform .3s,background .3s,width .3s,border-radius .3s}
.hm-rail a.on i{background:#fff;transform:scale(1.35)}
.hm-rail a span{position:absolute;right:26px;top:50%;transform:translate(8px,-50%);opacity:0;white-space:nowrap;font:800 9.5px/1 Arial,sans-serif;letter-spacing:.18em;pointer-events:none;transition:opacity .25s,transform .25s}
.hm-rail a:hover span,.hm-rail a:focus-visible span,.hm-rail a.on:hover span{opacity:1;transform:translate(0,-50%)}
.hm-rail a:hover i,.hm-rail a:focus-visible i{transform:scale(1.5)}
@media(max-width:1100px){.hm-rail{display:none}}

/* ---- Sora guide ---- */
.hg{position:fixed;left:10px;bottom:8px;z-index:7900;width:170px;height:170px;pointer-events:none;
  opacity:0;transform:translateY(24px) scale(.9);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.hg.is-on{opacity:1;transform:none}
.hg-cv{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.hg-hit{position:absolute;left:20%;bottom:2%;width:58%;height:72%;border:0;background:transparent;padding:0;border-radius:40%;cursor:pointer;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.hg-hit:focus-visible{outline:2px solid #c42b35}
.hg-x{position:absolute;left:4px;top:8px;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.28);background:#111;color:#fff;
  font:700 14px/1 Arial,sans-serif;display:grid;place-items:center;padding:0 0 2px;cursor:pointer;pointer-events:none;opacity:0;transform:scale(.7);transition:opacity .2s,transform .2s,background .2s}
.hg:hover .hg-x,.hg-x:focus-visible{opacity:1;transform:none;pointer-events:auto}
.hg-x:hover{background:#a11d27}
@media(hover:none){.hg-x{opacity:.8;transform:none;pointer-events:auto}}
.hg-bubble{position:absolute;left:112px;bottom:108px;width:max-content;max-width:min(270px,62vw);padding:11px 14px 12px;background:#f4f3ef;color:#0a0a0a;
  border-radius:14px 14px 14px 3px;font:700 13px/1.4 Arial,sans-serif;box-shadow:0 12px 32px rgba(0,0,0,.5);pointer-events:none;
  opacity:0;transform:translateY(8px) scale(.96);transform-origin:0 100%;transition:opacity .3s,transform .3s}
.hg-bubble.is-on{opacity:1;transform:none;pointer-events:auto}
.hg-bubble b{display:block;color:#a11d27;font-size:9px;letter-spacing:.2em;margin-bottom:4px}
.hg-bubble a{display:inline-block;margin-top:8px;padding:8px 11px;background:#a11d27;color:#fff;text-decoration:none;font:800 10px/1 Arial,sans-serif;letter-spacing:.14em;border-radius:2px}
.hg-bubble a:hover{background:#c42b35}
@media(max-width:700px){.hg{width:96px;height:96px;left:8px;bottom:8px}.hg-bubble{left:68px;bottom:70px;font-size:12px;max-width:62vw}.hg-x{top:0;left:0}}
@media print,(prefers-reduced-motion:reduce){.hg,.hm-rail{display:none!important}}

/* ---- content patches (V114) ---- */
.order-price{margin-top:20px;font-size:12.5px;line-height:1.6;color:#cfcfcf;letter-spacing:.02em}
.order-price b{display:block;color:#dc444f;font-size:10px;letter-spacing:.18em;margin-bottom:5px}
.order-price strong{color:#fff}

/* ---- Sora lore poster + synopsis (V119) ---- */
.sora-lore-tag{margin:6px 0 20px;color:#fff;font-size:12px;font-weight:900;letter-spacing:.22em}
.sora-lore-syn{max-width:650px;margin:0 0 24px;border:1px solid #333;background:rgba(255,255,255,.03)}
.sora-lore-syn summary{cursor:pointer;padding:13px 16px;font-size:11px;font-weight:900;letter-spacing:.22em;color:#e73644;list-style:none}
.sora-lore-syn summary::-webkit-details-marker{display:none}
.sora-lore-syn summary::after{content:"+";float:right;color:#fff}
.sora-lore-syn[open] summary::after{content:"–"}
.sora-lore-syn div{padding:2px 16px 14px;color:#bdbdbd;font-size:14px;line-height:1.7}
.sora-lore-syn p{margin:0 0 10px}
