/* =====================================================================
   THE BROCHURE - hero third button, "See the Brochure"
   A full-screen flipbook of the 24-page platform booklet (the print
   master lives in ErgoPhamplet/, the PDF copy the visitor downloads in
   downloads/). Pages are pre-rendered to img/brochure/p01..p24.webp
   (1240px wide) with t01..t24.webp thumbnails for the strip.
   Built by js/ergosphere-brochure.js (which also explains the strip
   bend). Two layouts, chosen by the JS:
     spread  - two facing pages on one sheet, real 3D page turn
     single  - one page per sheet (phones and narrow portrait windows)
   Rule of the house: nothing moves until the visitor touches it.
   Re-render the page images with the same pipeline whenever the booklet
   changes; the page count and titles live in the JS TITLES array.
   ===================================================================== */

/* ---------- hero button (third CTA) ----------
   Layout and colours of the three hero buttons live in ergosphere-custom.css
   (HERO BUTTONS) and ergosphere-mobile.css; only the icon is styled here. */
.grax_tm_hero .buttons .grax_tm_button a.esb_open { display: inline-flex; align-items: center; gap: 10px; }
.grax_tm_hero .buttons .grax_tm_button a.esb_open svg { width: 17px; height: 17px; flex: none; }

/* ---------- overlay ---------- */
.esb_overlay { position: fixed; inset: 0; z-index: 99992; display: none; flex-direction: column; font-family: 'Poppins', sans-serif; color: #fff;
  --r: 0.70665;                              /* A4 width / height */
  --ph: min(calc(100vh - 210px), calc((100vw - 220px) * 0.70757));
  --ph: min(calc(100dvh - 210px), calc((100vw - 220px) * 0.70757));
  --pw: calc(var(--ph) * var(--r));
  --sw: calc(var(--pw) / 10);              /* strip width; the JS overrides --pw/--ph/--sw with whole pixels */
  --dur: .95s; }
.esb_overlay.is-shown { display: flex; }
.esb_backdrop { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 55%, rgba(0,212,255,.10), transparent 70%), rgba(3,8,16,.92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .3s ease; }
.esb_overlay.is-open .esb_backdrop { opacity: 1; }
.esb_dialog { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; height: 100dvh; outline: none;
  opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .35s ease, transform .5s cubic-bezier(.22,.8,.3,1); }
.esb_overlay.is-open .esb_dialog { opacity: 1; transform: none; }
.esb_mono { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; }

/* ---------- top bar ---------- */
.esb_top { flex: none; display: flex; align-items: center; gap: 18px; padding: 18px 26px 0; min-height: 64px; }
.esb_ident { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.esb_kicker { font-size: 11px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: #00d4ff; }
.esb_title { font-size: 15px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esb_title em { font-style: normal; font-weight: 400; color: rgba(255,255,255,.5); margin-left: 8px; }
.esb_actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.esb_overlay a.esb_dl { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px 9px 14px; border-radius: 8px; text-decoration: none;
  font-size: 13px; font-weight: 600; letter-spacing: .3px; color: #fff; background: rgba(0,212,255,.10); border: 1px solid rgba(0,212,255,.45);
  transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.esb_overlay a.esb_dl svg { width: 16px; height: 16px; }
.esb_overlay a.esb_dl span { font-weight: 400; color: rgba(255,255,255,.55); }
.esb_overlay a.esb_dl:hover, .esb_overlay a.esb_dl:focus-visible { background: rgba(0,212,255,.22); border-color: #00d4ff; transform: translateY(-1px); outline: none; }
.esb_overlay button.esb_x { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
  background: rgba(10,20,34,.85) !important; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; color: rgba(255,255,255,.7) !important;
  transition: color .2s ease, border-color .2s ease, transform .2s ease; }
.esb_overlay button.esb_x svg { width: 16px; height: 16px; }
.esb_overlay button.esb_x:hover, .esb_overlay button.esb_x:focus-visible { color: #00d4ff !important; border-color: rgba(0,212,255,.6); transform: rotate(90deg); outline: none; }

/* ---------- stage + book ---------- */
.esb_stage { flex: 1 1 auto; position: relative; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 14px 0; overflow: hidden; }
.esb_book { position: relative; width: calc(var(--pw) * 2); height: var(--ph); perspective: 3200px; perspective-origin: 50% 50%;
  transform: translateX(calc(var(--pw) * -0.5)); transition: transform var(--dur) cubic-bezier(.4,.05,.2,1); }
.esb_book.at-end { transform: translateX(calc(var(--pw) * 0.5)); }
.esb_book.mid { transform: none; }
.esb_book::before { content: ''; position: absolute; left: 4%; right: 4%; bottom: -4%; height: 12%; border-radius: 50%;
  background: rgba(0,0,0,.75); filter: blur(24px); z-index: 0; pointer-events: none; transition: left var(--dur) ease, right var(--dur) ease; }
.esb_book.at-start::before { left: 50%; }
.esb_book.at-end::before { right: 50%; }

/* ---------- sheets, strips, faces ----------
   A sheet is K nested strips (K = 10, --kn = K - 1, set by the JS). The
   sheet turns; each nested strip adds a few degrees while turning, so the
   page curls. Faces carry the page image as a background sized to the
   whole page and offset by the strip index (--k), front slices left to
   right and back slices right to left because the back face is mirrored.
   Only .is-live sheets render: the top of each stack and any mid-turn. */
.esb_sheet { position: absolute; top: 0; left: 50%; width: var(--pw); height: 100%; transform-origin: left center; transform-style: preserve-3d;
  transition: transform var(--dur) cubic-bezier(.4,.05,.2,1); cursor: pointer; visibility: hidden; }
.esb_sheet.is-live { visibility: visible; }
.esb_sheet.is-flipped { transform: rotateY(-180deg); }
.esb_sheet.is-peek { transform: rotateY(-7deg); }
.esb_sheet.is-flipped.is-peek { transform: rotateY(-173deg); }

.esb_strip { position: absolute; top: 0; left: 0; width: var(--sw); height: 100%; transform-style: preserve-3d; transform-origin: 0 50%;
  transition: transform .5s ease; }
.esb_strip .esb_strip { left: var(--sw); }
.esb_sheet.is-peek .esb_strip .esb_strip { transform: rotateY(1.6deg); }
.esb_sheet.is-flipped.is-peek .esb_strip .esb_strip { transform: rotateY(-1.6deg); }

/* faces overlap the next strip by 1px so no hairline shows between layers;
   the last strip keeps its exact width so nothing overhangs the page edge */
.esb_face { position: absolute; top: 0; left: 0; width: calc(var(--sw) + 1px); height: 100%; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background-color: #0b1626; background-repeat: no-repeat;
  background-size: var(--pw) 100%, var(--pw) 100%; }
.esb_f_front { background-position: calc(var(--k) * var(--sw) * -1) 0, calc(var(--k) * var(--sw) * -1) 0;
  background-image: linear-gradient(to right, rgba(0,0,0,.30), rgba(0,0,0,.06) 9%, transparent 16%, transparent 92%, rgba(255,255,255,.05)), var(--front, none); }
.esb_f_back { transform: rotateY(180deg);
  background-position: calc((var(--kn) - var(--k)) * var(--sw) * -1) 0, calc((var(--kn) - var(--k)) * var(--sw) * -1) 0;
  background-image: linear-gradient(to left, rgba(0,0,0,.30), rgba(0,0,0,.06) 9%, transparent 16%, transparent 92%, rgba(255,255,255,.05)), var(--back, none); }
.esb_last > .esb_face { width: var(--sw); }
/* blank back face of single-layout sheets */
.esb_sheet.is-blank .esb_f_back { background-image: linear-gradient(to bottom, #12213a, #0b1626); background-size: 100% 100%; background-position: 0 0; }

/* loading cover: dark with a faint shimmer until the page image lands */
.esb_face::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 1; transition: opacity .45s ease;
  background: #0b1626 linear-gradient(115deg, transparent 40%, rgba(255,255,255,.05) 50%, transparent 60%); }
.esb_sheet.f-in .esb_f_front::before, .esb_sheet.b-in .esb_f_back::before, .esb_sheet.is-blank .esb_f_back::before { opacity: 0; }

/* turn shading: one gradient across the whole page, darkest at the free edge,
   mapped strip by strip like the image so it reads as continuous; fades in
   and out over the turn */
.esb_face::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background-repeat: no-repeat; background-size: var(--pw) 100%; }
.esb_f_front::after { background-image: linear-gradient(to right, rgba(0,0,0,.03), rgba(0,0,0,.14) 55%, rgba(0,0,0,.40));
  background-position: calc(var(--k) * var(--sw) * -1) 0; }
.esb_f_back::after { background-image: linear-gradient(to left, rgba(0,0,0,.03), rgba(0,0,0,.14) 55%, rgba(0,0,0,.40));
  background-position: calc((var(--kn) - var(--k)) * var(--sw) * -1) 0; }
.esb_sheet.is-turning .esb_face::after { animation: esbShade var(--dur) ease; }

/* the bend itself: forward turns curl one way, backward turns the other */
@keyframes esbBendF { 0% { transform: rotateY(0deg); } 45% { transform: rotateY(3.4deg); } 100% { transform: rotateY(0deg); } }
@keyframes esbBendB { 0% { transform: rotateY(0deg); } 45% { transform: rotateY(-3.4deg); } 100% { transform: rotateY(0deg); } }
@keyframes esbShade { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 0; } }
.esb_sheet.is-turning.is-fwd .esb_strip .esb_strip { animation: esbBendF var(--dur) cubic-bezier(.45,.05,.35,1); }
.esb_sheet.is-turning.is-bwd .esb_strip .esb_strip { animation: esbBendB var(--dur) cubic-bezier(.45,.05,.35,1); }

/* ---------- arrows ---------- */
.esb_overlay button.esb_arrow { position: absolute; top: 50%; z-index: 30; width: 54px; height: 54px; margin-top: -27px; display: flex; align-items: center; justify-content: center; padding: 0;
  cursor: pointer; background: rgba(10,20,34,.7) !important; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: rgba(255,255,255,.75) !important;
  transition: color .2s ease, border-color .2s ease, background .2s ease, opacity .3s ease, transform .2s ease; }
.esb_overlay button.esb_arrow svg { width: 22px; height: 22px; }
.esb_overlay button.esb_arrow:hover, .esb_overlay button.esb_arrow:focus-visible { color: #00d4ff !important; border-color: rgba(0,212,255,.6); background: rgba(0,212,255,.10) !important; outline: none; }
.esb_overlay button.esb_arrow:hover { transform: scale(1.06); }
.esb_prev { left: 26px; }
.esb_next { right: 26px; }
.esb_overlay button.esb_arrow[disabled] { opacity: 0; pointer-events: none; }

/* ---------- foot: counter, section, ticks, thumbs, hint ---------- */
.esb_foot { position: relative; flex: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px 24px; padding: 8px 26px 18px; }
.esb_overlay button.esb_counter { font-size: 13px; letter-spacing: 1px; color: rgba(255,255,255,.5) !important; white-space: nowrap; background: transparent !important; border: 0; padding: 0; margin: 0; cursor: pointer; line-height: 1.4; }
.esb_overlay button.esb_counter:hover, .esb_overlay button.esb_counter:focus-visible { color: rgba(255,255,255,.8) !important; outline: none; }
.esb_counter b { font-weight: 600; color: #fff; }
.esb_section { font-size: 12.5px; letter-spacing: .3px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.esb_section b { color: #fff; font-weight: 600; }
.esb_ticks { display: flex; gap: 4px; align-items: center; justify-content: center; min-width: 0; }
.esb_overlay button.esb_tick { flex: 1 1 0; max-width: 34px; height: 22px; padding: 0; margin: 0; border: 0; cursor: pointer; background: transparent !important; position: relative; }
.esb_tick::after { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.16); transition: background .25s ease; }
.esb_tick:hover::after, .esb_tick:focus-visible::after { background: rgba(0,212,255,.55); }
.esb_tick:focus-visible { outline: none; }
.esb_tick.is-read::after { background: rgba(0,212,255,.35); }
.esb_tick.is-cur::after { background: #00d4ff; box-shadow: 0 0 10px rgba(0,212,255,.6); }
.esb_hint { grid-column: 1 / -1; text-align: center; font-size: 12px; letter-spacing: .4px; color: rgba(255,255,255,.4); transition: opacity .6s ease; }
.esb_hint.is-gone { opacity: 0; }
.esb_hint kbd { font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace; font-size: 11px; padding: 1px 6px; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; color: rgba(255,255,255,.6); }

/* thumbnail strip: appears while the pointer is over the ticks, or on tap of the counter */
.esb_thumbs { position: absolute; left: 0; right: 0; bottom: 100%; margin-bottom: 0; display: flex; gap: 8px; justify-content: center; padding: 14px 26px 10px;
  background: linear-gradient(to top, rgba(3,8,16,.96), rgba(3,8,16,.7) 70%, transparent);
  pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; overflow-x: auto; scrollbar-width: none; }
.esb_thumbs::-webkit-scrollbar { display: none; }
.esb_foot.show-thumbs .esb_thumbs { opacity: 1; transform: none; pointer-events: auto; }
.esb_overlay button.esb_thumb { flex: none; width: 62px; height: 88px; padding: 0; margin: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 4px; overflow: hidden; cursor: pointer;
  background: #0b1626 !important; opacity: .7; transition: opacity .2s ease, border-color .2s ease, transform .2s ease; }
.esb_thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.esb_thumb:hover, .esb_thumb:focus-visible { opacity: 1; border-color: rgba(0,212,255,.6); transform: translateY(-3px); outline: none; }
.esb_thumb.is-cur { opacity: 1; border-color: #00d4ff; box-shadow: 0 0 14px rgba(0,212,255,.35); }

/* ---------- single-page layout (phones, narrow portrait) ---------- */
.esb_overlay.esb-single { --ph: min(calc(100vh - 190px), calc((100vw - 32px) * 1.41513)); --ph: min(calc(100dvh - 190px), calc((100vw - 32px) * 1.41513)); --dur: .75s; }
.esb_overlay.esb-single .esb_book { width: var(--pw); transform: none !important; }
.esb_overlay.esb-single .esb_book::before { left: 6% !important; right: 6% !important; }
.esb_overlay.esb-single .esb_sheet { left: 0; }
.esb_overlay.esb-single .esb_f_front { background-image: linear-gradient(to right, rgba(0,0,0,.12), transparent 8%), var(--front, none); }
.esb_overlay.esb-single .esb_sheet.is-peek { transform: rotateY(-4deg); }
.esb_overlay.esb-single .esb_sheet.is-peek .esb_strip .esb_strip { transform: rotateY(1deg); }

@media (max-width: 760px) {
  .esb_top { padding: 12px 14px 0; gap: 10px; min-height: 52px; }
  .esb_title { display: none; }
  .esb_overlay a.esb_dl { padding: 8px 12px; font-size: 12px; }
  .esb_overlay a.esb_dl span { display: none; }
  .esb_stage { padding: 10px 0; }
  .esb_overlay button.esb_arrow { width: 42px; height: 42px; margin-top: -21px; background: rgba(10,20,34,.55) !important; }
  .esb_overlay button.esb_arrow svg { width: 18px; height: 18px; }
  .esb_prev { left: 6px; } .esb_next { right: 6px; }
  .esb_foot { grid-template-columns: auto 1fr; gap: 10px 14px; padding: 6px 14px 14px; }
  .esb_section { display: none; }
  .esb_ticks { gap: 3px; }
  .esb_overlay button.esb_tick { max-width: none; }
  .esb_hint { font-size: 11px; }
  .esb_thumbs { justify-content: flex-start; padding: 8px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .esb_overlay { --dur: .01s; }
  .esb_backdrop, .esb_dialog, .esb_book, .esb_sheet, .esb_strip, .esb_face::before, .esb_thumbs { transition: none; }
  .esb_sheet.is-turning .esb_strip .esb_strip, .esb_sheet.is-turning .esb_face::after { animation: none; }
  .esb_sheet.is-peek { transform: none; }
  .esb_sheet.is-flipped.is-peek { transform: rotateY(-180deg); }
  .esb_sheet.is-peek .esb_strip .esb_strip, .esb_sheet.is-flipped.is-peek .esb_strip .esb_strip { transform: none; }
}