/* Opening: namespaced (#hsb-opening, .op-*, html.hsb-op-pending). Does not alter any app selector. */

/* Shield while the first paint happens; the failsafe animation lifts it even if the script never loads. */
html.hsb-op-pending::before{content:"";position:fixed;inset:0;z-index:2147483000;background:#e9e6df url(store.webp) 42% 55%/cover;animation:op-failsafe .01s 6s forwards}
@keyframes op-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}

#hsb-opening{--bh:min(calc(100vh - 210px),72vh,100vw);--bw:calc(var(--bh)*.625);--bt:calc(var(--bw)*.18);position:fixed;inset:0;z-index:2147483001;overflow:hidden;color:#000;font-family:"Helvetica Neue","Arial Narrow",Arial,sans-serif;opacity:0;transition:opacity .45s ease;-webkit-tap-highlight-color:transparent}
@supports (height:100svh){#hsb-opening{--bh:min(calc(100svh - 210px),72svh,100vw)}}
#hsb-opening.op-in{opacity:1}
#hsb-opening.op-leave{opacity:0!important;transition:opacity .55s ease}
#hsb-opening.op-leave-fast{opacity:0!important;transition:opacity .22s ease}
.op-bg{position:absolute;inset:-2%;background:#dcd9d2 url(store.webp) 42% 55%/cover no-repeat;filter:saturate(1.02)}
.op-bg.op-nophoto{background:linear-gradient(160deg,#f4f1ea,#d9d5cb)}
.op-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 46%,rgba(255,255,255,.0) 0,rgba(20,20,20,.18) 58%,rgba(10,10,10,.42) 100%)}
.op-scene{position:absolute;inset:0 0 100px;display:flex;align-items:center;justify-content:center;perspective:1700px;perspective-origin:50% 45%}
.op-cam{transform-style:preserve-3d;transition:transform 1.25s cubic-bezier(.55,.05,.25,1) .55s;will-change:transform}
.op-book{position:relative;width:var(--bw);height:var(--bh);transform-style:preserve-3d;transform:translateX(calc(var(--bt)*.55)) rotateY(20deg) rotateX(3deg);transition:transform 1.3s cubic-bezier(.55,.05,.25,1) .1s}
.op-book>*{position:absolute;top:0;left:0}
.op-art{display:block;width:100%;height:100%}

.op-shadow{left:-4%;top:6%;width:108%;height:96%;background:rgba(0,0,0,.42);filter:blur(calc(var(--bh)*.035));transform:translateZ(calc(var(--bt)*-1.2)) translate(calc(var(--bt)*.9),calc(var(--bh)*.025))}
.op-back{width:100%;height:100%;background:#e8b94c;transform:translateZ(calc(var(--bt)*-1));border-radius:0 3px 3px 0}
.op-edge{width:var(--bt);height:100%;left:100%;transform-origin:0 50%;transform:rotateY(90deg);background:repeating-linear-gradient(90deg,#fff7e3 0 2px,#efe2c0 2px 3px);border-radius:0 2px 2px 0}
.op-spine{width:var(--bt);height:100%;transform-origin:0 50%;transform:rotateY(90deg);overflow:hidden}
.op-pages{width:96.5%;height:97.5%;left:1%;top:1.2%;transform:translateZ(-1px);background:#fff8e6;box-shadow:inset 0 0 0 1px #ead9ab}
.op-page{position:absolute;inset:0;background:radial-gradient(circle at 50% 52%,#fffdf5 0,#fff3cf 70%,#ffe9a8 100%)}

.op-cover{width:100%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;transition:transform 1.15s cubic-bezier(.5,.04,.22,1) .05s}
.op-front,.op-inside{position:absolute;top:0;left:0;right:0;bottom:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.op-front::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(120,80,0,.05) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(120,80,0,.04) 0 1px,transparent 1px 3px)}
.op-front{cursor:pointer;border-radius:0 4px 4px 0;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.op-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,rgba(255,255,255,.28) 0,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 70%,rgba(0,0,0,.14) 100%)}
.op-inside{transform:rotateY(180deg);background:linear-gradient(270deg,#f4e6bd,#fff1c9 60%,#f6e3ae);border-radius:4px 0 0 4px;box-shadow:inset 0 0 0 calc(var(--bw)*.03) #FFD36A}

/* idle: the book breathes very slightly */
#hsb-opening.op-in:not(.op-opening) .op-book{animation:op-float 4.2s ease-in-out infinite}
@keyframes op-float{50%{transform:translateX(calc(var(--bt)*.55)) rotateY(17deg) rotateX(2deg) translateY(-1.2%)}}

/* the light that spreads from between the pages */
.op-glow{position:absolute;left:50%;top:50%;width:var(--bh);height:var(--bh);margin:calc(var(--bh)*-.5) 0 0 calc(var(--bh)*-.5);border-radius:50%;background:radial-gradient(circle,rgba(255,250,225,.95) 0,rgba(255,226,140,.65) 34%,rgba(255,214,110,0) 68%);opacity:0;transform:scale(.25);pointer-events:none;mix-blend-mode:screen}
.op-flood{position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#fffdf3 0,#fff6d6 55%,#ffeaa6 100%);opacity:0;pointer-events:none}

.op-ui{position:absolute;left:0;right:0;bottom:max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .3s}
.op-open{font:inherit;cursor:pointer;background:#000;color:#FFD36A;border:0;border-radius:999px;padding:10px 30px;display:flex;flex-direction:column;align-items:center;line-height:1.15;box-shadow:0 6px 22px rgba(0,0,0,.35)}
.op-open b{font-size:19px;letter-spacing:.18em;font-weight:800}
.op-open small{font-size:13px;letter-spacing:.1em;font-weight:700;opacity:.9}
.op-skip{font:700 14px/1 "Helvetica Neue",Arial,sans-serif;letter-spacing:.12em;background:rgba(255,255,255,.78);color:#000;border:0;border-radius:999px;padding:8px 18px;cursor:pointer}
.op-open:focus-visible,.op-skip:focus-visible{outline:3px solid #FF4A2C;outline-offset:3px}
.op-note{position:absolute;left:0;right:0;bottom:90px;margin:0;text-align:center;font-weight:700}

/* opening sequence (~1.9s) */
#hsb-opening.op-opening .op-cover{transform:rotateY(-168deg)}
#hsb-opening.op-opening .op-book{transform:translateX(0) rotateY(2deg) rotateX(0)}
#hsb-opening.op-opening .op-cam{transform:translateX(calc(var(--bw)*.02)) scale(2.35)}
#hsb-opening.op-opening .op-ui{opacity:0;pointer-events:none}
#hsb-opening.op-opening .op-glow{animation:op-glow 1.35s ease-in .3s forwards}
#hsb-opening.op-opening .op-flood{animation:op-flood .75s ease-in-out 1.05s forwards}
@keyframes op-glow{0%{opacity:0;transform:scale(.25)}35%{opacity:.9}100%{opacity:1;transform:scale(3.4)}}
@keyframes op-flood{from{opacity:0}to{opacity:1}}
#hsb-opening.op-opening{animation:op-fadeout .5s ease 1.3s forwards}
@keyframes op-fadeout{to{opacity:0}}

@media (prefers-reduced-motion:reduce){
 #hsb-opening,#hsb-opening *{animation:none!important;transition:none!important}
 #hsb-opening.op-in{opacity:1}
 #hsb-opening.op-reduced-open{opacity:0!important;transition:opacity .4s ease!important}
}
@media (orientation:landscape) and (max-height:520px){#hsb-opening{--bh:min(66vh,60vw)}.op-ui{flex-direction:row;justify-content:center;gap:12px}.op-open{padding:6px 22px}}

.op-replay{display:block;margin:14px auto;font-size:13px;opacity:.7}

.op-auth{position:fixed;left:50%;top:40%;transform:translateX(-50%);z-index:2147483000;display:flex;flex-direction:column;align-items:center;gap:10px;background:#FFD36A;color:#000;padding:14px 22px;border-radius:14px;font-weight:700;box-shadow:0 6px 24px rgba(0,0,0,.2)}.op-auth button{font:inherit;background:#000;color:#FFD36A;border:0;border-radius:999px;padding:8px 20px;cursor:pointer}