/* ==========================================================
   Westchester — the home page BOOK: cover, the programs, the corporate journal, back cover. Script: book.js.
   book.js adds .is-flip to #book; without the script the three programs are just a normal grid of cards.
   ========================================================== */

.jb{outline:none}
.book.is-flip .book-stage{display:grid;justify-items:center;gap:26px;outline:none}
.book.is-flip .book-stage:focus-visible{outline:2px solid var(--red);outline-offset:8px;border-radius:8px}
/* 20 % bigger than before (was 84vh / 780px): the book breaks out of the 1200px column so the wider spread fits */
.book.is-flip{--page-h:min(101vh,936px);width:min(1368px,calc(100vw - 32px));margin-left:calc(50% - min(684px,(100vw - 32px) / 2))}
.jb-stage{width:100%;display:flex;justify-content:center;touch-action:pan-y}

/* the wrapper keeps the size and the perspective; the book inside slides sideways while it is closed */
.jb-wrap{position:relative;width:min(100%,calc(var(--page-h) * 1.414));aspect-ratio:1.414 / 1;perspective:2600px;perspective-origin:50% 42%}
.jb-wrap[data-mode="single"]{width:min(100%,calc(var(--page-h) * .707),672px);aspect-ratio:.707 / 1}
.jb-wrap::before{content:'';position:absolute;left:6%;right:6%;bottom:-16px;height:34px;background:radial-gradient(ellipse at center,rgba(19,35,63,.42),transparent 70%);filter:blur(7px);pointer-events:none;transition:left .9s cubic-bezier(.5,.05,.2,1),right .9s cubic-bezier(.5,.05,.2,1)}
.jb-wrap[data-state="front"]::before{left:31%;right:-19%}
.jb-wrap[data-state="back"]::before{left:-19%;right:31%}
.jb-wrap[data-state="single"]::before{left:6%;right:6%}
/* the dark fold in the middle of an open spread (outside the 3D tree, so it never fights with the turning leaves) */
.jb-wrap::after{content:'';position:absolute;top:0;bottom:0;left:46.5%;width:7%;background:linear-gradient(90deg,transparent,rgba(15,20,40,.16) 40%,rgba(15,20,40,.30) 50%,rgba(15,20,40,.16) 60%,transparent);opacity:0;pointer-events:none;transition:opacity .5s}
.jb-wrap[data-state="open"]::after{opacity:1}

.jb-book{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.5,.05,.2,1)}
.jb-book[data-state="front"]{transform:translateX(-25%)}      /* only the cover: centred */
.jb-book[data-state="back"]{transform:translateX(25%)}        /* only the back cover: centred */

.jb-leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;
  transform:translateZ(calc(var(--zz,0) * .4px)) rotateY(0deg);transition:transform .9s cubic-bezier(.5,.05,.2,1)}
.jb-leaf.is-turned{transform:translateZ(calc(var(--zz,0) * .4px)) rotateY(-180deg)}
.jb-book.is-rewinding .jb-leaf{transition-duration:.75s;transition-delay:calc((var(--L,12) - var(--i,0)) * 50ms)}
.jb-wrap[data-mode="single"] .jb-leaf{left:0;width:100%}
.jb-wrap[data-mode="single"] .jb-leaf.is-turned{transform:translateZ(calc(var(--zz,0) * .4px)) rotateY(-105deg);opacity:0;visibility:hidden;
  transition:transform .7s cubic-bezier(.5,.05,.2,1),opacity .3s ease .35s,visibility 0s linear .7s}

.jb-face{position:absolute;inset:0;overflow:hidden;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  box-shadow:0 0 0 1px rgba(19,35,63,.07)}
.jb-front{border-radius:0 6px 6px 0}
.jb-back{border-radius:6px 0 0 6px;transform:rotateY(180deg)}
.jb-wrap[data-mode="single"] .jb-front{border-radius:6px}
.jb-zoomable{cursor:zoom-in}
.jb-img{display:block;width:100%;height:100%;object-fit:cover;background:#f2eee6;user-select:none;-webkit-user-drag:none}
/* a soft shade slides over the face while the leaf is turning */
.jb-face::after{content:'';position:absolute;inset:0;opacity:0;pointer-events:none}
.jb-front::after{background:linear-gradient(90deg,rgba(15,20,40,.5),rgba(15,20,40,0) 60%)}
.jb-back::after{background:linear-gradient(270deg,rgba(15,20,40,.5),rgba(15,20,40,0) 60%)}
.jb-leaf.is-moving .jb-face::after{animation:jbShade .9s ease}
@keyframes jbShade{0%,100%{opacity:0}45%{opacity:1}}

/* ---------- the pages that are not pictures ---------- */
/* the cover and the inside of the cover are the page's own elements (story.css styles them), here they fill a face */
.jb-face>.book-cover-front,.jb-face>.book-cover-back{position:absolute;inset:0;transform:none;backface-visibility:visible;-webkit-backface-visibility:visible}
.jb-face>.book-cover-front{border-radius:0 6px 6px 0}
.jb-face>.book-cover-back{border-radius:6px 0 0 6px}
.bk-cover{cursor:pointer}
.bk-cover,.bk-inside,.bk-backcover{background:transparent}
@media (hover:hover){.jb-wrap[data-state="front"]:hover .jb-leaf:first-child{transform:translateZ(calc(var(--zz,0) * .4px)) rotateY(-7deg)}}
/* the back cover */
.bk-back{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px;text-align:center;color:#fff;
  border-radius:6px 0 0 6px;background:radial-gradient(circle at 28% 16%,rgba(194,59,63,.42),transparent 52%),linear-gradient(200deg,#27416b,#13233f 72%)}
.bk-back::before{content:'';position:absolute;inset:18px;border:1px solid rgba(240,160,163,.45);border-radius:10px 2px 2px 10px}
.bk-url{margin-top:6px;font-size:12px;letter-spacing:.2em;color:#b6c0d1}

/* ---------- buttons ---------- */
.jb-bar{display:flex;align-items:center;justify-content:center;gap:12px}
.jb-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;border:1px solid var(--line);font:inherit;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .2s}
.jb-prev{width:48px;padding:0;background:var(--white);border-radius:50%;color:var(--navy)}
.jb-next{padding:0 22px 0 26px;background:var(--navy);border-color:var(--navy);border-radius:999px;font-size:15px;color:#fff}
/* the language of the journal pages (Русский / O'zbekcha / English) */
.jb-lang{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.jb-lang-btn{height:38px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--navy);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.jb-lang-btn.is-on{background:var(--navy);border-color:var(--navy);color:#fff}
@media (hover:hover){.jb-lang-btn:not(.is-on):hover{border-color:var(--navy)}}
.jb-lang-btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.jb-btn:disabled{opacity:.35;cursor:default}
.jb-btn:active:not(:disabled){transform:scale(.96)}
@media (hover:hover){
  .jb-prev:hover:not(:disabled){border-color:var(--navy)}
  .jb-next:hover{background:var(--red);border-color:var(--red)}
}
.jb-btn:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.jb-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- a journal page, large ---------- */
html.jb-lock{overflow:hidden}
.jb-zoom{width:min(1000px,96vw);max-height:96vh;padding:0;overflow:hidden;background:var(--paper);border:0;border-radius:14px;box-shadow:0 44px 90px -34px rgba(19,35,63,.65)}
.jb-zoom[open]{display:flex;flex-direction:column;animation:jbZoomIn .28s cubic-bezier(.2,.7,.2,1)}
.jb-zoom::backdrop{background:rgba(19,35,63,.62);backdrop-filter:blur(3px)}
@keyframes jbZoomIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.jb-zoom-bar{display:flex;justify-content:flex-end;gap:10px;padding:12px 14px;background:var(--paper);border-bottom:1px solid var(--line)}
.jb-zoom-scroll{overflow:auto;max-height:calc(96vh - 73px);overscroll-behavior:contain}
.jb-zoom-img{display:block;width:100%;height:auto;background:#fff}

/* ---------- one page at a time (phones, narrow windows) ---------- */
@media (max-width:899px){
  .book.is-flip{--page-h:min(91vh,864px)}
  .jb-face>.book-cover-front,.jb-face>.book-cover-back{border-radius:6px}
}
@media (prefers-reduced-motion:reduce){
  .jb-book,.jb-leaf,.jb-wrap::before,.jb-wrap::after,.jb-btn{transition:none}
  .jb-book.is-rewinding .jb-leaf{transition-delay:0s}
  .jb-leaf.is-moving .jb-face::after,.jb-zoom[open]{animation:none}
}