/* ==========================================================================
   PROSPECTUS READER (prospectus.php): a full-screen page of its own
   The book follows the college's sample (ICT Milestones 2025):
   every sheet is stacked with --i, the book remembers how many sheets are
   turned in --c, and a sheet turns by rotating 180° around its left edge.
   Added here: drag-to-turn, page shading while a page turns, a lift on
   hover, and a real page-turn for the one-page view on phones.
   ========================================================================== */

:root {
  --ink: #12303f;
  --navy: #1e4356;
  --steel: #2f6f93;
  --maroon: #8e2a35;
  --line: #dbe3e8;
  --muted: #5d6e78;
  --font-ui: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-head: "Raleway", "Segoe UI", system-ui, sans-serif;
  --bar-h: 60px;
  --side: 92px;                 /* room for the side arrows */

  /* PAGE-TURN SPEED: how long one page takes to turn.
     Bigger = slower (e.g. 1.6s), smaller = faster (e.g. 1s). */
  --turn-time: 1.5s;            /* the open book (computers, landscape tablets) */
  --turn-time-phone: 1.2s;      /* one page at a time (phones, portrait tablets) */
}

html, body { height: 100%; }
body.reader-body {
  margin: 0;
  overflow: hidden;
  font-family: var(--font-ui);
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 55%),
    radial-gradient(circle farthest-corner at 50% 50%, hsl(187 22% 88%) 30%, hsl(160 18% 93%) 70%, hsl(200 22% 85%) 100%);
  -webkit-tap-highlight-color: transparent;
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.reader {
  position: fixed; inset: 0;
  display: grid;
  grid-template-rows: var(--bar-h) minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);   /* never wider than the screen */
}

/* ---- Top bar ------------------------------------------------------------ */
.reader-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 clamp(12px, 2vw, 28px);
  padding-top: env(safe-area-inset-top);
  background: linear-gradient(180deg, rgba(14, 38, 50, .97), rgba(18, 48, 63, .94));
  box-shadow: 0 6px 24px -14px rgba(0, 0, 0, .6);
  position: relative; z-index: 20;
}
.reader-brand { display: flex; align-items: center; gap: .7rem; min-width: 0; color: #fff; text-decoration: none; }
.reader-brand img { width: 40px; height: 40px; flex: none; }
.reader-brand span { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.reader-brand strong { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-brand small { font-size: .78rem; color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.reader-tools { display: flex; align-items: center; gap: .4rem; flex: none; }
.tool {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 40px; padding: 0 .95rem;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: #fff; font: 500 .88rem/1 var(--font-ui); text-decoration: none; cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .2s;
}
.tool:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); color: #fff; }
.tool:focus-visible, .nav-btn:focus-visible, .reader-arrow:focus-visible, .reader-btn:focus-visible { outline: 3px solid #f2c14e; outline-offset: 2px; }
.tool .bi { font-size: 1.05rem; }
.tool-close { background: var(--maroon); border-color: transparent; }
.tool-close:hover { background: #a63340; border-color: transparent; }

/* ---- Stage ---------------------------------------------------------------- */
.reader-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 0;
  overflow: hidden;
  perspective: 2800px;
  container-type: size;
}

/* Loading screen (sample: #loading-screen + .loader) */
.reader-loading {
  position: absolute; inset: 0; z-index: 15;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: rgba(245, 248, 249, .88);
  color: var(--navy); font-size: 1rem;
  transition: opacity .4s ease, visibility .4s;
}
.reader.is-ready .reader-loading { opacity: 0; visibility: hidden; }
.reader-spinner { width: 58px; height: 58px; border-radius: 50%; border: 7px solid #e3eaee; border-top-color: var(--steel); animation: reader-spin 1s linear infinite; }
@keyframes reader-spin { to { transform: rotate(360deg); } }

/* Side arrows */
.reader-arrow {
  position: absolute; top: 50%; z-index: 12;
  width: 56px; height: 56px; margin-top: -28px;
  display: grid; place-items: center;
  border: 1px solid rgba(30, 67, 86, .12); border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  color: var(--navy); font-size: 1.5rem; cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(16, 42, 67, .55);
  transition: background-color .2s, color .2s, transform .2s, opacity .2s;
}
.reader-arrow.is-prev { left: max(16px, env(safe-area-inset-left)); }
.reader-arrow.is-next { right: max(16px, env(safe-area-inset-right)); }
.reader-arrow:hover:not(:disabled) { background: var(--navy); color: #fff; transform: scale(1.06); }
.reader-arrow:disabled { opacity: .25; cursor: default; }

/* ---- The open book (large screens) ------------------------------------- */
.flipbook {
  --c: 0;
  /* One page wide. As tall as the stage allows, while the open spread fits between the arrows. */
  --pw: min(calc((100vh - var(--bar-h) - 150px) * var(--page-w) / var(--page-h)), calc((100vw - 2 * var(--side)) / 2));
  position: relative;
  display: none;
  flex: none;
  width: var(--pw);
  aspect-ratio: var(--page-w) / var(--page-h);
  pointer-events: none;
  transform-style: preserve-3d;
  transition: translate var(--turn-time) cubic-bezier(.45, .05, .25, 1);
  translate: calc(min(var(--c), 1) * 50%) 0%;
}
@supports (width: 1cqw) {
  .flipbook { --pw: min(calc((100cqh - 32px) * var(--page-w) / var(--page-h)), calc((100cqw - 2 * var(--side)) / 2)); }
}
.reader[data-mode="book"] .flipbook { display: flex; }
.flipbook.is-dragging { transition: none; }

.sheet {
  --thickness: 4;
  flex: none;
  display: flex;
  width: 100%; height: 100%;
  pointer-events: all;
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  cursor: pointer;
  transform-style: preserve-3d;
  transform-origin: left center;
  transition: transform var(--turn-time), rotate var(--turn-time) cubic-bezier(.45, .05, .3, 1) calc((min(var(--i), var(--c)) - max(var(--i), var(--c))) * 80ms);
  translate: calc(var(--i) * -100%) 0px 0px;
  transform: translateZ(calc((var(--c) - var(--i) - .5) * calc(var(--thickness) * .23vh)));
  rotate: 0 1 0 calc(clamp(0, var(--c) - var(--i), 1) * -180deg);
}
.sheet.is-dragging { transition: none; cursor: grabbing; }
.sheet.is-released { transition: transform var(--turn-time), rotate calc(var(--turn-time) * .6) cubic-bezier(.2, .7, .3, 1) !important; }

/* A slight lift when the mouse is over a page: it shows the page can be turned */
@media (hover: hover) and (pointer: fine) {
  .sheet.is-right:not(.is-dragging):not(.is-released):hover { rotate: 0 1 0 -6deg; transition: transform var(--turn-time), rotate .4s ease-out; }
  .sheet.is-left:not(.is-dragging):not(.is-released):hover  { rotate: 0 1 0 -174deg; transition: transform var(--turn-time), rotate .4s ease-out; }
}

.sheet-face {
  position: relative;
  flex: none;
  width: 100%; height: 100%;
  overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: #fff;
  translate: 0px;
  box-shadow: 0 .8em 2em -.6em rgba(16, 42, 67, .35);
}
.sheet-front { border-radius: .2em .6em .6em .2em; background: linear-gradient(to left, #f7f7f7 80%, #eee 100%); }
.sheet-back  { border-radius: .6em .2em .2em .6em; background: linear-gradient(to right, #f7f7f7 80%, #eee 100%); translate: -100% 0; rotate: 0 1 0 180deg; }

.sheet-face img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; -webkit-user-drag: none; }
.sheet-face img.is-loaded { opacity: 1; }

/* Spine shading so the open book reads as paper */
.sheet-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sheet-front::after { background: linear-gradient(to right, rgba(0, 0, 0, .16), rgba(0, 0, 0, .05) 3%, transparent 9%); }
.sheet-back::after  { background: linear-gradient(to left,  rgba(0, 0, 0, .16), rgba(0, 0, 0, .05) 3%, transparent 9%); }
.sheet.is-cover .sheet-front::after { background: linear-gradient(to right, rgba(0, 0, 0, .2), transparent 4%); }

/* Shading while a page turns: darker as it stands up, light again as it lands */
.sheet-face::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: var(--shade, 0);
}
.sheet-front::before { background: linear-gradient(to left, rgba(0, 0, 0, .05), rgba(0, 0, 0, .42)); }
.sheet-back::before  { background: linear-gradient(to right, rgba(0, 0, 0, .05), rgba(0, 0, 0, .42)); }
.sheet.is-turning .sheet-face::before { animation: page-shade var(--turn-time) ease-in-out; }
@keyframes page-shade { 0% { opacity: 0; } 50% { opacity: .9; } 100% { opacity: 0; } }

/* Last sheet: back to the first page (sample: .button-page) */
.sheet-end .sheet-front { background: linear-gradient(160deg, #fff 0%, #eef4f6 100%); cursor: default; }
.sheet-end .sheet-back { visibility: hidden; }
.sheet-end-inner {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .85rem;
  padding: 2rem; text-align: center;
}
.sheet-end-inner img { width: 88px; height: 88px; opacity: 1; }
.sheet-end-title { margin: 0 0 .4rem; font-family: var(--font-head); font-weight: 700; font-size: 1.45rem; color: var(--navy); }

.reader-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-width: 200px; padding: .7rem 1.3rem;
  border: 1px solid var(--navy); border-radius: 999px;
  background: #fff; color: var(--navy);
  font: 500 .95rem/1.2 var(--font-ui); text-decoration: none; cursor: pointer;
  transition: background-color .2s, color .2s, transform .2s;
}
.reader-btn:hover { background: var(--navy); color: #fff; }
.reader-btn.is-primary { background: var(--maroon); border-color: var(--maroon); color: #fff; }
.reader-btn.is-primary:hover { background: #a63340; }

/* ---- One page at a time (phones, portrait tablets) --------------------- */
.page-viewer {
  --vw: min(calc((100vh - var(--bar-h) - 140px) * var(--page-w) / var(--page-h)), calc(100vw - 2 * var(--side)));
  position: relative;
  width: var(--vw);
  aspect-ratio: var(--page-w) / var(--page-h);
  margin: 0;
  perspective: 2200px;
  user-select: none; -webkit-user-select: none;
}
@supports (width: 1cqw) {
  .page-viewer { --vw: min(calc((100cqh - 24px) * var(--page-w) / var(--page-h)), calc(100cqw - 2 * var(--side))); }
}
.reader[data-mode="book"] .page-viewer { display: none; }
.vp-page, .vp-face {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: .3em .7em .7em .3em;
  background: #fff;
  box-shadow: 0 1em 2.4em -.8em rgba(16, 42, 67, .45);
  -webkit-user-drag: none;
}
.vp-page { object-fit: cover; }
/* The turning page: a front (the page) and a paper back, like a real sheet */
.vp-flip { position: absolute; inset: 0; z-index: 4; transform-style: preserve-3d; transform-origin: left center; will-change: transform; }
.vp-face { overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.vp-face img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vp-back { transform: rotateY(180deg); border-radius: .7em .3em .3em .7em; background: linear-gradient(to left, #e9ecec 0%, #fbfbfa 18%, #f4f5f4 100%); }
.vp-shade { position: absolute; inset: 0; background: linear-gradient(to left, rgba(0, 0, 0, .05), rgba(0, 0, 0, .45)); opacity: 0; }
.vp-back .vp-shade { background: linear-gradient(to right, rgba(0, 0, 0, .04), rgba(0, 0, 0, .3)); }
.vp-flip.turn-fwd  { animation: vp-fwd var(--turn-time-phone) cubic-bezier(.45, .05, .3, 1) forwards; }
.vp-flip.turn-back { animation: vp-back var(--turn-time-phone) cubic-bezier(.45, .05, .3, 1) forwards; }
.vp-flip.turn-fwd .vp-front .vp-shade  { animation: vp-shade-in var(--turn-time-phone) ease-in forwards; }
.vp-flip.turn-back .vp-front .vp-shade { animation: vp-shade-out var(--turn-time-phone) ease-out forwards; }
.vp-flip.turn-fwd .vp-back .vp-shade  { animation: vp-shade-out var(--turn-time-phone) ease-out forwards; }
.vp-flip.turn-back .vp-back .vp-shade { animation: vp-shade-in var(--turn-time-phone) ease-in forwards; }
@keyframes vp-fwd  { from { transform: rotateY(0deg); } to { transform: rotateY(-180deg); } }
@keyframes vp-back { from { transform: rotateY(-180deg); } to { transform: rotateY(0deg); } }
@keyframes vp-shade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes vp-shade-out { from { opacity: 1; } to { opacity: 0; } }

/* Invisible tap zones: left half = previous page, right half = next page */
.viewer-zone { position: absolute; top: 0; bottom: 0; z-index: 6; width: 50%; border: 0; padding: 0; background: transparent; cursor: pointer; }
.viewer-prev { left: 0; cursor: w-resize; }
.viewer-next { right: 0; cursor: e-resize; }

/* ---- Bottom controls ------------------------------------------------------ */
.reader-foot {
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .55rem 12px calc(.65rem + env(safe-area-inset-bottom));
  position: relative; z-index: 20;
}
.reader-nav {
  display: flex; align-items: center; gap: .45rem;
  padding: .35rem .5rem;
  border: 1px solid rgba(30, 67, 86, .12); border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px -18px rgba(16, 42, 67, .6);
  max-width: 100%;
}
.nav-btn {
  flex: none; width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 1.1rem; cursor: pointer;
  transition: background-color .2s, opacity .2s, transform .2s;
}
.nav-btn:hover:not(:disabled) { background: var(--maroon); transform: translateY(-1px); }
.nav-btn:disabled { opacity: .3; cursor: default; }
.reader-range { flex: 1 1 auto; width: clamp(110px, 26vw, 340px); min-width: 48px; accent-color: var(--maroon); cursor: pointer; }
.reader-status { flex: none; margin: 0 .55rem 0 .2rem; min-width: 9.5rem; font-size: .9rem; font-weight: 500; text-align: center; white-space: nowrap; }
.reader-hint { margin: 0; max-width: 100%; text-align: center; font-size: .8rem; color: var(--muted); transition: opacity .5s ease; }
.reader-hint.is-hidden { opacity: 0; }
.reader-hint .hint-book { display: none; }
.reader[data-mode="book"] .hint-book { display: inline; }
.reader[data-mode="book"] .hint-single { display: none; }

.reader-empty, .reader-noscript { margin: auto; padding: 2rem; text-align: center; font-size: 1.05rem; }
.reader-empty .bi { display: block; font-size: 2.4rem; color: var(--steel); margin-bottom: .5rem; }
.reader-noscript { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; }

/* ---- Smaller screens -------------------------------------------------------- */
@media (max-width: 991.98px) {
  .tool span { display: none; }
  .tool { width: 40px; padding: 0; justify-content: center; }
}
@media (max-width: 599.98px) {
  :root { --bar-h: 56px; --side: 10px; }
  .reader-arrow { display: none; }
  .reader-brand img { width: 34px; height: 34px; }
  .reader-brand strong { font-size: .95rem; }
  .reader-tools { gap: .3rem; }
  .tool { width: 36px; height: 36px; }
  .reader-status { min-width: 0; font-size: .82rem; margin-right: .35rem; }
  .reader-range { width: 30vw; }
  .reader-nav { gap: .3rem; padding: .3rem .4rem; }
  .nav-btn { width: 36px; height: 36px; }
}
@media (max-width: 380px) {
  .reader-brand small { display: none; }
  .nav-btn[data-pros-first] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .flipbook, .sheet { transition: none !important; }
  .sheet.is-turning .sheet-face::before, .vp-flip, .vp-shade { animation: none !important; }
}