/* WeBrandex — 3D company profile book (home page). Companion: assets/js/book.js */

.wbk-section { position: relative; overflow: hidden; background: #F3F5FA; padding: 6rem 0 5rem; }
@media (min-width: 1024px) { .wbk-section { padding: 8rem 0 6rem; } }

/* Brand parallelogram plate behind the book */
.wbk-slab {
  position: absolute; left: 2%; right: 2%; top: 17%; bottom: 0;
  transform: skewX(-12deg);
  background:
    radial-gradient(60% 70% at 50% 40%, rgba(80,110,235,.55), rgba(80,110,235,0) 70%),
    linear-gradient(135deg, #04145E 0%, #030B33 100%);
  box-shadow: 0 40px 90px rgba(3, 11, 51, .28);
  pointer-events: none;
}
.wbk-slab::after { /* second, thin accent plate */
  content: ""; position: absolute; right: -2.2rem; top: 2.2rem; bottom: -2.2rem; width: 38%;
  border: 1px solid rgba(43, 75, 208, .35); z-index: -1;
}

.wbk-head { position: relative; z-index: 2; }

/* ---------- stage ---------- */
.wbk { position: relative; z-index: 2; margin-top: 3rem; padding-bottom: 2.4rem; user-select: none; -webkit-user-select: none; }
.wbk-stage {
  position: relative; width: 100%; outline: none; cursor: grab;
  perspective: 2600px; perspective-origin: 50% 38%;
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.wbk-stage.is-drag { cursor: grabbing; }
.wbk-stage:focus-visible { box-shadow: 0 0 0 3px rgba(157, 178, 255, .8); }
.wbk.is-single .wbk-stage { overflow: hidden; }
.wbk-scene { position: absolute; left: 50%; top: 0; width: 0; height: 100%; transform-style: preserve-3d; will-change: transform; }
.wbk-book { position: absolute; left: 0; width: 0; transform-style: preserve-3d; }

.wbk-board, .wbk-boardedge, .wbk-shadow, .wbk-edge, .wbk-spine, .wbk-leaf { position: absolute; transform-style: preserve-3d; }
.wbk-leaf { left: 0; top: 0; }
.wbk-sp { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform-style: preserve-3d; }
.wbk-fc { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-color: #f6f7fb; background-repeat: no-repeat; }
.wbk-fc.b { transform: rotateY(180deg); }
.wbk-dy { position: absolute; inset: 0; background: #020a33; opacity: 0; pointer-events: none; }

/* back board (inside of the back cover) */
.wbk-board {
  background:
    linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0) 14%),
    linear-gradient(160deg, #0a1d78, #04145E 55%, #030B33);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
.wbk-board img { position: absolute; left: 50%; top: 50%; width: 46%; transform: translate(-50%, -50%); opacity: .16; pointer-events: none; }
.wbk-boardedge { background: linear-gradient(#0a1d78, #030B33); }
.wbk-shadow { background: rgba(2, 8, 40, .5); box-shadow: 0 0 34px 10px rgba(2, 8, 40, .45), 14px 38px 70px 4px rgba(2, 8, 40, .5); border-radius: 2px; pointer-events: none; }
.wbk-spine { background: linear-gradient(90deg, #030B33, #0a1d78 40%, #04145E); }
.wbk-edge {
  background: repeating-linear-gradient(to right, #fbfaf6 0, #fbfaf6 .5px, #d8d9d4 .5px, #d8d9d4 1px);
  pointer-events: none;
}
.wbk-edge.v { background: repeating-linear-gradient(to bottom, #fbfaf6 0, #fbfaf6 .5px, #d6d7d2 .5px, #d6d7d2 1px); }

/* ---------- controls ---------- */
.wbk-ui { position: relative; z-index: 3; margin: 2.2rem auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.6rem; color: #fff; }
.wbk-btn {
  display: inline-grid; place-items: center; height: 3rem; width: 3.4rem; border: 1px solid rgba(255,255,255,.35); color: #fff; background: rgba(3, 11, 51, .35);
  transform: skewX(-12deg); transition: background .25s, color .25s, border-color .25s, opacity .25s; cursor: pointer; backdrop-filter: blur(4px);
}
.wbk-btn > * { transform: skewX(12deg); display: block; }
.wbk-btn:hover:not(:disabled) { background: #fff; color: #04145E; border-color: #fff; }
.wbk-btn:disabled { opacity: .3; cursor: default; }
.wbk-btn:focus-visible { outline: 2px solid #9DB2FF; outline-offset: 3px; }
.wbk-btn svg { width: 1.1rem; height: 1.1rem; }
.wbk-meter { min-width: 13rem; text-align: center; }
.wbk-meter b { display: block; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; color: #fff; }
.wbk-meter small { display: block; margin-top: .25rem; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.wbk-bar { height: 3px; margin-top: .7rem; background: rgba(255,255,255,.18); transform: skewX(-30deg); overflow: hidden; }
.wbk-bar i { display: block; height: 100%; width: 0; background: #9DB2FF; transition: width .6s cubic-bezier(.2,.7,.2,1); }
.wbk-tools { display: flex; gap: .6rem; }
.wbk-hint { position: relative; z-index: 3; text-align: center; margin-top: 1.1rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.55); }

/* fullscreen */
.wbk:fullscreen { display: flex; flex-direction: column; justify-content: center; background: radial-gradient(70% 70% at 50% 40%, #12238a, #030B33); margin: 0; padding: 1rem; }
.wbk:fullscreen .wbk-stage { flex: 1; }

@media (max-width: 760px) {
  .wbk-section { padding: 4.5rem 0 3.5rem; }
  .wbk { margin-top: 2rem; padding-bottom: 1.6rem; }
  /* the skewed plate must still cover the controls at both bottom corners on a narrow screen */
  .wbk-slab { left: -30%; right: -30%; top: 12%; transform: skewX(-6deg); }
  .wbk-slab::after { display: none; }
  .wbk-ui { margin-top: 1.2rem; gap: .9rem .8rem; padding: 0 .25rem; }
  .wbk-meter { order: -1; width: 100%; min-width: 0; }
  .wbk-tools { gap: .45rem; }
  .wbk-btn { height: 2.7rem; width: 2.9rem; }
  .wbk-hint { padding: 0 1rem; font-size: .64rem; letter-spacing: .12em; line-height: 1.5; }
}
@media (max-width: 380px) {
  .wbk-btn { width: 2.6rem; }
  .wbk-ui { gap: .8rem .5rem; }
}
@media (prefers-reduced-motion: reduce) { .wbk-bar i { transition: none; } }