.bs{--h:420px;--t:38px;--color:#f28c1b;position:relative;width:560px;max-width:100%;height:calc(var(--h) + 150px);margin:0 auto;perspective:2000px;perspective-origin:50% 40%;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.bs-glow{width:calc(var(--h) * 1.2);background:radial-gradient(circle,color-mix(in srgb,var(--color) 38%,transparent) 0,transparent 66%);transition:background 1.2s ease;animation:bsPulse 6s ease-in-out infinite}.bs-glow,.bs-ring{position:absolute;left:50%;top:44%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}.bs-ring{width:calc(var(--h) * 1.12);border:1.5px dashed color-mix(in srgb,var(--color) 50%,transparent);transition:border-color 1.2s ease;animation:bsSpin 50s linear infinite}@keyframes bsPulse{50%{transform:translate(-50%,-50%) scale(1.07);opacity:.75}}@keyframes bsSpin{to{transform:translate(-50%,-50%) rotate(1turn)}}.bs-shadow{position:absolute;left:50%;top:calc(var(--h) + 62px);width:calc(var(--h) * .78);height:36px;transform:translateX(-46%);border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.75) 0,color-mix(in srgb,var(--color) 18%,transparent) 50%,transparent 72%);animation:bsShadow 4.5s ease-in-out infinite;pointer-events:none}@keyframes bsShadow{50%{transform:translateX(-46%) scale(.84);opacity:.65}}.bs-tilt{left:0;right:0;top:40px;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s cubic-bezier(.22,1,.36,1)}.bs-item,.bs-tilt{position:absolute;height:var(--h)}.bs-item{--bw:calc(var(--h) * var(--ratio));top:0;left:50%;width:var(--bw);margin-left:calc(var(--bw) / -2);transform-style:preserve-3d;opacity:0;transform:translateX(260px) translateZ(-260px) rotateY(-150deg) scale(.92);pointer-events:none}.bs-item.is-active{opacity:1;transform:translateX(0) translateZ(0) rotateY(0deg) scale(1);transition:transform 1.6s cubic-bezier(.16,1,.3,1),opacity .6s ease;pointer-events:auto;cursor:pointer}.bs-item.is-leaving{opacity:0;transform:translateX(-240px) translateZ(-340px) rotateY(110deg) scale(.88);transition:transform 1s cubic-bezier(.6,0,.8,.25),opacity .7s ease .25s}.bs-float{position:absolute;inset:0;transform-style:preserve-3d;animation:bsFloat 4.5s ease-in-out infinite}@keyframes bsFloat{0%,to{transform:translateY(0) rotateY(26deg) rotateX(4deg) rotate(-1deg)}50%{transform:translateY(-16px) rotateY(34deg) rotateX(1deg) rotate(0deg)}}.bs-book{position:absolute;inset:0;transform-style:preserve-3d}.bs-face{position:absolute;backface-visibility:hidden;-webkit-backface-visibility:hidden}.bs-front{inset:0;transform:translateZ(calc(var(--t) / 2));border-radius:2px 5px 5px 2px;overflow:hidden;background:var(--spine)}.bs-front img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block}.bs-front:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.28),hsla(0,0%,100%,.22) 1.2%,rgba(0,0,0,.18) 2.6%,rgba(0,0,0,.06) 4%,transparent 8%),linear-gradient(115deg,hsla(0,0%,100%,.18),transparent 35%,transparent 70%,rgba(0,0,0,.12))}.bs-front:after{content:"";position:absolute;top:-10%;bottom:-10%;left:-70%;width:45%;z-index:3;background:linear-gradient(105deg,transparent,hsla(0,0%,100%,.55),transparent);transform:skewX(-14deg)}.bs-item.is-active .bs-front:after{animation:bsGloss 1.3s cubic-bezier(.4,0,.2,1) 1.1s both}@keyframes bsGloss{0%{left:-70%}to{left:135%}}.bs-back{inset:0;transform:rotateY(180deg) translateZ(calc(var(--t) / 2));border-radius:5px 2px 2px 5px;background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 10%,transparent 90%,rgba(0,0,0,.25)),var(--spine);display:flex;align-items:flex-end;justify-content:center;padding-bottom:28px;box-sizing:border-box}.bs-back span{font:700 11px/1 system-ui,sans-serif;letter-spacing:3px;text-transform:uppercase;color:var(--ink);opacity:.75}.bs-spine{width:var(--t);height:var(--h);left:calc(var(--t) / -2);top:0;transform:rotateY(-90deg);border-radius:4px;background:linear-gradient(90deg,rgba(0,0,0,.35) 0,rgba(0,0,0,.05) 18%,hsla(0,0%,100%,.22) 45%,rgba(0,0,0,.05) 72%,rgba(0,0,0,.4) 100%),var(--spine);display:flex;align-items:center;justify-content:center;overflow:hidden}.bs-spine b{font:800 13px/1 system-ui,Segoe UI,sans-serif;white-space:nowrap}.bs-spine b,.bs-spine i{writing-mode:vertical-rl;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink)}.bs-spine i{position:absolute;bottom:14px;font:600 8px/1 system-ui,sans-serif;font-style:normal;opacity:.75}.bs-pages{width:calc(var(--t) - 6px);height:calc(var(--h) - 10px);top:5px;left:calc(var(--bw) - (var(--t) - 6px) / 2 - 3px);transform:rotateY(90deg);background:linear-gradient(90deg,rgba(0,0,0,.18),transparent 15%,transparent 85%,rgba(0,0,0,.2)),repeating-linear-gradient(90deg,#fbfaf6 0 1.5px,#dedad0 1.5px 2.2px)}.bs-bottom,.bs-top{width:calc(var(--bw) - 6px);height:calc(var(--t) - 6px);left:0;background:linear-gradient(0deg,rgba(0,0,0,.15),transparent 20%,transparent 80%,rgba(0,0,0,.15)),repeating-linear-gradient(0deg,#fbfaf6 0 1.5px,#dedad0 1.5px 2.2px)}.bs-top{top:calc((var(--t) - 6px) / -2 + 5px);transform:rotateX(90deg)}.bs-bottom{top:calc(var(--h) - (var(--t) - 6px) / 2 - 5px);transform:rotateX(-90deg)}.bs-dots{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);display:flex;gap:10px}.bs-dot{width:9px;height:9px;padding:0;border:0;border-radius:99px;cursor:pointer;background:hsla(0,0%,100%,.25);transition:width .5s cubic-bezier(.22,1,.36,1),background .5s}.bs-dot.is-active{width:34px;background:var(--color)}@media (max-width:1100px){.bs{--h:360px;--t:32px}}@media (max-width:600px){.bs{--h:250px;--t:24px;width:100%;height:calc(var(--h) + 120px)}.bs-tilt{top:26px}.bs-shadow{top:calc(var(--h) + 44px)}.bs-spine b{font-size:9px}.bs-spine i{display:none}}@media (prefers-reduced-motion:reduce){.bs-float,.bs-glow,.bs-ring,.bs-shadow{animation:none}.bs-item.is-active,.bs-item.is-leaving{transition:opacity .5s}}.hero-fade{animation:heroFade .6s ease both}@keyframes heroFade{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media (prefers-reduced-motion:reduce){.hero-fade{animation:none}}