/* Global Directions Co — company profile DESIGN 2, flipbook viewer.
   Screen-only layer, loaded on /company-profile/{lang}/flipbook next to profile.css. The page
   markup is exactly the same as the scroll view — this file only re-stacks the pages into a book
   and adds the chrome, so the copy, the page order/show-hide settings and the PDF stay in one place.

   flipbook.js wraps every page in .flip-face and pairs the faces into .flip-leaf elements, so an
   open book shows two pages at once and a leaf turns around the spine between them, the way a
   printed brochure does. Printing from the flipbook falls back to the normal one-page-per-sheet
   flow (see @media print). */

body.flip{
  height:100vh;
  overflow:hidden;
  background:radial-gradient(125% 115% at 50% -10%,#4A3319 0,#160D05 72%);
}
body.flip .toolbar{display:none}

/* ---------- stage ---------- */
.flip-stage{
  position:fixed;inset:0;
  display:grid;place-items:center;
  padding:16px 16px 104px;
  overflow:hidden;
  cursor:grab;
  touch-action:none;               /* the viewer handles every gesture itself */
}
.flip-stage.is-busy{cursor:grabbing}

/* Zoom and pan live on the view, so the book underneath keeps its millimetre geometry and its
   own fit-to-viewport scale — one transform per job instead of one that has to do both. */
.flip-view{
  position:relative;
  transform:translate(var(--px,0px),var(--py,0px)) scale(var(--zoom,1));
  transform-origin:center center;
  will-change:transform;
}
body.flip-ready .flip-view{transition:transform .2s ease-out}
/* has to out-specify the rule above, or a pulled page eases along a fifth of a second behind
   the finger instead of sticking to it */
body.flip-ready .flip-view.is-panning{transition:none}

/* The pages keep their millimetre size and the book is scaled to the viewport. flipbook.js also
   sets the view's width/height to that scaled size: with transform-origin at the top left the
   layout box then matches what you see, which is what lets the stage centre it — a grid cannot
   centre an item bigger than its own area, and an unscaled A4 spread is wider than most screens.
   --shift slides the book sideways when only one page is open (the cover and the back page), so
   that single page sits in the middle of the screen instead of half a book. */
.flip-book{
  /* pinned to the top left of the view, which is where transform-origin scales it from — a
     block box would otherwise start at the right in the Arabic edition and scale off-screen */
  position:absolute;top:0;left:0;
  width:calc(2 * var(--page-w));
  height:var(--page-h);
  transform:scale(var(--flip-scale,.5)) translateX(var(--shift,0px));
  transform-origin:top left;
  perspective:2800px;
}
body.flip-ready .flip-book{transition:transform .5s cubic-bezier(.4,0,.2,1)}
.flip-book.is-single{width:var(--page-w)}

/* the table the book lies on */
.flip-book::before{
  content:"";position:absolute;left:1.5%;right:1.5%;top:2%;bottom:2%;
  box-shadow:0 7mm 26mm rgba(0,0,0,.55);
}

/* ---------- leaves ---------- */
/* A leaf is one sheet of paper: the page you are reading on the front, the next one on its back.
   It hangs from the spine (the middle of the book, or the binding edge in single-page mode) and
   turns around it. --a is its angle, --t how far through the turn it is (0 flat, 1 turned). */
.flip-leaf{
  position:absolute;top:0;left:50%;
  width:var(--page-w);height:var(--page-h);
  transform-origin:left center;
  transform-style:preserve-3d;
  transform:rotateY(var(--a,0deg));
}
.flip-book.is-single .flip-leaf{left:0}
[dir=rtl] .flip-leaf{left:auto;right:50%;transform-origin:right center}
[dir=rtl] .flip-book.is-single .flip-leaf{left:auto;right:0}

/* the turn only animates once the first spread is placed, so a #pNN deep link opens flat */
body.flip-ready .flip-leaf{transition:transform .62s cubic-bezier(.46,.03,.35,1)}
/* While your finger is on it, it follows you — and this needs the same weight as the rule above
   (a lone .is-dragging loses to body.flip-ready and the sheet lags a full turn behind the hand). */
body.flip-ready .flip-leaf.is-dragging{transition:none}
.flip-leaf.is-flying{z-index:9999!important}     /* and stays on top until it has landed */
.flip-leaf.is-turned{--a:-180deg;--t:1}
[dir=rtl] .flip-leaf.is-turned{--a:180deg}

.flip-face{
  position:absolute;inset:0;
  backface-visibility:hidden;
  overflow:hidden;
  background:#fff;
  box-shadow:0 2mm 9mm rgba(0,0,0,.42);
}
.flip-face--back{transform:rotateY(180deg)}
.flip-face .page{position:absolute;inset:0;margin:0;box-shadow:none}

/* the crease: paper curves away into the binding, so every page darkens towards the spine —
   the front face has the spine on its left edge, the back face (which is flipped over) on its
   right one, and RTL mirrors both because the book is bound on the other side */
.flip-face::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(22,12,4,.22),rgba(22,12,4,0) 6%);
}
.flip-face--back::after{background:linear-gradient(to left,rgba(22,12,4,.22),rgba(22,12,4,0) 6%)}
[dir=rtl] .flip-face::after{background:linear-gradient(to left,rgba(22,12,4,.22),rgba(22,12,4,0) 6%)}
[dir=rtl] .flip-face--back::after{background:linear-gradient(to right,rgba(22,12,4,.22),rgba(22,12,4,0) 6%)}

/* Shading on the turning sheet. A face is only on screen for the first half of its own turn
   (backface-visibility hides it past 90°), so front and back each fade from nothing to their
   darkest exactly at the upright moment, and the sheet reads as one piece of paper. */
.flip-gloss{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to right,rgba(0,0,0,.6),rgba(0,0,0,.04));
}
.flip-face--front .flip-gloss{opacity:calc(var(--t,0) * .9)}
.flip-face--back .flip-gloss{background:linear-gradient(to left,rgba(0,0,0,.6),rgba(0,0,0,.04));opacity:calc((1 - var(--t,0)) * .9)}
body.flip-ready .flip-gloss{transition:opacity .62s cubic-bezier(.46,.03,.35,1)}
.flip-leaf.is-dragging .flip-gloss{transition:none}

/* ---------- chrome ---------- */
.flipbar{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:40;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center;
  width:max-content;               /* left:50% alone would cap the bar at half the viewport */
  max-width:calc(100vw - 24px);
  padding:9px 16px;
  background:rgba(24,14,6,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(184,147,42,.35);
  border-radius:999px;
  color:#F3E7BF;
  font-family:'Poppins','Tajawal',ui-sans-serif,system-ui,sans-serif;
  font-size:12.5px;line-height:1;
  box-shadow:0 10px 34px rgba(0,0,0,.45);
}

.flipbar__nav,.flipbar__zoom{display:flex;align-items:center;gap:8px}
.fb-btn{
  display:grid;place-items:center;
  width:30px;height:30px;padding:0;
  background:var(--gold);color:var(--ink);
  border:0;border-radius:999px;cursor:pointer;
}
.fb-btn:hover{background:var(--gold-light)}
.fb-btn[disabled]{opacity:.3;cursor:default}
.fb-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fb-btn--next svg{transform:rotate(180deg)}
[dir=rtl] .fb-btn--prev svg{transform:rotate(180deg)}
[dir=rtl] .fb-btn--next svg{transform:none}

/* the zoom pair is quieter than the page arrows — it is the secondary control */
.fb-btn--ghost{
  width:26px;height:26px;
  background:rgba(243,231,191,.14);color:#F3E7BF;
  font:600 15px/1 inherit;
}
.fb-btn--ghost:hover{background:rgba(243,231,191,.28)}

.fb-count{min-width:66px;text-align:center;font-variant-numeric:tabular-nums;direction:ltr}
.fb-count b{color:#fff;font-weight:600}
.fb-zoom{min-width:44px;text-align:center;font-variant-numeric:tabular-nums;direction:ltr;background:none;border:0;color:inherit;font:inherit;cursor:pointer;padding:0}
.fb-zoom:hover{color:#fff}

.fb-dots{display:flex;align-items:center;gap:5px;list-style:none;margin:0;padding:0}
.fb-dot{
  width:7px;height:7px;padding:0;
  background:rgba(243,231,191,.32);border:0;border-radius:999px;cursor:pointer;
  transition:background .2s,transform .2s;
}
.fb-dot:hover{background:rgba(243,231,191,.7)}
.fb-dot[aria-current="true"]{background:var(--gold-light);transform:scale(1.5)}

.flipbar__links{display:flex;align-items:center;gap:14px}
.fb-link{color:#F3E7BF;opacity:.8;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:1px;cursor:pointer;background:none;border-top:0;border-left:0;border-right:0;font:inherit}
.fb-link:hover{opacity:1;border-bottom-color:var(--gold)}
.fb-link[aria-current="page"]{opacity:1;color:var(--gold-light);border-bottom-color:var(--gold-light)}
.flipbar .fb-sep{width:1px;height:16px;background:rgba(243,231,191,.22)}

/* a one-off hint that the pages can be dragged, gone as soon as you turn one */
.flip-hint{
  position:fixed;left:50%;bottom:64px;transform:translateX(-50%);z-index:39;
  padding:6px 14px;border-radius:999px;
  background:rgba(24,14,6,.8);color:#F3E7BF;
  font-family:'Poppins','Tajawal',ui-sans-serif,system-ui,sans-serif;font-size:12px;line-height:1;
  pointer-events:none;opacity:0;transition:opacity .4s;
}
.flip-hint.is-on{opacity:.9}

/* tighter chrome on small screens: the dots and the secondary links go first */
@media (max-width:900px){
  .fb-dots{display:none}
  .flipbar{gap:12px;font-size:12px}
}
@media (max-width:620px){
  .flipbar__links .fb-optional{display:none}
  .flip-stage{padding:10px 10px 80px}
}

/* Reduced motion: a shorter, flatter turn rather than none at all. Dragging a page always did
   turn it — the sheet follows the hand, there is no animation to suppress — so switching the
   transition off only affected clicks, and a page that swapped instantly next to one you could
   turn by hand read as a fault rather than as a setting. The turn stays, at half the length and
   without the swing; the parts with nothing to say (the book's re-centring, zoom and pan) go. */
@media (prefers-reduced-motion:reduce){
  body.flip-ready .flip-leaf,
  body.flip-ready .flip-gloss{transition-duration:.3s;transition-timing-function:ease-out}
  body.flip-ready .flip-book,
  body.flip-ready .flip-view{transition:none}
}

/* ---------- print: fall back to the normal brochure flow ---------- */
@media print{
  body.flip{height:auto;overflow:visible;background:#fff}
  .flip-stage{position:static;display:block;padding:0;overflow:visible}
  .flip-view{transform:none!important;width:auto!important;height:auto!important}
  .flip-book{width:auto;height:auto;transform:none;perspective:none}
  .flip-book::before{display:none}
  /* leaves and faces collapse to plain blocks, which prints front, back, front, back — the
     order the pages were written in */
  .flip-leaf,.flip-face{position:static;display:block;width:auto;height:auto;transform:none!important;transform-style:flat;backface-visibility:visible;box-shadow:none;overflow:visible}
  .flip-face::after,.flip-gloss{display:none}
  .flip-face .page{position:relative;inset:auto;margin:0}
  .flipbar,.flip-hint{display:none!important}
}