/* ═══════════════════════════════════════════════════════════════════════════
   styles/ipad-smoothness.css · v183 · 2026-05-18
   User-accepted iPad polish (8 of 12 from preview-ipad-smoothness.html):
     1 · GPU compositor layers
     2 · Tap-highlight removal
     4 · Smooth page-flip animation (CSS half; JS half lives in renderer.js)
     6 · Disable text-select on chrome
    11 · iOS-style sheet modal vocabulary
   (item 5 = haptic JS in chrome.js/counter.js, item 7 = preload JS in
    renderer.js, item 10 = manifest.json — no CSS for those.)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · GPU compositor layers ─────────────────────────────────────────────
   Promote big animated surfaces to their own GPU layer so the browser
   doesn't repaint them every frame. translateZ(0) is the canonical
   layer-creation trick; will-change tells the browser to plan ahead. */
.mushaf-page,
.mushaf-frame,
.mu-mz-attach,
.ed-modes-pop,
.mu-mz-attach .mz-counter,
.mu-mz-attach .mz-screen.is-on {
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

/* ── 2 · Tap-highlight removal ─────────────────────────────────────────────
   iOS Safari paints a grey/blue flash on every tap target by default.
   Kill it across the whole document; individual elements that WANT it can
   override with their own value. */
html, body,
button, a, [role="button"],
.ed-arrow, .ed-pg-input, .ed-surah,
.modes-btn, .ed-modes-pill-v1,
.mz-hub-card, .mz-back, .mz-gear, .step-btn,
.mu-bmk, .mu-util, .ed-undo-reveal {
  -webkit-tap-highlight-color: transparent;
}

/* ── 4 · Smooth page-flip animation (CSS half) ─────────────────────────────
   v194 · faster + more subtle per user · 80 ms cross-fade with a 2 px
   slide (was 180 ms, 6-8 px). Just enough to mask the DOM swap without
   feeling like a deliberate transition. */
.mushaf-frame {
  opacity: 1;
  transition: opacity 0.08s ease, transform 0.08s ease;
}
.mushaf-frame.is-leaving {
  opacity: 0;
  transform: translateZ(0) translateX(-2px);
}
.mushaf-frame.is-entering {
  opacity: 0;
  transform: translateZ(0) translateX(3px);
}

/* ── 6 · Disable text-select on chrome ─────────────────────────────────────
   Toolbar, sidebar, popovers shouldn't accidentally highlight on long-press.
   Verses + readable content (.line, .word, .verse) stay selectable so users
   can copy / share. */
.hdr, .hdr-top, .hdr-bot,
.ed-bar, .ed-row, .ed-row-left, .ed-row-center, .ed-row-right,
.ed-stamp, .ed-modes-pop, .ed-modes-pill-v1,
.mu-mz-attach,
.mu-bmk-icon, .mu-util,
.ed-pg-of, .ed-surah-tr, .ed-surah-ar,
.modes-btn .ed-mp-lbl,
.ed-mp-pop-head, .ed-mp-pop-nm, .ed-mp-pop-sub {
  -webkit-user-select: none;
          user-select: none;
}
.mushaf-page,
.mushaf-page .word,
.mushaf-page .verse,
.mushaf-page .word-glyph {
  -webkit-user-select: text;
          user-select: text;
}

/* ── 11 · iOS-style sheet modal vocabulary ─────────────────────────────────
   When a mode hub modal (blur · tajwid · halo · others marked with class
   `mu-hub-modal` or specific IDs) opens on a touch device, slide it in
   from the bottom with a small drag-handle. Apple HIG canonical pattern.
   This is a SUPPLEMENTAL set of rules · existing modal CSS still applies,
   but on small screens or PWA mode we morph it into a sheet. */
@media (pointer: coarse), (max-width: 1100px) {
  .mu-hub-modal,
  .ed-modal-card,
  .blur-hub-card,
  .tajwid-hub-card,
  .halobank-card {
    /* Sheet on the bottom edge */
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 85vh !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    transform: translateY(0) !important;
    animation: ipad-sheet-up 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    padding-top: 18px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Drag-handle pseudo-element on top of the sheet */
  .mu-hub-modal::before,
  .ed-modal-card::before,
  .blur-hub-card::before,
  .tajwid-hub-card::before,
  .halobank-card::before {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 38px; height: 4px;
    background: rgba(255,255,255,0.22);
    border-radius: 99px;
    pointer-events: none;
  }
}
@keyframes ipad-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}