/* =========================================================
   BROCHURE FLIPBOOK — 3D page turn
   ========================================================= */
.fb{position:fixed;inset:0;z-index:500;display:flex;flex-direction:column;color:#fff;background:radial-gradient(ellipse at 50% 45%,#2a2b30,#0B0B0B 72%);opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s}
.fb-open{overflow:hidden}
.fb-open .fb{opacity:1;visibility:visible}
.fb__bar{display:flex;align-items:center;gap:18px;padding:18px 28px}
.fb__title{font-family:"Inter",system-ui,sans-serif;font-size:19px;letter-spacing:-.01em}
.fb__count{margin-right:auto;font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.6)}
.fb__actions{display:flex;gap:8px}
.fb__btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;font-size:13px;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);transition:background .3s,border-color .3s}
.fb__btn:hover{background:var(--red);border-color:var(--red)}
.fb__btn .ico{width:15px;height:15px}
.fb__close{width:42px;padding:0;justify-content:center}
.fb__stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:2vw;padding:0 28px 8px}
.fb__book{--ar:.707;position:relative;height:min(76vh,calc((100vw - 240px) / 2 / var(--ar)));aspect-ratio:calc(var(--ar) * 2);perspective:2800px;transition:transform .9s var(--ease)}
.fb__book[data-pos=start]{transform:translateX(-25%)}
.fb__book[data-pos=end]{transform:translateX(25%)}
.fb__leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-style:preserve-3d;transform-origin:left center;transition:transform 1.05s cubic-bezier(.645,.045,.355,1);cursor:pointer}
.fb__leaf.is-flipped{transform:rotateY(-180deg)}
.fb__leaf.is-turning{z-index:999!important}
.fb__face{position:absolute;inset:0;overflow:hidden;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.fb__face img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.fb__face--back{transform:rotateY(180deg)}
.fb__face::after{content:"";position:absolute;inset:0;pointer-events:none}
.fb__face--front::after{background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,0) 7%)}
.fb__face--back::after{background:linear-gradient(270deg,rgba(0,0,0,.22),rgba(0,0,0,0) 7%)}
.fb__leaf.is-turning .fb__face::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.25));animation:fbShade 1.05s ease-in-out}
@keyframes fbShade{0%,100%{opacity:0}50%{opacity:1}}
.fb__nav{flex:0 0 auto;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1px solid rgba(255,255,255,.25);transition:background .3s,border-color .3s,opacity .3s}
.fb__nav:hover:not(:disabled){background:var(--red);border-color:var(--red)}
.fb__nav:disabled{opacity:.22;cursor:default}
.fb__hint{padding:4px 0 18px;text-align:center;font-size:11.5px;color:rgba(255,255,255,.45)}
.fb__list{display:none}

/* zoom */
.fb__zoomctl{display:flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.fb__zoomctl button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;transition:background .3s}
.fb__zoomctl button:hover{background:var(--red)}
.fb__zoomctl .ico{width:15px;height:15px}
.fb__zl{min-width:46px;text-align:center;font-size:12px;color:rgba(255,255,255,.8);font-variant-numeric:tabular-nums}
.fb__viewport{position:relative;flex:0 1 auto;display:grid;place-items:center;align-self:stretch;min-width:0;touch-action:none}
.fb__zoom{transform-origin:50% 50%;will-change:transform}
.fb__zoom.is-anim{transition:transform .45s var(--ease-out)}
.fb.is-zoomed .fb__viewport{cursor:grab}
.fb.is-zoomed .fb__viewport:active{cursor:grabbing}
.fb.is-zoomed .fb__leaf{cursor:inherit}
.fb.is-zoomed .fb__nav{opacity:.35}
.fb__stage{overflow:hidden}

@media (max-width:700px){
  .fb__viewport,.fb__nav,.fb__hint{display:none}
  .fb__stage{display:block;overflow:auto;padding:0 14px 20px}
  .fb__list{display:grid;gap:12px;width:calc(100% * var(--lz,1))}
  .fb__list img{width:100%;max-width:none;box-shadow:0 14px 30px rgba(0,0,0,.4)}
  .fb__bar{flex-wrap:wrap;gap:10px}
  .fb__count{display:none}
  .fb__bar{padding:14px}
  .fb__title{font-size:15px}
}