/* ==========================================================================
   Murlidhar Digital Art — Company Profile Flipbook
   Styles for assets/js/flipbook.js. Intentionally independent of Tailwind so
   the book geometry never depends on a CDN utility class.

   Geometry (all sizes are set in px by the script as --pw / --ph):
     .mdf-stage   viewport that clips the book (horizontally only)
     .mdf-book    exact size of the open spread (2 pages) or one page (mobile)
     .mdf-sheet   one paper leaf: a .front and a .back face, pivots on the spine
   ========================================================================== */

/* ---- Section spacing (kept tight so the book sits close to the hero) ---- */
#brochure { padding-top: 1rem !important; padding-bottom: 1rem !important; }
#brochure .max-w-7xl { max-width: 1200px; }
#brochure .text-center.mb-10 { margin-bottom: .75rem !important; }
#flipbook-shell { padding: .5rem !important; }

/* ---- Host ---------------------------------------------------------------- */
.mdf { position: relative; width: 100%; margin: 0 auto; }
.mdf.is-loading { visibility: hidden; height: 1px; overflow: hidden; }

.mdf-stage {
  position: relative;
  width: 100%;
  /* Clip left/right (needed for the mobile single-page mode where the turned
     leaf exits to the left) but let the 3D-enlarged leaf breathe vertically. */
  clip-path: inset(-40% 0 -40% 0);
  touch-action: pan-y;           /* vertical scroll stays native, horizontal drags turn pages */
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.mdf-stage:focus-visible { outline: 2px solid #B9954E; outline-offset: -3px; }

/* ---- Book ---------------------------------------------------------------- */
.mdf-book {
  position: absolute; left: 50%; top: 50%;
  /* width/height/margins/perspective are set from JS in px */
}

.mdf-ground {
  position: absolute; top: 0;
  width: var(--pw); height: var(--ph);
  background: #fff;
  box-shadow: 0 14px 34px -8px rgba(18, 38, 65, .38), 0 2px 8px rgba(18, 38, 65, .16);
  pointer-events: none;
}
.mdf-ground-l { left: 0; opacity: 0; }
.mdf-ground-r { left: var(--spine); }
.mdf[data-mode="single"] .mdf-ground-l { display: none; }

/* ---- Paper leaf ---------------------------------------------------------- */
.mdf-sheet {
  position: absolute; top: 0; left: var(--spine);
  width: var(--pw); height: var(--ph);
  transform-origin: 0 50%;            /* the spine */
  transform-style: preserve-3d;       /* lets front/back faces live in one 3D space */
  pointer-events: none;
}
.mdf-sheet.is-turning { will-change: transform; }

.mdf-face {
  position: absolute; inset: 0; overflow: hidden;
  background: #fff;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.mdf-face.back { transform: rotateY(180deg); }

.mdf-face img {
  display: block; width: 100%; height: 100%;
  object-fit: contain;                /* never stretch: box has the PDF aspect ratio */
  pointer-events: none; -webkit-user-drag: none; user-select: none;
}
.mdf-face.is-broken::after {
  content: attr(data-error);
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 1rem; text-align: center; font-size: .9rem; color: #173356; background: #f3eee2;
}

/* Gutter shading (static) + turning shade (animated via --shade) */
.mdf-fx { position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(23, 51, 86, .07); }
.mdf-fx::before, .mdf-fx::after { content: ""; position: absolute; inset: 0; }
.mdf-face.front .mdf-fx::before { background: linear-gradient(to right, rgba(0,0,0,.20), rgba(0,0,0,.06) 2.5%, rgba(0,0,0,0) 9%); }
.mdf-face.back  .mdf-fx::before { background: linear-gradient(to left,  rgba(0,0,0,.20), rgba(0,0,0,.06) 2.5%, rgba(0,0,0,0) 9%); }
.mdf-face.front .mdf-fx::after  { background: linear-gradient(to right, rgba(10,8,5,.22), rgba(10,8,5,1)); opacity: var(--shade, 0); }
.mdf-face.back  .mdf-fx::after  { background: linear-gradient(to left,  rgba(10,8,5,.22), rgba(10,8,5,1)); opacity: var(--shade, 0); }

/* Shadow the turning leaf throws on the page underneath */
.mdf-cast { position: absolute; top: 0; height: var(--ph); width: 0; opacity: 0; pointer-events: none; }
.mdf-cast-r { left: var(--spine); background: linear-gradient(to right, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.mdf-cast-l { left: auto; right: calc(100% - var(--spine)); background: linear-gradient(to left, rgba(0,0,0,.55), rgba(0,0,0,0)); }
.mdf[data-mode="single"] .mdf-cast-l { display: none; }

/* ---- Page-corner affordance (folded corner) ------------------------------ */
.mdf-dog {
  position: absolute; bottom: 0; z-index: 60;
  width: var(--dog, 0px); height: var(--dog, 0px);
  opacity: 0; pointer-events: none;
  filter: drop-shadow(-1px -1px 2px rgba(0, 0, 0, .28));
  transition: width .18s ease, height .18s ease, opacity .15s ease;
}
.mdf-dog::before, .mdf-dog::after { content: ""; position: absolute; inset: 0; }
.mdf-dog::before { clip-path: polygon(100% 0, 100% 100%, 0 100%); background: linear-gradient(135deg, #cdc9c1, #ebe8e1); }
.mdf-dog::after  { clip-path: polygon(0 0, 0 100%, 100% 0);       background: linear-gradient(135deg, #fff, #e6e2d9); }
.mdf-dog.next { right: 0; }
.mdf-dog.prev { left: 0; transform: scaleX(-1); }
.mdf.has-next .mdf-dog.next, .mdf.has-prev .mdf-dog.prev { opacity: 1; }
.mdf.is-busy .mdf-dog { opacity: 0 !important; }
@media (hover: hover) and (pointer: fine) { .mdf { --dog: 14px; } }
.mdf.is-hover-next .mdf-dog.next, .mdf.is-hover-prev .mdf-dog.prev { --dog: var(--dog-hover, 44px); }

/* ---- Status / error ------------------------------------------------------ */
.mdf-status { text-align: center; padding: 3rem 1rem; color: rgba(23, 51, 86, .75); }
.mdf-status[hidden] { display: none; }
.mdf-status .mdf-icon { font-size: 2rem; margin-bottom: .75rem; }
.mdf-status p { margin: 0 0 .5rem; }

/* ---- Controls ------------------------------------------------------------ */
.mdf-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1rem; margin-top: 1rem; }
.mdf-btn {
  font: inherit; font-weight: 500; line-height: 1;
  padding: .8rem 1.35rem; border-radius: 9999px;
  border: 1px solid transparent; cursor: pointer;
  background: #173356; color: #fff;
  transition: background-color .25s, color .25s, opacity .25s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.mdf-btn:hover:not(:disabled) { background: #B9954E; }
.mdf-btn:disabled { opacity: .4; cursor: not-allowed; }
.mdf-btn:focus-visible { outline: 3px solid #B9954E; outline-offset: 2px; }
.mdf-btn-outline { background: transparent; color: #173356; border-color: rgba(23, 51, 86, .2); }
.mdf-btn-outline:hover:not(:disabled) { background: #173356; color: #fff; }
.mdf-count { min-width: 150px; text-align: center; font-size: .875rem; font-weight: 500; color: #173356; }

/* ---- Full screen (native API, or fixed-position fallback for iPhone) ----- */
#flipbook-shell.is-fs {
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  padding: 12px 12px 16px !important;
  border-radius: 0; border: 0; box-shadow: none;
  background: #0f2036;
}
#flipbook-shell.is-fake-fs { position: fixed; inset: 0; z-index: 9999; width: 100vw; height: 100vh; height: 100dvh; }
#flipbook-shell.is-fs .mdf { flex: 1 1 auto; min-height: 0; }
#flipbook-shell.is-fs .mdf-stage { position: absolute; inset: 0; height: auto !important; }
#flipbook-shell.is-fs .mdf-controls { margin-top: .75rem; flex: 0 0 auto; }
#flipbook-shell.is-fs .mdf-count { color: #fff; }
#flipbook-shell.is-fs .mdf-btn-outline { color: #fff; border-color: rgba(255, 255, 255, .35); }
#flipbook-shell.is-fs .mdf-btn-outline:hover:not(:disabled) { background: #fff; color: #0f2036; }
html.mdf-lock, html.mdf-lock body { overflow: hidden; }

@media (max-width: 640px) {
  .mdf-btn { padding: .75rem 1.1rem; }
  .mdf-count { order: -1; flex: 1 0 100%; }
}


/* Mobile fit fix: keep the entire landscape page visible inside the viewport. */
@media (max-width: 767px) {
  #brochure { overflow: visible; }
  #flipbook-shell { width: 100%; max-width: 100%; box-sizing: border-box; }
  #company-flipbook { width: 100%; min-width: 0; }
  .mdf-stage { clip-path: none; overflow: hidden; }
  .mdf-controls { gap: .55rem; }
  .mdf-btn { min-height: 42px; }
}


/* Immersive mobile reader */
@media (max-width: 767px) {
  #flipbook-shell.is-fs,
  #flipbook-shell.is-fake-fs {
    box-sizing: border-box;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
             max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    overflow: hidden;
  }
  #flipbook-shell.is-fs .mdf,
  #flipbook-shell.is-fake-fs .mdf { width: 100%; height: 100%; }
  #flipbook-shell.is-fs .mdf-stage,
  #flipbook-shell.is-fake-fs .mdf-stage { inset: 0; }
  #flipbook-shell.is-fs .mdf-controls,
  #flipbook-shell.is-fake-fs .mdf-controls {
    position: absolute; z-index: 10; left: 8px; right: 8px; bottom: 8px;
    justify-content: center; margin: 0; padding: 6px;
    border-radius: 14px; background: rgba(15,32,54,.88);
  }
  #flipbook-shell.is-fs .mdf-count,
  #flipbook-shell.is-fake-fs .mdf-count { color: #fff; }
}


/* Final phone layout: reserve room for controls and fit the complete page. */
@media (max-width: 767px) {
  #brochure { padding-left: 10px !important; padding-right: 10px !important; }
  #flipbook-shell { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
  #company-flipbook { width: 100% !important; min-width: 0 !important; }
  .mdf-stage { width: 100%; max-width: 100%; overflow: hidden; }
  .mdf-page img, .mdf-face img { object-fit: contain; }
  #flipbook-shell.is-fs, #flipbook-shell.is-fake-fs {
    position: fixed !important; inset: 0 !important; z-index: 999999 !important;
    width: 100vw !important; height: 100dvh !important; max-width: none !important;
    margin: 0 !important; border-radius: 0 !important; box-sizing: border-box;
    background: #f5f7ff !important; overflow: hidden !important;
    padding: 8px 8px 62px !important;
  }
  #flipbook-shell.is-fs .mdf-stage, #flipbook-shell.is-fake-fs .mdf-stage {
    height: calc(100dvh - 78px) !important; max-height: calc(100dvh - 78px) !important;
  }
  #flipbook-shell.is-fs .mdf-controls, #flipbook-shell.is-fake-fs .mdf-controls {
    position: fixed !important; z-index: 1000000 !important;
    left: 8px !important; right: 8px !important; bottom: 8px !important;
    display: flex !important; flex-wrap: wrap; justify-content: center;
    margin: 0 !important; padding: 6px !important;
    background: rgba(15,32,54,.94) !important; border-radius: 14px;
  }
}


/* Mobile: keep both facing pages visible together after the cover. */
@media (max-width: 767px) {
  #flipbook-shell { overflow: visible; }
  #company-flipbook { width: 100%; max-width: 100%; }
  .mdf-stage { width: 100%; overflow: hidden; }
  .mdf-book { max-width: 100%; }
  .mdf-face img, .mdf-page img { object-fit: contain; }
}



/* Fullscreen reader follows the actual device orientation; never rotate the page with CSS. */
@media (max-width: 767px) {
  #flipbook-shell.is-fs .mdf-stage, #flipbook-shell.is-fake-fs .mdf-stage {
    position: absolute !important; inset: 0 !important; width: 100% !important;
    height: calc(100dvh - 84px) !important; max-width: 100% !important;
    max-height: none !important; transform: none !important; overflow: hidden !important;
  }
  #flipbook-shell.is-fs #company-flipbook, #flipbook-shell.is-fake-fs #company-flipbook {
    width: 100% !important; height: 100% !important;
  }
}